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


/*body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
} */

main {
  flex: 1 0 auto;
}


/* start welcome animation */

body.welcome {
  background:#3db1e1;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;}

.welcome .splash {
  height: 0px;
  padding: 0px;
  border: 130em solid #fff;
  position: fixed;
  left: 50%;
  top: 100%;
  display: block;
  box-sizing: initial;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}

.welcome #welcome {
  background: #3db1e1;
  width: 56px;
  height: 56px;
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards, hide 2s 2.9s ease forwards;
}


@keyframes init {
  0% {
    width: 0px;
    height: 0px;
  }
  100% {
    width: 56px;
    height: 56px;
    margin-top: 0px;
    opacity: 1;
  }
}

@keyframes puff {
  0% {
    top: 100%;
    height: 0px;
    padding: 0px;
  }
  100% {
    top: 50%;
    height: 100%;
    padding: 0px 100%;
  }
}

@keyframes borderRadius {
  0% {
    border-radius: 50%;
  }
  100% {
    border-radius: 0px;
  }
}

@keyframes moveDown {
  0% {
    top: 50%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: 100%;
  }
}


.APPsplash-bmdx{
	overflow:hidden;}

.APPsplash-bmdx .aslide{
  position: absolute;
  width: 100%;
  height: 100vh;}

.APPsplash-bmdx .s-inner{
	width:100%;
	padding:20px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);}
