/*===================== 출석체크 =====================*/
.bingo .btn {
   background: var(--color8E6EFF);
   font-size: 2.4rem;
   padding:0 2rem;
   font-weight: 500;
   height: 10rem;
   line-height: 10rem;
   width: 100%;
   max-width: 480px;
   margin-top: 8rem;
   border: none;
   border-radius: 20px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
   color: #fff;
   transition: all .3s;
}
.content.wd3_3 {
   padding: 0px
}

.checkBg1 {
   background: #DAEDFE url('/../images/web/content/check_tree.png')no-repeat 50% bottom;
   padding: 6rem 2rem 6rem;
}

.checkBg1 .subTit {
   margin: 4rem 0;
   font-size: 2.4rem;
   color: #01387F;
   line-height: 1.5;
   font-weight: 500;
}

.checkBg1 .subTit b {
   color: #ea2456;
}

.check_view {
   margin: 6rem auto 0;
   max-width: 60rem;
}

.check_form {
   position: relative;
   padding-top: 2.57rem;
}

.check_form h3 {
   position: absolute;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
   display: block;
   background: #1979FB;
   color: #fff;
   border-radius: 4rem;
   height: 8rem;
   line-height: 8rem;
   width: 50%;
   font-size: 1.8rem;
}

.check_form h3 span {
   margin-right: 3rem;
   padding-right: 3.5rem;
   border-right: 1px solid #3086FB;
}

.check_form .checkCon {
   font-family: 'KyoboHand';
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   border-radius: 1rem;
   border: 1px solid #1979FB;
   box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
   padding: 4rem 2rem 2rem;
   font-size: 2.8rem;
   line-height: 1.3;
   min-height: 30rem;
}

.check_form .submitBtn {
   background: #3366CC;
   border-color: #2357A1;
   color: #fff;
}

.check_form .put_answer {
   background: #fff;
   font-size: 2rem;
}

.check_form .fileWrap {
   background: #acd5ff;
   border-radius: 10px;
   padding: 1.7rem 1.7rem 3rem;
   position: relative;
   margin-top: 2rem;
}

.check_form .fileWrap .filebox {
   background: #fff;
   padding: 2.5rem 1rem;
   border-radius: 10px;
}

.check_form .fileWrap .filebox label {
   display: block;
   padding-right: 0;
   margin-bottom: 1rem;
   background-color: #fff;
   border: 1px solid #fff;
   border-bottom-color: #fff;
}

.check_form .fileWrap .filebox input[type="file"] {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
}

.checkBg2 {
   position: relative;
   background: #DAEDFE url('../../images/content/check_bg2.jpg')no-repeat 50% 0;
   background-size: 100% auto;
   padding: 2rem 1.6rem 3rem;
}

.checkBg2:before {
   content: "";
   display: block;
   position: absolute;
   left: 5%;
   bottom: 6rem;
   width: 90%;
   height: 4rem;
   background: url("../../images/content/check_tree.png") no-repeat left top;
   background-size: 100%;
}

.checkBg2 .checkTit {
   padding: 0 5.4rem 0 2.4rem;
}

.checkBg2 p {
   text-align: center;
   margin: 2rem 0;
   color: #01387F;
}

.checkBg2 p b {
   color: #ea2456;
}

.checkBg2 p em {
   font-size: 1.2rem;
}

.check_calendar {
   width: 80rem;
   margin: 0 auto;
   min-height: 200px;
   filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.25));
   padding-top: 0;
}

.check_total {
   margin-bottom: 3rem;
   border-radius: 20px;
   background: #fff;
   overflow: hidden;
}

.check_total li {
   float: left;
   width: 50%;
   text-align: center;
   color: #005baa;
   height: 6rem;
   line-height: 6rem;
   font-size: 2.2rem;
}

.check_total li:first-child {
   border-right: 1px solid #D2E5F5;
}

.check_calenTop {
   position: relative;
   text-align: center;
   background: #366AB3;
   border-radius: 20px 20px 0 0;
   padding: 1rem 0;
   color: #fff;
   font-size: 2rem;
}

