@charset "utf-8";

/*
 * File Name : basic.css
 * 작성일 : 2023-09-08
 */


/********************************************************

 *  Web Font : 영문 먼저 표기

 ********************************************************/

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

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

@font-face{
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-Thin.woff') format('woff'),
    url('fonts/Pretendard-Thin.woff2') format('woff2'),
    url('fonts/Pretendard-Thin.ttf') format("truetype");
    font-weight: 100;
}
@font-face{
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-ExtraLight.woff') format('woff'),
    url('fonts/Pretendard-ExtraLight.woff2') format('woff2'),
    url('fonts/Pretendard-ExtraLight.ttf') format("truetype");
    font-weight: 200;
}
@font-face{
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-Light.woff') format('woff'),
    url('fonts/Pretendard-Light.woff2') format('woff2'),
    url('fonts/Pretendard-Light.ttf') format("truetype");
    font-weight: 300;
}
@font-face{
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-Regular.woff') format('woff'),
    url('fonts/Pretendard-Regular.woff2') format('woff2'),
    url('fonts/Pretendard-Regular.ttf') format("truetype");
    font-weight: 400;
}
@font-face{
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-Medium.woff') format('woff'),
    url('fonts/Pretendard-Medium.woff2') format('woff2'),
    url('fonts/Pretendard-Medium.ttf') format("truetype");
    font-weight: 500;
}
@font-face{
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-SemiBold.woff') format('woff'),
    url('fonts/Pretendard-SemiBold.woff2') format('woff2'),
    url('fonts/Pretendard-SemiBold.ttf') format("truetype");
    font-weight: 600;
}
@font-face{
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-Bold.woff') format('woff'),
    url('fonts/Pretendard-Bold.woff2') format('woff2'),
    url('fonts/Pretendard-Bold.ttf') format("truetype");
    font-weight: 700;
}
@font-face{
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-ExtraBold.woff') format('woff'),
    url('fonts/Pretendard-ExtraBold.woff2') format('woff2'),
    url('fonts/Pretendard-ExtraBold.ttf') format("truetype");
    font-weight: 800;
}
@font-face{
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-Black.woff') format('woff'),
    url('fonts/Pretendard-Black.woff2') format('woff2'),
    url('fonts/Pretendard-Black.ttf') format("truetype");
    font-weight: 900;
}


/********************************************************

 *  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;scroll-behavior: smooth;}
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:'Poppins','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:'Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;color:#888;outline: none;}
label {vertical-align:middle;cursor:pointer;}
input[type=checkbox], input[type=radio] {display: inline-block;vertical-align:middle;margin-right:8px;}
input:focus,
select,
a,
textarea{outline: none; -webkit-tap-highlight-color:transparent; }
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');}
imgBlock img {display: block;width: 100%;}


/* 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; }


/********************************************************

 *  Link Style

 ********************************************************/