.APPsplash-bmdx .slideN1{
  background-color:#0f263b;}

.APPsplash-bmdx .slideN2 {
  background-color:#2d5173;}

.APPsplash-bmdx .slideN3 {
  background-color:#7092b3;}

.APPsplash-bmdx .slideN4 {
  background-color:#a1cfd4;}

.APPsplash-bmdx .slideN5 {}

.APPsplash-bmdx .slideN1 .s-inner .copy01{
  color: white;
  font-size:55px;
  font-weight:bold;}

.APPsplash-bmdx .slideN1 .s-inner .copy02{
  color: white;
  font-size:55px;}

.APPsplash-bmdx .logo{
  position: absolute;
  left: 50%;
  top:200px;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);}
.APPsplash-bmdx .logo{
	background-size:300px 56px;
	width:300px;
	height:56px;}
.APPsplash-bmdx .logo + h2{
	width:100%;
	position:absolute;
	top:270px;}
.APPsplash-bmdx .logo + h2 span,
.appsubt{
    display: block;
    margin: 0 auto;
	padding:10px;
	width:300px;
	text-align:center;
	background-color:#30568c;
	color:#fff;
	font-size:1.3rem;}
.appsubt{
	width: 100%;
	max-width:300px;}


.APPsplash-bmdx .auth{
	padding-top:200px;}
.appst header{
	border-bottom: solid 1px rgba(0,0,0,0.2);
	box-shadow:2px 0 4px rgba(0,0,0,0.2);
	padding:10px 15px;}
.appst header .logo{
	width:160px;
	height:30px;
	margin-right:10px;}
.appst header .userd{
	font-weight:bold;}
.appst header + main{
	padding-top:80px;}
.appst main{
	flex:0;
	padding:50px 33px;}
.appst main .logo{
	margin:0 auto;}
.appst main .auth{
	margin-top:50px;}
.appst main .auth .btn{
	width:300px;}


.app-btn{
	background-color: #27ABEB;
    border: 2px solid #0b82bd;
    color: #000;
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    padding: 15px 30px;
    text-align: center;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;}
.app-btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;}
.app-btn:hover,
.app-btn:active {
	color: #fff;
	background:#33bcff;}

@media screen and (max-width:771px){
.appst .wrapper header{
	border-bottom:none;}
.appst .wrapper header > ul.flx{
    -webkit-justify-content: center;
    justify-content: center;}
.appst .wrapper > .container > .dblock > aside.left {
	background-color:transparent;
    top: 70px !important;}
.appst .wrapper > .container > .dblock > aside.left .defmenu > li.hover.current{
	background-color:transparent !important;}
.appst .wrapper > .container > .dblock > aside.left .defmenu > li > a{
	background-color: #27ABEB;
    border: 2px solid #0b82bd;
    color: #000;
    font-size: 1.7rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    padding: 15px 30px;
    text-align: center;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
	margin:10px;}
.appst .wrapper > .container > .dblock > aside.left .defmenu > li > a:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;}
.appst .wrapper > .container > .dblock > aside.left .defmenu > li > a:hover,
.appst .wrapper > .container > .dblock > aside.left .defmenu > li > a:active {
	color: #fff;
	background:#33bcff;}
}
.appst header + .container {
    padding-top:82px;}
.appst header + .container > .cont-inner{
	margin: 0 auto;}
.noticemsg{
	position:relative;
	background-color:#FDD0F3;
	padding:10px 10px;}
.noticemsg a{color: #000;}
.noticemsg .num{
	font-size:1.2rem;
	font-weight:bold;}
.appst .icon-mvst{
    width: calc((120px * 2) + (40px * 1));}
.appst .grid-top-gate .gatemenust {
    gap:30px 40px;
    grid-template-columns: repeat(2,1fr);}
.appst.appcont{}
.appst.appcont header{}
.appst.appcont header .back{
	padding: 0;
    position: absolute;
    left: 15px;}
.appst.appcont header .menus{
    position: absolute;
    right: 20px;}
.appst.appcont header .title {
    padding-left: 60px;
    padding-right: 60px;
    text-align: center;
    font-size: 1rem;}
.appst.appcont footer{
	background: #fff;
    width: 100%;
	padding:8px 15px;}
.appst.appcont footer a.btn{
	max-width:180px;
	margin: 0 auto;
	border-radius:6px;
	font-size: 1rem;
	padding:10px 15px;}
.appst.appcont footer .btnA{margin-top: 0;}
.appst.appcont footer .btnA .btn{
	min-width: 127px;
    margin-bottom:0px;
    margin-left:10px;
    margin-right:10px;}
.appst.appcont header + .container{
    padding-top: 43px;}

.top0.app-top{padding: 15px 25px 10px 25px;}
.top0 + .top.app-in{padding:5px 25px 25px 25px;}
.top.app-in .list{margin: 0 -25px;}
.app-in.thsticky{padding: 0;}
.app-in.wftr{
	height: calc(100vh - 220px);}
.app-in.wftr.thsticky{
	height: calc(100vh - 220px - 1px);}
.extend-set .app-in.wftr.thsticky{
    height: calc(100vh - 242px - 1px);}
.extend-set.on .app-in.wftr.thsticky{
    height: calc(100vh - 242px - 1px - 131px);}

@media screen and (max-width: 771px){
.app-in{
	height: calc(100vh - 120px + 12px);}
.app-in.wftr{
	height: calc(100vh - 220px + 12px + 12px);}
.extend-set .app-in.wftr.thsticky{
    height: calc(100vh - 242px - 1px + 12px + 12px);}
.extend-set.on .app-in.wftr.thsticky{
    height: calc(100vh - 242px - 1px - 131px + 12px + 12px);}

}
.app-in > iframe{height: 100%;}
.app-in > .box{
	font-size:.9rem;
	color: #000;
	min-height: 85px;
	padding: 13px;
	margin-bottom:15px;}

.app-attendance table td{
	padding:3px;
    font-size: 0.8rem;}
.app-attendance table .txto{width: 33px;}
.app-attendance table .timesel{width: 60px;}
.app-attendance table td i{
	font-size: 1.2rem;
	color: green;}
.dailyreport{}
.dailyreport > .box{
	background: #ddd;
	display: flex;
	justify-content:center;
	align-items: center;
     flex-direction:column;}
.dailyreport > .box .title{
	font-size:1.1rem;
	font-weight: bold;}
.dailyreport > .box.today{
	background-color: #fff;}
.dailyreport > .box.done{
	background-color: #fff;
	align-items:start;}
.dailyreport > .box.done .title{
	margin-bottom: 5px;}






.appst.appcont .flxclm-wrapper{
    height: calc(100vh);}
.appst.appcont header + .container .flxclm-wrapper{
    height: calc(100vh - 44px);}
.on_mobile.appst.appcont .flxclm-wrapper{
    height: calc(100vh - 44px - 77px);}
.on_mobile.appst.appcont .extend-set .app-in.wftr.thsticky {
    height: calc(100vh - 242px - 1px + 12px + 12px - 77px );}
.on_mobile.appst.appcont .extend-set.on .app-in.wftr.thsticky {
    height: calc(100vh - 242px - 1px - 131px - 77px );}
.on_mobile.appst.appcont .app-in {
    height: calc(100vh - 120px + 12px - 77px);}
.on_mobile.appst.appcont .app-in.wftr {
    height: calc(100vh - 220px + 12px + 12px - 77px);}
.on_mobile.appst.appcont .app-in.wftr.thsticky {
    height: calc(100vh - 220px - 1px  + 12px + 12px - 77px);}
.extend-switch{
	  display: block;
	  margin: 0 auto;
      width: 0;
      height: 0;
      border-left:14px solid transparent;
      border-right:14px solid transparent;
      border-bottom:10px solid #bbb;}
.extend-switch.on{
      border-bottom:none;
      border-left:14px solid transparent;
      border-right:14px solid transparent;
      border-top:10px solid #bbb;}



.appcom{
	background-color: #fff;}
.appcom header,
.appcom footer{
	width: 100%;
	position: fixed;
	left: 0;}
.appcom header{
	top:0;
	border-bottom: none;}
.appcom footer{
	bottom:0;}
.appcom header .cont-inner{
	height: 44px;
	padding:10px;}
.appcom header .cont-inner .icon-chevron-left{font-size: 1.7rem;}
.appcom header .cont-inner .icon-bell{font-size: 1.5rem;}
.appcom header .cont-inner .icon-rotate-cw{font-size:1.4rem;}
.appcom header .cont-inner .title{font-size:.9rem; font-weight: normal;}
.appcom header .cont-inner a{position: relative;}
.appcom header .cont-inner a .num {
    position: absolute;
    bottom: -3px;
    right: -5px;}
.appcom footer{
    z-index: 123;
	background-color: #fff; border-top:solid 1px #ccc;}
.appcom footer .cont-inner{padding:9px 0 7px 0;}
.appcom footer li {
	width: 20%;}
.appcom footer a{
	position: relative;
	font-size: .6rem;
	line-height: 1;
	font-weight:normal;
	color:#999;}
.appcom footer a .icont{
	display: flex;
	width: 30px;
	height:30px;
	margin-bottom:3px;
    justify-content: center;
    align-items: center;}
.appcom footer a .num{
    position: absolute;
    bottom: 10px;
    right: -10px;}
.appcom footer a i{font-size:1.6rem; margin-bottom: 5px;}
.appcom footer a i.icon-check{font-size:1.8rem; font-weight: bold;}
.appcom footer .current a{
	color:#0077EF; font-weight:bold;}

.appcom .mainmsg{
	background-color: #ffe6e6;
	padding: 0;
    border-bottom: solid 1px #d1b0b0;
    border-top: solid 1px #d1b0b0;}
.appcom .mainmsg .title{
	background-color: rgba(0,0,0,0.1);
	padding:4px 10px 2px 10px;
	box-shadow:0 -1px 0px 0 rgba(255,255,255,.3) inset,
	0 1px 0 0 rgba(0,0,0,.15) ;}
.appcom .mainmsg .txt{padding: 10px;}

.appcom main > .cont-inner{
	padding: 58px 14px 80px 14px;}
.appcom main .flxclm-wrapper > .cont-inner{padding: 14px;}
.appcom main .list.fullmod{
    margin-left: -14px;
    margin-right: -14px;}
.appcom main .list.fullmod .list-i{padding:8px;}
.appcom main > .flxclm-wrapper{
	margin-top:44px;
	height: calc(100vh - 44px - 58px);}
.doc-cal > ul{
	width: 272px;
	border-right:solid 2px #000;
	border-bottom:solid 2px #000;}
.doc-cal > ul > li{
	background-color: #fff;
	padding: 5px;
	width: 90px;
	border-left:solid 2px #000;
	border-top:solid 2px #000;
	height:90px;}
.doc-cal > ul > li .date{height: 20px;}
.doc-cal > ul > li .sts{height:60px;}
.doc-cal > ul > li .sts i{
	font-size: 3rem;}
.doc-cal > ul > li .sts img{
	height: 50px;}
.doc-cal > ul > li .sts .icon-circle-o{color:#FF004C;}
.doc-cal > ul > li .sts .icon-x{color:#bbb;}
.cmtinfo img{width: 100px;}
.APPsplash-bmdx.cube .slideN1{background-color:#E5F8FF;}
.cube .aslide .maintitle{
    font-size: 2.5rem;}
.cube .aslide .tax{
    font-size: 5rem;
    font-weight: bold;
    position: absolute;
    top: 50px;}

.dataBox{
	box-shadow:
		rgb(0 0 0 / 50%) 0px 1px 4px -1px,
		rgb(255 255 255 / 100%) 0px -1px 0px 0px;
	position:relative;
	border-radius:10px;
    background: linear-gradient(135deg,#9effda,#8adaff);
    position: relative;}
.dataBox.expectations-data {
    background: linear-gradient(135deg,#dfe0d7,#e8e5d8);}
.dataBox .deco{
	width: 100%;
    height: 40px;
    position: absolute;
    top: 40px;
    overflow: hidden;}
.dataBox .deco svg{width: 100%; height: 66px; }
.dataBox .title{font-size: 1.5rem;  padding: 10px; color:#00424f;}
.dataBox .body{
	background: #fff;
	border-radius:0 0 10px 10px;
    margin-top: 25px;
    padding:6px 26px 16px 26px;}
.dataBox .body .subtitle{font-size: .8rem;}
.dataBox .body .num-data{font-size:1.8rem;}
.dataBox .body .num-data span{font-size: 0.8rem;}
.bg-a {
  animation:slide 10s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #b1e0be 50%, #32a852 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;}
.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:8s;}

.bg3 {
  animation-duration:12s;
}
@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

.appcom main .list.fullmod.doc-data .list-i{
	padding:0;
    font-size:1rem;}
.appcom main .list.fullmod.doc-data .list-i .date{
	padding: 8px;
    text-align: right;
    width: 70px;
    background-color: #f7f7f7;
    border-right: dotted 1px #ddd;}
.appcom main .list.fullmod.doc-data .list-i .sts{
	display: flex;
	align-items: center;
	padding: 8px;}
.appcom main .list.fullmod.doc-data .list-i .sts > span{
	display: flex;
	align-items: center;
    margin-right: 20px;}
.appcom main .list.fullmod.doc-data .list-i .sts > span:last-child{
    margin-right: 0px;}
.appcom main .list.fullmod.doc-data .list-i .sts > span i{
	font-size: 1.3rem;
    margin-right: 5px;}
.appcom .linkbox > .arrlink{font-size: 2rem;}


.appst .icon-mvst.grid-top-gate .gatemenust a .num{
    line-height: 28px;
    right: -5px;
	bottom: 20px;}

#cube{height: 100dvh;}
#cube a{color:var(--kclr);}
#cube a.-st02{color:var(--kclr2);}
#cube .kclr{color:var(--kclr); }
#cube .kclr2{color:var(--kclr-txt2); }
#cube .btn{
	text-align: center;
	background-color:var(--kclr);
	display: flex;
	align-items: center;
	justify-content: center;
    color: #fff !important;}
#cube .btn:not(.sq){
	border-radius: 32px;
    font-size:.95rem;
	min-width:72px;
    padding:10px 18px;}
#cube .btn.inlb{
	display: inline-block;}
#cube .btn.-st02{
	background-color:var(--kclr2);}

#cube .auth .btn,
#cube .btn.-lg{
    font-size:1.1rem;
    padding:12px 28px;}
#cube .btn.linest{
	color:var(--kclr) !important;
	background-color: #fff;
	border:solid 2px var(--kclr);
    padding:8px 16px;}
#cube .btn.-dft{
    padding:2px;
    min-width:0;}
#cube .btn.mw0,
#cube .btn.rnd{
    min-width:0;}
#cube .btn.-dft.linest{
    padding:0px;}
#cube .btn.pd_a5.pd_l10.pd_r10{
	padding:7px 9px !important;}
#cube main{}
#cube .content-box{
    margin: 0 auto;
    background: repeating-linear-gradient(0deg,
    #ccf0c7, #ccf0c7 1px,
    #fff 0px, #fff 2px);}
#cube .content-box.-dft{
	background: none;}
#cube .content-box .flxclm-wrapper{
	height: 100dvh;
	background-color: #fff;
	max-width: 600px;
    margin: 0 auto;}
#cube.contents header + main .content-box .flxclm-wrapper{
	height: calc(100dvh - 45px);}
#cube .content-box .flxclm-wrapper .header{
	padding:10px 20px;
	text-align: center;
    background-color: #63E320;}
#cube .content-box .flxclm-wrapper .header.-st02{
    background-color: #31a5e8;}
#cube .content-box .flxclm-wrapper .btn{
	width: 100%;
	max-width: 220px;}
#cube .content-box .flxclm-wrapper .footer{padding:20px 10px !important;}
#cube .content-box .form dl{margin-bottom:20px;}
#cube .content-box .form dt{
	font-weight: bold;
	font-size: 1rem;
	margin-bottom: 5px;}
#cube .content-box .form input[type="text"],
#cube .content-box .form input[type="password"]{
	font-size: 1.2rem;
	padding:2px 4px;
	background-color: #fff;
    height: 44px;}



#cube.contents{}
:root{
  --pd:22px;
  --pdhf:14px;
  --kclr:#1dc217;
  --kclr-txt:#2b9e00;
  --kclr2:#0091e6;
  --kclr-txt2:#0077bd;
}
#cube.contents header{
	border-bottom-color: #bbb;}
#cube.contents header,
#cube.contents footer {
    width: 100%;
    position: fixed;
    left: 0;}
#cube.contents header.-listscrl{
    position:relative;}
#cube.contents header .cont-inner .title {
    font-size:1.1rem;}
#cube.contents header .cont-inner a {
    position: relative;}
#cube.contents header:not(.flxclm):not(.top0) .cont-inner .left,
header:not(.flxclm):not(.top0) .cont-inner .right{
	position: absolute;}
#cube.contents header:not(.flxclm):not(.top0) .cont-inner .left:has(i),
#cube.contents header:not(.flxclm):not(.top0) .cont-inner .right:has(i){
    justify-content: center;
	width:50px;
	height:40px;}
#cube.contents header .cont-inner .left{
	left:0px;}
#cube.contents header .cont-inner .right{
	right:0px;}
