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

/*텍스트 ----------------------------------------------------------------*/
.txt-small{ font-size: 0.9em; color:rgba(0, 0, 0, 0.5)}
.txt-large{ font-size: 1.1em; color:black; font-weight: 500; }
.mcolortxt{ color:var(--main-color); }
.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:red; 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); }
.btn-box.bg-main{ --btn-bg:var(--main-color);  }
.btn-box.bg-setcolor{ background-color: var(--btn-bg); border-color: var(--btn-bg); color:white; }
.btn-box.bg-setcolor::before{ background-color: white; }
.btn-box.bg-setcolor:hover{color:var(--btn-bg); 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-return::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: 2rem 0.5rem ; border-radius: 50%; background: var(--btn-bg); 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(--btn-bg); 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; }
}
.ccicon{ border-radius: 50%; width: 1.3em; height: 1.3em; display: inline-flex; align-items: center; justify-content: center; color:#fff; background-color: var(--btn-bg); font-size: 0.9em; vertical-align: -1px; }

/*색선택 변경 반드시 설정된 버튼 최하단에 있어야함*/
.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; }
.bg-gray-10{ --btn-bg: rgba(0,0,0,0.1); }
.bg-main{ --btn-bg: var(--main-color); }

/*탭*/
.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; }

.tab-sub{ border:2px solid var(--main-color); padding: 1.5rem 2rem; margin-bottom: 2rem; border-radius: 0.5rem; }
.tab-sub>a{ display: inline-block; width: 120px; padding: 3px 0; text-align: center; }
.tab-sub>a.tabon-sub{ background:var(--main-color); color:#fff; border-radius: 20px;  }



/* 단락 ----------------------------------------------------------------*/
.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'; }
.p-left-asterisk:last-child, .p-left-dash:last-child{ padding-bottom: 0;}

.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%;
}
.rbox-state{ 
    display: inline-block; color: white; text-align: center; text-indent:0; border-radius: 50%; font-size: 0.9rem;
    width: 1rem; height: 1rem; line-height: 1rem; justify-content: center;
}
.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 }

