@charset "utf-8";

/*
 * File Name : basic.css
 */


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

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

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


/*-----------------------------------------------------------------------------
 *  Noto Sans Korean 100,300,350,400,500,700,900
 *----------------------------------------------------------------------------*/

@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);


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

* {-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','Noto Sans Korean','맑은 고딕', '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 {font-style: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','Noto Sans Korean','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;color:#888;outline:none;}
select {-webkit-appearance: none;-moz-appearance: none;appearance: none; background-image: url('/resources/user/hyoryeong/images/common/ic_select_arr.png'); background-repeat: no-repeat; background-position: center right 10px; padding-right: 30px; padding-left: 20px;}
select::-ms-expand {display: none;}
label {vertical-align:middle;cursor:pointer;}
input[type=checkbox], input[type=radio] {/*float:left;*/margin:0;margin-right:8px;vertical-align:middle;}
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');}
p {word-break: keep-all;}


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


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

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

.select_wrap {font-size: 0;}
.select_box { position:relative; display: inline-block; min-width:120px;height:40px;margin:2px;padding-right: 30px;}
.select_box select {visibility:hidden;outline:none;}
.select_box a {font-size: 14px;color:#777;}
.select_box .select_title { overflow:hidden; position:absolute; top:0;  left:0; padding:0 10px; width:100%; height:100%; line-height:39px; background:#fff; border:1px solid #ccc; -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;}
.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:39px; left:0; border:1px solid #ccc;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;}


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

.chk_box {display: inline-block;vertical-align: middle;}
.chk_box .chk {display:none;}
.chk_box .chk + label {position: relative;display: inline-block;vertical-align: middle;font-size:14px;line-height:14px; color:#555;}
.chk_box .chk + label:before {content:'';display:inline-block;vertical-align: middle;width:22px;height:22px;border-radius: 4px;background:#f2f2f2;}
.chk_box .chk:checked + label {color:#000;}
.chk_box .chk:checked + label:after {position:absolute;content: '';display: inline-block;width:12px;height:8px; background:url("/resources/user/hyoryeong/images/sub/checked.png") no-repeat 0;top:50%;left:50%;transform:translate(-50%,-50%);}


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

.rdo_btn {display: inline-block;vertical-align: middle;margin: 2px 5px 2px 0;}
.rdo_btn .rdo {display:none;}
.rdo_btn .rdo + label {position: relative;display: inline-block;vertical-align: middle;font-size:14px;line-height:14px; color:#555;}
.rdo_btn .rdo + label:before {content:'';display:inline-block;vertical-align: middle;width:16px;height:16px;border-radius: 50%;border:1px solid #ccc;margin-right: 5px;}
.rdo_btn .rdo:checked + label {color:#000;}
.rdo_btn .rdo:checked + label:before {background-color:#000;border-color:#000; }
.rdo_btn .rdo:checked + label:after {content: '';display: inline-block; position: absolute;left:6px;top:6px;width: 6px;height: 6px;border-radius: 50%; background:#fff;}

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


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

.drop_down_wrap {font-size: 0;}
.drop_down {display: inline-block;position: relative;margin:2px;}
.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: 14px; color:#777;line-height:39px;}
.drop_title a:after {content:'';display:block;position:absolute;right:15px;top:14px;width:6px;height:6px;border:1px solid #000;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:16px;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;padding:15px 0; box-sizing: border-box;}
.drop_sub li a {display: block; font-size: 14px; padding: 6px 10px;color: #777}
.drop_sub li a:hover {color:#000;}
.drop_sub li.active a {color:#000;background:#f8f8f8;}


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

.tabs_head:after {clear:both;display: block;content:'';}
.tab {float: left;cursor: pointer;}
.tabs_head_active {cursor: default;}
.tabs_item {display:none;}
.tabs_content_active {display:block;}



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

/*.clearfix {clear:both;height:40px;}*/
.clearfix {clear:both;}
.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
 
 ********************************************************/

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


/* 20211121 추가 */

/********************************************************
 
 *  Gab
 
 ********************************************************/

.gab10 {width: 100%; height: 10px;}
.gab15 {width: 100%; height: 15px;}
.gab20 {width: 100%; height: 20px;}
.gab25 {width: 100%; height: 25px;}
.gab30 {width: 100%; height: 30px;}
.gab35 {width: 100%; height: 35px;}
.gab40 {width: 100%; height: 40px;}
.gab50 {width: 100%; height: 50px;}
.gab60 {width: 100%; height: 60px;}
.gab70 {width: 100%; height: 70px;}
.gab80 {width: 100%; height: 80px;}
.gab90 {width: 100%; height: 90px;}
.gab100 {width: 100%; height: 100px;}

.gab-w-5 {display: inline-block; vertical-align: middle; height: 1px; width: 5px;}
.gab-w-10 {display: inline-block; vertical-align: middle; height: 1px; width: 10px;}
.gab-w-15 {display: inline-block; vertical-align: middle; height: 1px; width: 15px;}
.gab-w-20 {display: inline-block; vertical-align: middle; height: 1px; width: 20px;}
.gab-w-25 {display: inline-block; vertical-align: middle; height: 1px; width: 25px;}
.gab-w-30 {display: inline-block; vertical-align: middle; height: 1px; width: 30px;}
.gab-w-35 {display: inline-block; vertical-align: middle; height: 1px; width: 35px;}
.gab-w-40 {display: inline-block; vertical-align: middle; height: 1px; width: 40px;}
.gab-w-45 {display: inline-block; vertical-align: middle; height: 1px; width: 45px;}
.gab-w-50 {display: inline-block; vertical-align: middle; height: 1px; width: 50px;}


@media screen and (max-width:1000px){	
	.gab10 {width: 100%; height: 10px;}
	.gab15 {width: 100%; height: 12px;}
	.gab20 {width: 100%; height: 15px;}
	.gab25 {width: 100%; height: 18px;}
	.gab30 {width: 100%; height: 20px;}
	.gab35 {width: 100%; height: 20px;}
	.gab40 {width: 100%; height: 20px;}
	.gab50 {width: 100%; height: 25px;}
	.gab60 {width: 100%; height: 30px;}
	.gab70 {width: 100%; height: 35px;}
	.gab80 {width: 100%; height: 40px;}
	.gab90 {width: 100%; height: 45px;}
	.gab100 {width: 100%; height: 50px;}

	.gab-w-5 {width: 2px;}
	.gab-w-10 {width: 5px;}
	.gab-w-15 {width: 8px;}
	.gab-w-20 {width: 13px;}
	.gab-w-25 {width: 15px;}
	.gab-w-30 {width: 18px;}
	.gab-w-35 {width: 20px;}
	.gab-w-40 {width: 20px;}
	.gab-w-45 {width: 25px;}
	.gab-w-50 {width: 28px;}
}

/********************************************************
 
 *  Margin
 
 ********************************************************/

.mgA0 { margin:0; }

.mgT0 { margin-top:0px }
.mgT5 { margin-top:5px }
.mgT10 { margin-top:10px }
.mgT15 { margin-top:15px }
.mgT20 { margin-top:20px }
.mgT25 { margin-top:25px }
.mgT30 { margin-top:30px }
.mgT35 { margin-top:35px }
.mgT40 { margin-top:40px }
.mgT45 { margin-top:45px }
.mgT50 { margin-top:50px }
.mgT55 { margin-top:55px }
.mgT60 { margin-top:60px }
.mgT65 { margin-top:65px }
.mgT70 { margin-top:70px }

.mgL5 { margin-left:5px }
.mgL10 { margin-left:10px }
.mgL15 { margin-left:15px }
.mgL20 { margin-left:20px }
.mgL25 { margin-left:25px }
.mgL30 { margin-left:30px }
.mgL35 { margin-left:35px }
.mgL40 { margin-left:40px }
.mgL45 { margin-left:45px }
.mgL50 { margin-left:50px }
.mgL55 { margin-left:55px }
.mgL60 { margin-left:60px }
.mgL65 { margin-left:65px }

.mgR1 { margin-right:1px }
.mgR5 { margin-right:5px }
.mgR10 { margin-right:10px }
.mgR15 { margin-right:15px }
.mgR20 { margin-right:20px }
.mgR25 { margin-right:25px }
.mgR30 { margin-right:30px }
.mgR35 { margin-right:35px }
.mgR40 { margin-right:40px }
.mgR45 { margin-right:45px }
.mgR50 { margin-right:50px }
.mgR55 { margin-right:55px }
.mgR60 { margin-right:60px }
.mgR80 { margin-right:80px }

.mgB5 { margin-bottom:5px }
.mgB10 { margin-bottom:10px }
.mgB15 { margin-bottom:15px }
.mgB20 { margin-bottom:20px }
.mgB25 { margin-bottom:25px }
.mgB30 { margin-bottom:30px }
.mgB35 { margin-bottom:35px }
.mgB40 { margin-bottom:40px }
.mgB45 { margin-bottom:45px }
.mgB50 { margin-bottom:50px }
.mgB55 { margin-bottom:55px }
.mgB70 { margin-bottom:70px }


/********************************************************
 
 *  Padding
 
 ********************************************************/

.pdA0{padding:0;}
.pdA5{padding:5px;}
.pdA10{padding:10px;}
.pdA20{padding:20px;}

.pdT0{padding-top:0px}
.pdT5{padding-top:5px}
.pdT6{padding-top:6px}
.pdT10{padding-top:10px}
.pdT15{padding-top:15px}
.pdT20{padding-top:20px}
.pdT25{padding-top:25px}
.pdT30{padding-top:30px}
.pdT35{padding-top:35px}
.pdT40{padding-top:40px}
.pdT45{padding-top:45px}
.pdT50{padding-top:50px}

.pdL5{padding-left:5px}
.pdL10{padding-left:10px}
.pdL15{padding-left:15px}
.pdL20{padding-left:20px}
.pdL25{padding-left:25px}
.pdL30{padding-left:30px}
.pdL35{padding-left:35px}
.pdL40{padding-left:40px}
.pdL45{padding-left:45px}

.pdR5{padding-right:5px}
.pdR10{padding-right:10px}
.pdR15{padding-right:15px}
.pdR20{padding-right:20px}
.pdR25{padding-right:25px}
.pdR30{padding-right:30px}
.pdR35{padding-right:35px}
.pdR40{padding-right:40px}
.pdR45{padding-right:45px}

.pdB5{padding-bottom:5px}
.pdB10{padding-bottom:10px}
.pdB15{padding-bottom:15px}
.pdB20{padding-bottom:20px}
.pdB25{padding-bottom:25px}
.pdB30{padding-bottom:30px}
.pdB35{padding-bottom:35px}
.pdB40{padding-bottom:40px}
.pdB45{padding-bottom:45px}