@charset "utf-8";
@import url('slick.css');
@import url('swiper.min.css');
@import url('jquery-ui.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');


/**************************************************************************************************************
	변수
**************************************************************************************************************/
:root { 
	
	 --brand-color1: #111;
	 --brand-color2: #666;
	 --font-color1: #111;
	 --font-color2: #505050;
	 --font-color3: #767676;
	 --font-color4: #acacac;
	 --background-color: #f7f8fb;
	 --line-color1: #e5e5e5;
	 --line-color2: #d4d4d8;
	 --line-color3: #111;
	 --system-color1: #04b014;
	 --system-color2: #ffaa00;
	 --system-color3: #db1f31;
	 --system-color4: #ff1f53;
	 --system-color5: #EE001D;
}

/***********************************************************************************
	Common
************************************************************************************/
* { -webkit-tap-highlight-color :transparent}
html,body,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,em,font,img,ins,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,ul,ol,li,dl,dt,dd,table,caption,tbody,tfoot,thead,tr,th,td,fieldset,fo7m,label,legend,input,button,textarea,select{margin:0;padding:0}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;margin:0;padding:0}
legend{display:block;overflow:hidden;position:absolute;width:1px;height:1px;font-size:1px;line-height:0;text-indent:-999em;white-space:nowrap; }
fieldset,img,table,caption,tbody,tfoot,thead,tr,th,td,button,hr{border:0 none}
img{vertical-align:middle; }
body li{vertical-align:top;}
ul, li, ol{list-style:none; padding:0; margin:0;}
table{border-collapse:collapse}
caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
button{overflow:visible;border:0 none;cursor:pointer; border-radius:0; background: none; }
button::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner {padding: 0;border: 0 none}
a { text-decoration:none; color: var(--font-color1);  }
address,
em { font-style:normal }
body,input,select,textarea,button,h1,h2,h3,h4,h5,h6 { font-family:'Noto Sans KR', sans-serif; font-size:14px; line-height: 1.55; color: var(--font-color1); text-decoration: none; font-weight:500; letter-spacing: -0.5px; word-break: keep-all;}
textarea,select { border:0;  border-radius:0; resize:none; box-shadow:none; -webkit-appearance:none; appearance:none; font-weight: normal;}
a:hover { text-decoration: none;}
body { -webkit-text-size-adjust: none; background:none; }
form { padding: 0; margin: 0; }
* {box-sizing: border-box; -webkit-box-sizing:border-box;}
::-ms-clear { display: none;}
select::-ms-expand { display:none; }
a,a:active,a:visited { text-decoration:none !important; }
strong { font-weight: 600;}
b { font-weight: 700;}
* { box-sizing: border-box; }
html { font-size:10px; }
img { max-width:100%; }

.m0 { margin:0  !important }
.mb0 { margin-bottom:0  !important }
.mb4 { margin-bottom:4px !important }
.mb8 { margin-bottom:8px !important }
.mb12 { margin-bottom:12px !important }
.mb16 { margin-bottom:16px !important }
.mb20 { margin-bottom:20px !important }
.mb24 { margin-bottom:24px !important }
.mb28 { margin-bottom:28px !important }
.mb32 { margin-bottom:32px !important }
.mb36 { margin-bottom:36px !important }
.mb40 { margin-bottom:40px !important }
.mb60 { margin-bottom:60px !important }

.mr60 { margin-right:60px !important }
.ml4 { margin-left:4px !important }
.ml8 { margin-left:8px !important }
.mt0 { margin-top:0 !important; }
.mt12 { margin-top:12px !important; }
.mt16 { margin-top:16px !important; }
.mt20 { margin-top:20px !important; }
.mt24 { margin-top:24px !important; }
.mt28 { margin-top:28px !important; }
.mt40 { margin-top:40px !important; }
.mt60 { margin-top:60px !important; }
.mt80 { margin-top:80px !important; }
.mt120 { margin-top:120px !important; }

.p0 { padding: 0 !important; }
.pd16 { padding:16px !important; }
.pd24 { padding:24px !important; }
.pdt0 { padding-top: 0 !important; }
.pdt8 { padding-top: 8px !important; }
.pdb0 { padding-bottom: 0 !important; }

.text-center { text-align:center !important }
.text-left { text-align:left !important }
.text-right { text-align:right !important }
.text400 { font-weight: 400;}
.text500 { font-weight: 500;}
.text600 { font-weight: 600;}
.text700 { font-weight: 700;}
.bold { font-weight: 600 !important; }

/* Text */
.f10 { font-size:10px !important; }
.f11 { font-size:11px !important; }
.f12 { font-size:12px !important; }
.f13 { font-size:13px !important; }
.f14 { font-size:14px !important; }
.f16 { font-size:16px !important; }
.f20 { font-size:20px !important; }
.font-color1 { color:var(--font-color1) !important; }
.font-color2 { color:var(--font-color2) !important; }
.font-color3 { color:var(--font-color3) !important; }
.font-color4 { color:var(--font-color4) !important; }
.line-color1 { border-color:var(--line-color1) !important; }
.line-color2 { border-color:var(--line-color2) !important; }
.line-color3 { border-color:var(--line-color3) !important; }
.system-color1 { color:var(--system-color1) !important; }
.system-color2 { color:var(--system-color2) !important; }
.system-color3 { color:var(--system-color3) !important; }
.text400 { font-weight: 400 !important; }
.text500 { font-weight: 500 !important; }

