@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: local('Pretendard Variable'), url('/assets/service/fonts/PretendardVariable.woff2') format('woff2-variations');
}
@font-face {
	font-family: 'Pretendard-Black';
	src: url('/assets/service/fonts/Pretendard-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	letter-spacing: -2px;
}
@font-face {
	font-family: 'LeferiBase-Regular';
	src: url('/assets/service/fonts/LeferiBaseType-RegularA.woff') format('woff');
	font-style: normal;
}
@font-face {
    font-family: 'LeferiBase';
    font-weight: 700;
    font-style: normal;
    src: url('/assets/service/fonts/LeferiBaseBold.eot');
    src: url('/assets/service/fonts/LeferiBaseBold.eot?#iefix') format('embedded-opentype'),
        url('/assets/service/fonts/LeferiBaseBold.woff') format('woff'),
        url('/assets/service/fonts/LeferiBaseBold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
	font-family: 'Rubik Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: local('Rubik Variable'), url('/assets/service/fonts/rubik-variablefont-wght.woff') format('woff-variations');
}
@font-face {
	font-family: 'SOYOMapleBold';
	src: url('/assets/service/fonts/soyo-maple-bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}
.f_soyo {font-family: 'SOYOMapleBold' !important;}
.f_rubik {font-family: 'Rubik Variable' !important;}
.f_ptdBL {font-family: 'Pretendard-Black' !important;}
.f_lefB {font-family: 'LeferiBase' !important; font-weight: 700 !important; letter-spacing: -3px;}
.f_lefR {font-family: 'LeferiBase-Regular' !important;}

/* checkbox */
.formGroup input[type=checkbox] + label:after, .formGroup input[type=checkbox] + label:before, .formGroup input[type=checkbox] + label {transition: 0.3s;}
.formGroup input[type=checkbox] {display: none;}
.formGroup input[type=checkbox] + label {position: relative; padding: 6px 10px 6px 30px;}
.formGroup.checkbox-type2 input[type=checkbox] + label:after, .formGroup.checkbox-type2 input[type=checkbox] + label:before {content: ''; display: block; position: absolute; border-radius: 3px; width: 20px; height: 20px; line-height: 20px; background: #fff; top: 15px; left: 10px; transform: translate(-50%, -50%);}
.formGroup.checkbox-type2 input[type=checkbox] + label:after {z-index: 1; box-shadow: 0 0 0 1px #ccc inset, 0 0 0 20px #fff inset, 0 0 0 0 #6278e2 inset;}
.formGroup.checkbox-type2 input[type=checkbox] + label:before {z-index: -1;}
.formGroup.checkbox-type2 input[type=checkbox]:checked + label:after {font: normal normal normal 13.3333333333px FontAwesome; content: ""; text-align: center; color: #fff; line-height: 20px; box-shadow: 0 0 0 1px #6278e2 inset, 0 0 0 0 #fff inset, 0 0 0 20px #6278e2 inset;}
.formGroup.checkbox-type2 input[type=checkbox]:not(:checked):hover + label {color: #6278e2;}
.formGroup.checkbox-type2 input[type=checkbox]:not(:checked):hover + label:after {box-shadow: 0 0 0 2px #6278e2 inset, 0 0 0 16px #fff inset, 0 0 0 20px #6278e2 inset;}
.formGroup.checkbox-type2 input[type=checkbox]:checked + label:before {background: #6278e2; width: 45px; height: 45px; opacity: 0;}
.formGroup.checkbox-type3 input[type=checkbox] + label:after, .formGroup.checkbox-type3 input[type=checkbox] + label:before, .formGroup.checkbox-type3 input[type=checkbox] + label {transition: 0.3s;}
.formGroup.checkbox-type3 input[type=checkbox] {display: none;}
.formGroup.checkbox-type3 input[type=checkbox] + label {position: relative; padding: 6px 10px 6px 30px;}
.formGroup.checkbox-type3 label {position: relative; padding: 6px; border-radius: 5px; display: inline-flex; cursor: pointer; transition: background 0.2s ease; -webkit-tap-highlight-color: transparent; font-size: 16px; color: #474747}
.formGroup.checkbox-type3 label:before {content: " "; position: absolute; top: 6px; left: 0; display: block; width: 20px; height: 20px; background: #fff; border-radius: 5px;}
.formGroup.checkbox-type3 input[type=checkbox] {vertical-align: middle; width: 20px; height: 20px; border-radius: 5px; background: none; border: 0; box-shadow: inset 0 0 0 1px #9f9f9f; box-shadow: inset 0 0 0 1.5px #9f9f9f; appearance: none; padding: 0; margin: 0; transition: box-shadow 150ms cubic-bezier(0.95, 0.15, 0.5, 1.25); pointer-events: none;}
.formGroup.checkbox-type3 input:focus {outline: none;}
.formGroup.checkbox-type3 input[type=checkbox]:checked + label:before {box-shadow: inset 0 0 0 5px #4e6ee3; border: 0;}

/* radio */
.formGroup input[type=radio] + label:after, .formGroup input[type=radio] + label:before, .formGroup input[type=radio] + label {transition: 0.4s;}
.formGroup.radio-type2 input[type=radio] {opacity: 0; z-index: -1; position: absolute; width: auto;}
.formGroup input[type=radio] + label {padding: 6px 6px 6px 30px;}
.formGroup.radio-type2 input[type=radio] + label:after, input[type=radio] + label:before {content: ''; display: block; position: absolute; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background: #fff; top: 10px;  left: 10px; transform: translate(-50%, -50%);}
.formGroup.radio-type2 input[type=radio] + label:after {z-index: 1; box-shadow: 0 0 0 1px #ccc inset, 0 0 0 20px #fff inset, 0 0 0 0 #6278e2 inset;}
.formGroup.radio-type2 input[type=radio] + label:before {z-index: -1;}
.formGroup.radio-type2 input[type=radio]:checked + label:after {box-shadow: 0 0 0 2px #6278e2 inset, 0 0 0 4px #fff inset, 0 0 0 20px #6278e2 inset;}
.formGroup.radio-type2 input[type=radio]:hover + label, .formGroup.radio-type2 input[type=radio]:checked + label {color: #6278e2;}
.formGroup.radio-type2 input[type=radio]:not(:checked):hover + label:after {box-shadow: 0 0 0 2px #6278e2 inset, 0 0 0 16px #fff inset, 0 0 0 20px #6278e2 inset;}
.formGroup.radio-type2 input[type=radio]:checked + label:before {background: #6278e2; width: 45px; height: 45px; opacity: 0;}

/* login input */
.text-type2 input:not([type=radio]):not([type=checkBox]) {position: relative; width: 100%; height: 60px; line-height: 60px; background-color: transparent; font-size: 15px; color: #333;  border: 1px solid #efefef; border-radius: 15px; padding: 13px 20px 0 20px;}
.text-type2 input:focus {line-height: 1.1; padding-top: 20px;}
.text-type2 input ~ .focus-bg {position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: transparent; transition: all .4s; z-index: -1;}
.text-type2 input:focus ~ .focus-bg { transition: all .4s; width: 100%; background-color: rgba(159, 159, 159, 0.05); border-radius: 15px;}
.text-type2 input ~ label {position: absolute; left: 14px; width: 100%; top: 50%; transform: translateY(-50%); font-size: 15px; color: #bbb; transition: all .4s; z-index: -1;}
.text-type2 input:focus ~ label, .text-type2 input.has-content ~ label {top: 16px; left: 20px; font-size: 13px; color: #8a9bee; width:35px ; z-index: 100;}

/* pagination */
.pagination {display: block; text-align: center; margin-top: 50px;}
.pagination:after {display: block; visibility: hidden; clear: both; content: "";} 
.pagination .pc {text-align: center;}
.pagination .mb {display: none;}
.pagination-type1 .pg_page, .pagination-type1 .pg_current {display: inline-block; vertical-align: middle; background: #eee; border: 1px solid #eee;}
.pagination-type1 .pg_page {color: #959595; font-size: 16px; height:40px; line-height: 38px; padding: 0 5px; min-width: 40px; text-decoration: none; border-radius: 4px;}
.pagination-type1 .pg_page:hover {background-color: #fafafa;}
.pagination-type1 .pg_start {text-indent: -999px; overflow: hidden; background: url('/assets/service/img/common/btn_first.png') no-repeat 50% 50% #eee; padding: 0; border: 1px solid #eee;}
.pagination-type1 .pg_prev {text-indent: -999px; overflow: hidden; background: url('/assets/service/img/common/btn_prev.png') no-repeat 50% 50% #eee; padding: 0; border: 1px solid #eee;}
.pagination-type1 .pg_end {text-indent: -999px; overflow: hidden; background: url('/assets/service/img/common/btn_end.png') no-repeat 50% 50% #eee; padding: 0; border: 1px solid #eee;}
.pagination-type1 .pg_next {text-indent: -999px; overflow: hidden; background: url('/assets/service/img/common/btn_next.png') no-repeat 50% 50% #eee; padding: 0; border: 1px solid #eee;}
.pagination-type1 .pg_start:hover, .pagination-type1 .pg_prev:hover, .pagination-type1 .pg_end:hover, .pagination-type1 .pg_next:hover {background-color: #fafafa;}
.pagination-type1 .pg_current {display: inline-block; background: #2874E5; border: 1px solid #2874E5; color: #fff; font-weight: bold; height:40px; line-height: 38px; padding: 0 10px; min-width: 40px; border-radius: 4px;}
.pagination-type1 #page {display: inline-block; width: 160px; height: 40px; vertical-align: middle; border: 0; border-radius: 4px; padding: 6px 15px; line-height: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #333; background: url(/assets/service/img/common/select_arrow_gray.png) no-repeat #eee; background-position: right 15px center !important; font-size: 16px; cursor: pointer;}
@media (max-width: 768px) {
	.pagination .pc {display: none;}	
	.pagination .mb {display: block;}
}

.msg_sound_only, .sound_only {display: inline-block; position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; border: 0; overflow: hidden;}
.lets0 {letter-spacing: 0 !important;}
.d-flex {display: flex;}