@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Gugi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
@font-face {
	font-family: 'Figtree';
	src: url('../fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'Pretendard';
	src: url('../fonts/pretendard/PretendardVariable.woff2') format('woff2-variations');
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SUIT';
	src: url('../fonts/SUIT/SUIT-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'Noto_Sans';
	src: url('../fonts/Noto_Sans_KR/NotoSansKR-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

*{font-family: "Pretendard", sans-serif; box-sizing:border-box; margin:0; padding:0; word-break:break-all;}
body{font-weight:400; line-height:1.3;}
ul, li, ol{list-style:none; margin:0; padding:0;}
a{color:inherit; text-decoration:none;}
a:hover{color:inherit; text-decoration:none;}
button,select{border:0; background-color:transparent; border:0; outline:none; cursor:pointer;}
input{border:0; background-color:transparent; border:0; outline:none;}
label{margin:0;}
table{border-spacing:0;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin: 0;}

.emoji{font-family: "Noto Color Emoji", sans-serif !important;}

/* toggle */
.toggle_row{display:flex; border:1px solid #cfcfcf;}
.toggle_row button{flex: 1; text-align:center; border-right: 1px solid #cfcfcf; padding:15px 0; font-size:14px; color:#797979;}
.toggle_row button:last-child{border-right:0;}
.toggle_row button.sel_act{background-color: var(--main_c); color:#fff; font-weight: 600;}
.toggle_row button:not(.sel_act) {transition: 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);}
.toggle_row button:not(.sel_act):hover {color: var(--main_c);}

/* paging */
/* .paging_area{margin-top:40px; width:fit-content; display:flex; justify-content:center;}
.paging_area .paging_ul{display:flex; flex-flow: row wrap; border:1px solid var(--nav_border_c); border-right:0; width:fit-content;}
.paging_area .paging_ul .paging_li{width:50px; height:50px; border-right:1px solid var(--nav_border_c); color: #999;}
.paging_area .paging_ul .paging_li>a{display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:16px;}
.paging_area .paging_ul .paging_li>a:hover{background-color: var(--page_bac_h);}
.paging_area .paging_ul .paging_li.paging_arrow>a{background-color: var(--page_bac_h); font-size: 12px; color:#898989;}
.paging_area .paging_ul .paging_li.paging_arrow:hover>a{opacity:.95;}
.paging_area .paging_ul .paging_li.paging_arrow>a>i{font-size: 24px; color: black;}
.paging_area .paging_ul .paging_li.sel_act>a{background-color: var(--personal_color); color:black;} */

/* 25.03.28 지은 수정 */
.paging_area {display: flex; justify-content: center; margin-block: 20px;}
.trade_area .paging_area * {transition: none;}
.paging_area .paging_ul {display: flex; flex-wrap: wrap; width: fit-content; gap: 8px;}
.paging_area .paging_ul .paging_li {position: relative; width: 30px; height: 30px; color: #333;}
.paging_area .paging_ul .paging_li>a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.paging_area .paging_ul .paging_li.sel_act,
.paging_area .paging_ul .paging_li>a:hover {color: var(--main_c);}
.paging_area .paging_ul .paging_li.paging_arrow>a>i {font-size: 16px;}

/* spinner - 원형 로딩 애니메이션 */
.page_loader {width: 100%;height: 100vh;position: fixed;background: rgba(255,255,255,0);z-index: 1055;top:0;left:0;}
.simple-spinner {width: 30px;height: 30px;position: absolute;left: 50%;top: 50%; transform: translate(-50%, -50%); }
.simple-spinner span {display: block;width: 30px;height: 30px;border: 3px solid transparent;border-radius: 50%;border-right-color: rgba(0, 0, 0, 0.7);animation: spinner-anim 0.8s linear infinite; }
@keyframes spinner-anim {
	from {transform: rotate(0); }
	to {transform: rotate(360deg); }
}

/* 점 ellipsis 로딩 애니메이션*/
.page_loader {width:100%; height:100svh; position:fixed; top:0; left:0; z-index:1055; display:flex; align-items:center; justify-content:center; z-index: 1055;}
.lds_ellipsis {display: inline-block; position: relative; width: 80px; height: 80px;}
.lds_ellipsis div {position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: var(--main_c); animation-timing-function: cubic-bezier(0, 1, 1, 0);}
.lds_ellipsis div:nth-child(1) {left: 8px; animation: lds_ellipsis1 0.6s infinite;}
.lds_ellipsis div:nth-child(2) {left: 8px; animation: lds_ellipsis2 0.6s infinite;}
.lds_ellipsis div:nth-child(3) {left: 32px; animation: lds_ellipsis2 0.6s infinite;}
.lds_ellipsis div:nth-child(4) {left: 56px; animation: lds_ellipsis3 0.6s infinite;}
@keyframes lds_ellipsis1 {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes lds_ellipsis3 {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}
@keyframes lds_ellipsis2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(24px, 0); }
}

/*버튼*/
.btn{font-size:0.8rem;}
.btn-head{font-size:0.8rem; border:0; background: none;}
.btn_m_full{width:100%; background: #f1f3fb; color: #3f4970; border:0; border-radius: 10px; padding: 10px 0px; font-size:1.2rem; opacity:0.8;}
.btn_m_full:hover{opacity:1; transition: opacity 0.2s ease;}

@media (max-width: 768px) {
	.btn{font-size:1rem;}
	.btn-head{font-size:1rem;}
}