.check_calenTop:before,
.check_calenTop:after {
   content: "";
   display: block;
   position: absolute;
   top: -1.3rem;
   width: 2rem;
   height: 4rem;
   z-index: 1;
}

.check_calenTop:before {
   left: 2rem;
}

.check_calenTop:after {
   right: 2rem
}

.check_calenTab {
   background: #fff;
   border-radius: 0 0 20px 20px;
   overflow: hidden;
}

.check_calenTab thead th {
   background: #01C5F9;
   padding: 1rem;
   color: #fff;
   border-left: 1px solid #98DAEB;
   font-weight: 500;
   font-size: 1.4rem;
}

.check_calenTab thead th:first-child {
   border-left: none;
}

.check_calenTab tbody td {
   position: relative;
   padding: 2rem 1rem 1rem;
   border-left: 1px solid #eee;
   border-top: 1px solid #eee;
   text-align: center;
}

.check_calenTab tbody td:first-child {
   border-left: none;
}

.check_calenTab tbody td span {
   position: absolute;
   right: 1rem;
   top: 1rem;
   font-size: 1.6rem;
   line-height: 1;
}

.check_calenTab tbody td.sun span {
   color: #ff0000;
}

.check_calenTab tbody td.sat span {
   color: #366AB3;
}

.check_calenTab tbody td img {
   filter: grayscale(100%);
   opacity: 0.3;
}

.check_calenTab tbody td.check img {
   filter: grayscale(0%);
   opacity: 1;
}

.innerPop .now_pop.check_pop {
   background: none;
}

.innerPop .check_pop .checkImg {
   width: 30rem;
   animation-duration: 5s;
   animation-iteration-count: infinite;
}

.innerPop .check_pop .viewbtn {
   background: #3AAAF8;
   font-size: 2.6rem;
   font-weight: 600;
   padding: .6rem 5rem;
   border-radius: 4rem;
   color: #fff;
}

.innerPop .check_pop .spoint {
   margin-bottom: 6rem;
}

.innerPop .check_pop .spoint strong {
   display: block;
   text-align: center;
   color: #FF515B;
   font-size: 6rem;
   margin-bottom: 2rem;
}

.innerPop .check_pop .spoint img {
   width: 80%;
}

.innerPop .check_pop .go {
   display: block;
   margin-top: 6rem;
}

.content.wd3_3.after .con {
   max-width: 1200px;
   margin:0 auto;
   position: relative;
   z-index: 2;
   filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.1));
}

.content.wd3_3.after.bingo .checkBg1 {
   position: relative;
   padding: 6.5rem 2rem 5rem;
   background: url('/img/web/sub/sub02/sub03-03_bg.png') center / cover no-repeat;
   border-radius: 1rem;
}

.content.wd3_3.after.bingo .checkBg1::before {
   content: '';
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('/img/web/sub/sub02/sub03-03_article.png') top 10rem center / contain no-repeat;
}

.content.wd3_3.after.bingo .checkBg1::after {
   content: '';
   position: absolute;
   width: 11rem;
   height: 11rem;
   top: 6rem;
   right: 0;
   background: url('/img/app/sub01/mobile_sub01-01_item.png') center / cover no-repeat;
}

.content.wd3_3.after.bingo .checkBg1.list-page::after {
   display: none;
}

.content.wd3_3.after.bingo .checkBg1.list-page {
   padding-bottom: 30rem;
}

.content.wd3_3.after.bingo .checkBg1.list-page .bingo_wrap::after {
   content: '';
   width: 30rem;
   height: 30rem;
   position: absolute;
   top: -16rem;
   z-index: -1;
   right: -18rem;
   background: url('/img/web/sub/sub02/sub03-03_item.png') center / cover no-repeat;
}

.content.wd3_3.after .tit>img {
   max-width: 90%;
}

.content.wd3_3.after .sub_tit {
   margin-top: 8rem;
   margin-bottom: 8rem;
   font-size: 3.6rem;
   font-weight: 800;
}

.content.wd3_3.after .check_view {
   margin-top: 4.7rem;
}

