@charset "utf-8";

a{color:var(--main_black);}
h1,h2,h3,h4,h5,h6{color:var(--main_black); font-size:1em;}

/* [lang="en"] {font-family: 'Roboto', 'Pretendard', sans-serif;}
[lang="en"],
.font_en,
.font_num{ font-family: 'Roboto', sans-serif; letter-spacing: 0;} */
/* .gmarket{font-family: 'gmarket', 'spoqa', sans-serif; font-weight: 400;} */

.main_color_font{color: var(--main_color);}
.sub_color_font{color: var(--sub_color);}


.mobile .new_cursor,
.tablet .new_cursor{display: none!important;}  

.clearfix::after {content: ""; clear: both; display: table;}
.sr{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);}

#skip>a{width: 1px; height: 1px; position: absolute; left: -10000px; top: auto; overflow: hidden; display:block;}
#skip>a:hover,
#skip>a:focus, 
#skip>a:active{position:fixed; top:0; left:0; padding:20px; display:block; width:100%; height:auto; font-size: 16px; text-align: center; color:#ffffff; background:#222222; z-index: 9999;}
#skip>a:focus-visible{outline: 2px dashed #ffffff; outline-offset: -5px;} 

.jump_space{ display: inline-block; width: 12px;}
.jump_space2-4{ display: inline-block; width: 1.875em;}
.jump_space3-4{ display: inline-block; width: 0.4375em;}

/* text ellipsis */
.text_line_ellipsis{overflow:hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space:nowrap;  } /*1줄*/
.text_dline_ellipsis{ overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;   word-wrap:break-word; }
.text_tline_ellipsis{ overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;   word-wrap:break-word;  }

.text_left{text-align: left;}
.text_right{text-align: right;}
.text_center{text-align: center;}

/* button */
.btn_wrap{display: flex;}
.btn_wrap .btn{padding:5px 16px ; display: flex; justify-content: space-between; align-items: center; gap:0 4px; transition: background-color .3s, color .3s;}
.btn_wrap .btn i{display: block;}
.btn_wrap .btn i svg {width: 100%; height: 100%;}

