@charset "utf-8";
/*-------------------------------------------------------------------------------------*
 *  공지사항                                                                             *
 *-------------------------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}
.list_title1 {
	background: #71718433;
	color: #aaa;
	line-height: 44px;
	text-align: center;
	font-weight: 300;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.list_notice1 {
	background: #1c212e;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #97a3c3;
	line-height: 20px;
	padding: 12px 0 12px 0;
	text-align: center;
}

.list_notice2 {
	background: #1c212e;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #ffffff;
	line-height: 20px;
	padding: 12px 0 12px 15px;
}

.list1 {
	background: rgba(0, 0, 0, 0.0);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #97a3c3;
	line-height: 20px;
	padding: 12px 0 12px 0;
	text-align: center;
}

.list2 {
	background: rgba(0, 0, 0, 0.0);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #ffffff;
	line-height: 20px;
	padding: 12px 0 12px 15px;
	cursor: pointer;
}

.write_wrap {
	border-bottom: 1px solid rgba(255, 255, 255, 0.0);
	float: left;
	width: 100%;
	padding: 30px 0 30px 0;
}

.write1 {
	float: left;
	width: 100%;
	padding: 0 30px 0 30px;
}

.write2 {
	float: left;
	width: 100%;
	padding: 10px 30px 0 30px;
	line-height: 28px;
	color: #97a3c3;
}

.write3 {
	width: 100%;
	padding: 20px 30px 0 30px;
	color: #97a3c3;
	display: flex;
	justify-content: center;
}

.write_title_top {
	border-top: 1px solid #97a3c3;
}

.write_title {
	background: rgba(0, 0, 0, 0.0);
	color: #97a3c3;
	padding: 12px 20px 12px 20px;
	width: 200px;
	font-weight: 300;
	font-size: 14px;
}

.write_basic {
	background: rgba(0, 0, 0, 0.0);
	color: #97a3c3;
	padding: 12px 20px 12px 20px;
	text-align: center;
}

.write_basic input {
	margin: 5px 0;
	border-radius: 5px;
}


.view1 {
	background: #1c212e;
	color: #97a3c3;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0 20px 0 20px;
	width: 100%;
	height: 50px;
	line-height: 44px;
	font-weight: 300;
	font-size: 18px;
	letter-spacing: -1pt;
}

.view2 {
	background: rgba(0, 0, 0, 0.0);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 12px 20px 10px 20px;
	width: 100%;
	line-height: 26px;
	min-height: 300px;
	color: #97a3c3;
}

.view_box {
	background: #30374b;
	padding: 5px 8px 3px 8px;
	color: #97a3c3;
	line-height: 12px;
	text-align: center;
	display: inline-block;
	font-size: 12px;
	margin: 0 5px 0 0;
	font-weight: 300;
	border-radius: 0px;
}

.page_wrap {
	float: left;
	width: 100%;
	height: 40px;
	text-align: center;
	margin-top: 10px;
}

.page_wrap ul li {
	display: inline;
	margin: 1px;
}

.page {
	background: #1c212e;
	display: inline-block;
	padding: 12px 17px 12px 17px;
	color: #97a3c3;
	border-radius: 0px;
	cursor: pointer;
}

.pageon {
	background: #00b8ff;
	display: inline-block;
	padding: 12px 17px 12px 17px;
	color: #ffffff;
	font-weight: 300;
	border-radius: 0px;
}

.info_wrap {
	background: black;
	border-bottom: 1px solid rgba(255, 255, 255, 0.0);
	float: left;
	width: 100%;
	padding: 30px 0 30px 0;
	border-radius: 0px;
}

.info1 {
	float: left;
	width: 100%;
	line-height: 28px;
	color: #97a3c3;
	padding: 0 30px 0 30px;
	font-size: 20px;
	font-weight: 300;
	letter-spacing: -1pt;
}

.info2 {
	float: left;
	width: 100%;
	line-height: 28px;
	color: #97a3c3;
	padding: 10px 30px 0 30px;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: -1pt;
}

.info3 {
	float: left;
	width: 100%;
	line-height: 24px;
	color: #97a3c3;
	padding: 10px 30px 0 30px;
	font-size: 14px;
}

.dot {
	display: inline-block;
	padding: 13px 5px 0 0;
}

/*-------------------------------------------------------------------------------------*
 *  버튼                                                                               *
 *-------------------------------------------------------------------------------------*/

.btn1_1 {
	display: inline-block;
	text-align: center;
	border-radius: 3px;
	color: #ffffff;
	font-size: 12px;
	letter-spacing: 0pt;
	font-weight: 300;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}

