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

@font-face {
    font-family: 'miracle-font';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}



/* 񃧯 */
html.fixed , body.fixed {overflow:hidden; touch-action:none; -webkit-touch-action:none;}
* {padding:0; margin:0; border:0; box-sizing:border-box; vertical-align:middle; outline:0; font-size:14px; font-weight:400; font-family: 'miracle-font'; -webkit-tap-highlight-color: rgba(0,0,0,0); appearance:none; -webkit-appearance:none; line-height:1.5;}
*:focus {outline:1px dotted #3561ea;}

/* Å×À̺íÅÂ±× */
table {width:100%; border-spacing:0; table-layout:fixed;}
th , td {width:fit-content; vertical-align:middle; text-align:center;}
legend , caption {display:none;}

/* ¸ð¹ÙÀÏ °¡·Î¸ðµå ÆùƮȮ´ë ¹æÁö */
html , body {overflow-x:hidden; max-width:100%; scroll-behavior: smooth;}
body {-webkit-text-size-adjust:none; overflow-x:hidden;}

/* ¹öÆ°ÅÂ±× */
a , button {outline:0; display:inline-block; vertical-align:top; box-sizing:border-box; cursor:pointer;}

/* Çì´õ ÆùÆ® »çÀÌÁî ÃʱâÈ­ */
h1 , h2 , h3 , h4 , h5 , h6 {font-size:100%; font-weight:normal; color:#000;}
h3 {font-size:20px; font-weight:500;}
h4 {font-size:17px; font-weight:500;}

/* À̹ÌÁö ¹× Çʵå¼Â¿¡¼­ º¸´õ Ç¥½Ã ÃʱâÈ­ */
img , fieldset {border:none;}
img , object {vertical-align:top;}

/* ÆûÅÂ±× ÃʱâÈ­ */
textarea {resize:none;}
select {border-radius:0; background:#fff;}

/* ÀÔ·ÂÆû ¿¹½ÃÇ¥½Ã */
::placeholder {color:#ffc331;}

/* ¸®½ºÆ®ÀÇ ½ºÅ¸ÀÏ Á¦°Å */
ul , ol , li {list-style:none;}
em ,address {font-style:normal;}

/* ÅؽºÆ®ÀÇ »ö»ó Ç¥½Ã */
a:link {color:inherit; text-decoration:none;}
a:active {color:inherit; text-decoration:none;}
a:visited {color:inherit; text-decoration:none;}
a:hover {color:none !important; text-decoration:none !important;}

/* ÀÔ·ÂÆû »çÆĸ®¿¡¼­ÀÇ ÃʱâÈ­ */
input , textarea {-webkit-border-radius:0;}
input:-internal-autofill-selected {background:transparent !important;}
input[type="text"], input[type="password"] {
				border: 1px solid #ccc;
				padding-left:10px;
				height:40px;
			}
input::placeholder, textarea::placeholder {color: #777; }

/* Ŭ¸®¾îÇȽº */
.clearfix::after {content:""; clear:both; display:block;}

/* µå·¡±× */
::selection {color:#4273eb; background:#000; border:0;}

/* °­Á¶¾î */
.highlight {color:red !important;}

/* ű×Ç¥½Ã */
.hidden {display:none !important;}

/* ÅؽºÆ®Ç¥½Ã */
.txt-hidden {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

/* ÅؽºÆ®¹æÇâ */
.txt-left {text-align:left;}
.txt-right {text-align:right;}
.txt-center {text-align:center;}

/* À§Ä¡Á¶Àý */
.pull-left {display:inline-block; float:left;}
.pull-right {display:inline-block; float:right;}

/* Æû */

.forpast{
	width:100%;
}

/* ¼¿·ºÆ®¹Ú½º */

select {
	width:fit-content;
	min-width: 150px;
	padding: .5em .5em;
	border:1px solid #9f9f9f;
	font-family: inherit;
	background: url('../images/icon_arrow.png') no-repeat 95% 50%;
	border-radius: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}


/* üũ¹Ú½º */
/* Hide the browser's default checkbox */

			.container_chk {
			  position: relative;
			  padding-left: 35px;
			  margin-bottom: 12px;
			  cursor: pointer;
			  font-size: 22px;
			  -webkit-user-select: none;
			  -moz-user-select: none;
			  -ms-user-select: none;
			  user-select: none;
			}
			/* Create a custom checkbox */
			.checkmark {
			  position: absolute;
			  display:inline-block;
			  top:0;
			  left:0;
			  height: 25px;
			  width: 25px;
			  background-color: #eee;
			  border:1px solid #ccc;
			}

			/* On mouse-over, add a grey background color */
			.container_chk:hover input ~ .checkmark {
			  background-color: #ccc;
			}

			/* When the checkbox is checked, add a blue background */
			.container_chk input:checked ~ .checkmark {
			  background-color: #000;
			}

			/* Create the checkmark/indicator (hidden when not checked) */
			.checkmark:after {
			  content: "";
			  position: absolute;
			  display: none;
			}

			/* Show the checkmark when checked */
			.container_chk input:checked ~ .checkmark:after {
			  display: block;
			}

			/* Style the checkmark/indicator */
			.container_chk .checkmark:after {
			  left: 7px;
			  top: 3px;
			  width: 5px;
			  height: 10px;
			  border: solid white;
			  border-width: 0 3px 3px 0;
			  -webkit-transform: rotate(45deg);
			  -ms-transform: rotate(45deg);
			  transform: rotate(45deg);
			}
			
			/* The container */
			.container_radio {
			  display: inline-block;
			  position: relative;
			  padding-left: 30px;
			  cursor: pointer;
			  font-size: 14px;
			  margin-right:10px;
			  -webkit-user-select: none;
			  -moz-user-select: none;
			  -ms-user-select: none;
			  user-select: none;
			}

			/* Hide the browser's default radio button */
			.container_radio input {
			  position: absolute;
			  opacity: 0;
			  cursor: pointer;
			}

			/* Create a custom radio button */
			.container_radio .checkmark {
			  position: absolute;
			  top: 0;
			  left: 0;
			  height: 18px;
			  width: 18px;
			  background-color: #eee;
			  border-radius: 50%;
			}

			/* On mouse-over, add a grey background color */
			.container_radio:hover input ~ .checkmark {
			  background-color: #ccc;
			}

			/* When the radio button is checked, add a blue background */
			.container_radio input:checked ~ .checkmark {
			  background-color: #000;
			}

			/* Create the indicator (the dot/circle - hidden when not checked) */
			.checkmark_radio:after {
			  content: "";
			  position: absolute;
			  display: none;
			}

			/* Show the indicator (dot/circle) when checked */
			.container_radio input:checked ~ .checkmark:after {
			  display: block;
			}

			/* Style the indicator (dot/circle) */
			.container_radio .checkmark:after {
				top: 5px;
				left: 5px;
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background: white;
			}
			
			
			/* »ó¼¼º¸±â ÆäÀÌÁö UI*/
			
			.detail_board ul{
				display: table;
				width:100%;
				margin-bottom:50px;
				border-top:2px solid #000;
			}
			
			
			.detail_board ul li{
				display: table-row;
				width:100%;
			}
			
			.detail_board ul li div{
				display: table-cell;	
				vertical-align: middle;
				text-align:center;
				
				border-bottom:1px solid #ccccccb0;
			}
			
			.detail_board .likeTableTh {
				width:150px;
				font-weight:bold;
			}
			
			.detail_board .likeTableTd {
				text-align:left;
				padding-left:20px;
				background-color:#fff;
			}
			
			.detail_board .likeTableTd button {
				background-color:#000;
				padding:5px 20px;
				width:fit-content;
				border-radius:15px;
				height:40px;
				color:#fff !important;
			}
			
			.detail_board.order_set div.img-set {
				display:inline-block !important;
				width:180px; height:180px; 
				margin:5px 2px;
				border-bottom:unset;
				border-radius:15px;
				overflow:hidden;
			}
			
			.detail_board.order_set .img-set img{
				width:100%; height:100%;
				object-fit: cover;
			}
			
			/* ¸ÅÃâ³»¿ª Àü¿ë UI*/
			.sales_list .sales_color{
				display:none;
			}
			.sales_list .sales_right{
				display:contents;
			}
			.sales_list .sales_left{
				display:contents;
			}
			.sales_list .sales_btn{
				display:none;
			}
			.sales_list .td_money{
				font-weight:bold;
				color:#345fac;
			}
			
			.sales_list .td_money.repund{
				color:#f05052;
			} /*ȯºÒ*/
			
			
/* °Ô½ÃÆÇ UI */

	.board_list_area ul{
		display: table;
		width:100%;
		border-top:2px solid #000;
	}
	
	
	.board_list_area ul li{
		display: table-row;
		width:100%;
	}
	
	.board_list_area ul li div{
		display: table-cell;	
		vertical-align: middle;
		text-align:center;
		
		
		border-bottom:1px solid #aaa;
	}
	
	.likeTableTd{
		
	}
	
	.likeTableTB{
		margin-top:20px;
	}
		
	.likeTableTr {
		height:45px;
		font-size: 10pt;
	}
	.likeTableTh div{
		background-color:#fff;
		text-align:center;
		font-weight:bold;
	}
	
	.likeTableTB .td_num{
		width: 100px;
		color: #999;
	}
	
	.likeTableTB .td_notice{
		width:fit-content;
		display:inline-block;
		padding:5px 10px;
		background-color:#cc2027;
		border-radius:5px;
		color:#fff;
		font-size:14px !important;
		margin-bottom:5px;
	}
	
	
	.likeTableTB .td_name{
		width: 100px;
	}
	
	.likeTableTB .td_date{
		width: 100px;
	}
	
	.likeTableTB .td_title{
		text-align:left;
	}
	
	.likeTableTB .btnCell{
		width: 130px;
		text-align: center;
	}
	
	.likeTableTB .mobileTh{
		display:none;
	}
	
	.likeTableTB .btn{
		width:98%;
		padding:0 20px;
		color:#fff !important;
		font-size: 9pt;
	}
	
	.page_nation {
		width:100%;
		display:flex;
		margin-top:30px;
		justify-content: center;
	}
	.page_nation .none {
		display:none;
	}
	.page_nation a {
		display:block;
		margin:0 3px;
		border:1px solid #e6e6e6;
		width:28px;
		height:28px;
		line-height:28px;
		text-align:center;
		background-color:#fff;
		font-size:13px;
		color:#999999;
		text-decoration:none;
	}
	.page_nation .arrow {
		border:1px solid #ccc;
	}
	.page_nation .pprev {
		background:#f8f8f8 url('../images/page_pprev.png') no-repeat center center;
		margin-left:0;
	}
	.page_nation .prev {
		background:#f8f8f8 url('../images/page_prev.png') no-repeat center center;
		margin-right:7px;
	}
	.page_nation .next {
		background:#f8f8f8 url('../images/page_next.png') no-repeat center center;
		margin-left:7px;
	}
	.page_nation .nnext {
		background:#f8f8f8 url('../images/page_nnext.png') no-repeat center center;
		margin-right:0;
	}
	.page_nation a.active {
		background-color:#42454c;
		color:#fff;
		border:1px solid #42454c;
	}
	/* °Ô½ÃÆÇ ¹öÆ° CSS*/
			
			.board_btnarea_left{
				display:flex;
				margin-top:5px;
				justify-content: flex-start;
			}
			.board_btnarea_left .btn{
				width:fit-content;
				background:#fff;
				padding:5px 10px;
				border:1px solid #000;
				border-radius:10px;
				margin-right:10px;
				font-weight:600;
			}
			
			

@media (max-width:991px){
	/* °Ô½ÃÆÇ CSS */
	
	.likeTableTB {
		margin-top:5px;
	}
	.likeTableTB .td_name{
		width:fit-content;
	}
	
	.likeTableTB .td_date{
		width:100%;
	}
	
	.likeTableTB .hiddenTh{
		display:none;
	}
	
	.likeTableTB .hiddenCell{
		display:none;
	}
	
	.likeTableTB .mobileTh{
		display:inline-block;
		text-align:left;
		margin-bottom:5px;
	}
	
	.likeTableTB .mobileCell{
		width:100%;
		display:flex;
		flex-direction: column;
	}
	
	.likeTableTB .btn{
		margin: 2px 0;
	}
	

	.board_list_area ul{
		
		border-top:2px solid #cc2027;
		
	}
	.board_list_area ul li{
		display: table-row;
		height:fit-content;
		flex-direction: column;
		width:100%;
		border-bottom:1px solid #aaa;
		
		padding:10px 15px;
	}
	

	.board_list_area ul li div{
		display:table-cell;	
		vertical-align: middle;
		text-align:center;
		border-bottom:0;
	}
	
	.likeTableTB .td_title , .likeTableTB .td_title a{
		font-weight:700;
		font-size:17px !important;
		margin-bottom:5px;
	}
	
	.likeTableTB .td_notice{
		width:fit-content;
		
		background-color:#cc2027;
		border-radius:5px;
		color:#fff;
		font-size:14px !important;
		margin-bottom:5px;
	}
	
	.likeTableTd{
		background-color:#fff;
	}
	
	
	/*¼¼·ÎÇü º¸µå UI*/
	
	.detail_board{
		margin-bottom:30px;
	}
	
	.detail_board ul li div{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.detail_board ul li div input{
		width:100%;
	}
	
	.detail_board ul li div button{
		width:100%;
		height:40px;
	}
	
	.detail_board .likeTableTh{
		border:0;
		height:fit-content;
		padding:10px 0;
		width:100%;
		
		background-color:#f7f8f8;
		
		font-size:18px;
		font-weight:bold;
		justify-content: center;
	}
	
	.detail_board .likeTableTr {
		width:100%;
		height:auto;
	}
	
	.detail_board .likeTableTd {
		height:fit-content;
		padding:5px;
	}
	
	.detail_board .likeTableTd .full{
		width:100%;
	}
	
	
}

/* Çì´õ */
header {width: 100%; position: fixed; color:#fff; z-index: 99;}
header .cnb {background:#00000080; padding:20px 0 10px 0; width:100%; transition:background 0.3s ease, color 0.3s ease;}
header .cnb .guide {max-width:1200px; margin:0 auto;}
header .cnb .h1 {display:inline-block; margin-right:50px; cursor:pointer;}
header .cnb .h1 .logo_o {background-image:url('../images/img_logo_w.png'); width:201px; height:39px;}
header .cnb ul {gap:60px;}
header .cnb ul li {display:inline-block;}
header .cnb ul li a {display:block;}
header .cnb .pull-left ul li a {color:#fff; font-family:'bold'; font-size:18px; position:relative; top:3px;}
header .cnb.fixed {position:fixed; background:#fff;}
header .cnb.fixed .h1 .logo_o {background-image:url('../images/img_logo.png'); width:201px; height:39px;}
header .cnb.fixed .pull-left ul li a {color:#000;}

@media (max-width:1650px){
  header .cnb .guide {max-width:1330px; margin:0 auto;}
  header .cnb h1 {margin-right:30px;}
}
@media (max-width:1400px){
  header .cnb h1 {margin-right:20px;}
}
@media (max-width:1200px){
  header .cnb h1 {margin-right:10px;}
  header .cnb h1 a {font-size:35px;}
  header .cnb .pull-left ul li a {padding:10px;}
}

/* ¸ð¹ÙÀÏ¿ë Ãʱ⠻óÅ´ ¾È º¸ÀÓ */
.mnb {
  display: none;
  position: fixed;
  width: 100%;
  padding: 15px 20px;
  background: #000;
  z-index: 100;
  justify-content: space-between;
  align-items: center;
}
.mnb .logo_o, .snb .logo_o {
  background-image: url('../images/img_logo_w.png');
  width: 150px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
}
.hamburger {
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

/* ½½¶óÀÌµå ¸Þ´º */
.snb {
  position: fixed;
  left: -250px;
  top: 0;
  width: 250px;
  height: 100%;
  background: #111;
  z-index: 200;
  transition: left 0.3s ease;
  padding: 60px 20px;
}
.snb ul li {
  margin-bottom: 20px;
}
.snb ul li a {
  color: #fff;
  font-size: 18px;
  display: block;
}

/* ¸Þ´º ¿­·ÈÀ» ¶§ */
.snb.open {
  left: 0;
}
.menu-backdrop {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 150;
}
.menu-backdrop.show {
  display: block;
}

/* PC ¼û±â°í ¸ð¹ÙÀÏ¿¡¼­¸¸ º¸À̱â */
@media (max-width: 991px) {
  header .cnb {
    display: none;
  }
  .mnb {
    display: flex;
  }
}




/* ǪÅÍ */
footer { padding:40px 0 20px;}

footer .container {max-width:1200px; margin:0 auto; padding:0;}
footer h2 {color:#8a8a8a; width:100%; border-bottom:1px solid #ddd; padding-bottom:30px;}
footer h2 a {color:#8a8a8a; font-size:20px; font-weight:bold; letter-spacing:-1px;}

@media (max-width:1400px){	 
footer .container {padding:0 10px;}
footer .box:first-of-type {width:100%; margin-bottom:50px; border-right:0;}
}
@media (max-width:1200px){	
footer {padding:40px 0;}
footer h2 {margin-bottom:30px;}
footer h2 a {font-size:35px;}
}
@media (max-width:991px){
footer .box {width:100%; padding-right:0;}
footer .box:first-of-type {margin-bottom:30px; border-bottom:1px solid #ccc; padding-bottom:30px;}
}
@media (max-width:767px){
footer {padding:30px 0;}
footer h2 {text-align:center;}
footer h2 a {font-size:30px;}
footer .box:first-of-type ul:first-of-type {width:109%; text-align:center; margin:0 -10px 30px; border:1px solid #eee; border-width:1px 0 0 1px;}
footer .box:first-of-type ul:first-of-type:after {display:block; clear:both; content:"";}
footer .box:first-of-type ul:first-of-type li {width:33.33%; float:left; border:1px solid #eee; border-width:0 1px 1px 0;}
footer .box:first-of-type ul:first-of-type li:nth-of-type(4),
footer .box:first-of-type ul:first-of-type li:nth-of-type(5) {width:50%;}
footer .box:first-of-type ul:first-of-type li a {font-size:14px; padding:10px 0;}
footer .box:first-of-type ul:last-of-type li {text-align:center; font-size:14px;}
footer .box:nth-of-type(2) {padding:0 0 30px; text-align:center;}
footer .box:nth-of-type(2) > * {text-align:center;}
footer .box:nth-of-type(2) sub {font-size:20px;}
footer .box:nth-of-type(2) span {font-size:16px;}
footer .box:nth-of-type(2) strong {font-size:30px;}	
footer .box:last-of-type {text-align:center;} 
footer .box:last-of-type sub {font-size:20px;}
footer .box:last-of-type ul li {text-align:left; padding:0 10px 0 20px;}
footer .box:last-of-type ul li:after {left:10px;}
footer .box:last-of-type ul li a {max-width:100%;}
}