@charset "UTF-8";

/* Reset */
 * {outline:0 !important; box-sizing: border-box;}
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
html, body{position: relative; width:100%; max-width: 100%; overflow-x: hidden; scroll-behavior: smooth;}
html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); scroll-behavior: smooth; overflow-y: scroll;}
body{width:100%; background:#fff; min-width:320px; -webkit-text-size-adjust:none;word-wrap:break-word; word-break:break-all;}
body,input,select,textarea,button {border:none;font-size:12px; font-family:'Noto Sans KR', sans-serif;color:#727272;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset{border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle; background: transparent;}
.hide,caption,legend{line-height:0;font-size:1px;overflow:hidden;}
hr{display:none;}
main,header,section,nav,footer,aside,article,figure{display:block;}
a{color:#000;text-decoration:none;}
 
/* Form */
textarea { border:1px solid #dbdbdb;}
select { height:32px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff;border-radius: 5px;}
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
input[type=date],textarea {width:100%; height:30px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff; text-indent:20px; border-radius: 5px; transition: all 0.5s; vertical-align:middle;}
input::-webkit-input-placeholder{color:#b5b5b5; font-size:12px; line-height:100%;}
textarea { padding:5px 0;}
select:focus,
textarea:focus,
input:focus { border: 1px solid #727272;}

input[type=tel][readonly],
input[type=text][readonly],
input[type=password][readonly],
input[type=email][readonly], 
input[type=search][readonly], 
input[type=tel][disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=email][disabled]{background:#eaeaea; border-color:#c0c0c0; color:#666; -webkit-appearance:none;font-size:12px;}
textarea[readonly],
textarea[disabled]{padding:11px; font-size:16px; color:#666; font-weight:normal; line-height:140%; height:78px; background:#eaeaea;border:1px solid #c0c0c0;}

.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}



/*//////////////// header ////////////////*/
#content {
	font-family: 'Poppins', 'Noto Sans KR', sans-serif;;
}
.header-in {
	width:90%;
	margin: 0 auto;
	padding: 50px 0 30px;
}
.logo {
	float:left;
}
.util {
	float:right;
	font-size:0;
}
.util li {
	display: inline-block;
}
.util li > a {
	font-size:16px;
	color:#000;
	margin-left: 50px;
}
.header-in:after {
	content:"";
	display: block;
	clear: both;
}
.m-menu {
	display:none;
	z-index: 2;
}
.m-util {
	padding: 60px;
}
.m-util a {
	display: block;
	padding: 10px 0 30px;
	font-size: 42px;
	font-weight: bold;
	color: #fff;
}
.menu {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 0;
  max-width: 0;
  transition: 0.5s ease;
  z-index: 1;
  background-color: #000;
}
.burger-icon {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  z-index: 2;
  padding: 8px 0;
  top: 44px;
  right: 25px;
  user-select: none;
  width: auto;
  margin: 0;
}
.burger-icon .burger-sticks {
  background: #000;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 28px;
}
.burger-icon .burger-sticks:before,
.burger-icon .burger-sticks:after {
  background: #000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
.burger-icon .burger-sticks:before {
  top: 8px;
}
.burger-icon .burger-sticks:after {
  top: -8px;
}
.burger-check {
  display: none;
}
.burger-check:checked~.menu {
  max-width: 100%;
  width: 100%;
}
.burger-check:checked~.burger-icon .burger-sticks {
  background: transparent;
}
.burger-check:checked~.burger-icon .burger-sticks:before {
  transform: rotate(-45deg);
  background: #fff;
}
.burger-check:checked~.burger-icon .burger-sticks:after {
  transform: rotate(45deg);
  background: #fff;
}
.burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before,
.burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after {
  top: 0;
}
/*//////////////// header ////////////////*/


/*//////////////// footer ////////////////*/
.footer {
	position: relative;
}
.footer small {
	display: block;
	padding:60px 0;
	font-size:14px;
	color:#a7a7a7 ;
	text-align: center;	
}
.go-top {
	width: 40px;
	height:40px;
	position: fixed;
	right: 20px;
	bottom: 60px;
	background:#fff;
	text-align:center;
	border:1px solid #ccc;
	z-index:0;
	cursor:pointer;
}
.go-top img {
	transform:rotate(-90deg);
	margin-top: 10px;
}
.go-top:hover {
	box-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.1);
}
/*//////////////// footer ////////////////*/



/*//////////////// 다크모드 ////////////////*/
body.dark-mode {
	background: #333;
}
body.dark-mode a, h1 {
	color: #fff;
}  
body.dark-mode .menu, body.dark-mode .burger-icon .burger-sticks, body.dark-mode .burger-icon .burger-sticks:before, body.dark-mode .burger-icon .burger-sticks:after {
	background: #fff;
}
body.dark-mode .burger-check:checked~.burger-icon .burger-sticks:before, body.dark-mode .burger-check:checked~.burger-icon .burger-sticks:after {
	background: #333;
}
body.dark-mode .m-util a {
	color: #333;
}
body.dark-mode .line-text {
	color: #4c4c4c;
	-webkit-text-stroke: 1px #4c4c4c;
}
body.dark-mode .list li h6 {
	color: #999;
}
/*//////////////// 다크모드 ////////////////*/



@media all and (max-width:876px){
	.util {
		display: none;
	}
	.m-menu, .m-menu .util, .m-menu .util li {
		display: block;
	}
	.m-menu .util li {
		font-size: 30px;
		font-weight: 700;
		padding: 15px 20px;
	}
}



@media all and (max-width:540px){
	.header-in {
		padding: 30px 0 ;
	}
	.logo img {
		width:160px;
	}
	.m-menu {
		display: block;
	}
	.util {
		display: none;
	}
	.m-util {
		padding: 100px 30px;
	}
	.footer small {
		font-size: 12px;
	}
}