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


/** color, button, input, table 등 전체 공통으로 가져갈 디자인 스타일 */
:root{
	--color-main : #007269;
	--color-sub : #1175CE;
	--color-sub2 : #008842;
	--color-point : #E90644;

	--color-red : #EB003B;
	--color-yellow : #FFB724;
	--color-green : #008A1E;
	--color-blue : #2768FF;
	--color-navy : #19367a;
	--color-gray : #676767;
	--color-purple : #9c27b0;
	
	--color-main-5 : #F5FFFE;
	--color-main-10 : #D6FFFC;
	--color-main-20 : #A3FFF8;
	--color-main-30 : #70FFF4;
	--color-main-40 : #3DFFF0;
	--color-main-50 : #0AFFEC; 
	--color-main-60 : #00D6C5;
	--color-main-70 : #00A396;
	--color-main-80 : #007269;
	--color-main-90 : #003D38;
	
	--color-sub-5 : #F6FAFE;
	--color-sub-10 : #E3F0FD;
	--color-sub-20 : #B4D8F9;
	--color-sub-30 : #85C0F5;
	--color-sub-40 : #55A8F1;
	--color-sub-50 : #268FED;
	--color-sub-60 : #1175CE;
	--color-sub-70 : #0D5BA0;
	--color-sub-80 : #094071;
	--color-sub-90 : #052542;
	
	--color-sub2-5 : #F5FFFA;
	--color-sub2-10 : #BDFFDD;
	--color-sub2-20 : #8AFFC3;
	--color-sub2-30 : #57FFA8;
	--color-sub2-40 : #24FF8E;
	--color-sub2-50 : #00F074;
	--color-sub2-60 : #00BD5C;
	--color-sub2-70 : #008842;
	--color-sub2-80 : #00572A;
	--color-sub2-90 : #002411;
	
	--color-gray-5 : #f9f9f9;
	--color-gray-10 : #f5f5f5;
	--color-gray-20 : #e5e5e5;
	--color-gray-30 : #dbdbdb;
	--color-gray-40 : #ccc;
	--color-gray-50 : #888;
	--color-gray-60 : #676767;
	--color-gray-70 : #444;
	--color-gray-80 : #222;
	--color-gray-90 : #111;

    --style-font : 'Paperozi';

    --gradient : linear-gradient(135deg, var(--color-main), var(--color-sub));
}


.red{color:var(--color-red) !important;}
.yellow{color:var(--color-yellow) !important;}
.green{color:var(--color-green) !important;}
.blue{color:var(--color-blue) !important;}
.purple{color:var(--color-purple) !important;}
.navy{color:var(--color-navy) !important;}
.gray{color:var(--color-gray)}
.mc{color:var(--color-main);}
.point{color:var(--color-point);}

.bold{font-weight: 600 !important;}

.styleFont{font-family: var(--style-font);}


/*? btn*/
/* 버튼 */
.btn{display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: fit-content; height: 4.8rem; min-width:100px; padding: 0 2.8rem; background-color: var(--color-main);   border: 1px solid var(--color-main); border-radius: .8rem; font-size: 1.9rem; color: #fff; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; transition: 0.3s ease-in-out; text-decoration:none;}
.btn:hover{background-color: var(--color-main-90);  border-color: var(--color-main-90);}
.btn:focus {outline: 2px dashed var(--color-point) !important; 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-60);  border-color: var(--color-main-60);}

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