.btn1_2 {
	display: inline-block;
	text-align: center;
	border-radius: 3px;
	color: #ffffff;
	font-size: 12px;
	letter-spacing: 0pt;
	font-weight: 300;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}

.btn2_1 {
	display: inline-block;
	text-align: center;
	border-radius: 3px;
	color: #ffffff;
	font-size: 12px;
	letter-spacing: 0pt;
	font-weight: 300;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}

.btn2_2 {
	display: inline-block;
	text-align: center;
	border-radius: 3px;
	color: #ffffff;
	font-size: 12px;
	letter-spacing: 0pt;
	font-weight: 300;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}

.btn3_1 {
	display: inline-block;
	text-align: center;
	border-radius: 3px;
	font-size: 18px;
	letter-spacing: 0pt;
	font-weight: 300;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}

.btn3_2 {
	display: inline-block;
	text-align: center;
	border-radius: 3px;
	color: #ffffff;
	font-size: 18px;
	letter-spacing: 0pt;
	font-weight: 300;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px -1px;
}

.btn_wrap_right {
	float: left;
	width: 100%;
	text-align: right;
}

.btn_wrap_right ul li {
	display: inline;
}

.btn_wrap_center {
	float: left;
	width: 100%;
	text-align: center;
}

.btn_wrap_center ul li {
	display: inline;
}

