@charset "utf-8";

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-size: calc((1 / 360) * 100vw );
}
body {
  font-family: 'Noto Sans KR', sans-serif;
  background: #fff;
  touch-action: pan-x pan-y;
}
body.test .c-header {
  background: #000;
}
.bg-beige {
  background: #fefbef;
}

.container {
  position: relative;
  /* min-height: 100vh; */
  padding-top: 48rem;
  padding-bottom: 40rem;
}

/* [S] 공통 Layout Style */
.l-contents {
  padding: 0 24rem;
}
.l-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(100% - 48rem);
  margin-left: auto;
  margin-right: auto;
}
.l-button-margin {
  margin-top: clamp(1rem, var(--margin) - 96rem, 258rem);
  background: #fff;
}
.l-fixed {
  position: fixed;
  bottom: 0;
  left: 50%;
  padding-bottom: 20rem;
  transform: translateX(-50%);
  background: #fff;
  z-index: 100;
}

/* [S] 공통 RixSinHead_Pro Fonts */
.t-rsHead {
  font-family: 'RixSinHead_Pro', sans-serif;
}

/* [S] 공통 Dim bg */
.c-dim {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4);
  z-index: 1100;
}
.c-dim--purple {
  background: rgba(116,69,187,0.95);
}
.c-dim.s-active {
  display: block;
}

/* [S] 공통 hide 처리 */
.s-hide{
  overflow: hidden;
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 1rem;
  height: 1rem;
  text-indent: 0;
  line-height: 0.1;
  clip: rect(1rem, 1rem, -1rem, -1rem);
}

/* [S] 공통 btn */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
}
.c-btn.c-btn-full {
  width: 100%;
  margin-top: 8rem;
}
.c-btn.c-btn-full:first-of-type {
  margin-top: 0;
}
.c-btn.c-btn-half {
  width: calc(50% - 4rem);
}
.c-btn.c-btn-lg {
  height: 56rem;
  font-size: 16rem;
  font-weight: 500;
  line-height: 24rem;
  border-radius: 8rem;
}
.c-btn.c-btn-sm {
  margin: 2rem;
  height: 28rem;
  padding: 0 10rem;
  font-size: 12rem;
  font-weight: 500;
  line-height: 18rem;
  border-radius: 14rem;
}
.c-btn.c-btn-xsm {
  display: inline-block;
  margin-left: 4rem;
  height: 22rem;
  padding: 2rem 7rem;
  font-size: 12rem;
  line-height: 18rem;
  border-radius: 12rem;
  color: #333;
  background-color: #f5f5f5;
}
.c-btn.c-btn__border-green {
  color: #5dce18;
  border: 1rem solid #5dce18;
}
.c-btn.c-btn__border-gray {
  color: #666;
  border: 1px solid #dededd;
}
.c-btn.c-btn__border-red {
  color: #ef3636;
  border: 1px solid #ef3636;
}
.c-btn.c-btn__bg-green {
  color: #fff;
  background: #5dce18;
}
.c-btn.c-btn__bg-white {
  color: #666;
  background: #fff;
}
.c-btn:disabled {
  color: #fff;
  background: #ccc;
  border: none;
}