/* a:모집, x:마감, z:종료 */
.state-a, .box-state.state-a { background-color: #a3d39c; --btn-bg: #a3d39c; }
.state-b, .box-state.state-b { background-color: #7accc8; --btn-bg: #7accc8; }
.state-c, .box-state.state-c { background-color: #8393ca; --btn-bg: #8393ca; }
.state-d, .box-state.state-d { background-color: #a186be; --btn-bg: #a186be; }
.state-e, .box-state.state-e { background-color: #f49ac1; --btn-bg: #f49ac1; }
.state-f, .box-state.state-f { background-color: #f69679; --btn-bg: #f69679; }
.state-x, .box-state.state-x { background-color: rgba(0, 0, 0, 0.5); --btn-bg: rgba(0, 0, 0, 0.5); }
.state-z, .box-state.state-z { background-color: rgba(0, 0, 0, 0.3); --btn-bg: rgba(0, 0, 0, 0.3); }


/*박스,블럭----------------------------------------------------------------*/
.box-topborder{ border-top:2px solid var(--main-color);}
.bdr-5px-color{ --bdr-color:black; border-width: 5px; border:5px solid var(--bdr-color); }

.div-indiv>h2{ font-size: 1.5rem; font-weight: normal; color:black; }
.div-indiv>h2+p{ padding-top: 1em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 2em;}
.div-indiv>div:not(.box-download, .stepbox, .step-desc){ padding: 2em 0em;  }
.div-indiv>div:not(:last-child){ border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.div-indiv>div:first-child:not(.box-download, .stepbox){ padding-top: 1em; }
.div-indiv>div>h2{ 
    font-family: 'Nexent'; font-size: 1.3rem; font-weight: normal;
    padding-bottom: 1rem; color:black;
}
.div-indiv>div>h2::before{
    content:''; display:inline-block; width:8px; height:8px; margin:-10px 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>:where(h2, h3) + :where(ul,ol){ margin-top:0; }
.div-indiv>div>:where(h2+img){ float: right;}

.div-indiv>div>h3{ font-size: 1.15rem; font-weight: 500; color:rgba(0, 0, 0, 0.7); padding: 1rem 0 0.5rem 0; }
.div-indiv>div>h3::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>h2+h3{ padding-top: 1rem;}
.div-indiv>div ul, .div-indiv>div ol{ padding-inline-start:1.7rem;  }
.div-indiv>div>h3~*:not(h3){margin-left: 1rem;}
.div-indiv>div>h3~ul, .div-indiv>div>h3~ol{ margin-top:0; }
.div-indiv div>ul:last-child, .div-indiv div>ol:last-child{ margin-bottom: 0;}
.div-indiv>div :where(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); }

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

.option-box { padding: 1em 2em; border: 1px solid rgba(0, 0, 0, 0.1); border-top: 3px solid var(--main-color); background-color: rgba(0, 0, 0, 0.02);}
.option-box >ul{ list-style: none; vertical-align: bottom; }
.option-box >ul>li{ padding-top:10px; padding-bottom: 10px;}
.option-box >ul>li:not(:last-child){ border-bottom: 1px dotted rgba(0, 0, 0, 0.1); }

.flex-box{
    --inboxnum:4;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
:where(.flex-box)>div{
    width: calc((100% - (var(--inboxnum) - 1)*0.5rem) / var(--inboxnum));
    border:1px solid rgba(0, 0, 0, 0.1); padding: 1.5rem; text-align: center;
}
.flexbox-hasbtn{ display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1rem; align-items: flex-start; }
.flexbox-hasbtn>*{ flex:1 1 300px;  }
.flexbox-hasbtn>:where(button, a){ flex:0 0 fit-content; }

/* 스탭 박스 */
:where(.stepbox){ 
    border:1px solid rgba(0, 0, 0, 0.1); padding: 5% 0px; background-color: rgba(0, 0, 0, 0.03); 
    margin-bottom: 2em; display: flex;  justify-content: center; text-align: center; 
}
.stepbox:last-child{ margin-bottom: 0;}
.stepbox>div{ width: calc(13%); font-weight: 500; }
.stepbox .step-rbox{ 
    background: var(--main-color); color:#fff; width: 80px; height: 80px; border-radius: 100px; margin: auto; 
    position: relative; display: flex; justify-content: center; align-items: center; 
}
.stepbox .step-rbox::before{
    content: ""; display: block; width: 90px; height: 90px; border:5px solid black; border-radius: 100px;
    position: absolute; opacity: 0.05;
}
.stepbox div:nth-of-type(1)>.step-rbox{ background-color: #df5959; }
.stepbox div:nth-of-type(2)>.step-rbox{ background-color: #df7859; }
.stepbox div:nth-of-type(3)>.step-rbox{ background-color: #df9a59; }
.stepbox div:nth-of-type(4)>.step-rbox{ background-color: #dfbb59; }
.stepbox div:nth-of-type(5)>.step-rbox{ background-color: #dfd259; }
.stepbox div:nth-of-type(6)>.step-rbox{ background-color: #acdf59; }
.stepbox .step-rbox .material-icons{ font-size: 2em; color: white; }
.stepbox .step-rbox+span{ display: block; padding: 1em 0px 0.5em 0px; color: var(--main-color);}
.stepbox .step-rbox+span+p{ font-size: 1.1em; }
.stepbox .step-rbox+span+p+div{ padding-top:0.5rem; font-size: 1rem; font-weight: normal; }
.stepbox>span{  padding-top: 1.5rem; color:rgba(0, 0, 0, 0.3); font-size: 2em; }

.step-desc>div{ padding: 2em 0em; }
.step-desc>div:first-child{ padding-top: 0em; }
.step-desc>div:not(:last-child){ border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.step-desc>div>h2{ font-size: 1.4rem; color:black; font-weight: 500; padding-bottom: 1rem; }
.step-desc>div>h2::before{
    content: '\2022'; display: inline-block; color: var(--main-color); margin-right: 5px;
    font-size: 1.5em;
}
.step-desc>div>h2>span{ font-weight: 400; letter-spacing: -0.05em; color: var(--main-color); }
.step-desc>div>h3{ font-size: 1.3rem; color:black; font-weight: 500; padding: 1rem 0rem; }
.step-desc>div ul{ margin: 0; padding-left: 20px; }
.step-desc>div ul:has(+div, +ul){ margin:0 0 1em 0; }

/*다운로드 박스*/
.box-download{ 
    border:1px solid rgba(0, 0, 0, 0.1); border-top:2px solid var(--main-color); padding: 1.5em;  
    background-color: rgba(0, 0, 0, 0.02); position: relative; display: flex;  flex-wrap: wrap; overflow: hidden; gap: 5px;
    margin-bottom: 0.5rem;
}
.box-download:last-child{ margin-bottom: 0;}
.box-download::before{ 
    content: "\271C  서식자료"; flex: 1 0 100%; font-size: 1.2rem; font-weight: 500; 
    color:var(--main-color); padding-bottom: 0.7rem;
}
.box-download::after{ 
    content: ""; position: absolute; display: block; width: 8px; height: 25px; top:0px; left: -4px;
    background-color: var(--main-color); transform: rotate(-45deg); transform-origin:0% 0%;
}
.box-download :where(a, button){ background-color: white; border-color: rgba(0, 0, 0, 0.2); }

/* 줄단위로 출력 박스 */
.cutview{
    --cutline : 2;
    position: relative; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--cutline);
}

/* 애니 박스 */
.ani-box{ 
    --rate-w:2; --rate-h:1;
    border:1px solid rgba(0, 0, 0, 0.1); 
    display: block; height: calc(var(--fullwidth)*var(--rate-h)/var(--rate-w)); 
    position: relative; margin:2em 0em; overflow: hidden;
}
.ani-box:last-child{ margin-bottom: 0; }
.ani-box>img{ display: block; width: var(--fullwidth); position: absolute; top:0; left: 0; opacity: 0; }

.ani1num>img{ opacity: 1; }
.ani2num>img:nth-child(1){  animation: ani2box1 10s linear infinite; opacity: 1; }
.ani2num>img:nth-child(2){  animation: ani2box2 10s linear infinite;}
@keyframes ani2box1{ 37.5% {opacity: 1;} 50% {opacity: 0;} 87.5% {opacity: 0;} 100% {opacity: 1;} }
@keyframes ani2box2{ 37.5% {opacity: 0;} 50% {opacity: 1;} 87.5% {opacity: 1;} 100% {opacity: 0;} }

.ani3num>img:nth-child(1){  animation: ani3box1 15s linear infinite; opacity: 1; }
.ani3num>img:nth-child(2){  animation: ani3box2 15s linear infinite;}
.ani3num>img:nth-child(3){  animation: ani3box3 15s linear infinite;}
@keyframes ani3box1{ 25% {opacity: 1;} 33.3333% {opacity: 0;} 91.6667% {opacity: 0;} 100% {opacity: 1;} }
@keyframes ani3box2{ 25% {opacity: 0;} 33.3333% {opacity: 1;} 58.3333% {opacity: 1;} 66.6666% {opacity: 0;} }
@keyframes ani3box3{ 58.3333% {opacity: 0;} 66.6666% {opacity: 1;} 91.6667% {opacity: 1;} 100% {opacity: 0;} }

.ani4num>img:nth-child(1){  animation: ani4box1 20s linear infinite; opacity: 1; }
.ani4num>img:nth-child(2){  animation: ani4box2 20s linear infinite;}
.ani4num>img:nth-child(3){  animation: ani4box3 20s linear infinite;}
.ani4num>img:nth-child(4){  animation: ani4box4 20s linear infinite;}
@keyframes ani4box1{ 18.75% {opacity: 1;} 25% {opacity: 0;} 93.75% {opacity: 0;} 100% {opacity: 1;} }
@keyframes ani4box2{ 18.75% {opacity: 0;} 25% {opacity: 1;} 43.75% {opacity: 1;} 50% {opacity: 0;} }
@keyframes ani4box3{ 43.75% {opacity: 0;} 50% {opacity: 1;} 68.75% {opacity: 1;} 75% {opacity: 0;} }
@keyframes ani4box4{ 68.75% {opacity: 0;} 75% {opacity: 1;} 93.75% {opacity: 1;} 100% {opacity: 0;} }


/* layersys */
.layersys{ position: fixed; z-index: 2; top:0px; left: 0px; width: 100vw; height: 100vh; background: #000; opacity: 0; }
.layersys+div{
    position: fixed; z-index: 3; width: calc(var(--fullwidth)); min-height: 300px; background-color: white;
    top:20%; left:calc(50vw - var(--fullwidth)/2); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 1rem 1rem 3rem 1rem; display: none; opacity:0; margin-top: 40px;
}
.layersys+div>h1{ text-align: center;  color: black; font-size: 1.4rem; padding: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-weight: normal; }
.layersys+div>h1>span{ margin: auto; font-family: "Nexent"; }
.layersys+div>h1>.h1-desc{ font-size: 1rem; font-weight: 300; opacity: 0.5; padding-top: 5px; }
.layersys+div div:has(+.hide-data){ border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding-bottom: 0.5rem; }
.layersys+div div:has(+.hide-data)>.yellow{ font-weight: 500;}
.layersys+div .hide-data{ overflow-y: scroll; height: 197px; margin:1rem auto; list-style: none; padding-left: 0; display: none; }
.layersys+div .hide-data>li{ padding: 0.5rem 0;}
.layersys+div .hide-data>li:not(:last-child){ border-bottom: 1px dotted rgba(0, 0, 0, 0.1); }
.layersys+div .hide-data>li>span:first-child{ display: inline-block; font-style: 1.1em; font-weight: 500; color:rgba(0, 0, 0, 0.9)  }
.layersys+div .hide-data>li:hover{ background-color: rgba(0, 0, 0, 0.02); cursor: pointer; }
.layersys+div .hide-data>li:hover>span:first-child{ color:#5969f7; }
.layersys+div .hide-data>li>p{ font-size: 0.95rem; color:rgba(0, 0, 0, 0.5); line-height: 1.5rem; display: block; }
.layersys+div .hide-data+div{ border-top: 1px solid rgba(0, 0, 0, 0.2); padding-top: 0.5rem; font-weight: 500;}
.layersys+div form *:has(>button[type='submit']){ justify-content: center; }
.layersys+div form *:has(>button[type='submit'])>button{ min-height: 2.3em; }

.layersys+div> :where(.searchform, .rgsform, div:has(.r_pricedesc)) :where(.btn-box, .box-icon-cancle)
{ border-color: rgba(0, 0, 0, 0.2); }

/*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;
} 
.box-ltpoint.subp::before{ width: 20px; height: 20px; transform: rotate(45deg); top:-10px; left: 1.5em; }
.box-ltpoint.subm::before{ width: 5px; height: 40px; transform: rotate(-45deg); top:-15px; left: 3px; }

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


/*카카오맵----------------------------------------------------------------*/
.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)} }



/* 플렉스 ----------------------------------------------------------------*/
.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;}
.box-flex.whcenter{ justify-content: center; align-items: center; }
.box-flex:has(#keyword){ gap: 2px; }

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

.split-colon{ --itemw : 87px; }
.split-colon>li{ position: relative; padding-left: var(--itemw);  }
.split-colon>li>span:first-child{ display: inline-block; text-align:justify; text-align-last: justify; letter-spacing: -0.2em; position: relative; padding-right: 30px; position: absolute; left: 0px; width: var(--itemw); font-weight: 500; }
.split-colon>li>span:first-child::after{ content: ":"; display: inline-block; padding-left: 0px; position: absolute; right: 13px; }

.circle-list { counter-reset: circle 0; list-style: none; }
.circle-list >li{ position: relative; padding-left: 0.4em;  }
.circle-list >li:before{ 
    counter-increment: circle 1; content: counter(circle); font-family: 'Source Sans Pro'; 
    display: block; font-size: 0.8em; position: absolute; left: -20px; top:10px;
    width: 1rem; height: 1rem; line-height: 1.2;
    text-align: center; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 50%;
}



/* 테이블 ----------------------------------------------------------------*/
.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 th, .table-line td{ border:1px solid rgba(0, 0, 0, 0.1); padding: 0.5em 0.2em; }
.table-line th{ font-weight: 500; }
.table-line.theadcolor>thead{ background-color: var(--main-color); color:white; }

.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-main th{ border-top:2px solid var(--main-color);}
.topline-blue th{ border-top:1px solid #6b809c;}
.txt-center td{ text-align: center; }
.pdh1em td{ padding-left: 1em; padding-right: 1em; }



/* 이미지 ----------------------------------------------------------------*/
.img-box{ display: block; max-width: 100%;}
.box-pd1em-line{ border:1px solid rgba(0, 0, 0, 0.2); padding: 1em;  }
.box-pd1em-line>img{ margin:auto; }


/*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:not([type='radio'], [type='chexbox']), 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; }

.pricechk{ text-align: right; }
.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: 2rem; 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; }
label:has(.agree){ 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; }



/* 애니메이션 ----------------------------------------------------------------*/
.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; } }

/* top 애니메이션 */
.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>h2{ 
        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;}
    .flex-box{ --inboxnum:2; }
    .flexbox-hasbtn>:where(button, a){ flex:1 0 100%; margin: 1em 0; }
    .stepbox{ border:0px; padding: 0px; justify-content:space-between; flex-wrap: wrap; background: none; }
    .stepbox>div{ 
        width: calc(50% - 5px); border:1px solid rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.03); 
        margin-bottom: 0.6em; padding: 1.5em 0em 1em 0px;
    }
    .stepbox.box-ltpoint::before{ display: none; }

    /* 버튼 */
    .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; }
    .tab-sub>a{ display: inline-block; width: 50%;}

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

    /*다운로드 박스*/
    .box-download :where(a, button){ min-width: 100%; }

    /*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; }

    /* layersys */
    .layersys+div>form.searchform{ width: 700px; margin: auto; padding: 1rem 0;}
    .layersys+div div:has(>.hide-data){ width: 90%; margin:auto; }
    .layersys+div .hide-data{ overflow: overlay; }
    .layersys+div .hide-data::-webkit-scrollbar { width: 0.5rem; }
    .layersys+div .hide-data::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 0.5rem; }

}
/*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;}

    /* layersys */
    .layersys+div{width:960px; left:calc(50% - 480px);}
}