@charset "utf-8";

#conWrap {background:#fff}

.popup-style .bullet-list {margin-top:15px}
.popup-style .box-wrap {font-size:14px}

.btn-link {position:absolute; right:14px; top:54px}
.btn-link button {position:relative; padding:5px 10px; font-size:14px; border:none; background:none}
.btn-link button:after {content:''; display:inline-block; margin-top:-2px; background:url(../images/arrow-right3.png) no-repeat; width:20px; height:20px; background-size:100%; vertical-align:middle}

.basic-section {padding:0 24px}
.basic-section .basic-tit-box {padding:0}

.color01 {color:#ff7802 !important}
.color02 {color:#2c7fdf !important}

.t-center {text-align:center}

.footer-btn.bwteen button + button {margin-left:4px}
button:disabled {opacity:.4}

.score-view {position:relative/*; min-height:485px*/}
.score-view .event-visual.walk::before {background-image:url(../images/ico-walk.png)}
.score-view .circle-box + .bottom-btn {position:absolute; left:0; bottom:0; padding:30px; width:100%}

.circle-box path.cirCle1 {
    stroke: url(#gradient);    
    stroke-dasharray: 198;	   
    animation:dashCircle 3s ease-out forwards;
}
.circle-box .txt-f .style1 {font-size:18px}
.main-point-slide .swiper-slide .score-view .txt-type {font-size:15px; line-height:1.4; font-weight:400}

.circle-box .ico-point.ico-sav,
.circle-box .ico-point.ico-exp {color:#b1b2b3; font-size:12px; font-weight:400}
.circle-box .ico-point.ico-sav:before {filter:grayscale(1)}
.circle-box .ico-point.ico-exp:before {background-image:url(../images/ico-point-exp.png)}

.challenge-box .tit-area.point-succe:after {background-image:url(../images/ico-succe.png)}
.challenge-box .tit-area.point-faile:after {background-image:url(../images/ico-faile.png)}

.box-wrap {padding:18px 20px; line-height:22px; border:1px solid #cfe3f7; background:#f7fbff; border-radius:8px}

.__point-ani {padding:1rem; text-align:center}
.__point-ani img {min-width:50%; max-width:100%; max-height:200px}
.__point-cont {box-shadow:none}
.__point-cont .basic-tit-box {font-weight:500; font-size:20px; line-height:2rem; text-align:center}
.__point-cont .basic-tit-box dt {font-size:18px}
.__point-cont + .txt-area {position:fixed; left:0; bottom:90px; right:0; color:#111; font-size:14px; text-align:center; line-height:20px}
.__point-cont .graph-box {margin:70px 0 20px}
.__point-cont .graph-box .txt {font-weight:500}
.__point-cont .graph-box .txt span {font-size:14px}

/* 약관 */
/*
.full-popup {position:fixed; left:0; top:0; right:0; bottom:0; background:#fff; width:100%; height:100%; z-index:5}*/
.full-popup {position:fixed; left:0; top:0; right:0; bottom:0; background:#fff; z-index:3; animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;}
.full-popup:after {content:''; overflow:hidden; position:absolute; left:0; top:0; right:0; bottom:0; background:#fff; z-index:-1}
.full-popup.active {animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;}
.full-popup .popup-article {overflow:auto; background:#fff; height:calc(100% - 90px)}
.full-popup .footer {background:#fff}
.sfd-terms .s-tit2 {margin:30px 0 0; font-size:15px}
.sfd-terms .s-tit2:first-child {margin-top:0}
.terms-desc {margin:15px 0 0; font-size:12px; line-height:18px}
.terms-desc li+li {margin-top:4px}
.terms-desc img {max-width:100%}
.terms-date {margin:40px 0 100px}

.agree-none .btn {display:none}

/* 안내 */
.desc-info {margin:0 0 30px; color:#666; line-height:21px}
.desc-info p {margin:0 0 20px; color:#111; font-size:18px; font-weight:600; line-height:25px}

.graph-area .tit {line-height:45px}
.graph-area .tit .fc01 {font-size:32px; font-weight:600}
.graph-area .graph-box {margin-top:10px;}
#barChart .line-class-data2 { stroke-dasharray: 2 4; stroke-width: 2px; }
.bb-circles-data2 .bb-circle {r:.5 !important}

/* 자주 묻는 질문 */
.faq-area details {border-bottom:1px solid #eaebed;}
.faq-area details summary {position:relative; padding:15px 30px 15px 0; line-height:1.5; list-style:none; cursor:pointer;}
.faq-area details summary::after {content:''; display:inline-block; position:absolute; right:10px; transition:all 0.35s ease-in-out; transform:rotate(0deg); width:16px; height:16px; background-image:url(../images/bullet-bottom2.png); background-position:center center; background-size:16px 16px; background-repeat:no-repeat;}
.faq-area details summary::-webkit-details-marker {display:none;}
.faq-area details .faq-answer {padding:15px; color:#8d8e90; font-size:14px; line-height:1.5; background:#f3f4f6;}
.faq-area details[open] summary::after {transform:rotate(-180deg);}
.faq-area details[open] summary ~ * {animation:sweep .3sease-in-out;}
@-webkit-keyframes sweep {
  0% {
    opacity:0; margin-top:-10px;
  }
  100% {
    opacity:1; margin-top:0px;
  }
}
@keyframes sweep {
  0% {
    opacity:0; margin-top:-10px;
  }
  100% {
    opacity:1; margin-top:0px;
  }
}
.faq-answer a {text-decoration:underline}
.faq-answer img {margin:5px 0; max-width:100%}
.faq-list {margin-top:5px}
.faq-list li:before {content:''; display:inline-block; margin:7px 5px 0 0; background:#A7A8AA; width:2px; height:2px; vertical-align:top}
.faq-list li ul {margin-left:8px}
.faq-list li ul li:before {width:4px; height:1px}

/* 완료 */
.basic-comp {text-align:center}
.basic-comp:before {content:''; display:inline-block; margin:0 auto 16px; background:url('../images/ico-notice.png') 0 0 no-repeat; background-size:100%; width:48px; height:48px}
.basic-comp .m-tit {margin-top:0}

/*.box-wrap {padding:22px 20px; border:1px solid #d9dadc; border-radius:8px}*/
.box-tit {margin-bottom:8px; font-size:14px}
.box-con {margin-bottom:13px; color:#8d8e90; font-size:13px}
.givePoint {width:100%}

/* 자동로그인 */
.login-box {position:relative; padding-bottom:10px}
.login-box:after {content:''; position:absolute; right:0; top:-20px; display:inline-block; background:url('../images/ico-login.png') 0 0 no-repeat; background-size:100%; width:100px; height:100px}
.login-box .txt-area {color:#666; font-size:14px; line-height:1.4}
.login-box .txt-area p {margin-bottom:10px}

.bs-wrap .bs-cont .bs-tit.tit02 {font-size:23px; font-weight:600; line-height:33px}
.bs-wrap .bs-cont .bs-tit.tit02 span {font-weight:600}

/* 약관 ****/
.bs-wrap .bs-cont .bs-tit + .desc {margin:-15px 0 25px; color:#8d8e90; font-size:13px; font-weight:400; line-height:16px}

.total-agree-wrap .agree-check-list:first-child,
.total-agree-wrap .agree-check-list li:first-child {margin-top:0}
/*
.total-agree-wrap .agree-check-list:first-child li .check .check-wrap .check-box label::after {top:8px}*/
.total-agree-wrap .agree-check-list li .check .check-wrap .check-box label {flex-wrap:wrap}
.total-agree-wrap .agree-check-list li .check .check-wrap .check-box label .label-desc {color:#8d8e90; font-weight:400}
.total-agree-wrap .agree-check-list li .check .check-wrap .agree-txt {white-space:nowrap}

.total-agree-wrap {
	border: 1px solid #eaebed;
    border-radius: 8px;
    padding: 25px 20px;
}
/*
.check-border {
	border: 1px solid #2C7FDF;
}*/

.total-agree-wrap .total-agree .check-wrap {padding:initial; border:none; height:initial}

.total-agree-wrap .total-agree .check-wrap .check-box {
	border-bottom: 1px solid #eaebed;
    padding-bottom: 25px;
}
/*
.total-agree-wrap .total-agree .check-wrap .check-box label {
    font-size: 14px;
    font-weight: 500;
}
*/
.total-agree-wrap .total-agree .check-wrap .check-box label:before {border-radius:4px;   
    /*border-width: 2px;*/
}
/*
.total-agree-wrap .total-agree .check-wrap .check-box label.agrColor{
	color: #1f78d0;
}

.total-agree-wrap .agree-check-list {
    margin-top: 25px;   
}

.total-agree-wrap .agree-check-list li {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-agree-wrap .agree-check-list li .btn {
    margin-left: 5px;
    margin-top: -3px;
}

.total-agree-wrap .agree-check-list li .btn button {
    border: none;
    color: transparent;
    font-size: xx-small;
    width: 6px;
    height: 10px;
    background: url(../images/arrow-right5.png) 0 0 no-repeat;
    background-size: 6px 10px;
}

.total-agree-wrap .agree-check-list li .check {
    width: 100%;
}

.total-agree-wrap .agree-check-list li .check .check-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
*/
.total-agree-wrap .agree-check-list li .check .check-wrap .agree-txt {
    font-size: 12px;
    color: #DDDDDD;
    display: none;
}
/*
.total-agree-wrap .agree-check-list li .check .check-wrap .check-box {}

.total-agree-wrap .agree-check-list li .check .check-wrap .check-box label {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;    
    color: #212121;
}
*/
/*
.total-agree-wrap .agree-check-list li .check .check-wrap .check-box label::before {display:inline-block; position:absolute; left:0; top:50%; margin-top:-10px;
	border-width:2px;
}
.total-agree-wrap .agree-check-list li .check .check-wrap .check-box label::after {
    content: "";
    display: block;
    width: 10px;
    height: 8px;    
    background-size: cover;
    position: absolute;
    left: 5px;
}
*/
.total-agree-wrap .agree-check-list li .check .check-wrap .check-box label::after {top:6px; transform:initial; background:url(../images/bg-check.png) 0 0 no-repeat; background-size:cover; width:10px; height:8px}
.total-agree-wrap .agree-check-list li .check .check-wrap .check-box label:before {
    content: "";
    position:absolute;
    left:0;
    top:0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #B8B9BB;
    border-radius: 4px;
    background: none;
    margin-right: 10px;
}

.total-agree-wrap .agree-check-list li .check .check-wrap .check-box .inp-check:checked+label::after {background:url(../images/bg-check_on.png) 0 0 no-repeat; background-size:cover}
.total-agree-wrap .agree-check-list li .check .check-wrap .check-box .inp-check:checked+label::before {
	background: #2C7FDF;
    border-color: #2C7FDF;
}

.footer-btn .style02 {color:#fff; text-align:center; background:#737476}
 
.progress-tip {
	display: inline-block;
	height: auto;
    background: #fff;
	color: #445475;
    border: 1px solid #cfe3f7;
    border-radius: 5px;
    padding: 5px 10px;
    position: relative;
    -webkit-box-shadow: 0px 5px 8px 0px rgb(40 40 40 / 10%);
    box-shadow: 0px 5px 8px 0px rgb(40 40 40 / 10%);
    font-size: 12px;
	line-height: 16px;
}
.progress-tip li:before {content:''; display:inline-block; margin-right:5px; background:#2c7fdf; width:6px; height:6px; border-radius:50%; vertical-align:middle}
.progress-tip li + li:before {background:#ff7702}
.progress-tip span + span {margin-left:5px}
/*
.progress-tip:before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 8px;
    background: url(/app/service/common/v1/images/ico-triangle.png) 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    top: -8px;
    left: 30px;		
}*/