a {text-decoration:none;color:#666;-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;}
a:hover {text-decoration:none;}


/********************************************************

 *  Form Style

 ********************************************************/

.frm_row {margin:5px 0}

/*-----------------------------------------------------------------------------
 *  Buttons
 *----------------------------------------------------------------------------*/

.func_btn {display: inline-block;vertical-align: middle;}
.func_btn button {line-height: 50px;background:#666;color:#fff;border-radius: 5px;padding: 0 20px;font-size: 16px;font-weight: 600;transition: all 0.3s ease;}
.func_btn button:hover {background:#222}

@media screen and (max-width:768px){
  .func_btn button {line-height: 40px;font-size: 15px;}
}


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

/* Basic */
.select_wrap {font-size: 0;}
.select_box {position:relative; display: inline-block; min-width:120px;height:50px;padding-right: 30px;margin: 2px;}
.select_box + .select_box {margin-left: 5px;}
.full .select_box {width: 100%;}
.full .select_box + .select_box {margin: 5px 0 0}
.select_box select {visibility:hidden;outline:none;}
.full select {display: block; width: 100%;}
.select_box a {font-size: 15px;color:#666;}
.select_box .select_title { overflow:hidden; position:absolute; top:0;  left:0; padding:0 10px; width:100%; height:100%; line-height:49px; background:#fff; border:1px solid #ccc;border-radius: 5px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none;}
.select_box .select_title.open { border-color:#000;border-radius: 5px 5px 0 0}
.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:18px; width:7px; height:7px; border-width:1px 1px 0 0; border-style:solid; border-color:#666; transform:rotate(135deg); }
.select_box .select_title.open .arrow:before { top:22px; transform:rotate(315deg); }
.select_box ul { overflow:hidden; display:none; position:absolute; width: 100%; top:49px; left:0; border:1px solid #ccc;border-radius: 0 0 5px 5px; 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:10px 10px; white-space:nowrap;background:#fff;border-bottom: 1px solid #eee;color:#666;}
.select_box ul li:last-child a {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;}


/* Mobile */
@media screen and (max-width:768px){
  select::-ms-expand { display: none;} /*IE*/
  select {position: relative;height: 40px;padding: 0 10px; font-size: 14px; color:#444;border: 1px solid #ccc;border-radius: 5px; padding-right: 30px;background:#fff url("../images/icon/sel_down.png") no-repeat right 5px center;background-size:20px auto;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
  select + select {margin-left: 5px;}
  .full select {margin-right: 0;}
  .full select + select {margin:5px 0 0;}
}


/*-----------------------------------------------------------------------------
 *  Check Box
 *----------------------------------------------------------------------------*/

/* Basic */
.chk_box {display: inline-block;vertical-align: middle;margin: 2px 10px 2px 0;}
.chk_box .chk {display:none;}
.chk_box .chk + label {position: relative;display: inline-block;vertical-align: middle;font-size:14px;line-height:1; color:#444;}
.chk_box .chk + label:before {content:'';display:inline-block;vertical-align: middle;width:20px;height:20px;border-radius: 4px;border:1px solid #ccc;margin-right: 8px;}
.chk_box .chk:checked + label {color:#000;}
.chk_box .chk:checked + label:before {background:#ffc600 url("../images/icon/check_on.png") no-repeat center center;background-size: 22px auto; border-color:#ffc600; }


/*-----------------------------------------------------------------------------
 *  Radio Button
 *----------------------------------------------------------------------------*/

/* Basic */
.rdo_btn {display: inline-block;vertical-align: middle;margin: 2px 10px 2px 0;}
.rdo_btn .rdo {display:none;}
.rdo_btn .rdo + label {position: relative;display: inline-block;vertical-align: middle;font-size:14px;line-height:1; color:#444;}
.rdo_btn .rdo + label:before {content:'';display:inline-block;vertical-align: middle;width:18px;height:18px;border-radius: 50%;border:1px solid #ccc;margin-right: 5px;}
.rdo_btn .rdo:checked + label {color:#000;}
.rdo_btn .rdo:checked + label:before {background:#ffc600 url("../images/icon/radio_on.png") center center;background-size: 20px auto; border-color:#ffc600; }


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

.filebox {position: relative;padding-right:80px;margin:4px 0;}
.filebox .upload-name {display: inline-block;height: 40px;padding: 0 10px;vertical-align: middle;border: 1px solid #ddd;width: 100%;color: #666;}
.filebox label {position: absolute;right: 0;top: 0; display: inline-block;padding: 10px 0;font-size: 15px; color: #fff;vertical-align: middle;background-color: #666;cursor: pointer;width: 80px; height: 40px;text-align: center;transition: background 0.3s ease;}
.filebox label:hover {background:#222;}
.filebox input[type="file"] {position: absolute;width: 0;height: 0;padding: 0;overflow: hidden;border: 0;}

@media screen and (max-width:768px){
  .filebox .upload-name {height: 35px;}
  .filebox label {font-size: 14px; width: 80px; height: 35px;}
}


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

/* Basic */
input.inp {display: inline-block;vertical-align: middle;font-size: 15px;font-weight: 500; color: #000;border:1px solid #ccc;border-radius: 5px; padding:0 10px;height: 50px;margin:2px;transition: all 0.3s ease;}
input.inp.full {display: block; width: 100%;}


input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus {border-color:#000;}
input[readonly] {background:#fcfcfc;}
input[disabled] {background:#f8f8f8;}
input[readonly]:focus {border-color:#ccc;}


/* Size */
input.inp_100 {max-width: 100px}
input.inp_150 {max-width: 150px}
input.inp_200 {max-width: 200px}

@media screen and (max-width:768px){
  input.inp {height:40px;}
}


/********************************************************

 *  Drop Down List

 ********************************************************/

/* Basic */
.drop_down_wrap {font-size: 0;}
.drop_down {display: inline-block;position: relative;}
.drop_down + .drop_down {margin-left: 5px;}
.drop_down_wrap.full .drop_down {display: block;}
.drop_down_wrap.full .drop_down + .drop_down {margin: 5px 0 0;}
.drop_title a {position:relative;display:inline-block;min-width:120px;height:40px;padding:0 35px 0 10px;text-decoration:none;border:1px solid #ccc;background:#fff;font-size: 15px; color:#666;line-height:39px;}
.drop_down_wrap.full .drop_title a {display:block;min-width:none;}
.drop_title a:after {content:'';display:block;position:absolute;right:15px;top:14px;width:7px;height:7px;border:1px solid #666;border-width:0 1px 1px 0;transform:rotate(45deg);}
.drop_title.active a {position:relative;text-decoration:none;border-color: #000;border-bottom-color:#ccc;}
.drop_title.active a:after {top:17px;transform:rotate(-135deg);}
.drop_sub {position: absolute;left:0;top:39px;width: 100%; border:1px solid #000;border-top-color:#ccc;background:#fff;z-index: 1; box-sizing: border-box;}
.drop_sub li a {display: block; font-size: 15px; padding: 8px 10px;color: #666;border-bottom: 1px solid #e5e5e5;}
.drop_sub li:last-child a {border-bottom: none;}
.drop_sub li a:hover {color:#000;}
.drop_sub li.active a {color:#000;background:#f6f6f6;}

@media screen and (max-width:768px){
  .drop_title a {min-width: 100px; height: 35px;padding: 0 30px 0 10px;font-size: 14px;line-height: 34px;}
  .drop_title a:after {right:10px;top:12px}
  .drop_title.active a:after {top:15px;}
  .drop_sub {top:34px;}
  .drop_sub li a {font-size: 14px;}
}


/********************************************************

 *  Tabs

 ********************************************************/

/* Tab Row */
.tabs.row {}
.tabs.row .tabs_head {display: flex;}
.tabs.row .tabs_head .tab {display: flex; align-items: center; height: 45px; font-size: 15px; color: #666; background:#f6f6f6; padding:0 20px; border: 1px solid #ddd;cursor: pointer; transition: all 0.3s ease;}
.tabs.row .tabs_head .tab + .tab {margin-left: -1px;}
.tabs.row .tabs_head .tabs_head_active {color:#000;background:#fff; border-bottom-color: #fff; cursor: default;}
.tabs.row .tabs_cont {padding: 20px;border: 1px solid #ddd;margin-top: -1px;}
.tabs.row .tabs_item { display: none;}
.tabs.row .tabs_cont_active {display: block;}


/* Tab Column */
.tabs.col {display: flex;align-items: stretch;}
.tabs.col .tabs_head {position:relative;width:200px;}
.tabs.col .tabs_head .tab {display: flex; align-items: center;height: 45px; font-size: 15px; color: #666; background:#f6f6f6; padding:0 20px; border: 1px solid #ddd;cursor: pointer; transition: all 0.3s ease;}
.tabs.col .tabs_head .tab + .tab {border-top: none;}
.tabs.col .tabs_head .tabs_head_active {color:#000;background:#fff; border-right-color: #fff; cursor: default;}
.tabs.col .tabs_cont {width: 100%; padding: 20px;border:1px solid #ddd;margin-left: -1px;}
.tabs.col .tabs_item { display: none;}
.tabs.col .tabs_cont_active {display: block;}


/********************************************************

 *  Etc

 ********************************************************/

.autoH {*zoom:1}
.autoH:after {display:block;clear:both;content:' '}
.clearFix {clear:both;}
.hidden {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:10000;width:100%;background:#333;color:#fff;font-size:16px;text-align:center;padding:20px 0;}
.accessibilityWrap dd a:focus {top:0;}


/********************************************************

 *  Scrollbar

 ********************************************************/

/* Basic */
::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track {background-color: #ebebeb;-webkit-border-radius: 10px;border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px;border-radius: 10px;background: #6d6d6d; }


/********************************************************

 *  Placeholder

 ********************************************************/

/* Basic */
::-webkit-input-placeholder {color:#aaa;font-family:'Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;font-size:15px;}
::-moz-placeholder {color:#aaa;font-family:'Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;font-size:15px;}
:-ms-input-placeholder {color:#aaa !important;font-family:'Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;font-size:15px;}
input:-moz-placeholder {color:#aaa;font-family:'Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;font-size:15px;}