@charset "UTF-8";
/*** 수정일 : 2025년 11월 24일 (작성일 : 2025년 11월 24일)  ***/


/** color, button, input, table 등 전체 공통으로 가져갈 디자인 스타일 */
:root{
	--color-main : #2946A3;
	--color-main-hover : #3358CC;
	--color-sub : #0E1241;
	--color-sub-hover : #151C62;
	--color-point : #E9568A;

	--color-red : #EB003B;
	--color-yellow : #FFB724;
	--color-green : #006E18;
	--color-blue : #1F53CC;
	--color-gray : #666;
	--color-link : #063A79;
	--color-purple : #9c27b0;
	
    --color-main-0 : #F3F5FC;
	--color-main-5 : #EBEEFA;
	--color-main-10 : #D6DEF5;
	--color-main-20 : #AEBCEA;
	--color-main-30 : #859BE0;
	--color-main-40 : #5C79D6;
	--color-main-50 : #3358CC; 
	--color-main-60 : #2946A3; /*default*/
	--color-main-70 : #1F357A;
	--color-main-80 : #152351;
	--color-main-90 : #0A1229;
	
	--color-sub-5 : #f1f1f9;
	--color-sub-10 : #d3d5ed;
	--color-sub-20 : #a7abda;
	--color-sub-30 : #7b82c8;
	--color-sub-40 : #4f58b5;
	--color-sub-50 : #232ea3;
	--color-sub-60 : #1c2582;
	--color-sub-70 : #151c62;
	--color-sub-80 : #0e1241; /*default*/
	--color-sub-90 : #070921;
	
	--color-gray-5 : #f9f9f9;
	--color-gray-10 : #f0f0f0;
	--color-gray-20 : #e5e5e5;
	--color-gray-30 : #dbdbdb;
	--color-gray-40 : #ccc;
	--color-gray-50 : #888;
	--color-gray-60 : #676767;
	--color-gray-70 : #555;
	--color-gray-80 : #222;
	--color-gray-90 : #111;
	--color-gray-100 : #000;

	--bold : 500;
    --btnHS : 32px;
    --btnHM : 48px;
    --btnHL : 56px;
}


.red{color:var(--color-red) !important;}
.yellow{color:var(--color-yellow) !important;}
.green{color:var(--color-green) !important;}
.blue{color:var(--color-blue) !important;}
.gray{color:var(--color-gray)}
.ess{color:var(--color-point); font-size: 1.3rem;}

.bold{font-weight: 600;}

@media all and (max-width:768px){
    :root{
        --btnHM : 40px;
		--btnHL : 48px;
    }
}

@media all and (max-width:425px){

}


