@charset "utf-8";
/* CSS Document */

/*텍스트*/
.txt-small{ font-size: 0.8em; color:rgba(0, 0, 0, 0.5)}
.txt-large{ font-size: 1.1em; color:black; font-weight: 500; }
.gray{ color:#777; }
.gray-bold{ color:#777; font-weight:bold; }
.gray2{ color:rgba(0, 0, 0, 0.2); }
.green{ color:#9ce400; }
.green-bold{ color:#9ce400; font-weight:bold; }
.darkgreen{ color:#62C005; }
.darkgreen-bold{ color:#62C005; font-weight:bold; }
.blue{ color:#5969f7; }
.blue-bold{ color:#5969f7; font-weight:bold; }
.red{ color:red; }
.red-bold{ color:re; font-weight:bold; }
.blueviolet{ color:blueviolet; }
.blueviolet-bold{ color:blueviolet; font-weight:bold; }
.yellow{ color:#FFC200; }
.yellow-bold{ color:#FFC200; font-weight:bold; }
.aqua{color:aqua}
.aqua-bold{ color:aqua; font-weight:bold; }
.cut-txt{ display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: text-bottom; }
.txt-desc{ font-size: 0.95em; font-weight: 300; }


/* 버튼 */
.btn-box{
    --btn-bg:black;
    display: inline-flex; align-items: center; /* a 태그를 위해 반드시 사용 */
    position:relative; text-align:left; padding-left:1em; padding-right: 2em; 
    border:1px solid; min-height: 2em; min-width:90px; overflow:hidden; font-weight: 500;
    transition:all 0.3s ease-out; z-index:1; color:var(--btn-bg);
}
.btn-box::before{
    content:''; position:absolute; display:block; width:140%; left:-140%; top:-1px; bottom: -1px;
    background-color:var(--btn-bg); transform-origin:0% -50%; transform:skewX(-20deg); 
    transition:left 0.3s cubic-bezier(.57,.21,.69,1.25); z-index:-1
}
.btn-box:hover{ color:white; border-color: var(--btn-bg); }
.btn-box:hover:before { left:-2% }
.btn-box.box-color-var{ border-color: var(--btn-bg); }

.box-icon-arrowleft::after{ content: '\2190'; position: absolute; right: 0.5em; font-size: 1em; font-weight: 200; }
.box-icon-arrowup::after{ content: '\2191'; position: absolute; right: 0.5em; font-size: 1em; font-weight: 200; }
.box-icon-arrowright::after{ content: '\2192'; position: absolute; right: 0.5em; font-size: 1em; font-weight: 200; }
.box-icon-arrowdonw::after{ content: '\2193'; position: absolute; right: 0.5em; font-size: 1em; font-weight: 200; }
.box-icon-retrun::after{ content: '\21BA'; position: absolute; right: 0.5em; font-size: 1em; font-weight: 200; }
.box-icon-cancle::after{ content: '\00D7'; position: absolute; right: 0.5em; font-size: 1em; font-weight: 200; }

.btn-bgrbox{
    --btn-bg:#000;
    display: inline-flex; align-items: center; /* a 태그를 위해 반드시 사용 */
    justify-content:center; border:1px solid rgba(0, 0, 0, 0.2); border-radius: 3px;
    min-height: 2em; overflow:hidden; font-weight: 500; padding-left: 1em; padding-right: 1em;
    background: linear-gradient(#fff, #f5f5f5);
    transition:all 0.3s ease-out;
}
.btn-bgrbox:hover{ background: var(--btn-bg); color:white; border-color: var(--btn-bg);}
.btn-bgrbox.bg-white{ background:black; color:white; }
.btn-bgrbox.bg-white:hover{ background: var(--btn-bg); color:unset; border-color: rgba(0, 0, 0, 0.2);}
.btn-bgrbox.bg-main{ background:var(--main-color); color:white; border-color: var(--main-dark-color); }
.btn-bgrbox.bg-main:hover{ background: white; color:unset; border-color: rgba(0, 0, 0, 0.2);}

.btn-bgrbox.bgcset{ background: var(--btn-bg); border-color: var(--btn-bg); color:rgba(255, 255, 255, 1); }
.btn-bgrbox.bgcset:hover{ color: unset; background: white; border-color: rgba(0, 0, 0, 0.2); }

.btn-rbox{
    --btn-bg:#000;
    display: inline-flex; align-items: center; /* a 태그를 위해 반드시 사용 */
    justify-content:center; border:1px solid var(--btn-bg); color:var(--btn-bg); border-radius: 30px;
    min-height: 2em; overflow:hidden; font-weight: 500; padding-left: 0.5rem; padding-right: 0.5rem;
    transition:all 0.3s ease-out;
}
.btn-rbox:hover{ background: var(--btn-bg); color:white; border-color: var(--btn-bg);}

/* btn-skew 적용시 공백문자   반드시 필요 */
.btn-skew{ 
    position: relative; display: inline-block; width: fit-content; font-size: 1.3em; line-height: 2.5em; 
    transform:skewX(30deg); background: rgba(0, 0, 0, 0.5); top:0; left:0%; overflow: hidden;
}
.btn-skew>span{ 
    position: absolute; z-index: 1; left: 0; top: 0; width: 100%; display: block; transform: skewX(-30deg);
}
.btn-skew::before{
    content: ''; position: absolute; display: block; width: 100%; height: 100%; top:0; left:-110%;
    background: rgba(0, 0, 0, 0.3); transform:scale(1.1); transition:all 0.3s ease-out;
}
.btn-skew:hover::before{ left:0%; }

/* 둥근 버튼 */
*:has(>.btn-circle){ padding: 1em 0; }
.btn-circle{
    position: relative; display:flex; margin: 1rem auto; border-radius: 50%; background: var(--main-color); color:white; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: 500; width: 120px; height: 120px;
}
.btn-circle::before{
    content: ""; display: block; width: 110%; height: 110%; border:8px solid var(--main-color); border-radius: 50%; position: absolute; opacity: 0.1;
}
.btn-circle:hover::before{ animation: btn-circle-ani 1s ease infinite; animation-delay: 0s; }
@keyframes btn-circle-ani{ 
    0% { width: 100%; height: 100%; opacity: 0; }
    50% { opacity: 0.3; }
    100% { width: 120%; height: 120%; opacity: 0; }
}


/*색선택 변경 반드시 설정된 버튼 최하단에 있어야함*/
.bg-cyon{ --btn-bg:#5BDEE2; }
.bg-green{--btn-bg:#9ce400; }
.bg-darkgreen{--btn-bg:#02ad9f; }
.bg-blue{ --btn-bg: #5969f7; }
.bg-orange{ --btn-bg: #f76c2c; }
.bg-blueviolet{ --btn-bg: blueviolet;  }
.bg-dtgblue{ --btn-bg: #363B4D; }
.bg-white{ --btn-bg: white; }

.tab{ display: flex; justify-content: space-between; border-bottom: 2px solid var(--main-color); margin:1em 0em; font-size: 1.1em; }
.tab>a{ 
    border:1px solid rgba(0, 0, 0, 0.1); border-radius: 10px 10px 0 0;  box-sizing: border-box; position: relative; top:2px; flex: 1 1 auto; padding: 0.8em 0em; text-align: center;
}
.tab>a.tabon{ 
    border-width: 2px; border-color: var(--main-color); border-bottom-color: white; 
    color:var(--main-color); font-weight: 500;
}
.nav-tab{ position: relative; padding-bottom: 2rem; }
.nav-tab::before{ 
    content: ""; display: block; box-sizing: border-box; width: 100%;  z-index: -1;
    border-bottom: 2px solid var(--main-color); position: absolute; height: 100%; bottom:2rem; 
}
.nav-tab>.tab{ width: var(--fullwidth); margin:0 auto; }

/* 단락 */
.p-left-asterisk{ padding: 0em 0em 0.5em 1.2em; text-indent: -1.2em;}
.p-left-asterisk::before{ content: '※'; width: 1.2em; display: inline-block; text-indent: 0em; }
.p-left-warning{ padding-left:1.5em; text-indent: -1.5em;}
.p-left-warning::before{ 
    content: 'warning'; width: 1.5em; display: inline-block; text-indent: 0em;
    font-family: "Material Icons"; font-size: 1em; color:#FFC200; vertical-align: middle; transform: scale(1.2);
}
.p-left-dash{ display: list-item; margin-left: 10px; padding: 3px 0 5px 5px; }
.p-left-dash::marker{ content: '\2013'; }

.box-state{ 
    display: inline-flex; color:white; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px; 
    min-width: 20px; text-align: center; justify-content: center; align-items: center; height: 100%;
}
.state-1, .formul>li select.state-1 { background-color: #3998C0; }
.state-2, .formul>li select.state-2 { background-color: rgba(0, 0, 0, 0.3); }
.state-3, .formul>li select.state-3 { background-color: #DA0808 }
.state-4, .formul>li select.state-4 { background-color: #FFC600 }
.state-5, .formul>li select.state-5 { background-color: #A5C04D }


/*박스,블럭*/
.div-indiv>div:not(.box-download){ padding: 2em 0em;  }
.div-indiv>div:not(:last-child){ border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.div-indiv>div:first-child{ padding-top: 1em; }
.div-indiv>div>h1{ font-size: 1.4rem; color:black; font-weight: 500; padding-bottom: 1rem; }
.div-indiv>div>h1::before{
    content:''; display:inline-block; width:8px; height:8px; margin:-5px 10px auto auto; vertical-align:middle;
	border-right:4px solid var(--main-color); border-top:4px solid var(--main-color); transform:rotate(45deg);
}
.div-indiv>div>h2{ font-size: 1.15rem; font-weight: 500; padding: 1rem 0 0.5rem 0; }
.div-indiv>div>h2::before{
    content:''; display:inline-block; width:8px; height:8px; background-color: var(--main-color); 
    border-radius: 2px; margin-right: 0.5em; vertical-align: 5px;
}
.div-indiv>div>h1+h2{ padding-top: 1rem;}
.div-indiv>div ul, .div-indiv>div ol{ padding-inline-start:1.7rem;  }
.div-indiv>div>h2~*:not(h2){margin-left: 1rem;}
.div-indiv> :where(div>h2~ul, div>h2~ol){ margin-top:0; }
.div-indiv :where(div>h1+ul:last-child, div>h1+ol:last-child){ margin-top: 0;}
.div-indiv :where(div>ul:last-child, div>ol:last-child){ margin-bottom: 0;}
.div-indiv>div li{ padding: 5px 0;}

.block-gray{ background-color: rgba(0, 0, 0, 0.03); padding: 1em; }
.block-gray>h1{ font-size: 1.1em; font-weight: 500; padding:0.5em 0em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.bdr-5px-color{ --bdr-color:black; border-width: 5px; border:5px solid var(--bdr-color); }

.wd-50 { width: 50px; }
.wd-70 { width: 70px; }
.wd-100 { width: 100px; }
.wd-110 { width: 110px; }
.wd-120 { width: 120px; }
.wd-130 { width: 130px; }
.wd-150 { width: 150px; }
.wd-180 { width: 180px; }
.wd-200 { width: 200px; }
.wd-250 { width: 250px; }
.wd-300 { width: 300px; }
.wd-400 { width: 400px; }
.wd-500 { width: 500px; }
.wd-max { max-width: 100%; }
.rarr{ padding-right: 30px; background:url(/images/arrowR.svg) no-repeat calc(100% - 10px) 50%; }
.vsb-hidden{ visibility: hidden; }
.dsp-x, .formul.dsp-x { display: none; }

/*informbox 로그인 형태*/
div:has(+.informbox){ text-align:left; padding:1em 0em; border-bottom:1px solid rgba(0, 0, 0, 0.1) }
.informbox{ margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; padding: 30px 0; }
.informbox+div{ padding: 1em 0em; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.informbox>h1{ padding:0.5em 0em; border-bottom:1px dotted rgba(0, 0, 0, 0.2); margin-bottom: 1em; color:#000; font-size: 1.2em; font-weight: 500; }
.informbox>.formul{ flex: 1 1 0; margin: 0em; min-width: 10%; max-width: 100%; margin-right: 1em; }
.informbox button{ padding: 0em 2em; max-height: 5.5rem; margin: 0 1px;}
.informbox>h1>span{ font-size:0.8em; color:rgba(0, 0, 0, 0.3); }

/*좌측상단 포인트*/
.box-ltpoint{ position: relative; overflow: hidden; } /*border-siteblue=border-top*/
.box-ltpoint:before{ 
	content: ""; position: absolute; width: 40px; height: 40px; background-color: var(--main-color); transform: rotate(45deg); top:-20px; left: -20px;
} 

/*카카오맵*/
.btn-map{ cursor: pointer; text-align: left;  }
#conts>#mapbmask{  /*지도 클릭시 클릭시 가리개*/
    position:fixed; z-index:101; top:0px; left:0px; width:100vw !important; height:100vh; background: black; display: none;
} 
#mapbmask+#kkmap{ 
    position: fixed; z-index: 102; top:20vh; left:calc(50% - var(--fullwidth)/2); width: calc(var(--fullwidth)); height: calc(60vh); box-shadow: 0px 0px 5px rgba(0, 0, 10, 0.5); border:0px; transform: scale(0.5);
    animation: popupopen ease-in-out 0.3s; animation-fill-mode:forwards;
}
@keyframes popupopen{ 100%{ transform: scale(1)} }

/*유투브 박스*/
.ytb-16-9{ width: var(--fullwidth); height: calc(var(--fullwidth)*9/16); }
.ytb-4-3{ width: var(--fullwidth); height: calc(var(--fullwidth)*3/4); }


/* 플렉스 */
.wfull{ min-width: 100%;}
.whalf{ width: calc(50% - (var(--gab-c)/2)); } /* 0.25rem는 갭 */
.formul .flx-fix, .form-basic .flx-fix{ flex-grow: 0; flex-shrink: 0; }

/* 목록 */
.formul{ 
    --gab-c : 0.5rem; --label-width:110px;
    list-style: none; display: flex; flex-wrap: wrap; width: 100%; padding-inline-start: 0em; 
    box-sizing: border-box; column-gap: var(--gab-c); 
}
.formul>li{ 
    display: flex; flex-wrap: wrap; flex: 1 0 auto; align-items: center;
    padding: 0.5em 0em; min-height: calc(1.5em + 0.6em + 1px); gap: 5px;
}
.formul>li>label:not(:has(input[type="checkbox"], input[type="radio"])){ text-indent: 1em; width: var(--label-width); }
.formul>li>.labeltype{ text-indent: 1em; width: var(--label-width); }
.box-flex{display: flex;flex-wrap: wrap; gap: 0.5rem;}

.flexul{ display: flex; flex-wrap: wrap; width: 100%; margin:0; padding: 0; list-style: none; }
.flexul>li{ flex:1 0 auto;}

.mark{ padding-left: 20px; }
.x-mark{ list-style: none; padding-left: 0px;} 
/* 
.formul .error_box{ 
    min-width: 100%; font-size: 0.9em; color:red; letter-spacing: -0.07em; margin-top:0.5em; 
    padding-left: var(--label-width); 
} 
*/

/* .formul>li.wfull{ min-width: 100%;}
.formul .error_box{ min-width: calc(100%); font-size: 0.9em; color:red; letter-spacing: -0.07em; margin-top:0.5em }
.flexul{ display: flex; flex-wrap: wrap; width: 100%; margin:0; padding: 0; list-style: none;}
.flexul>li{ flex:1 0 auto;}
.jstf-ctt{ justify-content: flex-end;}
*/

/* 테이블 */
.form-table{ width: 100%; font-size: 0.9em; table-layout: fixed; }
.form-table>thead{ background: rgba(0, 0, 0, 0.03);  }
.form-table th, .form-table td{ padding: 0.5em 1em; height: 3.3em; border:1px solid rgba(0, 0, 0, 0.1); }
.form-table th{ font-weight: 500;}

.table-line>thead{ background: rgba(0, 0, 0, 0.03); }
.table-line :where(th, td){ border:1px solid rgba(0, 0, 0, 0.1); padding: 0.5em 0.2em; }
.pdw1em td{ padding: 0.5em 1em; }
.table-line th{ font-weight: 500; }

.table-tdxline tbody{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.table-tdxline td{ border-top:none; border-bottom: none; }
.table-tdxline input:not([type="checkbox"], [type="radio"], [type="hidden"]), .table-tdxline select, .table-tdxline textarea{ width: 100%; }

.topline-blue th{ border-top:1px solid #6b809c;}
.txt-center td{ text-align: center; }

/*html 카렌더 관련*/
/* #viewPro{ display:none; } */
div:has(~.calendar){ padding: 1em 0px; text-align: center; }
div:has(~.calendar)>select{ font-size: 1.5em; font-weight: 500; letter-spacing: -0.05em; padding-right: 10px; }
div:has(~.calendar)>select>option{ font-size: 1rem; }
.calendar { table-layout: fixed; width: 100%; }
.calendar th { background:rgba(0, 0, 0, 0.5); color:white; line-height: 200%; font-weight: 400; }
.calendar tr>th:first-child{ background-color: rgb(217, 131, 131); }
.calendar tr>th:last-child{ background-color: rgb(131, 169, 217); }
.calendar tr>td:first-child{ background-color: rgba(217, 131, 131, 0.1); }
.calendar tr>td:last-child{ background-color: rgba(131, 169, 217, 0.1); }
.calendar td .material-icons{ color: var(--main-color); }
.cld-sbj{ margin:1px auto; border-bottom:1px dotted rgba(0, 0, 0, 0.15);  }
.cld-sbj:has(>a:hover):after{ content: ""; display: inline-block; width: 0; }

/* .calendar thead>tr:last-child>th{ color: white; }
.calendar tr:last-child>th:first-child{ background-color: rgb(217, 131, 131); border-left: solid 1px rgb(217, 131, 131); }
.calendar tr:last-child>th:last-child{ background-color: rgb(131, 169, 217); border-right: solid 1px rgbrgb(131, 169, 217);}
.calendar tr>td:first-child{ background-color: rgba(217, 131, 131, 0.1); }
.calendar tr>td:last-child{ background-color: rgba(131, 169, 217, 0.1); }
.calendar thead{ width: 100%; padding-bottom: 1em; }
.cld-sbj{ margin:1px auto; border-bottom:1px dotted #ccc; } */

/* 폼 */
.form-basic input, .form-basic select,
.form-table input, .form-table select,
/* .formul>li>input, .formul>li>select */
.formul>li :where(input, select)
{ 
    flex:1 0 auto; background: none; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-family: "Noto Sans KR"; font-size: 1em; font-weight: 400; 
}
.form-basic input:focus, .form-basic select:focus,
.form-table input:focus, .form-table select:focus,
/* .formul>li>input:focus, select:focus */
.formul>li :where(input:not(:read-only):focus, select:focus)
{border-color: #2865CB; color:#2865CB; }

.formul textarea{ flex:1 0 100px; }
.form-table .btn-bgrbox { padding: 0em 0.5em; line-height: 1em; }

.submit-mtchk{ display: flex; padding: 1em 0em 1em 1.3em ; height: 4em; gap: 2px; }
.arrow-multi{ width: 28px; height: 15px; }
/* .opt1dspx : select option[0] display=none */

/* 개인정보수집 */
.agree-box{
    --max-height: 100;
    position: relative; border:1px solid rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.03); 
    padding: 2em; overflow-y: auto; height: 280px; letter-spacing: -0.03em; line-height: 1.8;
    transition:height 0.3s ease-out;
}
.agree-box.allview{ height: var(--max-height); }
.agree-box>button{ position: absolute; z-index: auto; top:calc(280px / 2 - 17px); right: 1em; opacity: 0; background-color: white;  }
.agree-box:hover>button{ opacity: 1; }
.agree-box+label{ display: block; width: 100%; padding: 0.5em 0em; border-bottom: 1px solid rgba(0, 0, 0, 0.15); margin-bottom: 1em; }

/*pagezone*/
#pagezone{ display: flex; justify-content: center; align-items: center; padding: 1em 0em; border-bottom: none;}
#pagezone>a,#pagezone>span{ margin: 0.3em; text-align: center;}
#pagezone>#pgFirst{ width: 12px; height: 12px; background: url("/images/page/arrowDL.svg") no-repeat 0px center; }
#pagezone>#pgFirst:hover{ background-image: url("/images/page/arrowDLc.svg"); }
#pagezone>#pgLast{ width: 12px; height: 12px; background: url("../images/page/arrowDR.svg") no-repeat 0px center; }
#pagezone>#pgLast:hover{ background-image: url("/images/page/arrowDRc.svg"); }
#pagezone .prvoff{ padding-left:15px; background: url("/images/page/arrowL.svg") no-repeat 0% center; }
#pagezone .nexoff{ padding-right:15px; background: url("/images/page/arrowR.svg") no-repeat 100% center; }
#pagezone .prvon{ padding-left:15px; background: url("/images/page/arrowLc.svg") no-repeat 0% center; }
#pagezone .nexon{ padding-right:15px; background: url("/images/page/arrowRc.svg") no-repeat 100% center; }
#pagezone .numbn{ font-family: "Lusitana"; }

/* 스크롤바 */
.scroll-w{ overflow: overlay ; }
.scroll-w::-webkit-scrollbar { width: 0.5rem; }
.scroll-w::-webkit-scrollbar-track { background-color: transparent; }
.scroll-w::-webkit-scrollbar-thumb { background-color: var(--main-color); border-radius: 0.5rem; }

/* show hide 애니메이션 */
.hideme{ opacity: 0; }
.showme{ margin-top:30px; opacity: 0; animation: ani-page 1s ease; animation-delay: 0.1s; animation-fill-mode: forwards;}
.show-up{ margin-top:-30px; opacity: 0; animation: ani-page 1s ease; animation-delay: 0.1s; animation-fill-mode: forwards; }
.show-right{ margin-left:50px; opacity: 0; animation: ani-page-h 1s ease; animation-delay: 0.1s; animation-fill-mode: forwards; }
.show-left{ margin-left:-50px; opacity: 0; animation: ani-page-h 1s ease; animation-delay: 0.1s; animation-fill-mode: forwards; }
@keyframes ani-page{ 100% { opacity: 1; margin-top: 0px; } }
@keyframes ani-page-h{ 100% { opacity: 1; margin-left: 0px; } }

/* 애니메이션 */
.aniparent{ width: 100%; height: 100%; position: absolute; }
.aniparent.ani-h{ white-space:nowrap; }
.aniparent>*{ width: 100%; height: 100%; display: block; }
.aniparent.ani-h>*{ display: inline-block; }

.aniparent+.ani-bn{ bottom:20px; left: calc(50% - 150px); width: 300px; position: absolute; display: flex; align-items: center; justify-content: center; }
.aniparent+.ani-bn>button{ display: inline-block; width: 20px; height: 20px; background-color: var(--main-color); border-radius: 20px; margin-left: 5px; }
.aniparent+.ani-bn>button.onview{ background-color: var(--main-color); }
.aniparent+.ani-bn>.anipause{ width: 30px; background-color: white; font-size: 13px; }


/*탭 이하*/
@media screen and (max-width: 1024px) {
    .display-pc-over{ display: none; }

    /*스크롤 테이블 박스*/
    .box-overflow{ width: calc(100vw - 2em); overflow: auto; }

    /*html 카렌더 관련*/
    .calendar td{border:1px solid #ccc ;  padding:5px; text-align: center; }
	.calendar td.dateon{ background: #F0ECB9 !important; }
	.oncday+div{ display: none;}
    #viewPro:has(a){ border:2px solid var(--main-color); border-radius: 5px; padding: 10px; margin: 1em 0px; position: relative; overflow: hidden; }
    #viewPro:has(a)::before{ 
        content: ""; position: absolute; display: block; width: 10px; height: 40px; top:0px; left: -7px;
        background-color: var(--main-color); transform: rotate(-45deg); transform-origin:0% 0%;
    }
    #viewPro>h1{ 
        font-size: 1.4rem; font-weight: 500; border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding: 0.5em; margin-bottom:0.5em;
        text-align: center; color: var(--main-color); letter-spacing: -0.05em;
    }
    #viewPro>p { padding: 0.5em; }
    #viewPro>p::before{ content: '\2022'; padding-right: 5px; }
    #viewPro>div:last-child{ padding: 0.8em 0em;}

    #viewPro{ transition:all 0.3s ease-out; }
    div:has(>.calendarmove){ border-bottom: none; }
    .trstview{ opacity: 1; }
    .trstx{ opacity: 0; }
}
/*모바일*/
@media screen and (max-width: 500px) {
    .display-tab-over{ display: none; }

    /*블럭 informbox 로그인 형태*/
    .informbox button{ padding: 0em 1.2em;}

    /* 버튼 */
    .tab{ flex-wrap: wrap; margin:0px; padding: 1em; background: rgba(0, 0, 0, 0.03);  }
    .tab>a{ 
        position: unset; top:unset;  max-width: calc(50% - 2px); background: white; 
        flex: 0 1 50%; margin: 2px 0px; border-radius: 5px;
    }
    .tab>a.tabon{ border-color: var(--main-color); color: var(--main-color); font-weight: 500; }

    /* 목록 */
    .formul>li>label:not(:has(input[type="checkbox"], input[type="radio"])){ display: none; }

    /*pagezone*/
    #pagezone .numbn{ 
        width: 2em; height: 100%; padding: 0.2em 0em; border:1px solid #ccc; border-radius: 3px; margin:0px 1px; 
        background: linear-gradient(#ffffff, #f1f1f1);
    }
}
/*탭 이상*/
@media screen and (min-width: 500.1px) {
    .display-mobile{ display: none;}

    /*블럭 informbox 로그인 형태*/
    .informbox{ max-width: 600px; }    
    .formul .flx-fix-tabover{ flex-grow: 0; flex-shrink: 0; }
}
/*PC 이상*/
@media screen and (min-width: 1024.1px) {
    .display-tab-below { display: none; }

    /*html 카렌더 관련*/
    .calendar td{
        height:calc(var(--fullwidth) / 8); font-size: 0.9em; border:1px solid #ddd ; line-height:1.6em;
        vertical-align:top !important; text-align:left; padding:5px;
    }
    .cld-sbj{height: 1.6rem;}
}