#cube.contents header .cont-inner .right .num{
    background-color: red;
    color: #fff;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 3px;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
	padding-top: 2px;}
#cube.contents footer{
    bottom: 0;
    z-index: 123;
	background-color: #fff; border-top:solid 1px #ccc;}
#cube.contents footer .cont-inner{
	padding:0 !important;}
#cube.contents footer li {
	flex:1;}
#cube.contents footer a{
	padding:10px;
	position: relative;
	font-size: .6rem;
	line-height: 1;
	font-weight:normal;
	color:#999;}
#cube.contents footer a .icont{
	display: flex;
	width: 30px;
	height:30px;
	margin-bottom:3px;
    justify-content: center;
    align-items: center;}
#cube.contents footer a .num{
    position: absolute;
    bottom: 10px;
    right: -10px;}
#cube.contents footer a i{
	font-size:1.6rem;
	margin-bottom: 5px;}
#cube.contents footer a i.icon-home{
	font-size:2rem; }
#cube.contents footer .current a{
	color:var(--kclr);
	font-weight:bold;}
#cube.contents footer.hidden {
	transform: translateY(100%);}
#cube.contents footer.btmd.hidden {
	transform: translateY(0%);}
#cube.contents .cont-inner{
	padding:var(--pd) !important; }
#cube.contents .cont-inner-hf{
	padding:var(--pdhf) var(--pd) !important; }
