@charset "UTF-8";

/* ------------------------------------------------------
CSS ORDER
1. RESET
2. LAYOUT (HEADER, FOOTER, MAIN...)
3. TITLE 
4. BUTTON
5. INPUT
6. LIST
7. PAGING
8. SEARCH
9. TAB
10. FORM
11. FORM - UI
------------------------------------------------------ */


/* ------------------------------------------------------
RESET
------------------------------------------------------ */
body {font-family: "Roboto", "Noto Sans KR", "Malgun Gothic", "굴림", Gulim, "돋움", Dotum, Sans-serif; color: #000; -webkit-text-size-adjust: none;}


/* ------------------------------------------------------
LAYOUT
------------------------------------------------------ */
/* HEADER */
header {position:relative; min-width:1440px; height:90px; border-bottom:1px solid #e5e5e5;}
	header .inner {display: flex; justify-content: space-between; width:1440px; margin:0 auto; z-index:1; height:90px; }
	header .logo {display:flex; justify-content: center; align-items: center; flex-direction: column; width:180px;}
	header .logo a {width:100%;}
	header .logo img {width:100%; vertical-align: bottom;}


  /* GNB */
	header nav {text-align: right;}
	header nav:after {display:block; clear:both; content:"" }
	header nav .menu > li {display: inline-block; position: relative; height: 50px; margin-top: 22px;}
	header nav .menu > li + li {margin-left:45px;}
	header nav {font-size: 1.25rem; line-height: 45px;}
	header nav a {position: relative; display: inline-block; font-size: 1.25rem; font-weight: 300; cursor: pointer; padding: 0 10px;}
	header nav a span {position: relative;}
	header nav a[aria-current=true] {font-weight: 700; color: #003b95; }
	header nav a:hover {font-weight: 700; color: #003b95; border-bottom: 4px solid #003b95;}
	header nav a[aria-current=true]:before,
	header nav a:hover:before {display: block; content: ""; position: absolute; top:2px; right: -6px; width: 12px; height: 12px;}
	header nav a.outlink i {font-size:1.25rem; font-weight: 600; vertical-align: 2px;}
	header nav .depth {display: none; position: absolute; width:100%; width:max-content; line-height: 40px; z-index: 2; transform: translateX(-50%); color: #666;}
	header nav .depth:after {display:block; clear:both; content:""}
	header nav .depth li {float: left; margin: 0 10px;}
	header nav .depth a {position: relative; font-size: 16px; font-weight: 400;}
	header nav .depth a[aria-current=true] {color: #00a0e2; font-weight: 500;}
	header nav .depth a:hover {color: #00a0e2; font-weight: 500;}
	header nav .depth a[aria-current=true]:before,
	header nav .depth a:hover:before {display: block; content: ""; }
	header nav .current + .depth  {display: block;}
	header nav .menu > li.on a {font-weight:700; color: #003b95; border-bottom: 4px solid #003b95; }
	header nav .menu > li.on .depth {display: block;}
	header nav .menu > li.on a:before {display: block; content: ""; position: absolute; top:2px; right: -6px; width: 12px; height: 12px; }
	header nav.over .current + .depth {display: none;}
	header nav.over .current a:before {display: none;}
	header nav.over .menu > li.on .depth {display: block;}

/* HEADER_MO */
	header.mo_head {display:none; height: 5rem; border-bottom: 0.125rem solid #e5e5e5;}
	header.mo_head .inner {width:100%; height: 5rem; }
	header.mo_head .inner .logo {width:10rem;}
	header.mo_head .inner .btn_gnb_open {display:flex; justify-content: center; align-items: center; flex-direction: column; margin-right: 1.25rem; width: 1.6rem;}
	header.mo_head .inner .btn_gnb_open button { width: 100%; height: 100%; text-indent: -9999em; background: url("../images/btn_m_menu.png") no-repeat 50% 50%; background-size: 100% auto;}

/* HEADER_MO OPEN */
	#gnb {overflow-y:auto; position: fixed; left: -100%; top: 0; width:100%; height:100%; z-index:10000; background: #f9f9f9; box-sizing: border-box; -ms-transition: 0.3s ease-out; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; transition: 0.3s ease-out; }
	#gnb .inner {display: flex; justify-content: space-between; height:5rem; position: relative; margin: 0 auto; background: #fff; border-bottom: 0.125rem solid #e5e5e5;}
	#gnb .inner .logo {display:flex; justify-content: center; align-items: center; flex-direction: column; margin-left: 1.25rem; width:10rem;}
	#gnb .inner .logo img {vertical-align: bottom;}
	#gnb .inner .btn_gnb_close {display:flex; justify-content: center; align-items: center; flex-direction: column; margin-right: 1.25rem; width: 1.6rem;}
	#gnb .inner .btn_gnb_close button { width: 100%; height: 100%; text-indent: -9999em; background: url("../images/btn_m_x.png") no-repeat 50% 50%; background-size: 100% auto; }
	#gnb .menu {margin-top: 1rem;}
	#gnb .menu > li {margin-bottom: 1rem;}
	#gnb .menu h2 a {display: block; position: relative; line-height: 5rem; font-weight: 700; color: #000; text-transform: uppercase; font-size: 1.5 rem; background: url("../images/mark.png") no-repeat 1rem 50%; background-color: #fff; padding-left: 2.8rem; background-size: 1rem auto;}
	#gnb.on { left: 0; }


/* MAIN */
main {position: relative; min-width: 1440px; }
	
	/* CONTANINER */
	main #container {position:relative; width:1000px; height:auto; min-height:calc(100vh - 250px); margin:0 auto 0; padding-bottom:5rem; text-align: center;}


/* FOOTER */
footer {min-width: 1440px; background: #f9f9f9; border-top:1px solid #e5e5e5; padding: 3rem 0; font-size: 1rem; color: #666; text-align: center; line-height: 1.875rem;}
	.mo_br {display:none;}
	.phone_num {margin: 0 1.875rem;}


/* ------------------------------------------------------
TITLE ZONE & HEADING
------------------------------------------------------ */
.title_zone {position: relative; padding-top: 6.25rem; margin-bottom: 3.125rem; text-align: center;}
	h1 {font-size: 2.625rem; line-height: 2.625rem; letter-spacing: -0.094rem;}
	.title_zone .partyFjoin {position: absolute; top:0; right:16px; width: 95px; height: 167px; text-indent: -9999em; background: url("../images/btn_partyFjoin.png") no-repeat 50% 50%; background-size: 100% auto;}
	.title_zone .partyJoin {position: absolute; top:0; right:16px; width: 95px; height: 167px; text-indent: -9999em; background: url("../images/btn_partyJoin.png") no-repeat 50% 50%; background-size: 100% auto;}
	.title_zone .partyFrejoin {position: absolute; top:0; right:16px; width: 95px; height: 167px; text-indent: -9999em; background: url("../images/btn_partyFrejoin.png") no-repeat 50% 50%; background-size: 100% auto;}
	.title_zone .partyRejoin {position: absolute; top:0; right:16px; width: 95px; height: 167px; text-indent: -9999em; background: url("../images/btn_partyRejoin.png") no-repeat 50% 50%; background-size: 100% auto;}




	.title_zone .page_title {display: inline-block; vertical-align: middle; font-size:28px; font-weight: 900;}
	.title_zone .heading_h2 {display:inline-block; vertical-align: middle;}
	.title_zone .heading_h3 {display:inline-block; vertical-align: middle; line-height: 30px;}
	.title_zone .heading_h4 {display:inline-block; vertical-align: middle; line-height: 20px;}
	.title_zone .heading_h3 + .desc {font-size: 14px}
	.title_zone .heading_h4 + .desc {font-size: 12px; }
	.title_zone .desc {display: inline-block; position: relative;  font-size: 14px; font-weight: 100; margin-left: 20px; vertical-align:middle;  line-height: 34px; margin-right: 10px;}
	.title_zone .desc2 {display: inline-block; position: relative;  font-size: 16px; font-weight: 200; margin-left: 20px; vertical-align:middle;  line-height: 34px; margin-right: 10px;}
	.title_zone .desc3 {color: #ff8778;}
	.title_zone + *[class^=comp-form] {margin-top: 0}
	.title_zone + .title_zone {margin-top: 30px; padding-bottom: 10px; border-bottom: 1px solid #000; text-align: left; }
	.title_zone.sub {margin-top: 30px; padding-bottom: 10px; border-bottom: 1px solid #000; text-align: left; }
	.title_zone.sub {margin-top: 30px; padding-bottom: 10px; border-bottom: 1px solid #000; text-align: left; }
	.title_zone .comp_radio {display: inline-block; vertical-align: middle; margin-left: 20px}
	.title_zone .r_layout {position: absolute; right: 0; bottom:24px;}
	.title_zone .r_layout input[type=text] {width: 400px; padding:0 10px 3px; height:35px; border:1px solid #cacaca; box-sizing: border-box; color:#111; font-weight: 100;  line-height: 31px;}
	.title_zone .r_layout input[type=file] {position: absolute; left:0; top:0;  width: 1px; height: 1px; opacity: 0; z-index: -1;} 
	
	.subtitle_zone {position: relative; margin-top: 30px; padding-bottom: 10px; border-bottom: 1px solid #000; text-align: left;  line-height: 22px;}
	.subtitle_zone .r_layout {position: absolute; right: 0; bottom:5px;}
	.subtitle_zone .r_layout input[type=text] {width: 400px; padding:0 10px 3px; height:35px; border:1px solid #cacaca; box-sizing: border-box; color:#111; font-weight: 100;  line-height: 31px;}
	.subtitle_zone .r_layout input[type=file] {position: absolute; left:0; top:0;  width: 1px; height: 1px; opacity: 0; z-index: -1;}

	.title_zone_none {margin-bottom: 5px; border-bottom: 0;}
	.title_zone_none *[class*=heading] {display: inline-block;}
	.title_zone_none .desc {display: inline-block; margin-left: 10px; font-weight: 200; }
	section .title_zone {border-bottom-width:1px; margin-bottom: 0;}
	section .title_zone + *[class^=comp_form] {margin-top: 0}



/* ------------------------------------------------------
BUTTON
------------------------------------------------------ */
*[class^=comp_btn] {display: inline-block; width:100%; border-width:1px; border-style:solid; vertical-align:top; text-align: center; box-sizing: border-box; margin-top:3.125rem; letter-spacing: -0.08rem; font-family: "Roboto", "Noto Sans KR", "Malgun Gothic", "굴림", Gulim, "돋움", Dotum, Sans-serif;}
	*[class^=comp_btn][class*=_type0] {width:21.25rem; height:5rem; font-size: 1.875rem; color:#fff; font-weight: 700; line-height: 5rem; border-radius: 2.5rem;}
	*[class^=comp_btn][class*=_type1] {width:17.5rem; height:4.375rem; font-size: 1.25rem; color:#fff; font-weight: 400; line-height: 4.375rem; border-radius: 2.188rem;}
	*[class^=comp_btn][class*=_type2] {width:17.5rem; height:4.375rem; font-size: 1.5rem; color:#fff; font-weight: 400; line-height: 4.375rem; border-radius: 2.188rem;}
	*[class^=comp_btn][class*=_type3] {width:8.75rem; height:3.125rem; font-size: 1.125rem; color:#fff; font-weight: 400; line-height: 3.125rem; border-radius: 1.563rem;}
	*[class^=comp_btn][class*=_type4] {width:13rem; height:3.375rem; font-size: 1.125rem; color:#fff; font-weight: 400; line-height: 3.375rem; border-radius: 2rem;}



	*[class^=comp_btn][class*=_type5] {width:auto; padding:0 18px; height:36px; color:#fff; font-weight: 500; background: #111; line-height: 36px; font-size: 14px;}
	*[class^=comp_btn][class*=_type6] {width:auto; padding:0 18px; height:40px; color:#333; font-weight: 400; background: #111; line-height: 40px; font-size: 14px;}
	*[class^=comp_btn][class*=_type7] {width:auto; padding:0 0.625rem; height:1.875rem; color:#00a6ac; font-weight: 500; background: #fff; line-height: 1.875rem; border-radius: 0.2rem; font-size: 0.875rem;}
	*[class^=comp_btn][class*=_type8] {width:auto; min-width:85px; padding:0 10px; height:30px color:#000; font-weight: 400; background: #fff; line-height: 30px;}


	*[class^=comp_btn][class*=_type9] {width:8rem;  height: 3.125rem; color:#000; font-weight: 400; background: #fff; line-height: 3.125rem; margin-top: 0; font-size: 1.1rem; border-radius: 2rem; margin-left: 1rem;}
	*[class^=comp_btn][class*=_type10] {width:9rem;  height: 3rem; color:#000; font-weight: 400; background: #fff; line-height: 3rem; margin-top: 0; font-size: 1rem; border-radius: 1.5rem;}



	/* COLOR */
	*[class^=comp_btn][class*=_bluegreen] {background: linear-gradient(to right, #003b95, #5b1c87); border: none;}
	*[class^=comp_btn][class*=_bw] {background: #fff; color:#000; border-color:#000;}
	*[class^=comp_btn][class*=_bb] {background: #000; color:#fff; border-color:#000;}

	
	*[class^=comp_btn][class*=_wh] {background: #fff; color:#000; border-color:#333;}
	*[class^=comp_btn][class*=_wh]:disabled {background: #fff; color:#cacaca; border-color:#cacaca;}
	*[class^=comp_btn][class*=_gray] {background: #fff; color:#000; border-color:#cacaca;}
	*[class^=comp_btn][class*=_org] {background: #fff; color:#ff661b; border-color:#ff661b;}



/* 등록 하단 버튼 영역 */
.btm_submit_zone {position: relative; overflow: hidden; text-align: center;}
.btm_submit_zone.floating {position: fixed; bottom: 0px; left: 50%; width: 100%; padding: 20px; margin: 0; background: #fff; border-top:1px solid #cacaca; transform: translate(-50%, 0); z-index:99;}
    
	.btm_submit_zone ul {display: inline-block;}
	.btm_submit_zone li {float: left; }
	.btm_submit_zone li + li {margin-left:0.625rem;}
	.btm_submit_zone > * + * {margin-left: 7px}
	.btm_submit_zone .error-txt {position: absolute; left:0; top:100%; margin-top: 10px;text-align: center; width: 100%; z-index:100; }
	.btm_submit_zone .l-layout {float: left;}
	.btm_submit_zone .r-layout {float:right;}



/* ------------------------------------------------------
INPUT
------------------------------------------------------ */
/* CHECKBOX */
*[class^=comp_check] {position: relative;}
	*[class^=comp_check] input[type=checkbox] {outline: none; position: absolute; left:0; top:0; opacity: 0; }
	*[class^=comp_check] label {display: inline-block; position:relative; font-size: 1.25rem; line-height: 2.25rem; color:#000; font-weight: 400; cursor: pointer; padding-left: 3.2rem; }
	*[class^=comp_check] label:before {display:inline-block; position: absolute; left:0; top:0; width: 2.25rem; height: 2.25rem;  content: ""; background: url('/static/frontend/images/form_check.png') no-repeat 50% 50%; background-size: 67% auto; background-color: #e9e9e9; box-sizing: border-box; border-radius: 0.25rem; }
	*[class^=comp_check] input:checked ~ label:before {background: url('/static/frontend/images/form_check.png') no-repeat 50% 50%; background-size: 67% auto; background-color: #006464;}
	ul[class^=comp_check] {overflow: hidden;}
	ul[class^=comp_check] > li {float:left; position: relative; line-height: 30px; margin-right: 10px;}
	ul[class^=comp_check] > li:first-child {margin-left: 0}
	ul[class^=comp_check] > li > label {min-width:50px;}
	ul[class^=comp_check] .comp_input {display: inline-block; width: 100px; margin-left: 10px}
	ul[class^=comp_check][class*=_row] > li {float:none; margin-right: 0}
	*[class^=comp_check][class*=_none] label {width: 16px; padding-left: 0; text-indent: -9999px; text-align: left;}
	*[class^=comp_check] input[type=checkbox][disabled] ~ label {opacity: 0.5}
	*[class^=comp_check] input[type=checkbox][disabled] ~ label:before {background: #f9f9f9}
/* RADIO */
*[class^=comp_radio] {position: relative;}
	*[class^=comp_radio] input[type=radio] {outline: none; position: absolute; left:3px; top:3px; opacity: 0; margin:0;}
	*[class^=comp_radio] label {display: inline-block; position:relative; color:#000; font-weight: 100; cursor: pointer; padding-left: 2.4rem;  vertical-align: top; margin: 0; line-height: 3.125rem;}
	*[class^=comp_radio] label:before {display:block; position: absolute; left:0; top:0.625rem; width: 0.875rem; height: 0.875rem;  content: ""; border:0.5rem solid #e9e9e9; border-radius: 0.938rem;}
	*[class^=comp_radio] input:checked ~ label:before {border:0.5rem solid #006464; }

	ul[class^=comp_radio]:after {display:block; clear:both; content:""}
	ul[class^=comp_radio] li {float: left; position: relative; line-height: 3.125rem;}
	ul[class^=comp_radio] li:first-child {margin-left: 0}
	ul[class^=comp_radio][class*=_row] li {float: none; margin-right: 0; line-height: 3.125rem;}
	ul[class^=comp_radio][class*=_shape] label {padding-left: 0}
	ul[class^=comp_radio][class*=_shape] label:before {display: none;}
	ul[class^=comp_radio][class*=_shape] .img {display: block; overflow: hidden; width:50px; height: 50px; margin:0 auto; border-radius: 100px; border:1px solid #bbb;}
	ul[class^=comp_radio][class*=_shape] input:checked ~ label .img {border-color:#111;}
	*[class^=comp_radio][class*=_none] label {padding:0; margin:0; width:13px; height: 13px; overflow: hidden; text-indent: -9999px;}
/* INPUT */
input[class^=comp_input] {width: 100%; padding:0 1.5rem; height: 3.125rem; color:#000; font-weight: 400; line-height: 3.125rem; border: 1px solid #e6e6e6; border-radius: 1.563rem; font-size: 1.125rem; font-family: "Roboto", "Noto Sans KR"; letter-spacing: -0.04rem;}
	input[class^=comp_input][disabled] {background-color:#f5f5f5; color:#555; border:0;}
	input[class^=comp_input][readonly] {background-color:#f5f5f5; color:#555; border:0;}


	input[class^=comp_input][class*=_calendar] {width:180px; padding-right: 35px; background:#fff url("../images/btn_calendar.png") no-repeat 100% 50%; }
	input[class^=comp_input][class*=_calendar] {width:180px; padding-right: 35px; background:#fff url("../images/btn_calendar.png") no-repeat 100% 50%; }
	input[class^=comp_input][class*=_calendar] + .comp_check {margin-left: 10px; top:8px;}
	input[class^=comp_input][class*=_calendar] + .txt {margin:0 5px;}
	input[class^=comp_input][class*=_calendar] + .ui-datepicker-trigger {display: none;}
	input[class^=comp_input][class*=_full] {width:100%; max-width: inherit;}
	




	input[class^=comp_input][class*=_monthly] {width:180px; padding-right: 35px; background:#fff url("../images/btn_calendar.png") no-repeat 100% 50%; }
	input[class^=comp_input][class*=_monthly] {width:180px; padding-right: 35px; background:#fff url("../images/btn_calendar.png") no-repeat 100% 50%; }
	input[class^=comp_input][class*=_monthly] + .comp_check {margin-left: 10px; top:8px;}
	input[class^=comp_input][class*=_monthly] + .txt {margin:0 5px;}
	input[class^=comp_input][class*=_monthly] + .ui-datepicker-trigger {display: none;}


	/* 
	.ui-datepicker-header.mtz-monthpicker {background-color:#fff; border: none; margin-bottom: 4px;}	
	*/

	.ui-datepicker-header {background-color:#fff; border: none; margin-bottom: 4px;}	
	.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {appearance: auto;  width:80px; padding:5px 10px 5px 10px; margin : 0 1px 0 1px; border-radius: 0; border-bottom: 2px solid #333; box-sizing: border-box; font-size: 15px;}
	.ui-datepicker select.ui-datepicker-month {width: 60px;}
	.mtz-monthpicker.mtz-monthpicker-year {appearance: auto;  width:80px; padding:5px 10px 5px 10px; border-radius: 0; border-bottom: 2px solid #333; box-sizing: border-box; font-size: 15px;}
	table.mtz-monthpicker {margin-bottom:2px;}
	table.mtz-monthpicker .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {border: 1px solid #fff; background: #f6f6f6;}
	table.mtz-monthpicker .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {background: #00a6ac; color: #ffffff;}
	.ui-datepicker-today a {background: #346beb !important; color: #ffffff !important;}
	.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {border-radius: 0;}
    .ui-datepicker td {padding: 0;}
	.ui-datepicker td span, .ui-datepicker td a {padding: 0.4em;}
	.ui-widget-header .ui-icon {background: url("/static/admin/images/common/ui_icons_prev_next.png");}
	.ui-icon-circle-triangle-e {background-position: -16px 0 !important;}
	.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {top: 6px;}
	.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {opacity: .4;}



/* SELECT */
select[class^=comp_select] {width: 100%; height: 3.125rem; border: 1px solid #e6e6e6; border-radius: 1.563rem; box-sizing: border-box; line-height: 3.125rem; padding: 0 1.5rem; color: #000; background: #fff url("../images/btn_open.png") no-repeat 98% 50%; background-size: auto 80%; font-weight: 400; font-size:1.125rem; font-family: "Roboto", "Noto Sans KR"; letter-spacing: -0.04rem;}
select[class^=comp_select][disabled=disabled] {background-color:#fff;}
select[class^=comp_select] + select[class^=comp_select] {margin: 0 0.5rem;}
select[class^=comp_select][class*=_full] {width:100%; max-width: inherit;}

/* TEXTAREA */
textarea[class^=comp_textarea] {width: 100%; padding:1rem 1.5rem; height: 10rem; color:#000; font-weight: 400; border: 1px solid #e6e6e6; border-radius: 1.563rem; font-size: 1.125rem; font-family: "Roboto", "Noto Sans KR"; letter-spacing: -0.04rem; box-sizing: border-box; resize:none;}

textarea[class^=comp_textarea][disabled=disabled] {background: #fafafa}

textarea[class^=comp_textarea][disabled=disabled] {background: #fafafa}
textarea[class^=comp_textarea_error] {display:none; }

@media screen and (-webkit-min-device-pixel-ratio: 0) { 
	input[class^=comp-input] {line-height: 38px; padding-bottom: 0}
	select[class^=comp-select] {line-height: 38px;}
}

.js-input-size {position: relative; padding-right:90px}
.js-input-size .size {display: inline-block; position: absolute;right: 0; bottom:0; line-height: 40px; font-weight: 100; margin-left: 10px; font-size: 14px; width:90px; text-align: center;}
.js-input-size ~ *[class*=comm-btn] {width: auto !important;}

.txt_contents {min-height:400px; padding:10px 0;}





/* ------------------------------------------------------
LIST ZONE
------------------------------------------------------ */
.comp_top_utile {position: relative; margin-bottom: 10px; min-height: 22px; padding-top:10px;}
	.comp_top_utile:after {display:block; clear:both; content:""}
	.comp_top_utile .l_layout {position: absolute;left:0; bottom:0; }
	.comp_top_utile .r_layout {float: right; text-align: right;}
	.comp_top_utile .r_layout .desc {display: inline-block; font-weight: 100; font-size: 14px; color:#e71717; vertical-align: bottom; margin-right: 10px;}
	.comp_top_utile .total_langth {font-size: 14px; font-weight: 400; color:#666; text-align: left;}
	.comp_top_utile .total_langth em {color:#00a0e2; font-weight: 400;}
	.comp_top_utile .comp_check {display: inline-block; vertical-align: middle; margin-right: 20px;}
	.comp_top_utile .comp_select.page_view {width:150px; float: right; margin-left: 10px;}

.comp_btm_utile {margin-top: 10px;}
	.comp_btm_utile:after {display:block; clear:both; content:""}
	.comp_btm_utile .txt_desc {display:inline-block; vertical-align: middle; margin-left: 20px; font-size: 14px; font-weight: 100; color:#aaa; line-height: 34px}
	.comp_btm_utile + *[class^=comp-paging] {margin-top: 70px}
	.comp_btm_utile .r_layout {float: right; }
	.comp_btm_utile .l_layout {float: left }
	.comp_btm_utile .block {margin-top: 10px;}

.comp_display_box {width: 100%; margin-top:20px; font-weight: 200; line-height: 20px;}
.comp_display_box .title {display: block; font-size:16px; font-weight: 500; color: #00a6ac; padding-top: 10px;} 

*[class^=comp_board] {border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e5e5e5; font-size: 1.12rem;}
	*[class^=comp_board] thead th {}
	*[class^=comp_board] tbody tr > * {height: 3.125rem; border-top: 1px solid #e9e9e9; color:#000; font-weight: 400; text-align: center; word-break: break-all;}
	*[class^=comp_board] tbody tr td:nth-child(3) {font-size: 1.2rem;}

	*[class^=comp_board] tbody tr.withdraw > * {color:#a0a0a0; font-weight: 300;}
	*[class^=comp_board] tbody tr:first-child > * {border-top-color: transparent;}
	*[class^=comp_board] tbody td.ta_l {text-align: left; padding: 0.312rem; letter-spacing: -0.07rem; word-break: keep-all;}
	*[class^=comp_board] tbody td span.Cfcc520 {font-weight: 300; color:#fcc520;}
	*[class^=comp_board] tbody td span.C014099 {font-weight: 300; color:#014099;}
	*[class^=comp_board] tbody td span.Cd22929 {font-weight: 300; color:#d22929;}
	*[class^=comp_board] tbody td.approve {color: #00a0e2;}
	*[class^=comp_board] tbody tr {font-weight: 400;}
	*[class^=comp_board] tr.first + tr > * {border-top-width: 2px;}
	*[class^=comp_board] .btn_order_group li {height:15px;}
	*[class^=comp_board] .btn_order_group button {width:41px; height:15px; text-indent: -999em;}
	*[class^=comp_board] .btn_order_group .btn_up {background: url('/static/admin/images/common/btn_up.png') no-repeat 50% 50%;}
	*[class^=comp_board] .btn_order_group .btn_down {background: url('/static/admin/images/common/btn_down.png') no-repeat 50% 50%;}
	*[class^=comp_board] .lnk {display:inline-block; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 90%; vertical-align: middle; text-decoration: underline; }
	*[class^=comp_board] .lnk_long {display:inline-block; position: relative; text-decoration: underline;}
	*[class^=comp_board] .ellips {display:inline-block; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 90%; vertical-align: middle; text-decoration: underline; }
	*[class^=comp_board] + *[class^=comp_board] { margin-top: 20px }
	*[class^=comp_board] tbody td > span.msg + span.msg:before {content:"\A";white-space:pre; }
	*[class^=comp_board] tbody td > button.btnFile + button.btnFile {margin-left:4px; }

	.board_content {padding:10px 0; min-height: 200px; text-align: left;}
	

/* ------------------------------------------------------
PAGING
------------------------------------------------------ */
*[class^=comp_paging] {position: relative; margin-top: 30px; text-align: center;}
	/* 타입 1 */
	*[class^=comp_paging] > div { display: inline-block; position: relative; padding: 0 50px; }
	*[class^=comp_paging] .number {margin-top: 1px;}
	*[class^=comp_paging] .number:after {display:block; clear:both; content:""}
	*[class^=comp_paging] .number li { float: left; margin-left:20px; line-height: 20px;}
	*[class^=comp_paging] .number li:first-child { margin-left: 0; }
	*[class^=comp_paging] .number a {display: inline-block; vertical-align:middle;color: #a0a0a0; font-weight: 300}
	*[class^=comp_paging] .number a {display: inline-block; vertical-align:middle;color: #a0a0a0; font-weight: 300}
	*[class^=comp_paging] .number a span { position: relative; top: 0; }
	*[class^=comp_paging] .number li.current a{ color: #00a0e2; font-weight: 700; text-decoration: underline;}
	*[class^=comp_paging] .number li.current a span:after {display: block; content: ''; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; bottom: 0; } 
	*[class^=comp_paging] p { position: absolute; top: 0; }
	*[class^=comp_paging] p.prev {left: 0; }
	*[class^=comp_paging] p.prev a {background: url("/static/admin/images/common/btn_prev.png") no-repeat 50% 50%; text-align: left;}
	*[class^=comp_paging] p.next {right: 0; }
	*[class^=comp_paging] p.next a {background: url("/static/admin/images/common/btn_next.png") no-repeat 50% 50%; text-align: left;}
	*[class^=comp_paging] p a { display: block; overflow: hidden; width: 20px; height: 20px; text-indent: -9999em; }
	/* 타입 2 */
	*[class^=comp_paging][class*=_gototype] {text-align: right;}
	*[class^=comp_paging][class*=_gototype] .number {vertical-align: top;}
	*[class^=comp_paging][class*=_gototype] .comp_input {width:50px; vertical-align: top; font-weight: bold; text-align: center;}
	*[class^=comp_paging][class*=_gototype] .total_page {display: inline-block; line-height: 40px; margin-left: 5px;}
	*[class^=comp_paging] .l-layout {position: absolute; left:0; top:0; padding: 0}
	*[class^=comp_paging] .r-layout {position: absolute; right:0; top:0; padding: 0}
	*[class^=comp_paging][class*=_small] {margin-top: 20px;}
	*[class^=comp_paging][class*=_small] > div {padding:0 50px; float: right;}
	*[class^=comp_paging][class*=_small] .number a {line-height: 30px; width:30px;}
	*[class^=comp_paging][class*=_small] .number li {margin-right: 10px;}
	*[class^=comp_paging][class*=_small] p a {width:30px; height: 30px; -webkit-background-size: 100% auto !important; background-size: 100% auto !important;}


/* ------------------------------------------------------
SEARCH ZONE
------------------------------------------------------ */
*[class^=comp_search] {padding:15px 0; background: #f9f9f9; border-bottom: 1px solid #e5e5e5; table-layout: fixed}
	*[class^=comp_search] table {background: #f9f9f9;  table-layout: fixed;}
	*[class^=comp_search] th {text-align: left; width:160px; padding:5px 10px 5px 30px; font-weight: 400; line-height: 40px;}
	*[class^=comp_search] th:nth-of-type(2) {width: 160px;}
	*[class^=comp_search] td {position:relative; padding:5px 30px 5px 0; text-align: left; color:#7a7a7a; font-weight: 100;}
	*[class^=comp_search] span.txt {display: inline-block; vertical-align: middle; margin:0 6px;}
	*[class^=comp_search] + .btm_submit_zone {margin-top: 30px; margin-bottom: 50px}
	*[class^=comp_search] .btn_position {position: absolute; right:-20px; top:10px;}
	*[class^=comp_search] input[class^=comp_input] {max-width: inherit;	}
	*[class^=comp_search] select[class^=comp_select] {max-width: inherit;	}
	*[class^=comp_search] select.comp_select_region {width: 261px;}
	*[class^=comp_search] select.comp_select_voting_district {width: 261px;}
	*[class^=comp_search] select.comp_select_member_class {width: 261px;}
	*[class^=comp_search] select.comp_select_member_type {width: 261px;}

	*[class^=comp_search] select.comp_select_pay_type {width: 150px;}
	*[class^=comp_search] input.comp_input_pay_type {width: 218px;}

	*[class^=comp_search] .comp_period .btn_group li+li {margin-left: -1px;}
	*[class^=comp_search] .comp_period input[class*=comp_input] {margin-top: 3px;}
	.search_desc {text-align: center; margin-top: 6px; color: #00a6ac; width: 100%;}



/* ------------------------------------------------------
TAB 
------------------------------------------------------ */
*[class^=comp_tab] {position: relative; }
	*[class^=comp_tab] ul {border-radius: 1.25rem; width: 100%; font-size: 0; overflow: hidden; border: 1px solid #003b95; background-color: #003b95;}
	*[class^=comp_tab] ul:after {display:block; clear:both; content:""}
	*[class^=comp_tab] li {display: inline-block; position: relative; width:26.95%; box-sizing: border-box; font-size: 1.5rem; letter-spacing: -0.08rem; color: #003b95; line-height: 4.375rem; font-weight: 500; text-align:center; clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%); background-color: #fff;}
	*[class^=comp_tab] li.on {color: #fff; background-color: #003b95;}
	*[class^=comp_tab] li+li {margin-left:-2.62%;}
	*[class^=comp_tab] li:first-child {clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0% 100%);}
	*[class^=comp_tab] li:last-child {clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);}
	*[class^=comp_tab] a { display: block; position: relative; text-align: center;border: 1px solid #cacaca; border-bottom: 0; line-height: 40px; color: #666; background: #f9f9f9; font-weight: 300;  }
	*[class^=comp_tab] a[aria-selected=true] {font-weight: 500; color:#fff; border-color:#000; z-index: 1; background: #000}
	*[class^=comp_tab] .desc {position: absolute; right: 0; bottom:7px; font-weight: 100; font-size: 14px; color:#7a7a7a;}
	*[class^=comp_tab] .r-layout {position: absolute; right: 0; bottom:7px;}
	*[class^=comp_tab] .box {display: block; width: max-content; height: 40px; padding: 0 15px; margin-top:15px; font-weight: 200; color:#fff; background: #00a6ac; line-height: 40px;}
	*[class^=comp_tab] .box span {margin: 0 10px; color: #99dbde;}
	*[role=tabpanel] {display: none;}



/* ------------------------------------------------------
FORM ZONE
------------------------------------------------------ */
*[class^=comp_form] {position:relative; width: 100%; margin-bottom: 30px; table-layout: fixed;}
*[class^=comp_form] tbody tr > * {height:60px; padding:10px 20px 10px; box-sizing: border-box; border-bottom: 1px solid #e4e4e4;}
*[class^=comp_form] tbody td {position: relative; font-weight: 100; color:#666666; line-height: 20px; height: 60px;}
*[class^=comp_form] tbody th {background: #f9f9f9; width:150px; font-weight: 400; text-align: left; padding-left: 30px; padding-right: 5px; color:#000; line-height:40px;}
*[class^=comp_form] tbody th .small {display: block; font-size: 12px; font-weight: 100}
*[class^=comp_form] tbody th *[class*=comp_] label {color:#000; font-weight: 300;}
*[class^=comp_form] thead th {background: #f9f9f9; width:150px; font-weight: 300; text-align: center; color:#000; vertical-align:top; line-height:50px; border-bottom: 1px solid #e4e4e4}
*[class^=comp_form] th.va_m {vertical-align: middle}
*[class^=comp_form] > .txt-important {position: absolute; top: 100%; left:0; padding-left:180px; margin-top: 7px; font-size: 14px;}
*[class^=comp_form] .txt {font-weight: 100; display: inline-block;  vertical-align:middle;}
*[class^=comp_form] td .error-txt {margin-top: 5px}
*[class^=comp_form] td p[class^=txt-] {margin-top: 5px}
*[class^=comp_form] + .comp_btm_utile {margin-top: -20px; margin-bottom: 50px;}
*[class^=comp_form] .zipcode {font-weight: 100}
*[class^=comp_form] .lnk {position: relative;}
*[class^=comp_form] .lnk:after {display: block; width:100%; position: absolute; left:0; bottom:1px; height: 1px; background: #949494; content: ""}
*[class^=comp_form] .content {font-weight: 100; min-height: 300px; word-break: break-all;}
*[class^=comp_form] .btn-position {position: absolute; right: 20px; top:13px;}
*[class^=comp_form] *[class*=comm-btn_type3] {width: 120px}
*[class^=comp_form] select.comp_select_region {width: 200px;}
*[class^=comp_form] select.comp_select_voting_district {width: 200px;}

*[class^=comp_form] select.comp_select_member_class {width: 160px;}
*[class^=comp_form] select.comp_select_member_type {width: 160px;}
*[class^=comp_form] select.comp_select_member_field {width: 160px;}
*[class^=comp_form] tbody td .agree {display: block; color: #00a0e2; font-size: 13px; margin-top:3px;}
*[class^=comp_form] + *[class^=comp_form] {margin-top: -30px;}
*[class^=comp_form] select.comp_select_pay_type {width: 140px;}
*[class^=comp_form] input.comp_input_pay_type {width: 228px;}
*[class^=comp_form] ul.comp_sub_list {height:78%;}
*[class^=comp_form] ul.comp_sub_list (:first-child) {border-top: 1px solid #e4e4e4;}
*[class^=comp_form] ul.comp_sub_list li {height:32px; margin-top: 6px; border-bottom: 1px solid #e4e4e4;line-height: 30px; }
*[class^=comp_form] ul.comp_sub_list li .memoContent{display:inline-block; width:70%; height:30px; cursor:pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

*[class^=comp_form] ul.comp_sub_list li .memoDate{width:24%; height:30px; font-size:12px; float:right;}

/*
.title_zone + *[class^=comp_form] {margin-top: -21px}
*/
.txt_desc {font-size: 13px; color:#000; font-weight: 200;}
.ui_txtinput .txt {margin-right: 5px;}
.ui_txtinput .comp_input {width:102px;}

.title_zone .comp_select {border: 1px solid #00a6ac; color: #00a6ac; font-weight: 400; height: 36px; background: #fff url(../images/common/form_select_green.png) no-repeat 100% 50%;}


/* ------------------------------------------------------
FORM DESING
------------------------------------------------------ */
/* FORM - 분류 (대,중,소) */
.comp_category {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; text-align: left;}
.comp_category + .comp_category {margin-top: 5px;}
.comp_category .comp_select {-webkit-flex:1; flex:1;}
.comp_category .comp_select + .comp_select {margin-left: 5px;}
.comp_category *[class*=comp_btn] {margin-left: 5px}
.comp_category .comp_radio {margin-right: 10px; line-height: 40px;}
.categories_select_zone .btn_category_remove {width:13px; height: 30px; margin-left: 5px; background: url('/static/frontend/images/common/btn_remove2.jpg') no-repeat 50% 50%; text-indent: -9999px; vertical-align: top;}
.categories_select_zone li {line-height: 30px; margin-top: 10px;}
.categories_select_zone li + li {margin-top: 5px;}
.categories_select_zone .selected_category {display: inline-block; overflow: hidden; padding:0 10px; margin-right: 10px;vertical-align: top; line-height: 30px; border-radius: 6px; background: #959595; color:#fff; text-align: center; font-weight: 200; font-size: 13px}


/* FORM - 기간 */
.comp_period {overflow: hidden;}
.comp_period > * {float: left;}
.comp_period .txt {line-height: 40px; width: 22px;text-align: center;}
.comp_period .comp_select {width:150px; margin-right:5px}
.comp_period input[class*=comp_input] {width:11.25rem; }
.comp_period.month input[class*=comp_input] {width:246px; }
.comp_period .btn_group {display: inline-block; margin-left: 5px; margin-top: 3px; vertical-align: top;}
.comp_period .btn_group:after {display:block; clear:both; content:""}
.comp_period .btn_group li {float: left;}
.comp_period .btn_group li+li {margin-left: 5px;}
.comp_period .btn_group .click {background: #111; border-color:#111; color:#fff;}
.comp_period .btn_group button[aria-current=true] {background: #111; border-color:#111; color:#fff;}
.comp_period .btn_group button {min-width: 70px;}
.comp_period .ui-datepicker-trigger {display: none;}

.district_select_zone {display:flex;}
.district_select_zone .btn_district_remove {width:13px; height: 30px; margin-left: 15px; background: url('/static/frontend/images/common/btn_remove2.jpg') no-repeat 50% 50%; text-indent: -9999px; vertical-align: top;}
.district_select_zone li {line-height: 30px; ;margin-top: 10px; }
.district_select_zone li + li {margin-left: 20px;}
.district_select_zone .selected_district {display: inline-block; overflow: hidden; padding:0 10px; margin-right: 10px;vertical-align: top; line-height: 30px; border-radius: 6px; background: #959595; color:#fff; text-align: center; font-weight: 200; font-size: 13px}


/* FORM - 검색어 */
.comp_word {overflow:hidden; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;}
.comp_word .comp_select {width:150px}
.comp_word .comp_input {-webkit-flex:1; flex:1; margin-left:5px;}

/* 파일 업로드 (다중이미지/파일) */
.comp_file_upload {position: relative; overflow: hidden;}
	.comp_file_upload + .comp_file_upload {margin-top: 20px}
	.comp_file_upload .txt_help {float: left; margin-left: 20px; font-size: 14px; line-height: 34px; margin-top: 0 !important; color:#7a7a7a;}
	.comp_file_upload input[type="file"] {position: absolute; top: -1px; left: -1px; opacity: 0; width: 1px; height: 1px}
	.comp_file_upload input[type="file"][data-delete=false] ~ ul.image-group .btn-remove {display: none;}
	.comp_file_upload button[class^=comp_btn_type3_gray] {position: relative; float: left; width:145px;  z-index: 1; }
	.comp_file_upload .btn_remove { width: 20px; height: 20px;background: url('/static/admin/images/common/btn_remove.jpg') no-repeat 50% 50%; text-indent: -999em; background-size: 100% 100%;}
	.comp_file_upload .image_group {clear: both;}
	.comp_file_upload .image_group:after { display: block; clear: both; content: ""; }
	.comp_file_upload .image_group li { position: relative; float: left; width: 110px; height: 110px; margin: 10px 10px 0 0;  border: 1px solid #cacaca; text-align: center; overflow: hidden; background: #f8f8f8}
	.comp_file_upload .image_group img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%}
	.comp_file_upload .image_group .btn_remove { position: absolute; top: 0; right: 0; }
	.comp_file_upload ul.group {clear: both;}
	.comp_file_upload ul.group:after { display: block; clear: both; content: ""; }
	.comp_file_upload ul.group li {position: relative; float: left;}
	.comp_file_upload ul.group .img {display:inline-block; position: relative; height: 100px;  margin: 10px 10px 0 0;  border: 1px solid #cacaca; text-align: center; overflow: hidden; background: #fff; vertical-align: top;}
	.comp_file_upload ul.group img {height: 100%;}
	.comp_file_upload ul.group .btn_remove { position: absolute; top: 0; right: 0; }
	.comp_file_upload ul.group p.name {display: none;}
	.comp_file_upload div.box {clear:both;}
	.comp_file_upload div.box .name {display: inline-block; line-height: 40px; }
	.comp_file_upload div.box .btn_remove {vertical-align: middle; margin-left: 10px; }
	/* .comp_file_upload.files {margin-top: 10px; } */
	.comp_file_upload.files button + *.group {clear:inherit; padding-top: 44px;}
	.comp_file_upload.files *.box {display: block; position: relative; float:none; padding:0 50px 0 20px; background:rgba(242,242,242,0.7); line-height: 40px;}
	.comp_file_upload.files *.box p.name {display: block; color:#1f1f1f; font-weight: 200}
	.comp_file_upload.files *.box .btn_remove {position: absolute; right: 20px; top: 50%; margin-top: -10px; border-radius: 100px;}
	.comp_file_upload.files *.box .img {display: none;}
	.comp_file_upload.files *.box + .box .name {margin-top: 10px}

	.comp_files li {display: block; position: relative; float:none; line-height: 40px;}
	.comp_files a.name {color:#1f1f1f; font-weight: 200; text-decoration: underline;}
	.comp_files a.name i {margin-left: 5px}

/* 링크 입력 */
.comp_url {position: relative; padding-right:220px;}
.comp_url .comp_input {max-width: inherit;}
.comp_url .comp_radio {position: absolute; right: 0; top:0;}
.comp_url .comp_check {position: absolute; right: 0; top:0; line-height: 40px;}
.comp_url + p[class^=txt_] {margin-top: 5px}

/* FORM - 주소*/
.comp_address {}
.comp_address .zipcode .comp_input {width:180px;}
.comp_address .zipcode {width:300px;}
.comp_address .block {margin-top: 5px;}

/* */
#ui-datepicker-div {z-index: 1111 !important;}

/* 상품등록>옵션관련 */
.comp_options {}
.comp_options > *[class*=comp_] {width:300px;}

.comp_sword > * {float: left;}
.comp_sword .comp_select {width: 200px}
.comp_sword .comp_input {width:65%; width:calc(100% - 205px); margin-left: 5px}

.comp_phone {overflow: hidden; }
.comp_phone > * {float: left;}
.comp_phone .comp_select {width: 100px}
.comp_phone .comp_input {width: 100px}
.comp_phone .txt {line-height: 40px; margin:0 5px;}

.comp_birthday {overflow: hidden; }
.comp_birthday > * {float: left;}
.comp_birthday .comp_select {width: 100px; margin-right: 5px}
.comp_birthday .comp_input {width: 100px; margin-right: 5px}

.comp_state {position: relative; }
.comp_state .state {line-height: 40px; margin-right: 10px;}
.comp_state *[class*=comp_btn] {float: right;}

.comp_dates {overflow: hidden;}
.comp_dates > .comp_select {float: left;width:147px;}
.comp_dates > .comp_select +.comp_select {margin-left: 5px;}

.comp_price .comp_input {width:300px; max-width: inherit;}

.comp_payment_term {overflow: hidden;}
.comp_payment_term > * {float: left;}
.comp_payment_term .comp_select {width:113px; margin-right: 5px;}
.comp_payment_term .txt {line-height: 40px; margin:0 5px 0 0 !important;}

.comp_divide {display:flex;}
.comp_divide :not(:first-child) {margin-left:4px;}
.comp_divide button {margin-left:4px;}

.comp_grid {display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.comp_grid .grid_item {font-weight: 100; color: #666666; padding: 16px 10px 16px 20px;}
.comp_grid .grid_item .comp_check label:before {top: 0; }    

.comp_grid.menu {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.comp_grid.menu .grid_item {font-weight: 100; color: #666666; padding: 8px 10px 8px 10px;}

.comp_grid.memu4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------
텍스트에디터 관련 
------------------------------------------------------ */
#summernote {display: none; height:445px; width:100%; position: relative;}
.texteditor-zone {height:445px; width:100%; position: relative;}

.note-editor.note-frame {margin:10px 0;}
.note-editor .note-editable {line-height: 1.42857143}
.note-editor .note-editable ul {display: block; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px;    margin-bottom: 10px; }
.note-editor .note-editable ol {display: block; list-style-type: decimal; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px;    margin-bottom: 10px;}
.note-editor .note-editable li {list-style: inherit;}


/* ------------------------------------------------------
로더 관련 
------------------------------------------------------ */
.loaderbox {display: none;	 position: fixed;	left:0; top:0; width:100%; height: 	100%; background:rgba(0,0,0,0.5); z-index: 10000; text-align: center;}
.loaderbox .loader_in {display: table-cell; vertical-align: middle;	}
.loader,
.loader:after {border-radius: 50%; width: 7em; height: 7em; }
.loader {margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #ffffff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; }
@-webkit-keyframes load8 {
  0% {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% {-webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes load8 {
  0% {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% {-webkit-transform: rotate(360deg); transform: rotate(360deg); }
}



/* ------------------------------------------------------
LIST
------------------------------------------------------ */
dl.comp_list_important {margin-top: 30px}
dl.comp_list_important dt {margin-bottom: 10px;  }
dl.comp_list_important dt:before {display: inline-block; content: "※"; margin-right: 5px; vertical-align: middle; position: relative; top:-2px;}
dl.comp_list_important dd,
ul[class*='comp_list'] {margin-bottom:10px;}
ul[class*='comp_list'] li {position: relative;padding-left: 10px; line-height: 1.4;} 
dl.comp_list_important dd + dd,
ul[class*='comp_list'] li + li {margin-top: 5px;}
dl.comp_list_important dd:before,
ul[class*='comp_list'] li:before {display: block; content: "-"; position: absolute; left:0; top:0; }

/* ------------------------------------------------------
MARGIN
------------------------------------------------------ */
.mt0 {margin-top : 0 !important;}
.ml5 {margin-left: 5px}
.ml10 {margin-left: 10px}
.mt5 {margin-top: 5px}
.mr5 {margin-right: 5px}
.al-l {text-align: left !important;}

/* ------------------------------------------------------
LAYER
------------------------------------------------------ */
.layer {display:none; position: fixed; left:50%; top:50%; width:360px; background: #fff; border:1px solid #111; z-index: 1000 !important; margin-left: -180px; margin-top: -100px}
.layer .btn_layer_close {position: absolute; right:0; top:0; width:45px; height: 44px; background: #111 url('/static/frontend/images/common/btn_close.png') no-repeat 50% 50%; text-indent: -999em; outline: none;}
.layer .ly_title {height:44px; color:#fff; background: #111; text-align: left;padding:0 60px 0 10px; line-height: 44px; font-weight: 300; font-size: 16px;}
.layer .ly_contents {width:100%; padding:14px 10px 40px; text-align: center;}
.layer .ly_contents .ly_in {display: table-cell; vertical-align: middle;}
/* .layer .ly_contents p {font-size: 17px; font-weight: 100;} */
.layer .ly_contents .btm_button {margin-top: 30px;}
.layer .ly_contents .btm_button > * + * {margin-left: 5px;}
.layer .comp_form {margin-bottom: 0; border-top : 1px solid #e4e4e4; text-align: left;}
.layer .comp_form th {padding-left: 10px}
.layer.lp_category_add {width : 460px;}
.layer.wide {width : 660px;}


/* ------------------------------------------------------
TEXT
------------------------------------------------------ */
*[class^=txt-] {font-weight: 100; font-size: 14px}
*[class^=txt-][class*=-important]:before {display: inline-block; vertical-align:middle; content: "※"; margin-right: 5px; position: relative; top:-1px;}

.error-txt { color:#ff5151; text-align: left; font-weight: 200}
.txt_error {font-size: 12px; color:#ff5151; font-weight: 200; line-height: 12px; margin-top: 5px;}
.txt_help {font-size: 12px; color:#7a7a7a; font-weight: 200; line-height: 12px; margin-top: 5px;}
.important {color:#ff5151; vertical-align: top; display: inline-block; margin-right: 5px;}
.point {color:#ff5151 !important;}






/* ------------------------------------------------------
POPUP DESIGN
------------------------------------------------------ */
main.popup {position: relative; min-width:300px; }
main.popup  #container {position:relative; width:100%; min-height:calc(100vh - 150px); margin:0 auto 0; padding:50px 0 60px}
*[class^=pop_tbl] {position:relative; width: 100%; border-top: 1px solid #e4e4e4; margin-bottom: 30px; table-layout: fixed;}
*[class^=pop_tbl] tbody tr > * {height:60px; padding:10px 10px 10px; box-sizing: border-box; border-bottom: 1px solid #e4e4e4;}
*[class^=pop_tbl] tbody td {position: relative; font-weight: 100; color:#666666; font-size: 16px; line-height: 20px; height: 60px; text-align: left;}
*[class^=pop_tbl] *[class*=comp-input] {width: 100%}

.timeoff_pop .ly-in {padding:20px;}
.timeon_pop .ly-in {padding:20px;}
.retire_pop .ly-in {padding:20px;}


/* ------------------------------------------------------
FILE UPLOAD
------------------------------------------------------ */
.file_upload {position: relative;}
.file_upload input[type=file] {position: absolute; left:0; top:0; opacity: 0; z-index: -1;}
.file_upload .name {line-height: 40px; margin-left: 10px;}



/* ------------------------------------------------------
TOOLTIP 재선언
------------------------------------------------------ */
.custom-tooltip {

    background-color: #73AD21; 

    color: #FFFFFF; 

    border: 1px solid green; 

    padding: 10px 15px;

    font-size: 20px;

}


@media (max-width: 1440px) {
	header {min-width: 100%; }
	header .inner {width: 100%;}
	header .logo {margin-left: 1.25rem;}
	main {min-width: 100%; }
	footer {min-width: 100%;}
	header nav {margin-right: 1.25rem;}
	header nav .menu > li + li {margin-left:30px;}
} 

@media (max-width: 1024px) {
	main #container {width:100%; padding: 0 1.25rem 5rem 1.25rem}
	header nav {font-size: 1.12rem;}
	header nav a {font-size: 1.12rem;}
	header nav .menu > li + li {margin-left:0.8rem;}

} 



@media (max-width: 419px) {
	*[class^=comp_tab] li+li {margin-left:-2.63%;}
}

@media (max-width: 768px) {
	header {display:none; }
	header.mo_head {display:block; }
	.mo_br {display:block;}
	.phone_num {margin-left: 0;}

	h1 {font-size: 2.2rem; line-height: 2.2rem; letter-spacing: -0.094rem;}
	.title_zone .partyFjoin {position: absolute; top:0; right:0; width: 6rem; height: 10rem; text-indent: -9999em; background: url("../images/btn_m_partyFjoin.png") no-repeat 50% bottom; background-size: 100% auto;}
	.title_zone .partyJoin {position: absolute; top:0; right:0; width: 6rem; height: 10rem; text-indent: -9999em; background: url("../images/btn_m_partyJoin.png") no-repeat 50% bottom; background-size: 100% auto;}
	.title_zone .partyFrejoin {position: absolute; top:0; right:0; width: 6rem; height: 10rem; text-indent: -9999em; background: url("../images/btn_m_partyFrejoin.png") no-repeat 50% bottom; background-size: 100% auto;}
	.title_zone .partyRejoin {position: absolute; top:0; right:0; width: 6rem; height: 10rem; text-indent: -9999em; background: url("../images/btn_m_partyRejoin.png") no-repeat 50% bottom; background-size: 100% auto;}

	*[class^=comp_tab] li {font-size: 1.3rem;}
	*[class^=comp_btn][class*=_type0] {width:20rem; height:4.8rem; font-size: 1.6rem; color:#fff; font-weight: 700; line-height: 4.8rem; border-radius: 2.5rem;}
	*[class^=comp_btn][class*=_type7] {padding:0 0.4rem; font-size: 0.8rem; width: 3rem;}
	*[class^=comp_board].list {font-size: 1rem;}

	

} 


@media (max-width: 610px) {
	.btm_submit_zone {width:100%;}
	.btm_submit_zone ul {width:100%;}
	.btm_submit_zone li {width:49%;}
	*[class^=comp_btn][class*=_type1] {width:100%; }
	*[class^=comp_btn][class*=_type10] {width: 8rem; }

}

@media (max-width: 538px) {
	.btm_submit_zone li {width:48.8%;}
	*[class^=comp_btn][class*=_type1] {font-size: 1.125rem;}
	*[class^=comp_btn][class*=_type10] {font-size: 1rem;}
	*[class^=comp_btn][class*=_type7] {font-size: 0.8rem;}

}


@media (max-width: 398px) {
	.btm_submit_zone li {width:48.5%;}
	*[class^=comp_btn][class*=_type1] {font-size: 1rem;}
}