/* 이하 기타 칼라(공통 디자인에 빠짐) */
.system-color4 { color:var(--system-color4) !important;}
.system-color5 { color:var(--system-color5) !important;}


 ::-webkit-scrollbar { width:4px; height: 4px; border-radius:4px;  }
 ::-webkit-scrollbar-thumb { width:4px; border-radius:4px; background: #bbb; }
 ::-webkit-scrollbar-track {  background:none; }



.hidden { position: absolute;left:0; opacity:0; width:0; height: 0; font-size:0; }


#jump_menu	{ width: 100%; z-index: 9999999; }
#jump_menu h1	{ display: block; width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; font-size: 0; position: absolute; }
#jump_menu ul, #jump_menu li	{ position: relative; padding: 0; margin: 0; list-style: none; }
#jump_menu a	{ position: absolute; z-index: -1; left: 0; top: -1000px; display: block; width: 100%; line-height: 45px; text-align: center; font-weight: bold; font-size: 20px; color: #fff; background-color: #3e6dbf; }
#jump_menu a:focus	{ top: 0; z-index: 99999; }

/* Icon */
.ico-notice { display: inline-block; vertical-align: middle; width:32px; height: 32px; background: url(../img/common/ico_notice.svg) no-repeat 50% 50%;}
.ico-topmy { display: inline-block; vertical-align: middle; width:32px; height: 32px; background: url(../img/common/ico_top_my.svg) no-repeat 50% 50%;}
.ico-topcalendar {display: inline-block; vertical-align: middle;  width:32px; height: 32px; background: url(../img/common/ico_calendar2.svg) no-repeat 50% 50%;}
.ico-topbell {display: inline-block; vertical-align: middle;  width:32px; height: 32px; background: url(../img/common/ico_top_bell.svg) no-repeat 50% 50%;}
.ico-topsearch {display: inline-block; vertical-align: middle;  width:32px; height: 32px; background: url(../img/common/ico_top_search.svg) no-repeat 50% 50%;}
.ico-print {display: inline-block; vertical-align: middle;  width:24px; height: 24px; background: url(../img/common/ico_print.svg) no-repeat 50% 50%;}
.ico-share {display: inline-block; vertical-align: middle;  width:24px; height: 24px; background: url(../img/common/ico_share.svg) no-repeat 50% 50%;}
.ico-tip {display: inline-block; vertical-align: middle;  width:24px; height: 24px; background: url(../img/common/ico_tip.svg) no-repeat 50% 50%;}
.ico-more {display: inline-block; vertical-align: middle;  width:20px; height: 20px; background: url(../img/common/ico_more.svg) no-repeat 50% 50%;}
.ico-search {display: inline-block; vertical-align: middle;  width:28px; height: 28px; background: url(../img/common/ico_search.svg) no-repeat 50% 50%;}
.ico-head-arr {display: inline-block; vertical-align: middle;  width:28px; height: 28px; background: url(../img/common/ico_arr_down.svg) no-repeat 50% 50%; transition: all 0.5s ease;}
.ico-head-arr.left {display: inline-block; vertical-align: middle;  width:28px; height: 28px; background: url(../img/common/ico_arr_down.svg) no-repeat 50% 50%; transform: rotate(90deg); }
.ico-head-arr.right {display: inline-block; vertical-align: middle;  width:28px; height: 28px; background: url(../img/common/ico_arr_down.svg) no-repeat 50% 50%; transform: rotate(-90deg); }
.ico-head-arr.down.active { transform: rotate(180deg);}
.ico-file-excel {display: inline-block; vertical-align: middle;  width:28px; height: 28px; background: url(../img/common/ico_file1.svg) no-repeat 50% 50%}
.ico-noimage {display: inline-block; vertical-align: middle;  width:40px; height: 40px; background: url(../img/common/ico_img.svg) no-repeat 50% 50%}

.ico-noimage.men { background: url(../img/common/ico_men.svg) no-repeat 50% 50% / contain; }
.ico-noimage.women { background: url(../img/common/ico_women.svg) no-repeat 50% 50% / contain; }

.ico-complete {display: inline-block; vertical-align: middle;  width:60px; height: 60px; background: url(../img/common/ico_complete.svg) no-repeat 50% 50%}
.ico-complete2 {display: inline-block; vertical-align: middle;  width:80px; height: 80px; background: url(../img/common/ico_complete2.svg) no-repeat 50% 50%}
.ico-refresh { display: inline-block; vertical-align: middle; background: url(../img/common/ico_refresh.svg) no-repeat 50% 50%; width:32px; height: 32px;}
.ico-select { display: inline-block; vertical-align: middle; background: url(../img/common/bu_select.svg) no-repeat 50% 50%; width:28px; height: 28px;}
.ico-file { display: inline-block; vertical-align: middle; background: url(../img/common/ico_file.svg) no-repeat 50% 50%; width:28px; height: 28px;}
.ico-file2 { display: inline-block; vertical-align: middle; background: url(../img/common/ico_file.svg) no-repeat 50% 50%; width:24px; height: 24px; background-size:contain}
.ico-download { display: inline-block; vertical-align: middle; background: url(../img/common/ico_download.svg) no-repeat 50% 50%; width:24px; height: 24px; background-size:contain}
.ico-arr-right { display: inline-block; vertical-align: middle; background: url(../img/common/ico_arr2.svg) no-repeat 50% 50%; width:20px; height: 20px;}
.ico-x { display: inline-block; vertical-align: middle; background: url(../img/common/ico_close_popup.svg) no-repeat 50% 50%; width:28px; height: 28px;}
.ico-new { display: inline-block; vertical-align: middle; background: url(../img/common/ico_new.svg) no-repeat 50% 50%; width:16px; height: 16px;}
.ico-secret { display: inline-block; vertical-align: middle; background: url(../img/common/ico_secret.svg) no-repeat 50% 50%; width:24px; height: 24px;}
.ico-alert { display: inline-block; vertical-align: middle; width:56px; height: 56px; background: url(../img/common/ico_alert.svg) no-repeat 50% 50%; background-size:contain; }
.ico-setting { display: inline-block; vertical-align: middle; width:28px; height: 28px; background: url(../img/common/ico_setting.svg) no-repeat 50% 50%; background-size:contain; }
.ico-expand { display: inline-block; vertical-align: middle; width:20px; height: 20px; background: url(../img/common/app_ico_expand.svg) no-repeat 50% 50%; background-size:contain; }

/* Form */
::-webkit-input-placeholder { color: var(--font-color3);}
.inp::-webkit-input-placeholder { color: #999}
.textarea::-webkit-input-placeholder { color: #999}

.inp { height:48px; border-radius:6px; border: 1px solid var(--line-color1); padding-left: 16px; font-size:14px; -webkit-appearance:none; box-shadow:none; font-weight: 400; outline:none; transition: all 0.5s ease;}
.inp:focus { border-color:var(--line-color3);}
.inp.block { width:100%; }
.inp.large { height: 56px; font-size:16px;  }
.inp.ico-on { padding-left: 56px; background-image: url(../img/common/ico_search.svg); background-repeat: no-repeat; background-position:  16px 50%; }
.inp.ico-on2 { padding-left: 56px; background: url(../img/common/ico_calendar.svg) no-repeat 16px 50%; }
.inp.ico-on3 { padding-left: 56px; background: url(../img/common/ico_calendar2.svg) no-repeat 16px 50%; }
.inp.ok { border-color:var(--system-color1);}
.inp.error { border-color:var(--system-color3);}
.inp.text-center { padding: 0; }
.textarea { width:100%; height:170px; border-radius:6px; border: 1px solid var(--line-color1); padding: 16px; font-size:16px; -webkit-appearance:none; box-shadow:none; font-weight: 400; outline:none; transition: all 0.5s ease;}
.textarea:focus { border-color:var(--line-color3)}
.textarea.medium { height: 100px; }

.select { height:48px; border-radius:6px; border: 1px solid var(--line-color1); padding-left: 16px; padding-right:50px;  font-size:14px; -webkit-appearance:none; box-shadow:none; font-weight: 400; background: url(../img/common/bu_select.svg) no-repeat right 50%; background-position:right 16px center;outline:none; transition: all 0.5s ease;}
.select:focus { border-color:var(--line-color3)}
.select.block { width:100%; }
.select.large { height: 56px; font-size:16px; /*flex:1  0303 삭제 */ }

.select:invalid {color:#999; }
.select:invalid { color: #999 !important; }
.select:disabled { color: #999; }
.select option { color: var(--font-color1) !important; }
.select2 { height:28px; border-radius:6px;  padding-right:28px;  font-size:16px; -webkit-appearance:none; box-shadow:none; font-weight: 400; background: url(../img/common/bu_select2.svg) no-repeat right 50%; background-position:right 0px center;outline:none; transition: all 0.5s ease;}
	

.w100 { width:100% !important; }

.checkbox { position: absolute; z-index:-100; opacity:0;width:0; height: 0; display: none;  }
.checkbox + span { display: flex; align-items: center; cursor: pointer;}
.checkbox + span em { width:24px; height: 24px; border-radius:4px; background:#fff; position: relative; border: 1px solid var(--line-color1); transition: all 0.5s ease; margin-right: 4px}
.checkbox + span em:before { content: ''; position: absolute;left: 0; top:0; right:0; bottom:0; background: url(../img/common/checkbox_on.svg) no-repeat 50% 50%; opacity:0; transition: all 0.5s ease; }
.checkbox:checked + span em { background: var(--brand-color1); border-color:var(--brand-color1); }
.checkbox:checked + span em:before { opacity:1; }
.checkbox:disabled + span em { background: var(--background-color)}
.checkbox:disabled:checked + span em { background: var(--background-color); border-color:var(--line-color1); }
.checkbox:disabled:checked + span em:before { background-image: url(../img/common/checkbox_off.svg); }
.checkbox + div { display: flex; align-items: center; cursor: pointer;}
.checkbox + div em { width:24px; height: 24px; border-radius:4px; background:#fff; position: relative; border: 1px solid var(--line-color1); transition: all 0.5s ease;}
.checkbox + div em:before { content: ''; position: absolute;left: 0; top:0; right:0; bottom:0; background: url(../img/common/checkbox_on.svg) no-repeat 50% 50%; opacity:0; transition: all 0.5s ease; }
.checkbox + div p { font-size:18px; margin-left: 8px; font-weight: 400; }
.checkbox:checked + div em { background: var(--brand-color1); border-color:var(--brand-color1); }
.checkbox:checked + div em:before { opacity:1; }
.checkbox:disabled + div em { background: var(--background-color)}
.checkbox:disabled:checked + div em { background: var(--background-color); border-color:var(--line-color1); }
.checkbox:disabled:checked + div em:before { background-image: url(../img/common/checkbox_off.svg); }
.checkbox-button { position: absolute;z-index:-1; opacity:0; width:0; height: 0; display: none; }
.checkbox-button + div { /*height: 56px; line-height: 54px; */ padding:16px;  text-align: center; border-radius:6px; border: 1px solid var(--line-color1); font-size:16px; font-weight: 500; cursor: pointer;  transition: all 0.5s ease;}
.checkbox-button:checked + div { background: #668be1; color: #fff; border-color:#668be1;}
.checkbox-button:disabled + div { color: var(--font-color4); background:var(--background-color);}
.checkbox-button:checked + div .price { color: var(--system-color2); font-weight: 400; }
.checkbox-button:checked:disabled + div { background: var(--brand-color1); color:#fff; text-align: left; padding-left: 16px; cursor: default; }
.checkbox-button.small + div { padding:4px; font-size:14px; }
.checkbox-star { position: absolute;z-index:-9999; opacity:0; }
.checkbox-star + div { width:24px; height: 24px; background: url(../img/common/ico_star_off.svg) no-repeat 50% 50%; background-size:contain; transition: all 0.5s ease; }
.checkbox-star:checked + div { background-image: url(../img/common/ico_star_on.svg); }

.checkbox-agree { position: absolute; opacity:0; z-index:-9999; }
.checkbox-agree + div { display: flex; align-items: center; gap:8px;  transition: all 0.5s ease;  cursor: pointer; }
.checkbox-agree + div em { width:24px; height: 24px; transition: all 0.5s ease; background: url(../img/common/checkbox_agree_off.svg) no-repeat 50% 50%;  }
.checkbox-agree + div span { font-size:16px; font-weight: 400; }
.checkbox-agree:checked + div em { background-image: url(../img/common/checkbox_agree_on.svg); }
.checkbox-agree.all + div span { font-weight: 500; }
.checkbox-agree.all + div em { border-radius:100%; border: 2px solid var(--line-color1); background: url(../img/common/checkbox_agree_all_off.svg) no-repeat 50% 50%; }
.checkbox-agree.all:checked + div em { background-color:#111; border-color:#111;  background-image: url(../img/common/checkbox_agree_all_on.svg); }
.checkbox-agree.all:checked + div em { }
.agreelist.all { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-color1); }
.agreelist ul li  { position: relative;  margin-top:16px;}
.agreelist ul li .btn-view { position: absolute; right:0; top:0; width:24px; height: 100%; background: url(../img/common/ico_button_list.svg) no-repeat 50% 50%; }
.checkbox-bank { position: absolute;opacity: 0; z-index:-9999; }
.checkbox-bank + div { height: 88px; display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid var(--line-color1); border-radius:6px; text-align: center; transition: all 0.5s ease; cursor: pointer; }
.checkbox-bank + div p { margin-top:4px; font-size:16px; }
.checkbox-bank:checked + div { border-color:var(--brand-color1); }



.switch { position: absolute;left: 0; opacity:0; width:0; height: 0;}
.switch + div { display: flex; align-items: center; gap:8px; cursor: pointer;}
.switch + div span { font-size:14px; }
.switch + div em { display: inline-block; vertical-align: middle; width:38px; height: 24px;position: relative; background: var(--font-color4); border-radius:24px;  transition: all 0.5s ease; }
.switch + div em:before { content: ''; position: absolute; right:16px; top:2px; width:20px; height: 20px; border-radius:100%; background: #fff; transition: all 0.5s ease;}
.switch:checked + div em { background: var(--brand-color1);}
.switch:checked + div em:before{ right:2px; }

.radio { position: absolute; z-index:-100; opacity:0;width:0; height: 0; display: none;  }
.radio + div { display: flex; align-items: center; cursor: pointer;}
.radio + div em { width:24px; height: 24px; border-radius:100%; background:#fff; position: relative; border: 1px solid var(--line-color1); transition: all 0.5s ease;}
.radio + div em:before { content: ''; position: absolute;left: 4px; top:4px; right:4px; bottom:4px; background: var(--brand-color1); opacity:0; transition: all 0.5s ease; transform: scale(0.5); border-radius:100%; }
.radio + div p { font-size:16px; margin-left: 8px; font-weight: 400; }
.radio:checked + div em { border-color:var(--brand-color1); }
.radio:checked + div em:before { opacity:1; transform: scale(1); }
.radio:disabled + div em {border-color:var(--line-color1); }
.radio:disabled:checked + div em { background: var(--background-color);  }
.radio:disabled:checked + div em:before { background-image: url(../img/common/checkbox_off.svg); }
.radio:disabled + div span { color: var(--font-color4);  }

.text-center .checkbox + div { justify-content: center; }

.btn { height: 48px; border-radius:6px; padding:0 24px; font-size:14px;  letter-spacing: -0.25;  transition: all 0.5s ease;}
.btn.block { width:100%; }
.btn:disabled { cursor: no-drop}
.btn.btn-lg { height: 56px; font-size:16px; padding:0 28px;  }
.btn.btn-m { height: 40px; padding:0 20px;  }
.btn.btn-m2 { height: 36px; padding:0 20px;  font-size:16px; padding:0 12px;   }
.btn.btn-s { height: 32px; padding:0 16px; }
.btn.btn-fill-black { background: #111; color: #fff; }
.btn.btn-fill-black:hover { background:rgba(0,0,0,0.8); }
.btn.btn-fill-black:disabled { color: var(--font-color4); background:var(--background-color); }
.btn.btn-fill-gray { background:var(--background-color); }
.btn.btn-fill-gray:hover { background:#E9EAEB }
.btn.btn-fill-gray:disabled { color: var(--font-color4);  }
.btn.btn-line-black { border:1px solid #111; }
.btn.btn-line-black:hover { background:var(--background-color) }
.btn.btn-line-black:disabled { color: var(--font-color4); background:var(--background-color); border: 0;  }
.btn.btn-line-gray { border:1px solid var(--line-color1); }
.btn.btn-line-gray:hover { background:var(--background-color) }
.btn.btn-line-gray:disabled { color: var(--font-color4); background:var(--background-color); border: 0;}
.btn-kakao,
.btn-naver,
.btn-apple { text-indent: -40px; position: relative; }
.btn-kakao { background: #FAE100;}
.btn-naver { background: #2DB400; color: #fff;}
.btn-apple { background: #111; color: #fff;}
.btn-kakao:before,
.btn-naver:before,
.btn-apple:before { content: ''; display: inline-block; vertical-align: middle; width:72px; height: 28px;  background-repeat: no-repeat; background-position: 50% 50%; margin-top:-3px; }
.btn-kakao:before { background-image: url(../img/common/ico_login_kako.svg);}
.btn-naver:before { background-image: url(../img/common/ico_login_naver.svg);}
.btn-apple:before { background-image: url(../img/common/ico_login_apple.svg);}
.btn.app { height: 48px; }

.button-list {}
.button-list ul li {  padding:8px 0;}
.button-list ul li + li { }
.button-list ul li a { display: block; position: relative; font-size:16px; background: url(../img/common/ico_button_list.svg) no-repeat right 50%; }
.button-list ul li a span { position: absolute; right:26px; top:0; font-weight: 400; }

/* Element  */
.badge { display: inline-block; height: 32px; line-height: 30px;  padding:0 8px; border-radius:6px;  border:1px solid transparent; white-space: nowrap;}
.badge.blue { border-color:#2F61D5; color: #2F61D5;  }
.badge.green { border-color:#059C44; color:#059C44; }
.badge.gray { border-color:var(--font-color2); color:var(--font-color2); }
.badge.silver { border-color:var(--font-color4); color:var(--font-color4); }
.badge.red { border-color:#EE001D; color:#EE001D; }
.badge.black { border-color:var(--font-color1); color:var(--font-color1); }
.badge.bg-purple { border-color:#8D53E6; color:#fff; background: #8D53E6; }
.badge.bg-red { border-color:#EE001D; color:#fff; background: #EE001D; }
.badge.bg-gray { border-color:var(--font-color3); color:#fff; background: var(--font-color3); }
.badge.bg-black { border-color:var(--font-color1); color:#fff; background: var(--font-color1); }
.badge.bg-green  { border-color:#2DB400; color:#fff; background: #2DB400; }
.badge.bg-silver { border-color:var(--background-color); color:var(--font-color2); background: var(--background-color); }
.badge.bg-silver-blue { border-color:var(--background-color); color:#2F61D5; background: var(--background-color); }
.badge.bg-silver-gray { border-color:var(--background-color); color:var(--font-color3); background: var(--background-color); }
.badge.bg-silver-gray2 { border-color:var(--background-color); color:#999; background: var(--background-color); }
.badge.bg-silver-red { border-color:var(--background-color); color:var(--system-color3); background: var(--background-color); }
.badge-txt { font-size:16px; color: #EE001D; font-weight: 400;letter-spacing: -1px;}
.badge-txtbox { display: inline-flex; align-items: center;  gap:8px;}

.app-badge { display: inline-block; height: 30px; line-height: 28px;  padding:0 8px; border-radius:6px;  border:1px solid transparent; white-space: nowrap; font-size:12px; font-weight: 500 ; }
.app-badge em { font-weight: 400; }
.app-badge.blue { border-color:#2F61D5; color: #2F61D5;  }
.app-badge.green { border-color:#059C44; color:#059C44; }
.app-badge.gray { border-color:var(--font-color2); color:var(--font-color2); }
.app-badge.gray2 { border-color:#767676; color:#767676; }
.app-badge.silver { border-color:var(--font-color4); color:var(--font-color4); }
.app-badge.red { border-color:#EE001D; color:#EE001D; }
.app-badge.orange { border-color: #FF7700; color:#FF7700; }
.app-badge.black { border-color:var(--font-color1); color:var(--font-color1); }
.app-badge.bg-purple { border-color:#8D53E6; color:#fff; background: #8D53E6; }
.app-badge.bg-red { border-color:#EE001D; color:#fff; background: #EE001D; }
.app-badge.bg-gray { border-color:var(--font-color3); color:#fff; background: var(--font-color3); }
.app-badge.bg-black { border-color:var(--font-color1); color:#fff; background: var(--font-color1); }
.app-badge.bg-silver { border-color:var(--background-color); color:var(--font-color2); background: var(--background-color); }
.app-badge.bg-silver-blue { border-color:var(--background-color); color:#2F61D5; background: var(--background-color); }
.app-badge.bg-silver-gray { border-color:var(--background-color); color:var(--font-color3); background: var(--background-color); }
.app-badge.bg-silver-gray2 { border-color:var(--background-color); color:#999; background: var(--background-color); }
.app-badge.bg-silver-red { border-color:var(--background-color); color:var(--system-color3); background: var(--background-color); }
.app-badge-txt { font-size:14px; color: #EE001D; font-weight: 400;letter-spacing: -1px;}
.app-badge-txtbox { display: flex; align-items: center;  gap:8px;}

/* 게시판 사용 badge */
.badge2 { display: inline-block; height: 24px; line-height: 24px;  padding:0 8px; border-radius:24px;  background: var(--brand-color1); white-space: nowrap; color: #fff;}
.badge2.small { height: 21px; font-size:12px; line-height: 20px; }
.badge2.bg-gray { background: var(--font-color4);}
.badge2.bg-blue { background: #2F61D5}

.hr { display: block; width:100%; height: 1px; background: var(--line-color1); margin:24px 0; padding: 0; }
.hr1 { display: block; width:100%; height: 8px; background: var(--background-color); margin:16px 0; padding: 0; }
.hr2 { display: block; width:100%; height: 1px; background: var(--brand-color1); margin:16px 0; padding: 0; }
.hr3 { display: block; width:100%; height: 1px; border-top:1px dashed var(--line-color2); margin:16px 0; padding: 0; }
.inner620 { max-width:620px; margin: 0 auto; }
.inner840 { max-width:840px; margin: 0 auto; }

/* Common CSS */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap;}
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.gap4 { gap:4px; }
.gap8 { gap:8px; }
.gap12 { gap:12px; }
.gap24 { gap:24px; }

/* Popup */
.border-bottom-none { border-bottom: 0 !important; }
.max-h400 { max-height: 400px; overflow: auto;}
body.popup-on { overflow: hidden;}
.popup-wrap { position: fixed;left: 0; top:0; right:0; bottom:0; z-index:5000; background: rgba(17,17,17,0.5); overflow: auto;  display: none; }
.popup-box { display: table; width:100%; height: 100%; }
.popup-cont { display: table-cell; vertical-align: middle; padding:20px; }
.popup { padding: 40px; border-radius:6px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin: 0 auto; }
.popup-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.popup-head .h3-popup { font-size:20px; }
.popup-head .btn-refresh { font-size:16px; }
.popup-head .btn-refresh:disabled { opacity:0.3; }
.popup-head .btn-close { width:28px; height: 28px; background: url(../img/common/ico_close_popup.svg) no-repeat 50% 50%; }
.popup-head .btn-download { width:28px; height: 28px; background: url(../img/common/ico_download2.svg) no-repeat 50% 50%; }
.popup-head.line-type { border-bottom: 1px solid var(--line-color1); }
.popup-body .h3-sub { margin-bottom: 8px; }
.popup-foot { margin-top:16px; }
.popup-foot.type2 { border-top:0; }
.popup-foot.type2 .fixed-bottom { margin-top:0; }
.popup-foot.type2 .common-btns { border-top:0 !important; }
.popup .btn-all { font-size:14px; font-weight: 400; }
.popup-msg { text-align: center; padding: 40px 20px; border-radius:6px; font-weight: 400; font-size:16px; color:var(--font-color3); background: var(--background-color); margin-bottom: 40px;  }
.popup-wrap.modal-type .fixed-bottom { height: auto; margin-top:0; }
.popup-wrap.modal-type .common-btns { position: static; padding: 0; }
.popup-wrap.type2 .popup { padding:0;  }
.popup-wrap.type2 .popup-head { padding:24px; margin-bottom: 0; border-bottom: 1px solid var(--line-color1);}
.popup-wrap.type2 .max-h580 { max-height: 540px; padding:16px 24px; overflow: auto; overflow-x:hidden;}
.popup-wrap.type2 .max-h580 .hr1 { width:calc(100% + 48px); margin-left: -24px; }
.popup-wrap.type2 .common-btns { padding:24px; border-top:1px solid var(--line-color1); }
.popup-wrap.type2 .popup-foot { margin-top:0; }
.popup-wrap.small-type .popup-head { padding:24px; margin-bottom: 0; }
.popup-wrap.small-type .popup { padding: 0;  }
.popup-wrap.small-type .popup-body { padding: 0 24px;}
.popup-wrap.small-type .popup-foot{ padding:24px; }
.popup-wrap.small-type .popup-foot .fixed-bottom { margin-top:0; }


.lecture-type .popup { padding: 0;  }
.lecture-type .popup-head { height: 110px; padding:0 40px; border-bottom: 1px solid var(--line-color1);  margin-bottom: 0; }
.lecture-type .popup-head .btn-close { width:28px; height: 28px; background: url(../img/common/ico_close_popup.svg) no-repeat 50% 50%; background-size: contain; }
.lecture-type .popup-body { height: 560px;border-bottom: 1px solid var(--line-color1); }
.lecture-type .fixed-bottom { height:auto; margin: 0; padding: 40px 0; }
.lecture-list { position: relative; height: 100%; }
.lecture-list:before { content: ''; position: absolute;left: 0; top:0; bottom:0; width:290px; background: var(--background-color); }
.lecture-list  > li { width:290px;  }
.lecture-list .btn-menu { display: block; padding: 16px 16px 16px 40px; font-size:16px; font-weight: 400; color: var(--font-color3); position: relative; z-index:2; word-break: break-all; background-color: #F7F8FB;}
.lecture-list .list{ display: none; position: absolute; left: 330px; top:0; bottom:0; right:0; overflow: auto; padding:16px 32px 16px 0; background: #fff;  }
.lecture-list .list .dep2 ul { margin-bottom: 16px; }
.lecture-list .list .dep2 > li { position: relative;}
.lecture-list .list .dep2 h4 { position: relative; border-bottom:1px solid var(--line-color1);}
.lecture-list .list .dep2 label + label { position: absolute; right:0; top:50%; padding:6px 16px;  transform: translateY(-50%); cursor: pointer; }

.lecture-list .list .dep2 .btn-favo { display: block; padding:16px; border-radius:6px; transition: all 0.5s ease; font-size:16px;  }
.lecture-list .list .dep2 .btn-favo p { font-weight: 300; }
.lecture-list .list .dep2 .btn-favo:hover {  background: var(--brand-color1); color: #fff}

.checkbox-IntrstChoice1 { position: absolute;z-index:-999; opacity:0; }
.checkbox-IntrstChoice1.star + span:before { content: ''; position: absolute;  width:24px; height: 24px;  background: url(../img/common/ico_star_off.svg) no-repeat 50% 50%; }
.checkbox-IntrstChoice1.star:checked + span:before { background-image: url(../img/common/ico_star_on.svg); }
.checkbox-IntrstChoice1.star:checked + span:after { background-image: url(../img/common/ico_star_on.svg); }
.checkbox-IntrstChoice1:checked + span {  background: var(--brand-color1); color: #fff}


.myIntrstli{ display: block; padding:16px; border-radius:6px; position: relative;  background: var(--brand-color1); color: #fff}
.myIntrstli .intrstNm{display: inline-block; width : 95%;}



.checkbox-choice1 { position: absolute;z-index:-999; opacity:0; }
.checkbox-choice1 + div { display: block; padding:16px; border-radius:6px; transition: all 0.5s ease; font-size:16px; cursor: pointer; padding-right:50px; word-break: break-all; position: relative;}
.checkbox-choice1.star + div:before { content: ''; position: absolute; right:16px; top:50%; width:24px; height: 24px; margin-top:-12px; background: url(../img/common/ico_star_off.svg) no-repeat 50% 50%; background-size:contain; transition: all 0.5s ease; }
.checkbox-choice1.star:checked + div:before { background-image: url(../img/common/ico_star_on.svg); }
.checkbox-choice1 p { font-weight: 300; }
.checkbox-choice1:checked + div {  background: var(--brand-color1); color: #fff}

.lecture-list .list .dep2 .btn-choice { }
.lecture-list .list .dep2 .btn-choice:hover { background: var(--background-color); color:var(--font-color1);  }

.checkbox-choice2 { position: absolute;z-index:-999; opacity:0; }
.checkbox-choice2 + div { display: block; font-size:14px; font-weight: 400; color: var(--font-color3); padding:12px 16px; transition: all 0.5s ease; border-radius:6px; cursor: pointer;}
.checkbox-choice2:checked + div {  background: var(--background-color); color: var(--font-color1);}


.lecture-list  > li.active .btn-menu { background: #fff; color: var(--font-color1); font-weight: 500; }
.lecture-list  > li.active .list { display: block; }

.schedule-type .popup { padding: 0;  }
.schedule-type .popup-head { height: 110px; padding:0 40px; border-bottom: 1px solid var(--line-color1);  margin-bottom: 0; }
.schedule-type .popup-head.small { height: 80px; }
.schedule-type .popup-head .btn-close { width:28px; height: 28px; background: url(../img/common/ico_close_popup.svg) no-repeat 50% 50%; background-size: contain; }
.schedule-type .popup-body { height: 470px;border-bottom: 1px solid var(--line-color1); }
.schedule-type .fixed-bottom { height:auto; margin: 0; padding: 40px 0; }
.schedule-type .popup-foot { margin-top:0;}

.popup-calendar-wrap { display: flex; gap:40px; height: 100%;  }
.popup-calendar-wrap .calendar-box { width:51%; padding:16px 0 16px 40px;}
.popup-calendar-wrap .times {flex: 1; height: 100%; padding:16px 40px 16px 0; overflow: auto;}
.popup-body.h-auto { height: auto; }

/******************************************************************************************************************************** 
Public CODE 
********************************************************************************************************************************/
/* 공통 */
.list-more .btn .ico-more {margin:-3px 0 0 3px; }

/* 수강신청 */
.remain { text-align: right; }
.remain div { font-size:18px; color:#aaa; font-weight: 500; line-height: 1; margin-bottom: 8px;  }
.remain div strong { font-size:30px; color: #2F61D5; font-weight: 600;}
.remain div b { font-size:30px;  font-weight: 600;}
.remain p {  color: var(--font-color2); }
.wait-number { text-align: right; }
.wait-number p { font-weight: 400; }
.wait-number strong { font-size:28px; color: #2F61D5; line-height: 1;}
.detail1 { font-size:16px; margin:4px 0 16px; }
.detail1 .org-info {font-size: 13px; color: var(--font-color4) !important;}
.detail1 .font-color3,
.detail1 .system-color3{ font-weight: 400; }
.detail1 p + p { margin-top:4px; }

.information1 { padding: 16px; border-radius:6px; background: var(--background-color); position: relative; margin-bottom: 16px;}
.information1 dl:after { display: block; content: ''; clear: both; }
.information1 dl {  }
.information1 dl + dl { margin-top:4px; }
.information1 dl dt { float:left; width:66px; word-break: break-all;  }
.information1 dl dd { overflow: hidden; color: var(--font-color3); }
.information1 .btn-flip { display: none; }
.information2 { }
.information2 dl:after { display: block; content: ''; clear: both; }
.information2 dl { font-size:16px; padding:8px 0; border-bottom: 1px solid var(--line-color1); font-weight: 400; }
.information2 dl dt { float:left; width:82px; color: var(--font-color3); word-break: break-all; padding-right:4px;  }
.information2 dl dd { overflow: hidden; }
.information2.type2 dl { padding:16px 0; }
.information2.type2 dl:last-child { border-bottom: 0; }
.information3 { }
.information3 dl:after { display: block; content: ''; clear: both; }
.information3 dl { font-size:16px;  font-weight: 400; }
.information3 dl + dl { margin-top:8px; }
.information3 dl dt { float:left; width:74px; color: var(--font-color3); }
.information3 dl dd { overflow: hidden; }
.information4 { }
.information4 dl { display: flex; justify-content: space-between; gap:10px; }
.information4 dl { font-size:16px;  font-weight: 400; }
.information4 dl + dl { margin-top:4px; }
.information4 dl dt {  color: var(--font-color3); }
.information4 dl dd { text-align: right; }
.information4 dl.block { display: block; }
.information4 dl.block dd { margin-top:4px; }
.information4 dl.price  { font-weight: 600; color: var(--brand-color1); }
.information4 dl.price dt { color: var(--brand-color1); }

.information4.bg-type1 { background: #fff; box-shadow:0 0 50px rgba(0,0,0,0.08); padding:16px;border-radius:6px; }
.information4.bg-type2 { background: var(--background-color); padding:16px;border-radius:6px; }
.information5 { padding: 16px; border-radius:6px; background: var(--background-color); margin-bottom: 16px; }
.information5 dl { display: flex; justify-content: space-between; font-size:16px; font-weight: 400; }
.information5 dl { font-size:16px;  font-weight: 400; }
.information5 dl + dl { margin-top:4px; }
.information5 dl.price { font-weight: 600; }

.detail-link { text-align: right; padding: 16px 0; }
.detail-link a { font-size:16px; }
.detail-link a:after { content: ''; display: inline-block; vertical-align: middle; background: url(../img/common/ico_arr2.svg) no-repeat 50% 50%; width:20px; height: 20px; margin:-4px 0 0 4px; }
.text1 { font-size:16px; color: var(--font-color3); font-weight: 400; }


/* 수강신청 > 상세 */
.lecture-head { display: flex; justify-content: space-between; gap:40px; margin-bottom: 60px; } 
.lecture-head .img-box { flex: auto; width:50%; } 
.lecture-head .max-h372 { max-height: 372px; } 
/*.lecture-head .img-box .img { height: 100%; } */
.lecture-head .img-box .img.img-md { height: 300px; }
.lecture-head .img-box img { width:100%; height: 100%; object-fit: cover; } 
.lecture-head .swiper-pagination { position: static; display: flex; justify-content: center; margin-top:8px; } 
.lecture-head .swiper-pagination-bullet { background: var(--line-color1); transition: all 0.5s ease; opacity:1; margin:0 4px; } 
.lecture-head .swiper-pagination-bullet-active { background: var(--brand-color1); } 
.lecture-head .info-box { width: 50%; display: flex; flex-direction: column; } 
.lecture-head .info-box .file-box { margin-bottom: 8px; } 
.lecture-head .info-box .remain p { font-size:16px; } 
.lecture-head .info-box .btn-box { margin-top:auto; } 

/* 탭메뉴 */
.tabs {margin-bottom: 40px; }
.tabs ul { display: flex; }
.tabs ul li { flex: 1;border-right: 1px solid var(--line-color1);  }
.tabs ul li a { display: block; height: 56px; line-height: 54px; background: var(--background-color); text-align: center; font-size:16px; color: var(--font-color3); position: relative;}
.tabs ul li a:before { content: ''; position: absolute;left: 0; right:0; top:0; height: 1px; background:var(--line-color1);}
.tabs ul li a:after { content: ''; position: absolute;left: 0; right:0; bottom:0; height: 1px; background:var(--line-color1);}
.tabs ul li:first-child { border-left:1px solid var(--line-color1);  }
.tabs ul li.active a { background: #fff; color: var(--font-color1);  }
.tabs ul li.active a:before { height: 2px; background: var(--line-color3); }
.tabs ul li.active a:after { display: none; }
/*
.tabs ul li.active:first-child { border-left: 0; }
.tabs ul li.active:last-child { border-right: 0; }
*/

/* Title */
.h2-sub { font-size:20px; margin-bottom: 16px; }
.h3-sub { font-size:18px; margin-bottom: 16px; position: relative; }
.h3-sub .right { position: absolute; right:0; bottom:0; }
.h4-sub { font-size:16px; margin-bottom: 8px;}




/* File */
.file-box { padding: 16px; border-radius:6px; background: var(--background-color);  margin-bottom: 16px;}
.file-box .name { display: flex; align-items: center; gap:12px; margin-bottom: 4px; }
.file-box .name span { font-size:16px;  }
.file-box .desc { font-size:14px; color: var(--font-color3); font-weight: 400; }

/* Text List */
.text-list1 { font-size:16px; font-weight: 400; margin-bottom: 16px; }
.text-list1 h4 { margin-bottom: 4px; font-size:16px; }
.text-list1 div { margin-bottom: 4px; color: var(--font-color2); }
.text-list2 { font-size:16px; font-weight: 400; }
.text-list2 p { padding-left: 12px; position: relative; margin-bottom: 4px;}
.text-list2 p:before { content: ''; position: absolute;left: 0; top:10px; width:4px; height: 4px; border-radius:100%; background: var(--brand-color1); }
.text-list3 { font-size:16px; font-weight: 400; }
.text-list3 p { padding-left: 12px; position: relative; margin-bottom: 4px;}
.text-list3 p:before { content: ''; position: absolute;left: 0; top:10px; width:4px; height: 4px; border-radius:100%; background: var(--brand-color1); }


/* Text */
.description1 { padding:16px; border-radius:6px; background: var(--background-color);  font-size:16px; margin-bottom: 16px; font-weight: 400; position: relative;}
.description1 .arr { position: absolute; left: 16px; bottom:-18px; width: 0;height: 0;border-style: solid;border-width: 18px 0 18px 23px;border-color: transparent transparent transparent #f7f8fb;}
.description1 div p { padding-left: 20px; }
.description1 div small { font-size:14px; color: var(--font-color3); }
.description2 { padding:24px 16px; border-radius:6px; background: var(--background-color);  font-size:16px; margin-bottom: 40px; font-weight: 400; text-align: center; }
.description3 { padding:16px; border-radius:6px; background: var(--background-color);  margin-bottom: 16px; font-weight: 400; }
.description3 .txt { padding-left: 24px; position: relative; line-height: 1.6; }
.description3 .txt:before { content: ''; position: absolute;left: 0; top:2px; width:20px; height: 20px; background: url(../img/common/ico_description_tip.svg) no-repeat 50% 50%; }
.description3 .txt + .txt { margin-top:8px; }
.description3.type2 { background: none; padding: 0; }
.mb16 + .description3 { margin-top:-8px; }
.description4 { padding:16px; border-radius:6px; background: var(--background-color);  text-align: center; font-weight: 400; margin-bottom: 20px; }
.description4 h4 { font-size:16px; font-weight: 500; margin-bottom: 4px; }
.description4 div{ color: var(--font-color3); }
.description5 { padding:16px; border-radius:6px; background: var(--background-color);   font-weight: 400; margin-bottom: 16px; }
.description5 h5 { font-size:16px; font-weight: 500; margin-bottom: 4px; }
.description5 div { color: var(--font-color3); }
.description5 div + h5 { margin-top:16px; }


.fixed-bottom { margin-top:30px; }
.common-btns { display: flex;justify-content: center; gap:12px; }
.common-btns .btn { width:304px; }
.common-btns.type2 { justify-content: flex-start; }
.common-btns.type2 .btn { width: 400px; }

.lect-common-btns { display: flex;justify-content: center; gap:12px; }
.lect-common-btns .btn { width:304px; }
.lect-common-btns.type2 { justify-content: flex-start; }
.lect-common-btns.type2 .btn { width: 400px; }
.btn-top { display: none; position: fixed; right: 16px; bottom: 96px; width: 40px; height: 40px; background-color: var(--brand-color1); border-radius: 100%; background: var(--brand-color1) url(../img/common/ico_top_black.svg) no-repeat 50% 50% ; }




/* 입력폼 */
.form-title { display: flex; justify-content: space-between;margin-bottom: 24px;  }
.form-title .required { font-size:16px; font-weight: 400; }
.form-title .required strong { color: var(--system-color4); }
.form-tit1 { font-size:20px; font-weight: 600; }
.form-tit2 { font-size:16px; font-weight: 600; margin-bottom:8px;  }
.form-tit2 strong { color: var(--system-color4); }
.form-tit3 { font-size:18px; font-weight: 600; margin-bottom: 8px; }
.form-tit3 strong { color: var(--system-color4); }
.inp-box { position: relative; display: flex; align-items: center; }
.inp-box .length { flex: 0 0 27px; text-align: right; font-size:16px; }
.inp-box .btn-del { position: absolute; right:0; top:0; width:56px; height: 100%; padding:0 16px; background: url(../img/common/ico_inp_del.svg) no-repeat 50% 50%; }
.inp-box .btn-del + .inp { padding-right:60px; }
.inp-box .textarea-num { position: absolute; right:16px; bottom:16px; font-size:14px; color: #999; }
.inp-box .btn { flex:0 0 138px; margin-left: 8px; padding: 0;  }
.inp-pw { display: flex; justify-content: space-between; align-items: center; }
.inp-pw span { flex:0 0 32px; padding:0 8px; }
.inp-pw span:before { content: ''; display: block; height: 1px; background: #707070;}
.inp-email-box { display: flex; gap:8px; align-items: center; }
.inp-email-box span { font-size:16px;color: #999; }
.form-msg { color: var(--font-color2); font-weight: 400; margin-bottom: 24px;   }
.form-msg strong { font-size:20px; font-weight: 400; vertical-align: middle; line-height: 1;}
.form-msg.ok { color: var(--system-color1); }
.form-msg.error { color: var(--system-color3); }
.mb24 + .form-msg { margin-top:-16px; }
.mb60 + .form-msg { margin-top:-52px; }
.inp-box { position: relative;}
.inp-box .time { position: absolute; right:16px; top:0; height: 100%; display: flex; align-items: center; font-size:14px; font-weight: 400; }
.link { display: inline-block; vertical-align: middle; font-size:16px; color: var(--font-color3); padding-bottom: 3px; border-bottom: 1px solid var(--line-color1); font-weight: 400; }


.file-list { padding:16px 0 8px 8px; }
.file-list ul li { margin-bottom: 8px; }
.file-list ul li a { display: flex; align-items: center; font-size:16px; color: var(--font-color3); font-weight: 400; gap:12px;  }
.file-list ul li a p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-list ul li a .ico-file { flex: 0 0 28px; }

.file-list2 { padding:0 0 0 74px; position: relative; font-size:16px; font-weight: 400; line-height: 24px; margin:16px 0; }
.file-list2 em { position: absolute;left: 0; top:0; color: var(--font-color3); }
.file-list2 > div { position: relative;}
.file-list2 > div p { color: var(--font-color1); }
.file-list2 > div + div { margin-top:4px; }
.file-list2 .download { position: absolute; right:0; top:0; }

/* 테이블 */
.table { margin-bottom: 40px; }
.table table { width:100%; border-collapse: collapse; }
.table table thead th { height: 56px; border-top:1px solid var(--brand-color1); border-bottom: 1px solid var(--line-color1); font-size:16px; font-weight: 500; background: var(--background-color); }
.table table .notice { background: var(--background-color);}
.table table tbody td { text-align: center; color: var(--font-color3); border-bottom: 1px solid var(--line-color1); padding:14px 4px;  font-weight: 400; }
.table table tbody td a { font-weight: 500; }
.table table tbody td i { vertical-align: middle; margin:-3px 0 0 4px; }
.table table .subj { font-size:16px;font-weight: 500; }

.table2 { margin-bottom: 40px; overflow-x: auto; } 
.table2 table { width:100%; border-collapse: collapse; font-size: 14px; } 
.table2.scroll { overflow-x: auto; } 
.table2.scroll table { width:1280px; } 
.table2 table thead th { height: 56px; border-top:1px solid var(--brand-color1); border-bottom: 1px solid var(--line-color1); font-size:16px; font-weight: 500; color: var(--brand-color1); background: var(--background-color); } 
.table2 table thead th.border { border-left: 1px solid var(--line-color1); }
.table2 table tbody th { border-right: 1px solid var(--line-color1); border-bottom: 1px solid var(--line-color1); } 
.table2.basic table thead td,
.table2 table tbody td { font-size:16px; text-align: center; color: var(--font-color3); border-bottom: 1px solid var(--line-color1); padding:16px; font-weight: 400; } 
.table2 table tbody td.bg-color1 { background-color: #f2fbe9; }
.table2 table tbody td + td { border-left: 1px solid var(--line-color1); } 
.table2 table tbody td span { display: block; } 
.table2 table tbody td span + span { margin-top: 8px; } 


.table2.basic table thead th { background-color: transparent; }
.table2.basic table thead td { border-top:1px solid var(--brand-color1); text-align: left; }
.table2.basic table thead th + td { border-left: 1px solid var(--line-color1); } 
.table2.basic table tbody .text-list1 .text-body { padding-left: 20px; }
.table2.basic table tbody .text-list1 .text-body .tit { color: var(--brand-color1); }
.table2.basic table tbody .text-list1 .text-body .text { padding-left: 20px; }
.table2.basic table tbody .text-list1 .text-body .desc { padding-left: 30px; }


.table3 { margin-bottom: 40px; }
.table3 table { width:100%; border-collapse: collapse; }
.table3 table thead th { height: 56px; border-top:1px solid var(--brand-color1); border-bottom: 1px solid var(--line-color1); font-size:16px; font-weight: 500; background: var(--background-color); }
.table3 table .notice { background: var(--background-color);}
.table3 table tbody td { text-align: center; color: var(--font-color3); border-bottom: 1px solid var(--line-color1); padding:14px 4px;  font-weight: 400; }
.table3 table tbody td a { font-weight: 500; }
.table3 table tbody td i { vertical-align: middle; margin:-3px 0 0 4px; }
.table3 table .subj { font-size:16px;font-weight: 500; }

.board-view { }
.board-view .hr { margin:16px 0;}
.board-view .head { }
.board-view .head .type { display: flex; align-items: center; gap:4px; margin-bottom: 4px }
.board-view .head .type p { font-size:16px; font-weight: 400; color: var(--font-color3); }
.board-view .head h3 {  font-size:16px; margin-bottom: 4px; }
.board-view .head h3 i { margin:-3px 0 0 4px; }
.board-view .head .writer { display: flex; gap:8px; color: var(--font-color3); font-weight: 400; }
.board-view .body .img { margin-bottom: 16px; }
.board-view .body .text400 { margin-bottom: 16px; }

.board-replay { }
.board-replay h3 { font-size:16px; font-weight: 600; margin-bottom: 8px; }
.board-replay .text { padding: 16px; background: var(--background-color); border-radius:6px; font-size:16px; color: var(--font-color3); }
.board-replay .text .writer { display: flex; justify-content: space-between; margin-bottom: 16px; font-weight: 400; }
.board-replay .text .writer strong { font-weight: 500; color: var(--font-color1); }
.board-replay .file-list2 { margin-bottom: 0;}


.faq-list ul li {  }
.faq-list ul li .q { display: block; padding:16px 40px 16px 16px; border-bottom: 1px solid var(--line-color1); position: relative; }
.faq-list ul li .q:before { content: ''; position: absolute; right:16px; top:50%; margin-top:-12px;  width:24px; height: 24px; background: url(../img/common/ico_arr_down.svg) no-repeat 50% 50%; background-size:contain; transition: all 0.5s ease; }
.faq-list ul li .q .type1 h3 { margin:4px 0;  font-size:16px; }
.faq-list ul li .q .type1 h3 .ico-new { margin:-3px 0 0 4px; vertical-align: middle; }
.faq-list ul li .q .type2 { padding-left: 30px; position: relative;}
.faq-list ul li .q .type2 strong { position: absolute;left: 0; top:0; font-size:18px; }
.faq-list ul li .q .type2 h3 { font-size:16px; }
.faq-list ul li .q .date { font-size:12px; font-weight: 400; color: var(--font-color3); }
.faq-list ul li .a { display: none; padding:16px; background: var(--background-color); position: relative; }
.faq-list ul li .a .text400 { color: var(--font-color2); position: relative;}
.faq-list ul li .a .text400.f16 { padding-left: 30px; }
.faq-list ul li .a .file-list2 { margin-bottom: 0; }
.faq-list ul li .a .hr { margin:16px 0;}
.faq-list ul li .a .text400 strong { position: absolute;left: 0; top:0; font-size:18px; color: var(--brand-color1); }

.faq-list ul li .q.active:before { transform: rotate(180deg); }
.faq-list ul li .q.active .type2 h3 { font-weight: 600; }


.pay-item1 { border: 1px solid var(--line-color1); border-radius:6px; margin-bottom: 16px;  }
.pay-item1 dl { display: flex; justify-content: space-between; align-items: center; font-size:16px; font-weight: 400; padding:16px; }
.pay-item1 dl.dc { background: var(--background-color); color: var(--font-color3); }
.pay-item1 dl.dc dd { color: #999; }
.pay-item1 dl.price { font-weight: 500; }
.pay-item1 .dc-box { background: var(--background-color); color: var(--font-color3); padding:16px;  }
.pay-item1 .dc-box dl { padding: 0; }
.pay-item1 .dc-box dl + dl { margin-top:8px; color: var(--font-color3); }
.pay-item1 .dc-box h4 { font-size:16px; font-weight: 400; margin-bottom: 16px; }
.pay-item1 .detail1 { padding:14px 16px 0;}
.pay-item2 { border: 1px solid var(--line-color1); border-radius:6px; margin-bottom: 16px; padding:16px;   }
.pay-item2 dl { display: flex; justify-content: space-between; align-items: center; font-size:16px; font-weight: 400;  }
.pay-item2 dl dt { width:35%; }
.pay-item2 dl dd { width:65%; text-align: right; }
.pay-item2 dl dt small { display: block; font-size:14px; color: var(--font-color3); }
.pay-item2 dl + dl { margin-top:16px; }
.pay-item2 dl.price { font-weight: 500; }

/*********************************************************************************************************************************
Private CODE 
*********************************************************************************************************************************/
.inner { max-width:1312px; padding:0 16px; margin: 0 auto; }
#header { height: 136px; position: relative; z-index:200; background: #fff; border-bottom: 1px solid #f5f5f5; }
#header .top { height: 70px; padding-top:20px; ; }
#header .top .inner { height: 46px;  display: flex; justify-content: space-between; align-items: center;  }
#header .top h1{position: relative; padding-left:55px}
#header .top h1 a { display: block; font-size:26px; font-weight: 600;}
#header .top h1:after{width: 394px; height:51px; content: ''; position: absolute; left: 0;  background: url(../img/common/header_logo.png) 0 0 no-repeat; cursor: pointer;}
#header .top .menu ul { display: flex; align-items: center; gap:24px; }
#header .top .menu ul li a { display: flex; align-items: center; font-size:14px; }
#header .top .menu ul li a span { margin:0 2px 0 4px;}
#header .top .menu ul li a em { width:16px; height: 16px; text-align: center; line-height: 17px; background: #DC0000; border-radius:100%; font-size:11px; color: #fff; font-family: 'Roboto'; }
#header .navigation { position: relative; }
#header .navigation .inner { height: 66px; display: flex; justify-content: space-between; align-items: center; }
#gnb >  ul { display: flex;   }
#gnb >  ul > li { padding:0 30px; }
#gnb >  ul > li:first-child { margin-left: -30px; }
#gnb >  ul > li .btn-dep1 { display: block; height: 66px; font-size:18px; padding:20px 0; position: relative; font-weight: 500;}
#gnb >  ul > li .btn-dep1:before { content: ''; position: absolute;left: 0; bottom:0; width:0; height: 2px; background: var(--line-color3); opacity:0; }
#gnb >  ul > li.on .btn-dep1:before,
#gnb >  ul > li.active .btn-dep1:before{ width:100%;  opacity: 1;}
#gnb >  ul > li.on .dep2 { display: block; }
#gnb .dep2 { display: none; position: absolute; left: 0; top:66px; right:0; background: #fff;z-index:200; }
#gnb .dep2:before { content: ''; position: absolute; left: 0; width:1900px; transform: translateX(-50%); top:0; bottom:0; background: var(--background-color);  }
#gnb .dep2 .inner{ height: auto;  display:block; padding-left: 110px; position: relative;  }
#gnb .dep2 h2 { position: absolute; left: 16px; top:40px; font-size:18px; }
#gnb .dep2 ul { padding: 24px 32px; background: #fff; display: flex; flex-wrap: wrap;}
#gnb .dep2 ul li { width:20%; padding:8px;  }
#gnb .dep2 ul li a { display: block; height: 48px; line-height: 46px; border-radius:6px; text-align: center; border: 1px solid var(--line-color1); font-size:16px; font-weight: 400; text-align: left; padding-left:16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  transition: all 0.5s ease;}
#gnb .dep2 ul li a:hover { background: var(--brand-color1); color: #fff; border-color:var(--brand-color1);}
#header .allmenu a { display: inline-block; vertical-align: middle; background: url(../img/common/ico_top_menu.svg) no-repeat 50% 50%; width:32px; height: 32px; }
.m-gnb,
.m-nav { display: none; }
.bg-gnb { display: none; position: fixed; left: 0; right:0; top:136px; bottom:0; background: rgba(0,0,0,0.5); z-index:50; }
.top-search { position: absolute;left: 0; right:0; top:136px; padding:40px 0 35px; background: #fff; z-index:150; display: none; }
.search-wrap.type2 { max-width:745px; margin: 0 auto 40px; }
.top-search .btn-del { width:32px; height: 56px; background: url(../img/common/ico_top_search_close.svg) no-repeat 50% 50%; margin-left: 4px; }
.bg-search { content: ''; position: fixed; left: 0; top:0; right:0; bottom:0; z-index:50; background: rgba(0,0,0,0.5); display: none; }
body.search-on #header {position: relative; z-index:100;}
body.search-on { overflow: hidden; }
.search-hit { text-align: center; font-size:20px; font-weight: 400; margin-bottom: 16px; }
.search-hit strong { color: #EE001D; }
.top-search-mobile { display: none; }

.m-header { display: none; height: 60px; }
.m-header .fixed { position: fixed;left: 0; top:0; right:0; z-index:100; background: #fff; height: 60px;  }
.m-header h1 a { display: flex; align-items: center; gap:4px; font-size:20px; font-weight: 600; padding-left: 16px; line-height: 60px;  }
.m-header .right { position: absolute; right:0; top:0; display: flex; }
.m-header .right button { height: 60px; padding:0 16px; }
.m-menus { display: none; }

#container { padding-bottom: 40px; }
#footer { background: #000; padding:40px 0; }
#footer .foot1 { display: flex; position: relative; margin-bottom: 40px;  }

#footer .foot1 .logo {position: relative; font-size:26px; font-weight: 600; color: #fff;padding-left:55px; margin-right: 50px; width:320px; }
#footer .foot1 .logo:after{width: 296px; height:82px; content: ''; position: absolute; left: 0;  background: url(../img/common/footer_logo.png) 0 0 no-repeat;}     
#footer .foot1 .info dl { font-size:16px; font-weight: 400; color: #999; }
#footer .foot1 .info dl + dl { margin-top:4px; }
#footer .foot1 .info dl dt { color: var(--font-color2); float:left; width:75px; }
#footer .foot1 .info dl dd { overflow: hidden; }
#footer .foot1 .family { position: absolute; right:0; bottom:0; }
.select-family { height:48px; border-radius:6px; border: 1px solid var(--font-color2); padding-left: 16px; padding-right:50px;  font-size:14px; -webkit-appearance:none; box-shadow:none; font-weight: 400; background: url(../img/common/bu_select_family.svg) no-repeat right 50%; background-position:right 16px center;outline:none; transition: all 0.5s ease; color: var(--font-color3);}
#footer .menu { display: flex; gap:40px;  }
#footer .menu a { font-size:16px;font-weight: 400; color: var(--font-color3); transition: all 0.3s ease; }
#footer .menu a:hover { color: #fff; }

@media only screen and (max-width : 1024px) {
	h1:after{background: none;}  
	h1{padding-left:inherit}
	h1 span{position: relative; padding-left:34px}
	h1 span:after{width: 30px; height:15px; content: ''; position: absolute; top: 25px; left: 0;  background: url(../img/common/logo.png) 0 0 no-repeat;; background-size: 100%}
}        

.path { background: #f5f5f5; margin-bottom: 16px;  }
.path .inner { height: 60px; display: flex;justify-content: space-between; align-items: center; }
.path ol { display: flex; align-items: center; }
.path ol li {  }
.path ol li .btn-home { display: inline-block; vertical-align: middle; background: url(../img/common/ico_path_home.svg) no-repeat 50% 50%; width:20px; height: 20px; margin-top:-3px; }
.path ol li:before { content: ''; display: inline-block; vertical-align: middle; background: url(../img/common/ico_arr.svg) no-repeat 50% 50%; width:14px; height: 14px; margin:-2px 8px 0 6px; }
.path ol li:first-child:before { display: none; }
.path .btns { display: flex; align-items: center; gap:8px; }
.path .btns .btns-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ddd; background-color: #fff; }
.share-box { position: relative; }
.share-box .btns-link.active { background-color: var(--brand-color1); }
.share-box .btns-link.active .ico-share { background: url(../img/common/ico_share_on.svg) no-repeat 50% 50% / contain; }
.share-box .share-list { display: none; position: absolute; left: 50%; top: 51px; transform: translateX(-50%); padding: 8px 5px; background: var(--background-color); border: 1px solid #EBEBEB; box-sizing: border-box; border-radius: 90px; z-index: 100; }
.share-box .share-list li + li { margin-top: 5px; }
.share-box .share-list .share-link { display: inline-block; width: 30px; height: 30px; box-sizing: border-box; text-align: center; text-indent: -9999px !important; }
.share-box .share-list .share-link.share-facebook { background: url(../img/common/ico_facebook.svg) no-repeat 50% 50%; }
.share-box .share-list .share-link.share-twitter { background: url(../img/common/ico_twitter.svg) no-repeat 50% 50%; }
.share-box .share-list .share-link.share-story { background: url(../img/common/ico_story.svg) no-repeat 50% 50%; }
.share-box .share-list .share-link.share-kakao { background: url(../img/common/ico_kakao.svg) no-repeat 50% 50%; }
@media all and (max-width:1024px) {
	.path .btns .btns-link { width: 34px; height: 34px; }
	.share-box .share-list { top: 40px; }
	.share-box .ico-print,
	.share-box .ico-share { width: 20px; height: 20px; } 
}


.head-tip { display: flex; justify-content: flex-end; align-items: center;  color: var(--font-color3); margin-bottom: 20px;  }
.head-tip { display: flex; justify-content: flex-end; align-items: center;  color: var(--font-color3); margin-bottom: 20px;  }
.head-tip .tip { display: flex; align-items: center; gap:4px;  position: relative; }
.layer-tip{ display: none; position: absolute; right:0; top:32px; padding: 16px;  background: var(--background-color); border-radius:6px; border: 1px solid var(--line-color1); z-index:20; width:417px; color: var(--brand-color1);  }
.layer-tip:before { content: ''; position: absolute; right:50px; top:-7px; background: url(../img/common/ico_layer_tip.svg ) no-repeat 0 0; width:15px; height: 7px; }
.layer-tip > div { padding-left: 8px; position: relative;margin-bottom: 4px; }
.layer-tip > div p { color: var(--font-color2); font-weight: 400; }
.layer-tip > div:before { content: ''; position: absolute;left: 0; top:8px; width:4px; height: 4px; border-radius:100%; background:var(--brand-color1); }
.head-tip a:hover + .layer-tip { display: block; }


.search-wrap { display: flex;justify-content: space-between; gap:12px; margin-bottom: 16px; }
.search-wrap .select-box { flex:0 0 22%;}
.search-wrap .select-box .select { width:100%; }
.search-box { position: relative; flex:1; }
.search-box .inp { width:100%; }
.search-box .btn-hide { position: absolute;left: 0; top:0; width:100%; height: 100%; opacity:0; }
.search-box .ico-select { position: absolute;right: 16px; top:16px;  }

.filter-sort { display: flex; margin-bottom: 60px;  align-items: baseline; justify-content: space-between; flex-direction: row-reverse;}
.filter-sort .btn-allfilter { font-size:16px; text-align: left; height: 32px; margin-left:20px;  white-space: nowrap; }
.filter-sort .btn-allfilter:before { content: ''; display: inline-block; vertical-align: middle; background: url(../img/common/ico_filter1.svg) no-repeat 50% 50%; width:32px; height: 32px; margin-right:8px;  }
.filter-sort .btn-srch { font-size:16px; text-align: left; height:32px; margin-left:30px;  color: var(--font-color3);  white-space: nowrap;}
.filter-sort .btn-srch:before { content: ''; display: inline-block; vertical-align: middle; background: url(../img/common/ico_search.svg) no-repeat 50% 50%; width:32px; height: 32px; margin-right:8px;  }
.filter-sort .btn-refresh { font-size:16px; text-align: left; height: 32px; margin-left:20px;  white-space: nowrap; }
.filter-sort .btn-refresh:before { content: ''; display: inline-block; vertical-align: middle; background: url(../img/common/ico_refresh.svg) no-repeat 50% 50%; width:32px; height: 32px; margin-right:8px;  }
.filter-sort ul { display: flex; gap:8px; flex-wrap: wrap; }
.filter-sort ul li .btn-filter { height:32px; border: 1px solid var(--line-color1); padding:0 20px;  border-radius:6px; }
.filter-sort.type2 { margin-bottom: 20px; }

.result-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.result-head .number strong { color: var(--system-color3);}

/* 강의 리스트 */
.list-type1 ul { display: flex; flex-wrap: wrap; margin:0 -20px;  }
.list-type1 ul li { padding:0 20px 40px;  width:calc(100% / 3);    }
.list-type2 ul { display: flex; flex-wrap: wrap; margin:0 -20px;  }
.list-type2 ul li { padding:0 20px 40px;  width:calc(100% / 2);    }
.list-type3 ul { display: flex; flex-wrap: wrap; gap:8px; justify-content: space-between; }
.list-type3 ul li { width:calc(100% / 2 - 4px); }

/* 강의 아이템 */
.lecture-type1 { padding: 16px; border-radius:6px; background: #fff; box-shadow:0 0 20px rgba(0,0,0,0.08); height: 100%;  display: flex; flex-direction: column; position: relative;}
.lecture-type1 .btn { margin-top:auto; }
.lecture-type1 .flex.mt16 { margin-top:auto !important; }
.lecture-type1 .checkbox-box { position: absolute; right:16px; top:16px; }
.lecture-type2 { padding: 16px; border-radius:6px; border: 1px solid var(--line-color1);  }


/* 강사안내 */
.teacher-introduce { display: flex; }
.teacher-introduce .photo { flex: 0 0 400px; margin-right:40px; }
.teacher-introduce .photo .none { height: 100%; max-height: 430px;  background: var(--background-color); display: flex; justify-content: center; align-items: center; flex-direction: column ;}
.teacher-introduce .photo .none p { font-size:16px; margin-top:4px; color: var(--font-color3); }
.teacher-introduce .info-box { flex: 1; }
.teacher-introduce .info-box .list-type2 ul li:nth-child(1),
.teacher-introduce .info-box .list-type2 ul li:nth-child(2) { padding-bottom: 0; }
.teacher-introduce .information3 dl + dl dd { max-height: 130px; overflow-y: auto; }
@media all and (max-width:1024px) {
	.teacher-introduce .information3 dl + dl dd { max-height: 120px; }
}

/* 필터 */
.filter-list ul { display: flex; flex-direction: column;}
.filter-list {margin-bottom: 24px; }
.filter-list ul { gap:8px; }
.filter-list.type1 ul { flex-direction: row;}
.filter-list.type1 ul li { flex: 1;}
.filter-list.type2 ul { flex-direction: row;}
.filter-list.type2 ul li { flex: 1;}
.filter-list.type3 ul {flex-wrap: wrap; margin-right:-3px;flex-direction: row; }
.filter-list.type3 ul li { width:calc(100% / 5 - 7px); }
.filter-list.type4 ul {flex-wrap: wrap; margin-right:-3px;flex-direction: row; }
.filter-list.type4 ul li { width:calc(100% / 3 - 6px); }
.filter-list.type5 ul { display: flex; flex-wrap: wrap; gap:8px; flex-direction: row }
.filter-list.type5 ul li { width:calc(100% / 4 - 6px); }
.filter-list.del-type ul { justify-content: center; }
.filter-list.del-type ul li { position: relative;}
.filter-list.del-type ul li .btn-del { position: absolute; right:0; top:0; bottom:0; width:56px; ; background: url(../img/common/ico_list_del.svg) no-repeat 50% 50%; }

/* 달력 */
.calendar {  border-radius:6px; background: var(--background-color); }
.calendar .year { height: 56px; display: flex; justify-content: space-between; align-items: center; padding:0 16px; }
.calendar .year .btn-prev,
.calendar .year .btn-next { width:28px; height: 28px; background: url(../img/common/ico_calendar_left.svg) no-repeat 50% 50%; }
.calendar .year .btn-next { transform: scaleX(-1);}
.calendar .year h4 { font-size:18px; }
.calendar .days table { width:100%; }
.calendar .days table thead th { width:calc(100% / 7); height: 45px; font-size:14px; text-align: center; color: var(--font-color2); font-weight: 500; }
.calendar .days table tbody td { height: 60px; text-align: center; padding-top:4px;  vertical-align: top; font-weight: 400;color: var(--font-color3); }
.calendar .days table tbody td button { width:28px; height: 28px; border-radius:100%; font-size:16px; color: var(--font-color2); font-weight: 400;}
.calendar .days table tbody td button:disabled { color: var(--font-color4); }
.calendar .days table tbody td button.active { background: #2F61D5; color:#fff }
.calendar .days table tbody td button.active:disabled { background: #F9CDD9; }
.calendar .days table tbody td button.on { background: #A4CFFF; color:#fff }
.calendar-desc { display: flex; align-items: center; margin:8px 0; gap:24px; }
.calendar-desc div { display: flex; align-items: center; font-weight: 400; }
.calendar-desc div i { width:12px; height: 12px; border-radius:100%; background: #F9CDD9; margin-right:4px; }
.calendar-desc div i.color1 { background: #F9CDD9;}
.calendar-desc div i.color2 { background: #A4CFFF;}
.calendar-desc div i.color3 { background: #2F61D5;}

.calendar2 {  border-radius:6px; background: var(--background-color); }
.calendar2 .year { height: 56px; display: flex; justify-content: center; align-items: center; padding:0 16px; }
.calendar2 .year .btn-prev,
.calendar2 .year .btn-next { width:28px; height: 28px; background: url(../img/common/ico_calendar_left.svg) no-repeat 50% 50%; }
.calendar2 .year .btn-next { transform: scaleX(-1);}
.calendar2 .year h4 { font-size:18px; }
.calendar2 .days table { width:100%; }
.calendar2 .days table thead th { width:calc(100% / 7); height: 56px; font-size:14px; text-align: center; color: var(--font-color2); font-weight: 400; }
.calendar2 .days table tbody td { height: 56px; text-align: center; vertical-align: middle; font-weight: 400;color: var(--font-color3); }
.calendar2 .days table tbody td button { width:36px; height: 36px; border-radius:100%; font-size:16px; color: var(--font-color2); font-weight: 400;}
.calendar2 .days table tbody td button:disabled { color: var(--font-color4); }
.calendar2 .days table tbody td .day { height: 36px; position: relative; }
.calendar2 .days table tbody td .day.active button { background: #2F61D5; color:#fff; position: relative; z-index:2; }
.calendar2 .days table tbody td .day.on { background: rgba(47,97,213,0.2);}
.calendar2 .days table tbody td .day.start:before{  content: ''; position: absolute;left: 50%; right:0; top:0; bottom:0; background: rgba(47,97,213,0.2);}
.calendar2 .days table tbody td .day.end:before{  content: ''; position: absolute;right: 50%; left:0; top:0; bottom:0; background: rgba(47,97,213,0.2);}

.calendar-choice { display: flex; gap:16px; padding:16px 68px; position: relative;}
.calendar-choice .calendar2 { flex: 1; }
.calendar-choice .btn-prev { width:28px; height: 28px; position: absolute; top:50%; left: 24px; margin-top:-14px; background: url(../img/common/ico_left.svg) no-repeat 50% 50%;  }
.calendar-choice .btn-next { width:28px; height: 28px; position: absolute; top:50%; right: 24px; margin-top:-14px; background: url(../img/common/ico_left.svg) no-repeat 50% 50%; transform: scaleX(-1);}
.calendar-selected div { border-radius:6px; background: rgba(17,17,17,0.8); padding:16px; font-size:16px; color: #fff; margin:0 68px 16px ; }

/* 대관신청 */
.borrow-times { display: flex; gap:48px;  }
.borrow-times .calendar-box { flex:0 0 392px; }
.borrow-times .calendar-box .radio + div em { width: 18px; height: 18px; }
.borrow-times .times { flex: 1 1 auto; }
.borrow-times .times { flex: 1 1 auto; }
.fixed-time { height: 48px; display: none; }
.fixed-time div { position: fixed;left: 0; right:0; bottom:80px; line-height: 48px;text-align: center; background: rgba(17,17,17,0.8); font-size:14px; color: #fff;  z-index:10;}
.fixed-price { }
.fixed-price dl { height: 56px; padding:0 16px; display: flex; justify-content: space-between; align-items: center;  font-size:16px; font-weight: 600; color: #fff; background: #666; border-radius:6px; }

.calendar-time { margin-bottom: 40px;  }
.calendar-time .head { position: relative; margin-bottom: 24px; }
.calendar-time .year { height: 28px; display: flex; justify-content: center; align-items: center; padding:0 16px; }
.calendar-time .year h4 { font-size:18px; margin:0 60px;  }
.calendar-time .year .btn-prev,
.calendar-time .year .btn-next { width:28px; height: 28px; background: url(../img/common/ico_calendar_left.svg) no-repeat 50% 50%; }
.calendar-time .year .btn-next { transform: scaleX(-1);}
.calendar-time .calendar-desc { position: absolute;left: 0; top:0; }
.calendar-time .body table { width:100%; }
.calendar-time .body table thead th { height: 40px; background: var(--background-color); text-align: center; font-weight: 500; }
.calendar-time .body table tbody th { text-align: center; font-weight: 500; }
.calendar-time .body table tbody td { width:36px;  border-right:1px solid var(--line-color1);border-bottom:1px solid var(--line-color1)}
.calendar-time .body table tbody td button { width:100%; height: 40px; border: 0; outline:none; background: #A4CFFF; vertical-align: top;  }
.calendar-time .body table tbody td button:disabled {  background: #F9CDD9;  }
.calendar-time .body table tbody td button.active { background: #2F61D5 url(../img/common/ico_calendar_time_check.svg) no-repeat 50% 50%; }
.day-sort { display: flex; gap:4px;}
.day-sort .checkbox-button + div { width:57px; }

/* 회원가입 */
.join-step { height: 48px; display: flex; align-items: center; max-width:600px; margin: 0 auto 40px;}
.join-step ul { width:100%; display: flex; justify-content: space-between; position: relative; align-items: center; }
.join-step ul:before { content: ''; position: absolute;left: 0; right:0; top:50%; height: 1px; border-bottom: 1px dashed var(--line-color1); z-index:-2;}
.join-step ul li { }
.join-step ul li p { position: absolute;left: 0; top:-3px;  width:8px; height: 8px; border-radius:100%; font-size:0;color: rgba(255,255,255,0); display: flex; justify-content: center; align-items: center; background: var(--line-color1);  }
.join-step ul li:nth-child(1) p { left: 0;}
.join-step ul li:nth-child(2) p { left: 25%;}
.join-step ul li:nth-child(3) p { left: 50%;}
.join-step ul li:nth-child(4) p { left: 75%;}
.join-step ul li:nth-child(5) p { left: 100%;}
.join-step ul li.active p { top:-24px; margin-left: -24px;  width:48px; height: 48px; font-size:20px; background: var(--brand-color1); color: #fff;  }
.join-step ul:after { content: ''; position: absolute; left: 0; width:25%; top:50%; height:2px; background: var(--brand-color1); z-index:-1; display: none; }
.join-step.step2 ul:after { display: block; }
.join-step.step2 ul li:nth-child(1) p{ background: var(--brand-color1); }
.join-step.step3 ul li:nth-child(-n+2) p{ background: var(--brand-color1); }
.join-step.step4 ul li:nth-child(-n+3) p{ background: var(--brand-color1); }
.join-step.step5 ul li:nth-child(-n+4) p{ background: var(--brand-color1); }
.join-step.step3 ul:after { display: block; width:50%}
.join-step.step4 ul:after { display: block; width:75%}
.join-step.step5 ul:after { display: block; width:100%}

.join-step2 { height: 48px; display: flex; align-items: center; max-width:600px; margin: 0 auto 40px;}
.join-step2 ul { width:100%; display: flex; justify-content: space-between; position: relative; align-items: center; }
.join-step2 ul:before { content: ''; position: absolute;left: 0; right:0; top:50%; height: 1px; border-bottom: 1px dashed var(--line-color2); z-index:-2;}
.join-step2 ul li p { position: absolute;left: 0; top:-3px;  width:8px; height: 8px; border-radius:100%; font-size:0;color: rgba(255,255,255,0); display: flex; justify-content: center; align-items: center; background: var(--line-color2);  }
.join-step2 ul li:nth-child(1) p { left: 0;}
.join-step2 ul li:nth-child(2) p { left: 50%;}
.join-step2 ul li:nth-child(3) p { left: 100%;}
.join-step2 ul li.active p { top:-24px; margin-left: -24px;  width:48px; height: 48px; font-size:20px; background: var(--brand-color1); color: #fff;  }
.join-step2 ul:after { content: ''; position: absolute; left: 0; width:25%; top:50%; height:2px; background: var(--brand-color1); z-index:-1; display: none; }



.join-text { text-align: center; margin-bottom: 40px; }
.join-h3 { font-size:20px; font-weight: 600;margin-bottom: 8px; }
.join-txt1 { font-size:16px; color: var(--font-color3); font-weight: 400; }
.join-txt2 { border-radius:6px; background: var(--background-color); text-align: center; padding:26px; font-size:20px; font-weight: 600; }
.join-checks { display: flex; justify-content: center; gap:16px; margin-bottom: 60px; }
.join-checks label { width:50%; }
.join-radio { position: absolute; z-index:-9999; opacity:0;}
.join-radio + div { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid var(--line-color1); border-radius:6px;  height: 344px; position: relative;  transition:all 0.5s ease; cursor: pointer; }
.join-radio + div:before { content: ''; position: absolute; right:16px; top:16px; width:28px; height: 28px; border-radius:100%; border: 1px solid var(--line-color1); background: #fff; background-position: 50% 50%; background-repeat: no-repeat; transition: all 0.5s ease; }
.join-radio:checked + div:before{ background-color: var(--brand-color1) ;background-image:url(../img/common/check.svg) ; border-color:var(--brand-color1);}
.join-radio:checked + div { border-color:var(--brand-color1); }
.join-radio + div strong { display: block; font-size:20px; font-weight: 600; margin-top:16px; }
.join-radio + div b{  margin-top:4px; display: block; font-size:16px; font-weight: 500; }
.join-radio + div p { margin-top:8px; font-size:16px; color: var(--font-color3); font-weight: 400; text-align: center; }
.prv-h4 { font-size:16px; margin-bottom: 8px;}
.prv-txt { padding:16px; border-radius:6px; background: var(--background-color); margin-bottom: 16px; }
.prv-txt h5 { font-size:16px; margin-bottom: 4px; }
.prv-txt div { font-size:14px; color: var(--font-color3);  font-weight: 400; }
.msg-box { text-align: center; margin:60px 0; }

.msg-ico { width: 130px; height: 130px; margin: 0 auto; margin-bottom: 40px; }
.msg-ico img { width: 100%; height: 100%; }
.login-btns { display: flex; justify-content: center; margin-bottom: 40px; }
.login-btns a { font-size:16px; font-weight: 400; padding:0 16px; position: relative; }
.login-btns a:before { content: ''; position: absolute;left: 0; top:5px; bottom:5px; width:2px; background: var(--line-color1); }
.login-btns a:first-child:before { display: none; }

/* 시설안내 */
.build-info { margin-bottom: 16px; }
.build-title { font-weight: 600; }
.build-info-list li span { margin-right: 16px; color: var(--font-color3); text-align: left; font-weight: 400;}
.build-info-list li i { vertical-align: middle; margin:-2px 4px 0 0;}
.build-info-list .ico-tel { display: inline-block; vertical-align: middle; width:24px; height: 24px; background: url(../img/common/app_ico_tel.svg) no-repeat 50% 50% / cover;}
.build-info-list .ico-fax { display: inline-block; vertical-align: middle; width:24px; height: 24px;background: url(../img/common/app_ico_fax.svg) no-repeat 50% 50% / cover;}
.build-teacher-search {flex: 1;}
.build-group + .build-group {margin-top: 40px;}
.build-information {}
.build-information dl:after { display: block; content: ''; clear: both; }
.build-information dl { font-size:16px;  font-weight: 400; }
.build-information dl + dl { margin-top:8px; }
.build-information dl dt { float:left; width:91px; color: var(--font-color3); }
.build-text-list {}
.build-text-list dl:after { display: block; content: ''; clear: both; }
.build-text-list dl { font-size:16px;  font-weight: 400; }
.build-text-list dl + dl { margin-top:4px; }
.build-text-list dl dt { position: relative; float:left; width:99px;  padding-left: 12px; color: var(--font-color1); font-weight: 500;}
.build-text-list dl dt::after { content: ''; position: absolute;left: 0; top:10px; width:4px; height: 4px; border-radius:100%; background: var(--brand-color1); }
.build-text-list dl dd { overflow: hidden; color: var(--font-color3); }
.build-text-list2 {}
.build-text-list2 dl:after { display: block; content: ''; clear: both; }
.build-text-list2 dl { font-size:16px;  font-weight: 400; }
.build-text-list2 dl + dl { margin-top:4px; }
.build-text-list2 dl dt { float:left; margin-right: 16px; color: var(--font-color1); font-weight: 500;}
.build-text-list2 dl dd { overflow: hidden; color: var(--font-color3); }
.build-floor  { display: inline-block; margin-right: 16px; margin-bottom: 8px; }
.floor-item { display: inline-flex; align-items: center; margin-right: 16px; margin-bottom: 8px;}
.floor-item em { display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px;   background-color: #acacac; border-radius: 100%; text-align: center; font-size: 14px; font-weight: 400; color: #ffff;}
.floor-item a em { background-color: var(--brand-color1); }
.floor-item span { padding-left: 4px; }
.build-teacher {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -20px;}
.teacher-group { width: calc(100% / 3); padding: 0 20px 40px; }
.teacher-group.teacher-pop { width: 100%; padding: 0; }
.teacher-group .teacher_name {font-size: 20px;}
.teacher-group .photo { flex: 0 0 213px; height: 200px; margin-right: 16px;}
.teacher-group .photo img { width: 100%; height: 100%; object-fit: cover; }
.teacher-group .photo .none {max-height: 100%;}
.teacher-group dl { font-size: 16px; }
.teacher-group dl dt { font-weight: 500; color: var(--brand-color1); }
.teacher-group dl dd { margin-top: 4px; color: var(--font-color3); font-weight: 400; letter-spacing: -1px; height: 100px; max-height: 100px; overflow-y: auto;}
.subway-list { display: flex; flex-wrap: wrap;}
.subway-list li { margin-right: 16px; margin-bottom: 8px; }
.subway-route { display: inline-block; width: 24px; height: 24px; margin-right: 4px; line-height: 24px; border-radius: 100%; background-color: #273D93; text-align: center; color:#fff;}
.subway-route2 { display: inline-block; width: 46px; height: 24px; margin-right: 4px; line-height: 24px; border-radius: 60px; background-color: #00A49B; text-align: center; color:#fff;}
.bus-list {display: flex; flex-wrap: wrap;}
.bus-list li { margin-right: 16px; margin-bottom: 8px;}
.bus-name { display: inline-block; width: 24px; height: 24px; margin-right: 4px; line-height: 24px; border-radius: 100%; border: 1px solid var(--line-color1); background-color: #FFFFFF; text-align: center; color:var(--font-color4);}
.bus-number span {  display: inline-block; width: 42px; height: 28px; margin-right: 4px; line-height: 28px; border-radius: 6px; background-color: #1E7BDB; text-align: center; color: #fff;}
.come-map {width: 100%;}
.come-map .root_daum_roughmap {width: 100%;}
/* 시설안내 - 강사소개 상세 */
.lesson-wrap .popup-body { max-height: 576px; overflow-y: auto;}
/* 시설안내 - 층별안내 상세 */
.pool-wrap .table2 {font-size: 16px;}
.pool-wrap .table2 tr td:first-child { font-weight: 500; color: var(--brand-color1);}
.pool-cont {margin-top: 40px;}

/* 관리자화면 */
.admin { position: fixed; left: 50%; transform: translateX(-50%); display: flex; width: 100%; max-width: 1920px; height: 100%; }
.admin.failures .admin-tit { padding: 0; margin-bottom: 39px; }
.admin.failures .admin-tit::after { content: none; padding: 0; margin: 0; }
.admin.failures .form-wrap { display: flex; flex-direction: column; justify-content: center; max-width: 100%; padding: 0; }
.admin.failures .admin-left-figure { width: 92px; height: 92px; margin: 0 auto; }
.admin.failures .admin-left-figure img { width: 100%; height: 100%; object-fit: cover; }
.admin.failures .admin-left .admin-desc { padding: 0; margin-bottom: 7px; font-size: 28px; line-height: 38px; font-weight: 600; color: #111111; }
.admin.failures .admin-left .admin-description { margin: 0;  font-size: 16px; }
.admin .admin-left { display: flex; align-items: center; justify-content: center;  width: 50%; }
.admin .admin-left-inner { width: 100%; ;  margin: 0 auto; box-shadow: 20px 0 20px 0 rgba(71, 75, 88, .1); border-radius: 10px; }
.admin .form-wrap {	height: 780px;max-width: 400px; margin: 0 auto;	padding: 100px 0 79px 0; }
.admin .admin-tit { position: relative; padding-bottom: 29px; margin-bottom: 30px; font-size: 44px; line-height: 65px; }
.admin .admin-tit::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 1px; background-color: #AAAAAA; }
.admin .admin-left .admin-desc { padding: 0 27px; font-size: 14px; line-height: 24px; font-weight: 400; color: #888888;}
.admin .admin-inp + .admin-inp { margin-top: 10px; }
.admin .admin-inp .inp { padding-left: 48px; background-color: #F7F8FB; border-radius:10px; border: 0; background-image: url('../img/common/ico_admin_user.svg'); background-repeat: no-repeat; background-position: left 20px center; background-size: 24px 24px; } 
.admin .admin-inp + .admin-inp .inp { background-image: url('../img/common/ico_admin_pass.svg');  }
.admin .admin-description { margin-top: 100px; background-color: transparent; padding: 0; color: #888888; }
.admin .admin-description .txt::before { background-image: url('../img/common/ico_admin_description_tip.svg'); }
.admin .admin-msg { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 30px 0; }
.admin .switch { position: absolute;left: 0; opacity:0; width:0; height: 0;}
.admin .switch + div { display: flex; align-items: center; gap:8px; cursor: pointer;}
.admin .switch + div span { font-size:14px; }
.admin .switch + div em { width: 146px; height: 44px; line-height: 44px; border-radius: 100px; padding-left: 44px; font-size: 16px; font-weight: 500; color: #111111; background-color: #EEEEEE;}
.admin .switch + div em:before { top: 4px; left: 4px;  width: 36px; height: 36px;  background-image: url('../img/common/ico_admin_switch01.svg'); background-repeat: no-repeat; background-position: center; background-size: 24px 24px; }
.admin .switch:checked + div em { background: var(--brand-color1); padding-left: 14px; color: #ffff; background-color: #022B70; }
.admin .switch:checked + div em:before{ left: 106px; background-image: url('../img/common/ico_admin_switch02.svg');}
.admin .admin-btn { border-radius: 10px; font-size: 18px; }
.admin .admin-right {  display: flex; align-items: center;  width: 100%; max-width: 1080px; background-color: #022B70; }
.admin .admin-right-inner { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 640px; }
.admin .admin-logo { width: 256px; height: 64px;}
.admin .admin-logo img { width: 100%; height: 100%; object-fit: cover;}
.admin .admin-right .admin-desc { font-size: 14px; font-weight: 400; line-height: 24px; color: #FFFFFF; }
.admin .admin-right { padding: 0 170px; }
.admin .admin-center  { width: 100%; }
.admin .admin-center p { margin-bottom: 15px; font-size: 32px; color: #FFFFFF; }
.admin .admin-center ul li { font-size: 16px; line-height: 30px; font-weight: 400; color: #FFFFFF;}
.admin .admin-center ul li span { display: inline-block; width: 98px; color: #FFFF; opacity: .7;}
.admin .admin-center-btn { width: 400px; background-color: #FC4645; border-radius: 10px; color: #FFFF;}
/* 관리자화면 : 로그인실패 팝업 */
.admin-modal .popup { padding: 80px 20px 20px 20px;}
.admin-modal .popup-ico { width: 112px; height: 100px; margin: 0 auto; }
.admin-modal .popup-ico img { width: 100%; height: 100%; object-fit: cover; }
.admin-modal .popup-tit { margin-top: 20px; margin-bottom: 3px; font-size: 40px; line-height: 59px; }
.admin-modal .popup-txt { font-size: 28px; line-height: 41px; color: #767676; }
.admin-modal .popup-foot { margin-top: 78px; }
.admin-modal .popup-foot .popup-txt { margin-bottom: 19px; font-size: 24px; line-height: 36px; color: #999999; }
.admin-modal .common-btns .btn { width: 418px; height: 80px; border-radius: 10px; font-size: 24px; background-color: #404345;}
/* 관리자화면 : 로그인성공 팝업 */
.admin-modal2 .popup { padding: 80px 40px 20px 40px;}
.admin-modal2 .popup-head { flex-direction: column; margin-bottom: 39px; }
.admin-modal2 .popup-ico { width: 160px; height: 40px; }
.admin-modal2 .popup-ico img { width: 100%; height: 100%; object-fit: cover; }
.admin-modal2 .popup-tit {  margin-top: 20px; font-size: 40px; line-height: 59px; }
.admin-modal2 .filter-list { margin: 0; }
.admin-modal2 .filter-list ul { gap: 0; max-height: 320px; overflow-y: auto; border: 1px solid #E5E5E5; border-radius: 10px; }
.admin-modal2 .checkbox-button + div { padding: 16px 20px; border: 0; font-size: 18px;  font-weight: 400; text-align: left; color: #999999; }
.admin-modal2 .checkbox-button:checked + div { border: 0; background-color: #F7F8FB; }
.admin-modal2 .common-btns .btn { width: 418px; height: 80px; border-radius: 10px; font-size: 24px; background-color: #404345;}



.mobile { display: none; }



/* 앱전용  */
/*
.mobile-my-barcode { height:auto; min-height: calc(100vh - 140px); position: relative; display: flex; justify-content: center; align-items: center; }
*/
.mobile-my-barcode { height:auto; min-height: calc(100vh - 140px); position: relative; display: flex; justify-content: center; margin-top:100px; }
.mobile-my-barcode .txt { position: absolute;left: 0; top:0;z-index:2; }
.mobile-my-barcode .btn-refresh { position: absolute;left: 0; top:0; width:100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background: rgba(255,255,255,0.96); }
.mobile-my-barcode .btn-refresh i { width:50px; height: 50px; border-radius:100%; background: rgba(0,0,0,0.5) url(../img/common/ico_barcode_refresh.svg) no-repeat 50% 50%; margin: 0 auto 16px; }
.mobile-my-barcode .btn-refresh p { font-size:14px; font-weight: 400; }
.mobile-my-barcode .txt h2 { font-size:16px; }
.mobile-my-barcode .txt div { font-size:12px; }
.mobile-my-barcode .txt div span { font-weight: 400; color: #EE001D; }



/***************************************************************************************************************************************************************
	APP 전용(반응형 처리 X)
***************************************************************************************************************************************************************/
.app-wrap { font-size:14px; }
.app-mt8 { margin-top:8px !important }
.app-mt12 { margin-top:12px !important }
.app-mt16 { margin-top:16px !important }
.app-mt20 { margin-top:20px !important }
.app-mt24 { margin-top:24px !important }
.app-mt28 { margin-top:28px !important }
.app-mt32 { margin-top:32px !important }
.app-mt36 { margin-top:36px !important }
.app-mt40 { margin-top:40px !important }
.app-mt60 { margin-top:60px !important }
.app-mb8 { margin-bottom:8px !important }
.app-mb12 { margin-bottom:12px !important }
.app-mb16 { margin-bottom:16px !important }
.app-mb20 { margin-bottom:20px !important }
.app-mb24 { margin-bottom:24px !important }
.app-mb28 { margin-bottom:28px !important }
.app-mb32 { margin-bottom:32px !important }
.app-mb36 { margin-bottom:36px !important }
.app-mb40 { margin-bottom:40px !important }
.app-mb60 { margin-bottom:60px !important }

.app-tit1 { margin-bottom: 7px; font-size: 18px; line-height: 27px; font-weight: 600; }
.app-tit2 { margin-bottom: 7px; font-size: 16px; line-height: 24px; font-weight: 600; }
.app-tit3 { font-size: 14px; line-height: 18px; font-weight: 600; }

.app-wrap .ico-tip { background: url(../img/common/ico_tip_gray.svg) no-repeat 50% 50%; }
/* APP 전용 : 메인 */
.card-shadow { box-shadow: 0 0 50px rgba(0,0,0,0.1); }

.app-main { position: relative;  }
.app-main { position: relative; }
.app-main::before { content: ""; position: absolute; left: -100px; top: -100px;  width: 340px; height: 340px; border-radius: 50%; background-color: rgba(187, 187, 187, 0.1); z-index: -1; }
.app-main .app-m-header.bg-on .fixed { background-color: #fff; }
.app-main .app-m-header .fixed { display: flex; align-items: center; justify-content: space-between;  padding: 16px; background-color: transparent; }
.app-main .app-m-header .fixed h1 { width: 88px; height: 22px; }
.app-main .app-m-header .fixed h1 a { padding-left: 0; }
.app-main .app-m-header .fixed .ico-topsearch { width: 28px; height: 28px; }
.app-main #app-container { padding-top: 16px; }

.app-main .app-bacode-wrap { transform: rotate(0); }
.app-main .app-bacode-wrap .app-bacode { width: calc( 100% - 16px); margin: 0 auto; }
.app-main .app-bacode-wrap .app-bacode img { width: 100%; height: 100%; object-fit: contain; }
.app-main .app-bacode-wrap .app-bacode-number { margin-top: 4px; font-size: 14px; text-align: right; color: #999999; }
.app-main .app-bacode-wrap .app-bacode-number em { display: inline-block; margin-right: 8px; color: var(--system-color4); }
.app-main .app-bacode-wrap .detail-link { padding: 16px 0 0 0; }
.app-banner { background-color: #E9EAEC; }
.app-banner .inner { max-width: 100%; padding: 16px; }
.app-banner-tit { font-size: 14px; line-height: 18px; font-weight: 600;  }
.app-banner-tit + .app-banner-txt { margin-top: 4px; }
.app-banner-tit em { display: none; width: 4px; height: 4px; border-radius: 50%; background-color: var(--system-color4); }
.app-banner-tit.on { display: flex; justify-content: space-between; }
.app-banner-tit.on em { display: block; }
.app-banner-txt { font-size: 12px; line-height: 18px; font-weight: 400; }
.app-banner.type2 {  background: #F6F6F8 url(../img/main/bg_banner4.png) no-repeat right / contain; margin: 0 -16px; }
.app-banner.type2 .inner { padding: 55px 16px;}
.app-banner.type2 .app-banner-tit  { font-size: 20px; line-height: 30px; }

.app-main .head-tip { font-size: 14px; font-weight: 500; margin-bottom: 0; color: #111111; }
.app-main .app-information1 { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background-color: #fff; }
.app-main .app-information2 { padding: 14px 0;  background-color: transparent; }
.app-main .app-information2 a { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.app-main .app-information2 i { width: 20px; height: 20px;}
.app-main .swiper-container { width: calc(100% + 16px); overflow: visible; }
.app-main .swiper-wrapper { max-width: calc(100% - 34px);}
.app-main .swiper-pagination { position: static; display: flex; justify-content: center; margin-top:8px; }
.app-main .swiper-pagination-bullet { background: var(--line-color1); transition: all 0.5s ease; opacity:1; margin:0 4px;}
.app-main .swiper-pagination-bullet-active { width: 20px; border-radius: 20px; background: var(--brand-color1); }

.app-main .app-list-type1 { padding: 16px; border-radius: 6px; background-color: #fff;  }
.app-main .app-list-type1 li { margin-top: 14px; padding-top: 0; }
.app-main .app-list-type1 li + li { margin-bottom: -14px;  padding: 0; }
.app-main .app-list-type1 li .link-more { display: inline-block; width: 100%; padding: 14px; text-align: center; }
.app-main .btn-line-black { background-color: #fff; }
.app-main .app-group {/*  box-shadow: 0 0 10px rgba(0,0,0,0.1); */  }
.app-main .app-group + .app-group { margin-top: 40px;  }
.app-main .information1 { padding: 10px 16px; }
.app-main .information1 dl dt { color: var(--font-color3); font-size: 12px; }
.app-main .information1 dl dd { color: var(--font-color1); font-size: 12px; }
.app-main .remain div { font-size: 14px; }
.app-main .remain div strong, .app-main .remain div b { font-size: 24px; }


.app-m-header { height: 60px; }
.app-m-header.hide .fixed { position: static; opacity: 0; }
.app-m-header .fixed { position: fixed;left: 0; top:0; right:0; z-index:100; background: #fff; height: 60px;  }
.app-m-header h1 a { display: flex; align-items: center; gap:4px; font-size:20px; font-weight: 600; padding-left: 16px; line-height: 60px;  }
.app-m-header .right { position: absolute; right:0; top:0; display: flex; }
.app-m-header .right button { height: 60px; padding:0 16px; }

.app-footer { height: 80px; margin-top: 4rem; }

.fixed-bottom.app { height: 80px; margin-top:0; }
.fixed-bottom.app .common-btns { position: fixed;left: 0; right:0; bottom:0; background: #fff; padding: 16px;  display: flex; justify-content: space-between; gap:8px; z-index:10; width:100%;}
.fixed-bottom.app .common-btns .btn { width:100%; }

.fixed-bottom.app .common-tabs .btn {}

#app-container .inner { max-width:100%; overflow-x: hidden; }

.app-join-h2 { font-size:20px; font-weight: 600; margin-bottom: 4px; }
.app-join-txt1 { font-size:14px; color: var(--font-color3); font-weight: 400; }

.app-form-tit1 { font-size:20px; font-weight: 600; margin-bottom:8px;  }
.app-form-tit2 { font-size:16px; font-weight: 600; margin-bottom:8px;  }
.app-form-tit2 strong { color: var(--system-color4); }


.app-inp { width:100%; height:48px; border-radius:6px; border: 1px solid var(--line-color1); padding-left: 16px; font-size:14px; -webkit-appearance:none; box-shadow:none; font-weight: 400; outline:none; transition: all 0.5s ease;}
.app-inp:focus { border-color:var(--line-color3);}
.app-inp.ok { border-color:var(--system-color1);}
.app-inp.error { border-color:var(--system-color3);}
.app-textarea { width:100%; height:170px; border-radius:6px; border: 1px solid var(--line-color1); padding: 16px; font-size:16px; -webkit-appearance:none; box-shadow:none; font-weight: 400; outline:none; transition: all 0.5s ease;}
.app-textarea:focus { border-color:var(--line-color3)}

.app-select { width:100%; height:48px; border-radius:6px; border: 1px solid var(--line-color1); padding-left: 16px; padding-right:50px;  font-size:14px; -webkit-appearance:none; box-shadow:none; font-weight: 400; background: url(../img/common/app_bu_select.svg) no-repeat right 50%; background-position:right 16px center;outline:none; transition: all 0.5s ease;}
.app-select:focus { border-color:var(--line-color3)}
.app-select.block { width:100%; }
.app-select:invalid {color:#999; }
.app-select:invalid { color: #999 !important; }
.app-select [disabled] { color: #999; }
.app-select option { color: var(--font-color1) !important; }

.app-form-msg { color: var(--font-color2); font-weight: 400; margin-bottom:16px;  font-size:12px; padding-left: 16px; }
.app-form-msg.ok { color: var(--system-color1); }
.app-form-msg.error { color: var(--system-color3); }
.app-mb16 + .app-form-msg { margin-top:-8px; }
.app-link { display: inline-block; vertical-align: middle; font-size:14px; color: var(--font-color3); padding-bottom: 3px; border-bottom: 1px solid var(--line-color1); }
.app-inp-box { position: relative;}
.app-inp-box .time { position: absolute; right:16px; top:0; line-height: 48px; font-size:14px; font-weight: 400; }
.app-prv-h4 { font-size:16px; margin-bottom: 8px;}
.app-prv-h5 { font-size:14px; }
.app-prv-txt { padding:16px; border-radius:6px; background: var(--background-color); margin-bottom: 16px; }
.app-prv-txt h5 { font-size:14px; margin-bottom: 4px; }
.app-prv-txt div { font-size:12px; color: var(--font-color3);  font-weight: 400; }

.app-checkbox { position: absolute; z-index:-100; opacity:0;width:0; height: 0; display: none;  }
.app-checkbox + div { display: flex; align-items: center; cursor: pointer;}
.app-checkbox + div em { width:20px; height: 20px; border-radius:4px; background:#fff; position: relative; border: 1px solid var(--line-color1); transition: all 0.5s ease;}
.app-checkbox + div em:before { content: ''; position: absolute;left: 0; top:0; right:0; bottom:0; background: url(../img/common/checkbox_on.svg) no-repeat 50% 50%; opacity:0; background-size:12px auto; transition: all 0.5s ease; }
.app-checkbox + div p { font-size:14px; margin-left: 8px; font-weight: 400; }
.app-checkbox:checked + div em { background: var(--brand-color1); border-color:var(--brand-color1); }
.app-checkbox:checked + div em:before { opacity:1; }
.app-checkbox:disabled + div em { background: var(--background-color)}
.app-checkbox:disabled:checked + div em { background: var(--background-color); border-color:var(--line-color1); }
.app-checkbox:disabled:checked + div em:before { background-image: url(../img/common/checkbox_off.svg); }

.app-ico-alert { display: inline-block; vertical-align: middle; width:40px; height: 40px; background: url(../img/common/app_ico_alert.svg) no-repeat 50% 50%;}
.app-ico-pin { display: inline-block; vertical-align: middle; width:34px; height: 34px; background: url(../img/common/ico_pin.svg) no-repeat 50% 50%;}
.app-ico-finger { display: inline-block; vertical-align: middle; width:34px; height: 34px; background: url(../img/common/ico_finger.svg) no-repeat 50% 50%;}
.app-ico-tel { display: inline-block; vertical-align: middle; width:20px; height: 20px; background: url(../img/common/app_ico_tel.svg) no-repeat 50% 50%;}
.app-ico-fax { display: inline-block; vertical-align: middle; width:20px; height: 20px; background: url(../img/common/app_ico_fax.svg) no-repeat 50% 50%;}
.app-list-btns ul li { border-bottom: 1px solid var(--line-color1); }
.app-list-btns ul li button { width:100%; height: 50px; font-size:14px; display: flex; align-items: center; }
.app-list-btns ul li button span { margin-left: 16px; }

.app-popup-wrap { position: fixed;left: 0; top:0; right:0; bottom:0; z-index:5000; background: rgba(17,17,17,0.5); overflow: auto;  display: none; }
.app-popup-box { display: table; width:100%; height: 100%; }
.app-popup-cont { display: table-cell; vertical-align: middle; padding:32px; }
.app-popup { padding: 16px; border-radius:6px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin: 0 auto; }
.app-popup-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.app-popup-head .app-h3-popup { font-size:16px; }
.app-popup-head .btn-close { width:28px; height: 28px; background: url(../img/common/ico_close_popup.svg) no-repeat 50% 50%; }
.app-popup-foot { margin-top:16px; }
.app-popup-msg { text-align: center; padding: 40px 16px; border-radius:6px; font-weight: 400; font-size:14px; color:var(--font-color3); background: var(--background-color); margin-bottom: 16px;  }
.app-popup .fixed-bottom.app { height: auto; }
.app-popup .fixed-bottom.app .common-btns { position: static;padding: 0;  }
.app-popup-wrap.app-bottom-type .app-popup-cont { vertical-align: bottom; padding-bottom: 16px;}
.app-popup-body  { max-height: 400px; overflow: auto; }
.app-finger h4 { font-size:20px; font-weight: 600; margin-bottom: 16px; }
.app-finger { text-align: center; font-size:14px; color: var(--font-color3); }
.app-finger .app-ico-finger { width:50px; height: 50px; background-image: url(../img/common/ico_finger_lg.svg); margin:20px 0;}
.app-floating-type .app-popup { max-width:100% !important; border-radius:6px 6px 0 0; }
.app-floating-type .app-popup-box { position: fixed;left: 0;right:0; bottom:0; height: auto; }
.app-floating-type .app-popup-cont { display: block; padding: 0; }
.app-floating-type .app-popup-head .app-h3-popup { font-size:20px; }
.app-password { display: flex; justify-content: center; gap:8px; }
.app-password p { width:28px; height: 28px; border-radius:4px; background: var(--background-color); background-repeat: no-repeat; background-position: 50% 50%; }
.app-password p.active { background-image: url(../img/common/ico_app_pw.svg); background-color:var(--brand-color1); }
.app-number-btns  { position: fixed; left: 0; right:0; bottom:0; }
.app-number-btns ul { display: flex; flex-wrap: wrap; }
.app-number-btns ul li { width:33.333333%;  height: 60px;border-top:1px solid var(--line-color1); border-left: 1px solid var(--line-color1);   }
.app-number-btns ul li:nth-child(1),
.app-number-btns ul li:nth-child(4),
.app-number-btns ul li:nth-child(7),
.app-number-btns ul li:nth-child(10) { border-left: 0; }
.app-number-btns ul li button { height: 100%; width:100%; font-size:16px; text-align: center; }

.app-timepicker { display: flex; justify-content: space-between; align-items: center;  text-align: center; }
.app-timepicker .left { width:50%;}
.app-timepicker .right { width:50%; height: 240px; overflow: auto; }
.app-timepicker > div > div + div { margin-top:8px; }
.radio-time { position: absolute;z-index:-9999; opacity:0; }
.radio-time + div { font-size:20px; font-weight: 600; color: var(--font-color4);  transition: all 0.5s ease; }
.radio-time + div em { margin:0 25px; }
.radio-time:checked + div { color: var(--font-color1); }

.app-msg-box { text-align: center; margin:60px 0;  display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: calc(100vh - 140px);  margin: 0;} 
.app-msg-ico { margin-bottom: 40px; }
.app-result-msg { margin:100px 0; text-align: center; }
.app-result-msg p { font-size:14px; color: var(--font-color3); font-weight: 400; }
.app-hr1 { display: block; width:calc(100% + 32px);  height: 8px; background: var(--background-color); margin:16px -16px; padding: 0; }

.app-information1 { padding:16px; border-radius:6px; background: var(--background-color); margin-bottom: 20px; word-break: break-all; font-weight: 400; }
.app-information1 dl + dl { margin-top:4px; }
.app-information1 dl:after { display: block; content: ''; clear: both; }
.app-information1 dl dt { float:left; width:70px; color: var(--font-color3);  }
.app-information1 dl dd { overflow: hidden;  text-align: right; }
.app-information1.type2 dl dt { width:80px; }
.app-information2 { }
.app-information2 dl { display: flex; justify-content: space-between; font-size:16px; }
.app-information2 dl dt { font-weight: 600;}
.app-information2 dl dd { color: var(--font-color3); font-weight: 400; text-align: right;}

.app-information3 { }
.app-information3 dl { display: flex; justify-content: space-between; font-size:14px;  margin-bottom: 4px;}
.app-information3 dl dt { color: var(--font-color3); }
.app-information3 dl dd { text-align: right; text-align: right; }


.app-hit { font-size:14px; margin-bottom: 16px; }

.app-item1 { border-radius:6px; border: 1px solid var(--line-color1); position: relative; }
.app-item1 .info { padding:16px; font-size:14px;  word-break: break-all; font-weight: 400; }
.app-item1 .info h4 { font-size:15px; margin-bottom: 4px; padding-right:35px;  }
.app-item1 .info dl:after { display: block; content: ''; clear: both; }
.app-item1 .info dl dt { float:left; width:41px; color: var(--font-color3); }
.app-item1 .info dl dd { overflow: hidden;  }
.app-item1 .btns { border-top:1px solid var(--line-color1); }
.app-item1 .btns button { width:100%; height: 52px; }
.app-item1 label { position:absolute; right:16px; top:16px; }

.app-description1 { padding: 16px; background: var(--background-color); border-radius:6px; }
.app-description1 p { font-size:12px; font-weight: 400; text-indent: -16px; padding-left: 16px;}
.app-description2 { padding: 16px; background: var(--background-color); border-radius:6px; }
.app-description2 p { font-size:12px; font-weight: 400; text-indent: -8px; padding-left: 8px;}

.app-checkbox-agree { position: absolute; opacity:0; z-index:-9999; }
.app-checkbox-agree + div { display: flex; align-items: center; gap:8px; padding:2px 16px;  transition: all 0.5s ease; border-radius:6px; }
.app-checkbox-agree + div em { width:20px; height: 20px; transition: all 0.5s ease; background: url(../img/common/app_checkbox_gray.svg) no-repeat 50% 50%;  }
.app-checkbox-agree + div span { font-size:14px; }
.app-checkbox-agree:checked + div em { background-image: url(../img/common/app_checkbox_black.svg); }
.app-checkbox-agree.all + div { padding:14px 16px; background: #fff; box-shadow:0 0 50px rgba(0,0,0,0.08);}
.app-checkbox-agree.all:checked + div { background: var(--brand-color1); color: #fff; }
.app-checkbox-agree.all:checked + div em { background-image: url(../img/common/app_checkbox_white.svg);}
.app-agreelist ul li  { position: relative;  margin-top:12px;}
.app-agreelist ul li .app-btn { position: absolute; right:0; top:0; width:20px; height: 100%; background: url(../img/common/app_ico_arr.svg) no-repeat 50% 50%; }

.app-tabs { margin:0 -16px 16px; }
.app-tabs ul { display: flex; }
.app-tabs ul li { flex: 1;border-right: 1px solid var(--line-color1);  }
.app-tabs ul li:last-child { border-right:0; }
.app-tabs ul li a { display: block; height: 48px; line-height: 46px; background: var(--background-color); text-align: center; font-size:14px; color: var(--font-color3); position: relative;}
.app-tabs ul li a:before { content: ''; position: absolute;left: 0; right:0; top:0; height: 1px; background:var(--line-color1);}
.app-tabs ul li a:after { content: ''; position: absolute;left: 0; right:0; bottom:0; height: 1px; background:var(--line-color1);}
.app-tabs ul li:first-child { border-left:1px solid var(--line-color1);  }
.app-tabs ul li.active a { background: #fff; color: var(--font-color1);  }
.app-tabs ul li.active a:before { height: 2px; background: var(--line-color3); }
.app-tabs ul li.active a:after { display: none; }
.app-tabs ul li.active:first-child { border-left: 0; }
.app-tabs ul li.active:last-child { border-right: 0; }

.app-img-box { margin:0 -16px 16px; }
.app-img-box .img { height: 100%; }
.app-img-box img { width:100%; height: 100%; object-fit: cover; }
.app-img-box .swiper-pagination { position: static; display: flex; justify-content: center; margin-top:8px; }
.app-img-box .swiper-pagination-bullet { background: var(--line-color1); transition: all 0.5s ease; opacity:1; margin:0 4px;}
.app-img-box .swiper-pagination-bullet-active { background: var(--brand-color1); }

.app-build-info { margin-bottom: 16px; }
.app-build-info table { width:100%; border-collapse: collapse; font-weight: 400; }
.app-build-info table th { color: var(--font-color3); text-align: left; font-weight: 400; }
.app-build-info table th i { vertical-align: middle; margin:-2px 4px 0 0;}

.app-detail1 { font-size:14px; margin:4px 0 16px; }
.app-detail1 .font-color3 { font-weight: 400; }
.app-detail1 p + p { margin-top:4px; }

.app-list-type1 ul li { padding-top: 16px; margin-top: 16px; position: relative; }
.app-list-type1 ul li:before { content: ''; position: absolute;left: -16px; top:0; right:-16px; height: 1px; background: var(--line-color1);  }
.app-list-type1 ul li:first-child { padding-top:0; margin-top:0; }
.app-list-type1 ul li:first-child:before { display: none; }
.app-pop-img img { width:100%;  max-height: 160px; object-fit: cover;}
.app-barcode-box { margin-bottom: 40px; position: relative; }
.app-bacode { text-align: center; }
.app-bacode img { height: 60px; }
.app-bacode-number { text-align: center; margin:8px 0 0; font-size:16px; font-weight: 400; position: relative;}
.app-bacode-desc { text-align: center; margin-top:16px;  font-size:14px; font-weight: 400; color: var(--font-color3); }
.app-btn-bacode { position: absolute;left: 0; top:0; width:100%; height: 100%; }
.app-bacode-number .ico-expand { position: absolute;transform: translateX(-70px); top:2px; }

.app-locker { display: flex; justify-content: space-between; padding: 16px 32px; background: var(--background-color); font-size:16px; margin:0 -16px; }
.app-locker strong { font-size:28px; line-height: 1;}
.app-lock-num { font-size:28px; font-weight: 600; color: var(--font-color1); line-height: 1; }
.app-bacode-wrap { transform: rotate(90deg); }
.app-bacode-wrap .app-bacode img { height: 100px; }
#app-container .inner .hr { width:100%; margin-left: 0; margin-right:0; }


.email-ico { text-align: center;  margin-bottom: 40px; }
.prv-text { padding:16px; background: var(--background-color); border-radius:6px; height: calc(100vh - 600px);  overflow: auto; }
.prv-text div { font-size:14px; font-weight: 400; color: var(--font-color3); }
.prv-btns { display: flex; justify-content: center; gap:12px; margin-top:40px;  }
.prv-btns .btn { width:394px; }
.prv-btns .btn small { font-size:14px; }
.privacy-wrap .current { text-align: right; margin-bottom: 4px;color: var(--font-color3); font-size:14px; }

.favorite-wrap { display: flex; gap:40px; }
.favorite-wrap .item { flex: 1; }
.favorite-wrap .btn-flip { width:100%; text-align: left; padding-left:16px; height: 56px; border-radius:6px; background: var(--background-color); font-size:16px; font-weight: 600;  position: relative;}
.favorite-wrap .btn-flip span { font-weight: 400; color: #999; margin-left: 4px; }
.favorite-wrap .btn-flip span em { font-weight: 500; color: var(--system-color3); }
.favorite-wrap .btn-flip:before { content: ''; position: absolute; right:16px; top:50%; width:24px; height: 24px; margin-top:-12px; background: url(../img/common/ico_favorite_arr.svg) no-repeat 50% 50%; background-size:contain; transform: rotate(180deg); transition: all 0.5s ease;}
.favorite-wrap .btn-flip.active:before { transform: rotate(0); }
.favorite-wrap ul { display: none; }
.favorite-wrap ul li { margin-bottom: 8px;}
.keyword { display: flex; flex-wrap: wrap; gap:8px; }
.keyword p { height: 40px; line-height: 38px; border-radius:40px; padding:0 8px; font-size:16px; font-weight: 400; border: 1px solid #707070; color: var(--font-color3); }
.sns-setting ul li { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.sns-setting ul li .ss { display: flex; align-items: center; gap:10px; }
.sns-setting ul li .ss img {  flex:0 0 48px;}
.sns-setting ul li .ss span { font-weight: 400; font-size:16px; }
.result-msg { text-align: center; }
.result-msg p { font-size:16px; font-weight: 400; color: var(--font-color3); }
.result-msg.full-type { min-height: calc(100vh - 400px); display: flex; justify-content: center; align-items: center; flex-direction: column;}
.result-msg.full-type .fixed-bottom { width:100%; }

.password { display: flex; justify-content: center; gap:8px; margin-bottom: 50px;  }
.password p { width:60px; height: 60px; border-radius:6px; background: var(--background-color); background-repeat: no-repeat; background-position: 50% 50%; }
.password p.active { background-image: url(../img/common/ico_pw.svg); background-color:var(--brand-color1); }
.number-btns  {}
.number-btns ul { display: flex; flex-wrap: wrap; }
.number-btns ul li { width:33.333333%;  height: 80px;border-top:1px solid var(--line-color1); border-left: 1px solid var(--line-color1);   }
.number-btns ul li:nth-child(1),
.number-btns ul li:nth-child(4),
.number-btns ul li:nth-child(7),
.number-btns ul li:nth-child(10) { border-left: 0; }
.number-btns ul li button { height: 100%; width:100%; font-size:16px; text-align: center; }

.payment-types {}
.payment-types ul li { margin-bottom: 16px; }
.payment-types ul li button  { text-align: left; border-radius:6px; background: var(--background-color); padding: 16px 24px; position: relative; width:100%; }
.payment-types ul li button:after { content: ''; position: absolute; right:24px; top:50%; background: url(../img/common/ico_list_more.svg) no-repeat 50% 50%; width:20px; height: 20px; margin-top:-10px;}
.payment-types ul li button .name { display: flex; align-items: center; }
.payment-types ul li button .name img { flex:0 0 34px; }
.payment-types ul li button .name dl { margin-left: 16px; }
.payment-types ul li button .name dl dt  { font-size:16px; margin-bottom: 4px; }
.payment-types ul li button .name dl dd { font-weight: 400; color: var(--font-color3); }

.bank-list ul { display: flex;flex-wrap: wrap; margin:0 -5px; }
.bank-list ul li { padding:0 5px 10px; width:calc(100% / 3); }
.auth-number { display: flex; justify-content: center; gap:16px; margin-bottom: 40px;  }
.auth-number div{  width:90px; height: 100px; display: flex; justify-content: center; align-items: center; background: var(--background-color); text-align: center; border-radius:6px; font-size:50px; font-weight: 600; }

.table-receipt {}
.table-receipt table { width:100%; border-collapse: collapse; }
.table-receipt table thead th { padding:8px 0; font-size:16px; font-weight: 500; border-top:1px dashed var(--line-color2);border-bottom:1px dashed var(--line-color2); text-align: center; }
.table-receipt table td { text-align: center; padding:8px 0; font-weight: 400; }
.table-receipt table td[colspan] { color: var(--font-color3); text-align: left; padding:0; }
.table-receipt table td[colspan] div { padding-left: 18px; position: relative;}
.table-receipt table td[colspan] div:before { content: '└'; position: absolute;left: 0; top:0;  }

.spowise-pay { padding-left: 28px; }
.spowise-pay .before { margin:16px 0; }
.spowise-pay .pay { border-radius:6px; background: var(--background-color); border: 1px solid var(--line-color1); height: 271px; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; cursor: pointer; }
.spowise-pay .pay p { font-size:16px; font-weight: 400; color: var(--font-color3); margin-top:16px; }
.spowise-pay .pay-benefit {margin-bottom: 16px; font-weight: 400;color: var(--font-color3); margin-top:16px;  }
.spowise-pay .pay-benefit .tit { display: flex; justify-content: center; }
.spowise-pay .pay-benefit .tit button { font-weight: 400; font-size:16px; color: var(--font-color3); display: flex; align-items: center;  }
.spowise-pay .pay-benefit .tit button i { width:13px; height: 13px; position: relative;margin-left: 8px; }
.spowise-pay .pay-benefit .tit button i:before { content: ''; position: absolute;left: 0; right:0; top:50%; height: 1px; background: #999; }
.spowise-pay .pay-benefit .tit button i:after { content: ''; position: absolute;left: 0; right:0; top:50%; height: 1px; background: #999; transform: rotate(90deg); transition: all 0.5s ease; }
.spowise-pay .pay-benefit .tit.active button i:after { transform: rotate(-180deg); }
.spowise-pay .pay-benefit .txt { display: none; margin-top:8px; }
.spowise-pay .pay-benefit .tit.active + .txt { display: block; }
.pay-slider {  position: relative; }
.pay-slider .swiper-container { }
.pay-slider .swiper-slide { width:540px !important; }
.pay-slider .item { position: relative; border-radius:6px; overflow: hidden; }
.pay-slider .item img { width:100%; }
.pay-slider .item .name { position: absolute;left: 16px; bottom:16px; font-weight: 400; color: #fff;  }
.pay-slider .item .name div{ display: flex;  font-size:16px;font-weight: 400; }
.pay-slider .item .name div p + p { color: #999;  }
.pay-slider .item .name div p + p:before { content: ''; display: inline-block; vertical-align: middle; width:2px; height: 20px; background: #999;margin:0 16px; }
.pay-slider .item .nick { position: absolute; right:16px; bottom:16px; font-size:22px; font-weight: 400; color: #fff; }
.pay-slider .swiper-button-prev,
.pay-slider .swiper-button-next { top:50%; margin-top:-12px; width:28px; height: 28px; background: url(../img/common/ico_calendar_left.svg) no-repeat 50% 50%; }
.pay-slider .swiper-button-prev { left: -34px; }
.pay-slider .swiper-button-next { right: -34px; transform: scaleX(-1); }
.pay-description { margin-left: 28px; margin-bottom: 16px; }
.pay-description .box { border: 1px dashed var(--line-color1); text-align: center; font-weight: 400; color: var(--font-color3); padding:90px 12px; border-radius:6px; }

/************************************************************************************************************************************************************************************
	Main
************************************************************************************************************************************************************************************/
.main-search-wrap { background: url(../img/main/tmp__visual_banner.png) no-repeat 50% 50%; background-size:cover; height: 650px; }
.main-search-wrap .inner { display: flex; justify-content: space-between; padding-top:56px; padding-bottom: 56px; }
.main-search-wrap .left { flex: 1; margin-right:40px; padding-top:40px;  }
.main-search-wrap .right { flex: 0 0 400px; width:400px; }
.main-search-wrap .left h2 { color: #fff; margin-bottom: 40px;  }
.main-search-wrap .left h2 small { font-size:24px; }
.main-search-wrap .left h2 strong { display: block; font-size:48px; font-weight: 600;letter-spacing: -1px;}
.main-search { padding: 30px; background: rgba(17,17,17,0.4); border-radius:20px; }
.main-search h3 { font-size:24px; font-weight: 500; color: #fff;  margin-bottom: 16px;  }
.main-search h3 small { display: block; font-size:16px; font-weight: 400; opacity:0.8; }
.main-search .search { position: relative; padding-right:196px; }
.main-search .search .inp { width:100%; border: 0; }
.main-search .search .btn { position: absolute; right:0; top:0; width:180px; background: #1CAF92; color: #fff; }
.main-banner { position: relative; box-shadow:0 0 20px rgba(0,0,0,0.08);}
.main-banner .swiper-slide img { width:100%; }
.main-banner .controls { position: absolute; right:16px; bottom:16px; display: flex; align-items: center; justify-content: center; padding:0 16px; height: 36px; border-radius:36px; background: rgba(255,255,255,0.75); white-space: nowrap; z-index:2; }
.main-banner .controls .swiper-pagination { font-size:16px; font-weight: 400; color: var(--font-color3); position: static;  margin-right:4px;}
.main-banner .controls .swiper-pagination .swiper-pagination-current { font-weight: 600; color: var(--font-color1); }
.main-banner .controls .swiper-pagination small { font-size:10px; margin-left: 4px; }
.main-banner .controls .swiper-button-prev,
.main-banner .controls .swiper-button-next { position: static;margin: 0; opacity:1; width:24px; height: 24px; background: url(../img/main/ico_banner_prev.svg) no-repeat 50% 50%; flex:0 0 24px; }
.main-banner .controls .swiper-button-next { transform: scaleX(-1); }
.main-banner .controls .btn-play {  width:24px; height: 24px; background: url(../img/main/ico_pause1.svg) no-repeat 50% 50%; flex:0 0 24px; }
.main-banner .controls .btn-play.active { background-image:url(../img/main/ico_play.svg); }

.main-inquiry { margin:-126px 0 80px; position: relative; }
.tabs2:after { display: block; clear:both; content: '';  }
.tabs2 a { float:left; width:160px; height: 56px; border-radius:6px 6px 0 0; text-align: center; display:flex; align-items: center; justify-content: center; font-size:18px; font-weight: 500; color: #fff; background: #102758; gap:4px;  transition: all 0.5s ease; }
.tabs2 a i { width:24px; height: 24px; background-repeat: no-repeat; background-position: 50% 50%; }
.tabs2 a .ic1 { background-image: url(../img/main/ico_tab1.svg);}
.tabs2 a .ic2 { background-image: url(../img/main/ico_tab2.svg);}
.tabs2 a .ic3 { background-image: url(../img/main/ico_tab3.svg);}
.tabs2 a.active { color: var(--brand-color1); }
.tabs2 a.active .ic1 { background-image: url(../img/main/ico_tab1_on.svg);}
.tabs2 a.active .ic2 { background-image: url(../img/main/ico_tab2_on.svg);}
.tabs2 a.active .ic3 { background-image: url(../img/main/ico_tab3_on.svg);}
.tabs2 a.active { background: #fff !important; }
.main-inquiry .cont {  padding:40px; background: #fff; border-radius:0 6px 6px 6px; box-shadow:0 0 50px rgba(0,0,0,0.08); }
.main-inquiry .inq-box { display: flex; justify-content: space-between; gap:20px; }
.main-inquiry .inq-box .select { width:100%; }
.main-inquiry .inq-box .btn { flex:0 0 180px; background: var(--brand-color1); color: #fff; }
.main-inquiry .tab-cont > div .inq-box .btn {
	background: var(--brand-color1);  color: #fff;
}
.favorite-inq { position: absolute; right:0; top:8px; }
.favorite-inq a { display: inline-block; vertical-align: middle; padding:0 16px; height: 40px; line-height: 40px;  background: #fff; border-radius:40px; font-size:16px; font-weight: 500; }
.favorite-inq a:before {content: ''; display: inline-block; vertical-align: middle; background: url(../img/main/ico_star.svg) no-repeat 0 0 ; width:24px; height: 24px; margin:-3px 4px 0 0}

.main-reservation {position: relative; margin-bottom: 80px; }
.item-fac { border-radius:6px; box-shadow:0 0 10px rgba(0,0,0,0.08); height: 100%; padding-bottom: 68px; position: relative; }
.item-fac .photo { overflow: hidden; height: 200px; overflow: hidden; position: relative; border-radius:6px; }
.item-fac .photo img { width:100%; height: 100%; object-fit: cover; }
.item-fac .photo .status { position: absolute;left: 16px; bottom:16px; }
.item-fac .photo .status span { display: inline-block; vertical-align: middle; padding:0 12px; height: 29px; line-height: 28px; font-size:12px; font-weight: 500; background: rgba(47,97,213,0.7);  color: #fff; border-radius:29px;  }
.item-fac .photo .status .before { background: rgba(17,17,17,0.7);}
.item-fac .info { padding:16px 16px 20px; }
.item-fac .info h4 { font-size:20px; font-weight: 600; margin-bottom: 8px; }
.item-fac .info .tel { font-size:16px; font-weight: 400; margin-bottom: 16px;  }
.item-fac .info .tel:before { content: ''; display: inline-block; vertical-align: middle; width:28px; height: 28px; background: url(../img/main/ico_tel.svg) no-repeat 50% 50%; margin:-3px 8px 0 0; }
.item-fac .info h5 { font-size:14px; font-weight: 500; margin-bottom: 8px; }
.item-fac .info .tag { display: flex; gap:4px; overflow-x: auto; }
.item-fac .info .tag li { flex-shrink: 0; }
.item-fac .info .tag li p { height: 30px; line-height: 28px; border-radius:30px; border: 1px solid var(--line-color1); padding:0 12px; font-size:12px; font-weight: 500; color: var(--font-color3); }
.item-fac .info .tag + h5 { margin-top:16px; }
.item-fac .info .btn-box { position: absolute;left: 16px; right:16px; bottom:20px; }
.item-fac .info .btn { margin-top:20px; font-size:16px; }
.main-reservation .swiper-container { padding:10px; margin:0 -10px; }
.main-reservation .swiper-wrapper { align-items: stretch}
.main-reservation .swiper-slide {}

.main-reservation  .btn-main-more { position: absolute; right:0; top:16px; }
.main-reservation .controls { display: flex;justify-content: center; align-items: center; margin-top:10px;  }
.main-reservation .controls .swiper-pagination {position: static; margin-right:8px;}
.main-reservation .controls .swiper-pagination .swiper-pagination-bullet { width:10px; height: 10px; border-radius:100%; background: var(--line-color1); margin:0 2px;opacity:1; transition: all 0.5s ease;}
.main-reservation .controls .swiper-pagination .swiper-pagination-bullet-active { background-color:var(--brand-color1); }
.main-reservation .controls .btn-play { background: url(../img/main/ico_pause1.svg) no-repeat 50% 50%; width:12px; height: 16px; }
.main-reservation .controls .btn-play.active { background-image: url(../img/main/ico_play.svg);}
.main-reservation.type02 .swiper-wrapper { height: auto !important; }
.main-reservation.type02 .item-fac { display: flex; padding-bottom: 68px; }
.main-reservation.type02 .item-fac .photo { height: calc(100% + 68px);width: 50%; padding: 16px 0 16px 16px; }
.main-reservation.type02 .item-fac .photo .status { left: 32px; bottom: 32px;}
.main-reservation.type02 .item-fac .info { width: 50%; }
.main-reservation.type02 .item-fac .info .btn-box { width: 50%; left: auto; right: 0; bottom: 0; padding: 0 16px 16px 16px; }


.btn-main-more { font-size:16px;font-weight: 500; }
.btn-main-more:after { content: ''; display: inline-block; vertical-align: middle; background: url(../img/main/ico_more.svg) no-repeat 50% 50%; width:24px; height: 24px; margin:-3px 0 0 4px;  }
.main-tit { text-align: center; font-size:35px; font-weight: 600; margin-bottom: 20px; }
.main-information { position: relative;}
.tabs3 { display:flex; margin-bottom: 10px; position: relative;z-index:2; }
.tabs3 div { display:flex; position: relative; }
.tabs3 div:before { content: ''; position: absolute;left: 0; top:0; right:0; height: 100%; border-radius:48px;border: 1px solid var(--line-color1); border-radius:48px; z-index:-1; background: #fff;  box-sizing: border-box; }
.tabs3 div a { height:48px; line-height: 48px; padding:0 20px; font-size:18px; font-weight: 500; color: var(--font-color3); transition: all 0.5s ease; border-radius:48px;  }
.tabs3 div a.active { background: #033987; color: #fff; }
.main-information{ background: url(../img/main/bg_infor.png) no-repeat 50% 100%; background-size:cover; padding-bottom: 80px; margin-bottom: 80px;}
.main-information .cont { position: relative;}
.main-information .swiper-container { padding:10px; margin:0 -10px; }
.main-information .slider .swiper-slide a { display: block; padding:16px; border-radius:6px; box-shadow:0 0 10px rgba(0,0,0,0.08); background: #fff; }
.main-information .slider .swiper-slide a .loc { font-size:15px; font-weight: 500; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-information .slider .swiper-slide a h4 { font-size:18px; font-weight: 600; margin-bottom: 16px; line-height: 28px; height: 56px; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2; }
.main-information .slider .swiper-slide a p { font-size:16px; font-weight: 400; margin-bottom: 40px; line-height: 26px; height: 52px; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2; }
.main-information .slider .swiper-slide a .date { color: #999; font-size:13px; font-weight: 400; }
.main-information .controls { position: absolute; right:0; top:-54px; z-index:3;  display: flex; align-items: center; }
.main-information .controls .swiper-button-prev,
.main-information .controls .swiper-button-next { width:40px; height: 40px; border-radius:100%; background: rgba(17,17,17,0.4) url(../img/main/ico_slider_prev.svg) no-repeat 50% 50%; position: static; margin: 0; transition: all 0.5s ease;}
.main-information .controls .swiper-button-next { transform: scaleX(-1); margin:0 20px 0 8px;}
.main-information .controls .swiper-button-prev:hover,
.main-information .controls .swiper-button-next:hover { background-color:#033987;}
.main-information .tit2 { font-size:28px; font-weight: 600; margin-bottom: 16px; margin-top:48px; }
.main-information .main-faq-list { position: relative; }
.main-information .main-faq-list .btn-main-more { position: absolute; right:0; top:8px; }
.main-information .main-faq-list ul { display: flex; flex-wrap: wrap; gap:20px; } 
.main-information .main-faq-list ul li { flex: 1; }
.main-information .main-faq-list ul li a { display: block; height: 100%; padding: 16px; border-radius:6px; box-shadow:0 0 30px rgba(0,0,0,0.08); background: #fff; }
.main-information .main-faq-list ul li a:before { content: 'Q'; width:40px; height: 40px; border-radius:100%; display: block; background: var(--background-color); text-align: center; line-height: 40px; font-size:24px; font-weight: 500; font-family: 'Roboto'; margin-bottom: 8px;}
.main-information .main-faq-list ul li a div { font-size:18px; font-weight: 400; }
.main-reser-stat { padding-bottom: 40px; }
.main-reser-stat ul { display: flex; flex-wrap: wrap; gap:40px;  }
.main-reser-stat ul li { flex: 1; }
.main-reser-stat ul li a { display: block; height: 180px; padding: 20px; border-radius:6px; box-shadow: 0 0 50px rgba(0,0,0,0.08); background: url(../img/main/bg_banner1.svg) no-repeat right 100%; }
.main-reser-stat ul li a.b2 { background-image: url(../img/main/bg_banner2.svg);}
.main-reser-stat ul li a.b3 { background-image: url(../img/main/bg_banner3.svg);}
.main-reser-stat ul li a h4 { font-size:20px; font-weight: 600; margin-bottom: 8px; }
.main-reser-stat ul li a p { font-size:16px; font-weight: 400; color: var(--font-color3); }

.rest h2 { font-size:24px; font-weight: 700; line-height: 1.4; margin-bottom: 14px; }
.rest .txt { font-size:16px; line-height: 1.5; margin-bottom: 16px; }
.rest .info { padding: 16px; background: #F7F8FB; border-radius:5px; margin-bottom: 16px;  }
.rest .info dl { font-size:14px; line-height: 1.5; display: flex; justify-content: space-between; }
.rest .info dl + dl { margin-top:8px; }
.rest .info dl dd { color: #767676; }
.rest .info dl.last  {display: block; }
.pr-step ol { display: flex; justify-content: center; align-items: center; margin-bottom: 40px;  }
.pr-step ol li { display: flex; align-items: center; }
.pr-step ol li p { width:48px; height:48px; border-radius:100%; border: 1px solid #E5E5E5; font-size:20px; color: #999; line-height: 46px; text-align: center; font-weight: 600; }
.pr-step ol li:after { content: ''; height: 2px; background: #e5e5e5; display: block; width:90px; }
.pr-step ol li:last-child:after { display: none; }
.pr-step ol li.active p { background: #111; color: #fff; border-color:#111;  }
.list-type4 ul { display:flex; flex-wrap: wrap; margin:-4px -4px 40px;  }
.list-type4 ul li { width:25%; padding:4px;  }
.no-choice { border: 1px solid #E5E5E5; border-radius:6px; font-size:16px; color: #767676; padding:60px 10px; text-align: center; font-weight: 400;  margin-bottom: 40px; }
.lock-info { background: #f7f8f8; border-radius:6px; padding: 16px; margin-bottom: 20px; }
.lock-info h3 { font-size:20px; font-weight: 600; margin-bottom: 16px; }
.lock-info dl:after { display: block; content: ''; clear: both; }
.lock-info dl  { font-size:16px; line-height: 1.5; }
.lock-info dl + dl { margin-top:8px; }
.lock-info dl dt { float:left; width:70px; color: #767676;  }
.lock-info dl dd { overflow: hidden; }
.msg-box2 { text-align: center; margin:120px 0; }
.msg-box2 .ico-complete2 { margin-bottom: 40px; }

.login-types { display: flex; justify-content: center; gap:40px;text-align: center; margin-bottom: 36px; }
.login-types a p { font-size:16px;  }
.prv-list { border-top:1px solid #111; margin-bottom: 40px;  }
.prv-list li { display: flex; justify-content: space-between; align-items: center; height: 58px; border-bottom: 1px solid var(--line-color1); }
.prv-list li a { padding-bottom: 1px; border-bottom: 1px solid var(--line-color1); font-size:14px; color: var(--font-color3); }
.prv-list .checkbox + div p { font-size:16px; }



/* 반응형 분기 */
@media all and (max-width:1024px) {
	::-webkit-scrollbar { display: none; }
	.mobile { display: block; }
	.pc { display: none; }
	
	.mb24 { margin-bottom: 16px !important; }
	.mb40 { margin-bottom: 28px !important; }
	.mb60 { margin-bottom: 40px !important; }
	
	.f16 { font-size:14px !important; }
	.f20 { font-size:16px !important; }
	
	body { font-size:12px; }
	.m-header { display: block; }
	.m-header.pc { display: none; }
	.m-menus { position: fixed; left: 0; right:0; top:60px; background: #fff; box-shadow:0 10px 20px rgba(0,0,0,0.08); padding:0 16px 8px; z-index:50;}
	.m-menus .btn-dep1 { display: block; width:100%; height: 48px; padding-left: 16px;  font-size:14px;text-align: left;position: relative;  border-radius:6px; }
	.m-menus .btn-dep1:before { content: ''; position: absolute; right:16px; top:17px; width:7px; height: 7px; border-left:2px solid var(--line-color3); border-bottom: 2px solid var(--line-color3); transform: rotate(-45deg); transition: all 0.5s ease;}
	.m-menus .active .btn-dep1 { border: 2px solid var(--brand-color1); }
	.m-menus .active .btn-dep1:before { transform: rotate(135deg); border-color:#fff; top:21px; filter: invert(1); }

	.m-menus .dep22 { display: none; padding-top:8px; }
	.m-menus .btn-dep22 { position: relative; display: block; height: 40px; line-height: 40px;  padding-left: 16px; transition: all 0.5s ease;font-size:14px; color: var(--font-color3); text-align: left;     border-radius: 6px; }
	.m-menus .btn-dep22.arrow::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width:20px; height: 20px; background: url(../img/common/ico_arr_down.svg) no-repeat center / contain; transition: all 0.5s ease; }

	.m-menus .dep2 { display: none; padding-top:8px; }
	.m-menus .btn-dep2 { position: relative; display: block; height: 40px; line-height: 40px;  padding-left: 16px; transition: all 0.5s ease;font-size:14px; color: var(--font-color3); text-align: left;     border-radius: 6px; }
	.m-menus .btn-dep2.arrow::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width:20px; height: 20px; background: url(../img/common/ico_arr_down.svg) no-repeat center / contain; transition: all 0.5s ease; }
	.m-menus .btn-dep2.arrow.on { background: var(--brand-color1);
	color: #fff;  }
	.m-menus .btn-dep2.arrow.on::after { transform: translateY(-50%) rotate(180deg); filter: invert(1); }

	/* 231101 추가 */
	.m-menus .dep3 { display: none; width: 100%; margin-top: 8px; margin-bottom: 24px; }
	.m-menus .btn-dep3 {  display: block; height: 40px; line-height: 40px;  padding-left: 16px; transition: all 0.5s ease;font-size:14px; color: var(--font-color3); text-align: left;  }
	.m-menus .btn-dep3.active { background: var(--background-color); color: var(--brand-color1); font-weight: 600; }


	/* Element */
	.badge { height: 30px; line-height: 28px;  }
	.badge-txtbox { display: block; }
	.badge-txt { font-size:14px; margin-top:4px; }
	.badge2 { height: 21px; line-height: 20px; font-size:12px; }
	.hr { margin:16px 0;}
	.inner .hr1 { width:calc(100% + 32px); margin-left:-16px; margin-right:-16px; }
	.inner .hr { width:calc(100% + 32px); margin-left:-16px; margin-right:-16px; }
	.hr.mt40.mb40,
	.hr1.mt40.mb40{ margin-top:20px !important; margin-bottom: 20px !important;}
	
	
	/* Form */
	.inp,
	.select{ height: 40px; }
	.inp.large,
	.select.large{ height: 48px; font-size:14px; }
	.select { background-size:20px auto; background-position: right 12px center; }
	.select2 { font-size:14px; background-size:20px auto; }
	.inp.ico-on { padding-left: 42px; background-position: 16px 50%; background-size:20px auto; }
	.textarea { font-size:14px; height: 100px; }
	.inp-box .textarea-num { font-size:12px; bottom:4px;}
	.inp-box .btn { flex:0 0 100px; letter-spacing: -0.5px; padding: 0 !important; }
	.switch + div span { font-size:12px; }
	
	/* Icon */
	.ico-share { background-size:20px auto; }
	.ico-tip { width:20px; height: 20px; background-size:20px auto; }
	.ico-noimage {width:28px; height: 28px; background-size:28px auto; }
	.ico-file-excel { width:17px; height: 17px; background-size: contain; }
	.ico-refresh { width:20px; height: 20px; background-size:contain;}
	.ico-file { width:20px; height: 20px; background-size:contain;}
	.ico-complete2 { width:66px; height: 66px; background-size:contain; }
	.ico-download { width:20px; height: 20px; background-size:contain; }
	.ico-alert { width:40px; height: 40px; }
	
	
	/* Button */
	.btn { font-size:14px; height: 40px; padding:0 20px;  }
	.btn.btn-lg { font-size:14px;  height: 48px; padding:0 24px; }
	.btn.btn-m { height: 32px; padding:0 16px;  }
	.btn.btn-m2 { height: 32px; font-size:14px;  }
	.btn.btn-s { height: 24px; padding:0 12px; }
	.button-list ul li a { font-size:14px; }
	.link { font-size:14px; }
	
	/* Form */
	.checkbox + div em { width:20px; height: 20px; }
	.checkbox + div em:before { background-size:12px auto; }
	.checkbox + div p { font-size:14px; margin-left: 4px; }
	.checkbox-button + div { /*height: 48px; line-height: 46px;*/ padding: 12px; font-size:14px; }
	.checkbox-agree + div span { font-size:14px; }
	.checkbox-agree + div em { width:20px; height: 20px; background-size:contain; }
	.checkbox-agree.all + div em { background-size:10px auto; }
	.agreelist ul li { margin-top:12px; }
	.agreelist ul li .btn-view { width:20px; background-size:contain;}
	.radio + div em { width:20px; height: 20px; }
	.radio + div p {font-size:14px; }
	
	/* Title */
	.h2-sub { font-size:16px; margin-bottom: 8px; }
	.h3-sub { font-size:16px; margin-bottom: 8px; }
	
	/* 폼입력 */
	.form-title { margin-bottom: 16px; }
	.form-title .required { font-size:14px; }
	.form-tit1 { font-size:18px; }
	.form-tit2 { font-size:14px; }
	.form-tit3 { font-size:16px; }
	.file-list ul li a { font-size:14px; gap:4px;  }
	.pay-item1 dl { font-size:14px; }
	.pay-item1 .dc-box h4 { font-size:14px;}
	.pay-item1 .dc-box dl + dl { margin-top:4px; }
	.pay-item2 dl { font-size:14px; }
	.pay-item2 dl dt small { font-size:12px; }
	.pay-item2 dl dd { width:45%; }
	
	/* Table */
	.table { border-top:1px solid var(--brand-color1); }
	.table table,
	.table table tbody,
	.table table thead, 
	.table table tr,
	.table table td { display: block; text-align: left !important; padding: 0 !important;  }
	.table table .mobile a { display: block; padding:16px 40px 16px 16px; background: url(../img/common/ico_arr2.svg) no-repeat right 50%; background-position: right 16px center;}
	.table table .mobile a.type2 { background: none; padding-right:16px;}
	.table table .mobile .type { display: flex; align-items: center; gap:4px; }
	.table table .mobile .type p {  font-size:14px; color: var(--font-color3);  font-weight: 400; }
	.table table .mobile .etc { display: flex; align-items: center; font-size:12px; color: var(--font-color3); gap:8px;}
	.table table .mobile .etc2 { margin-top:4px; }
	.table table .mobile .etc2 dl { overflow: hidden; font-size:12px; color: var(--font-color3); font-weight: 400; word-break: break-all;  }
	.table table .mobile .etc2 dl dt { width:50px; float:left; }
	.table table .mobile .etc2 dl dd { overflow: hidden; }
	.table table .mobile .subj + .etc { margin-top:4px; }
	.table .pc { display: none; }
	.table .ico-file { width:16px; height: 16px; }
	.table .flex-m { display: flex; }
	.table .flex-m .img { width:45%;}
	.table .flex-m .img img { width:100%; object-fit: cover; height: 100%; }
	.table .flex-m .info { width:55%; padding-left: 16px;}
	.table2 { margin-bottom: 20px; }
	.table2.scroll table { width:1024px;}
	.table2 table thead th { height: 40px; font-size: 14px; }
	.table2 table tbody td { font-size:14px; }

	.board-view .head .type p { font-size:14px; }
	.board-view .head .writer { font-size:14px; }
	.board-view .body .text400 { font-size:14px; }
	.board-replay .text { font-size:14px; }
	.board-replay .text .m-center {text-align: center;  }
	.faq-list ul li .a .text400 { font-size:14px; }
	.faq-list ul li .q .type2 strong,
	.faq-list ul li .a .text400 strong { font-size:16px; }
	.faq-list ul li .q:before { width:20px; height: 20px; }
	
	.file-list2 { font-size:14px; }
	
	/* Popup */
	.popup .btn-all { font-size:12px; }
	.mobile-floating-type { overflow: hidden; }
	.mobile-floating-type .popup-box { position: fixed; left: 0; right:0; bottom:0; display: block; height: auto; }
	.mobile-floating-type .popup-cont { display: block; padding: 0; }
	.mobile-floating-type .popup { padding: 16px; max-width:100% !important;  }
	.mobile-floating-type .popup-head { margin-bottom: 16px; }
	.mobile-floating-type .popup-head .btn-refresh { font-size:14px; }
	.mobile-floating-type .popup-body { max-height: 400px; overflow: auto; }
	.mobile-floating-type .popup-foot {margin-top:0; }
	.mobile-floating-type .popup-foot .fixed-bottom { height: 60px; }
	.mobile-floating-type.schedule-type .popup-head { height: auto; padding:0; border: 0; }
	
	
	.modal-type .popup { padding: 16px; }
	.popup-body.pd24 { padding: 16px !important;}
	.popup-body.pdt0 { padding-top: 0 !important;}
	.popup-body.pdb0 { padding-bottom: 0 !important;}
	.popup-wrap.type2 .max-h580 { height: auto; padding: 0; overflow: visible;max-height: inherit; }
	.popup-wrap.type2 .popup-head { padding:16px; border-bottom: 0;}
	.popup-wrap.type2 .common-btns { padding: 16px; border-top:0; }
	.popup-head { margin-bottom: 16px; }
	.popup-head.mobile { display: flex;}
	.popup-head .h3-popup { font-size:16px; }
	.popup-msg { font-size:14px; margin-bottom: 32px; }
	.popup-wrap.small-type .popup-head { padding:16px; }
	.popup-wrap.small-type .popup-body { padding:0 16px; }
	.popup-wrap.small-type .popup-foot { padding: 16px; }
	.lecture-type { background: #fff; }
	.lecture-type .popup-cont { padding: 0; }
	.lecture-type .popup-head { position: fixed; left: 0; top:0; right:0; height: 60px; padding:0 16px; }
	.lecture-type .popup-body { position: fixed;left: 0; top:60px; right:0; bottom:80px; height: auto;}
	.lecture-type .fixed-bottom { padding: 0; height: 80px; }
	.lecture-list:before { width:44%; }
	.lecture-list > li { width:44%; }
	.lecture-list .btn-menu {  padding-left:16px; font-size:14px; }
	.lecture-list .list { padding:16px; left: inherit; width:56%; }
	.lecture-list .list .dep2 .btn-favo { font-size:14px; padding-top:10px; padding-bottom: 10px;  }
	.lecture-list .list .dep2 label + label { padding:6px;}
	.checkbox-choice1 + div { font-size:14px; padding-top:10px; padding-bottom: 10px; padding-right:40px; word-break: break-all; }
	.checkbox-choice2 + div { font-size:12px; word-break: break-all;}
	
	.full-type { background: #fff; }
	.full-type .popup { box-shadow:none; }
	.full-type .popup-cont { padding: 0; }
	.full-type .popup-head { position: fixed; left: 0; top:0; right:0; height: 60px; padding:0 16px; }
	.full-type .popup-body { position: fixed;left: 0; top:60px; right:0; bottom:80px; height: auto; box-shadow:none;  padding:16px; overflow: auto; }
	.full-type .fixed-bottom { padding: 0; height: 80px; }
	.search-hit { font-size:16px; }
	
	.path { margin-bottom: 8px; }
	.path.mb40 { margin-bottom: 16px !important; }
	.path .inner { height: 40px; }
	.path ol li .btn-home { background-size:15px auto; }
	.path ol li  {font-size:12px;}
	.head-tip { font-size:12px; }
	.layer-tip { width:290px; }
	.search-wrap { flex-direction: column; gap:8px; margin-bottom: 8px; }
	.search-wrap.type2 { flex-direction: row;  max-width:100%;}
	.search-wrap.type2.mb60 { margin-bottom: 16px !important; }
	.search-wrap .select-box { flex:0 0 35%; }
	.list-type1 ul {  }
	.list-type1 ul li { width:calc(100% / 2);  }
	.list-type1 ul li .btn-lg { height: 40px;  }
	.filter-sort { margin-bottom: 40px; flex-direction: row-reverse; }
	.filter-sort ul { gap:4px; flex-wrap: nowrap; white-space: nowrap; overflow: auto; ; margin-left: -16px; padding-left: 16px; flex: 1; }
	.filter-sort .btn-allfilter { flex: 0 0 50px; margin-left:20px; margin-right:0; font-size:14px; height: 28px; }
	.filter-sort .btn-allfilter:before {width:20px; height: 20px; margin-right:4px; background-size:20px auto; }
	.filter-sort .btn-srch { flex: 0 0 110px; margin-left:10px; margin-right:0; font-size:14px; text-align: right; height: 28px; }
	.filter-sort .btn-srch:before {width:20px; height: 20px; margin-right:4px; background-size:20px auto; }
	.filter-sort .btn-refresh { flex: 0 0 70px; margin-right:0; font-size:14px;  text-align: right; margin-left: 8px; }
	.filter-sort .btn-refresh:before { width:20px; height: 20px; margin-right:4px; background-size:20px auto; margin-top:-4px;}
	.filter-sort .btn-s { height: 28px; }
	.result-head { margin-bottom: 10px; }
	.remain div { font-size:18px; }
	.remain div strong,
	.remain div b { font-size:28px; }
	.remain p { font-size:14px; }
	.detail1 { font-size:14px; }
	.information1 .btn-flip { display: block; position: absolute; right:10px; top:10px; width:calc(100% - 20px); height: 30px; text-align: right;}
	.information1 .btn-flip:after { content: ''; display: inline-block; width:30px; height: 30px;  background: url(../img/common/ico_arr2.svg) no-repeat 100% 50%; transform: rotate(90deg); text-indent: -9999px; margin-top:-5px; transition: all 0.5s ease;}
	.information1 dl dt { width:60px; }
	.information1 dl:nth-child(n+2) { display: none; }
	.information1 dl.block { display: block; }
	.information1.active dl:nth-child(n+2) { display: block; }
	.information1.active .btn-flip:after { transform: rotate(-90deg); margin-top:6px; }
	.information2 dl { font-size:14px; }
	.information2.mb40 { margin-bottom: 4px !important; }
	.information3 dl { font-size:14px; }
	.information3 dl dt { width:70px; }
	.information4 dl  {font-size:14px; }
	.information4 dl dt { min-width:90px; }
	.information4 dl.price.large { font-size:16px; }
	.information5 dl { font-size:14px; }
	.mobile-clear { clear: both; float:none !important; }
	.detail-link a { font-size:14px; }
	.fixed-bottom { height: 80px; margin-top:0; }
	.fixed-bottom .common-btns { right:0; bottom:0; background: #fff; padding: 16px;  display: flex; justify-content: space-between; gap:8px; z-index:10;}
	.fixed-bottom .lect-common-btns { left: 0; right:0; bottom:0; background: #fff; padding: 16px;  display: flex; gap:8px; z-index:10;}
	.common-btns .btn { width:100%; }
	.common-btns.type2 .btn { width: 100%; }
	.request-complete { padding-top:20px; }
	
	.tabs { margin:0 -16px 16px; }
	.tabs ul li a { height: 48px; line-height: 46px; font-size:14px; }
	.text-list1,
	.text-list1 h4 {font-size:14px; }
	.text-list2 { font-size:14px; }
	.text-list2 p:before { top:8px; }
	.text1 { font-size:14px; }
	.description1 { font-size:12px; }
	.description1 div { padding-left: 16px; text-indent: -16px; }
	.description1 div p { padding-left: 0; text-indent: 0;}
	.description2 { padding:16px; font-size:14px; letter-spacing: -1px; }
	.description3 .txt { padding-left: 20px; }
	.description3 .txt:before { width:16px; height: 16px; background-size: contain; }
	
	.description4 { text-align: left; }
	.description4 h4 { font-size:14px; }
	.description4 div { font-size:12px; }
	
	/* 수강신청 */
	
	
	/* 수강신청 > 상세 */
	.lecture-head { display: block; margin-bottom: 40px; }
	.lecture-head .img-box { margin:0 -16px 16px;  width:auto; }
	.lecture-head .info-box { width:100%; }
	.lecture-head .info-box .remain p { font-size:14px; }
	.teacher-introduce .photo { width:calc(50% - 16px) ; height: 200px;  margin-right:0; position: absolute; left: 0; top:0;  }
	.teacher-introduce .photo img { height: 200px; object-fit: cover; width:100%; }
	.teacher-introduce .photo .none p { font-size:12px; }
	.teacher-introduce .info-box { padding-left: 50%; }
	.teacher-introduce { position: relative; display: block; }
	.teacher-introduce .information3 { min-height: 180px; }
	.teacher-introduce .list-type2 { margin-left: -100%;   }
	.teacher-introduce .list-type2 ul { margin: 0 ; display: block; }
	.teacher-introduce .list-type2 ul li { width:auto; padding: 0 0 16px;}
	.teacher-introduce .info-box .list-type2 ul li:nth-child(1), .teacher-introduce .info-box .list-type2 ul li:nth-child(2) { padding-bottom: 16px; }
	.teacher-group dl dd { min-height: 100px; height: auto; max-height: 100%;}
	.mobile-floating-type .popup-box .teacher-group dl dd { height: 100px; overflow-y: auto; max-height: 100px;}
	
	
	.file-box .name { gap:4px; }
	.file-box .name span { font-size:14px; }
	.file-box .desc { font-size:12px; }
	
	/* 필터 */
	.filter-list { margin-bottom: 16px; overflow: hidden; }
	.filter-list.type3 ul { margin-right:-2px;}
	.filter-list.type3 ul li { width:calc(100% / 3 - 6px); }
	.filter-list.type4 ul { margin-right:-2px; }
	
	/* 대관신청 */
	.fixed-time { display: block; }
	.fixed-price { height: 48px; }
	.fixed-price dl { height: 48px; position: fixed;left: 0;right:0; bottom:80px; background: rgba(17,17,17,0.8); border-radius:0; font-size:14px; font-weight: 500; }
	.calendar-time { margin:0 -16px; }
	.calendar-time .body { overflow: auto; }
	.calendar-time .body table { width:1220px; }
	.calendar-time .body table tbody td button { height: 36px; }
	.calendar-desc.mobile { display: flex; }
	
	.borrow-times { display: block; }
	.calendar-box { margin-bottom: 40px; }
	.calendar-time .head { margin-bottom: 8px; }
	.calendar-time .year { justify-content: space-between; }
	.calendar-time .year h4 { font-size:16px; }
	.calendar-time .body table thead th:first-child { position: sticky; left: 0; background: var(--background-color);  z-index:2;}
	.calendar-time .body table tbody th:first-child { position: sticky; left: 0; background: #fff; z-index:2;}
	.calendar-time .body table tbody tr:last-child th:first-child { border-bottom:1px solid var(--line-color1); }
	
	.popup-calendar-wrap { display: block; }
	.popup-calendar-wrap .calendar-box { padding: 0; width:auto;}
	.popup-calendar-wrap .times { padding: 0 0 10px; width:auto; height: auto; overflow: visible; }
	.schedule-type .fixed-bottom { padding: 0; }
	.calendar-choice{ display: block; padding: 0;  }
	.calendar-choice .btn-prev,
	.calendar-choice .btn-next { display: none; }
	.calendar-choice .calendar2 + .calendar2 { margin-top:16px; }
	.calendar2 .days table thead th { font-size:12px; }
	.calendar2 .days table tbody td { height: 40px; font-size:14px;  }
	.calendar2 .days table tbody td .day { height: 32px; }
	.calendar2 .days table tbody td button { height: 32px; width:32px; font-size:14px; }
	.calendar-selected { height: 64px; }
	.calendar-selected div{  position: fixed; left: 0; right:0; bottom:80px; height: 48px; text-align: center; font-size:14px; margin: 0 ;border-radius:0; z-index:2;}
	#container  { padding-bottom: 0;}
	.list-more { padding-bottom: 16px; }
	
	/* 회원가입 */
	.join-step {  position: relative; margin:0 -16px; height: 48px; overflow: hidden;  margin-bottom: 16px;}
	.join-step.step1 { }
	.join-step ul { width:500px;position: absolute;left: 50%; }
	.join-step.step2 ul { transform: translateX(-25%);}
	.join-step.step3 ul { transform: translateX(-50%);}
	.join-step.step4 ul {  transform: translateX(-75%); }
	.join-step.step5 ul {  transform: translateX(-100%); }
	.join-step ul li.active p { width:40px; height: 40px; margin-left: -20px; top:-20px; }
	.join-text { text-align: left; }
	.join-text + .hr1 { margin-top:-24px; }
	.join-h3 { margin-bottom: 4px; }
	.join-txt1 { font-size:14px; }
	.join-checks { gap:8px; margin-bottom: 12px; }
	
	.join-radio + div { height: 230px; }
	.join-radio + div img { height: 64px; }
	.join-radio + div b { font-size:14px; }
	.join-radio + div p { font-size:14px; }
	.join-radio + div:before { right:8px; top:8px; width:20px; height: 20px; }
	.join-radio:checked + div:before { background-size:12px auto; }
	.prv-txt h5 { font-size:14px; }
	.prv-txt div { font-size:12px; }
	.login-btns a { font-size:14px; padding:0 8px;  }
	.login-btns a:before { left: -1px; }
	.btn-kakao,
	.btn-naver,
	.btn-apple { text-indent: 0;}
	.btn-kakao:before,
	.btn-naver:before,
	.btn-apple:before { position: absolute;left: 16px; top:0; width:28px; height: 100%; margin-top:0; }
	.mb24 + .form-msg { margin-top:-12px; }
	.mb60 + .form-msg { margin-top:-36px; }
	.join-txt2 { padding:20px; }
	.msg-box.mt120 { margin-top:60px !important; }
	.msg-box.mt120 { margin:0 !important; }
	.msg-box { display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: calc(100vh - 140px);  margin: 0;} 
	.join-step + .msg-box { min-height: calc(100vh - 204px); padding-bottom: 30px; }
	.join-txt2 { width:100%; }
	
	
	 body.search-on .top-search-mobile { display: block; }
	.top-search-mobile { position: fixed;left: 0; right:0; top:0; background: #fff; z-index:200;  border-radius:0 0 6px 6px; display: none; }
	.top-search-mobile .search-wrap.type2 {  margin:0; max-width:100%; padding:0 16px 16px; }
	.top-search-mobile .header { display: flex; align-items: center; height: 60px; }
	.top-search-mobile .header .fixed { background: #fff; height: 60px;  }
	.top-search-mobile .header h1 a,
	.top-search-mobile .header h2 a { display: flex; align-items: center; gap:4px; font-size:20px; font-weight: 600; padding-left: 16px; line-height: 60px;  }
	.top-search-mobile .header .right { position: absolute; right:0; top:0; display: flex; }
	.top-search-mobile .header .right button { height: 60px; padding:0 16px; }
	.top-search-mobile .header h1 a img,
	.top-search-mobile .header h2 a img  { width: 88px; height: 22px; }

	.mobile-outer { margin:0 -16px;}
	.privacy-wrap { position: fixed;left: 0; top:0; right:0; bottom:0; background: #fff; z-index:100; padding:60px 16px; }
	.privacy-wrap .popup-head { position: fixed;left: 0; top:0; right:0; height: 60px; padding:0 16px; }
	.prv-btns { position: fixed; left: 0; right:0; bottom:80px; padding:0 16px;}
	.prv-text { height: calc(100vh - 230px); }
	
	#footer .foot1 { display: block;  margin-bottom: 20px; }
	#footer .foot1 .logo { font-size:18px; margin-right:0; height: 50px; }
	#footer .foot1 .info { margin:20px 0}
	#footer .foot1 .info dl { font-size:14px; color: #fff; display: flex; }
	#footer .foot1 .info dl dt{ float:none; color: #fff;  width:auto; }
	#footer .foot1 .info dl dt:after { content: ':'; display: inline; margin:0 4px; }
	#footer .foot1 .family { position: static;}
	#footer .menu { gap:16px; }
	#footer .menu a { font-size:14px; }
	
	.favorite-wrap { display: block; }
	.favorite-wrap .btn-flip { height: 48px; }
	.favorite-wrap .btn-flip span { font-size:14px; }
	.favorite-wrap .btn-flip:before,
	.checkbox-choice1.star + div:before{ width:20px; height: 20px; }
	.checkbox-choice1.star + div { padding-top:13px; padding-bottom: 13px;}
	.favorite-wrap .item + .item { margin-top:20px; }
	.keyword p { height: 32px; line-height: 30px; font-size:14px; }
	.sns-setting ul li .ss img { flex:0 0 40px; }
	.sns-setting ul li .ss span { font-size:14px; }
	.result-msg  { margin:110px 0;}
	.result-msg p { font-size:14px; }
	.password p { width:28px; height: 28px; background-size:12px auto; }
	.number-btns { position: fixed;left: 0; right:0; bottom:0; background: #fff; z-index:2;}
	.number-btns ul li { height: 60px; }
	.bank-list ul {margin:0 -4px; }
	.bank-list ul li { padding:0 4px 8px; }
	.checkbox-bank + div {height: 76px; }
	.checkbox-bank + div p { font-size:14px; }
	.auth-number { gap:12px; }
	.auth-number div { width:70px; height: 80px; font-size:40px;  }
	.table-receipt table thead th { font-size:14px; }
	.table-receipt table td { font-size:14px; }
	.spowise-pay .pay img { height: 40px; }
	.spowise-pay .pay p { font-size:12px; margin-top:8px; }
	.spowise-pay .pay-benefit .tit button { font-size:14px; }
	.pay-slider .swiper-slide { width:280px !important; }
	.pay-slider .swiper-slide img { height: 160px; object-fit: cover; }
	.pay-slider { margin-left: -28px; }
	.pay-slider .swiper-button-prev,
	.pay-slider .swiper-button-next { display: none; }
	.pay-slider .swiper-container { margin:0 -16px;  }
	.pay-slider .item .name div p + p:before { width:1px; height: 14px; margin:0 8px; }
	.pay-slider .item .name { left: 8px; }
	.pay-slider .item .name div { font-size:12px; }
	.pay-slider .item .nick { right:8px;  font-size:12px; }
	.spowise-pay .pay img{  height: 40px; }
	.spowise-pay .pay { height: 160px; }
	.pay-description .box { padding:60px 12px; }
	
	.m-gnb {  position: fixed;left: 0; top:0; right:0; bottom:0; background: #fff; z-index:9999; }
	.m-gnb .head { height: 60px; display: flex; justify-content: space-between; align-items: center; padding:0 16px; }
	.m-gnb .head h2 { font-size:20px; font-weight: 600; }
	.m-gnb .head h2 a img { width: 88px; height: 22px; }
	
	.m-gnb button { height: 60px; width:28px; margin-left: 8px; }
	.m-gnb .menus { display: flex; justify-content: space-between; padding:0 16px; border-bottom: 1px solid var(--line-color1);  }
	.m-gnb .menus a { display: flex; justify-content: center; align-items: center; height: 77px; font-size:14px; font-weight: 400; text-align:center; flex: 1; flex-direction: column; }
	.m-gnb .menus a span { display: block; padding-top:4px; }
	.m-gnb .nav { position: absolute;left: 0; top:138px; right:0; bottom:0; }
	.m-gnb .nav > ul { width:44%; background: var(--background-color); height: 100%;  }
	.m-gnb .nav > ul > li.active .btn-dep1 { background: #fff; color: var(--font-color1); }
	.m-gnb .nav .btn-dep1 { display: block; padding-left: 16px; height: 52px; line-height: 52px; font-weight: 400; font-size:14px; color: var(--font-color3); transition: all 0.5s ease;}
	.m-gnb .nav .dep2 { display: none; position: absolute; right:0; top:0; left: 44%; bottom:0; overflow: auto; background: #fff; }
	.m-gnb .nav .dep2 .inner { padding: 0; }
	.m-gnb .nav .dep2 h2 { display: none; }
	.m-gnb .nav .btn-dep2 { position: relative; display: block; padding:14px 44px 14px 16px; font-size:14px; font-weight: 400; }
	.m-gnb .nav .btn-dep2.arrow::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width:20px; height: 20px; background: url(../img/common/ico_arr_down.svg) no-repeat center / contain; transition: all 0.5s ease; }
	.m-gnb .nav .btn-dep2.arrow.on::after { transform: translateY(-50%) rotate(180deg); }
	/* 231101 추가 */
	/* .m-gnb .nav .dep3.active { display: block;  } */
	.m-gnb .nav .dep3 { display: none; margin-bottom: 16px; }
	.m-gnb .nav .dep3 li a {display: inline-block; width: 100%; padding: 4px 16px; font-size: 14px; color: var(--font-color3); font-weight: 400; }
	.m-gnb .nav .dep3 li a:active { color: var(--font-color1); font-weight: 500; }
	.m-gnb .nav .dep3.active { display: block; }

	.m-nav { display: block; position: fixed;left: 0; right:0; bottom:0; border-radius:20px 20px 0 0; box-shadow:0 -5px 50px rgba(0,0,0,0.1); z-index:40; background: #fff; }
	.m-nav nav { display: flex; justify-content: space-between; padding:0 10px; }
	.m-nav nav a { flex: 1; width:20%; text-align: center; font-size:12px; height: 80px; display: flex; align-items: center; justify-content: center; color: var(--font-color3); flex-direction: column;  }
	.m-nav nav a:before { content: '';  display: block; background: url(../img/main/ico_mobile_menu1_off.svg) no-repeat 50% 50%; width:28px; height: 28px; margin: 0 auto;  }
	.m-nav nav a.m1:before { background-image: url(../img/main/ico_mobile_menu1_off.svg);}
	.m-nav nav a.m2:before { background-image: url(../img/main/ico_mobile_menu2_off.svg);}
	.m-nav nav a.m3:before { background-image: url(../img/main/ico_mobile_menu3_off.svg);}
	.m-nav nav a.m4:before { background-image: url(../img/main/ico_mobile_menu4_off.svg);}
	.m-nav nav a.m5:before { background-image: url(../img/main/ico_mobile_menu5_off.svg);}
	.m-nav nav a.active { color: var(--font-color1); }
	.m-nav nav a.active.m1:before { background-image: url(../img/main/ico_mobile_menu1_on.svg);}
	.m-nav nav a.active.m2:before { background-image: url(../img/main/ico_mobile_menu2_on.svg);}
	.m-nav nav a.active.m3:before { background-image: url(../img/main/ico_mobile_menu3_on.svg);}
	.m-nav nav a.active.m4:before { background-image: url(../img/main/ico_mobile_menu4_on.svg);}
	.m-nav nav a.active.m5:before { background-image: url(../img/main/ico_mobile_menu5_on.svg);}

	/* 시설안내 */
	.build-head { margin-bottom: 20px; }
	.build-info { margin-bottom: 0; }
	.build-info-list .ico-tel { width:20px; height: 20px; }
	.build-info-list .ico-fax { width:20px; height: 20px; }
	.build-teacher-select {flex: auto !important;}
	.build-group + .build-group {margin-top: 20px;}
	.build-information dl:after { display: block; content: ''; clear: both; }
	.build-information dl { font-size:14px;  font-weight: 400; }
	.build-information dl + dl { margin-top:4px; }
	.build-information dl dt {  width:82px; }
	.build-text-list dl { font-size:14px; }
	.build-text-list2 dl { font-size:14px; }
	.floor-item em { width: 20px; height: 20px;}
	.build-teacher { flex-direction: column; margin: 0;}
	.teacher-group { width:100%; padding: 0; }
	.teacher-group + .teacher-group  { margin-top: 16px;}
	.teacher-group .photo { flex: 0 0 213px; margin-right: 16px;}
	.teacher-group .photo .none {max-height: 100%;}
	.teacher-group dl { font-size: 14px; }
	.teacher-group .btn-line-gray:active {background-color: var(--brand-color1); color: #fff;}
	.come-map { width: calc(100% + 32px); margin: 0 -16px 16px;}
	.come-map .root_daum_roughmap { height: 350px;  }
	#footer { padding-bottom: 100px; }
	/* 시설안내 - 층별안내 상세 */
	.pool-cont {margin-top: 20px;}
	
	/************************************************************************************
		메인
	************************************************************************************/
	.main-search-wrap { height: auto; }
	.main-search-wrap .inner { display: block; padding-top:100px; padding-bottom: 170px;}
	.main-search-wrap .left h2 { margin-bottom: 20px; }
	.main-search-wrap .left h2 small { font-size:16px; }
	.main-search-wrap .left h2 strong { font-size:24px; }
	.main-search-wrap .left { margin-right:0; padding-top:0; }
	.main-search { padding:20px 16px; border-radius:10px; }
	.main-search h3 { font-size:18px; margin-bottom: 12px; }
	.main-search h3 small { display: none; }
	.main-search .search { padding: 0; }
	.main-search .search .btn { position: static; width:100%; margin-top:8px;}
	.tabs2 a { width:90px; height: 48px; line-height: 48px; font-size:14px; }
	.tabs2 a i { display: none; }
	.favorite-inq { right:10px; }
	.favorite-inq a span { display: none; }
	.favorite-inq a { width:32px; height: 32px; border-radius:6px; padding: 0; line-height: 32px; text-align: center; }
	.favorite-inq a:before { margin-right:0; }
	.main-inquiry { margin-bottom: 40px; }
	.main-inquiry .cont { padding: 16px; }
	.main-inquiry .inq-box { display: block; }
	.main-inquiry .inq-box .select { margin-bottom: 8px; }
	.main-inquiry .inq-box .btn { width:100%; margin-top:8px; }
	.main-banner { margin-bottom: 40px; }
	.main-banner .controls { height: 27px; line-height: 27px; padding:0 8px 0 12px; }
	.main-banner .controls .swiper-pagination { font-size:14px; margin-left: 12px; }
	.main-banner .controls .swiper-button-prev, .main-banner .controls .swiper-button-next { background-size:20px auto; width:20px; height: 20px; }
	.main-banner .controls .btn-play{  width:20px; height: 20px; margin-right:12px; }
	.main-tit { margin-bottom: 20px; font-size:20px; }
	.main-reservation { margin-bottom: 40px; }
	.main-reservation .main-tit { margin-bottom: 10px;}
	.main-reservation .btn-main-more { display: none; }
	.main-reservation .swiper-slide { width:300px !important; }
	.main-reservation .swiper-container { margin:0 -16px; padding:10px 16px;}	
	.main-reservation.type02 .swiper-slide { width: 100% !important; }

	
	.item-fac .info h4 { font-size:16px; }
	.item-fac .info .tel { font-size:14px; margin-bottom: 8px;}
	.item-fac .info .tel:before { width:24px; height: 24px; background-size:contain; }
	.item-fac .info h5 { font-size:12px; margin-bottom: 4px; }
	.item-fac .info .tag + h5{  margin-top:8px; }
	.item-fac .info .btn{ margin-top:16px; }
	
	.main-information { background-image: url(../img/main/bg_infor_m_top.png), url(../img/main/bg_infor_m_bottom.png); background-repeat: no-repeat, no-repeat; background-position: 50% 0, 50% 100%; background-size:100%, 100%; background-color:#ebf4ff; margin-bottom: 40px; }
	.tabs3 div a { height: 36px; line-height: 34px; font-size:14px; padding:0 12px;}
	
	.main-information .btn-main-more { position: absolute; right:0; top:-40px; }
	.main-information .btn-main-more span { display: none; }
	.main-information .slider .swiper-slide a .loc { font-size:14px; margin-bottom: 2px; }
	.main-information .slider .swiper-slide a h4 { font-size:16px; white-space: nowrap; height: auto; line-height: 1.4; display: block; }
	.main-information .slider .swiper-slide a p { font-size:14px; line-height: 24px; height: 48px; margin-bottom: 16px; }
	.main-information .slider .swiper-slide a + a { margin-top:16px; }
	.main-information .controls { position: static; display: flex; justify-content: center; margin-top:6px;  }
	.main-information .controls .swiper-button-prev, .main-information .controls .swiper-button-next { width:24px; height: 24px; background: url(../img/main/ico_slider_prev_mobile.svg) no-repeat 50% 50%; }
	.main-information .controls .swiper-button-prev { margin-right:16px; }
	.main-information .controls .swiper-button-prev:hover, .main-information .controls .swiper-button-next:hover { background-color: transparent}
	.main-information .swiper-container { padding: 10px 16px; margin:0 -16px;}
	.main-information .tit2 { font-size:20px; margin-top:40px; margin-bottom: 16px; }
	.main-information .main-faq-list ul { gap:0; margin:0 -4px; }
	.main-information .main-faq-list ul li { width:50%; flex:0 0 50%; padding:4px;  }
	.main-information .main-faq-list ul li:nth-child(n+5) { display: none; }
	.main-information .main-faq-list ul li a:before { width:36px; height: 36px; line-height: 36px; font-size:18px; margin-bottom: 12px; }
	.main-information .main-faq-list ul li a div { font-size:16px; line-height: 26px; height: 52px; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2; }
	.main-reser-stat .main-tit { text-align: left; }
	.main-reser-stat ul { display: block; }
	.main-reser-stat ul li a { padding: 16px; height: 140px; background: url(../img/main/bg_banner1_m2.png) no-repeat 100% 100%; background-size:100% 100%; position: relative;}
	.main-reser-stat ul li a:before { content: ''; position: absolute; right:0; bottom:0; width:100%; height: 100%; background:url(../img/main/bg_banner1_m1.png) no-repeat 100% 100%; background-size:auto 100%; }
	.main-reser-stat ul li a h4 { font-size:18px; }
	.main-reser-stat ul li a p { font-size:12px; }
	.main-reser-stat ul li + li { margin-top:16px; }
	.main-reser-stat ul li a.b2 { background-image: url(../img/main/bg_banner2_m2.png);}
	.main-reser-stat ul li a.b2:before { background-image: url(../img/main/bg_banner2_m1.png);}
	.main-reser-stat ul li a.b3 { background-image: url(../img/main/bg_banner3_m2.png);}
	.main-reser-stat ul li a.b3:before { background-image: url(../img/main/bg_banner3_m1.png);}
	
	
	
}
@media all and (max-width:768px) {
	.list-type1 ul { margin:0; display: block; }
	.list-type1 ul li { width:auto; padding: 0 0 16px; }
	.filter-list.type4 ul { display: block; }
	.filter-list.type4 ul li { width:auto; margin-bottom: 8px; }
	/* 시설안내 */
	.come-map .root_daum_roughmap { height: 200px;}
	.main-reservation.type02 .item-fac { display: block; }
	.main-reservation.type02 .item-fac .photo { width: 100%; height: 200px; padding: 0; }
	.main-reservation.type02 .item-fac .photo .status { left: 16px; bottom: 16px; }
	.main-reservation.type02 .item-fac .info { width: 100%; padding: 16px 16px 20px; }
	.main-reservation.type02 .item-fac .info .btn-box { width: 100%; }
}


/* 231101 추가 */
#gnb .dep2 .dep3 { max-height: 200px; overflow-y: auto; margin: 16px 0 8px 0; padding: 0;  }
#gnb .dep2 .dep3 li { width: 100%; padding: 0; }
#gnb .dep2 .dep3 li + li { margin-top: 8px; }
#gnb .dep2 .dep3 li:hover a { color: var(--font-color1); background-color: transparent; font-weight: 600; }
#gnb .dep2 .dep3 li a { height: auto; line-height: 26px; padding: 0 0 0 16px; border: 0; color: var(--font-color3); font-weight: 400; }

.notfound { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 200px 0; }
.notfound-title { margin-bottom: -92px; font-size: 160px; line-height: 237px; font-weight: 700; color: var(--background-color); text-align: center; }
.notfound-subtitle { font-size: 34px; line-height: 50px; font-weight: 700; text-align: center; }
.notfound-desc {  margin-top: 16px; font-size: 18px; line-height: 27px; color: var( --font-color3); text-align: center; }
.notfound .btn { display: inline-flex; justify-content: center; align-items: center; min-width: 304px; margin-top: 40px; text-align: center; }
@media all and (max-width:768px) {
	.notfound-subtitle { font-size: 28px; line-height: 34px; }
	.notfound .btn { min-width: 100%; }
}

.join-select { width: 100%; }
.join-select { padding: 10px 0; border-bottom: 1px solid #ddd; }
.join-select .checkbox + div em { border-radius: 50%; }
.join-account { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.join-account p { color: var(--font-color1); font-weight: 500; }
.join-account .btn { display: inline-flex; align-items: center; justify-content: center; }



/* 레이어 팝업 */
.layerpop {  }
.layerpop .popup { padding: 0; }
.layerpop .popup-body { position: relative; }
.layerpop .swiper-slide { height: 500px; width: 100%; }
.layerpop .swiper-slide a { display: inline-block; height: 100%; width: 100%; }
.layerpop-banner img { width: 100%; height: 100%; object-fit: cover; }

.layerpop .controls { position: absolute; display: flex; align-items: center; gap: 10px; justify-content: center; width: 100%;  bottom: calc( 100% + 20px ); font-size: 20px; color: #fff; }
.layerpop .controls .swiper-pagination { position: relative; bottom: 0; width: auto; }

.layerpop .swiper-button-prev, 
.layerpop .swiper-button-next { width: 40px; height: 40px;  background: rgba(17,17,17,0.4) url(../img/main/ico_slider_prev.svg) no-repeat 50% 50%; flex:0 0 24px; border-radius: 50%; transition: all 0.5s ease }
.layerpop .swiper-button-prev { left: auto; right: calc(100% + 20px ); }
.layerpop .swiper-button-next { transform: scaleX(-1); left: calc(100% + 20px ); right: auto; }
.layerpop .swiper-button-prev:hover,  
.layerpop .swiper-button-next:hover { background-color: #033987; }
 
.layerpop .fixed-bottom { margin-top: 0; }
.layerpop .popup-foot { margin-top: 0; padding: 16px; }
.layerpop .popup-foot .common-btns { align-items: center; justify-content: space-between; }
.layerpop .popup-foot .common-btns .btn { width: auto; }

#MainModal2 .popup-foot { margin-top: 0; padding: 16px; }
#MainModal2 .popup-foot .common-btns { align-items: center; justify-content: space-between; }
#MainModal2 .popup-foot .common-btns .btn { width: auto; }


@media all and (max-width:1024px) {
	.layerpop .swiper-button-prev, .layerpop .swiper-button-next { width: 40px; height: 40px; }
	.layerpop .swiper-button-prev { right: auto; left: 16px; }
	.layerpop .swiper-button-next { left: auto; right: 16px ; }
	.list-type4 ul li { width:auto !important;  padding:4px;  }
}

/* capcha */
.captcha{display: flex; flex-wrap: wrap; align-items: center}
.captcha img{margin:10px;}


@media only screen and (max-width: 1024px) {
	.captcha{ justify-content: center}
}



/* 240220 추가 */
.head-tip.favorite .favorite-inq { position: relative; top: 0; right: 0; margin-right: 12px; } 
.head-tip.favorite .favorite-inq a { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-color1); } 

/* 탭메뉴2 */
.btn-tabs { margin-bottom: 40px; overflow-x: auto; } 
.btn-tabs ul { display: flex; } 
.btn-tabs ul li { border: 1px solid var(--line-color1); border-radius: 6px; transition: .3s; } 
.btn-tabs ul li+li { margin-left: 10px; } 
.btn-tabs ul li a { display: block; height: 56px; line-height: 54px; background: var(--background-color); text-align: center; font-size:16px; color: var(--font-color3); position: relative; padding: 0 24px; background-color: transparent; transition: .3s; } 
.btn-tabs ul li.active { border-color: #2F61D5; } 
.btn-tabs ul li.active a { background: transparent; color: #2F61D5; } 
@media all and (max-width:1024px) {.head-tip.favorite { flex-direction: column-reverse; align-items: flex-end; gap: 8px; } 
.head-tip.favorite .favorite-inq { margin-right: 0; } 


.btn-tabs { max-height: 200px; overflow-y: auto; margin-bottom: 16px; } 
.btn-tabs ul { flex-wrap: wrap; }
.btn-tabs ul li { width: 100%; }
.btn-tabs ul li+li { margin-left: 0; margin-top: 8px; }
.btn-tabs ul li a { height: 48px; line-height: 46px; font-size:14px; }
 }

 /* 240306 추가 */
 .imagebox {}
 .imagebox .imagebox-item { display: none; width: 100%; }
 .imagebox .imagebox-item:first-child { display: block; }
 .imagebox .imagebox-item img { width: 100%; height: 100%; object-fit: cover; }

 .popup-wrap .imagebox .imagebox-item:hover { cursor: zoom-in; }
 .fancybox__container { z-index: 9999 !important; }