@charset "utf-8";

/*
 * File Name : basic.css
 */


/********************************************************
 
 *  Web Font
 
 ********************************************************/


/*-----------------------------------------------------------------------------
 *  Roboto : 300 400 500 700 900
 *----------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');


/*-----------------------------------------------------------------------------
 *  Pretendard : 100 200 300 400 500 600 700 800 900
 *----------------------------------------------------------------------------*/

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');


/********************************************************
 
 *  Reset
 
 ********************************************************/

* {margin:0;padding:0;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
*::before,
*::after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box}

html {width:100%;height:100%;-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;/*overflow-y:scroll;*/}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;list-style:none;font-family:'Roboto','Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;}
sup {vertical-align:top;font-size:0.6em;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
h1,h2,h3,h4,h5,h6,em,address,caption,em,cite {font-style:normal;font-weight: normal;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
table{width:100%;border-collapse:collapse;border-spacing:0;word-break:break-all;border:0;}
table th, table td{vertical-align:middle;}
caption{visibility:hidden;width:0;height:0;font-size:0;line-height:0;zoom:1;}
fieldset{margin:0;padding:0;border:0 none;}
legend{display:none; overflow:hidden; width:0; height:0; font-size:0; visibility:visible; line-height:0;}
select, img, input, textarea,button {font-family:'Roboto','Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;color:#888;}
label {vertical-align:middle;cursor:pointer;}
input[type=checkbox], input[type=radio] {/*float:left;*/margin-right:8px;vertical-align:middle;}
input:focus,
select,
a,
textarea{outline: none; -webkit-tap-highlight-color:transparent; }

/* Number Type Arrow Hide */

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none;  margin: 0;}
input[type=number] { -moz-appearance: textfield;}
input[type=button] { -webkit-appearance: none; }
button {background:none; margin:0; padding:0; border:0 none; cursor:pointer;}
img {max-width: 100%; border:none; -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop')"; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop');}


/********************************************************
 
 *  Link
 
 ********************************************************/

a {text-decoration:none;color:#555;-webkit-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-moz-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-ms-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-o-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;outline:none;}
a:hover {text-decoration:none;color:#000;}


/********************************************************
 
 *  Form
 
 ********************************************************/

/*-----------------------------------------------------------------------------
 *  Select
 *----------------------------------------------------------------------------*/

.select_area {background:#f4f4f4;padding:15px 20px;margin-bottom: 30px;}
.select_area > strong {display: inline-block;vertical-align: middle;font-size:15px;font-weight: 500;color: #222;margin-right: 10px;}
.select_wrap {display: inline-block;vertical-align: middle;font-size: 0;}
.select_box { position:relative; display: inline-block; min-width:140px;height:36px;margin:0 2px 0 0;padding-right: 30px;}
.select_box select {visibility:hidden;outline:none;}
.select_box a {font-size:13px;color:#666;}
.select_box .select_title { overflow:hidden; position:absolute; top:0;  left:0; padding:0 10px; width:100%; height:100%; line-height:35px; background:#fff; border:1px solid #ddd; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; transition: none;}
.select_box .select_title.open { border-color:#000;}
.select_box .select_title span {white-space:nowrap;}
.select_box .select_title .arrow { position:absolute; top:0; right:0; width:30px; height:100%;}
.select_box .select_title .arrow:before { content:''; display:block;  position:absolute; right:15px; top:12px; width:6px; height:6px; border-width:1px 1px 0 0; border-style:solid; border-color:#000; transform:rotate(135deg); }
.select_box .select_title.open .arrow:before { top:15px; transform:rotate(315deg); }
.select_box ul { overflow:hidden; display:none; position:absolute; width: 100%; top:35px; left:0; border:1px solid #ddd;z-index: 1;}
.select_box .select_title.open + ul {border-color:#000;border-top-color:#fff;}
.select_box ul li.optgroup span { display:block; padding:5px;  background:#fff; }
.select_box ul li.optgroup ~ .option a { padding-left:20px; }
.select_box ul li a { display:block; padding:6px 10px; white-space:nowrap;background:#fff;border-bottom: 1px solid #e5e5e5;color:#777;}
.select_box ul li a:last-child {border-bottom: none;}
.select_box ul li a.selected,
.select_box ul li a:hover {color:#000; }
.select_box ul li a.selected {background:#f6f6f6;}

/*-----------------------------------------------------------------------------
 *  Select : 20221014 수정
 *----------------------------------------------------------------------------*/

.select {position: relative;display: inline-block;height:36px;border: 1px solid #6b7494;border-radius: 4px;margin:0 1px; background:transparent;overflow: hidden;}
.select.full {display: block;}
.select::after {content:''; position:absolute; right:12px; top:14px; display:block; width:6px; height:6px; border-width:1px 1px 0 0; border-style:solid; border-color:#ddd; transform:rotate(135deg);pointer-events:none;}
select {height:36px; padding: 0 30px 0 10px; outline:0;box-shadow:none;border:0 !important;background: #fff;font-size: 14px;color:#ccc;}
select::-ms-expand { display: none;} /*IE*/
select option {background:#363b4d;}


/*-----------------------------------------------------------------------------
 *  Check Box : 20221014 수정
 *----------------------------------------------------------------------------*/

.chk_box {display: inline-block;vertical-align: middle;margin: 0 6px 0 0;}
.chk_box .chk {display:none;}
.chk_box .chk + label {position: relative;display: inline-block;vertical-align: middle;font-size:13px;line-height:14px; color:#b2b7cb;}
.chk_box .chk + label:before {content:'';display:inline-block;vertical-align: middle;width:18px;height:18px;border-radius: 2px;border:1px solid #6b7494;margin-right: 6px;}
.chk_box .chk:checked + label {color:#fff;}
.chk_box .chk:checked + label:before {background-color:#f6c132;border-color:#f6c132; }
.chk_box .chk:checked + label:after {content: '';display: inline-block; position: absolute;left:5px;top:6px;width:8px;height: 5px;border:2px solid #000;border-top:none;border-right:none; transform: rotate(-45deg);}


/*-----------------------------------------------------------------------------
 *  Radio Button : 20221014 수정
 *----------------------------------------------------------------------------*/

.rdo_btn {display: inline-block;vertical-align: middle;margin: 0 10px 0 0;}
.rdo_btn .rdo {display:none;}
.rdo_btn .rdo + label {position: relative;display: inline-block;vertical-align: middle;font-size:13px;line-height:14px; color:#b2b7cb;}
.rdo_btn .rdo + label:before {content:'';display:inline-block;vertical-align: middle;width:17px;height:17px;border-radius: 50%;border:1px solid #6b7494;margin-right: 5px;}
.rdo_btn .rdo:checked + label {color:#fff;}
.rdo_btn .rdo:checked + label:before {background-color:#f6c132;border-color:#f6c132; }
.rdo_btn .rdo:checked + label:after {content: '';display: inline-block; position: absolute;left:5px;top:5px;width:7px;height: 7px;border-radius: 50%; background:#363b4d;}


/*-----------------------------------------------------------------------------
 *  File Field
 *----------------------------------------------------------------------------*/

.file_fld {position: relative;padding-right:102px;margin:4px 0;}
.file_fld .upload_name {display:block;vertical-align:middle;width: 100%;height: 40px;border:1px solid #ccc;background:#fff; -webkit-appearance:none;-moz-appearance:none;appearance:none;}
.file_fld .file_upload {position:absolute;top:0;right:0;width:1px;height:1px;opacity:0;filter:alpha(opacity=0);visibility: hidden;}
.file_fld .file_upload + label {position: absolute;right: 0;top:0; display:inline-block;width: 100px; height:40px;line-height:39px;color:#fff;background:#000;padding:0 15px;text-align: center;}


/*-----------------------------------------------------------------------------
 *  input Text
 *----------------------------------------------------------------------------*/

.input {display: inline-block;vertical-align: middle;font-size: 14px; color: #222;border:1px solid #ddd;padding: 10px;height: 36px;margin:0 2px;}

.inputText {padding:0 10px;height: 36px; border-radius: 4px;background: transparent;border: 1px solid #6b7494;color: #fff;outline: none;}
.inputText:focus {border-color: #98a3c8 !important;}
/**/
.input.wide {display: block; width: 100%;margin: 0;}
input[type=text]:focus,
input[type=number]:focus {border-color: #000;}
input[type=number].input {text-align: right;}
input[type=text].center,
input[type=number].center {text-align: left;}
input[readonly] {background:#f4f4f4;}


/********************************************************
 
 *  Drop Down
 
 ********************************************************/

.drop_down_wrap {font-size: 0;}
.drop_down {display: inline-block;position: relative;}
.drop_title a {position:relative;display:inline-block;min-width:120px;height:40px;padding:0 35px 0 15px;background:#fff;font-size: 14px; color:#666;line-height:39px;}
.drop_title a:after {content:'';display:block;position:absolute;right:15px;top:15px;/*width:6px;height:6px;border:1px solid #000;border-width:0 1px 1px 0;transform:rotate(45deg);*/}
.drop_title.active a {position:relative;/*border-color: #000;border-bottom-color:#ccc;*/}
.drop_title.active a:after {transform:rotate(180deg);}
.drop_sub {position: absolute;left:0;top:39px;width: 100%; border:1px solid #000;border-top-color:#ccc;background:#fff;z-index: 100; box-sizing: border-box;}
.drop_sub li a {display: block; font-size: 14px; padding: 6px 15px;color: #777}
.drop_sub li a:hover {color:#000;}
.drop_sub li.active a {color:#000;background:#f8f8f8;}


/********************************************************
 
 *  Tabs
 
 ********************************************************/

.tabs {}
.tabs_head {position:relative;z-index:2;}
.tabs_head:after {content:'';display:block;clear:both;}
.tabs_head .tab {float: left;cursor: pointer;}
.tabs_head_active { cursor: default; }
.tabs_item { display: none; }
.tabs_content_active { display: block; }


/********************************************************
 
 *  Scrollbar Set
 
 ********************************************************/

html::-webkit-scrollbar {width:5px;height: 5px;}
html::-webkit-scrollbar-track {background:none;}
html::-webkit-scrollbar-thumb {background-color: #d4aa70;}
html {scrollbar-color: #D4AA70 #e4e4e4;}
html::-webkit-scrollbar-thumb {background-color: rgba(144,147,153,.5);}

body ::-webkit-scrollbar { width: 5px; height: 5px; background: none; }
body ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {height: 5px; display: none; }
body ::-webkit-scrollbar-track {background: none;  -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
body ::-webkit-scrollbar-thumb { height: 5px; width: 5px;  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;background-color: rgba(144,147,153,.5); }


/********************************************************
 
 *  Etc
 
 ********************************************************/

.clearfix {clear:both;height:50px;}
.blind {visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0;}
.accessibilityWrap dd a {display:block;position:absolute;top:-10000px;left:0;z-index:500;width:100%;}


/********************************************************
 
 *  Placeholder : 20221014 수정
 
 ********************************************************/

::-webkit-input-placeholder {color:#b2b7cb;font-family:'Roboto','Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;font-size:14px;}
::-moz-placeholder {color:#b2b7cb;font-family:'Roboto','Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;font-size:14px;}
:-ms-input-placeholder {color:#b2b7cb !important;font-family:'Roboto','Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;font-size:14px;}
input:-moz-placeholder {color:#b2b7cb;font-family:'Roboto','Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;font-size:14px;}