/* °øÅë */
.inner {padding:0 15px; box-sizing: border-box;}
img {width:100%;}
.bl_txt {color:#0071E8!important;}
.red_txt {color:#F14738!important;}
.attendance_wrap p {letter-spacing: -0.5px;}
.attendance_wrap h4 {font-weight: normal;}
@media (max-width: 320px) {
    * {font-size:inherit;}
}

/* °øÅëÆË¾÷ */
.attend_popup {position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.7); z-index:1000;}
.attend_popup .attend_layer {width:calc(100% - 50px); max-width:450px; padding:105px 20px 25px; background:#fff; text-align: center; border-radius:10px; box-sizing: border-box; position:absolute; top:50%; left:50%; transform:Translate(-50%, -50%);}
.attend_popup .layer_tit {padding:20px; border-bottom:1px solid #D8D8D8; box-sizing: border-box;}
.attend_popup .layer_tit .close_X {display:block; width:30px; height:30px; background:url('//image5.compuzone.co.kr/img/images/product_list22/pro_comparison_x2.png') center center/contain no-repeat; position:Absolute; top:15px; right:15px;}
.attend_popup .basic_layer {padding:0;}
.attend_popup .basic_layer .popup_cont {padding:20px 20px 25px;}
.attend_popup .attend_layer .popup_cont {display: flex; align-items: center; flex-direction: column;}
.attend_popup .attend_layer .popup_cont p + p {margin-top:10px;}
.attend_popup .attend_layer .popup_btn {width:100%; margin-top:20px;}
.attend_popup .attend_layer .popup_btn a {display:block; width:100%; height:52px; line-height:50px; border-radius:10px; text-align: center; background:#0D6DE3; color:#fff;}
/* º»ÀÎÀÎÁõ ÆË¾÷ ¾Ö´Ï¸ÞÀÌ¼Ç */
.attend_popup .attend_layer .popup_deco {width:120px; height:120px; position:absolute; top:-40px; left:50%; transform:Translatex(-50%);}
.attend_popup .attend_layer .popup_deco .ico1 {width:120px; position:absolute; top:0; right:0;}
.attend_popup .attend_layer .popup_deco .deco1 {width:74px; position:absolute; top:18px; left:-78px; animation:pop_deco1 2.2s infinite ease-in-out 0.5s;}
.attend_popup .attend_layer .popup_deco .deco2 {width:62px; position:absolute; top:-19px; left:112px; animation:pop_deco1 2.2s infinite reverse 0.5s;}
@keyframes pop_deco1 {
    0%,20%,32%,44% {transform:rotate(0);}
    26%,38% {transform:rotate(-8deg);}
}
/* Ãâ¼®Ã¼Å© ÆË¾÷ ¾Ö´Ï¸ÞÀÌ¼Ç */
.attend_popup .attend_layer .firecracker .ico1_1 {width:98px; position:absolute; top:22px; left:29px; opacity:0;}
.attend_popup .attend_layer .firecracker .deco3 {width:103px; position:absolute; top:-23px; left:-100px; overflow: hidden; transform:scale(0); animation:mscomp4 2.2s infinite ease-in-out 0.6s;}
.attend_popup .attend_layer .firecracker .deco3 img {width:103px;}
.attend_popup .attend_layer .firecracker .deco4 {width:24px; position:absolute; top:-20px; left:-17px; transform:scale(0); animation:mscomp4 2.4s infinite ease-in-out 0.2s;}
.attend_popup .attend_layer .firecracker .deco5 {width:60px; position:absolute; top:-44px; left:94px; z-index:-1; overflow: hidden; opacity:0; animation:pop_deco2 2.4s infinite ease-in-out 0.6s;}
.attend_popup .attend_layer .firecracker .deco5 img {width:60px;}
.attend_popup .attend_layer .firecracker .deco6 {width:43px; position:absolute; top:11px; left:120px; overflow: hidden; opacity:0; animation:pop_deco3 2.5s infinite ease-in-out 0.3s;}
.attend_popup .attend_layer .firecracker .deco6 img {width:43px;}
.attend_popup .attend_layer .firecracker .deco7 {width:24px; position:absolute; top:-31px; left:169px; transform:scale(0); animation:mscomp4 2.4s infinite ease-in-out 0.5s;}

.attend_popup .attend_layer .firecracker .ico1_1 {animation:stamp forwards 0.7s cubic-bezier(.93,-.1,0,1.56) 0.5s;}
@keyframes pop_deco2 {
    0% {width:0;}
    30%,80% {width:60px; opacity:1;}
    100% {width:60px; opacity:0;}
}
@keyframes pop_deco3 {
    0% {width:0;}
    30%,80% {width:43px; opacity:1;}
    100% {width:43px; opacity:0;}
}
/* ¸ñÇ¥ÀÏ¿ÏÁÖ ÆË¾÷ ¾Ö´Ï¸ÞÀÌ¼Ç */
.attend_popup .attend_layer .target .ico1_1 {width:72px; position:absolute; bottom:0; right:0; animation:pop_deco5 2.6s infinite ease-in-out 0.5s;}
.attend_popup .attend_layer .target .deco8 {width:69px; position:absolute; top:-30px; left:0px; animation:pop_deco1 2.6s infinite ease-in-out 0.5s;}
.attend_popup .attend_layer .target .deco9 {width:79px; position:absolute; top:-32px; left:94px;}
@keyframes pop_deco5 {
    0%,20%,32%,44% {transform:translateY(0);}
    26%,38% {transform:translateY(-10px);}
}
@keyframes stamp {
    0% {opacity:0; transform:scale(1.3);}
    100% {opacity:1; transform:scale(1);}
}

/* ÀÎ±â»óÇ° ÆË¾÷ */
.slide_popzone {width:100%; height:100%; position:fixed; bottom:0; left:0; background:rgba(0,0,0,0.8); z-index:1005; display:none;}
.slide_popzone.on {display:block;}
.slide_popup {width: 100%; max-height:calc(80vh - 80px); min-height:50vh; height:100%;  box-sizing:border-box; position:absolute; bottom:0px; left:0; background:#fff; border-top-left-radius:25px; border-top-right-radius:25px; height: auto; max-height: unset; min-height: unset;}
.slide_pop {overflow-y: scroll; margin-top: 20px;}
.slide_con {max-height: calc(80vh - 80px);min-height: 50vh; padding: 0 20px; overflow: scroll;}
.popup_tit {padding:27px 0 23px; border-bottom: 1px solid #d8d8d8; margin: auto 20px;}
.popup_tit h2 {color:#3a3a3a; font-size:20px; text-align:center; word-break: keep-all; font-family: 'noto-B'; font-weight: normal;}
.popup_tit .close_X {display:block; width:30px; height:30px; background:url('//image5.compuzone.co.kr/img/images/product_list22/pro_comparison_x2.png') center center/contain no-repeat; position:Absolute; top:26px; right:15px;}
.slide_pop ul {display:block;}
.slide_pop ul li {display: flex; margin-bottom:10px;}
.slide_pop ul li .img_box {width:100px; height:100px; margin-right:15px; border-radius:10px; box-sizing: border-box; overflow:hidden; position:relative;}
.slide_pop ul li .img_box::before {content:''; width:100%; height:100%; background:rgba(0,0,0,0.02); position:absolute; top:0; left:0;}
.slide_pop ul li .img_box img {width:100%; height:100%;}
.slide_pop ul li .txt_box {width:calc(100% - 115px);}
.slide_pop ul li .txt_box p {font-size:15px; color:#3A3A3A; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slide_pop ul li .txt_box .bottom_box {display: flex; justify-content: space-between; align-items: center; margin-top:10px;}
.slide_pop ul li .txt_box .bottom_box .bat_zone {display: flex; gap:3px;}
.slide_pop ul li .txt_box .bottom_box .bat_zone span {display: block; height:26px; padding:4px 8px; border-radius: 5px; font-size:12px; font-family:'¸¼Àº°íµñ'; box-sizing: border-box;}
.slide_pop ul li .txt_box .bottom_box .bat_zone span.blbat {background:#F3FAFF; color:#0071E8;}
.slide_pop ul li .txt_box .bottom_box .bat_zone span.grbat {background:#FAFAFA; color:#6c6c6c;}
.slide_pop ul li .txt_box .bottom_box .price_zone {display: flex; align-items: baseline; font-size:11px; font-family:'noto-M'; font-weight: normal; color:#3A3A3A;}
.slide_pop ul li .txt_box .bottom_box .price_zone span {font-family:'spoqa M'; font-weight: bold;}
.slide_pop ul li .txt_box .bottom_box .price_zone .price {margin-left:6px;}
.slide_pop ul li .txt_box .bottom_box button {width:50px; height:30px; background:#fff; border:1px solid #D8D8D8; border-radius:5px; color:#6C6C6C; font-size: 13px; line-height: 30px;}
.slide_pop ul li .txt_box .bottom_box button.on {background:#0D6DE3 ; border: 1px solid transparent ; color:#fff;}
@media screen and (max-width: 355px) {
    .slide_pop ul li .txt_box .bottom_box {flex-direction: column-reverse; align-items: flex-start; gap:5px; margin-top:0;}
}
/* ¸ÞÀÎ */
.attend_main {width:100%; height:510px; position:relative;}
.attend_main .at_tit {max-width:750px; margin:0 auto; padding-top:38px; position:relative; z-index: 1;}
.attend_main .at_tit p {color:#1a1a1a;}
.attend_main .at_tit .month_tit {display: inline-block; height:28px; position:relative;}
.attend_main .at_tit .month_tit img {width:inherit; height:100%;}
.attend_main .at_tit .month_tit::before {content:''; width:17px; height:17px; background:url('//image5.compuzone.co.kr/img/images/attendance/main_deco_1.png') left center/contain no-repeat; position:absolute; top:-8px; right:-17px; animation:octagon 20s linear reverse infinite;}
.attend_main .at_tit .fix_tit {width:216px; margin:15px 0; position:relative;}
.attend_main .at_tit .fix_tit::before {content:''; width:0; height:15px; background:url('//image5.compuzone.co.kr/img/images/attendance/main_deco_back.png') left center/cover no-repeat; position:absolute; bottom:-5px; left:-10px; z-index:-1; overflow:hidden; animation:titline 0.5s forwards ease-in-out 1s;}
.attend_main .at_tit .fix_tit::after {content:''; width:28px; height:48px; background:url('//image5.compuzone.co.kr/img/images/attendance/main_deco_2.png') left center/contain no-repeat; position:absolute; top:-10px; right:-32px; transform-origin: bottom center; animation:titex 3s infinite ease-in-out 1.2s;}
@keyframes titline {
  0% {width:0;}
  100% {width:137px;}
}
@keyframes titex {
  0%,18%,24%,32% {transform:rotate(0);}
  20%,28% {transform:rotate(5deg);}
}
/* ¸ÞÀÎ-¹è°æÆÈ°¢Çü */
.attend_main .at_bg {width:375px; position:absolute; top:160px; left:50%; transform:TranslateX(-50%);}
.octagon_s {width:180px; height:180px; position:absolute; top:146px; left:-138px; animation:octagon 100s linear reverse infinite;}
.octagon_s::before {content:''; width:200px; height:200px; background:url('//image5.compuzone.co.kr/img/images/attendance/octa_bg.png') center center/contain no-repeat; position:absolute; top:50%; left:50%; transform:Translate(-50%, -50%);}
/* .octagon_L {width:330px; height:330px; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); position:absolute; top:5px; right:-74px; animation:octagon 100s linear infinite;} */
.octagon_L {width:330px; height:330px; position:absolute; top:5px; right:-90px; animation:octagon 100s linear infinite;}
.octagon_L::before {content:''; width:360px; height:360px; background:url('//image5.compuzone.co.kr/img/images/attendance/octa_bg.png') center center/contain no-repeat; position:absolute; top:50%; left:50%; transform:Translate(-50%, -50%);}
.at_bg.month1 .octagon {background:linear-gradient(to bottom, #F6496D, #F6496D,#FDF6B6);}
.at_bg.month2 .octagon {background:linear-gradient(to bottom, #94C2FF, #94C2FF,#DAC2FC);}
.at_bg.month3 .octagon {background:linear-gradient(to bottom, #8DF5C5, #8DF5C5,#F6FA85);}
.at_bg.month4 .octagon {background:linear-gradient(to bottom, #9064FA, #9064FA,#FFAAEE);}
.at_bg.month5 .octagon {background:linear-gradient(to bottom, #FFDC6D, #FFDC6D,#FF7A9A);}
.at_bg.month6 .octagon {background:linear-gradient(to bottom, #41D6B6, #41D6B6,#F3FF71);}
.at_bg.month7 .octagon {background:linear-gradient(to bottom, #33B4FF, #33B4FF,#4AFFB7);}
.at_bg.month8 .octagon {background:linear-gradient(to bottom, #4495FF, #4495FF,#92FCFF);}
.at_bg.month9 .octagon {background:linear-gradient(to bottom, #FF8B6D, #FF8B6D,#F3F4CE);}
.at_bg.month10 .octagon {background:linear-gradient(to bottom, #FFBD39, #FFBD39,#FFD5E6);}
.at_bg.month11 .octagon {background:linear-gradient(to bottom, #F16B19, #F16B19,#FFD494);}
.at_bg.month12 .octagon {background:linear-gradient(to bottom, #FF3B3B, #FF3B3B,#FFBB9C);}
@keyframes octagon {
  100% {transform:rotate(360deg);}
}
/* ¸ÞÀÎ-µ¥ÄÚ */
.main_deco {width:100%; height:350px; position:absolute; top:0; left:0;}
.main_deco .octagon_deco {width:184px; height:223px; position:absolute; top:27px; right:-42px; opacity:0.5; z-index:0;}
.month1 .octagon_deco, .month5 .octagon_deco, .month9 .octagon_deco, .month10 .octagon_deco, .month11 .octagon_deco, .month12 .octagon_deco {background:url('//image5.compuzone.co.kr/img/images/attendance/main_bg1.png') center center/contain no-repeat;}
.month3 .octagon_deco, .month6 .octagon_deco {background:url('//image5.compuzone.co.kr/img/images/attendance/main_bg2.png') center center/contain no-repeat;}
.month2 .octagon_deco, .month4 .octagon_deco, .month7 .octagon_deco, .month8 .octagon_deco {background:url('//image5.compuzone.co.kr/img/images/attendance/main_bg3.png') center center/contain no-repeat;}
.main_deco .coin1 {width:78px; position:absolute; top:0; left:140px; transform:rotate(-25deg); transform:scale(0); animation:coin1 0.5s forwards ease-in-out 1.42s, coin2 3s infinite ease-in-out 2.5s;}
.main_deco .coin2 {width:82px; position:absolute; top:154px; right:15px; transform:scale(0); animation:coin1 0.5s forwards ease-in-out 1.2s, coin2 3s infinite ease-in-out 2s; z-index:1;}
@keyframes coin1 {
    0% {transform:scale(0);}
    80% {transform:scale(1.1);}
    100% {transform:scale(1);}
}
@keyframes coin2 {
    0%, 100% {transform:translateY(0);}
    50% {transform:translateY(15px);}
}
.main_deco .calender {width:310px; height:218px; position:absolute; top:106px; left:15px; transform:rotate(10deg); background-size:contain; background-position: center; background-repeat: no-repeat;}
.main_deco .calender::before {content:''; width:290px; height:10px; background:linear-gradient(to right, transparent, #000); border-radius: 50%; opacity:0.3; filter: blur(8px); position:absolute; bottom:-10px; left:19px; transform:rotate(-10deg);}
.main_deco .splash {display: block; width:168px; height:139px; position:absolute; bottom:0; right:0; background-size:contain; background-position: center; background-repeat: no-repeat;}
.month1 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_1.png');}
.month2 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_2.png');}
.month3 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_3.png');}
.month4 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_4.png');}
.month5 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_5.png');}
.month6 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_6.png');}
.month7 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_7.png');}
.month8 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_8.png');}
.month9 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_9.png');}
.month10 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_10.png');}
.month11 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_11.png');}
.month12 .calender {background-image:url('//image5.compuzone.co.kr/img/images/attendance/cld_12.png');}
.month1 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l1.png');}
.month2 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l2.png');}
.month3 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l3.png');}
.month4 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l4.png');}
.month5 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l5.png');}
.month6 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l6.png');}
.month7 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l7.png');}
.month8 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l8.png');}
.month9 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l9.png');}
.month10 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l10.png');}
.month11 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l11.png');}
.month12 .splash {background-image:url('//image5.compuzone.co.kr/img/images/digitallounge/digi_l12.png');}

/* ¹Ì¼Ç¿µ¿ª */
.attend_mission {width:100%; padding:30px 0; box-sizing: border-box;}
.attend_mission .mission_box {width:100%; max-width:750px; margin:0 auto;}
.attend_mission .mission_box + .mission_box {margin-top:15px;}
.attend_mission .mission_box .msbox1 {width:100%; height:293px; text-align: center; padding:18px 20px 42px; border:1px solid #D8D8D8; border-bottom:transparent; border-radius: 15px; box-sizing: border-box; position:relative; overflow: hidden;}
.attend_mission .mission_box .msbox2 {width:100%; height:120px; padding:20px; border:1px solid #D8D8D8; border-top:1px dashed #d8d8d8; border-radius: 15px; box-sizing: border-box; position:relative;}
/* ¹Ì¼Ç¹Ú½º1 */
.msbox1 .mstit {display: flex; flex-direction: column; gap:10px;}
.msbox1 .mstit>span {width:107px; height:26px; margin:0 auto;}
.msbox1 .mstit .flex {display: flex; align-items: center; justify-content: center; gap:10px;}
.msbox1 .mstit .bubble {padding:5px 12px; background:#0071E8; color:#fff; border-radius: 5px; box-sizing: border-box; position:absolute; left:calc(50% + 65px);}
.msbox1 .mstit .bubble::before {content:''; width:0px; height:0; border-bottom:6px solid transparent; border-top:6px solid transparent; border-right:10px solid #0071E8; border-left:10px solid transparent; position:absolute; left:-16px; top:7px;}
.msbox1 .msicon {margin:15px auto;}
.msbox1 .msicon .coupon {display: block; width:240px; height:100px; margin:0 auto;}
.msbox1 .msnoti {display: flex; flex-direction: column; gap:5px;}
/* ¹Ì¼Ç¹Ú½º1 - ¹Ì¼Ç¿Ï·á½Ã ³ëÃâ */
.mscomp {width:100%; height:100%; padding:18px 20px; background:rgba(0,0,0,0.8); border-radius:15px; box-sizing: border-box; position:absolute; top:0; left:0; display: none;}
.mscomp p, .mscomp p span {color:#fff;}
.mscomp .msicon {position:relative; width:240px; height:100px; margin:10px auto 20px;}
.mscomp .msicon .trophy {width:240px; height:110px; position:absolute; top:0; left:0;}
.mscomp .msicon .deco1 {width:140px; position:absolute; top:11px; left:50px; transform:scale(0); animation:mscomp1 0.4s forwards ease-in-out 0.7s, mscomp1_1 2s infinite alternate-reverse ease-in-out 1.4s;}
.mscomp .msicon .deco2 {width:184px; position:absolute; top:18px; left:24px; transform:scale(0); animation:mscomp1 0.3s forwards ease-in-out 0.6s, mscomp1_1 2s infinite ease-in-out 1.1s;}
.mscomp .msicon .deco3 {width:28px; position:absolute; top:10px; left:135px; transform-origin:bottom left; width:0; overflow:hidden; animation:mscomp3 2s infinite ease-in-out 1s;}
.mscomp .msicon .deco3 img {width:28px;}
.mscomp .msicon .deco4 {width:10px; position:absolute; top:67px; left:80px; transform:scale(0); animation:mscomp4 2s infinite ease-in-out 1s;}
.mscomp .msicon .deco5 {width:30px; position:absolute; top:12px; left:90px; opacity:0; animation:mscomp5 2.2s infinite ease-in-out 1s;}
.mscomp .msicon .deco6 {width:20px; position:absolute; top:42px; left:190px; opacity:0; animation:mscomp6 2s infinite ease-in-out 1s; }
@keyframes mscomp1 {
    0% {transform:scale(0);}
    80% {transform:scale(1.1);}
    100% {transform:scale(1);}
}
@keyframes mscomp1_1 {
    0%,100% {transform:translateY(0);}
    50% {transform:translateY(-5px);}
}
@keyframes mscomp3 {
    0% {width:0;}
    30%,80% {width:28px; opacity:1;}
    100% {width:28px; opacity:0;}
}
@keyframes mscomp4 {
    0% {transform:scale(0);}
    50% {transform:scale(0.8); opacity:1;}
    100% {transform:scale(1); opacity:0;}
}
@keyframes mscomp5 {
    0% {opacity:0;}
    30%,38%,46% {transform:rotate(0); opacity:1;}
    34%,42% {transform:rotate(5deg);}
    100% {opacity:0;}
}
@keyframes mscomp6 {
    0%,100% {opacity:0;}
    50% {opacity:1;}
}
.attend_mission .mission_box .msbox1.on .msing {filter: blur(15px);}
.attend_mission .mission_box .msbox1.on .mscomp {display: block; filter: none;}
/* ¹Ì¼Ç¹Ú½º2 */
.msbox2 .flex {display: flex; align-items: flex-start; justify-content: space-between;}
.msbox2 .flex>p {height:72px;}
.msbox2 .flex .ani {width:75px; height:75px;}
.msbox2 .flex .ani.shoes {position:absolute; right:20px;}
.msbox2 .flex .ani .shoes1 {display: block; width:65px; position:absolute; bottom:3px; right:50px; transform:rotate(15deg); z-index: 1;}
.msbox2 .flex .ani .shoes2 {display: block; width:65px; position:absolute; bottom:10px; right:0; transform:rotate(-15deg);}
.msbox2 .progress {width:100%; height:6px; border-radius:3px; background:#F2F2F2; overflow:hidden; position:relative;}
.msbox2 .progress>span {height:100%; background:#0071E8; position:absolute; top:0; left:0;}
.msbox2 .msbox2_fail .progress>span {background:#949494;}

/* Ãâ¼®Ã¼Å© ´Þ·Â */
.attend_calender {width:100%; padding:30px 0; box-sizing: border-box;}
.attend_calender.month1 {background:#FDF6B6;}
.attend_calender.month2 {background:#94C2FF;}
.attend_calender.month3 {background:#8DF5C5;}
.attend_calender.month4 {background:#FFAAEE;}
.attend_calender.month5 {background:#FFDC6D;}
.attend_calender.month6 {background:#41D6B6;}
.attend_calender.month7 {background:#33B4FF;}
.attend_calender.month8 {background:#92FCFF;}
.attend_calender.month9 {background:#F3F4CE;}
.attend_calender.month10 {background:#FFD5E6;}
.attend_calender.month11 {background:#FFD494;}
.attend_calender.month12 {background:#FFBB9C;}
.attend_calender .inner .ntBB20 {text-align: center;}
.attend_calender .attend_cal_bg {width:100%; max-width:750px; margin:20px auto 0; background:#fff; border-radius: 15px;}
.attend_calender .attend_cal_bg .attend_cal, .attend_calender .attend_cal_bg .push_zone {padding:20px; box-sizing: border-box;}
.attend_cal .days {height:22px;}
.attend_cal .days li {padding:0; text-align: center; font-size:15px; font-family:'noto-M'; font-weight: normal; color:#3a3a3a;}
.attend_cal ul {display: flex; align-items: center; width:100%; gap:5px; margin-bottom:15px;}
.attend_cal ul:last-child {margin-bottom:0;}
.attend_cal ul li {width:-webkit-fill-available; height:100%; text-align: center; font-size:13px; font-family:'spoqa R'; font-weight: normal; color:#3a3a3a; position:relative;}
.attend_cal ul li.today {color:#0071E8; font-family:'spoqa M';}
.attend_cal ul li>div {width:39px; height:39px; margin:5px auto 0; background:#F2F2F2; border-radius: 50%; display:flex; align-items: center; justify-content: center; font-size:15px; font-family:'noto-R'; color:#949494;}
.attend_cal ul li.on div {background:linear-gradient(#29AAFF,#297FFF); color:#fff;}
.attend_cal ul li.checkcom.on div {background:linear-gradient(#FF74D5,#FF2D8F); color:#fff;}
@media screen and (max-width: 375px) {
.attend_calender .attend_cal_bg {width:100%; margin-top:5.3333vw; background:#fff; border-radius: 4.0000vw;}
.attend_calender .attend_cal_bg .attend_cal, .attend_calender .attend_cal_bg .push_zone {padding:5.3333vw; box-sizing: border-box;}
.attend_cal .days {height:5.8667vw;}
.attend_cal .days li {padding:0; text-align: center; font-size:4.0000vw; font-family:'noto-M'; font-weight: normal; color:#3a3a3a;}
.attend_cal ul {display: flex; align-items: center; width:100%; gap:1.3333vw; margin-bottom:4.0000vw;}
.attend_cal ul:last-child {margin-bottom:0;}
.attend_cal ul li {width:-webkit-fill-available; height:100%; text-align: center; font-size:3.4667vw; font-family:'spoqa R'; font-weight: normal; color:#3a3a3a; position:relative;}
.attend_cal ul li.today {color:#0071E8; font-family:'spoqa M';}
.attend_cal ul li>div {width:10.4000vw; height:10.4000vw; margin:1.3333vw auto 0; background:#F2F2F2; border-radius: 50%; display:flex; align-items: center; justify-content: center; font-size:4.0000vw; font-family:'noto-R'; color:#949494;}
}
/* Çª½Ã¾Ë¸² */
.push_bnr {width:calc(100% - 20px); background:rgba(0,0,0,0.9); padding:15px; border-radius:15px; text-align: center; box-sizing: border-box; position:fixed; bottom:90px; left:50%; transform:translateX(-50%); z-index:1000;  visibility: hidden;}
.push_bnr.on {display: block; animation: show 3.5s forwards;}
@keyframes show {
    0% {opacity:0; visibility: hidden;}
    20%, 50%, 80% {opacity:1; visibility: visible;}
    100% {opacity:0; visibility: hidden;}
}
.push_bnr p {color:#fff;}
.attend_calender .push_zone {border-top:1px solid #D8D8D8;}
.attend_calender .push_zone .flex {display: flex; justify-content: space-between; align-items: center;}
.attend_calender .push_zone .flex i {display:block; width:24px; height:24px; background:url('//image5.compuzone.co.kr/img/images/attendance/push_ico.png') center center/contain no-repeat; margin-right:5px;}
.attend_calender .push_zone .toggle {width:48px; height:25px; background:#D8D8D8; border-radius: 13px; position:relative; transition:all 0.2s;}
.attend_calender .push_zone .toggle .round {width:19px; height:19px; background:#fff; border-radius: 50%; position:absolute; top:3px; left:3px; transition:all 0.2s;}
.attend_calender .push_zone .toggle.on {background:#0D6DE3;}
.attend_calender .push_zone .toggle.on .round {left:26px;}

/* »óÇ°¸®½ºÆ® ³ëÃâ¿µ¿ª */
.attend_product {padding-top:30px; box-sizing: border-box; overflow: hidden;}
.attend_product .at_pro {margin:20px auto 30px; overflow-x:scroll; padding:0 15px;}
.attend_product .at_pro::-webkit-scrollbar { display: none;}
.attend_product .at_pro ul {display: inline-flex; width: max-content;}
.attend_product .at_pro ul li {float:left; margin-right:12px; max-width:160px; position:Relative;}
.attend_product .at_pro ul li:last-child {margin-right:0;}
.attend_product .at_pro ul li a {display: block; overflow:hidden;}
.attend_product .at_pro ul li a span.area_thumnail {display:block; width:156px; height:156px; border-radius:10px; position:relative; overflow:hidden; position:relative;}
.attend_product .at_pro ul li a span.area_thumnail::before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.02);}
.attend_product .at_pro ul li a span.area_thumnail img {width:100%; height:100%;}
.attend_product .at_pro ul li a h3 {margin:10px 0 5px; height:40px; line-height:20px; letter-spacing: -1px; font-size:15px; font-family:'noto-R'; font-weight:normal; color:#3a3a3a; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.attend_product .at_pro p.price {font-size:11px; color:#3a3a3a; font-family: 'Noto-M'; letter-spacing:-0px;}
.attend_product .at_pro p .price_per {font-size:16px; color:#f14738; font-weight:bold; padding-right:5px; font-family: 'spoqa m';}
.attend_product .at_pro p .price_won {padding-right:1px; font-size:16px; font-weight:bold; font-family: 'spoqa m';}
.attend_product .at_pro p .price_sale {display:block; margin-top:2px; font-size:13px; color:#b4b4b4; text-decoration:line-through; font-family: 'spoqa m';}

/* À¯ÀÇ»çÇ× */
.attend_notice {width:100%; padding:30px 0; background:#F9F9F9; box-sizing: border-box;}
.attend_notice .noti_inner {margin-top:10px;}
.attend_notice .noti_inner p {font-size:13px; font-family:'noto-R'; font-weight: normal; color:#6C6C6C; margin-bottom:5px; position:relative; padding-left:7px;}
.attend_notice .noti_inner p::before {content:''; width:2px; height:2px; background:#6C6C6C; position:absolute; top:8px; left:0;}
.attend_notice .noti_inner p:last-child {margin-bottom:0;}

.fix_btn {width:100%; height:60px; position:fixed; bottom:-60px; left:0; z-index:999; transition:all 0.2s;}
.fix_btn.on {bottom:0;}
.fix_btn a {display: block; width:100%; height:100%; line-height:58px; text-align: center;}
.fix_btn a.bk_btn {background:#1A1A1A; color:#fff;}
.fix_btn a.gr_btn {background:#949494; color:#fff;}