#cube.contents .cont-inner-tb0{
	padding:0 var(--pd) !important; }
#cube.contents .cont-inner-lr0{
	padding:var(--pd) 0 !important; }
#cube.contents:has(footer) main{
    padding-bottom:80px !important;}
#cube table.def th,
#cube .dl-set.wline > dl.table > dt {
    background-color:#d6f2cb;}
@media screen and (max-width: 771px){
#cube .res-data > tbody > tr >td:before {
    background-color:#d6f2cb;}
}
#cube .toggle-btn.active {
    background-color:var(--kclr);}
#cube.contents header:not(.-listscrl) + main{
	padding-top: 44px;}
#cube.contents .mainTitle{
	font-weight: bold;
    font-size: 1.25rem;
	line-height: 1.1;
	background-color: #dedede;
	padding:var(--pdhf) var(--pd);}
#cube.contents .mainTitle.-dft{
	padding:0px 0px 12px 0px;
	background-color:transparent;}
#cube.contents .arr-link{
	padding:var(--pdhf) 44px var(--pdhf) var(--pd);
	position: relative;}
#cube.contents .list-i.arr-link{
	padding:var(--pdhf) 44px var(--pdhf) var(--pdhf); }
#cube.contents .arr-link.-txt{
	padding:var(--pd);}
