@charset "utf-8";

/*===================================================================
* INFORMATION
* -------------------------------------------------------------------
* @Author : Zoe (zoe.kim@think-tree.com), narae (narae.lee@think-tree.com)
* @File Name : sub.css
* @Description : 화면 스타일 정의
* @Create Date : 2021-11-08
* @Last Update Date : N/A
* @History : N/Af
* ====================================================================*/
/* ====================== */
/* Sub Setting */
/* ====================== */
/* ===== 공통 ===== */
.topHead h1,
.topHead h2,
.topHead h3,
.topHead strong,
.topHead p,
.topHead em,
.topHead span {color:#fff;}
.bottomFoot h1,
.bottomFoot h2,
.bottomFoot h3,
.bottomFoot strong,
.bottomFoot p,
.bottomFoot em,
.bottomFoot span {color:#444;}
/* ===== 화면 별 ===== */
/* 인트로 */
.introPage {position:relative;height:100vh;}
.introPage .tableForm {display:table;width:100%;height:50vh;}
.introPage .tableForm .tableCell {display:table-cell;vertical-align:bottom;text-align:center;}
.introPage .topHead .tableForm .tableCell h1 {font-size:2.3rem;}
.introPage .topHead .tableForm .tableCell h2 {font-size:1.1rem;}
.introPage .topHead .tableForm .tableCell .btnArea {padding-top:3.6rem;}
.introPage .bottomFoot {text-align:center;}
.introPage .bottomFoot .tableForm .tableCell {position:relative;}
.introPage .bottomFoot .tableForm .tableCell .findInfo {position:absolute;top:10%;width:100%;}
.introPage .bottomFoot .tableForm .tableCell .findInfo a {padding-top:1rem;color:#fff;}
.introPage .bottomFoot .tableForm .tableCell .findInfo .findID {padding-left:3px;}
.introPage .bottomFoot .tableForm .tableCell .findInfo .findID:after {content:"|";padding:0 1rem;}
.introPage .bottomFoot .btnArea {padding-bottom:2.9rem;}
/* 아이디 찾기 */
.idFind  {position:relative;height:100vh;padding:0 1.1rem;}
.idFind .tableForm {display:table;width:100%;}
.idFind .tableForm .tableCell {display:table-cell;vertical-align:bottom;text-align:center;}
.idFind .topHead .tableForm {height:60vh;}
.idFind .topHead .tableForm .tableCell h1 {font-size:1.1rem;}
.idFind .topHead .tableForm .tableCell .joinInfo p {padding:0.7rem 0 1.5rem;}
.idFind .topHead .tableForm .tableCell .joinInfo .textForm:nth-child(2) {padding-bottom:0.9rem;}
.idFind .topHead .tableForm .tableCell .notMacth {padding-top:3.456rem;}
.idFind .topHead .tableForm .tableCell .notMacth div,
.idFind .topHead .tableForm .tableCell .findMacth div {height:7.2rem;border-top-left-radius:1.1rem;border-bottom-right-radius:1.1rem; background:#fff;}
.idFind .topHead .tableForm .tableCell .notMacth div p {padding:2.2rem 4rem;color:#000;}
.idFind .topHead .tableForm .tableCell .findMacth div p {padding:2.9rem 4rem;color:#000;}
.idFind .topHead .tableForm .tableCell .findMacth > p {padding:0.8rem 0 1.3rem;}
.idFind .bottomFoot .tableForm {height:40vh;}
.idFind .bottomFoot .joinInfo .btnArea {padding-bottom:2.9rem;text-align:left;}
.idFind .bottomFoot .joinInfo .btnArea button.back {position:relative;text-align:right;width:7.1rem;padding-right:2rem;border:1px solid #fff;color:#fff;box-shadow:none;}
.idFind .bottomFoot .joinInfo .btnArea button.back:before {content:"";position:absolute;top:1.2rem;left:1.5rem;display:inline-block;width:1.2rem;height:0.7rem;background-image:url('../images/btn_back.png');background-size:1.2rem 0.7rem;pointer-events:none;}
.idFind .bottomFoot .joinInfo .btnArea button.next {position:relative;float:right;text-align:left;width:7.1rem;padding-left:2rem;box-shadow:none;}
.idFind .bottomFoot .joinInfo .btnArea button.next:disabled:after {content:"";position:absolute;top:1.2rem;right:1.5rem;display:inline-block;width:1.2rem;height:0.7rem;background-image:url('../images/btn_next.png');background-size:1.2rem 0.7rem;pointer-events:none;}
.idFind .bottomFoot .joinInfo .btnArea button.next:after {content:"";position:absolute;top:1.2rem;right:1.5rem;display:inline-block;width:1.2rem;height:0.7rem;background-image:url('../images/btn_next_red.png');background-size:1.2rem 0.7rem;pointer-events:none;}
.idFind .bottomFoot .notMacth .btnArea {padding-bottom:2.9rem;}
/* 비밀번호 재설정 */
.pwReset  {position:relative;height:calc(100vh - 63px);padding:0 1.1rem;}
.pwReset .tableForm {display:table;width:100%;}
.pwReset .tableForm .tableCell {display:table-cell;vertical-align:bottom;text-align:center;}
.pwReset .topHead .tableForm {height:calc(65vh - 63px);}
.pwReset .topHead .tableForm .tableCell h1 {font-size:1.1rem;}
.pwReset .topHead .tableForm .tableCell .joinInfo {padding-bottom:6.74rem;}
.pwReset .topHead .tableForm .tableCell .joinInfo p {padding:0.7rem 0 1.5rem;}
.pwReset .topHead .tableForm .tableCell .joinInfo .textForm:nth-child(2) {padding-bottom:0.9rem;}
.pwReset .topHead .tableForm .tableCell .mailCode .resendMsg {padding:0.8rem 0 0.5rem;}
.pwReset .topHead .tableForm .tableCell .mailCode .infoMsg {padding-bottom:1.9rem;font-size:0.8rem;}
.pwReset .topHead .tableForm .tableCell .mailCode .emailBtn {padding-bottom:1.1rem;}
.pwReset .topHead .tableForm .tableCell .mailCode .emailTime p {padding:0.3rem 0 0 1.1rem;text-align:left;font-size:0.8rem;}
.pwReset .bottomFoot .tableForm {height:35vh;}
.pwReset .bottomFoot .btnArea {padding-bottom:2.9rem;}
/* 회원가입 */
.joinPage {position:relative;height:calc(100vh - 63px);}
.joinPage .topHead .tmsIntro {padding:0 1.4rem;}
.joinPage .topHead .tmsIntro h1 {font-size:1.25rem;padding-bottom:1.4rem;}
.joinPage .topHead .tmsIntro h2 {display:inline-block;font-size:1.1rem;}
.joinPage .topHead .tmsIntro strong {display:block;padding-top:1.8rem;}
.joinPage .topHead .joinSucc {position:relative;height:100vh;}
.joinPage .topHead .joinSucc .img {width:100%;height:50vh;text-align:center;}
.joinPage .topHead .joinSucc .img:after {content:"";position:absolute;top:50%;left:50%;transform:translate(0%, -120%); display:inline-block;margin-left:-3rem;width:6.4rem;height:6.4rem;background-image:url('../images/i_success.png');background-size:6.4rem 6.4rem;pointer-events:none;}
.joinPage .topHead .joinSucc .text {width:100%;height:50vh;text-align:center;}
.joinPage .topHead .joinSucc .text strong {display:block;padding-top:1.1rem;}
.joinPage .topHead .joinSucc .text .btnArea {padding-top:5.4rem;}
.joinPage .bottomFoot {position:absolute;bottom:0;width:100%;min-height:22rem;padding:0 1.1rem 2.9rem;text-align:center;border-top-left-radius:1.8rem;border-top-right-radius:1.8rem;background:#fff;}
.joinPage .bottomFoot.expansion {position:absolute;bottom:0;width:100%;max-height:calc(100vh - 63px);padding:0 1.1rem 2.9rem;text-align:center;border-top-left-radius:1.8rem;border-top-right-radius:1.8rem;background:#fff;overflow-y:auto;}
.joinPage .bottomFoot .tableForm {display:table;width:100%;height:calc(22.1rem - 1.4rem);}
.joinPage .bottomFoot .tableForm .tableCell {display:table-cell;}
.joinPage .bottomFoot .tableForm .tableCell .backArea {min-height:calc(22.1rem - 8.1rem);}
.joinPage .bottomFoot .tableForm .tableCell .btnArea {padding:3.6rem 0 0;}
.joinPage .bottomFoot .sendMail {position:relative;}
.joinPage .bottomFoot .sendMail:after {content:"";position:absolute;top:2.5rem;left:50%;display:inline-block;margin-left:-1.2rem;width:2.5rem;height:2.5rem;background-image:url('../images/i_mail.svg');background-size:2.5rem 2.5rem;pointer-events:none}
.joinPage .bottomFoot .sendMail .tableForm .tableCell .backArea p {padding-top:6.6rem;}
.joinPage .bottomFoot .sendMail .tableForm .tableCell .backArea input {margin-top:2rem;}
.joinPage .bottomFoot .mailCode .tableForm .tableCell .backArea p {text-align:left;}
.joinPage .bottomFoot .mailCode .tableForm .tableCell .backArea > p {padding:2.1rem 1.1rem 1.6rem;}
.joinPage .bottomFoot .mailCode .tableForm .tableCell .backArea .emailTime {margin-top:1rem;}
.joinPage .bottomFoot .mailCode .tableForm .tableCell .backArea .emailTime p {padding:0.7rem 1.1rem 0;font-size:0.8rem;color:#ff9a0a;}
.joinPage .bottomFoot .agreeCI .tableForm .tableCell .backArea > p {padding:3.6rem 0 1.5rem;}
.joinPage .bottomFoot .agreeCI .tableForm .tableCell .backArea .chkForm {width:calc((100% - 1rem)/3);min-width:7rem;padding:0 1px;}
.joinPage .bottomFoot .information .tableForm {height:calc((100vh - 63px) - 2.9rem);}
.joinPage .bottomFoot .information .tableForm .tableCell {vertical-align:middle;}
.joinPage .bottomFoot .information .tableForm .tableCell .backArea strong {display:block;padding:3.1rem 0 2.9rem;font-size:1.1rem;}
.joinPage .bottomFoot .information .tableForm .tableCell .backArea ul li:not(:first-child) {margin-top:1rem;}
.joinPage .bottomFoot .information .tableForm .tableCell .backArea ul li p {padding:0.5rem 0.8rem 0;font-size:0.8rem;text-align-last:left;color:#ff9a0a;}
.joinPage .bottomFoot .information .tableForm .tableCell .backArea ul li .radioForm {width:calc((100% - 0.6rem) / 2);min-width:11rem;}
.joinPage .bottomFoot .joinAlready p {padding-top:9.5rem;}
#resendCode .backArea p {padding:0.9rem 0;color:#444;}
#resendCode .backArea span {color:#999;}
.fullPop.vehicle .backArea strong,
.fullPop.vehicle .backArea p {font-size:0.9rem;}
.fullPop.vehicle .backArea > ul {padding-left:0.7rem;}
.fullPop.vehicle .backArea > ul > li > ul {padding-left:1.4rem;}
.fullPop.vehicle .backArea > ul > li > ul > li.marker {list-style:initial;}
.fullPop.vehicle .backArea > ul > li > ul > li::marker {font-size:0.1px;}
.fullPop.vehicle .backArea > ul > li > ul > li strong,
.fullPop.vehicle .backArea > ul > li > ul > li p {position:relative;left:-5px;}
.fullPop.vehicle .backArea table {padding:10px;border-spacing:0;}
.fullPop.vehicle .backArea table tr:last-child th,
.fullPop.vehicle .backArea table tr:last-child td {border-bottom:1px solid #a7a7a7;}
.fullPop.vehicle .backArea table th,
.fullPop.vehicle .backArea table td {padding:5px;border:1px solid #a7a7a7;border-bottom:0;}
.fullPop.vehicle .backArea table th {text-align:left;background:#dae3f3;}
.fullPop.vehicle .backArea table td {border-left:0;}
/* 메인 */
.homePage .timeArea {position:relative;height:12rem;margin:0 1.1rem;padding:0 7.3rem 0 2.5rem;border-radius:1.1rem;box-shadow:0 12px 18.9px 2.1px rgba(146, 146, 146, 0.1);background:#fff;z-index:4;}
.homePage .timeArea.on {height:16.5rem; }
.homePage .timeArea h2 {display:block;color:#a7a7a7;font-size:4.3rem;font-weight:300;}
.homePage .timeArea.on h2 {color:#444;}
.homePage .timeArea.off {padding:0.5rem 1rem 0;text-align:center;}
.homePage .timeArea.on {padding:0.5rem 1rem 0;text-align:center;}
.homePage .timeArea .startTime .miniBox {display:inline-block;width:2.1rem;height:1.1rem;line-height:18px;border-radius:2.5px;text-align:center;font-size:0.7rem;color:#fff;background:#ff9a0a;}
.homePage .timeArea .startTime em {color:#bfbfbf;}
.homePage .timeArea p {font-size:24px;font-weight:500;}
.homePage .timeArea .timeAreaInner {max-width:316px; margin:0 auto;}
.homePage .timeArea .dept {height:2.5rem;margin-top:4px;text-align:left;}
.homePage .timeArea .dept span {font-size:0.8rem;color:#777;}
.homePage .timeArea .dept em {font-size:0.8rem;color:#dedede;}
.homePage .timeArea .btnArea {padding-top:1.2rem; border-top: 0.5px solid #eee;}
.homePage .timeArea .btnArea.timenew {padding-top:1rem;}
.homePage .timeArea .btnArea.withnoti {padding-top:0.5rem;}
.homePage .timeArea .btnArea:after {content:"";clear:both;display:block;}
.homePage .timeArea .btnArea button {width:10.6rem;height:3.6rem;border:none;border-radius:0.4rem;}
.homePage .timeArea .btnArea .start {color:#fff;background:linear-gradient(0deg, #e64b30 0%, #ff7a6d 50%, #ffb16f 100%);background-size:200% auto;cursor:pointer;font-weight:500;font-size:1.143rem;animation:btn-start-animation 0.4s infinite ease-in alternate;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.14);}
.homePage .timeArea .btnArea .stop {float:left;width:48%;color:#fff;background:linear-gradient(0deg, #919191 0%, #a1a1a1 50%, #cfcfcf 100%);cursor:pointer;font-weight:500;font-size:1.143rem;animation:btn-start-animation 0.6s infinite ease-in alternate;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.14);}
.homePage .timeArea .btnArea .reStart {float:left;width:48%;color:#fff;background:linear-gradient(0deg, #e64b30 0%, #ff7a6d 50%, #ffb16f 100%);cursor:pointer;font-weight:500;font-size:1.143rem;animation:btn-start-animation 0.6s infinite ease-in alternate;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.14);}
.homePage .timeArea .btnArea .end {float:right;width:48%;color:#fff;background:linear-gradient(0deg, #45a0e0 0%, #93bddb 50%, #c5f7f3 100%);cursor:pointer;font-weight:500;font-size:1.143rem;animation:btn-start-animation 0.6s infinite ease-in alternate;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.14);}
.homePage .timeArea .btnArea .stopAni {animation:0s;}

.homePage .timeArea #new {padding-top: 2rem;}

/* 2022-08-11 강준일 추가 */
#home {height: 21rem;}
#deviceNm {font-size: 1.65rem;}

/*  */
@keyframes btn-start-animation {
  0% {
    transform:translate(0,-2px);
  }
  50% {
    background-position:center;
  }
  100% {
    transform:translate(0,2px);
  }
}
.homePage .list {height:calc(100vh - 12rem - 63px);padding-top:0.9rem;overflow:auto;}
.homePage .timeArea.on + .list {height:calc(100vh - 15rem - 63px);}
.homePage .list ul > li:nth-child(2n) {background:#fff;}
.homePage .list li {position:relative;min-height:6.1rem;}
.homePage .list li .item {position:relative;display:table;width:100%;padding:1.6rem 1.1rem 1.5rem;}
.homePage .list li .item .itemCol {display:table-cell;padding-top:15px;vertical-align:middle;}
.homePage .list li .item .itemCol.tR {width:110px;}
.homePage .list li .item .itemCol .time {position:relative;top:auto;right:auto;display:inline-block;vertical-align:middle;}
.homePage .list li .btnMore {display:inline-block;margin-left:10px;width:2rem;height:2rem;border-radius:100%;border:0;background:#fff url("../images/btn_more.svg") no-repeat center;background-size:24px auto;font-size:0;vertical-align:middle;box-shadow:2px 2px 10px rgba(0, 0, 0, 0.1);transition:0.25s ease;}
.homePage .list li .btnMore.on {transform:rotate(180deg);transition:0.25s ease;}
/* .homePage .list li .itemCol {position:relative;} */
.homePage .list li p {position:absolute;top:1.6rem;left:1.1rem;padding-bottom:0.5rem;font-size:0.8rem;color:#444;}
.homePage .list li div.dept span {white-space:normal;word-break:break-all;}
.homePage .list li div.dept em {padding:0 0.2rem;color:#cbcbcb;}
.homePage .list li div.dept strong {font-weight:500;}
.homePage .list .details {max-height:0;overflow:hidden;transition:0.3s ease-out;}
.homePage .list .details.show {max-height:211px;transition:max-height 0.3s ease-out;overflow:auto;}
.homePage .list .details div.time {position:absolute;top:1.7rem;right:1.1rem;font-size:1.1rem;color:#444;}
.homePage .list .details li {min-height:auto;padding:1rem 6rem 1rem 1.1rem;border-top:1px solid #eee9e9;}

/* 활동 */
.activityPage {position:relative;}
.activityPage .whereDept ul {width:calc(100% + 20px);height:calc(100vh - 4.5rem);padding:2.1rem 22px 0;table-layout:fixed;border-spacing:5px;border-collapse:separate;margin-left:-10px;margin-top:-15px;}
.activityPage .whereDept ul li {display:inline-block;width:calc((100% - 8px) / 2);height:calc((100% - 18px) / 4);}
.activityPage .whatDept ul {width:calc(100% + 20px);height:calc(100vh - 9.5rem);padding:2.1rem 22px 0;table-layout:fixed;border-spacing:5px;border-collapse:separate;margin-left:-10px;margin-top:-15px;}
.activityPage .whatDept ul li {display:inline-block;width:calc((100% - 8px) / 3);height:calc((100% - 18px) / 4);}
.activityPage .radioForm {display:block;}
.activityPage .radioForm label {display:table;width:100%;height:100%;}
.activityPage .radioForm label i {position:relative;display:table-cell;vertical-align:middle;border:1px solid #fff;border-radius:1.1rem;text-align:center;line-height:inherit;font-size:1.143rem;color:#000;background:#fff;box-shadow:3px 3px 10px rgba(0, 0, 0, 0.08);}
/* .activityPage .whereDept .radioForm label i:before {content:"";display:inline-block;width:4.5rem;height:4.5rem;background-size:contain;pointer-events:none;background-repeat:no-repeat;background-position:center;} */
.activityPage .whereDept .radioForm label i span {content:"";display:inline-block;width:4.5rem;height:4.5rem;background-size:contain;pointer-events:none;background-repeat:no-repeat;background-position:center;}
.activityPage .radioForm input:checked + label i {border:1px solid #ff7a6d;background:#fff radial-gradient(circle, transparent 1%, #fff 1%) center/15000%;}
.activityPage .radioForm input:active + label i {background-color:#999;background-size:100%;transition:background 0s;}
.activityPage .radioForm label i em {display:block;font-weight:500;font-size:inherit;}
.activityPage .whereDept .radioForm {width:100%;height:100%;}
.activityPage .whereDept .radioForm.home label i:before {background-image:url('../images/i_home_black.svg');margin-bottom:8px;}
.activityPage .whereDept .radioForm.home input:checked + label i:before {background-image:url('../images/i_home_red.svg');}
.activityPage .whereDept .radioForm.job label i:before {background-image:url('../images/i_job_black.svg');margin-bottom:8px;}
.activityPage .whereDept .radioForm.job input:checked + label i:before {background-image:url('../images/i_job_red.svg');}
.activityPage .whereDept .radioForm.cafe label i:before {background-image:url('../images/i_cafe_black.svg');margin-bottom:8px;}
.activityPage .whereDept .radioForm.cafe input:checked + label i:before {background-image:url('../images/i_cafe_red.svg');}
.activityPage .whereDept .radioForm.book label i:before {background-image:url('../images/i_book_black.svg');margin-bottom:8px;}
.activityPage .whereDept .radioForm.book input:checked + label i:before {background-image:url('../images/i_book_red.svg');}
.activityPage .whereDept .radioForm.iCafe label i:before {background-image:url('../images/i_pc_black.svg');margin-bottom:8px;}
.activityPage .whereDept .radioForm.iCafe input:checked + label i:before {background-image:url('../images/i_pc_red.svg');}
.activityPage .whereDept .radioForm.move label i:before {background-image:url('../images/i_move_black.svg');}
.activityPage .whereDept .radioForm.move input:checked + label i:before {background-image:url('../images/i_move_red.svg');}
.activityPage .whereDept .radioForm.etc label i:before {background-image:url('../images/i_etc_black.svg');margin-bottom:8px;}
.activityPage .whereDept .radioForm.etc input:checked + label i:before {background-image:url('../images/i_etc_red.svg');}
/* .activityPage .whatDept .radioForm label i:before {content:"";display:inline-block;margin-bottom:2px;width:2.5rem;height:2.5rem;background-size:contain;pointer-events:none;background-repeat:no-repeat;background-position:center;} */
.activityPage .whatDept .radioForm label i span {content:"";display:inline-block;margin-bottom:2px;width:2.5rem;height:2.5rem;background-size:contain;pointer-events:none;background-repeat:no-repeat;background-position:center;}
.activityPage .whatDept .radioForm {width:100%;height:100%;}
.activityPage .whatDept .radioForm.computer label i:before {background-image:url('../images/i_pc_black.svg');}
.activityPage .whatDept .radioForm.computer input:checked + label i:before {background-image:url('../images/i_pc_red.svg');}
.activityPage .whatDept .radioForm.smartphone label i:before {background-image:url('../images/i_smartphone_black.svg');}
.activityPage .whatDept .radioForm.smartphone input:checked + label i:before {background-image:url('../images/i_smartphone_red.svg');}
.activityPage .whatDept .radioForm.book label i:before {background-image:url('../images/i_book_black.svg');}
.activityPage .whatDept .radioForm.book input:checked + label i:before {background-image:url('../images/i_book_red.svg');}
.activityPage .whatDept .radioForm.community label i:before {background-image:url('../images/i_community_black.svg');}
.activityPage .whatDept .radioForm.community input:checked + label i:before {background-image:url('../images/i_community_red.svg');}
.activityPage .whatDept .radioForm.tv label i:before {background-image:url('../images/i_tv_black.svg');}
.activityPage .whatDept .radioForm.tv input:checked + label i:before {background-image:url('../images/i_tv_red.svg');}
.activityPage .whatDept .radioForm.bow label i:before {background-image:url('../images/i_bow_black.svg');}
.activityPage .whatDept .radioForm.bow input:checked + label i:before {background-image:url('../images/i_bow_red.svg');}
.activityPage .whatDept .radioForm.sleep label i:before {background-image:url('../images/i_sleep_black.svg');}
.activityPage .whatDept .radioForm.sleep input:checked + label i:before {background-image:url('../images/i_sleep_red.svg');}
.activityPage .whatDept .radioForm.meal label i:before {background-image:url('../images/i_meal_black.svg');}
.activityPage .whatDept .radioForm.meal input:checked + label i:before {background-image:url('../images/i_meal_red.svg');}
.activityPage .whatDept .radioForm.bicycle label i:before {background-image:url('../images/i_bicycle_black.svg');}
.activityPage .whatDept .radioForm.bicycle input:checked + label i:before {background-image:url('../images/i_bicycle_red.svg');}
.activityPage .whatDept .radioForm.pubTransport label i:before {background-image:url('../images/i_pubTransport_black.svg');}
.activityPage .whatDept .radioForm.pubTransport input:checked + label i:before {background-image:url('../images/i_pubTransport_red.svg');}
.activityPage .whatDept .radioForm.car label i:before {background-image:url('../images/i_car_black.svg');}
.activityPage .whatDept .radioForm.car input:checked + label i:before {background-image:url('../images/i_car_red.svg');}
.activityPage .whatDept .radioForm.etc label i:before {background-image:url('../images/i_etc_black.svg');}
.activityPage .whatDept .radioForm.etc input:checked + label i:before {background-image:url('../images/i_etc_red.svg');}
.activityPage .btnArea {position:absolute;bottom:-4rem;display:block;width:100%;padding:0 22px;}
.activityPage .btnArea button.back {position:relative;float:left;text-align:right;width:7.1rem;padding-right:2rem;border:1px solid #dfdfdf;color:#a7a7a7;box-shadow:none;}
.activityPage .btnArea button.back:before {content:"";position:absolute;top:1.18rem;left:1.5rem;display:inline-block;width:1.2rem;height:0.7rem;background-image:url('../images/btn_back_gray.png');background-size:1.2rem 0.7rem;pointer-events:none;}
.activityPage .btnArea button.next {position:relative;float:right;text-align:left;width:7.1rem;padding-left:2rem;box-shadow:none;}
.activityPage .btnArea button.next:after {content:"";position:absolute;top:1.18rem;right:1.5rem;display:inline-block;width:1.2rem;height:0.7rem;background-image:url('../images/btn_next.png');background-size:1.2rem 0.7rem;pointer-events:none;}
#whatActive .backArea {text-align:center;}
#whatActive .backArea > div {padding-top:1.4rem;}
#whatActive .backArea .radioLine {height:100%;}
#whatActive .backArea .radioLine:nth-child(2) {margin:0 8px;}
#whatActive .backArea .radioLine label i {width:6.4rem;height:4.5rem;box-shadow:0 12px 18.9px 2.1px rgba(146, 146, 146, 0.1);line-height:62px;border-radius:0.7rem;color:#000;}
#whatActive .backArea .radioLine input:checked + label i {color:#fff;background:#ff7a6d radial-gradient(circle, transparent 1%, #ff7a6d 1%) center/15000%;}
#whatActive .backArea .radioLine input:active + label i {background-color:#be5f54;background-size:100%;transition:background 0s;}
#whatActive .backArea .textForm,
#whereActive .backArea .textForm {margin-top:0.9rem;}
#whatActive .backArea .textForm input,
#whatActive .backArea .textForm input::placeholder {font-size:0.8rem;}
#whatActive .backArea .whatEtc {padding:0;}
/* 마이페이지 */
.myPage .whiteBox {margin-bottom:10px;padding:1.3rem 1.1rem;background:#fff;}
.myPage strong {display:block;text-align:center;font-size:1.143rem;font-weight:500;line-height:2;}
.myPage .btn.btnS {display:block;margin:0 auto;box-shadow:none;margin-top:5px;width:8rem;}
.myPage ul li {text-align:center;overflow:hidden;}
.myPage ul li:not(:first-child) {margin-top:1.1rem;}
.myPage ul li .radioForm {float:left;width:calc((100% - 10px) / 2);}
.myPage ul li .radioForm:last-child {margin-left:10px;}
.myPage ul li .chageSelt {color:#444;}
.myPage .btnArea {padding-top:4rem;text-align:center;}
.myPage .util {padding:0 1.1rem 1.3rem;}
.myPage .util:after {content:"";display:block;clear:both;}
.myPage .btnLeave {float:right;border:0;background:0;color:#a7a7a7;border-bottom:1px solid #a7a7a7;}
/* 통계 */
#wrap.stat:before {z-index:100;}
#wrap.stat #header {z-index:1000;}
.statHeader {flex-direction:column;}
.statHeader p {font-size:0.9rem;color:#fff;}
.statisticsPage {height:calc(100vh - 64px);overflow-y:auto;}
.statisticsPage .timeBox {position:sticky;top:0;height:112px;margin:0 1.1rem;margin-bottom:0.4rem;padding:1.1rem 0.7rem 0;text-align:center;border-radius:1.1rem;box-shadow:0 12px 18.9px 2.1px rgba(146, 146, 146, 0.1);background:#fff;z-index:3;}
.statisticsPage .timeBox .calDupSet {clear:left;display:flex;justify-content:center;vertical-align:middle;height:33px;border-bottom:1px solid #dfdfdf;}
.statisticsPage .timeBox .calDupSet em {line-height:2.8;margin-right:8px;}
.statisticsPage .timeBox .calSet {position:relative;display:inline-block;height:2.429rem;box-sizing:border-box;}
.statisticsPage .timeBox .calSet input {position:relative;padding:0 2.429rem 0 0;width:7.7rem;height:100%;z-index:1;text-align:right;border:none;background:0;}
.statisticsPage .timeBox .calSet button {position:absolute;right:0;top:-2px;width:2.429rem;height:100%;border:0;background:url('../images/btn_calendar.png') no-repeat center;background-size:1rem auto;text-indent:-9999px;overflow:hidden;font-size:0;white-space:nowrap;z-index:0;}
.statisticsPage .timeBox .serach {padding:1rem 0 0 0;}
.statisticsPage .timeBox .serach .radioLine {padding:0 0.4rem;}
.statisticsPage .stk {min-height:calc(100vh - 64px);}
.statisticsPage .statBox {position:sticky;top:0;height:112px;margin:0 1.1rem;padding:1.5rem 0.7rem 0;border-radius:1.1rem;box-shadow:0 12px 18.9px 2.1px rgba(146, 146, 146, 0.1);background:#fff;z-index:4;}
.statisticsPage .statBox .graphBox p {padding:1.1rem 0 0.6rem;border-bottom:1px solid #dfdfdf;}
.statisticsPage .statBox .chartBox {padding-top:3px;}
.statisticsPage .statBox .chartBox table {width:100%;border-spacing:0;table-layout:fixed;}
.statisticsPage .statBox .chartBox table tr td {padding:0.5rem 0 0.2rem;}
.statisticsPage .statBox .chartBox table tr td:nth-child(1) {text-align:left;}
.statisticsPage .statBox .chartBox table tr td:nth-child(2) {text-align:left;}
.statisticsPage .statBox .chartBox table tr td:nth-child(3) {text-align:left;}
.statisticsPage .statBox .chartBox table tr:not(:last-child) td {border-bottom:1px solid #dfdfdf;}
.statisticsPage .statBox .chartBox table tr td em {font-size:0.8rem;color:#a7a7a7;}
.statisticsPage .list > div {margin-top:0.9rem;}
.statisticsPage .list .chartList ul li {height:7.5rem;padding:0.7rem 1.1rem;}
.statisticsPage .list .chartList ul li:nth-child(2n) {background:#fff;}
.statisticsPage .list .chartList ul li span,
.statisticsPage .list .chartList ul li table tr td em {font-size:0.8rem;color:#888;}
.statisticsPage .list .chartList ul li table {width:100%;border-spacing:0;table-layout:fixed;}
.statisticsPage .list .chartList ul li span {margin-top:10px;}
.statisticsPage .list .chartList ul li table tr td {padding:0.5rem 0;}
.statisticsPage .list .chartList ul li table tr:not(:last-child) td {border-bottom:1px solid #dfdfdf;}
.statisticsPage .list .chartList ul li table tr td:nth-child(1) {width:30%;text-align:left;}
.statisticsPage .list .chartList ul li table tr td:nth-child(2) {width:40%;text-align:left;}
.statisticsPage .list .chartList ul li table tr td:nth-child(3) {width:30%;text-align:left;}
.statisticsPage .list .graphList {padding:0 1.1rem;}
.statisticsPage .list .graphList ul li {height:5rem;}
.statisticsPage .list .graphList ul li .listName {position:relative;padding-bottom:0.6rem;}
.statisticsPage .list .graphList ul li .listName:after {content:'';position:absolute;top:4px;left:2px;display:inline-block;width:1rem;height:0.9rem;background-size:1rem 0.9rem;pointer-events:none;}
.statisticsPage .list .graphList ul li .listName.home:after {background-image:url('../images/i_home_black.svg');}
.statisticsPage .list .graphList ul li .listName.job:after {background-image:url('../images/i_job_black.svg');}
.statisticsPage .list .graphList ul li .listName.cafe:after {background-image:url('../images/i_cafe_black.svg');}
.statisticsPage .list .graphList ul li .listName.book:after {background-image:url('../images/i_book_black.svg');}
.statisticsPage .list .graphList ul li .listName.iCafe:after {background-image:url('../images/i_pc_black.svg');}
.statisticsPage .list .graphList ul li .listName.etc:after {background-image:url('../images/i_etc_black.svg');}
.statisticsPage .list .graphList ul li .listName span:first-child {padding-left:20px;}
.statisticsPage .list .graphList ul li .listName .time {float:right;}
.statisticsPage .list .graphList ul li .listName .time em {font-size:0.8rem;color:#888;}
.statisticsPage .list .graphList ul li .graph {position:relative;height:0.8rem;background:#cfcfcf;border-radius:2.5px;}
.statisticsPage .list .graphList ul li .listName + .graph span {display:block;height:100%;border-radius:2.5px;}
.statisticsPage .list .graphList ul li .listName.home + .graph span  {background:#30b8ff;}
.statisticsPage .list .graphList ul li .listName.job + .graph span {background:#f7b850;}
.statisticsPage .list .graphList ul li .listName.cafe + .graph span {background:#a6e56c;}
.statisticsPage .list .graphList ul li .listName.book + .graph span {background:#a872f8;}
.statisticsPage .list .graphList ul li .listName.iCafe + .graph span {background:#ff679d;}
.statisticsPage .list .graphList ul li .listName.etc + .graph span {background:#4f5590;}
/* 누적통계 토탈 */
.statisticsPage .list .graphList .total { float: right; font-size: 1.43rem;}
.statisticsPage .list .graphList .total span.time {color:#444;}
.statisticsPage .list .graphList .total span.time em {font-size:0.8rem;color:#888;}

/* 알림 */
.push .list dl.textimg {min-height:7.5rem; padding:2rem 1.1rem; list-style: none; position:relative;}
.push .list dl:nth-child(2n) {background:#fff;}
.push .list dl.textimg dt span.pushDate {font-size:0.8rem;color:#888; display:block;padding-bottom: 0.5rem;}
.push .list dl.textimg dt p.con {vertical-align: middle; width: 75%; display:inline-block; padding-right: 1rem; box-sizing: border-box;}
.push .list dl.textimg dt span.pushimg {width: 25%; height: 60px; text-align: center; overflow: hidden; position:absolute; top:50%; right:1rem; transform:translate(0,-50%);}
.push .list dl.textimg dt span.pushimg img { width:100%; max-height: 60px; }

/* 심박수 대기,측정 */
.homePage .timeArea .btnArea .setTime {float:left;width:48%;color:#fff;background:linear-gradient(0deg, #919191 0%, #a1a1a1 50%, #cfcfcf 100%);cursor:pointer;font-weight:500;font-size:1.143rem;animation:btn-start-animation 0.6s infinite ease-in alternate;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.14);}
.homePage .timeArea .btnArea .measure {float:right;width:48%;color:#fff;background:linear-gradient(0deg,#e64b30 0%, #ff7a6d 50%, #ffb16f 100%);cursor:pointer;font-weight:500;font-size:1.143rem;animation:btn-start-animation 0.6s infinite ease-in alternate;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.14);}
.homePage .timeArea .btnArea .stopCenter { color:#fff;background:linear-gradient(0deg, #45a0e0 0%, #93bddb 50%, #c5f7f3 100%);background-size:200% auto;cursor:pointer;font-weight:500;font-size:1.143rem;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.14);}
.homePage .timeArea .timeAreaInner p {color:#444;font-size:1.143rem; box-sizing:border-box; padding-bottom: 1rem; }
.homePage .timeArea .timeAreaInner p.heartFill {font-size:2rem;}
.homePage .timeArea .timeAreaInner p.measurenoti {padding-bottom: 0.1rem;}

/** .homePage .timeArea .startTime .imgBox {display:inline-block;width:9.5rem; height:3.6rem; margin:1rem 0; } **/

.homePage .timeArea .startTime .imgBox {display:inline-block;width:9.5rem; height:3.6rem; margin:2.5rem 0; }

.homePage .timeArea .startTime .imgBox i {position:relative; width:9.5rem; height:3.6rem; display:inline-block; background-size: 1.8rem 2.8rem; background-repeat:no-repeat; background-position:0; line-height:3.6rem; padding-left: 1rem; box-sizing: border-box; color: #a7a7a7;}
.homePage .timeArea .startTime .imgBox i::after { content:''; position: absolute; top:50%; right:0; transform: translate(0,-50%); width:0.8rem; height:0.8rem; background-size: contain; background-repeat:no-repeat; background-position:0; background-image:url('../images/i_right.png'); }
.homePage .timeArea .startTime .imgBox i.bluetoooth {background-image:url('../images/i_bluetooth_con_gray2.svg');}
.homePage .timeArea .startTime .imgBox i.heart {background-image:url('../images/i_heart_con_gray2.svg');}
.homePage .timeArea .startTime .heartmeasure {display:inline-block;width:5rem;height:5rem; margin:2rem 0;}
.homePage .timeArea .startTime .heartmeasure i {position:relative; width:5rem;height:5rem; display:inline-block; background-size:contain; background-repeat:no-repeat; background-position:center; }
.homePage .timeArea .startTime .heartmeasure i.heart {background-image:url('../images/i_heartAni.svg');}
/* 2022.07.18 imgBoxNoti 추가 */
.homePage .timeArea .startTime .imgBoxNoti { display:inline-block;width:9.5rem; height:2.8rem; margin:1rem 0; }
.homePage .timeArea .startTime .imgBoxNoti i { position:relative; width:9.5rem; height:3.6rem; display:inline-block; background-size: contain; background-repeat:no-repeat; background-position: 50%; }
.homePage .timeArea .startTime .imgBoxNoti i.heart { background-image:url('../images/i_heart.svg'); }


/* 심박수 측정 시간 등록 */
.heartSettime {width:100%; min-height: 600px; position:relative;}
.heartSettime .whiteBox { height: 100%; margin-bottom:10px;padding:1.3rem 1.1rem; background:none; }
.heartSettime ul li {text-align:center;overflow:hidden;}
.heartSettime ul li:not(:first-child) {margin-top:1.1rem;}
.heartSettime .btnArea {padding-top:4rem;text-align:center;}
.heartSettime .whiteBox ul li .timeSelect { position:relative; line-height:3rem; width: 85%; height: 3.1rem; border: 1px solid #dfdfdf; border-radius: 1.5rem; float: left; background-color: #fff;}
.heartSettime .whiteBox ul li:first-child .timeSelect { background: none; border:none;}
.heartSettime .whiteBox ul li .timeSelect span {width:calc((100% - 10px) / 2); height:100%; display:block; }
.heartSettime .whiteBox ul li .timeSelect span select {position:relative; display:block;height:3rem;width:100%; padding:0 0 0 45%; color:#777; background:none;text-overflow:ellipsis;white-space:nowrap;border:none;outline:0 none;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow: ellipsis;white-space: nowrap;}
.heartSettime .whiteBox ul li .timeSelect span select option{ width: 10px; height: 10px; content: "";position: absolute; left:0; top:0; display: inline-block;margin-top: -3px;width: 0.8rem;height: 0.5rem;pointer-events: none; }
.heartSettime .whiteBox ul li .timeSelect span.timeRight {float: right;}
.heartSettime .whiteBox ul li .timeSelect span.timeLeft {float: left;}
.heartSettime .whiteBox ul li .timeAdd button {position:relative; float: right; display:inline-block; width: 3.1rem; height: 3.1rem; border: 1px solid #777; border-radius: 100%; background-color: #fff;}
.heartSettime .whiteBox ul li:first-child .timeAdd button {border: 1px solid #e64b30;}
.heartSettime .whiteBox ul li .timeAdd button:after {content:'';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); width: 1.5rem; height: 1.5rem; background-repeat: no-repeat; background-image: url('../images/i_delete.svg'); background-position: 50%,50%; }
.heartSettime .whiteBox ul li:first-child .timeAdd button:after {background-image: url('../images/btn_timeAdd.svg'); }
.heartSettime .whiteBox .btnArea .red { position: fixed; bottom: 5%; left: 50%; transform:translate(-50%,0);}

/* heartfill 리스트 기본*/
/* .homePage .list li .listHeart {position:relative;display:table;width:100%;padding:2.5rem 1.1rem 1.5rem;}
.homePage .list li .listHeart .heartCol {display:table-cell;vertical-align:middle;}
.homePage .list li .listHeart .heartCol p { padding-top: 1.1rem; box-sizing: border-box}
.homePage .list li .listHeart .heartCol .time {position:relative;top:auto;right:auto;display:inline-block;vertical-align:middle; }
.homePage .list li .listHeart .heartCol.tR {width:110px; font-weight: 500;}
.homePage .list li .listHeart .heartCol.tR .bpm em {color: #a7a7a7; font-weight: 300;} */

/* heartfill 리스트 좌측정렬 */
.homePage .list ul li .item .bpm .dept strong { font-weight:500; font-size: 1.1rem; padding-top: 1rem; display:inline-block;}
.homePage .list ul li .item .bpm .dept span { color:#a7a7a7; display:inline-block; padding-left: 0.2rem; }

/* 심박수 측정 애니메이션1 */
.heartmeasure .heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 50px;
  animation-name: beat;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
.heartmeasure .heart:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heartmeasure .heart:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
@keyframes beat {
  0% {
    transform: scale(1) ;
  }
  50% {
    transform: scale(0.6) ;
  }
}