.content.wd3_3.after .check_form h3 {
   background: #8E6EFF;
   font-weight: 400;
   display: table;
   height: auto;
   line-height: inherit;
   border-radius: 1rem;
   padding:1.5rem 1rem;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
   z-index: 2;
   max-width: 480px;
}

.content.wd3_3.after .check_form h3 span {
   font-size: 1.8rem;
   display: table-cell;
   border-right: 0;
   padding-right: 0;
   margin-right: 0;
   font-weight: 500;
   vertical-align: middle;
}

.content.wd3_3.after .check_form h3 span.day {
   color: #A7DFD3;
   width:35%;
   border-right: 2px solid #fff;
}

.content.wd3_3.after .check_form .checkCon {
   position: relative;
   font-family: var(--nanumSquareRound);
   font-size: 1.6rem;
   font-weight: 400;
   border: none;
   border-radius: 2.5rem;
   min-height: 13.5rem;
   max-width:100%;
   color:#111;
}

.content.wd3_3.after .mark_article::before {
   content: '';
   position: absolute;
   width: 9rem;
   height: 12rem;
   left: -1rem;
   bottom: -7rem;
   background: url('/img/web/sub/sub02/sub03-03_lf_article.png') center / cover no-repeat;
   z-index: 50;
}
.content.wd3_3.after .check_bottom_article {
   position: relative;
   width: 100%;
   max-width: 17.5rem;
   height: 4.4rem;
   margin: -1.2rem auto 0;
   background: url('/img/web/sub/sub02/border-bottom_article.png') center / cover no-repeat;
   /* margin: -2rem auto; */
   /* z-index: 2; */
}

.content.wd3_3.after .check_bottom_article::after {
   content: '';
   position: absolute;
   top: -1.18rem;
   width: 100%;
   display: block;
   height: 2.2rem;
   background-color: #fff;
   /* z-index: 2; */
}
.content.wd3_3.after .submitBtn {
   background: #8E6EFF;
   font-size: 2.4rem;
   font-weight: 500;
   height: 10rem;
   line-height: 10rem;
   width: 100%;
   max-width: 480px;
   margin-top: 9rem;
   border: none;
   border-radius: 20px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
   color: #fff;
}

/* attend_mission 미션 페이  */
.content.wd3_3.after .check_form .put_answer {
   margin-top: 2.5rem;
   resize: none;
   border-radius: 2.5rem;
   font-size: 1.6rem;
   font-weight: 700;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
   padding: 1.5rem 2.5rem;
   color: #000;
}

.content.wd3_3.after .check_form .put_answer::placeholder {
   color: #C1C1C1;
}

.content.wd3_3.after .check_form .fileWrap {
   position: relative;
   margin-top: 2.4rem;
   background-color: #fff;
   margin: 5rem;
   min-height: auto;
   margin: 1rem 0 0;

}

.content.wd3_3.after .check_form .fileWrap .filebox {
   width: 100%;
   padding: 2.5rem 2rem;
   border: 5px dashed rgba(142, 110, 255, 0.25);
   border-radius: 2.5rem;
}

.content.wd3_3.after .check_form .fileWrap .filebox>p {
   font-size: 1.6rem;
   font-weight: 700;
   color: #111;
   margin-bottom: .5rem;
}

.content.wd3_3.after .check_form .fileWrap .filebox>p>span {
   color: #8E6EFF;
   font-weight: 800;
}

.content.wd3_3.after .check_form .fileWrap .filebox>span {
   color: #C1C1C1;
   font-size: 1rem;
   font-weight: 700;
   display: block;
   text-align: center;
}

#file_bg2 .fileup .filebox {
   padding: 20px;
}

/* attend_list 출석 빙고판 페이  */
.bingo_wrap {
   position: relative;
   font-family: var(--nanumSquareRound);
   font-size: 1.6rem;
   font-weight: 400;
   border: none;
   border-radius: 2.5rem;
   min-height: 26rem;
   background-color: #fff;
   margin: 3.5rem auto 0;
   padding: 0 1.5rem 4rem;
   max-width: 60rem;
}
.now_month {
   text-align: center;
   margin-top:4.7rem;
}