/* [S] 공통 Popup */
.c-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: calc(100% - 48rem);
  border-radius: 8rem;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 1200;
}
.c-popup.c-popup--show {
  display: block;
}
.c-popup--lg{
  width: 100%;
  top: 50rem;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  transform: none;
  justify-content: center;
  align-items: stretch;
  z-index: 10000;
}
.c-popup--lg.c-popup--show{
  display: flex;
}
.c-popup--md{
  width: 100%;
  top: 50rem;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  transform: none;
  justify-content: center;
  align-items: stretch;
  z-index: 10000;
}
.c-popup--md.c-popup--show{
  display: flex;
}
.c-popup--sm{
  width: 100%;
  top: 195rem;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  transform: none;
  justify-content: center;
  align-items: stretch;
  z-index: 10000;
}
.c-popup--sm.c-popup--show{
  display: flex;
}
.c-popup__wrap{
  width: 100%;
  position: relative;
  background-color: #fff;
  border-radius: 20rem 20rem 0 0;
}
.c-popup--md .c-popup__wrap{
  padding-bottom: 40rem;
}
.c-popup__container{
  height: 100%;
  padding: 32rem 24rem 40rem 24rem;
}
.c-popup__tit{
  display: flex;
  align-items: center;
  padding-bottom: 14rem;
  font-size: 22rem;
  line-height: 30rem;
  font-weight: 600;
  color: #333;
}
.c-popup--md .c-popup__tit{
  padding-bottom: 0;
  margin-bottom: 32rem
}
.exbody__tab .c-popup__tit{
  display: block;
}
.c-popup__tit em{
  display: inline-block;
  width: 4rem;
  height: 4rem;
  margin: 0 3.5rem;
  border-radius: 100%;
  background-color: #333;
}
.c-popup .c-popup__content {
  padding: 32rem 30rem;
  font-size: 18rem;
  font-weight: 500;
  font-family: 'RixSinHead_Pro', sans-serif;
  line-height: 24rem;
  color: #333;
  background: #fff;
  text-align: center;
}
.c-popup .c-popup__content span {
  color: #5ece17;
}
.c-popup__inr{
  height: 100%;
  padding: 19rem 0 0 0;
  overflow-y: scroll;
  text-align: left;
}
.c-popup--lg .c-popup__inr{
  padding-right: 24rem;
  margin-right: -24rem;
}
.c-popup__inr.c-popup__inr--tab{
  padding: 0 24rem 0 0;
  margin-right: -24rem;
}
.c-popup .c-popup__btns {
  display: flex;
  border-top: 1rem solid #eceae2;
}
.c-popup .c-popup__btns .c-btn {
  width: 50%;
  border-radius: 0;
}
.c-popup__close-btn{
  width: 22rem;
  height: 22rem; 
  position: absolute;
  top: 23rem;
  right: 19rem;
}
.c-popup__close-btn.c-popup__close-btn--noIcon{
  width: 50%;
  height: 56rem;
  position: static;
}
.c-popup__close-btn img{
  width: 100%;
  height: 100%;
}
/* [S] 공통 case */
.c-case {
  display: inline-flex;
  padding: 3rem 8rem;
  font-size: 13rem;
  font-weight: 600;
  line-height: 19rem;
  border-radius: 5rem;
}
.c-case-good {
  /* background: rgba(93, 206, 24, 0.1); */
  color: #5dce18;
}
.c-case-bad {
  /* background: rgba(228, 40, 100, 0.1); */
  color: #e42864;
}
.c-case-normal {
  /* background: rgba(255, 136, 23, 0.1); */
  color: #ff8817;
}
.c-case-avarage {
  color: #666;
}
.c-case-right {
  color: #7445bb;
}
.c-case-yes {
  color: #f25c61;
}
.c-case-yes__bg {
  background: rgba(242, 92, 97, 0.1);
}
.c-case-no {
  color: #06a4dd;
}
.c-case-no__bg {
  background: rgba(6, 164, 221, 0.1);
}