/* tertiary */
.btn.tertiary {  background-color: #fff;  border: 1px solid #676767;  color: #444;}
.btn.tertiary:hover {  background-color: var(--color-gray-10);}

/* sub */
.btn.sub{background-color:var(--color-sub); border: 1px solid var(--color-sub);}
.btn.sub:hover{background-color:var(--color-sub-70);}

/* sub2 */
.btn.sub2{background-color:var(--color-sub2); border: 1px solid var(--color-sub);}
.btn.sub2:hover{background-color:var(--color-sub2-80);}

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

/* caution */
.btn.temp {background-color: var(--color-sub);  border: 1px solid var(--color-sub);  color: #fff;}
.btn.temp:hover {background-color: var(--color-sub-70);}

/* text */
.btn.text{padding:0 4px; min-width:auto; background:transparent; border:none; color:var(--color-main); }
.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;}

/* special */
.btn.special{background:linear-gradient(90deg, var(--color-sub),var(--color-sub2)); border:0; font-weight:600;}

.btn.sm i{font-size: 1.6rem;}

/* other style */
.btn.style01{background:#f5f5f5; color:var(--color-main); font-weight:600;border:0;}
.btn.style01:hover{background-color:#e9e9e9; }

.btn.icon{padding:0; font-weight:400; min-width:44px;}

.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:.6rem; font-size:1.3rem;}
.btn.sm{height:3.6rem; padding:0 1.2rem; border-radius:.6rem; font-size:1.5rem;}
.btn.md{height:4.2rem; padding:0 1.6rem; border-radius:.8rem; font-size:1.7rem; }
.btn.lg{height:4.8rem; padding:0 2.8rem; border-radius:.8rem; font-size:1.9rem;}
.btn.xlg{height:5.2rem; padding:0 3.2rem; border-radius:.8rem; font-size:1.9rem;}
                    
.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,
    .btn.lg{min-width:auto; height:4.2rem; border-radius:.8rem; font-size:1.7rem; font-weight: 500;}
	.btn .micon{width:16px; height:16px; font-size: 16px;}

}
@media all and (max-width:425px){
	.btn.md{font-size:1.5rem;}
	.btn.sm{font-size: 1.5rem;}
    .btn,
	.btn.lg{font-size: 1.7rem; padding:0 1.6rem;}
    .btn.xlg{height:5.0rem; padding:0 2.5rem; font-size:1.7rem;}
    .btnW{margin-top:40px; gap:4px;}
}

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

/**컨텐츠 안내 문구*/
.infotxt{/*display:inline-block;*/ display:flex; position:relative; padding-left:24px;}
.infotxt::before{position:absolute; content:''; left:0; top:2px; width:20px; height:20px; }
.infotxt.alert{color:#444;}
.infotxt.astRed{color:var(--color-red);}
.infotxt.astBlue{color:var(--color-blue);}
.infotxt.ast{color:var(--color-text2);}
.infotxt.information::before{background:url(../img/common/icon_info.svg) no-repeat 50% 50%; background-size:cover;}
.infotxt.alert::before{background:url(../img/common/icon_alert.svg) no-repeat 50% 50%; background-size:cover;}
.infotxt.astRed::before{background:url(../img/common/icon_red_asterisk.svg) no-repeat 50% 50%; background-size:cover;}
.infotxt.astBlue::before{background:url(../img/common/icon_blue_asterisk.svg) no-repeat 50% 50%; background-size:cover;}
.infotxt.ast::before{background:url(../img/common/icon_asterisk.svg) no-repeat 50% 50%; background-size:cover;}
/**입력창 안내 문구*/
.inpInfo{display:inline-block; position:relative; padding-left:20px; font-size:1.5rem;}
.inpInfo::before{position:absolute; content:''; left:0; top:3px; width:14px; height:14px; }
.inpInfo.error{color:var(--color-red);}
.inpInfo.error::before{background:url(../img/common/inpError.svg) no-repeat 50% 50%; background-size:cover;}
.inpInfo.success{color:var(--color-blue);}
.inpInfo.success::before{background:url(../img/common/inpSucs.svg) no-repeat 50% 50%; background-size:cover;}
.inpInfo.information{color:var(--color-navy);}
.inpInfo.information::before{background:url(../img/common/inpInfo.svg) no-repeat 50% 50%; background-size:cover;}


/*? form*/
input:not([type="radio"], [type="checkbox"]):disabled{border:0; background-color:#e9e9e9; cursor:no-drop !important;}
[type="radio"]:hover,
[type="checkbox"]:hover,
label:hover{cursor: pointer;}

.inpW{display:flex; align-items:center; gap:8px 24px; flex-wrap:wrap;}

.align{display:inline-flex; align-items:center; }

[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;}

/*? To TOP버튼*/
#totop{position:fixed; right:20px; bottom:20px; z-index:30;}
#totop .totop{position:relative; display:inline-block; opacity:0;  width:40px; height:40px; font-weight:400;color:#222; background:#fff; text-align:center; border:2px solid #ccc;  line-height:50px; border-radius:100%; box-shadow:3px 3px 7px rgba(0,0,0,0.2); transition:.3s; text-indent:-9999px; font-size: 0;}
#totop .totop::after{position:absolute; content:''; display:block; top:15px; left:50%; width:10px; height:10px; border-top:2px solid #ccc; border-right:2px solid #ccc; transform:translateX(-50%) rotate(-45deg); transition:.3s;}
#totop .totop:hover,
#totop .totop:focus{border:2px solid #999; background:#f9f9f9; text-decoration:none; box-shadow:3px 3px 7px rgba(0,0,0,0.3);}
#totop .totop:hover::after,
#totop .totop:focus::after{border-top:2px solid #999; border-right:2px solid #999; }
#totop .totop.show{opacity:1; visibility:visible;}

@media all and (max-width:768px){
#totop{right:20px; bottom:20px; }
}

/*? 로딩중입니다.*/
#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);}


/*? 페이지네이션 */
.pagination{position:relative; display:flex; align-items:center; justify-content:center; margin-top:80px; width:100%; gap:8px;}
.pagination a{text-decoration:none; border-radius:6px; transition:.3s;}
.pagination a:hover{background-color:#f9f9f9;}
.pagination .pageNavi{display:inline-flex; align-items:center; justify-content:center; min-width:60px; height:40px; color:#676767; }
.pagination .pageNavi:hover{color:#111;}
.pagination .pageNavi.prev{padding:0 8px 0 4px; }
.pagination .pageNavi.next{padding:0 4px 0 8px; }
.pagination .pageLink{display:flex; align-items:center; justify-content:center; gap:8px;}
.pagination .pageLink a{display:inline-flex; align-items:center; justify-content:center; color:#333; min-width:40px; height:40px;}
.pagination .pageLink a.active{background:var(--color-main); color:#fff; font-weight:500;}
.pagination .pageLink .linkDot{display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; }
.pagination .pageLink .linkDot i{font-size:1.9rem; color:#333; }
.pagination .pageLink .mob{display:none;}

@media all and (max-width:768px){
    .pagination{padding-top:64px;}
    .pagination .pageNavi{position:absolute; top:0; }
    .pagination .pageNavi.prev{left:50%; transform:translateX(-70px);}
    .pagination .pageNavi.next{right:50%; transform:translateX(70px);}
    .pagination .pageLink .web{display:none;}
    .pagination .pageLink .mob{display:inline-flex;}
}
@media all and (max-width:480px){
    .pagination .pageLink{gap:4px;}
    .pagination{padding-top:48px;}
    .pagination .pageLink .linkDot{min-width:24px;}
}



/*? 아코디언 */
.accordion{display:flex; flex-direction:column; gap:24px; margin:40px auto; width:100%;}
.accordion .btnTit{position:relative; z-index:2; display:flex; align-items:center; padding:16px 70px 16px 24px;  min-height:60px; background:#fff; border:2px solid #ccc; border-radius:8px; width:100%; text-align:left; font-size: 1.9rem; transition:.3s;}
.accordion .btnTit i{position:absolute; right:24px;}
.accordion .btnTit.on{font-weight:600; border:2px solid var(--color-main); box-shadow:3px 3px 7px rgba(0,0,0,0.05);}
.accordion .btnTit.on i{transform:rotate(180deg);}
.accordion .box{position:relative; z-index:1; padding:32px 8px; margin-top:-10px;}
.accordion .btnTit + .box{display:none;}
.accordion .btnTit.on + .box{display:block;}
.accordion .box *{line-height:1.5em; word-break:break-all;}
.listW,
.accordion .box .listW{display:flex; flex-direction:column; gap:40px;}
@media all and (max-width:768px){
	.accordion{gap:16px;}
	.accordion .btnTit{font-size: 1.7rem;}
	.accordion .box{padding:24px 0; font-size: 1.5rem;}
}
@media all and (max-width:425px){
	.accordion .btnTit{padding:8px 60px 8px 16px; font-size: 1.5rem; }
	.accordion .btnTit i{right:16px;}
}


/*? 준비중 페이지*/
.readyBox{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:56px 24px; background:#f9f9f9; border-radius:24px; text-align:center;}
.readyBox .loader5 {display: inline-block; position: relative; margin-bottom:16px; animation: loader5 1s infinite alternate-reverse linear; width: 50px; height: 50px; border-radius: 50%; vertical-align: middle; background:linear-gradient(var(--color-main), var(--color-sub));}
.readyBox .loader5:before,
.readyBox .loader5:after {width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0;}
    @keyframes loader5 {
        0% {transform: rotate(0deg); border-radius: 50%; }
        50% {transform: rotate(90deg); border-radius: 0%; }
        100% {transform: rotate(180deg); border-radius: 50%; }
    }
.readyBox .tit{font-size:2.2rem;}
.readyBox .tit em{font-weight:500;}
.readyBox .stxt{font-weight:100;}

@media all and (max-width:768px){
    .readyBox .tit{font-size:1.8rem;}
    .readyBox .stxt{font-size: 1.4rem;}
}


/*? 게시물 없음*/
.noBoard{display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; padding:32px; border-radius:24px; background:#fff; color:#999; border:4px solid #f5f5f5; }
.noBoard img{width:140px;}
@media all and (max-width:768px){
	.noBoard{padding:24px;}
	.noBoard img{width:100px;}
}


/*? 만족도 조사 */
.research {margin-top: 40px; padding: 35px 40px; background: #f5f5f5; border-radius: 12px;}
.research * {box-sizing: border-box;}
.research > p {font-size: 19px; font-weight: 700; word-break: keep-all;}
.research ul {display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 25px 0 15px;}
.research ul li input[type="radio"] {accent-color: #1d2088; margin-right: 5px;}
.research .memo {display: flex; align-items:center; gap: 8px;}
.research .memo input[type="text"] {width: calc(100% - 176px);}

@media (max-width:768px) {
	.research > p {font-size: 18px;}
    .research .btn{padding:0 2.0rem; margin:0 auto; min-width:110px; height:4.0rem; font-size:1.5rem;}
    .research .memo{flex-direction:column; align-items:flex-start; justify-content:center;}
    .research .memo input[type="text"]{width:100%; font-size:1.5rem;}
    .research .memo input[type="text"]::placeholder{font-size:1.5rem;}
}
@media (max-width:425px) {
	.research {padding: 24px;}
	.research ul {gap: 10px 0; flex-direction:column;}
	.research ul li {width: 100%;}
    .research .btn{width:100%;}
}

/*? 담당부서 안내 */
.departmentInfo{display:flex; flex-direction:row; align-items:center; background:#f5f5f5; border-radius:12px; margin-top:80px; padding:24px 40px; }
.departmentInfo > div{display:inline-flex; align-items:center; gap:24px;width:50%;}
.departmentInfo .tit{font-weight:600; }
.departmentInfo .txt{display:inline-flex; align-items:center; gap:8px;}
.departmentInfo .txt .mail{display:inline-flex; align-items:center; justify-content:center; color:#777; text-decoration: none;}
.departmentInfo .txt .mail:hover{color:var(--color-sub);}
@media all and (max-width:768px){
    .departmentInfo{flex-direction:column; align-items:flex-start; gap:8px;}
    .departmentInfo > div{gap:0; width:100%;}
    .departmentInfo .tit{width:130px;}
}
@media all and (max-width:425px){
    .departmentInfo{padding:16px 24px; gap:4px;}
    .departmentInfo .tit{width:100px;}
    .departmentInfo .txt .mail i{font-size:1.9rem;}
}