#cube.contents .arr-link:before {
    position: absolute;
    top: 50%;
    right: var(--pdhf);
    font-size: 2rem;
	margin-top: -16px;}
#cube.contents .arr-link a{
	color: #000;}
#cube.contents .arr-link .num{
    line-height: 17px;
    position: absolute;
    right: 40px;
    top: 50%;
    margin-top: -10px;}
#cube.contents .arr-link .flx .fxw span{
	margin-right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	color: #fff;}
#cube.contents .arr-link .flx .fxw span i{
	font-size:1.8rem;}
#cube.contents .arr-link .flx .fxo{
	flex:1;}
#cube.contents .arr-link .flx .fxw .clr-01{
    background-color:#8fffd4;}
#cube.contents .arr-link .flx .fxw .clr-02{
    background-color:#ffd88f;}
#cube.contents .arr-link .flx .fxw .clr-03{
    background-color:#ff8ff4;}
#cube.contents .list .list-i{
	border-bottom:solid 1px #bbb;}
#cube.contents .list{
	border-top:solid 1px #bbb;}
#cube.contents .news a{
	margin-bottom: 5px;
	background: #fff;
	padding: 13px 20px;
	color: #000;}
#cube.contents .box{
	padding:12px 17px;}
#cube.contents .content-box.bg-white{
	background-blend-mode: color;}