/* [S] 공통 tooltip */
.c-tooltip {
  position: relative;
  display: flex;
  align-items: center;
}
.c-tooltip.c-tooltip--inline {
  position: static;
  display: inline-flex;
}
.c-simple-inbody .c-tooltip.c-tooltip--inline{
  position: relative;
}
.c-tooltip .c-tooltip__txt {
  font-size: 13rem;
  font-weight: 400;
  line-height: 19rem;
  color: #666;
}
.c-tooltip.c-tooltip--inline .c-tooltip__txt{
  font-size: 18rem;
  font-weight: 700;
  line-height: 26rem;
  color: #333;
}
.c-tooltip .c-tooltip__txt--bold{
  font-size: 15rem;
  line-height: 21rem;
  font-weight: 600;
  color: #333;
}
.c-tooltip .c-tooltip__btn {
  display: inline-flex;
}
.c-tooltip .c-tooltip__btn img {
  width: 19rem;
  height: 19rem;
}
.c-tooltip .c-tooltip__box {
  display: none;
  position: absolute;
  top: calc(100% + 8rem);
  left: -10rem;
  width: calc(100% + 20rem);
  background: #fff;
  border: 1rem solid #dededd;
  border-radius: 16rem;
  box-shadow: 0 2rem 6rem 0 rgba(192, 186, 149, 0.2);
  z-index: 100;
}
.c-tooltip .c-tooltip__box.s-show {
  display: block;
}
.c-tooltip .c-tooltip__box::after {
  content: '';
  position: absolute;
  top: -4rem;
  left: calc(var(--arrLeftPos) + 13rem);
  width: 8rem;
  height: 8rem;
  background: #fff;
  border: 1rem solid #dededd;
  border-radius: 2rem;
  box-shadow: 0 2rem 6rem 0 rgba(192, 186, 149, 0.4);
  transform: rotate(45deg) skew(15deg, 15deg);
  z-index: 110;
}
.c-tooltip .c-tooltip__box.c-tooltip__box--inline::after {
  left: calc(var(--arrLeftPos) - 7rem);
}
.c-tooltip .c-tooltip__box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  width: 90%;
  height: 12rem;
  background: #fff;
  z-index: 120;
}
.c-tooltip .c-tooltip__box .c-tooltip__close-btn {
  position: absolute;
  top: 15rem;
  right: 14rem;
  z-index: 200;
}
.c-tooltip .c-tooltip__box .c-tooltip__close-btn img {
  width: 16rem;
  height: 17rem;
}
.c-tooltip .c-tooltip__box .c-tooltip__inr {
  padding: 16rem 40rem 16rem 24rem;
}
.c-tooltip .c-tooltip__box .c-tooltip__list {
  position: relative;
  margin-bottom: 8rem;
  font-size: 12rem;
  font-weight: 400;
  line-height: 19rem;
  letter-spacing: -0.28rem;
  color: #666;
}
.c-tooltip .c-tooltip__box .c-tooltip__list:last-child {
  margin-bottom: 0;
}
.c-tooltip .c-tooltip__box .c-tooltip__list::before {
  content: '';
  position: absolute;
  top: 8.5rem;
  left: -9rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 100%;
  background: #666;
}
.c-tooltip .c-tooltip__box .c-tooltip__comment {
  margin-top: 10rem;
  font-size: 11rem;
  font-weight: 400;
  line-height: 16rem;
  letter-spacing: -0.25rem;
  color: #999;
}
.c-tooltip.c-tooltip-skew {
  padding-left: 7rem;
}
.c-tooltip.c-tooltip-skew .c-tooltip__txt--skew {
  margin-right: 6rem;
  font-size: 16rem;
  font-weight: 700;
  line-height: 21rem;
  color: #5dce18;
}
.c-tooltip.c-tooltip-skew .c-tooltip__box {
  left: 10rem;
  width: calc(100% - 20rem);
}
.c-tooltip.c-tooltip-skew .c-tooltip__box::after {
  left: calc(var(--arrLeftPos) + 6rem);
}
/* [S] 공통 chart 및 tolltip*/
.chart__box{
  position: relative;
  margin-top: 16rem;
  margin-left: -8rem;
}
.chart__box-inr{
  position: relative;
  padding-top: 107%;
}
.chart__box .nq-chart {
  position: absolute;
  top: 0;
  left: 0;
}
.chart__nav ul{
  width: 100%;
  height: 34rem;
  padding: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 17rem;
  background-color: #f3f3f3;
}
.chart__nav li{
  flex: 1;
  padding: 3rem 8.5rem 5rem 8.5rem;
}
.chart__nav li:last-child{
  margin-right: 0;
}
.chart__nav li button{
  width: 100%;
  font-size: 14rem;
  line-height: 20rem;
  color: #999
}
.chart__nav li.s-active{
  background-color: #fff;
  border-radius: 14rem;
}
.chart__nav li.s-active button{
  color: #5dce18;
  font-weight: 500;
}

.c-chart__tooltip{
  top: 24rem;
  left: 40rem;
  padding: 6px 10px 8px;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgba(192, 186, 149, 0.26);
  text-align: left;
}
.c-chart__tooltip span{
  font-size: 12rem;
  line-height: 17rem;
  color: #666;
}
.c-chart__tooltip strong{
  font-weight: 600;
  color: #333;
}
/* [S] 공통 label */
.c-score__label{
  margin-top: 5rem;
  text-align: center;
}
.c-score__label ul{
  display: inline-flex;
}
.c-score__label li{
  margin-right: 21rem;
  position: relative;
  font-size: 12rem;
}
.c-score__label li:last-child{
  margin-right: 0;
}
.c-score__label li:before{
  content: "";
  display: inline-block;
  width: 5rem;
  height: 5rem;
  position: absolute;
  left: -8rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 100%;
}
.c-score__label li.c-case-good:before{
  background-color: #5dce18;
}
.c-score__label li.c-case-normal:before{
  background-color: #ff8817;
}
.c-score__label li.c-case-bad:before{
  background-color: #e42864;
}
.c-score__label li.c-case-avarage:before{
  background-color: #b4b4b4;
}
.c-score__label li.c-case-right:before{
  background-color: #7445bb;
}
/* [S] 공통 description */
.c-description {
  position: relative;
  margin-top: 10rem;
  padding: 0 4rem 0 17rem;
  font-size: 12rem;
  font-weight: 400;
  line-height: 20rem;
  letter-spacing: -0.28rem;
  color: #666;
}
.c-description::before {
  content: '';
  position: absolute;
  top: 9rem;
  left: 9rem;
  width: 3rem;
  height: 3rem;
  background: #666;
  border-radius: 50%;
}

