@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap');/*font-family: 'Comfortaa', cursive;*/
/* reset */
html:root{border:none} 
html, body{width:100%; height:100%; margin:0; padding:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:none}
html{overflow-y:scroll}
body{min-width:270px; font-size:14px; font-weight:400; line-height:1.5; font-family:'Roboto', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', sans-serif; color:#1e1e1e; word-break:keep-all; word-wrap:break-word; letter-spacing:-0.02em;}
table, pre, input, select, textarea, button{font-size:1em; line-height:1.5; font-family:inherit; color:inherit; word-break:keep-all; word-wrap:break-word}

html, body, article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, 
div, dl, dt, dd, ul, ol, li, p, a, span,
h1, h2, h3, h4, h5, h6, 
form, fieldset, input, label, button, select, textarea, 
table, tbody, thead, th, td, details, pre, address, blockquote,  strong, b, i, em{margin:0; padding:0}
*, *::before, *::after{box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box} 
 

article, aside, details, figcaption, figure, footer, header, hgroup, nav, menu, section{display:block}
h1, h2, h3, h4, h5, h6{font-size:1em; font-weight:400}
img, fieldset{max-width:100%; border:0;}
object, embed, video {max-width:100%;}

a{background:transparent; color:inherit; text-decoration:none; cursor:pointer; vertical-align:top; outline:none}
a:hover{text-decoration:none}
a:focus, img:focus, input:focus, button:focus, textarea:focus{outline:0}
table{border-collapse:collapse; border-spacing:0}
ol, ul, li{list-style:none}

caption{display:none; text-indent:-9999px}
caption:after{display:block; clear:both; content:''}
caption legend{width:0; height:0; line-height:0; overflow:hidden; visibility:hidden; font-size:0}
 
blockquote, q{quotes:none}
blockquote::before, blockquote::after, q::before, q::after{content:''; content:none}
 
hr{display:none}

b, strong{font-weight:500}
b, strong, i{vertical-align:top}
address, caption, cite, code, dfn, em, i, strong, var{margin:0; padding:0; font-style:normal; }

/* reset forms */
legend{position:absolute; left:-99999px}
input{-webkit-border-radius:0; -webkit-appearance:none }
input[type="text"], 
input[type="email"], 
input[type="number"], 
input[type="password"], 
input[type="tel"], 
input[type="search"], 
input[type="button"], 
input[type="submit"]{-webkit-appearance:none}
select{margin:0; padding:0; -webkit-border-radius:0; vertical-align:middle; cursor:pointer; }
button{border:0 none; cursor:pointer; overflow:visible; -webkit-border-radius:0; -webkit-appearance:none}
textarea{display:block; /*하단 여백생성 없애기*/-webkit-border-radius:0; appearance:none; -webkit-appearance:none; -moz-appearance:none; }

/* Forms style*/
  /* input */
input{display:inline-block; border:1px solid #dbdbdb;}
input[type="text"],
input[type="email"], 
input[type="number"], 
input[type="password"], 
input[type="tel"], 
input[type="search"], 
input[type="button"], 
input[type="submit"]{max-width:100%; height:50px; padding:0 10px; border-radius:5px; line-height:48px;}
input:focus{border-color:#252934}
  /* input : placeholder*/
input::placeholder{color:#999; font-weight:300; opacity:1}
input::-webkit-input-placeholder{color:#999; font-weight:300;} 
input:-ms-input-placeholder{color:#999; font-weight:300;}
input:-moz-input-placeholder{color:#999; font-weight:300;}
  /* radio */
.radio_area{position:relative; height:auto; margin-left:40px; padding-left:26px; line-height:18px; cursor:pointer; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
.radio_area:first-of-type{margin-left:0}
.radio_area .radio_tit{display:inline-block; line-height:18px; }
.radio_area input{position:absolute; opacity:0; cursor:pointer}
.radio_area .checkmark{display:inline-block; position:absolute; top:0; left:0; width:18px; height:18px; background:#fff; border:1px solid #ccc; border-radius:50%; vertical-align:top; transition:all 0.3s}
.radio_area .checkmark::after{display:none; position:absolute; top:4px; left:4px; width:10px; height:10px; background:#121212; border-radius:50%; content:"" }

.radio_area:hover input ~ .checkmark{background:#cdcdcd;} 
.radio_area input:checked ~ .checkmark{background:#fff; border-color:#121212} 
.radio_area input:checked ~ .checkmark::after{display:block}
  /* checkbox */
.checkbox_area{display:inline-block; position:relative; padding-left:22px; vertical-align:top; cursor:pointer; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none}
.checkbox_area .checkbox_tit{display:inline-block; line-height:17px; vertical-align:top}
.checkbox_area input{position:absolute; opacity:0; cursor:pointer}
.checkbox_area .checkmark{display:inline-block; position:absolute; top:0; left:0; width:17px; height:17px; border:1px solid #cdcdcd; border-radius:3px; transition:all 0.3s}
.checkbox_area .checkmark::after{display:none; position:absolute; top:1px; left:5px; width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0; background:#ff9019; transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); content:"" }

.checkbox_area:hover input ~ .checkmark{background:#bdbdbd} 
.checkbox_area input:checked ~ .checkmark{background:#ff9019; border-color:#ff9019} 
.checkbox_area input:checked ~ .checkmark::after{display:block}
/* input file */
.input_file_wrap label{display:block; position:absolute; width:80px; height:35px; line-height:33px; border:1px solid #494949; border-radius:5px; text-align:center; cursor:pointer; transition:all 0.3s }
.input_file_wrap label:hover{background:#eaeaea}
.input_file_wrap input[type="file"]{position:absolute; width:0; height:0; padding:0; border:0; overflow:hidden; }
.input_file_wrap .upload_name{display:inline-block; width:100%; height:35px; padding:0 20px 0 100px; border:0; line-height:35px; }
.input_file_wrap .upload_thumb_wrap{margin-top:10px; overflow:hidden; }
.input_file_wrap.preview_view{position:relative;}
  /* text */
textarea{display:block; padding:20px; border:1px solid #ccc; border-radius:85px;}
textarea:focus{border-color:#121212}

textarea::placeholder{color:#999; font-weight:300; opacity:1}
textarea::-webkit-input-placeholder{color:#999; font-weight:300;} 
textarea:-ms-input-placeholder{color:#999; font-weight:300;}
textarea:-moz-input-placeholder{color:#999; font-weight:300;}

/* Chrome, Safari용 스크롤 바*/
::-webkit-scrollbar{width:5px; height:5px; background:#eeeff2}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{display: block; height: 5px}
::-webkit-scrollbar-track{background: #efefef; -webkit-border-radius:10px; border-radius:5px; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .2)}
::-webkit-scrollbar-thumb{height:30%; width:5px; background:rgba(0, 0, 0, .2); -webkit-border-radius: 5px; border-radius: 5px ; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .1)}




/* float */
.fl{float:left}
.fr{float:right}
.fn{float:none}
/* align */
.tac{text-align:center}
.tal{text-align:left}
.tar{text-align:right}
/* font */
.fb{font-weight:700}
.fb500{font-weight:500}

.black{color:#1e1e1e}
.white{color:#fff}
.blue {color:#0072bc}
.red{color:#e9222c}
.gray{color:#7d7d78}
.light_gray{color:#bdbdbd}
/* ul bullet */
.bullet_ol{margin-left:18px;}
.bullet_ol li{padding:2px 0}
.bullet_dot li{position:relative; margin:2px 0; padding-left:15px;}
.bullet_dot li::before{display:block; position:absolute; top:8px; left:3px; width:4px; height:4px; background:#494949; border-radius:50%; content:""}
.bullet_line li{position:relative; margin:2px 0; padding-left:15px;}
.bullet_dot li::before{display:block; position:absolute; top:8px; left:3px; width:4px; height:1px; background:#ababab; content:""}
.bullet_none li{padding:2px 0 2px 5px;}
.bullet_none li::before{display:none}
/* table */
.table_border{width:100%; margin:20px 0; border-top:2px solid #555; border-bottom:1px solid #555}
.table_border caption{height:0; text-indent:-9999px; overflow:hidden}
.table_border th{padding:15px 10px; background:#f1f1f1; border:1px solid #cdcdcd; vertical-align:middle}
.table_border td{padding:10px; border:1px solid #cdcdcd; }
.table tbody th{padding:15px 10px; background:#fafafa; border:1px solid #cdcdcd; vertical-align:middle}
.table_border tfoot th{background:#fdfdfd; color:#013e79}
.table_border tfoot td{background:#fdfdfd; font-weight:700}
.table_border td.item{background:#fdfdfd; font-weight:700; text-align:center}

.table{width:100%; margin:20px 0; border-top:2px solid #555}
.table caption{height:0; text-indent:-9999px; overflow:hidden}
.table th{padding:15px 10px; background:#f1f1f1; border-bottom:1px solid #cdcdcd; vertical-align:middle}
.table td{padding:10px; border-bottom:1px solid #cdcdcd; vertical-align:top;}
.table tbody th{padding:15px 10px; background:#fafafa; border-bottom:1px solid #cdcdcd; vertical-align:middle}
.table tfoot th{background:#f7f7f7; color:#013e79}
.table tfoot td{background:#f7f7f7; font-weight:700; vertical-align:middle}
.table td.item{background:#fdfdfd; font-weight:700; text-align:center}
/* btn */
.btn{display:inline-block; padding:12px 20px; font-size:1em; background:0 none; border:0; border-radius:5px; background:#eaeaea; white-space:nowrap; cursor:pointer}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s;
	-webkit-transition: background-color 9999s ease-out;
	-webkit-box-shadow: 0 0 0 1000px transparent inset ; 
	-webkit-text-fill-color:#1e1e1e;
}

@media all and (max-width:1000px){  
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
		transition: background-color 5000s ease-in-out 0s;
		-webkit-transition: background-color 9999s ease-out;
		-webkit-box-shadow: 0 0 0 1000px transparent inset ; 
		-webkit-text-fill-color:#fff;
	}
}