#cube.contents .bg-white > .dl-set > dl{
	margin-bottom: 0 !important;
	padding:var(--pdhf) var(--pd);}
#cube header + main > .cont-inner{
	margin: 0 auto;
	padding:70px 20px 90px 20px;}
.sts-view-ani{
	position:relative;
	margin: 0 auto;
	width: 300px;}
.sts-view-ani img{width: 100%;}
.sts-view-ani .sts-app{position: absolute; width:50px;}
.sts-view-ani .sts-app{
    opacity:0;
	animation:fadeIn00 ease-in;
	animation-fill-mode:forwards;
	animation-duration:.5s;
	animation-delay:1.5s;}
@keyframes fadeIn00 { from { opacity:0; } to { opacity:1; } }




.pics-list {
	background-color: #fff;
    /*max-width: 600px;*/
	margin: 0 auto;
    width: 100%;
    overflow-y: auto;
    position: relative;}
.pics-list .pics-date{
	text-align: center;
    font-size: 1rem;
    background: #f7f7f7;
    padding:12px 10px 8px 10px;
    border-top: solid 1px #bbb;
    border-bottom: solid 1px #bbb;}
.pics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:3px;
  list-style-type: none;
  padding: 0;
  margin: 0;}
.pics-grid li {
  position: relative;
  background-color: #f0f0f0;
  border-radius:1px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  padding-top: 100%; }
.pics-grid img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;}
.pics-grid .spacetxt{
	color:#aaa;
	font-size: 2.5em;
	letter-spacing: -1px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;}

