@charset "utf-8";
/* CSS Document */
.box0{ padding:0 var(--pgPD); box-sizing:border-box}
.boxSub,
.box1{ box-sizing:border-box; width:1400px; margin:0 auto}

.gnb li.m_hide,
.gnb li .mLink{ display:none}
body:not(.pop){ display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100)}

.pageContainer{ display:flex}

#header{ position: fixed; left:0; top:0; width:100%; z-index:1000; background:#fff}

.dp1on .gnb .dp2{ display:none!important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1{ display:none!important}
.dp2on .gnb > li.on{ display:block!important}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on{ display:block!important}

.sns_st{ display:flex; gap:.5em}
.sns_st > li > a{ display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; border-radius:50%; transition:.3s}
.sns_st > li > a .xi{ font-size:1.125em}
.sns_st > li > a img{ height:1.125em}
.sns_st > li > a:hover{ background:#111; color:#fff}
.sns_st > li > a:hover img{ filter:brightness(0) invert(1)}
.sns_st > li > a.kc img{ height:1.438em}

/**/
.logoSt,
.logoSt > a{ display:flex; align-items:center}
.logoSt img{ display:block; height:3.5em}
.logoSt .tt{ color:#666; padding-left:.5em; margin-left:.5em; position:relative; transform:translateY(.625em)}
.logoSt .tt .t1{ font-weight:700; font-size:1.125em;}
.logoSt .tt:before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:70%; background:#ccc}

.pageLayout{ display:flex; gap:var(--pgLyGap); height:100svh; padding:var(--pgLyGap); box-sizing:border-box; background: radial-gradient(circle, #f5f5f5 0%, #fff6f6 55%, #f4fffd 70%, #f6f7ff 85%, #f5f5f5 100%);}
.pageLayout .lay{ height:100%; box-sizing:border-box; background:#fff; border:1px solid transparent; box-shadow:0 0 1em rgba(0,0,0,.1); border-radius:var(--pgLyRd)}
.pageLayout .layWrap{ display:flex; flex-direction:column; align-items:center; height:100%; gap:var(--pgLyGap); box-sizing:border-box}
.pageLayout .layWrap .wrapInc{ width:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:var(--pgLyGap)}
.pageLayout .layWrap.p0{ padding:0}
.pageLayout .layWrap:not(.p0),
.pageLayout .layWrap.p0 .pi{ padding:var(--pgLyGap) 1em;}
.pageLayout .layUtil{ width:calc(var(--pgLyRd) * 2); background:#fff; border-radius:var(--pgLyRd)}
.pageLayout .layUser { width:16em; border-color:rgba(0,0,0,.1); box-shadow:none; background:none}
.pageLayout .layCont{ flex:1 1 0%; min-width:0; display:flex; flex-direction:column;}
.pageLayout .layCont .header{ width:100%; height:5.5em; border-bottom:1px solid #eee; padding:0 calc(var(--pgLyGap) * 2); flex-direction:row}
.pageLayout .layCont .header.stTit{ height:4.5em}
.pageLayout .layCont .header.stTit .navIco{ width:2em; height:2em; display:flex; align-items:center; justify-content:center}
.pageLayout .layCont .header.stTit .navIco .ico{ font-size:1.25em}
.pageLayout .layCont .header.stTit .titW{ flex:1 1 0%; min-width:0; text-align:center}
.pageLayout .layCont .header.stTit .titW .t1{ font-weight:700; font-size:1.375em}
.pageLayout .layCont .header.stMenu{ height:auto; box-shadow:0 .25em .5em rgba(0,0,0,.1) inset; background:#f5f5f5}
.pageLayout .layCont .header.stMenu .sGnb{ overflow-x:auto; width:100%; display:flex;}
.pageLayout .layCont .header.stMenu .sGnb .gnb{ margin:0 auto}
.pageLayout .layCont .header.stMenu .sGnb .gnb > li.on .dp2 > li > a{ display:flex; align-items:center; box-sizing:border-box; height:3.5em; padding:.5em 2em; color:#888; position:relative}
.pageLayout .layCont .header.stMenu .sGnb .gnb > li.on .dp2 > li:not(:first-child) > a:after{ content:""; position:absolute; left:0; top:50%; width:1px; height:30%; transform:translateY(-50%); background:#ddd}
.pageLayout .layCont .header.stMenu .sGnb .gnb > li.on .dp2 > li > a:before{ content:""; position:absolute; left:50%; bottom:0; width:2em; height:3px; background:#111; transform:translateX(-50%); opacity:0}
.pageLayout .layCont .header.stMenu .sGnb .gnb > li.on .dp2 > li > a .tt{ font-weight:700; font-size:1.125em; white-space:nowrap}
.pageLayout .layCont .header.stMenu .sGnb .gnb > li.on .dp2 > li.on > a,
.pageLayout .layCont .header.stMenu .sGnb .gnb > li.on .dp2 > li:hover > a{ color:#111}
.pageLayout .layCont .header.stMenu .sGnb .gnb > li.on .dp2 > li.on > a:before{ opacity:1}
.pageLayout .layCont .header.stMenu .sGnb .gnb .dp3{ display:none}

.pageLayout .layCont .contents{ flex:1 1 0%; min-height:0; display:flex; overflow-y:auto; margin-bottom:3em;}
.pageLayout .layCont .contents .layWrap{ flex:1 1 0%; min-width:0; min-height:0; padding:calc(var(--pgLyGap) * 2); padding-bottom:0; align-items:flex-start}
.pageLayout .layCont .contents .layWrap .doc{ width:100%; box-sizing:border-box; padding:var(--pgLyGap); padding-top:0}
.pageLayout .layCont .contents:has(.lnbWrap) .layWrap .doc{ padding:0}
.pageLayout .layCont .contents .lnbWrap{ width:18em; padding:calc(var(--pgLyGap) * 2); padding-right:var(--pgLyGap); box-sizing:border-box; position:sticky; top:0; overflow-y:auto}
.pageLayout .layCont .contents .lnbWrap .lnb{ background:var(--siteGra); border-radius:var(--pgSubRd); display:flex; flex-direction:column; box-shadow:.5em .5em 0 rgba(0,0,0,.1)}
.pageLayout .layCont .contents .lnbWrap .lnb .tit{ overflow:hidden; color:#fff; display:flex; align-items:center; height:4em; padding:1em; padding-bottom:0}
.pageLayout .layCont .contents .lnbWrap .lnb .tit .t1{ font-weight:700; font-size:1.313em; line-height:1.1}
.pageLayout .layCont .contents .lnbWrap .lnb .select{ filter:invert(1)}
.pageLayout .layCont .contents .lnbWrap .lnb .select option{ font-size:.875em; background:#000; color:#fff}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb{ padding:1em}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb li.on{ width:100%}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3{ flex-direction:column; border-radius:var(--pgObjRd); background:#fff}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li a{ display:flex; line-height:1.2; position:relative; text-align:left; color:#333;}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li > a{ padding:1em; transition:.3s}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li > a .va{ width:100%;  display:flex; align-items:center}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li > a .tt{ flex:1 1 0%; min-width:0; font-weight:500}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li > a .arrow{ font-size:.875em; transform:translateX(100%); opacity:0; transition:.3s}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li > a .arrow:before{ content:"\e85f"}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li.on > a,
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li:hover > a{ color:var(--siteC)}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li.on > a .arrow,
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li:hover > a .arrow{ transform:translateX(0); opacity:1}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp3 > li:not(:first-child) > a{ border-top:1px dashed #ddd}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp4{ flex-direction:column; margin:1em; margin-top:-.25em; padding:.75em; border-radius:.5em; background:#edf0f9}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp4 > li > a{ padding:.25em}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp4 > li > a .va{ display:flex; gap:.25em}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp4 > li > a .va:before{ content:"-"}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp4 > li > a .tt{ font-size:.938em}
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp4 > li.on > a .tt,
.pageLayout .layCont .contents .lnbWrap .lnb .gnb .dp4 > li:hover > a .tt{ color:#111; text-decoration:underline; font-weight:500}

.pageLayout .layCont .contents .subTit{ border-bottom:1px dashed #ccc; margin-bottom:1em; padding:1.5em 0; width:100%}
.pageLayout .layCont .contents .subTit .t1{ font-weight:500; font-size:1.75em}

.pageLayout .layUser .userWrap .wCtl{ display:flex; justify-content:flex-end}
.pageLayout .layUser .userWrap .wCtl .st .ico{ font-size:1.313em} 
.pageLayout .layUser .userWrap .wTop{ display:flex; flex-direction:column; gap:calc(var(--pgLyGap) / 2)}
.pageLayout .layUser .userWrap .wTop .ment{ display:flex; flex-direction:column; align-items:flex-start; gap:inherit}
.pageLayout .layUser .userWrap .wTop .ment .tt{ font-size:1.063em}
.pageLayout .layUser .userWrap .wTop .ment .tt .point{ font-weight:700;}
.pageLayout .layUser .userWrap .wTop .menu{ display:flex; flex-direction:column; gap:.5em}
.pageLayout .layUser .userWrap .wTop .menu > li{ width:100%}
.pageLayout .layUser .userWrap .wTop .menu > li > a{ display:flex; align-items:center; color:#888}
.pageLayout .layUser .userWrap .wTop .menu > li > a .ico{ width:2em; text-align:center}
.pageLayout .layUser .userWrap .wTop .menu > li > a .tt{ font-size:.875em; font-weight:500}
.pageLayout .layUser .userWrap .wTop .menu > li > a:hover .tt{ text-decoration:underline}
.pageLayout .layUser .userWrap .crList{ display:flex; flex-wrap:wrap; gap:calc(var(--pgLyGap) / 2)}
.pageLayout .layUser .userWrap .crList > li{ flex:1; min-width:0}
.pageLayout .layUser .userWrap .crList > li.w1{ flex:0 0 auto; width:100%}
.pageLayout .layUser .userWrap .crSt{ border-radius:var(--pgSubRd); border:1px solid rgba(0,0,0,.1); padding:.75em; box-sizing:border-box; display:flex; flex-direction:column; min-height:6em; transition:.3S}
.pageLayout .layUser .userWrap .crSt .titW{ display:flex; align-items:center; justify-content:space-between}
.pageLayout .layUser .userWrap .crSt .tit{ display:flex; align-items:center; color:#666}
.pageLayout .layUser .userWrap .crSt .tit .t1{ font-size:.938em; font-weight:700}
.pageLayout .layUser .userWrap .crSt .no{ margin:auto 0 0 auto; display:flex; align-items:center; gap:.5em}
.pageLayout .layUser .userWrap .crSt .no .t1{ font-size:1.25em; font-weight:900}
.pageLayout .layUser .userWrap .crSt[onclick] .arrow:before{ content:"\e8f3"; font-weight:normal; color:var(--siteC); opacity:0; transform:translateX(100%); margin-left:-1em; transition:.3S}
.pageLayout .layUser .userWrap .crSt.c1{ border-color:var(--siteC)}
.pageLayout .layUser .userWrap .crSt.c1 .tit{ color:var(--siteC)}
.pageLayout .layUser .userWrap .crSt[onclick]:hover{ border-color:var(--siteC)}
.pageLayout .layUser .userWrap .crSt[onclick]:hover .tit{ color:var(--siteC)}
.pageLayout .layUser .userWrap .crSt[onclick]:hover .arrow:before{ opacity:1; transform:translateX(0); margin-left:0}
.pageLayout .layUser .userWrap .noticeWrap .crNoticeSlide{ margin-bottom:1em}
.pageLayout .layUser .csWrap{ margin-top:auto; border-top:1px solid #ddd; gap:calc(var(--pgLyGap) / 2)}
.pageLayout .layUser .csWrap.pi{padding-bottom:var(--pgLyRd)}
.pageLayout .layUser .csWrap .tit .t1{ font-weight:500; font-size:.938em; color:var(--siteC)}
.pageLayout .layUser .csWrap .con .t1{ font-weight:900; letter-spacing:-.05em; font-size:1.5em}
.pageLayout .layUser .csWrap .con .t2{ font-size:.875em; color:#888}

.userLv{ height:1.75em; display:flex; align-items:center; gap:.25em; border-radius:1em; color:#fff; padding:0 1em}
.userLv.c1{ background:var(--siteCLv1);}
.userLv.c2{ background:var(--siteCLv2);}
.userLv .ico:before{ content:"\f458"}
.userLv .tt1{ font-weight:500; font-size:.875em}
.userLv.s1{ font-size:1.063em}

.pageLayout .layUser .userWrap .crSt .nTit{ font-size:.938em; font-weight:500; margin:.75em 0}
.pageLayout .layUser .userWrap .crSt .nDate{ font-size:.813em; color:#888}

.pageLayout .layCont .layWrap.header .logo{ height:3em}
.pageLayout .layCont .layWrap.header .logo > a,
.pageLayout .layCont .layWrap.header .logo > a img{ display:block; height:100%}

.pageLayout .layCont .gnbWrap,
.pageLayout .layCont .gnbWrap .gnb,
.pageLayout .layCont .gnbWrap .gnb > li,
.pageLayout .layCont .gnbWrap .gnb > li .dp1{ height:100%}
.pageLayout .layCont .gnbWrap{ flex:1 1 0%; min-width:0}
.pageLayout .layCont .gnbWrap .gnb{ justify-content: flex-end}
.pageLayout .layCont .gnbWrap .gnb > li > .dp1{ display:flex; align-items:center; justify-content:center; text-align:center; padding:0 4vmin}
.pageLayout .layCont .gnbWrap .gnb > li > .dp1 .va .tt{ font-weight:700; font-size:1.125em}
.pageLayout .layCont .gnbWrap .gnb .dp2{ display:none}

.pageLayout .layCont .etcWrap{ margin-left:2em}
.pageLayout .layCont .etcWrap .etcBtn{ display:flex; align-items:center; gap:.25em; color:#888; font-size:.938em}
.pageLayout .layCont .etcWrap .etcBtn:hover{ color:#111}

.pageLayout .layUtil .allWrap .allBtn{ height:3em; display:flex; align-items:center; justify-content:center}
.pageLayout .layUtil .allWrap .allBtn .ico{ font-size:1.5em}
.pageLayout .layUtil .allWrap .allBtn .ico:before{ content:"\f00b"}
.pageLayout .layUtil .linkWrap .st{ writing-mode: vertical-rl; text-orientation: sideways; display:flex; align-items:center; gap:.5em; word-spacing:.125em; padding:.5em; color:#888}
.pageLayout .layUtil .linkWrap .st img{ height:2em; transform:rotate(90deg)}
.pageLayout .layUtil .linkWrap .st .tt{ font-weight:700}
.pageLayout .layUtil .linkWrap .st .arrow{ width:2.5em; height:2.5em; display:flex; align-items:center; justify-content:center; background:var(--siteGra); border-radius:50%; color:#fff; margin-top:.5em}
.pageLayout .layUtil .linkWrap .st .arrow:before{ transition:.3s}
.pageLayout .layUtil .linkWrap .st:hover{ color:var(--siteC)}
.pageLayout .layUtil .linkWrap .st:hover .arrow:before{ transform:translateX(50%)}

.pageLayout .layUtil .copyright{ margin-top:auto}
.pageLayout .layUtil .copyright .tt{ font-size:.75em;color:#888; writing-mode: vertical-rl; word-spacing:.125em}

.btnGo{ height:3em; border-radius:3em; background:var(--siteGra); color:#fff; display:flex; align-items:center; padding:0 1.5em}
.btnGo .tt{ font-weight:700; font-size:1.063em}
.btnGo .arrow{ margin-left:auto}
.btnGo .arrow:before{ content:"\edff"}
.btnInfo{ margin-left:.25em; color:#888}
.btnInfo .fi{ font-size:1.063em}
.btnInfo .fi:before{ content:"\f086"}
.btnInfo:hover,
.inLyer.on .btnInfo:hover{ color:var(--siteCerr)}

/**/
.loginWrap{ height:100svh; position:relative; display:flex; align-items:center; flex-direction:column; gap:2em; justify-content:center}
.loginWrap > *{ position:relative}
.loginWrap .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-position-y:0%}
.loginWrap .loginW{ position:relative; width:1200px; max-width:95%; background:#fff; border-radius:var(--pgSubRd); display:flex; overflow:hidden}
.loginWrap .loginW .wrapInc{ width:50%; box-sizing:border-box; display:flex; flex-direction:column; gap:2em}
.loginWrap .loginW .wrapInfo{ flex:1 1 0%; min-width:0; padding:3em;}
.loginWrap .loginW .wrapForm{ width:42%; background:var(--siteC); padding:3em;}
.loginWrap .copyright{ color:#fff; font-size:.813em; text-transform:uppercase; opacity:.7}

.loginForm{ display: flex; flex-direction:column; gap:1em; color:#fff}
.loginForm > li{ position:relative}
.loginForm > li .lab{ position:relative; padding:0 0 0 4em}
.loginForm > li .lab .icon{ position:absolute; left:0; top:50%; width:4em; transform:translateY(-50%); text-align:center; font-size:1em; z-index:1}
.loginForm > li .lab .icon:before{ font-size:1.25em}
.loginForm > li .lab .txt{ position:absolute; left:4em; top:50%; line-height:1em; margin-top:-.5em; padding:0 .25em; transition:.3s; background:var(--siteC)}
.loginForm > li .lab .inp{ width:100%; box-sizing:border-box; padding:1em 0; padding-right:40%; height:4em; border:none; position:relative; z-index:1; background:none; font-weight:bold; font-family:tahoma,sans-serif}
.loginForm > li .lab .inp:-webkit-autofill,
.loginForm > li .lab .inp:-webkit-autofill:hover,
.loginForm > li .lab .inp:-webkit-autofill:focus,
.loginForm > li .lab .inp:-webkit-autofill:active {transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px var(--siteC) inset !important; -webkit-text-fill-color: #fff !important;}
.loginForm > li .lab .line{ content:""; position:absolute; left:-1px; top:-1px; width:100%; height:100%; background:var(--siteC); border:1px solid rgba(255,255,255,.2); border-radius:var(--pgObjRd); transition:.3s}
.loginForm > li .lab .inp:focus ~ .txt,
.loginForm > li .lab .inp.on ~ .txt{ transform:scale(.9,.9); top:0; margin-left:-.5em; color:#fff; z-index:1}
.loginForm > li .lab .inp:focus ~ .icon,
.loginForm > li .lab .inp.on ~ .icon{ color:#fff}
.loginForm > li .lab .inp:focus,
.loginForm > li .lab .inp.on{}
.loginForm > li .error{ position:absolute; right:0; top:0; height:100%; width:40%; z-index:1; border-radius:.5em; box-sizing:border-box; padding:0 1em; display:flex; align-items:center; gap:1em; color:lightcoral; font-size:.875em; font-weight:700; line-height:1.1; word-break:keep-all; display:none}
.loginForm > li .error:before{ content:"\ec73"; font-family:fontello}
.loginForm > li.titW{ padding-top:1em}
.loginForm > li.titW .t1{ font-size:1.875em; letter-spacing:-.05em; word-spacing:.2em}
.loginForm > li.selectW{ background:rgba(255,255,255,.2); border-radius:var(--pgObjRd); padding:.75em 2em; display:flex; justify-content:center; align-items:center; gap:2em; margin-bottom:.5em}
.loginForm > li.checkW{ font-size:.938em}
.loginForm > li.btnW{ display:flex; gap:.5em}
.loginForm > li.btnW .btn{ flex:1; padding:0; height:3.5em; font-size:1.125em; border:1px solid transparent; border-radius:var(--pgObjRd); background:var(--siteC2); color:#fff; border:none; font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center; gap:.5em}
.loginForm > li.btnW .btn .fi{ font-size:1.25em}
.loginForm > li.btnW .btn.c1{ background:#fff; color:var(--siteC2)}
.loginForm > li.linkW{ display:flex; align-items:center; justify-content:center; text-align:center; margin-top:1em}
.loginForm > li.linkW > a{ padding:0 2em; position:relative; font-size:.938em; opacity:.7}
.loginForm > li.linkW > a:after{ content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%); width:1px; height:70%; background:#fff}
.loginForm > li.linkW > a:last-child:after{ display:none}
.loginForm > li.linkW > a:hover{ text-decoration:underline}

/**/
.gridWrap{ flex:1; min-height:0; width:100%; box-sizing:border-box; gap:calc(var(--pgLyGap) * 2) var(--pgLyGap); display:grid}
.gridEl{ border:1px solid #ddd; border-radius:var(--pgSubRd); padding:1.5em; position:relative}
.gridEl.p1{ padding:2.5em}
.gridEl .gridTit{ position:absolute; left:0; top:0; transform:translate(1em, -50%); backdrop-filter:blur(3em); padding:0 .5em; display:flex; gap:.5em; align-items:center}
.gridEl .gridTit .tit .t1{ font-weight:700; font-size:1.25em}
.gridWrap.main{ grid-template-columns: 55% minmax(0, auto); grid-template-rows:auto auto 1fr;}
.gridWrap.main .gridEl.wrap0{ grid-column: 1 / 3}
.gridWrap.main .gridEl.wrap2{ min-height: 0}
.gridWrap.main .gridEl.wrap3 { grid-row: 2 / 4; grid-column: 2 / 3; min-height: 0}

.moreSt{ width:1.75em; height:1.75em; border-radius:50%; border-bottom-left-radius:0; background:#fff; display:flex; align-items:center; justify-content:center; transition:.3s}
.moreSt:before{ font-family:fontello; content:"\e819"}
.moreSt:hover{ background:var(--siteC); color:#fff}

.mainVisualWrap .slideW{ position:relative }
.mainVisualWrap .mainVisualSlide{ margin:0 calc(var(--pgLyGap) /2 * -1)}
.mainVisualSlide .el{ width:16.66%}
@media screen and (max-width:1680px){
.mainVisualSlide .el{ width:20%}
}
.mainVisualSlide .el .in{ margin:0 calc(var(--pgLyGap) / 2)}
.mainVisualSlide .el .in .bg{ border-radius:var(--pgSubRd); overflow:hidden; position:relative}
.mainVisualSlide .el .in .bg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; border:.5em solid var(--siteC); border-radius:inherit; opacity:0; transition:.3s}
.mainVisualSlide .el .in .bg .resize{ padding-bottom:100%}
.mainVisualSlide .el:hover .in .bg:after{ opacity:1}

.mainQuick{ display:flex}
.mainQuick > li{ width:16.66%}
.mainQuick > li > a{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5em; color:#888; transition:.3s}
.mainQuick > li > a .ico{ padding-top:.5em}
.mainQuick > li > a .ico .fi{ font-size:2em}
.mainQuick > li > a .tt{ font-size:.938em; font-weight:500}
.mainQuick > li > a:hover{ color:var(--siteC)}

.classSt{ border:2px solid #ddd; border-radius:var(--pgSubRd); background:#fff; padding:4%; gap:var(--pgLyGap); display:flex; flex-direction:column; justify-content:center;  box-sizing:border-box; position:relative}
.classSt .classCon{ width:100%; box-sizing:border-box; display:flex; gap:inherit}
.classSt .classCon .wrapCon{ flex:1 1 0%; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:.75em;}
.classSt .classCon .wrapCon.s1{ font-size:1.0625em}
.classSt .classCon .wrapBtn{ flex:0 0 auto; display:flex; gap:.5em; align-items:flex-end}
.classSt .classCon .wrapBtn .st{ flex:1 1 0%; min-width:5em; background:var(--siteC); border-radius:var(--pgObjRd); color:#fff; box-sizing:border-box; gap:.5em; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:.5em; position:relative; min-height:5.25em}
.classSt .classCon .wrapBtn .st .ico{ font-size:1.5em}
.classSt .classCon .wrapBtn .st .ico.regist:before{ content:"\ee49"}
.classSt .classCon .wrapBtn .st .ico.subject:before{ content:"\ec38"}
.classSt .classCon .wrapBtn .st .ico.subject:before{ content:"\ec38"}
.classSt .classCon .wrapBtn .st .t1{ font-size:.875em; font-weight:500}
.classSt .classCon .wrapBtn .st.c1{ background:#555}
.classSt .classCon .wrapBtn .st.c2{ background:green}
.classSt .classCon .wrapBtn .st.go .:hover{ position:relative}
.classSt .classCon .wrapBtn .st.go .goW{ position:relative; overflow:hidden; width:100%}
.classSt .classCon .wrapBtn .st.go .goW .obj{ width:100%; transition:.3s}
.classSt .classCon .wrapBtn .st.go .goW .obj.next{ position:absolute; left:100%; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; gap:.25em}
.classSt .classCon .wrapBtn .st.go .goW .obj.next:after{ content:"\e85f"; font-family:fontello; font-size:.75em}
.classSt .classCon .wrapBtn .st.go:hover .goW .obj{ transform:translateX(-100%)}
.classSt .classInfo{ margin-top:auto}
.classSt .cInc{ display:flex; flex-direction:column}
.classSt .titW{ gap:.5em}
.classSt .titW .state{ gap:4px; display:flex;}
.classSt .titW .state .st{ height:1.875em; border-radius:.5em; display:flex; align-items:center; padding:0 .5em; font-weight:700; background:#aaa; color:#fff; font-size:.813em; border:1px solid transparent}
.classSt .titW .state .st.c1{ background:lightcoral}
.classSt .titW .state .st.c2{ background:mediumseagreen}
.classSt .titW .state .st.c3{ background:rosybrown}
.classSt .titW .state .st.st1.c1{ background:#111}
.classSt .titW .state .st.st1.c2{ background:#999}
.classSt .titW .state .st.st1.c3{ border-color:#333; background:#fff; color:#333}
.classSt .titW .state .st.pack{ background:var(--siteGra)}
.classSt .titW .tit{ display:flex; flex-direction:column; gap:.125em}
.classSt .titW .tit .t1{ font-weight:700; font-size:1.125em; line-height:1.2}
.classSt .titW .tit .ts{ font-size:.938em; color:#888}
.classSt .titW .tit .plus{ width:1.5em; height:1.5em; border-radius:50%; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center}
.classSt .titW .tit .plus:before{ content:"\e819"; font-family:fontello}
.classSt .titW .tit .point{ color:#06C}
.classSt .dateW{ gap:.25em}
.classSt .dateW > li{ display:flex; align-items:center; color:#666; font-size:.875em; gap:.5em}
.classSt .dateW > li:before{ content:""; width:.25em; height:.25em; border-radius:50%; background:#aaa}
.classSt .dateW > li .tit{ width:2.5em; display:flex; align-items:center; font-weight:700}
.classSt .dateW > li .tit.w1{ width:5em}
.classSt .dateW > li .tit:after{ content:":"; margin-left:auto}
.classSt .dateW > li .tt{ flex:1 1 0%; min-width:0; font-weight:500; letter-spacing:-.025em; word-spacing:.1em}
.classSt .dateW > li .tt .t1{ font-weight:700; font-size:1.063em; color:var(--siteC)}
.classSt .layer{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.6); border-radius:inherit; color:#fff; display:flex; flex-direction:column; gap:1em; align-items:center; justify-content:center; text-align:center; box-sizing:border-box; padding:inherit; visibility:hidden; opacity:0; transition:.3s}
.classSt .layer .t1{ font-weight:700; font-size:1.313em; letter-spacing:-.05em; word-spacing:.1em}
.classSt .layer .input_st.s2{ padding:1.25em}
.classSt:hover .layer{ visibility:visible; opacity:1}
.classSt:not(.pre):hover{ border-color:var(--siteC)}
.classSt .classSt,
.classSt .classSt:hover{ border-color:#eee}
.classSt.pre{ background:#f5f5f5; border-color:transparent}
.classSt.s1{ padding:3%}
.classSt.s1 .classCon{ font-size:1.063em}
.classSt.st1{ flex-direction:row}
.classSt.st1 .classCon{ width:45%}
.classSt.st1 .classInfo{ flex:1 1 0%; min-width:0}
.classSt.pack{ flex-direction:column}

.mainClassWrap{ display:flex; flex-direction:column; height:100%}
.mainClassWrap .mainClassSlide{ flex:1 1 0%; min-height:0; max-width:100%; margin:0}
.mainClassWrap .mainClassSlide .el{ height:50%}
.mainClassWrap .classSt{ height:calc(100% - .5em); margin:.25em 0}
.mainClassWrap .classSt:not(:hover) .classCon .wrapBtn{ opacity:0; transition:.3s}

.classList{ display:flex; flex-wrap:wrap; gap:var(--pgLyGap)}
.classList .classSt{ width:calc(50% - (var(--pgLyGap) / 2))}
.classList.d0 > .classSt{ width:100%}

.mainBoard{ display:flex; flex-direction:column; height:100%; box-sizing:border-box; padding-top:.5em; overflow-y:auto}
.mainBoard > li{ flex:0 0 auto; height:14.28%; margin-top:0 !important; display:flex; align-items:center}

/**/
.subSearch{ padding:1.5em; padding-top:1em; background:#f5f5f5; border-radius:var(--pgSubRd);}
.subSearch .el{ display:flex; align-items:flex-start; margin-top:.5em}
.subSearch .el .titW,
.subSearch .el .conW{ min-height:3em; display:flex; align-items:center;}
.subSearch .el .titW{ width:10em; padding-left:1em}
.subSearch .el .titW .ico{ width:1.5em}
.subSearch .el .titW .t1{ font-size:1.063em; font-weight:700}
.subSearch .el .conW{ --searchObjW: 9em; --searchObjG: .25em; flex:1 1 0%; min-width:0; display:flex; flex-wrap:wrap; gap:var(--searchObjG)}
.subSearch .el .conW .label_st,
.subSearch .el .conW .input_st{ min-width:var(--searchObjW)}
.subSearch .el .conW .w1{ width:calc(var(--searchObjW) * 2 + var(--searchObjG))}

.pgLine{ height:.5em; margin:3em 0; background: linear-gradient(135deg, #eee 25%, transparent 25%, transparent 50%, #eee 50%, #eee 75%, transparent 75%, transparent); background-size: .5em .5em;}

.cssCount{ counter-increment: cssCount}
.cssCount .no:before{ content:counter(cssCount)}

.commaSt .obj:not(:last-child):after{ content:","}

.jsView2,
.jsAreaAdd .clone{ display:none !important}

.tabSt{ display:flex; border:1px solid #ddd; border-radius:1em; padding:2px; gap:2px}
.tabSt > li{ flex:1 1 0%; min-width:0}
.tabSt .tabIdx{ display:flex; align-items:center; text-align:center; justify-content:center; height:4em; border-radius:1em; box-sizing:border-box; width:100%; background:#f5f5f5; border:none; color:#888; position:relative; border:2px solid transparent; position:relative}
.tabSt .tabIdx .t1{ font-size:1.125em; font-weight:700}
.tabSt .tabIdx.on{ background:#fff; color:var(--siteC); border-color:var(--siteC); z-index:1; box-shadow:0 0 1em rgba(0,0,0,.1)}

.jsAttrNum:before{ content:attr(data-num)}
.progSt{ width:100%; height:100%; background:#eee; border-radius:.5em; position:relative}
.progSt .in{ position:absolute; left:0; top:0; height:100%; border-radius:inherit; background:var(--siteC)}