/*? btn*/
/* 버튼 */
.btn{display: inline-flex; align-items: center;justify-content: center; gap: 0.8rem; width: auto; height: 5.6rem; min-width:140px; padding: 0 2rem; background-color: var(--color-main);   border: 1px solid var(--color-main); border-radius: 1.6rem; font-size: 1.9rem; color: #fff; font-weight: 400; line-height: 1; cursor: pointer; white-space: nowrap;   transition: 0.3s ease-in-out;}
.btn:hover{background-color: var(--color-main-hover);  border-color: var(--color-main-hover);}
.btn:focus {  outline: 3px dashed #00CBC1; transition: none;}
.btn[disabled] {  background-color: #e5e5e5 !important;  border-color: #e5e5e5 !important;  color: #676767 !important; cursor:not-allowed !important; text-decoration:none !important;}
.btn[disabled]:focus{outline:none !important; }

/* primary */
.btn.primary {  background-color: var(--color-main);  border: 1px solid var(--color-main);  color: #fff;}
.btn.primary:hover {  background-color: var(--color-main-hover);  border-color: var(--color-main-hover);}

/* secondary */
.btn.secondary {  background-color: #fff;  border: 1px solid var(--color-main);  color: var(--color-main-60);}
.btn.secondary:hover {  background-color: var(--color-main-5);}
.btn.secondary:focus {  outline: 3px dashed #00CBC1;}

/* tertiary */
.btn.tertiary {  background-color: #fff;  border: 1px solid #676767;  color: #676767;}
.btn.tertiary:hover {  background-color: var(--color-gray-5);}
.btn.tertiary:focus {  outline: 3px dashed #00CBC1;}

/* text */
.btn.text{padding:0 4px; min-width:auto; background:transparent; border:none; color:#246BEB; }
.btn.text.num{color:#0B0E64;}
.btn.text:hover{text-decoration: underline;}
.btn.text.tertiary{color:#111; }
.btn.text.tertiary:hover{background-color:transparent;}
.btn.text.tertiary.gray{color:#666; font-weight:400;}

.btn.icon{padding:0; font-weight:400; min-width:40px; border-radius:4px;}

.btn.green{background:#fff; border:1px solid var(--color-green); color:var(--color-green);}
.btn.green:hover{background-color:#f4fffc;}
.btn.blue{background:#fff; border:1px solid var(--color-blue); color:var(--color-blue);}
.btn.blue:hover{background-color:#f3f9ff;}
.btn.red{background:#fff; border:1px solid var(--color-red); color:var(--color-red);}
.btn.red:hover{background-color:#fff6f7;}
.btn.yellow{background:#fff; border:1px solid var(--color-yellow); color:var(--color-yellow);}
.btn.yellow:hover{background-color:#fff4f0;}

.btn.xsm{height:3.0rem; padding:0 1rem; border-radius:.8rem; font-size:1.3rem; min-width:auto; font-weight: 400;}
.btn.sm{height:3.4rem; padding:0 1.6rem; border-radius:.8rem; font-size:1.5rem; min-width:auto; font-weight:400;}
.btn.md{height:4.0rem; padding:1.6rem; border-radius:1.0rem; font-size:1.7rem; }
.btn.lg{height:5.6rem; padding:0 2rem; border-radius:1.6rem; font-size:1.9rem;}
.btn.xlg{height:6.4rem; padding:0 2.4rem; border-radius:1.6rem; font-size:1.9rem;}

.btn.sm i{font-size:18px; width:18px; height:18px;}

.btn[class*=ico-]::after{display:inline-flex; content:''; width:2.4rem; height:2.4rem; background-repeat:no-repeat; background-size:contain;}

.btn.block{width:100%;}

/*? 버튼 묶음*/
.btnW{position:relative; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px; width:100%; margin-top: 40px;}
.btnW div{display:inline-flex; align-items:center; gap:4px;}
.btnW.left{justify-content:flex-start;}
.btnW.center{justify-content:center;}
.btnW.right{justify-content:flex-end;}


@media all and (max-width:768px){
    .btnW{margin-top:56px; justify-content:center;}
    .btn{min-width:100px; height:4.8rem; border-radius:12px; font-size:1.7rem; font-weight: 500;}
	.btn .micon{width:16px; height:16px; font-size: 16px;}
}
@media all and (max-width:425px){
    .btn,
	.btn.md{font-size:1.5rem; min-width:auto;}
	.btn.sm{font-size: 1.3rem;}
	.btn.lg{font-size: 1.7rem;}
    .btnW{margin-top:40px; gap:4px;}
}

.btn:has(.micon):hover{text-decoration: none;}

/*? form*/
*::placeholder{font-size:1.4rem; color:#676767;}

[type="radio"]:hover,
[type="checkbox"]:hover,
label:hover{cursor: pointer;}

[type="radio"]{position:relative; margin-right:8px; vertical-align: middle;  appearance: none;  border: 2px solid #999;  border-radius: 50%;  width: 16px;  height: 16px;}
[type="radio"]::before{content:''; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:8px; height:8px; border-radius:100%; background: var(--color-main); opacity:0; transition:.3s;}
[type="radio"]:checked{border:2px solid var(--color-main);}
[type="radio"]:checked::before{opacity:1;}
[type="radio"]:hover::after{opacity:1;}
[type="radio"]:disabled {border-color:#dbdbdb; cursor: not-allowed;}
[type="radio"]:disabled::before{background:#dbdbdb; }
[type="radio"]:disabled:hover::after{display:none;}

[type="checkbox"]{position:relative; margin-right:8px; appearance: none; vertical-align:middle; border:2px solid #999; border-radius:2px; width:16px; height:16px;}
[type="checkbox"]::before{content:''; display:block; position:absolute; left:3px; top:0; transform:rotate(45deg); width:4px; height:7px; border-right:2px solid #fff; border-bottom:2px solid #fff; opacity:0; transition:.3s;}
[type="checkbox"]:checked{background: var(--color-main); border:2px solid var(--color-main);}
[type="checkbox"]:checked::before{opacity:1;}
[type="checkbox"]:hover::after{opacity:1;}
[type="checkbox"]:disabled {border-color:#dbdbdb; cursor: not-allowed;}
[type="checkbox"]:disabled:hover::after{display:none;}

textarea{padding:16px; max-width:100%; width:100%; border:1px solid #dbdbdb; border-radius:8px; min-height:180px;}


/*? 로딩중입니다.*/
#loader {position:fixed; display:none; top:0;left:0;width:100%;height:100%;z-index:9999;background:rgba(0,0,0,0.8);}
#loader .spinner-box {display:flex; justify-content:center; position:relative; margin:0 auto; margin-top:200px; padding-top:70px;}
#loader .configure-border-1 {position:absolute; top:0; width: 60px; height: 60px; padding: 3px;  background: var(--color-main); border-radius:13px; animation: configure-clockwise 3s ease-in-out 0s infinite alternate;}
#loader .configure-border-2 {position:absolute; top:0; width: 60px; height: 60px; padding: 3px; background: var(--color-point); transform: rotate(45deg); border-radius:13px; animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;}
#loader .configure-core {width: 100%; height: 100%; background-color: #1d2630; border-radius:10px; }
#loader .txt{margin-top:20px; text-align:center; color:#fff; font-size: 14px;}
#loader .notice{position:absolute; left:50%; bottom:-40px; transform:translateX(-50%); color:#fff; white-space:nowrap; text-align:center;}

	@keyframes configure-clockwise {
	0% {transform: rotate(0) ;}
	25% {transform: rotate(90deg);}
	50% {transform: rotate(180deg);}
	75% {transform: rotate(270deg);}
	100% {transform: rotate(360deg);}
	}

	@keyframes configure-xclockwise {
	0% {transform: rotate(45deg);}
	25% {transform: rotate(-45deg);}
	50% {transform: rotate(-135deg);}
	75% {transform: rotate(-225deg);}
	100% {transform: rotate(-315deg);}
	}

/*? skip_navigation*/
#skip_navigation{z-index:9999; position:absolute; left:0; top:0; width:100%; }
#skip_navigation *{list-style:none; margin:0; padding:0; }
#skip_navigation a{display:block; width:0; height:0; color:#fff82e; white-space:nowrap; text-align:center; background:var(--color-main); border:0; border-radius:0 0 10px 10px; overflow:hidden;}
#skip_navigation a h2{font-size: 15px;}
#skip_navigation a:focus,
#skip_navigation a:active{display:block; margin:0 auto; padding:15px; text-align:center; text-decoration:underline; width:200px; height:auto;  font-size: 16px;  box-shadow:7px 15px 15px -7px rgba(0,0,0,0.2);}