.c-box {
  padding: 24rem 20rem;
  background: #fff;
  border-radius: 16rem;
  box-shadow: 2px 8px 8px 0 rgba(192, 186, 149, 0.2);
}

/* [S] 페이지별 공통 간략 정보 */
.c-simple {
  margin-top: 36rem;
}
.c-simple.c-simple__exbody{
  margin-top: 32rem;
}
.c-simple .c-simple__info {
  font-size: 18rem;
  font-weight: 700;
  line-height: 26rem;
  color: #333;
}
.c-simple .c-simple__info strong {
  color: #5dce18;
}
.c-simple .c-simple__info .c-simple__info--point {
  position: relative;
}
.c-simple .c-simple__info .c-simple__info--point::after {
  content: '';
  position: absolute;
  top: -7rem;
  right: -22rem;
  width: 22rem;
  height: 23rem;
  background: url('../img/icon/icon_point.svg') no-repeat;
  background-size: cover;
}
.c-simple .c-simple__date {
  display: inline-flex;
  margin-top: 6rem;
  font-size: 12rem;
  font-weight: 500;
  line-height: 18rem;
  color: #999;
}
.c-simple .c-simple__device {
  display: flex;
  font-size: 12rem;
  font-weight: 500;
  line-height: 18rem;
  color: #999;
}
.c-simple__tooltip-wrap{
  position: relative;
}
/* [S] 타이틀 skew bg */
.c-skew {
  position: relative;
}
.c-skew::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(100% + 12rem);
  height: 8rem;
  background: #5dce18;
  border-radius: 2rem;
  opacity: 0.15;
  transform: translateX(-50%) skew(-35deg);
  z-index: -1;
}

/* [S] 공통 Header */
.c-header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48rem;  
  background: #fff;
  z-index: 1000;
}
.bg-beige .c-header {
  background: #fefbef;
}
.c-header__title {
  font-size: 16rem;
  font-weight: 700;
  line-height: 30rem;
  color: #333;
}
.c-header__title.c-header__title-nq{
  font-size: 22rem;
}
.c-header__title-mylab img{
  width: 81rem;
  height: 30rem;
}
.c-header__title-vuno img{
  width: 88rem;
  height: 19.1rem;
}
.c-header__title-inbody img{
  width: 88rem;
  height: 28rem;
}
.c-header__title-exbody img{
  width: 99rem;
  height: 40rem;
}
.c-header__btn-bak {
  position: absolute;
  top: 50%;
  left: 8rem;
  transform: translateY(-50%);
}
.c-header__btn-bak img {
  width: 40rem;
  height: 40rem;
}
.c-header__btn-close {
  position: absolute;
  top: 50%;
  right: 8rem;
  transform: translateY(-50%);
}
.c-header__btn-close img {
  width: 40rem;
  height: 40rem;
}
.c-header__btn-modify {
  position: absolute;
  top: 50%;
  right: 24rem;
  transform: translateY(-50%);
  padding: 3rem 8rem 4rem;
  font-size: 13rem;
  font-weight: 500;
  line-height: 19rem;
  color: #666;
  border: 1px solid #bfbfbf;
  border-radius: 6rem;
}

.c-list__wrap {
  padding-top: 12rem;
}
.c-list__wrap .c-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rem 24rem;
  border-bottom: 1rem solid #ececec;
  box-sizing: content-box;
}
.c-list__wrap .c-list__item.c-list__item--long {
  padding: 25rem 24rem;
}
.c-list__wrap .c-list__tab .c-list__item {
  padding: 25rem 24rem;
}
.c-list__wrap .c-list__info--date {
  font-size: 16rem;
  font-weight: 700;
  font-family: 'RixSinHead_Pro', sans-serif;
  line-height: 21rem;
  color: #333;
}
.c-list__wrap .c-list__info--desc {
  display: block;
  font-size: 12rem;
  font-weight: 400;
  line-height: 17rem;
  color: #999;
}
.c-list__wrap .c-list__btns {
  display: flex;
  margin: -2rem;
}

.c-list__wrap .c-list__btns .c-list__btns--normal,
.c-list__wrap .c-list__btns.s-modify .c-list__btns--modify {
  display: flex;
}
.c-list__wrap .c-list__btns .c-list__btns--modify,
.c-list__wrap .c-list__btns.s-modify .c-list__btns--normal {
  display: none;
}

