@charset "utf-8";

/*===================================================================
* INFORMATION
* -------------------------------------------------------------------
* @Author : Zoe (zoe.kim@think-tree.com), narae (narae.lee@think-tree.com)
* @File Name: common.css
* @Description : 공통 레이아웃 정의
* @Create Date: 2021-11-08
* @Last Update Date: N/A
* @History: N/Af
* ====================================================================*/

/* ====================== */
/* TT UI Reset */
/* ====================== */
/* ===== Default ===== */
hr, caption {display:none;}
dl,ul,ol,menu,li {list-style:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,label,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0;box-sizing:border-box;}
body, * {font-family:'NotoSansKR';font-size:14px;color:#333;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;word-break:keep-all;-webkit-appearance:none;-webkit-border-radius:0;}
html {overflow-y:scroll;}
html, body {width:100%;min-height:100vh;overflow-x:hidden;-webkit-margin-start:0;-webkit-padding-start:0px;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;scroll-behavior:smooth;background:#f7f7f7;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:"";content:none;}
a {text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0.0);}
a img {border:none;}
address, caption, cite, code, dfn, em, th, var, i {font-style:normal;font-weight:normal;}
a, button, input, textarea, select {-webkit-tap-highlight-color:transparent;}
a, button, input:focus, select:focus, textarea:focus {outline:0 none;}
.skip-navigation a {display:block;height:0;width:0;padding:0;font-size:0;line-height:0;overflow:hidden;}
.skip-navigation a:hover,.skip-navigation a:active,.skip-navigation a:focus {position:fixed;top:0;left:0;width:100%;height:auto;padding:8px 0 12px;font-weight:bold;font-size:14px;color:#fff;line-height:1;text-align:center;background:black;}
/* ===== Interval ===== */
/* scrollDisabled */
.scrollDisabled {overflow:hidden;}
/* align */
.left {float:left;}
.right {float:right;}
.tL {text-align:left !important;}
.tR {text-align:right !important;}
.tC {text-align:center !important;}
/* space */
.pd0 {padding:0 !important;}
.pd1 {padding:1rem !important;}
.mg0 {margin:0 !important;}
/* width */
.wHalf {width:50%;}
.wFull {width:100%;}
.wAuto {width:auto;}
/* font-size */
.fz1-6 {font-size:1.6rem;}
/* input */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="search"],
textarea {display:block;padding:1px 1rem 0;width:100%;height:2.429rem;font-size:1rem;vertical-align:middle;border:1px solid #ddd;color:#383938;box-sizing:border-box;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;outline:0 none;line-height:1.8;}
::-webkit-input-placeholder {padding-top:1px;font-size:1rem;color:#aaa;text-align:left;line-height:1.8;} /* WebKit browsers */
:-moz-placeholder {padding-top:1px;font-size:1rem;color:#aaa;opacity:1;line-height:1.8;} /* Mozilla Firefox 4 to 18 */
::-moz-placeholder {padding-top:1px;font-size:1rem;color:#aaa;opacity:1;line-height:1.8;}/* Mozilla Firefox 19+ */
:-ms-input-placeholder {padding-top:1px;font-size:1rem;color:#aaa !important;opacity:1;line-height:1.8;}/* Internet Explorer 10+ */
textarea {height:auto;padding:0.5rem;margin-top:1rem;resize:none;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}
input[type="text"]:disabled,
input[type="tel"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
textarea:disabled {background: #f8f8f8;}
input[type="text"]:read-only,
input[type="email"]:read-only,
input[type="number"]:read-only,
input[type="date"]:read-only,
input[type="password"]:read-only,
input[type="search"]:read-only,
textarea:read-only {background: #f7f7f7;}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {border:1px solid #393939;}
input[type="text"]:read-only:focus,
input[type="tel"]:read-only:focus,
input[type="email"]:read-only:focus,
input[type="number"]:read-only:focus,
input[type="date"]:read-only:focus,
input[type="password"]:read-only:focus,
input[type="search"]:read-only:focus,
textarea:read-only:focus {border:1px solid #ccc;}
input::placeholder {color:#a7a7a7;}
input:not([type="radio"]):not([type="checkbox"]),
.selectForm {width:100%;height:3.1rem;border:1px solid #dfdfdf;border-radius:1.5rem;}
input:not([type="radio"]):not([type="checkbox"]):focus,
textarea:focus {border:1px solid #ff7a6d;}
.wakeDate::placeholder{text-align: center;}
.sleepDate::placeholder{text-align: center;}
.area-custom-select {position: relative; width: 50%; height: 43px;}
.custom-select {display: inline-block; width: 100%; height: 100%; border: 1px solid #9d9a9a; background-color: #ffffff; box-sizing: border-box; font-size: 18px; cursor: pointer; position: relative; outline: 0px;}
.select-origin {position: absolute; right: 10px;}
.custom-select-text {width: 100%; position: absolute; top: 12px; text-align: center;}
.custom-select-arrow {position: absolute; top: 10px; right: 5px;}
.custom-select-list {position: absolute; top: 46px; font-size: 18px; width: 101%; height: 325%; z-index: 15; border: solid 1px #c4ccd8; background-color: #ffffff; text-align: left; margin-top: -3px; box-sizing: border-box;}
.custom-select-option {height: 46px; line-height: 48px; text-align: center; cursor: pointer; box-sizing: border-box; border-left: 1px solid #9d9a9a; border-right: 1px solid #9d9a9a; border-bottom: 1px solid #9d9a9a;}
.custom-select-option:hover {color: #ffffff; background-color: #1172c4; box-sizing: border-box;}
#footer {position: fixed; background-color: #e0dfdf; left: 0; right: 0; bottom: 0; height: 6rem;}
.questionBtn {width: 100%; height: 70px !important; margin-top: 5px; padding: 10px; border-radius: 0.4rem; border: none; font-weight: bold;font-size:16px;color: #444;}
.activate:active {box-shadow: 0 0 #bcbcbc; background-color: #bcbcbc;}
.radioSensor {position:relative;display:inline-block;width:11rem;height:3.1rem;vertical-align:middle;text-align:left;}
.radioSensor label i {display:block;width:100%;height:100%;padding-top:2px;border-radius: 0.2rem;text-align:center;line-height: 4rem;color:#fff;box-sizing:border-box;background: #b0afaf;background-position:center;font-size:16px;}
.radioSensor input:checked + label i {background: #00563f radial-gradient(circle, transparent 1%, #00563f 1%) center/15000%;transition:background 0.8s;}
.radioSensor input:active + label i {background-color: #153837;background-size:100%;transition:background 0s;}
.btnRadio {position:relative;display:inline-block;width:100%;height:3.1rem;vertical-align:middle;text-align:left;margin: 5px;font-weight: bold;}
.btnRadio label i {display:block;width:100%;height:100%;padding-top:2px;border-radius: 0.2rem;text-align:center;line-height:2.9rem;color: #444;box-sizing:border-box;background:#ffffff;background-position:center; border: 0.6px solid #777;}
.btnRadio input:checked + label i {background-color: #adc7a475; radial-gradient(circle, transparent 1%, #00563f 1%) center/15000%;transition:background 0.8s; border:0.6px solid #777;color: #444}
.btnRadio label input:active + i {background-color:#adc7a475;background-size:100%;transition:background 0s;}
#whatInput {width:100%;height:3.1rem;text-align: center;border: 1px solid gray;margin: 5px;border-radius: 0.2rem;}
#whatInput:focus {border: 1px solid #0d47a1}
#whatActiveInput {width:100%;height:3.1rem;text-align: center;border: 1px solid gray;margin: 5px;border-radius: 0.2rem;}
.manualSettime {width:100%; min-height: 600px; position:relative;}
.manualSettime .whiteBox { height: 100%; margin-bottom:10px;padding:1.3rem 1.1rem; background:none; }
.manualSettime ul li {text-align:center;overflow:hidden;}
.manualSettime ul li:not(:first-child) {margin-top:0.9rem;}
.manualSettime .btnArea {padding-top:4rem;text-align:center;}
.manualSettime .whiteBox ul li .timeSelect { position:relative; line-height:3rem; width: 100%; height: 3.1rem; border: 1px solid #dfdfdf; border-radius: 1.5rem; float: left; background-color: #fff;}
.manualSettime .whiteBox ul li .timeSelect span {width:calc((100% - 10px) / 2); height:100%; display:block; }
.manualSettime .whiteBox ul li .timeSelect span select {position:relative;text-align:center;display:block;height:3rem;width:100%;padding: 0 10% 0 10%;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;font-size:17px;}
.manualSettime .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;}
.manualSettime .whiteBox ul li .timeSelect span.timeRight {float: right;}
.manualSettime .whiteBox ul li .timeSelect span.timeLeft {float: left;}
.manualSettime .whiteBox ul li .timeSelect p {font-size: 18px;}
.manualSettime .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;}
.manualSettime .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%; }
.manualSettime .whiteBox .btnArea .red { position: fixed; bottom: 5%; left: 50%; transform:translate(-50%,0);}
.manualSettime .whiteBox .calSet input {position: relative;padding: 0 2.429rem 0 0;width: 7.7rem;height: 100%;z-index: 1;text-align: right;border: none;margin: auto;background: 0;}
#whatActiveInput:focus {border: 1px solid #0d47a1}
.howStrongRadio label i{display:block;width:100%;height:100%;line-height:2.9rem;color:#444;box-sizing:border-box;background-position:center;text-align:left;border-radius:0.2rem;padding:0 1rem;font-weight:bold;}
.howStrongRadio {margin:0.2rem 0;}
.chkForm input,
.radioForm input,
.radioSensor input,
.btnRadio input,
.radioLine input,
.radioMini input {position:absolute;opacity:0;left:0;top:0;width:100%;height:100%;border:none;background:transparent;z-index:10;cursor:pointer;}
.chkForm label,
.radioForm label,
.radioSensor label,
.btnRadio label,
.radioLine label,
.radioMini label,
.radioPopup label {display:block;word-break:break-word;font-weight:normal;}
/* input - checkbox */
.chkForm {position:relative;display:inline-block;vertical-align:middle;text-align:left;width:7rem;height:7.5rem;background:none;}
.chkForm:after {content:"";position:absolute;top:1rem;right:1rem;display:inline-block;margin-top:-3px;width:0.6rem;height:0.6rem;background-image:url('../images/btn_more.png');background-size:0.6rem 0.6rem;pointer-events:none;}
.chkForm label i {display:block;min-width:7rem;height:7.5rem;border:1px solid #dfdfdf;box-sizing:border-box;border-radius:1.1rem;box-shadow:0px 12px 18.9px 2.1px rgba(146, 146, 146, 0.1);background-position:center;}
.chkForm label i p {display:block;padding:1.8rem 0.8rem;font-size:0.9rem;text-align:center;}
.chkForm label i p em {display:block;padding-bottom:0.4rem;font-size:0.8rem;text-align:center;}
.chkForm.must label i p em {color:#ff7a6d;}
.chkForm input:checked + label i {border:1px solid #ff7a6d;background:radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.5) 1%) center/15000%;transition:background 0.8s;}
.chkForm input:active + label i {background-color:rgba(155, 155, 155, 0.3);background-size:100%;transition:background 0s;}
/* input - radio */
.radioForm {position:relative;display:inline-block;width:11rem;height:3.1rem;vertical-align:middle;text-align:left;}
.radioForm label i {display:block;width:100%;height:100%;padding-top:2px;border-radius:3.1rem;text-align:center;line-height:2.9rem;color:#fff;box-sizing:border-box;background:#cfcfcf;background-position:center;}
.radioForm input:checked + label i {background: rgba(121, 164, 150, 0.99) radial-gradient(circle, transparent 1%, rgba(121, 164, 150, 0.99) 1%) center/15000%;transition:background 0.8s;}
.radioForm input:active + label i {background-color: #153837;background-size:100%;transition:background 0s;}
/* input - radioLine */
.radioLine {position:relative;display:inline-block;width:6.4rem;height:2.1rem;vertical-align:middle;text-align:left;}
.radioLine label i {display:block;width:100%;height:100%;padding-top:2px;border:1px solid #b9b9b9;border-radius:3.1rem;text-align:center;line-height:2rem;color:#b9b9b9;box-sizing:border-box;background:none;background-position:center;}
.radioLine input:checked + label i {border:1px solid #ff7a6d;color:#ff7a6d;background:radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.5) 1%) center/15000%;transition:background 0.8s;}
.radioLine input:active + label i {background-color:rgba(155, 155, 155, 0.3);background-size:100%;transition:background 0s;}
/* input - radioMini */
.radioMini {position:relative;display:inline-block;min-width:1rem;height:1.1rem;vertical-align:middle;text-align:left;}
.radioMini input {padding-top:3px;}
.radioMini label {line-height:13px;}
.radioMini label i {display:inline-block;height:100%;padding:2px 5px 0;border-radius:2px;text-align:center;line-height:1.1rem;font-size:0.8rem;color:#fff;box-sizing:border-box;background:#cfcfcf;background-position:center;}
.radioMini input:checked + label i {background:#ff9a0a radial-gradient(circle, transparent 1%, #ff9a0a 1%) center/15000%;transition:background 0.8s;}
.radioMini input:active + label i {background-color:#c97808;background-size:100%;transition:background 0s;}
/* input - radioPopup */
.radioPopup {position:relative;display:table;min-width:1rem;height:3.4rem;text-align:left;}
.radioPopup input {position:absolute;top:50%;display:inline-block;width:15px;height:15px;margin-top:-7.5px;border:none;z-index:10;border-radius:100%;text-align:center;line-height:1.1rem;font-size:0.8rem;cursor:pointer;color:#fff;box-sizing:border-box;background:#cfcfcf;background-position:center;}
.radioPopup label {display:table-cell;width:21.2rem;height:100%;padding-left:1.6rem;cursor:pointer;vertical-align:middle;}
.radioPopup input:checked {background: rgb(255, 122, 109) radial-gradient(circle, transparent 1%, rgb(255, 122, 109) 1%) center/15000%;transition:background 0.8s;}
.radioPopup input:active {background-color: #be5f54;background-size:100%;transition:background 0s;}
/* input - text */
.textForm.unit {position:relative;display:block;}
.textForm.unit input {padding-right:3.7rem;text-align:right;}
.textForm.unit em {position:absolute;top:1rem;right:1.4rem;color:#777777;}
.textForm.selectInput {position:relative;display:block;padding:0;overflow:hidden;vertical-align:middle;}
.textForm.selectInput:after {content:"";position:absolute;left:auto;right:1rem;top:50%;display:inline-block;margin-top:-3px;width:0.8rem;height:0.5rem;background-image:url('../images/btn_select.png');transform:rotate(270deg);background-size:0.8rem 0.5rem;pointer-events:none;}
.textForm.selectInput input:read-only {width:100%;height:3.1rem;border:1px solid #dfdfdf;border-radius:1.5rem;background:#fff;}
.textForm.selectInput input {padding-right:2rem;}
/* input - email */
.emailBtn,
.emailTime {position:relative;display:block;}
.emailBtn input[type="email"] {padding-right:6.7rem;}
.emailTime input[type="email"] {padding-right:4.7rem;}
.emailBtn input[type="email"] + .btnSS {position:absolute;top:0.5rem;right:0.7rem;width:4.8rem;height:2rem;padding-top:2px;border-radius:1rem;color:#fff;background:#ff7a6d;background-position:center;}
.emailBtn input[type="email"] + .btnSS:hover {background:#ff7a6d radial-gradient(circle, transparent 1%, #ff7a6d 1%) center/15000%;}
.emailBtn input[type="email"] + .btnSS:active {background-color:#be5f54;background-size:100%;transition:background 0s;}
.emailTime input[type="email"] + em {position:absolute;top:0.9rem;right:1.5rem;color:#ff7a6d;}
/* input - errorMsg */
.emailForm, .textForm, .selectForm {position:relative;}
.emailForm.errorData input,
.textForm.errorData input,
.selectForm.errorData input {border:1px solid #ff9a0a;}
.emailForm .errorMsg,
.textForm .errorMsg,
.selectForm .errorMsg {position:absolute;top:2.3rem;left:1rem;color:#ff9a0a;background:#fff;}
/* select */
.selectForm {position:relative;padding:0;display:inline-block;overflow:hidden;vertical-align:middle;}
.selectForm select {display:block;padding:0 2rem 0 1rem;height:3.1rem;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border:none;color:#a7a7a7;background:#fff;outline:0 none;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
/* ver2.0 수정*/
.selectForm:after {content:"";position:absolute;left:auto;right:1rem;top:50%;display:inline-block;margin-top:-3px;width:0.8rem;height:0.5rem;background-size:0.8rem 0.5rem;pointer-events:none;}
/*.selectForm:after {content:"";position:absolute;left:auto;right:1rem;top:50%;display:inline-block;margin-top:-3px;width:0.8rem;height:0.5rem;background-image:url('../images/btn_select.png');background-size:0.8rem 0.5rem;pointer-events:none;}*/
.selectForm .placeOpt {color:#a7a7a7;}
.selectForm .valOpt {color:#444;}




/* ===== Btn ===== */
.btn {font-size:1rem;border:none;color:#ff7a6d;box-shadow:1px 5px 8.1px 0.9px rgba(123, 47, 40, 0.1);background:#fff;cursor:pointer;transition:background 0.8s;}
.btn.abg:active {color:#ff7a6d;background:#fff;}
.btnM {width:15rem;height:3.1rem;padding-top:2px;border-radius:1.5rem;background-position:center;}
.btnM:hover {background:#fff radial-gradient(circle, transparent 1%, #fff 1%) center/15000%;}
.btnM:active {background-color:#999;background-size:100%;transition:background 0s;}
.btnM:disabled {background:#cfcfcf !important;color:#fff !important;cursor:inherit !important;}
.btnM.line:disabled {border:1px solid #cfcfcf; background:#cfcfcf !important;color:#fff !important;cursor:inherit !important;}
.btnM.cancell {border:1px solid #dfdfdf;color:#a7a7a7;}
.btnS.cancell {border:1px solid #dfdfdf;color:#a7a7a7;}
.btn.line {border:1px solid #fff;color:#fff;background:none;background-position:center;}
.btnM.red {background:#ff7a6d;color:#fff;background-position:center;}
.btnM.green {background:#82B2A4FC;color:#fff;background-position:center;border: none;}
.btnM.green:hover {background:#82B2A4FC radial-gradient(circle, transparent 1%, #82B2A4FC 1%) center/15000%;}
.btnM.green:active {background-color:#00563F5C;background-size:100%;transition:background 0s;}
.btnS.green {width:8.9rem;height:2.1rem;padding-top:2px;border-radius:1.1rem;border:1px solid #82B2A4FC;color:#82B2A4FC;background:none;background-position:center;}
/*.btnM.green {background: linear-gradient(0deg, #00563f5c 0%, #00563fbf 50%, #00563F 100%);color:#fff;background-position:center;}*/
.btnM.red:hover {background:#ff7a6d radial-gradient(circle, transparent 1%, #ff7a6d 1%) center/15000%;}
.btnM.red:active {background-color:#be5f54;background-size:100%;transition:background 0s;}
.btnM.blue {background:#93bddb;color:#fff;background-position:center;}
.btnM.blue:hover {background:#93bddb radial-gradient(circle, transparent 1%, #93bddb 1%) center/15000%;}
.btnM.blue:active {background-color:#7495ad;background-size:100%;transition:background 0s;}
.btnS {width:8.9rem;height:2.1rem;padding-top:2px;border-radius:1.1rem;border:1px solid #00563F;color:#00563F;background-color:#e0e0e0;background-position:center;}
.btn.line:hover,
.btnS:hover {background:radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.5) 1%) center/15000%;}
.btn.line:active,
.btnS:active {background-color:rgba(155, 155, 155, 0.3);background-size:100%;transition:background 0s;}
.btn.login {position:relative;padding:2px 0 0 2.1rem;}
.btn.join {position:relative;padding:2px 0 0 2.6rem;}
.btn.login:after {content:"";position:absolute;top:30%;left:65px;display:inline-block;margin-top:-3px;width:1.8rem;height:1.8rem;background-image:url('../images/btn_login.png');background-size:1.8rem 1.8rem;pointer-events:none;}
.btn.join:after {content:"";position:absolute;top:30%;left:60px;display:inline-block;margin-top:-3px;width:1.8rem;height:1.8rem;background-image:url('../images/btn_join.png');background-size:1.8rem 1.8rem;pointer-events:none;}
/* ===== Text ===== */
/* ===== Icon ===== */
/* ===== Grid ===== */
.gridSet {display:table;width:100%;box-sizing:border-box;}
.gridItem {display:table-cell;width:100%;vertical-align:middle;box-sizing:border-box;}
.gridSet.grid2 .gridItem {width:50%;}
.gridSet.grid3 .gridItem {width:33.3%;}
.gridSet.grid3 .gridItem:nth-child(2) {width:33.4%;}
.gridSet.grid4 .gridItem {width:25%;}
.gridSet.grid5 .gridItem {width:20%;}
/* ===== error ===== */
/* ===== Loading ===== */
.pageLoading {position:fixed;z-index:30000;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);}
@keyframes spinner {
  to {transform: rotate(360deg);}
}
@-webkit-keyframes spinner {
  to {-webkit-transform: rotate(360deg);}
}
.spinner {position: absolute;width:50px;height:50px;top:50%;left:50%;margin:-25px 0 0 -25px;min-width: 50px;min-height: 50px;}
.spinner:before {content: 'Loading…';position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin-top: -25px;margin-left: -25px;}
.spinner:not(:required):before {content: '';border-radius: 50%;border: 2px solid #fff;border-top-color: #fc6259;animation: spinner .6s linear infinite;-webkit-animation: spinner .6s linear infinite;}
/* ====================== */
/* Common Setting */
/* ====================== */
/* ===== Layout ===== */
#wrap {position:relative;min-height:100vh;}
#header {position:relative;height:63px;background: #00563F;}
#header.bgCase {background-color:#00563F;background-repeat:no-repeat;background-image:url("../images/bg_bgCase_pattern.png");background-size:214px auto;background-position:top right;}
#header header {display:flex;padding:0 63px;height:100%;align-items:center;justify-content:center;box-sizing:border-box;}
#header h1 {text-align:center;color:#fff;font-size:18px;font-weight:500;}
#header h1 span {text-align:center;color:#fff;font-size:1.143rem;font-weight:500;}
#header .po-left {position:absolute;left:0;top:0;}
#header .po-right {position:absolute;right:0;top:0;}
#header .btnHeaderIcon {display:inline-block;width:63px;height:63px;border:0;font-size:0;text-indent:-100%;background-repeat:no-repeat;background-color:transparent;background-position:center;}
#header .btnMenu {background-image:url("../images/btn_menu.svg");background-size:19px auto;}
#header .btnBack {background-image:url("../images/btn_back.png");background-size:19px auto;}
#container {position:relative;}
/* 푸시버튼 추가 */
#header .po-left .btnPush {position:relative;background-image:url("../images/btn_pus-white.svg");background-size:19px auto; display:block; }
#header .po-left .btnPushon {position:relative;background-image:url("../images/btn_pus-white-on.svg");background-size:19px auto; display:block;}
/* 날짜 선택 추가 */
/* ver2.0 수정*/
/*#header h1.fz1-6 span.selectForm{display: block; height: 2.1rem; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: none; outline: 0 none; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none;}*/
#header h1.fz1-6 span.selectForm{display: block; padding: 0 1rem 0 1rem; height: 2.3rem; width: 220px !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: none; outline: 0 none; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
/*#header h1.fz1-6 span.selectForm {border:none;}*/
#header h1.fz1-6 span.selectForm select.selectDate {background: none; color:#fff; font-size: 1.143rem;font-weight: 500; }
/*#header h1.fz1-6 span.selectForm:after {background-image:url("../images/btn_select-white.png")}*/


/* gnb */
#gnb {display:none;position:fixed;left:0;top:0;bottom:0;right:0;width:100%;height:100%;z-index:30;background:rgba(0, 0, 0, 0.3);}
#gnb.open {display:block;animation:gnbShowAnimation .8s 1 ease;}
#gnb .btnClose {display:inline-block;position:absolute;right:0;top:0;width:63px;height:63px;border:0;font-size:0;text-indent:-100%;background-repeat:no-repeat;background-color:transparent;background-position:center;background-image:url("../images/btn_close.png");background-size:19px auto;}
#gnb nav {position:absolute;right:1.143rem;top:63px;}
#gnb nav .btnGnbIcon {position:relative;display:block;width:3rem;height:3rem;margin-bottom:0.4rem; border-radius:100%;box-shadow:0 5px 8.1px 0.9px rgba(123, 47, 40, 0.2);background:#fff;cursor:pointer;transition:background 0.8s;text-indent:-9999px;}
#gnb nav .btnGnbIcon:after {content:"";position:absolute;top:25%;left:50%;display:inline-block;margin-left:-0.7rem;width:1.5rem;height:1.4rem;background-size:1.5rem 1.4rem;pointer-events:none;}
#gnb nav .btnGnbIcon.main:after {background-image:url('../images/btn_home_black.svg');}
#gnb nav .btnGnbIcon.main:hover:after {background-image:url('../images/btn_home_white.svg');}
#gnb nav .btnGnbIcon.main.on:after {background-image:url('../images/btn_home_white.svg');}
#gnb nav .btnGnbIcon.graph:after {background-image:url('../images/btn_graph_black.svg');}
#gnb nav .btnGnbIcon.graph:hover:after {background-image:url('../images/btn_graph_white.svg');}
#gnb nav .btnGnbIcon.graph.on:after {background-image:url('../images/btn_graph_white.svg');}
/* #gnb nav .btnGnbIcon.alarm:after {background-image:url('../images/btn_alarm_black.svg');background-size:100% 107%;}
#gnb nav .btnGnbIcon.alarm:hover:after {background-image:url('../images/btn_alarm_white.svg');background-size:100% 107%;}
#gnb nav .btnGnbIcon.alarm.on:after {background-image:url('../images/btn_alarm_white.svg');background-size:100% 107%;} */
#gnb nav .btnGnbIcon.heartM:after {background-image:url('../images/btn_heartM_black.svg');background-size:100% 107%;}
#gnb nav .btnGnbIcon.heartM:hover:after {background-image:url('../images/btn_heartM_white.svg');background-size:100% 107%;}
#gnb nav .btnGnbIcon.heartM.on:after {background-image:url('../images/btn_heartM_white.svg');background-size:100% 107%;}
/* 2022-08-16 강준일 */
#gnb nav .btnGnbIcon.survey:after {background-image: url('../images/v2/survey-black.svg'); background-size: 103% 100%;}
#gnb nav .btnGnbIcon.survey:hover:after {background-image: url('../images/v2/survey-white.svg'); background-size: 103% 100%;}
#gnb nav .btnGnbIcon.survey.on:after {background-image: url('../images/v2/survey-white.svg'); background-size: 103% 100%;}
#gnb nav .btnGnbIcon.project:after {content:"🗂️";top:50%;left:50%;width:auto;height:auto;margin-left:0;background-image:none;background-size:auto;text-indent:0;font-size:1.35rem;line-height:1;transform:translate(-50%,-50%);}
/* //2022-08-16 강준일 */
#gnb nav .btnGnbIcon.mypage:after {background-image:url('../images/btn_mypage_black.svg');background-size:100% 135%;}
#gnb nav .btnGnbIcon.mypage:hover:after {background-image:url('../images/btn_mypage_white.svg');background-size:100% 135%;}
#gnb nav .btnGnbIcon.mypage.on:after {background-image:url('../images/btn_mypage_white.svg');background-size:100% 135%;}
#gnb nav .btnGnbIcon.logout:after {background-image:url('../images/btn_logout_black.svg');background-size:100% 100%;}
#gnb nav .btnGnbIcon.logout:hover:after {background-image:url('../images/btn_logout_white.svg');background-size:100% 100%;}
#gnb nav .btnGnbIcon.logout.on:after {background-image:url('../images/btn_logout_white.svg');background-size:100% 100%;}
#gnb nav .btnGnbIcon:hover {background:#ff9a0a radial-gradient(circle, transparent 1%, #ff9a0a 1%) center/15000%;}
#gnb nav .btnGnbIcon:active {background-color:#c4770b;background-size:100%;transition:background 0s;}
#gnb nav .btnGnbIcon.on {background-color:#ff9a0a;background-size:100%;transition:background 0s;}
@keyframes gnbShowAnimation {
  0% {
    background:rgba(0, 0, 0, 0.1);
  }
  70% {
    background:rgba(0, 0, 0, 0.35);
  }
  100% {
    background:rgba(0, 0, 0, 0.3);
  }
}
/* animaiton */
.shaking {animation:shaking 0.5s infinite;}
@keyframes shaking {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* ===== Layout - bg ===== */
#wrap.bgCase {background-color:#00563F;background-repeat:no-repeat;background-image:url("../images/bg_bgCaseBottom.png"), url("../images/bg_bgCase_shadow.png"), url("../images/bg_bgCaseTop.png");background-size:275px 255px,100% 824px, 172px 150px;background-position:bottom left, bottom center, top right;}
#wrap.bgCase #header {background:transparent;}
/* ===== Layout - main ===== */
#wrap.mainCase {background-color:#00563F;background-repeat:no-repeat;background-image:url("../images/bg_bgCase_shadow.png"), url("../images/bg_bgCase_pattern.png");background-size:100% auto, 214px auto;background-position:bottom center, top right;}
#wrap.mainCase #header {background:transparent;}
/* ===== Layout - point ===== */
#wrap.pointCase:before {content:"";display:block;position:absolute;top:0;left:0;right:0;width:100%;height:120px;background-color:#00563F;background-repeat:no-repeat;background-image:url("../images/bg_bgCase_pattern.png");background-size:214px auto;background-position:top right;z-index:1;}
#wrap.pointCase #header {background:transparent;z-index:2;}
/* ====================== */
/* Main Setting */
/* Sub Setting */
/* ====================== */
/* ===== 공통 ===== */
/* ====================== */
/* Popup Setting */
/* ====================== */
/* ===== Pop Common ===== */
/* Dim layer 기본 */
.fullPop {z-index:300;position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;}
.fullPop .titleArea {padding:2.3rem 1.1rem 0;text-align:center;}
.fullPop .titleArea h1 {padding-bottom:1.1rem;border-bottom:1px solid #000;}
.fullPop .titleArea .btnClose {position:absolute;top:1.4rem;right:1.1rem;z-index:100;width:1.6rem;height:1.6rem;text-indent:-9999px;cursor:pointer;overflow:hidden;border:none;box-sizing:border-box;background:url('../images/btn_close_b.png') no-repeat center;background-size:100% auto;}
.fullPop .backArea {position:fixed;top:80px;left:0;right:0;bottom:7.1rem;padding:0 1.1rem;overflow-y: scroll;}
.fullPop .btnArea {position:absolute;bottom:2.9rem;left:0;width:100%;padding:0;text-align:center;}
/* pin 팝업 기본 */
.pinPop {z-index:299;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00563F;background-repeat:no-repeat;background-image:url("../images/bg_bgCase_shadow.png"), url("../images/bg_bgCase_pattern.png");background-size:100% auto, 214px auto;background-position:bottom center, top right;box-sizing:border-box;transform:translateY(100%);transition:0.3s ease-in-out;}
/* common pinPopHeader 추가 */
.pinPop #pinPopHeader {position:relative;height:63px;}
.pinPop #pinPopHeader .po-left {position:absolute;left:0;top:0;}
.pinPop #pinPopHeader .btnBack{background-image: url("../images/btn_back.png"); background-size: 19px auto;}
.pinPop #pinPopHeader .btnPopHeaderIcon {display: inline-block;width: 63px;height: 63px;border: 0;font-size: 0;text-indent: -100%;background-repeat: no-repeat;background-color: transparent;background-position: center;}
/* ====================== */
.pinPop.active {transform:translateY(0);transition:0.3s ease-in-out;}
.pinPop .pinLayout {display:table;width:100%;height:100vh;}
.pinPop .pinLayout .pinInner {position:relative;display:table-cell;padding-bottom:3rem;vertical-align:middle;}
.pinPop .pinLayout .pinHead {padding:1.6rem 0 6.4rem;text-align:center;}
.pinPop .pinLayout .pinHead h1 {width:100%;margin-bottom:1.3rem;font-size:1rem;color:#fff;}
.pinPop .pinLayout .pinHead p {width:100%;margin-bottom:2.4rem;font-size:0.9rem;color:#fff;}
.pinPop .pinLayout .pinHead em {font-size:1rem;color:#fff;}
.pinPop .pinLayout .pinHead .msg {font-size:0.9286rem;color:#fff;}
.pinPop .pinLayout .pinNumber {text-align:center;}
.pinPop .pinLayout .pinNumber span {position:relative;display:inline-block;margin:0 10px;width:1.429rem;height:1.429rem;text-align:center;vertical-align:middle;}
.pinPop .pinLayout .pinNumber span:after {position:absolute;content:'';left:0;top:0;display:block;width:1.429rem;height:1.429rem;border-radius:50%;background:#8d383e;}
.pinPop .pinLayout .pinNumber span.fill:after {background:#ffe1de;}
.pinPop .pinLayout .pinNumber span input {display:block;width:0;height:10px;padding:0;color:transparent;font-size:0;text-align:center;border:none;background:transparent;}
.pinPop .pinLayout .pinNumber span.show {height:auto;}
.pinPop .pinLayout .pinNumber span.show:after {content:none;}
.pinPop .pinLayout .pinNumber span.show input {font-size:1rem;width:100%;height:100%;font-weight:700;color:#393939;}
.pinPop .pinLayout .keypad .keyBack {display:table;max-width:322px;margin:0 auto;width:100%;border-collapse:collapse;}
.pinPop .pinLayout .keypad ul {display:table-row;}
.pinPop .pinLayout .keypad ul li {position:relative;display:table-cell;width:33%;height:4.857rem;box-sizing:border-box;text-align:center;vertical-align:middle;}
.pinPop .pinLayout .keypad ul li:nth-child(2) {width:34%;}
.pinPop .pinLayout .keypad ul li input {position:absolute;opacity:0;left:0;top:0;width:100%;height:100%;border:none;z-index:1;background:transparent;cursor:pointer;transition:background 0.8s;background-position:center;}
.pinPop .pinLayout .keypad ul li label {display:inline-block;width:2.429rem;height:2.429rem;border:none;cursor:pointer;color:#fff;text-align:center;font-size:1.429rem;border-radius:100%;line-height:1.9;font-weight:400;transition:0.3s;}
.pinPop .is-Android .pinLayout .keypad ul li label {line-height:2;}
.pinPop .pinLayout .keypad ul li input:hover + label {background-color:#df5456 radial-gradient(circle, transparent 1%, #df5456 1%) center/15000%;}
.pinPop .pinLayout .keypad ul li input.number:active + label {background-color:#b24244;background-size:100%;transition:background 0s;}
.pinPop .pinLayout .keypad ul li input.back + label {background:url('../images/btn_back.png') no-repeat center;background-size:18px auto;text-indent:-9999px;}
.pinPop .pinLayout .keypad ul li input.back:active + label {background-color:#b24244;transition:background 0s;}
.pinPop .pinLayout .pinOption {position:absolute;padding-top:2.286rem;text-align:center;width:100%;}
.pinPop .pinLayout .pinOption a {color:#fff;font-size:0.9286rem;}
.pinPop .pinLayout .passStep {height:100%;}
.pinPop .pinLayout .passStep .passInner {padding-bottom:4rem;}
#notMatchPW,
#changePW,
#changeInfo {top:0;width:14rem;min-height:0;padding:1rem 0;border-radius:5px;box-sizing:border-box;transform:translate(-50%, 50%);transition:0.1s ease-in-out;}
#notMatchPW.active,
#changePW.active,
#changeInfo.active {top:7%;transition:0.1s ease-in-out;}
#notMatchPW .backArea,
#changePW .backArea,
#changeInfo .backArea {padding:0;text-align:center;}
/* basic 팝업 기본 */
.basicDim {position:fixed;z-index:300;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);}
.basicPop {position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);width:23.4rem;min-height:12rem;padding:0 0 1.4rem;box-shadow:3px 3px 12px 0px rgba(0, 0, 0,.16);box-sizing:border-box;border-top-left-radius:15px;border-bottom-right-radius:15px;background:#fff;}
.basicPop.selectPop {padding-bottom:1rem;}
.basicPop .titleArea {height:3.8rem;padding:1.4rem 1.1rem 0.4rem;}
.basicPop .titleArea h1 {padding:0 1rem 1.2rem 1rem;font-size:1.1rem;border-bottom:1px solid #e1e1e6;}
.selectPop .titleArea .btnClose {position:absolute;top:1.7rem;right:1.3rem;z-index:100;width:1rem;height:1rem;text-indent:-9999px;cursor:pointer;overflow:hidden;border:none;box-sizing:border-box;background:url('../images/btn_close_b.png') no-repeat center;background-size:100% auto;}
.basicPop .backArea {padding:0 1.1rem;}
.basicPop .backArea.errorPop {padding:5rem 1.1rem 8rem;text-align:center;}
.basicPop .backArea.btnRadio{}
.selectPop .backArea {padding:0 1.1rem;}
.basicPop .backArea textarea {height:250px;margin-top:30px;}
.basicPop .backArea p {word-break:break-all;}
.selectPop .backArea ul {max-height:300px;overflow:scroll;}
.selectPop .backArea ul li {border-bottom:1px solid #f8f8f8;}
.basicPop .btnArea.double .btn {margin:0 0.4rem;width:7.1rem;}
.basicPop .btnArea {position:absolute;bottom:0;left:0;width:100%;height:4rem;padding:0;text-align:center;}
/* alert 팝업 기본 */

.basicDimNormal {position:fixed;z-index:300;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);}
/* 수기입력 표시 추가*/
#list ul li .item .tR span.mark {margin:0 0.2rem;color:#27cca0;font-size:14px;-webkit-appearance:none;-webkit-text-size-adjust:none;font-weight:bold;position:absolute;top:2rem;right:1rem;}
select option[value=""][disabled] {display: none;}

#header .koLang {display:inline-block;width:2.5rem;height:2.5rem;border:none;background:url("../images/v2/lgg_kor_01.png") no-repeat center;cursor:pointer;text-indent:-9999px;background-size:cover;}
#header .koLangIn {display:inline-block;width:2.5rem;height:2.5rem;border:none;background:url("../images/v2/lgg_kor_00.png") no-repeat center;cursor:pointer;text-indent:-9999px;background-size:cover;}
#header .enLang {display:inline-block;width:2.5rem;height:2.5rem;border:none;background:url("../images/v2/lgg_eng_01.png") no-repeat center;cursor:pointer;text-indent:-9999px;background-size:cover;}
#header .enLangIn {display:inline-block;width:2.5rem;height:2.5rem;border:none;background:url("../images/v2/lgg_eng_00.png") no-repeat center;cursor:pointer;text-indent:-9999px;background-size:cover;}
#header .po-left .totalLang {vertical-align: middle;text-align: center;margin:15px 15px 15px;}
/* 보고서페이지 추가 */
#header .po-left-center {position: absolute;left: 1rem; top: 50%;transform: translateY(-50%);}
#gnb nav .btnGnbIcon.document:after { background-image: url('../images/btn_document.svg');background-size: cover;}
.documentArea {position:relative;margin:0 1.1rem;padding:0.5rem 1rem 0;border-radius:1.1rem;box-shadow:0 12px 18.9px 2.1px rgba(146, 146, 146, 0.1);background:#fff;z-index:4;text-align: center;}
.documentArea .title {padding: 2rem 0 1.5rem;font-size: 1.14rem;font-weight: bold;}
.documentArea .btnArea {padding:1rem 0; border-top: 0.5px solid #eee;}
.documentArea .btnArea button {width:100%;height:3.6rem;border:none;border-radius:0.4rem;}
.documentArea .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:document-btn-animation 0.4s infinite ease-in alternate;box-shadow:4px 4px 10px rgba(0, 0, 0, 0.14);}
.documentArea .backArea {padding: 0 1rem 1rem 1rem;}
@keyframes document-btn-animation {0% {transform:translate(0,-2px);}50% {background-position:center;}100% {transform:translate(0,2px);}}
.documentLog {padding-bottom: 50px;}
.documentLog .selectGroup {padding: 0 15px 15px;}
.documentLog .titleGroup {text-align: center;padding: 0 0 20px;}
.documentLog .titleGroup .title {padding-top: 20px;font-size: 17px;}
.documentLog .selectForm + .accordion {margin-top: 10px;}
.documentLog .accordion .item:last-of-type .header {border-color: transparent;}
.documentLog .accordion .item:last-of-type .content {border-color: transparent;}
.documentLog .accordion .header {cursor: pointer; padding: 15px; border-bottom: 1px solid #676767;}
.documentLog .accordion .header.active {border-color: transparent;background-color: #fbfae3;}
.documentLog .accordion .info {display: flex;justify-content: space-between;}
.documentLog .accordion .info .date {font-size: 15px;}
.documentLog .accordion .desc span {margin-left: 10px;font-size: 12px;}
.documentLog .accordion .desc span::before {content: "";display: inline-block;margin-right: 10px;width: 10px;height: 10px;border-radius: 50%;}
.documentLog .accordion .desc .small::before{background-color: #92cf71;}
.documentLog .accordion .desc .middle::before{background-color: #fec23b;}
.documentLog .accordion .desc .high::before{background-color: #fb4a16;}
.documentLog .accordion .graph {overflow: hidden;width: 100%;height: 35px;display: flex;margin-top: 10px;border-radius: 4px;}
.documentLog .accordion .graph .bar {position: relative; flex-grow: 1;height: 100%;}
.documentLog .accordion .graph .bar span {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);color: #fff;font-size: 12px;line-height: 13px;}
.documentLog .accordion .graph .small {background-color: #92cf71;}
.documentLog .accordion .graph .middle {background-color: #fec23b;}
.documentLog .accordion .graph .high {background-color: #fb4a16;}
.documentLog .accordion .content {display: none;padding-bottom: 15px;border-bottom: 1px solid #676767;background-color: #e1e1e1;}
.documentLog .accordion .content .inner {display: block; padding: 15px 25px 0;}
.documentLog .accordion .content .date strong {font-size: 13px;font-weight: bold;color: #000;}
.documentLog .accordion .content .date span {font-size: 12px;color: #000;}
.documentLog .history {padding: 0 10px 20px;border-bottom: 1px solid #e1e1e1;}
.documentLog .history + .history {padding-top: 20px;}
.documentLog .history:last-of-type {padding-bottom: 10px;border-bottom: 0;}
.documentLog .history .title {font-size: 15px;}

.documentLog .history .list {margin-top: 15px;display: flex;display: flex;flex-direction: column;gap: 5px;padding-left: 5px;color: #444;}
.documentLog .history .list p {color: #444;}
.documentLog .history .date {color: #858585;font-size: 13px;}
.documentLog .history .btnMap {position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 0;background-color: transparent;z-index: 2;}
.documentLog .history .mapGroup {position: relative;}
.documentLog .history .map {min-height: 400px;}
.documentLog .history .map img {width: 100%;object-fit: cover;position: absolute;left:50%;top: 50%;transform: translate(-50%,-50%); }
.documentPage .btnArea .red { position: fixed; bottom: 17px; left: 50%; transform:translate(-50%,0);}
.popupMap .map {width: 100%;height: 100vh;}
.popupMap .btnClose {position:absolute;top:1.4rem;right:1.1rem;z-index:100;width:1.6rem;height:1.6rem;text-indent:-9999px;cursor:pointer;overflow:hidden;border:none;box-sizing:border-box;background:url('../images/btn_close_b.png') no-repeat center;background-size:100% auto;}
.colorcircle_list {max-height: 50vh;overflow-y: auto;counter-reset:list-number;}
.colorcircle_item {position: relative; padding: 10px 10px 10px 24px;counter-increment:list-number;}
.colorcircle_item + .colorcircle_item {border-top: 1px dotted #cfcfcf;}
.colorcircle_item::before {position: absolute;top: 13px;left: 4px;content:counter(list-number);color: #fff;font-size: 10px;background-color: #00563F;width: 15px;height: 15px;border-radius: 50%;text-align: center;line-height: 15px;}
.colorcircle_item .date {display: block;margin-bottom: 5px;font-weight: bold;}

#loading { position:fixed;z-index:400; top:0;right:0;bottom:0;left:0;background:rgba(255, 255, 255, .5);}
#loading .loadingCon { font-size:0; display: inline-block; width: 60px; height: 60px; position:absolute; top:50%; left: 49%; border: 2px solid #dfdfdf; border-radius: 50%; border-top-color: #ff6d5e; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; }