.now_month>h3 {
   display: inline-block;
   background: url('/img/web/sub/sub02/date_alert.png') center / cover no-repeat;
   font-size: 1.4rem;
   padding: 1.1rem 3.1rem 1.8rem;
   font-weight: 500;
   color: #3D3DCD;
}

.bingo_wrap table .sun,
.bingo_wrap table .sat {
   display: none;
}

.bingo_wrap table td {
   padding: .62rem .25rem;
   border: 0;
}

.check_calenTab {
   table-layout: fixed;
}

.check_calenTab tbody td img {
   opacity: 1;
   filter: none;
}

.check_calenTab tbody td img.wave {
   position: absolute;
   right: 0%;
   top: 10%;
   width: 40%;
   z-index: 2;
}
.check_calenTab tbody td.today span {
   color:var(--colorfff);
}
.bingo_wrap table td>span {
   color: #BDC7D2;
   right: auto;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 1.5rem;
   z-index: 1;
}

.bingo_wrap table td.check>span {
   display: none;
}

.bingo_wrap table th {
   position: relative;
   border-color: #ECF0F3;
   background-color: #fff;
   border-top: 1px solid #ECF0F3;
   border-bottom: 1px solid #ECF0F3;
   border-left: 0;
   padding: 1.2rem 0;
   color: #111;
   font-size: 1.2rem;
   font-weight: 400;
}

.bingo_wrap table th.Thu>span {
   position: relative;
}

.bingo_wrap table th.Thu>span::before {
   content: '';
   width: 2.1rem;
   height: 2rem;
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background: url('/img/web/sub/sub02/icon_DateThuCheck.png') center / cover no-repeat;
}

.checked_total {
   position: relative;
   display: flex;
   gap: .6rem;
   width: 100%;
   max-width: 387px;
   top: -2.5rem;
   margin: 0 auto;
   justify-content: center;
}

.comment_align {
   display: none;
}

.bingo_wrap .comment {
   color: var(--color000);
   font-size: 1.6rem;
   margin: 1rem 0 4rem;
   font-weight: 700;
   word-break: keep-all;
   text-align: center;
}
.content .con {
   line-height: 1.3;
}
.bingo_wrap .comment>span {
   color: #8E6EFF;
}

.checked_total>div {
   background-color: #8E6EFF;
   color: #fff;
   font-size: 1.8rem;
   font-weight: 400;
   align-items: center;
   display: flex;
   justify-content: center;
   border-radius: 1rem;
   height: 7.6rem;
   flex-basis: 6rem;
}

.checked_total>div:not(.day) {
   color: #A7DFD3;
   font-weight: 600;
   font-size: 4rem;
}

/* media query */
@media (min-width: 560px) {
   .bingo_wrap table td {
      padding: 1rem .5rem;
   }
}
@media(max-width:1300px) {
	/* attend_list 출석 빙고판 페이  */
	#react_nav > ul > li > button {
		padding-top: 42px;
		font-size: 14px;
	}
	#react_nav > ul > li > button > .count {
		font-size: 16px;
	}
}
@media (max-width:1030px){
	.check_form h3{ width:90%;}
}
@media(max-width:767px) {
   .content.wd3_3.after .sub_tit {
      font-size:3rem;
   }
	.content.wd3_3.after.bingo .checkBg1.list-page .bingo_wrap::after {
		width: 20rem;
		height: 20rem;
		top: -12rem;
		right: -10rem;
		background: url('/img/web/sub/sub02/sub03-03_item.png') center / contain no-repeat;
	}
	.content.wd3_3.after.bingo .checkBg1::before {
		background: url('/img/web/sub/sub02/sub03-03_article.png') top 4rem center / contain no-repeat;
	}
	.content.wd3_3.after.bingo .checkBg1.list-page {
		padding-bottom:11.2rem;
	}
	.checked_total {
		width:85%;
	}
}
@media (max-width: 460px) {
   .comment_align {
      display: block;
   }
}