.c-list__tab .c-tab__btn{
  width: 100%;
  height: 100%;
  padding: 27rem 0 16rem 0;
  border-bottom: 1rem solid #cccccc;
  border-radius: 0;
  align-items: center;
  background: none;
}
.c-list__tab .c-tab__btn li{
  padding: 0;
  height: 100%;
}
.c-list__tab .c-tab__btn li.s-active{
  background: none;
}
.c-list__tab .c-tab__btn li.s-active button::after{
  content: '';
  display: inline-block;
  position: absolute;
  top: -2rem;
  right: -9rem;
  width: 6rem;
  height: 6rem;
  border-radius: 100%;
  background: #5dce5d;
}
.c-list__tab .c-tab__btn button{
  position: relative;
  height: 100%;
  color: #999;
}
.c-list__tab .c-tab__btn li.s-active button{
  color: #000;
  font-weight: 600;
}
.c-list__tab .c-tab__contents{
  margin-top: 0;
}

/* [S] 스크롤 잠금 */
.s-scroll--lock{
  overflow: hidden;
}

/* [S] 공통 badge */
.c-badge{
  display: inline-block;
  width: 30rem;
  height: 30rem;
  margin-left: 2rem;
  background-size: contain;
  background-repeat: no-repeat;
}
.c-badge.c-badge--high{
  background-image: url(../../assets/img/icon/icon_badge-high.svg);
}
.c-badge.c-badge--mediumHigh{
  background-image: url(../../assets/img/icon/icon_badge-mediumHigh.svg);
}
.c-badge.c-badge--medium{
  background-image: url(../../assets/img/icon/icon_badge-medium.svg);
}
.c-badge.c-badge--mediumLow{
  background-image: url(../../assets/img/icon/icon_badge-mediumLow.svg);
}
.c-badge.c-badge--low{
  background-image: url(../../assets/img/icon/icon_badge-low.svg);
}
/* [S] 공통 tab */
.c-tab__btn{
  width: calc(100% - 72rem);
  height: 38rem;
  margin: 0 auto;
  padding: 4rem;
  text-align: center;
  border-radius: 19rem;
  box-sizing: border-box;
  display: flex;
  background: rgb(93, 206, 24, .16);
}
.c-tab__btn li{
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 4rem 8rem;
  border-radius: 15rem;
  box-sizing: border-box;
}
.c-tab__btn li.s-active {
  background: #5dce18;
}
.c-tab__btn button{
  font-size: 15rem;
  color: #5dce18;
}
.c-tab__btn li.s-active button{
  font-weight: 600;
  color: #fff;
}
.c-tab__contents{
  margin-top: 20rem;
}
.c-tab__content{
  display: none;
  position: relative;
}
.c-tab__content.s-active{
  display: block;
}
.c-tab__content img{
  width: 100%;
  height: 100%;
}
/* [S] 공통 slide */
.c-swiper{
  position: relative;
  overflow: hidden;
  margin-left: -24rem;
  margin-right: -24rem;
  padding-left: 24rem;
  padding-right: 24rem;
}
.c-slide-box{
  height: 440rem;
  padding: 24rem 20rem 25rem 20rem;
  box-sizing: border-box;
  backface-visibility: hidden;
}
.c-swiper__container{
  overflow: visible;
}
.c-slide__tit{
  margin-bottom: 16rem;
  font-size: 15rem;
  font-weight: 600;
  line-height: 20rem;
  letter-spacing: -0.19rem;
  color: #666;
}
.c-slide__tit span{
  font-weight: inherit;
}
.c-slide__content li{
  margin-bottom: 8rem;
}
.c-slide__content li:last-child{
  margin-bottom: 8rem;
}
.c-slide-content__top{
  display: flex;
  align-items: center;
  margin-bottom: 5rem;
  font-size: 13rem;
  font-weight: 500;
  line-height: 20rem;
  color: #666;
}
.c-slide-content__top::before{
  content: '';
  display: inline-block;
  width: 3.5rem;
  height: 3.5rem;
  margin-right: 4.5rem;
  background: #666;
  border-radius: 100%;
}
.c-slide-content__desc{
  font-size: 12rem;
  font-weight: 400;
  line-height: 18rem;
  word-break: keep-all;
  color: #666;
}
.c-swiper-pagination{
  position: static!important;
  margin-top: 14rem;
}
.c-swiper-pagination .swiper-pagination-bullet{
  width: 6rem;
  height: 6rem;
  background: #e5e1d6;
  opacity: 1;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
  width: 20rem;
  background: #e5e1d6;
  border-radius: 3.5rem;
}
/* [S] 공통 loading */
.c-loading{
  height: 100vh;
}
.c-loading__container{
  height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.c-loading__ani{
  width: 52rem;
  height: 52rem;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  background: #f3f3f3;
}
.c-loading__dot{
  width: 6rem;
  height: 6rem;
  top: 0;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 26rem 0 #5dce18;
  animation: loading 0.8s ease-in-out alternate infinite;
  animation-delay: 0.32s;
}
.c-loading__dot::before,
.c-loading__dot::after{
  content: '';
  position: absolute;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  box-shadow: 0 26rem 0 #5dce18;
  animation: loading 0.8s ease-in-out alternate infinite;
}
.c-loading__dot::before{
  left: -10rem;
  animation-delay: 0.48s;
 }
.c-loading__dot::after{
  right: -10rem;
  animation-delay: 0.16s;
}
@keyframes loading{
  0%{
    box-shadow: 0 26rem 0 #5dce18;
  }
  100%{
    box-shadow: 0 20rem 0 #5dce18;
  }
}
.c-loading__tit{
  margin-top: 20rem;
  font-size: 20rem;
  line-height: 28rem;
  text-align: center;
  color: #333;
}
/* [S] 공통 video */
.c-video{
  display: block;
}
.c-video__thumb img{
  width: 100%;
}
.c-video__btn{
  width: 38rem;
  height: 38rem;
  position: absolute;
  bottom: 14rem;
  right: 14rem;
  background-image: url(../img/icon/btn_play.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
/*
  ~ 768 뷰포트, 769 ~ 고정픽셀
*/
@media screen and (min-width: 768px) {
  html {
    font-size: 1px;
  }
  .container {
    padding-top: 72rem;
    padding-bottom: 60rem;
  }
  .l-contents {
    padding: 0 36rem;
  }
  .l-button {
    width: calc(100% - 72rem);
  }
  .l-button-margin {
    margin-top: clamp(1rem, var(--margin) - 144rem, 498rem);
  }
  .l-fixed {
    padding-bottom: 30rem;
  }
  .c-header__title-mylab img{
    width: 121.5rem;
    height: 45rem;
  }
  .c-header__title-vuno img{
    width: 132rem;
    height: 28.65rem;
  }
  .c-header__title-inbody img{
    width: 132rem;
    height: 42rem;
  }
  .c-header__title-exbody img{
    width: 148.5rem;
    height: 60rem;
  }
  .c-btn.c-btn__read-more::after {
    bottom: -3rem;
    font-size: 15rem;
    line-height: 23rem;
  }
  .c-btn.c-btn-full {
    margin-top: 12rem;
  }
  .c-btn.c-btn-half {
    width: calc(50% - 6rem);
  }
  .c-btn.c-btn-lg {
    height: 84rem;
    font-size: 24rem;
    line-height: 36rem;
    border-radius: 12rem;
  }
  .c-btn.c-btn-sm {
    margin: 3rem;
    height: 42rem;
    padding: 0 15rem;
    font-size: 18rem;
    line-height: 27rem;
    border-radius: 21rem;
  }
  .c-btn.c-btn-xsm {
    margin-left: 6rem;
    height: 33rem;
    padding: 3rem 10.5rem;
    font-size: 18rem;
    line-height: 17rem;
    border-radius: 18rem;
  }
  .c-popup {
    width: calc(100% - 72rem);
    border-radius: 12rem;
  }
  .c-popup--lg{
    width: 100%;
    top: 75rem;
  }
  .c-popup--md{
    width: 100%;
    top: 75rem;
  }
  .c-popup--sm{
    width: 100%;
    top: 328.5rem;
  }
  .c-popup .c-popup__content {
    padding: 48rem 45rem;
    font-size: 27rem;
    line-height: 36rem;
  }
  .c-popup--lg .c-popup__content{
    padding: 28.5rem 0 0 0;
  }
  .c-popup__wrap{
    border-radius: 30rem 30rem 0 0;
  }
  .c-popup__container{
    padding: 48rem 36rem 60rem 36rem;
  }
  .c-popup--lg .c-popup__container{
    padding: 48rem 0 60rem 36rem;
  }
  .c-popup__tit{
    margin-bottom: 49.5rem;
    font-size: 33rem;
    line-height: 45rem;
  }
  .c-popup__close-btn{
    width: 33rem;
    height: 33rem;
    top: 34.5rem;
    right: 28.5rem;
  }
  .c-popup__close-btn.c-popup__close-btn--noIcon{
    height: 84rem;
  }
  .c-popup--lg .c-popup__inr{
    padding-right: 36rem;
    margin-right: -36rem;
  }
  .c-case {
    padding: 5rem 12rem;
    font-size: 20rem;
    line-height: 29rem;
    border-radius: 8rem;
  }
  .c-tooltip .c-tooltip__txt {
    font-size: 20rem;
    line-height: 29rem;
  }
  .c-tooltip .c-tooltip__btn img {
    width: 29rem;
    height: 29rem;
  }
  .c-tooltip .c-tooltip__box {
    top: calc(100% + 12rem);
    left: -15px;
    width: calc(100% + 30rem);
    border-radius: 24rem;
    box-shadow: 0 3rem 9rem 0 rgba(192, 186, 149, 0.2);
  }
  .c-tooltip .c-tooltip__box::after {
    left: calc(var(--arrLeftPos) + 21rem);
    width: 12rem;
    height: 12rem;
    border-radius: 3rem;
    box-shadow: 0 3rem 9rem 0 rgba(192, 186, 149, 0.2);
  }
  .c-tooltip .c-tooltip__box::before {
    height: 18rem;
  }
  .c-tooltip .c-tooltip__box .c-tooltip__close-btn {
    top: 18rem;
    right: 18rem;
  }
  .c-tooltip .c-tooltip__box .c-tooltip__close-btn img {
    width: 24rem;
    height: 26rem;
  }
  .c-tooltip .c-tooltip__box .c-tooltip__inr {
    padding: 24rem 60rem 24rem 36rem;
  }
  .c-tooltip .c-tooltip__box .c-tooltip__list {
    margin-bottom: 12rem;
    font-size: 18rem;
    line-height: 29rem;
  }
  .c-tooltip .c-tooltip__box .c-tooltip__list::before {
    top: 12.75rem;
    left: -13.5rem;
    width: 3.6rem;
    height: 3.6rem;
  }
  .c-tooltip .c-tooltip__box .c-tooltip__comment {
    margin-top: 15rem;
    font-size: 17rem;
    line-height: 24rem;
  }

  .c-tooltip.c-tooltip-skew {
    padding-left: 11rem;
  }
  .c-tooltip.c-tooltip-skew .c-tooltip__txt--skew {
    margin-right: 9rem;
    font-size: 24rem;
    line-height: 32rem;
  }
  .c-tooltip.c-tooltip-skew .c-tooltip__box {
    left: 15rem;
    width: calc(100% - 30rem);
  }
  .c-tooltip.c-tooltip-skew .c-tooltip__box::after {
    left: calc(var(--arrLeftPos) + 9rem);
  }


  .c-description {
    margin-top: 15rem;
    padding: 0 6rem 0 26rem;
    font-size: 18rem;
    line-height: 30rem;
  }
  .c-description::before {
    top: 14rem;
    left: 14rem;
    width: 4.5rem;
    height: 4.5rem;
  }
  .c-box {
    padding: 36rem 30rem;
    background: #fff;
    border-radius: 24rem;
    box-shadow: 3px 12px 12px 0 rgba(192, 186, 149, 0.2);
  }
  .c-simple {
    margin-top: 54rem;
  }
  .c-simple.c-simple__exbody{
    margin-top: 48rem;
  }
  .c-simple .c-simple__info {
    font-size: 27rem;
    line-height: 39rem;
  }
  .c-simple .c-simple__info .c-simple__info--point::after {
    top: -11rem;
    right: -33rem;
    width: 33rem;
    height: 35rem;
  }
  .c-simple .c-simple__date {
    margin-top: 9rem;
    font-size: 18rem;
    line-height: 27rem;
  }
  .c-simple .c-simple__device{
    font-size: 18rem;
    line-height: 27rem;
  }
  .c-skew::before {
    width: calc(100% + 21rem);
    height: 12rem;
    border-radius: 3rem;
  }
  .c-header {
    height: 72rem;
  }
  .c-header__title {
    font-size: 24rem;
    line-height: 45rem;
  }
  .c-header__btn-bak {
    left: 12rem;
  }
  .c-header__btn-bak img {
    width: 60rem;
    height: 60rem;
  }
  .c-header__btn-close {
    right: 12rem;
  }
  .c-header__btn-close img {
    width: 60rem;
    height: 60rem;
  }
  .c-header__btn-modify {
    right: 36rem;
    padding: 5rem 12rem 6rem;
    font-size: 20rem;
    line-height: 29rem;
    border-radius: 9rem;
  }
  .c-list__wrap {
    padding-top: 18rem;
  }
  .c-list__wrap .c-list__item {
    padding: 30rem 36rem;
  }
  .c-list__wrap .c-list__item.c-list__item--long {
    padding: 37.5rem 24rem;
  }
  .c-list__wrap .c-list__tab .c-list__item {
    padding: 37.5rem 36rem;
  }
  .c-list__wrap .c-list__info--date {
    font-size: 24rem;
    line-height: 32rem;
  }
  .c-list__wrap .c-list__info--desc {
    font-size: 18rem;
    line-height: 26rem;
  }
  .c-list__wrap .c-list__btns {
    margin: -3rem;
  }
  .c-list__tab .c-tab__btn{
    padding: 40.5rem 0 24rem 0;
    border-bottom: 1.5rem solid #cccccc;
  }
  .c-list__tab .c-tab__btn li.s-active button::after{
    top: -3rem;
    right: -12rem;
    width: 9rem;
    height: 9rem;
  }
  .c-tab__contents{
    margin-top: 30rem;
  }
  .c-badge{
    width: 45rem;
    height: 45rem;
    margin-left: 3rem;
  }
  .chart__nav ul{
    height: 51rem;
    padding: 4.5rem;
    border-radius: 25.5rem;
  }
  .chart__nav li{
    padding: 4.5rem 12.75rem 7.5rem 12.75rem;
  }
  .chart__nav li.s-active{
    border-radius: 21rem;
  }
  .chart__nav li button{
    font-size: 21rem;
    line-height: 30rem;
  }
  .c-chart__tooltip{
    top: 36rem;
    left: 60rem;
    padding: 9rem 15rem 12rem;
    border-radius: 12rem;
  }
  .c-chart__tooltip span{
    font-size: 18rem;
    line-height: 25.5rem;
  }

  .chart__box{
    margin-top: 24rem;
  }
  .c-score__label li{
    margin-right: 31.5rem;
    font-size: 18rem;
  }
  .c-score__label li:before{
    width: 7.5rem;
    height: 7.5rem;
    left: -12rem;
  }

  .c-tab__btn{
    width: calc(100% - 108rem);
    height: 57rem;
    padding: 6rem;
    border-radius: 27rem;
  }
  .c-tab__btn li{
    padding: 6rem 12rem;
    border-radius: 22.5rem;
  }
  .c-tab__btn button{
    font-size: 22.5rem;
  }
  .c-swiper{
    margin-left: -36rem;
    margin-right: -36rem;
    padding-left: 36rem;
    padding-right: 36rem;
  }
  .c-slide-box{
    width: 100%;
    height: 660rem!important;
    padding: 36rem 30rem 37.5rem 30rem;
  }
  .c-slide__tit{
    margin-bottom: 24rem;
    font-size: 22.5rem;
    line-height: 30rem;
    letter-spacing: -0.285rem;
  }
  .c-slide__content li{
    margin-bottom: 30rem;
  }
  .c-slide__content li:last-child{
    margin-bottom: 30rem;
  }
  .c-slide-content__top{
    margin-bottom: 7.5rem;
    font-size: 19.5rem;
    line-height: 30rem;
  }
  .c-slide-content__top::before{
    width: 5.25rem;
    height: 5.25rem;
    margin-right: 6.75rem;
  }
  .c-slide-content__desc{
    font-size: 19.5rem;
    line-height: 30rem;
  }
  .c-swiper-pagination{
    margin-top: 21rem;
  }
  .c-swiper-pagination .swiper-pagination-bullet{
    width: 9rem;
    height: 9rem;
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active{
    width: 30rem;
    border-radius: 5.25rem;
  }

  .c-loading__ani{
    width: 78rem;
    height: 78rem;
  }
  .c-loading__dot{
    width: 9rem;
    height: 9rem;
    box-shadow: 0 39rem 0 #5dce18;
  }
  .c-loading__dot::before,
  .c-loading__dot::after{
    width: 9rem;
    height: 9rem;
    box-shadow: 0 39rem 0 #5dce18;
  }
  .c-loading__dot::before{
    left: -15rem;
   }
  .c-loading__dot::after{
    right: -15rem;
  }
  @keyframes loading{
    0%{
      box-shadow: 0 39rem 0 #5dce18;
    }
    100%{
      box-shadow: 0 30rem 0 #5dce18;
    }
  }
  .c-loading__tit{
    margin-top: 30rem;
    font-size: 30rem;
    line-height: 42rem;
  }
  .c-video__btn{
    width: 57rem;
    height: 57rem;
    bottom: 21rem;
    right: 21rem;
  }
}