.btn1_1 {
	background: linear-gradient(#06aede 0%, #1d50b6 100%);
	min-width: 80px;
	min-height: 34px;
	padding: 0 15px 0 15px;
	line-height: 34px;
}

.btn1_1:hover {
	background: linear-gradient(-190deg, #07c0f5 0%, #215bce 100%);
	box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 10px -1px;
}

.btn1_2 {
	background: linear-gradient(#525c76 0%, #242a3c 100%);
	min-width: 80px;
	min-height: 34px;
	padding: 0 15px 0 15px;
	line-height: 34px;
}

.btn1_2:hover {
	background: linear-gradient(-190deg, #626e8d 0%, #323a53 100%);
	box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 10px -1px;
}

.btn2_1 {
	background: linear-gradient(#06aede 0%, #1d50b6 100%);
	min-width: 110px;
	height: 40px;
	line-height: 40px;
}

.btn2_1:hover {
	background: linear-gradient(-190deg, #07c0f5 0%, #215bce 100%);
	box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 10px -1px;
}

.btn2_2 {
	background: linear-gradient(#525c76 0%, #242a3c 100%);
	min-width: 110px;
	height: 40px;
	line-height: 40px;
}

.btn2_2:hover {
	background: linear-gradient(-190deg, #626e8d 0%, #323a53 100%);
	box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 10px -1px;
}

.btn3_1 {
	background: linear-gradient(#FDD902 0%, #FDD902 100%);
	min-width: 220px;
	height: 50px;
	line-height: 50px;
}

.btn3_1:hover {
	background: linear-gradient(-190deg, #FDD902 0%, #FDD902 100%);
	box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 10px -1px;
}

.btn3_2 {
	background: linear-gradient(#525c76 0%, #242a3c 100%);
	min-width: 220px;
	height: 50px;
	line-height: 50px;
}

.btn3_2:hover {
	background: linear-gradient(-190deg, #626e8d 0%, #323a53 100%);
	box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 10px -1px;
}

.division1 {
	background: #525c76;
	display: inline-block;
	text-align: center;
	min-width: 100px;
	padding: 6px 8px 6px 8px;
	line-height: 12px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 300;
	border-radius: 0 5px 0 5px;
}

.division2 {
	background: #ffe400;
	display: inline-block;
	text-align: center;
	min-width: 100px;
	padding: 6px 8px 6px 8px;
	line-height: 12px;
	color: #000000;
	font-size: 12px;
	font-weight: 300;
	border-radius: 0 5px 0 5px;
}

.division3 {
	background: linear-gradient(to right, #06aede 0%, #1d50b6 100%);
	display: inline-block;
	text-align: center;
	min-width: 100px;
	padding: 4px 8px 4px 8px;
	line-height: 12px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 300;
	border-radius: 0px;
}

.info_title1 {
	background: #131722;
	border: 1px solid #ffe400;
	display: inline-block;
	text-align: center;
	min-width: 100px;
	padding: 0px 8px 0px 8px;
	height: 36px;
	line-height: 36px;
	color: #ffe400;
	font-size: 16px;
	font-weight: 700;
	border-radius: 0px;
}

.info_title2 {
	background: #131722;
	border: 1px solid #ffffff;
	display: inline-block;
	text-align: center;
	min-width: 100px;
	padding: 0px 8px 0px 8px;
	height: 36px;
	line-height: 36px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	border-radius: 0px;
}

.btn1_1:hover, .btn1_2:hover, .btn2_1:hover, .btn2_2:hover, .btn3_1:hover, .btn3_2:hover {
	animation-name: mouseover03;
	-webkit-animation-name: mouseover03;
	animation-duration: 0.2s;
	-webkit-animation-duration: 0.2s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	visibility: visible !important;
}

@keyframes mouseover03 {
	0% {
		transform: scale(1.04);
	}
	100% {
		transform: scale(1);
	}
}

/*-------------------------------------------------------------------------------------*
 *  탭                                                                                 *
 *-------------------------------------------------------------------------------------*/

.tab_wrap {
	float: left;
	margin: 0 0 0 0;
}


.tab_wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.tab {
	background: black;
	border: 1px solid white;
	/* max-width: 150px; */
	padding-left: 20px;
	padding-right: 20px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	display: inline-block;
	color: #97a3c3;
	font-size: 14px;
	font-weight: 300;
	border-radius: 0px;
}

.tab:hover {
	background: #FDD902;
	border: 1px solid white;
	color: black;
}

.tabon {
	background: #FDD902;
	border: 1px solid white;
	height: 42px;
	line-height: 42px;
	text-align: center;
	display: inline-block;
	color: black !important;
	font-size: 14px;
	font-weight: 400;
	border-radius: 0px;
}

.s_tab_wrap {
	float: left;
	margin: 0 0 0 0;
}

.s_tab_wrap ul li {
	float: left;
	margin: 5px 5px 0 0;
}

.s_tab {
	background: #1c212e;
	border: 1px solid #1c212e;
	width: 130px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	display: inline-block;
	color: #97a3c3;
	font-size: 14px;
	font-weight: 300;
	border-radius: 0px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.s_tab:hover {
	background: #1c212e;
	border: 1px solid #00b8ff;
	color: #00b8ff;
}

.s_tabon {
	background: #1c212e;
	border: 1px solid #00b8ff;
	width: 130px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	display: inline-block;
	color: #00b8ff;
	font-size: 14px;
	font-weight: 300;
	border-radius: 0px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.s_tab_ab {
	display: block;
	position: absolute;
	z-index: 1;
	right: -5px;
	top: -5px;
	min-width: 15px;
	height: 20px;
	line-height: 20px;
	padding: 0 7px;
	background: #00b8ff;
	border: 1px solid #00b8ff;
	color: #ffffff;
	font-weight: 300;
	font-size: 12px;
	border-radius: 100px;
}

/*-------------------------------------------------------------------------------------*
 *  폰트                                                                               *
 *-------------------------------------------------------------------------------------*/

.font01 {
	color: #ffffff;
	font-weight: 300;
}

.font02 {
	color: #000000;
	font-weight: 300;
}

.font03 {
	color: #929292;
}

.font04 {
	color: #bfffcf;
}

.font05 {
	color: #ffe400;
	font-weight: 300;
}

.font06 {
	color: #00b8ff;
	font-weight: 300;
}

.font07 {
	color: #ff7e00;
	font-weight: 300;
}

.font08 {
	color: #7eff00;
	font-weight: 300;
}

.font09 {
	color: #00fffc;
	font-weight: 300;
}

.font10 {
	color: #fee900;
	font-weight: 300;
}

.font11 {
	color: #7eff00;
	font-weight: 300;
}

.font12 {
	color: #00fffc;
	font-weight: 300;
}

.font13 {
	color: #b0977f;
	font-weight: 300;
}

.font14 {
	color: #7eff00;
	font-weight: 300;
	font-size: 18px;
}

.font15 {
	color: #00fffc;
	font-weight: 300;
	font-size: 18px;
}

/*-------------------------------------------------------------------------------------*
 *  인풋                                                                               *
 *-------------------------------------------------------------------------------------*/

.input1 {
	background: #1a1a1a;
	border: 1px solid #0a0c12;
	padding: 4px 0 4px 5px;
	color: white;
	font-size: 14px;
	border-radius: 0px;
	height: 34px;
}

.input2 {
	background-color: #1a1a1a;
	border: 1px solid #0a0c12;
	padding: 4px 0 4px 5px;
	color: #ffffff;
	font-size: 14px;
	border-radius: 0px;
}

.color-danger {
	color: red;
	text-align: center;
}

.text-align-center {
	text-align: center;
}

.margin-auto {
	margin: auto;
}

.justify-content-center {
	display: flex;
	justify-content: center;
}

.flex-wrap {
	flex-wrap: wrap;
}

.swiper-slide, .swiper-slide a img {
	/* min-width: 265px;
	width: 265px!important; */
}

.w-100 {
	width: 100%!important;
}

.h-auto {
	height: auto!important;
}

.notice-div{
	width: 100%; 
	padding:50px 20px; 
	text-align: center;
	transition: 0.5s;
}

.notice-div-unshow{
	padding: 0;
	height: 0;
	opacity: 0;
	transition: 0.1s;
	overflow: hidden;
}

.notice-div div{
	width: 100%;
	text-align: center;
}

.m-r-2{
	margin-right: 2px;
}
@media screen and (max-width: 700px) {
	.write_title_reg {
		text-align: center;
		width: 100%;
		padding-bottom: 0;
	}
	.write_title {
		text-align: center;
		width: 35%;
		/* padding-bottom: 0; */
	}
	
	.input1 {
		text-align: center;
		width: 100%;
	}
	.ant-calendar-picker-input.ant-input {
		text-align: center;
		width: 100%;
	  }
	  
	.width-id-input {
		/* width: calc(100% - 80px); */
	}
	.btn1_1 {
		margin: auto;
	}
	.write3{
		padding: 0;
	}
}

.m_btn1_2 {
	background: linear-gradient(#525c76 0%, #242a3c 100%);
	width: 100%;
	height: 34px;
	line-height: 34px;
}
.m_btn1_2 {
	display: inline-block;
	text-align: center;
	border-radius: 3px;
	color: #ffffff;
	font-size: 12px;
	letter-spacing: 0pt;
	font-weight: 300;
	text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
	box-shadow: rgb(0 0 0 / 30%) 2px 2px 2px -1px;
}
.m_btn1_1 {
	background: linear-gradient(#06aede 0%, #1d50b6 100%);
	width: 100%;
	height: 34px;
	line-height: 34px;
}
.m_btn1_1 {
	display: inline-block;
	text-align: center;
	border-radius: 3px;
	color: #ffffff;
	font-size: 12px;
	letter-spacing: 0pt;
	font-weight: 300;
	text-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
	box-shadow: rgb(0 0 0 / 30%) 2px 2px 2px -1px;
}

.s_tab, .s_tabon {
	width: max-content;
	padding: 0 10px;
	min-width: 130px;
}

/* ul {
	display: block;
	list-style-type: disc;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 40px;
} */


::-webkit-scrollbar {
	width: 2px;
	height: 2px;
}
::-webkit-scrollbar-button, ::-webkit-scrollbar-track {
	display: none;
}
::-webkit-scrollbar-corner {
	display: none;
}
::-webkit-scrollbar-thumb {
	background-color: rgb(54, 59, 96);
	border-radius: 12px;
}
::-webkit-scrollbar-button, ::-webkit-scrollbar-track {
	display: none;
}
::-webkit-scrollbar-track-piece {
	background-color: transparent;
}


@media screen and (min-width: 800px) {
}

@media screen and (max-width: 800px){
	.write_basic a{
		width: 33%;
	}
}

.loading-back{
	position: fixed;
	display: flex;
	background-color: #00000088;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 9999;
 } 

 [data-v-581a52bf] input {
    border-bottom: none !important;
}

.input-control{
    display: flex;
    justify-content: space-around;
    align-items: center;    
}

.radio_container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-size: 14px;
  }
  
  /* Hide the browser's default radio button */
  .radio_container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #eee;
	border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .radio_container:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .radio_container input:checked ~ .checkmark {
	background-color: #2196F3;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .radio_container input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .radio_container .checkmark:after {
	   top: 6px;
	  left: 7px;
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	  background: white;
  }
  
  .level-icon {
	background: linear-gradient(45deg, #F0790B, #FFA447);
	color: white;
	border-radius: 5px;
	border: none;
	width: 50px;
  }

  .level-icon:focus {
	outline: none;
  }

@media (max-width: 991px) {
	.header-level {
		display: none;
	}

	.item_area {
		flex-direction: column !important;
		width: 100%;
	}

	.telegram {
		width: 100% !important;
	}
}

.board {
	height: 350px;
}

.main_board_box_right {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.board_banner.banner_telegram {
	background-image: url(/images/img_banner_telegram.png);
}
  
.main_customer .customer_item .board_banner.banner_telegram_18130 {
	background-image: url(/images/img_banner_telegram.png);
}

.item_area {
	display: flex;
	justify-content: center;
	gap: 15px;
	z-index: 10;
}

.telegram {
	width: 350px;
	height: auto;
}