.btn_stroke_arrow *{stroke: #444444;}
.w_btn_stroke_arrow *{stroke: #ffffff;}

.btn.wide_btn{ width: 100%; }
.btn.line_btn{ border:1px solid var(--main_color);}
.btn.plus_btn{position: relative;}
.btn.plus_btn::before{content: ""; position: absolute; top:50%; left:0; transform: translateY(-50%); display: block; width:8px; height: 8px; background-image: url('../images/common/8_btn_plus_icon.svg'); background-position: center; background-repeat: no-repeat; background-size: 100%; }
.btn.plus_btn::after{content: ""; position: absolute; bottom:0; left:0; display: block; width:0; height: 2px; background-color: var(--sub_black); transition: width .3s;}
.btn.bg_btn{background-color: var(--main_color);}
.btn_write{gap:0 10px;}
.form_confirm_btns{justify-content: center; gap: 0 8px;}
.btn.positive{background-color:var(--main_color); color: #ffffff; transition: background-color .3s, color .3s;}
.btn.negative{background-color:transparent; border:1px solid var(--line_color); color: var(--main_black); transition: background-color .3s, color .3s;}
.btn.positive:hover,
.btn.positive:focus-visible,
.btn.negative:hover,
.btn.negative:focus-visible{background-color: var(--main_black); color: #ffffff;}
.btn.positive:focus-visible,
.btn.negative:focus-visible{outline-color: red!important;}
.btn.plus_btn:hover::after{width:calc(100% - 16px);}
.mobile .btn.plus_btn:hover::after,
.tablet .btn.plus_btn:hover::after{width:0;}

@media(max-width:1600px){
  .btn_wrap .btn {padding: 14px 20px 14px 24px;}
}
@media(max-width:768px){
	.btn_wrap .btn {padding: 12px 20px 12px 24px;}
}
@media(max-width:540px){
	.btn_wrap .btn {padding: 10px 16px 10px 20px;}
}

.img_wrap{font-size: 0; line-height: 0;}
/* icon */
i{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
i img, i svg{width: 100%; height: 100%; aspect-ratio: 1/1;}
.icon_20{width:20px; height:20px;}
.icon_24{width:24px; height:24px;}
.icon_32{width:32px; height:32px;}
.icon_36{width:36px; height:36px;}
.icon_48{width:48px; height:48px;}
.icon_56{width:56px; height:56px;}
.icon_64{width:64px; height:64px;}
.icon_80{width:80px; height:80px;}
.icon_100{width:100px; height:100px;}

.dot_list>li,
.bar_list>li{position: relative; padding-left:8px;}
.dot_list>li::before,
.bar_list>li:before{content: ""; position: absolute; display: block;  background-color: var(--main_black);}
.dot_list>li:before{ top: 0.7em; left:0; width: 4px; height:4px; border-radius: 50%; }
.bar_list>li:before{ top: 0.7em; left:0; width: 4px; height:2px; }
.number_list{counter-reset:ol-number;}
.number_list li::before{counter-increment:ol-number; content:counter(ol-number)". ";}
.number_list li+li{margin-top:4px;}
.number_list li p{padding-left:16px;}
.number_list li p + p{margin-top:2px;}

/* tab  */
.tab_btns{display: flex; border:1px solid #dddddd}
.tab_btns li{display: flex; justify-content: center; align-items: center;}
.tab_btns li button{padding:20px 24px; width: 100%; font-weight: 500; color:#999999; text-align: center; }
.tab_btns li button.active{color:#ffffff; background-color: #333333; }
.tab_content{display: none;}
.tab_content.active{display: block;}

/* table */
.m_table_guide{display: none; font-size:12px; color: #888888;}

input[type=file]{display: flex; }
input[type=file]::file-selector-button{order:1; padding:8px 12px; border:1px solid var(--main_color); border-radius: 8px; color:var(--main_color); background-color: #ffffff; font-size: 1.3rem; transition:background-color, color, .3s; cursor: pointer; }
input[type=file]::file-selector-button:hover{ background-color: #222222; color:#ffffff;}
input[type=file].bg_btn::file-selector-button{border:none; background-color: var(--main_color); color:#ffffff;}
input[type=file].bg_btn::file-selector-button:hover{background-color: #222222;}

/* inputs */
.arrow_select{position: relative; padding:10px 28px 10px 10px; background-image: url("../images/common/select_arrow.svg"); background-repeat: no-repeat; background-position: center right 10px;}
.input_out_half{display: flex; gap:30px;}
.input_out_half>.input_wrap{width: calc((100% - (30px * 1))/2);}
.input_wrap label{font-weight: 600;}
.input_wrap select,
.input_wrap input[type="text"],
.input_wrap input[type="password"],
.input_wrap textarea{ padding:16px 0; width: 100%; background-color: var(--gray_bg); border:1px solid var(--btn_line); font-size: 1em; color: #444444; resize: vertical;}
.input_wrap textarea{height:520px;}
.input_wrap select.arrow_select {padding-right: 36px; background-position: center right 28px;}
::placeholder {color:#bbbbbb; font-size: 0.85em;}

.checkbox_wrap{display: flex; align-items: center; flex-wrap: wrap;}
.checkbox_wrap input[type="checkbox"]{border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;width: 1px;}
.checkbox_wrap input[type="checkbox"] + label{position: relative; padding: 0; display: flex; gap: 10px; font-weight:500;}
.checkbox_wrap input[type="checkbox"] + label:before, 
.checkbox_wrap input[type="checkbox"] + label:after{content: ''; box-sizing: content-box; }
.checkbox_wrap input[type="checkbox"] + label:before{margin-top:0.2em; width: 20px; height: 20px; background-color: var(--gray_bg); border:1px solid var(--btn_line); border-radius: 5px; text-align: center;}
.checkbox_wrap input[type="checkbox"] + label:after {position: absolute; top: 0.5em; left: 6px; transform: scale(0); transform-origin: 50%; display: block; width: 7px; height: 4px; background-color: transparent; border-style: solid; border-color: #ffffff; border-width: 0 0 3px 3px; transition: transform 200ms ease-out;}
.checkbox_wrap input[type="checkbox"]:hover,
.checkbox_wrap input[type="checkbox"]:focus-visible{color:var(--main_color);}
.checkbox_wrap input[type="checkbox"]:hover + label:before,
.checkbox_wrap input[type="checkbox"]:focus-visible + label:before{outline: 5px auto var(--main_color);}
.checkbox_wrap input[type="checkbox"] + label:hover:before,
.checkbox_wrap input[type="checkbox"] + label:focus-visible:before{border-color: var(--main_color);}
.checkbox_wrap input[type="checkbox"]:active + label:before{transition-duration: 0;filter: brightness(0.2);}
.checkbox_wrap input[type="checkbox"]:checked + label:before {animation: borderscale 200ms ease-in; background: var(--main_color); outline: 5px auto var(--main_color);}
.checkbox_wrap input[type="checkbox"]:checked + label:after { content: ''; transform: rotate(-45deg) scale(1);transition: transform 200ms ease-out;}

/* raido box */
input[type="radio"]{position:absolute; padding:0; margin:-1px; width:1px; height:1px; border:0; overflow:hidden; clip:rect(0,0,0,0); }
input[type="radio"] + label{position:relative; padding:4px 16px; display:flex; align-items: center;  border-radius: 20px; cursor:pointer;}
input[type="radio"]:checked + label{background-color: var(--main_color); color: #ffffff; cursor:pointer;}
input[type="radio"]:focus-visible + label{outline: 5px auto black; outline-offset: -2px;}

.circle_radio{display: flex; align-items: center; flex-wrap: wrap;}
.circle_radio input[type="radio"] + label{position:relative; display:flex; align-items: center; padding:0; border-radius: 0; cursor:pointer;}
.circle_radio input[type="radio"] + label{position: relative; padding: 0; display: flex; gap: 10px; font-weight:500;}
.circle_radio input[type="radio"] + label:before, 
.circle_radio input[type="radio"] + label:after{content: ''; box-sizing: content-box; }
.circle_radio input[type="radio"] + label:before{margin-top:0.1em; box-sizing: border-box; width: 24px; height: 24px; background-color: var(--gray_bg); border:2px solid #595959;  border-radius: 50%; text-align: center;}
.circle_radio input[type="radio"] + label:after {position: absolute;  left: 4px; transform: scale(0); transform-origin: 50%; display: block; width: 16px; height: 16px; background-color: var(--main_color); border-radius:50%;transition: transform 200ms ease-out;}
.circle_radio input[type="radio"]:checked + label {background-color: transparent; color:inherit;}
.circle_radio input[type="radio"]:active + label:before{transition-duration: 0;filter: brightness(0.2);}
.circle_radio input[type="radio"]:checked + label:before {animation: borderscale 200ms ease-in; outline: 5px auto var(--main_color);}
.circle_radio input[type="radio"]:checked + label:after { content: ''; transform: scale(1);transition: transform 200ms ease-out;}


.check_radio{display: flex; align-items: center; flex-wrap: wrap;}
.check_radio input[type="radio"]{border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;width: 1px;}
.check_radio input[type="radio"] + label{position: relative; padding: 0; display: flex; gap: 10px; font-weight:500;}
.check_radio input[type="radio"] + label:before, 
.check_radio input[type="radio"] + label:after{content: ''; box-sizing: content-box; }
.check_radio input[type="radio"] + label:before{width: 20px; height: 20px; background-color: var(--gray_bg); border:2px solid #cccccc; border-radius: 5px; text-align: center;}
.check_radio input[type="radio"] + label:after {position: absolute; top: 0.5em; left: 8px; transform: scale(0); transform-origin: 50%; display: block; width: 7px; height: 4px; background-color: transparent; border-style: solid; border-color: #ffffff; border-width: 0 0 3px 3px; transition: transform 200ms ease-out;}
.check_radio input[type="radio"]:hover,
.check_radio input[type="radio"]:focus-visible{color:var(--main_color);}
.check_radio input[type="radio"]:hover + label:before,
.check_radio input[type="radio"]:focus-visible + label:before{outline: 5px auto var(--main_color);}
.check_radio input[type="radio"] + label:hover:before,
.check_radio input[type="radio"] + label:focus-visible:before{border-color: var(--main_color);}
.check_radio input[type="radio"]:active + label:before{transition-duration: 0;filter: brightness(0.2);}
.check_radio input[type="radio"]:checked + label {background-color: transparent; color: inherit;}
.check_radio input[type="radio"]:checked + label:before {animation: borderscale 200ms ease-in; background: var(--main_color); outline: 5px auto var(--main_color);}
.check_radio input[type="radio"]:checked + label:after { content: ''; transform: rotate(-45deg) scale(1);transition: transform 200ms ease-out;}

/* input custom file */
.file_upload{flex-grow: 1; display: flex; justify-content: space-between; align-items: center; gap: 5px; cursor: pointer;}
.file_upload .file_name {padding: 17px 16px; display: block; width:100%; border:1px solid #dddddd; background-color: #f9f9f9; color: #999999; font-size: 14px; overflow: hidden;}
.file_upload input[type="file"] {display: none;}
.file_upload .file_btn {flex-shrink: 0; padding: 18px 16px; background: #B2B2B2; font-size: 14px; color: white; cursor: pointer;}


/*pagination*/
.pagenation{display:flex; justify-content: center;}
.pagenation .paging_inner_wrap{display:flex; align-items: center; gap:0 16px;}
.pagenation .paging_inner_wrap .page_num{display: flex; justify-content: center; align-items: center; width:40px; height:40px; text-align: center; font-size:16px; border-radius: 50%; }
.pagenation .paging_inner_wrap .page_num i{display: block;}
.pagenation .paging_inner_wrap .page_num i svg{fill:#222222;}
.pagenation .paging_inner_wrap .arrow_box{display: flex; align-items: center; gap:0 2px;}
.pagenation .paging_inner_wrap .page_num_group{display: flex; align-items: center; gap:0 8px;}
.pagenation .paging_inner_wrap .page_num_group .page_num{position: relative;}
/* #board_pagination .paging_inner_wrap .page_num_group .page_num::before{content:""; position: absolute; bottom:4px; left:50%; transform:translateX(-50%); display:block; width:70%; height:2px; background:var(--main_color);} */
.pagenation .paging_inner_wrap a:hover,
.pagenation .paging_inner_wrap a:focus{background:#add9d0}
.pagenation .paging_inner_wrap .page_num_group .page_num.active{color:#ffffff; background: var(--main_color);}
@media(max-width:1024px) {
  .pagenation .paging_inner_wrap .page_num{width:32px; height:32px; }
}
@media(max-width:540px) {
  .pagenation .paging_inner_wrap{ gap:0 8px;}
  .pagenation .paging_inner_wrap .page_num { gap: 0 4px; font-size: 14px;} 
}

/*no_content */
.no_content{display:flex; justify-content: center; align-items: center; width:100%; height:280px;}
.no_content .content_box{display: flex; flex-direction: column; align-items: center; text-align: center;}
.no_content .content_box h3 {margin-top:24px; font-size: 4rem; font-weight: 400; color: var(--main_color);}
.no_content .content_box h3 strong{font-weight:bold;}
.no_content .content_box p {margin-top:12px; color: #666666;}

@media(max-width:768px) { 
  .no_content{height:200px;}
  .no_content .content_box i{width:64px; height: 64px;}
  .no_content .content_box h3 {margin-top:16px; font-size: 3.2rem;}
  .no_content .content_box p {margin-top:4px; }
}
@media(max-width:540px) { 
  .no_content{height:200px;}
  .no_content .content_box i{width:48px; height: 48px;}
  .no_content .content_box h3 {font-size: 2.8rem;}
  .no_content .content_box p br{display: none;}
}

/* mouse cursor */
.new_cursor{position: fixed; top:0; left:0; transform: translate(-50%, -50%); /*display: none;*/ width:80px; height:80px; background-color: rgba(255,255,255,0.5); border:2px solid #ffffff; border-radius: 50%; z-index:9999; user-select:none; pointer-events: none; opacity:0; visibility: hidden;}
.new_cursor::before,
.new_cursor::after{content: ""; position: absolute; top:50%; display: block; width: 12px; height:12px; border-top:2px solid #ffffff;}
.new_cursor::before{left:-20px; transform: translateY(-50%) rotate(-45deg); border-left:2px solid #ffffff; }
.new_cursor::after{right:-20px; transform: translateY(-50%) rotate(45deg); border-right:2px solid #ffffff; }
.mobile .new_cursor{display: none;}
.tablet .new_cursor{display: none;}


/* base table */
.table_wrap {position: relative;}
.table_wrap  table{width: 100%; table-layout: fixed; text-align: center;}
.table_wrap  table th,
.table_wrap  table td{padding:20px 8px;}
.table_wrap  table thead{border-top: 2px solid var(--main_color); border-bottom: 1px solid var(--main_color); }
.table_wrap  table thead th{font-weight: bold; color: var(--main_color);}
.table_wrap  table tbody tr{border-bottom: 1px solid var(--line_color);}
.table_wrap  table tbody th{font-weight: bold;}
.table_wrap  table thead th.blue_tbg,
.table_wrap  table tbody td.blue_tbg{background-color: #F3FCFF;}
.table_wrap  table th.border_left{border-left: 1px solid var(--line_color);}
.table_wrap  table th.border_right{border-right: 1px solid var(--line_color);}
.table_wrap  table th.border_top{border-top: 1px solid var(--line_color);}
.table_wrap  table td.border_left{border-left: 1px solid var(--line_color);}
.table_wrap  table td.border_right{border-right: 1px solid var(--line_color);}
.table_wrap .m_table_guide{position: absolute; top:30%; left:50%; transform: translateX(-50%); z-index:1; width: 56px; height: 56px; border-radius: 50%; background: #222222 url("../images/common/36_grap_table_icon_.svg") no-repeat center; background-size: 45%; overflow: hidden; font-size: 0; line-height: 1; pointer-events: none; }
.mobile .grab_table .grab_table_inner{-ms-overflow-style: none;  scrollbar-width: none;}
.mobile .grab_table .grab_table_inner::-webkit-scrollbar,
.mobile .grab_table .grab_table_inner::-webkit-scrollbar{display: none;}
/* sticy table haeder */
.sticky_header_table table thead{position: sticky; top:0; background-color: #ffffff; transition: top .3s;}
.sticky_header_table table thead.active{box-shadow: 0 1px 0 var(--main_color); border-bottom: none;}

@media(max-width:1440px){
  .table_wrap:has(.table_inner[data-tablewidth="1440"]) .m_table_guide {display: block;}
  .table_wrap:has(.table_inner[data-tablewidth="1440"].active) .m_table_guide {display: none;}
  .table_wrap:has(.table_inner[data-tablewidth="1440"].active) table thead{position:static;}
  .table_wrap .table_inner[data-tablewidth="1440"]{overflow-x: auto;}
  .table_wrap .table_inner[data-tablewidth="1440"] table {width: 1380px;}
}
@media(max-width:1280px){
  .table_wrap:has(.table_inner[data-tablewidth="1280"]) .m_table_guide {display: block;}
  .table_wrap:has(.table_inner[data-tablewidth="1280"].active) .m_table_guide {display: none;}
  .table_wrap:has(.table_inner[data-tablewidth="1280"].active) table thead{position:static;}
  .table_wrap .table_inner[data-tablewidth="1280"]{overflow-x: auto;}
  .table_wrap .table_inner[data-tablewidth="1280"] table {width: 1200px;}
}
@media(max-width:1024px){
  .table_wrap:has(.table_inner[data-tablewidth="1024"]) .m_table_guide {display: block;}
  .table_wrap:has(.table_inner[data-tablewidth="1024"].active) .m_table_guide {display: none;}
  .table_wrap:has(.table_inner[data-tablewidth="1024"].active) table thead{position:static;}
  .table_wrap .table_inner[data-tablewidth="1024"]{overflow-x: auto;}
  .table_wrap .table_inner[data-tablewidth="1024"] table {width: 1000px;}
}
@media(max-width:768px){
  .table_wrap:has(.table_inner[data-tablewidth="768"]) .m_table_guide {display: block;}
  .table_wrap:has(.table_inner[data-tablewidth="768"].active) .m_table_guide {display: none;}
  .table_wrap:has(.table_inner[data-tablewidth="768"].active) table thead{position:static;}
  .table_wrap .table_inner[data-tablewidth="768"]{overflow-x: auto;}
  .table_wrap .table_inner[data-tablewidth="768"] table {width: 780px;}
}


/* clip images */
.clip_img{transition: clip-path 1.5s cubic-bezier(.56,.16,.40,.99); }
.img_clip_left{clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.img_clip_right{clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
.img_clip_bottom{clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);}
.img_clip_top{clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.img_clip_center{clip-path: polygon(20% 0%, 80% 0%, 80% 100%, 20% 100%);}
.img_clip_left.active,
.img_clip_right.active,
.img_clip_bottom.active,
.img_clip_top.active,
.img_clip_center.active{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}

.img_clip_wide{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
.img_clip_wide.active{clip-path: polygon(21.6216% 0, 78.3783% 0, 78.3783% 100%, 21.6216% 100%);}

@media(max-width:1024px) {  
  .clip_img{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
  /* .mobile .clip_img,
  .tablet .clip_img{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);} */
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}



.captcha{margin-top:12px; display: flex; align-items: center; gap:0 8px;}
.captcha input[type="text"].captcha_box{width:auto;}

@media(max-width:540px) {  
  .captcha{ flex-direction: column; align-items: flex-start; gap: 8px;}
  .captcha input[type="text"].captcha_box{width:100%;}
}