.pics-grid.-panelst{
	padding: 10px;
    gap:10px;
	background-color: #efefef;}
.pics-grid.-panelst li{
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	height: auto;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;}
.pics-grid.-panelst .paneltxt{
	color: #000;}
.pics-grid.-panelst img{
	position: relative;
}
/*.picfoot {
  position: fixed;
  bottom: -1000px;
  left: 0;
  right:0
  margin:0;
  width:600px;
  background-color: #f0f0f0;
  text-align: center;
  padding: 20px;
  transition: bottom 0.3s ease;}*/
.picfoot {
  max-width:600px;
	width: 100%;
	margin: 0 auto;
  background-color: #fff;
  text-align: center;
  padding: 20px;}
.zoomable {
  transition: transform 0.2s ease; /* 拡大縮小のアニメーションを滑らかに */
  transform-origin: center center; /* 拡大縮小の中心を画像の中央に設定 */
}



.zoomablemodal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.zoomablemodal.hidden {
  display: none;
}

.zoomablemodal-content {
  position: relative;
  width: 90%;
  max-width: 600px;
}

.zoomablemodal .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 10;
}

/* Swiperの中身 */
.zoomablemodal .swiper {
  width: 100%;
  height: 80vh;
}

.zoomablemodal .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.zoomablemodal .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}



#cube .checkradio.-btnst{
	color:var(--kclr);
	font-weight: bold;
	border:solid 2px var(--kclr);
    background-color:#fff;
    padding: 10px 16px;
    border-radius: 40px;
    position: relative;}
#cube .checkradio.-btnst .outer{
	left:12px;}
#cube .checkradio.-btnst:has(input:checked){
	color:#fff;
    background-color: var(--kclr);}
#cube .checkradio.-btnst input:checked + .outer {
    border: 2px solid var(--kclr);}
#cube .checkradio.-btnst.rnd .inner {
	background-color:var(--kclr);}


#cube.contents .flxclm-wrapper header,
#cube.contents .flxclm-wrapper footer{
	min-height: 54px;
	position: relative;}
#cube.contents:has(footer) .flxclm-wrapper main {
    padding-bottom: var(--pd) !important;}
#cube.contents .flxclm-wrapper header .hd-r-menu > li a i{
	color:var(--kclr);}
#cube.contents .flxclm-wrapper header .cont-inner {
    padding:8px var(--pd) !important;}
#cube.contents .flxclm-wrapper header > .cont-inner > .flx{
	height: auto;}
#cube.contents .flxclm-wrapper header + main {
    padding-top:0px;}
#cube.contents .-logo{
	font-weight: bold;
	font-size: 1.4rem;
	color:var(--kclr);}
@media screen and (max-width: 521px){
#cube.contents .-logo{display: none;}
}
#cube .menust.nav-tabs .nav-link.active + .line, #cube .menust.nav-tabs .nav-item:hover + .line {
    background-color:var(--kclr);}
#cube.contents .hd-r-menu > li.current > a,
#cube.contents .hd-r-menu > li > a.active {background-color:var(--kclr);}
#cube.contents .flxclm-wrapper header .hd-r-menu > li.current a i {
    color:#fff;}
#cube.contents .cont-inner .list.fullmod{
    margin-left: -20px;
    margin-right: -20px;}
#cube.contents .flx.-col > .flx-i .defmenu li{position: relative;}
#cube.contents .flx.-col > .flx-i .defmenu a{
	font-size: .95rem;
	color:#000;}
#cube.contents .flx.-col > .flx-i .defmenu .def-trg{
    width: 30px;
    height: 30px;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -15px;
    display: flex;
    align-items: center;
    justify-content: center;}
#cube.contents .flx.-col > .flx-i .defmenu .def-trg i{
	font-size:2rem;}
#cube .box{
	box-shadow: none;
	border:solid 1px #aaa;}
#cube .-menuon.box,
#cube .-menuon.box:hover{
	border:solid 1px var(--kclr);
	background-color: #9BF45E !important;}

#cube .pagination a.active {
    background-color: var(--kclr);
    color: #fff;
    border: 1px solid var(--kclr);}
.-code{
	max-width: 420px;
	display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;}
.-code input{
    width: 100%;
    height:60px;
    text-align: center;
    font-size: 3rem;}