@charset "utf-8";
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard Black'), url('../fonts/Pretendard-Black.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard ExtraBold'), url('../fonts/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard Bold'), url('../fonts/Pretendard-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard SemiBold'), url('../fonts/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard Medium'), url('../fonts/Pretendard-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard Regular'), url('../fonts/Pretendard-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard Light'), url('../fonts/Pretendard-Light.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: local('Pretendard ExtraLight'), url('../fonts/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: local('Pretendard Thin'), url('../fonts/Pretendard-Thin.woff') format('woff');
}


/* reset */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

body {
    color: #000;
    background: #fff;
    /* overflow-x: hidden */
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
button,
select,
nav,
menu {
    font-family: "Pretendard", "맑은 고딕", "돋움", AppleSDGothicNeo, Pretendard, Dotum, Droid Sans, arial, sans-serif;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    appearance:none;
    border: 0;
}

input[type="submit"], input[type="button"], button, input[type="checkbox"] {
    appearance:none;
    border: 0;
    margin: 0;
	box-sizing: border-box;
}

fieldset,
img {
    border: 0 none;
    vertical-align: middle;
}

dl,
ul,
ol,
menu,
li {
    list-style: none;
    list-style-type: none;
    list-style-image: url(data: 0);
}


/*
ul:after,
ol:a fter {
    display: block;
    height: 0;
    content: "";
    float: none;
    clear: both;
}
    */

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

address,
caption,
cite,
code,
dfn,
em,
var {
    font-style: normal;
    font-family: "Pretendard", "맑은 고딕", "돋움", AppleSDGothicNeo, Pretendard, Dotum, Droid Sans, arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
    background: transparent;
}

a:focus,
a:active,
a:hover {
    text-decoration: none
}

table {
    border-collapse:separate;
    border-spacing: 0;
    table-layout: fixed;
    min-width: 100%;
    max-width: none;
    width: auto;
}

th,
td {
    padding: 0;
    box-sizing: border-box;
}

img {
    border: 0 none;
    vertical-align: middle;
}

legend,
.blind {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height:100px;
    white-space: nowrap;
}

caption {
    overflow: hidden;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
}

.clear:after {
    content: '';
    display: block;
    clear: both
}

.hide {
    overflow: hidden;
    position: absolute;
    left: -9999px;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important
}


/* form */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input,
select {
    /* -webkit-appearance: none; */
}

input[type=text],
input[type=password],
input[type=tel],
input[type=number],
input[type=email],
input[type=url],
input[type=date],
input[type=search] {
    margin: 0;
    padding: 0;
    -webkit-appearance: none !important;
    background: #fff;
    color:#222;
    font-size: 1rem;
    font-weight:400;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=date]:focus,
input[type=search]:focus
 {
    border:1px solid #6d2ef1 !important;
    outline: none;
}

input[type=submit]:focus {
    background-color:#6d2ef1;
}

input[type=button],
input[type=submit] {
    appearance: none;
}

input[type=file] {
    line-height: 1;
    padding: 6px 10px 7px;
    border-radius: 0;
    border: 1px solid #a1a1a1;
    background: #fff;
    color: #4d4d4d;
    cursor: pointer;
    font-size: 12px
}

input[type=text]:read-only,
input[type=password]:read-only,
input[type=tel]:read-only,
input[type=number]:read-only,
input[type=email]:read-only,
input[type=url]:read-only,
input[type=file]:read-only {
    border: 1px solid #eee;
    border-radius: 0;
    background: #f7f7f7;
    color: #4d4d4d;
    text-indent: 10px !important
}

input[readonly],
input[disabled] {
    border: 1px solid #E2E2E2
    background: #E2E2E2;
    color: #fff;
}

input[type=checkbox] {
    vertical-align: middle
}

select {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 5%;
    height: 26px;
    background-color: #fff;
    border: 1px solid #666667;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #333;
    vertical-align: middle;
}

select[disabled] {
    border: 1px solid #a1a1a1;
    background: #f1f1f1;
    color: #4d4d4d
}

textarea {
    width: 100%;
    padding: 5px 7px;
    font-size: 100.0%;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: none;
    border: 1px solid #a1a1a1
}

button {
    cursor: pointer;
    border: 0;
    appearance: none;
    background-color: transparent;
    padding: 0;
}

strong,
ul li strong,
ol li strong {
    font-family: "Pretendard", "맑은 고딕", "돋움", AppleSDGothicNeo, Pretendard, Dotum, Droid Sans, arial, sans-serif;
}

.mt0 {
    margin-top: 0 !important
}

.mt05 {
    margin-top: 5px !important
}

.mt10 {
    margin-top: 10px !important
}

.mt15 {
    margin-top: 15px !important
}

.mt20 {
    margin-top: 20px !important
}

.mt25 {
    margin-top: 25px !important
}

.mt30 {
    margin-top: 30px !important
}

.mt35 {
    margin-top: 35px !important
}

.mt40 {
    margin-top: 40px !important
}

.mt45 {
    margin-top: 45px !important
}

.mt50 {
    margin-top: 50px !important
}

.mt55 {
    margin-top: 55px !important
}

.mt60 {
    margin-top: 60px !important
}

.mt65 {
    margin-top: 65px !important
}

.mt70 {
    margin-top: 70px !important
}

.mt75 {
    margin-top: 75px !important
}

.mt80 {
    margin-top: 80px !important
}

.mt85 {
    margin-top: 85px !important
}

.mt90 {
    margin-top: 90px !important
}

.mt95 {
    margin-top: 95px !important
}

.mt100 {
    margin-top: 100px !important
}

.mb0 {
    margin-bottom: 0 !important
}

.mb05 {
    margin-bottom: 5px !important
}

.mb10 {
    margin-bottom: 10px !important
}

.mb15 {
    margin-bottom: 15px !important
}

.mb20 {
    margin-bottom: 20px !important
}

.mb25 {
    margin-bottom: 25px !important
}

.mb30 {
    margin-bottom: 30px !important
}

.mb35 {
    margin-bottom: 35px !important
}

.mb40 {
    margin-bottom: 40px !important
}

.mb45 {
    margin-bottom: 45px !important
}

.mb50 {
    margin-bottom: 50px !important
}

.mb55 {
    margin-bottom: 55px !important
}

.mb60 {
    margin-bottom: 60px !important
}

.mb65 {
    margin-bottom: 65px !important
}

.mb70 {
    margin-bottom: 70px !important
}

.mb75 {
    margin-bottom: 75px !important
}

.mb80 {
    margin-bottom: 80px !important
}

.mb85 {
    margin-bottom: 85px !important
}

.mb90 {
    margin-bottom: 90px !important
}

.mb95 {
    margin-bottom: 95px !important
}

.mb100 {
    margin-bottom: 100px !important
}

.ml0 {
    margin-left: 0 !important
}

.ml05 {
    margin-left: 5px !important
}

.ml10 {
    margin-left: 10px !important
}

.ml15 {
    margin-left: 15px !important
}

.ml20 {
    margin-left: 20px !important
}

.ml25 {
    margin-left: 25px !important
}

.ml30 {
    margin-left: 30px !important
}

.ml35 {
    margin-left: 35px !important
}

.ml40 {
    margin-left: 40px !important
}

.ml45 {
    margin-left: 45px !important
}

.ml50 {
    margin-left: 50px !important
}

.ml55 {
    margin-left: 55px !important
}

.ml60 {
    margin-left: 60px !important
}

.ml65 {
    margin-left: 65px !important
}

.ml70 {
    margin-left: 70px !important
}

.ml75 {
    margin-left: 75px !important
}

.ml80 {
    margin-left: 80px !important
}

.ml85 {
    margin-left: 85px !important
}

.ml90 {
    margin-left: 90px !important
}

.ml95 {
    margin-left: 95px !important
}

.ml100 {
    margin-left: 100px !important
}

.mr0 {
    margin-right: 0 !important
}

.mr05 {
    margin-right: 5px !important
}

.mr10 {
    margin-right: 10px !important
}

.mr15 {
    margin-right: 15px !important
}

.mr20 {
    margin-right: 20px !important
}

.mr25 {
    margin-right: 25px !important
}

.mr30 {
    margin-right: 30px !important
}

.mr35 {
    margin-right: 35px !important
}

.mr40 {
    margin-right: 40px !important
}

.mr45 {
    margin-right: 45px !important
}

.mr50 {
    margin-right: 50px !important
}

.mr55 {
    margin-right: 55px !important
}

.mr60 {
    margin-right: 60px !important
}

.mr65 {
    margin-right: 65px !important
}

.mr70 {
    margin-right: 70px !important
}

.mr75 {
    margin-right: 75px !important
}

.mr80 {
    margin-right: 80px !important
}

.mr85 {
    margin-right: 85px !important
}

.mr90 {
    margin-right: 90px !important
}

.mr95 {
    margin-right: 95px !important
}

.mr100 {
    margin-right: 100px !important
}

.pt0 {
    padding-top: 0 !important
}

.pt05 {
    padding-top: 5px !important
}

.pt10 {
    padding-top: 10px !important
}

.pt15 {
    padding-top: 15px !important
}

.pt20 {
    padding-top: 20px !important
}

.pt25 {
    padding-top: 25px !important
}

.pt30 {
    padding-top: 30px !important
}

.pt35 {
    padding-top: 35px !important
}

.pt40 {
    padding-top: 40px !important
}

.pt45 {
    padding-top: 45px !important
}

.pt50 {
    padding-top: 50px !important
}

.pt55 {
    padding-top: 55px !important
}

.pt60 {
    padding-top: 60px !important
}

.pt65 {
    padding-top: 65px !important
}

.pt70 {
    padding-top: 70px !important
}

.pt75 {
    padding-top: 75px !important
}

.pt80 {
    padding-top: 80px !important
}

.pt85 {
    padding-top: 85px !important
}

.pt90 {
    padding-top: 90px !important
}

.pt95 {
    padding-top: 95px !important
}

.pt100 {
    padding-top: 100px !important
}

.pb0 {
    padding-bottom: 0 !important
}

.pb05 {
    padding-bottom: 5px !important
}

.pb10 {
    padding-bottom: 10px !important
}

.pb15 {
    padding-bottom: 15px !important
}

.pb20 {
    padding-bottom: 20px !important
}

.pb25 {
    padding-bottom: 25px !important
}

.pb30 {
    padding-bottom: 30px !important
}

.pb35 {
    padding-bottom: 35px !important
}

.pb40 {
    padding-bottom: 40px !important
}

.pb45 {
    padding-bottom: 45px !important
}

.pb50 {
    padding-bottom: 50px !important
}

.pb55 {
    padding-bottom: 55px !important
}

.pb60 {
    padding-bottom: 60px !important
}

.pb65 {
    padding-bottom: 65px !important
}

.pb70 {
    padding-bottom: 70px !important
}

.pb75 {
    padding-bottom: 75px !important
}

.pb80 {
    padding-bottom: 80px !important
}

.pb85 {
    padding-bottom: 85px !important
}

.pb90 {
    padding-bottom: 90px !important
}

.pb95 {
    padding-bottom: 95px !important
}

.pb100 {
    padding-bottom: 100px !important
}

.pl0 {
    padding-left: 0 !important
}

.pl05 {
    padding-left: 5px !important
}

.pl10 {
    padding-left: 10px !important
}

.pl15 {
    padding-left: 15px !important
}

.pl20 {
    padding-left: 20px !important
}

.pl25 {
    padding-left: 25px !important
}

.pl30 {
    padding-left: 30px !important
}

.pl35 {
    padding-left: 35px !important
}

.pl40 {
    padding-left: 40px !important
}

.pl45 {
    padding-left: 45px !important
}

.pl50 {
    padding-left: 50px !important
}

.pl55 {
    padding-left: 55px !important
}

.pl60 {
    padding-left: 60px !important
}

.pl65 {
    padding-left: 65px !important
}

.pl70 {
    padding-left: 70px !important
}

.pl75 {
    padding-left: 75px !important
}

.pl80 {
    padding-left: 80px !important
}

.pl85 {
    padding-left: 85px !important
}

.pl90 {
    padding-left: 90px !important
}

.pl95 {
    padding-left: 95px !important
}

.pl100 {
    padding-left: 100px !important
}

.pr0 {
    padding-right: 0 !important
}

.pr05 {
    padding-right: 5px !important
}

.pr10 {
    padding-right: 10px !important
}

.pr15 {
    padding-right: 15px !important
}

.pr20 {
    padding-right: 20px !important
}

.pr25 {
    padding-right: 25px !important
}

.pr30 {
    padding-right: 30px !important
}

.pr35 {
    padding-right: 35px !important
}

.pr40 {
    padding-right: 40px !important
}

.pr45 {
    padding-right: 45px !important
}

.pr50 {
    padding-right: 50px !important
}

.pr55 {
    padding-right: 55px !important
}

.pr60 {
    padding-right: 60px !important
}

.pr65 {
    padding-right: 65px !important
}

.pr70 {
    padding-right: 70px !important
}

.pr75 {
    padding-right: 75px !important
}

.pr80 {
    padding-right: 80px !important
}

.pr85 {
    padding-right: 85px !important
}

.pr90 {
    padding-right: 90px !important
}

.pr95 {
    padding-right: 95px !important
}

.pr100 {
    padding-right: 100px !important
}

html,
body {
    height: 100%;
    /*overflow:hidden;*/
}

html {
    font-size: 1rem;
    line-height: 1rem;
}

body {
    height: 100%;
    text-align: center;
    font-size: 81.3%;
    font-family: "Pretendard", "맑은 고딕", "돋움", AppleSDGothicNeo, Pretendard, Dotum, Droid Sans, arial, sans-serif;
    font-weight: 400;
    color: #000;
    list-style: none;
    line-height: 1.7rem;
    letter-spacing: -0.25px;
    outline: 0;
	/*
    background-color: #F9F9F9;
	*/
}

body.on {
    overflow: hidden;
}


/* 스킵네비게이션 */

.skip-navigation a {
    display: none;
    height: 1px;
    width: 1px;
    margin: 0 -1px -1px 0;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

.skip-navigation a:hover,
.skip-navigation a:active,
.skip-navigation a:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.25rem;
    line-height: 1.25rem;
    vertical-align: middle;
    font-size: 75%;
    font-weight: bold;
    text-align: center;
    background: #000;
    color: #fff;
    z-index: 10;
}

.blind,
caption {
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0
}

.point-color01 {
    color: #FFFDCB !important;
}

.point-color02 {
    color: #369CAC !important;
}

.point-color03 {
    color: #213F8A !important;
}

.point-color04 {
    color: #777777 !important
}

.point-color05 {
    color: #EB0000 !important
}

.point-color06 {
    color: #999 !important
}

.point-color07 {
    color: #308B99 !important
}

.point-color08 {
    color: #2C77E8 !important
}

.fl {
    float: left !important;
}

.fr {
    float: right !important;
}

.left {
    text-align: left !important;
}

.center {
    text-align: center !important;
}

.right {
    text-align: right !important;
}

.word-thin {
    font-weight: 100 !important
}

.word-extralight {
    font-weight: 200 !important
}

.word-light {
    font-weight: 300 !important
}

.word-regular {
    font-weight: 400 !important
}

.word-medium {
    font-weight: 500 !important
}

.word-semibold {
    font-weight: 600 !important
}

.word-bold {
    font-weight: 700 !important
}

.word-extrbold {
    font-weight: 800 !important
}

.word-black {
    font-weight: 900 !important
}

input[type=search] {
    padding-right: 1rem;
}

input[type="search"]::-webkit-search-cancel-button {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-appearance: none;
    width: 0.5625rem;
    height: 0.5625rem;
    margin-top: -0.28125rem;
    background: url(../img/common/btn_close01.svg) center center no-repeat;
    cursor: pointer;
}

/* form 공통 */
input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
    width:100%;
    height: 3.375rem;
    line-height: 3.375rem;
    border-radius: 1.875rem;
    padding-left: 1.5rem;
    border: 1px solid #E8E8E8;
    box-sizing: border-box;
}
input::placeholder {
    color: #B2B2B2;
}
input[type="submit"] {
    width:100%;
    height:3.75rem;
    line-height: 3.75rem;
    border-radius: 1.875rem;
    color:#fff;
    font-size: 1.125rem;
    font-weight: 700;
    box-sizing:border-box;
    background-color:#6d2ef1;
	cursor: pointer;
}

*:disabled {
    background-color:#E2E2E2 !important;
	pointer-events: none;
	cursor: default;
}

/* select */
.domain-select {
  appearance: none;          /* 기본 스타일 제거 (크롬, 사파리 등) */
  -webkit-appearance: none;  /* 크롬, 사파리 */
  -moz-appearance: none;     /* 파이어폭스 */

  background: #fff;
  border: 1px solid #E8E8E8;
  outline: none;             /* 포커스 아웃라인 제거 */

  width: 100%;
  color: #B2B2B2;
  border-radius: 1.875rem;
  cursor: pointer;
}

/* 필요 시 드롭다운 화살표는 background-image로 따로 지정 */
.domain-select::-ms-expand {
  display: none;  /* IE 화살표 제거 */
}
/* //select */
/* //form 공통 */

/* intro */
.intro-wrapper {
    position: relative;
    width:100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
	/*
    background:#6d2ef1 url(../img/intro_bg.svg) right bottom/calc(100% / 1.2) no-repeat fixed;
	*/
	background-color:#6d2ef1;
	background-image:url(../img/bg_intro01.svg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 69rem;
}

.intro-wrapper:before {
	position: absolute;
	bottom: 0;
	right: 0;
	content: "";
	display: block;
	width: 24.375rem;
	height: 31.1875rem;
	background-image: url(../img/bg_intro_mobile01.svg);
	background-repeat: no-repeat;
	background-size: 24.375rem 31.1875rem
}

.into-area {
    position: absolute;
    top:6rem;
    left: 2.688rem;
    text-align: left;
    color: #fff;
}
.into-area > dl {
    padding-left:0.438rem;
}
.into-area > dl > dt {
    font-size: 1rem;
    line-height:140%;
    font-weight:400;
    padding:3.188rem 0 0.5rem 0;
}
.into-area > dl > dd {
    font-size:2rem;
    line-height:140%;
    font-weight:600;
}
/* //intro */

/* login01 */
.login-wrapper {
    position:relative;
    width:100vw;
    height:100vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.25rem;
    box-sizing: border-box;
}
.login01-area > .title {
    font-size:1.125rem;
    line-height: 140%;
    font-weight: 600;
    margin: 4.063rem 0 2.125rem 0;
    color:#222;
}
.qr-box {
    position:relative;
    margin-bottom: 3.875rem;
}
.qr-box > p {
    position: absolute;
    left: 50%;
    transform:translateX(-50%);
    bottom:0;
    width:16rem;
    height:2.375rem;
    line-height:2.375rem;
    font-size:0.75rem;
    line-height:2.375rem;
    font-weight: 400;
    background-color:#f6f1ff ;
    border-radius: 0.75rem;
}
.qr-box > p > span {
    color:#6d2ef1;
}
.login-box {
     margin-bottom: 0.75rem;
}
.login-box > input {
    width:100%;
    height:3.75rem;
    border: 1px solid #E8E8E8;
    box-sizing: border-box;
    border-radius: 1.875rem;
    padding-left: 3.125rem;
}
.login-box .input-id {
    background: url(../img/icon_id.svg) no-repeat 1.563rem center;
    margin-bottom: 0.5rem;
}
.login-box .input-pw {
    background: url(../img/icon_password.svg) no-repeat 1.563rem center;
}
.login-check-box {
    margin-bottom: 3.75rem;
    display: flex;
}
.login-check-box > div {
    display: flex;
    align-items: center;
}
.login-check-box .id-save-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.login-check-box .auto-login-box {
    padding-left: 0.5rem;
}
.login-check-box > div > input[type="checkbox"] {
    padding-right: 0.25rem;
    width:1.25rem;
    height:1.25rem;
    background-image: url(../img/icon_check_off.svg);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 1.25rem 1.25rem
}

.login-check-box > div > input[type="checkbox"]:checked {
    background-image: url(../img/icon_check_on.svg);
}

.login-check-box div > label {
    font-size: 1rem;
    line-height: 1.25rem;
    color:#767676;
    padding-left: 0.25rem;
}

.btn-login {
    display: block;
    margin-bottom: 1.25rem;
}
.login-footer {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}
.login-footer > li::after {
    display:inline-block;
    content: "";
    clear: both;
    width:0.063rem; /*1*/
    height: 0.906rem; /*14.5*/
    background-color: #D4D4D4;
    vertical-align: middle;
    margin: 0 0.563rem; /*9*/
}
.login-footer > li:last-child::after {
    display: none;
}
.login-footer > li > a {
    color: #222;
    font-size: 1rem;
    line-height: 140%;
    font-weight: 400;
}
/* //login01 */

/* login02 */
.login-logo-box {
    margin-top: 3.875rem;
}
.login02-area > .title {
    font-size:1.5rem;
    line-height: 140%;
    font-weight: 600;
    margin: 0.75rem 0 2.625rem 0;
    color:#222;
}
.login-img-box {
	position: relative;
	left: -1.25rem;
	width: calc(100% + 2.5rem);
    margin-bottom: 2rem;
}

.login-img-box img {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}

/* //login02 */

/* member_registration */
.wrapper {
    position:relative;
    width:100vw;
    height:100vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3.75rem 1.25rem 0 1.25rem;
    box-sizing: border-box;
}
header {
    position: fixed;
    width:100%;
    height:3.75rem;
    top:0;
    left:0;
    background-color: #fff;
	z-index: 999;
}
header > h1 {
    font-size:1.375rem;
    line-height: 3.75rem;
    font-weight: 600;
    color:#222;
}
header .back-btn {
    position: absolute;
    top:50%;
    left:1.563rem;
    transform: translateY(-50%);

}

.membership-information-txt {
/*
    margin-top: 2.125rem;
*/
    margin-bottom: 2.625rem;
    text-align: left;
}
.membership-information-txt > h2 {
    font-size:1.5rem;
    line-height:130%;
    color: #111;
    padding-bottom: 0.5rem;
    font-weight: bold;
}
.membership-information-txt > p {
    font-size:1rem;
    line-height:130%;
    color: #767676;
}
.membership-information-box {
    padding-bottom: 1.25rem;
}
.membership-information-box:last-child {
     padding-bottom: 0;
}
.membership-information-box > p {
    font-size: 0.875rem;
    line-height:130%;
    font-weight: 500;
    color:#333;
    text-align: left;
    padding-bottom: 0.5rem;
}
.membership-information-search {
    position: relative;
}
.membership-information-search > button {
    position: absolute;
    right: 0.375rem;
    top:50%;
    transform: translateY(-50%);
    width:2.625rem;
    height:2.625rem;
    border-radius: 50%;
    background-color: #6d2ef1;
}
.membership-information-search > button > img {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.btns-area {
/*     position: fixed; */
    width:100%;
	/*
    bottom:3.75rem;
    left: 0;
    padding: 0 1.25rem;
	*/
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.membership-information-wrapper .btns-area {
	margin-top: 1.875rem;
	margin-bottom: 1.25rem;
}

/* 모달창 */
.modal {
    display: none;
    position: fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color: rgba(0,0,0,0.47);
    padding: 0 1.25rem;
    z-index: 1000;
}
.modal-wrapper {
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    max-width:21.875rem;
    width:calc(100% - 2.5rem);
    border-radius: 0 0 1rem 1rem;
    overflow:hidden;
    height:calc(100vh - 7.5rem);
}


.modal-title {
    position:relative;
}
.modal-title > h2 {
    height: 3.875rem;
    line-height:3.875rem;
    color:#fff;
    font-size:1.25rem;
    font-weight: bold;
    background-color: #6D2EF1;
    border-radius:1rem 1rem 0 0;
}
.modal-title > .close-btn {
    position: absolute;
    right:1.375rem;
    top:50%;
    transform:translateY(-50%);
}
.madal-body {
    /* max-height:536px; */
    max-height:33.5rem;
    height:100%;
    background-color: #fff;
    padding:2.25rem 1.5rem;
    border-radius: 0 0 1rem 1rem;
    overflow-y:auto;
    box-sizing: border-box;
}
.modal-search {
    position: relative;
    width:100%;
    height: 3rem;
    margin-bottom: 1.5rem;
}
.modal-search > input {
    width:100%;
    height:3rem;
    border-radius: 1.875rem;
    border:1px solid #E8E8E8;
    padding-left: 1.5rem;
    box-sizing: border-box;
}
.modal-search > button {
    position: absolute;
    right:1rem;
    top:50%;
    transform:translateY(-50%);
}
.modal-search-list > p {
    font-size: 0.875rem;
    font-weight:500;
    line-height: 130%;
    letter-spacing: -1px;
    text-align: right;
    margin-bottom: 0.625rem;
}
.modal-search-list > p > span {
    color:#6D2EF1;
}

.modal-table {
    width:100%;
    max-height:18.75rem;
    border: 1px solid #E8E8E8;
    border-radius: 0.625rem;
    margin-bottom: 1.5rem;
    overflow-Y: auto;
}
.modal-table  > table > thead {
    position: sticky;
    top:0;
}
.modal-table  > table > thead > tr > th {
    background-color: #F4F4F4;
    border-bottom: 1px solid #E8E8E8;
    line-height: 3rem;
    font-size: 0.875rem;
    font-weight: 500;
    color:#767676;
    box-sizing: border-box;
}

.modal-table  > table > tbody > tr > td {
    line-height: 140%;
    padding: 0.75rem 0;
    font-weight: 500;
}
.modal-table  > table > tbody > tr > td:first-child {
    font-size: 1rem;
    color:#222;
    text-align: left;
    padding-left: 0.875rem;
    box-sizing: border-box;
}
.modal-table  > table > tbody > tr > td > button {
    display: inline-block;
    width:3.625rem;
    height: 1.75rem;
    line-height: 1.75rem;
    background-color: #6D2EF1;
    border-radius: 1rem;
    color: #fff;
    font-size: 0.875rem;
}
.madal-page-btn {
    /*  max-width: 254px; 원래 가로 */
    max-width: 15.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.313rem;
    box-sizing: border-box;
    font-weight: 500;

    margin:0 auto;
}
.madal-page-btn > li > a,
.madal-page-btn > li > button {
    color: #B2B2B2;
    font-size:1rem;
    line-height: 140%;
    font-weight: 500;
}
.madal-page-btn > li > a.madal-page-btn-active,
.madal-page-btn > li > button.madal-page-btn-active {
    color:#222;
    font-weight: 700;
    position: relative;
}
.madal-page-btn > li > a.madal-page-btn-active:after,
.madal-page-btn > li > button.madal-page-btn-active:after {
    content: '';
    position: absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    width:1.25rem;
    height: 0.125rem;
    background-color:#222;
}
/* //모달창 */

/* alert창 */
.alert {
    display: none;
    position: fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background: rgba(0,0,0,0.47);
    padding: 0 1.25rem;
    z-index: 1000;
}
.alert-wrapper {
    position: fixed; /* absolute */
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    /* max-width: 282px; */
    max-width: 17.625rem;
    width:calc(100% - 2.5rem);
    background-color: #fff;
    /* max-height:228px; */
    max-height:14.25rem;
    border-radius: 0.875rem;
}
.alert-wrapper > img {
    padding: 2.125rem 0 0.875rem 0;
}
.alert-wrapper > p {
    font-size: 1.125rem;
    line-height: 140%;
    font-weight:500;
    color: #111;
    padding-bottom: 1.875rem;
}
.alert-wrapper > button {
    display: block;
    width:100%;
    height: 3.25rem;
    line-height: 3.25rem;
    font-size: 1.125rem;
    font-weight:700;
    color: #fff;
    background-color: #6d2ef1;
    border-radius: 0 0 0.875rem 0.875rem;
}
/* //alert창 */
/* //member_registration01 */

/* member_registration02 */
.agreement-form {
    margin-top:2.625rem;
}
.full-agreement {
    display: flex;
    align-items: center;
    padding-bottom: 1.375rem;
    border-bottom: 1px solid #eee;
}
.full-agreement > input[type="checkbox"] {
    width:1.5rem;
    height:1.5rem;
    background-image: url(../img/icon_check_off.svg);
	background-repeat: no-repeat;
	background-position: center center;
    background-size: 1.5rem 1.5rem;
}
.full-agreement > input[type="checkbox"]:checked {
    background-image: url(../img/icon_check_on.svg);
}
.full-agreement > label {
    font-size:1.25rem;
    line-height: 130%;
    font-weight: 600;
    color:#222;
    padding-left: 0.625rem;
}
.mandatory-consent-wrapper {
    margin-top: 1.563rem;
}
.mandatory-consent-area {
    padding-bottom: 1rem;
}
.mandatory-consent-area:last-child {
    padding-bottom: 0;
}
.mandatory-consent-box > input[type="checkbox"] {
    width:1.25rem;
    height:1.25rem;
    background: url(../img/icon_check_off.svg) no-repeat center;
}
.mandatory-consent-box > input[type="checkbox"]:checked {
    background: url(../img/icon_check_on.svg) no-repeat center;
}
.mandatory-consent-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mandatory-consent-area > button {
    font-size: 0.875rem;
    line-height: 0.875rem;
    text-decoration:#9D9D9D solid underline;
    color: #9D9D9D;
}

.mandatory-consent-box {
    display: flex;
    align-items: center;
}
.mandatory-consent-box > label {
    padding-left: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 130%;
    color:#222;
}
/* privacy policy창 */
.privacy-policy {
    display: none;
    position:fixed;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    background: rgba(0,0,0,0.47);
    padding: 0 1.25rem;
    z-index: 1000;
}
.privacy-policy-wrapper {
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    /* max-width: 320px; */
    max-width: 20rem;
    width:calc(100% - 2.5rem);
    /* max-height:455px; */
    max-height:28.438rem;
    height:calc(100vh - 7.5rem);
    overflow:hidden;
    background: #fff;
    padding: 1.75rem 1.5rem 0 1.5rem;
    box-sizing: border-box;
    border-radius: 1rem;
}
.privacy-policy-wrapper > button {
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height: 3.25rem;
    line-height: 3.25rem;
    background-color: #6d2ef1;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    border-radius: 0 0 1rem 1rem;
}
.privacy-policy-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.875rem;
}
.privacy-policy-title > h2 {
    font-size: 1.25rem;
    line-height: 140%;
    font-weight: 700;
    color:#222;
}
.privacy-policy-txt-box {
    width:100%;
     /*  max-height: 270px;어림잡아 */
    max-height: 16.875rem; /* 어림잡아 */
    overflow-y: auto;
    margin-bottom:5.938rem;
    border-radius:0.75rem; /* privacy-policy-txt 여기에 주면 하단 볼더레이우스가 짤림 */
}
.privacy-policy-txt {
    width:100%;
    background-color: #f4f4f4;
    padding: 1rem 1.563rem 0 1.125rem;
    box-sizing: border-box;
    font-size: 0.875rem;
    color:#888;
    line-height: 140%;
    text-align: left;
    /* max-height: 300px; */
    max-height: 18.75rem;
    overflow:hidden;
}
.privacy-policy-txt ul li {
    position: relative;
    padding-left: 0.938rem;
}
.privacy-policy-txt ul li::before {
    position: absolute;
    top:0.5rem;
    left:0.5rem;
    content: '';
    width:0.125rem;
    height: 0.125rem;
    background-color: #888 ;
    border-radius: 50%;
    margin-right: 0.375rem;
}

/* //privacy policy창 */
/* //member_registration02 */

/* member_registration03 */
.membership-information-check-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
}
.membership-information-check-box > p {
    font-size: 0.875rem;
    line-height:130%;
    font-weight: 500;
    color:#333;
    text-align: left;
}
.membership-information-check-box > button {
    font-size: 1rem;
    line-height: 140%;
    font-weight: 500;
    color: #9E9E9E;
}
.membership-information-check-box > button:focus {
    color: #6d2ef1;
}


/* 강조 클래스 추가 => 보라색 border 적용 */
.duplication-check {
    border: 1px solid #6d2ef1 !important;
  }
/* //강조 클래스 추가 => 보라색 border 적용 */

.membership-information-box > .duplication-txt {
    margin-top:0.5rem;
    font-size: 0.875rem;
    line-height: 130%;
    font-weight: 400;
    color:#F00000;
    display: none;
}
.duplication-check-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.duplication-check-box > span {
    padding: 0 0.5rem;
    font-size: 1.125rem;
    line-height: 140%;
    color: #333;
}
.email-domain-select {
    position: relative;
    margin-top: 0.5rem;
}
.domain-select {
    width:100%;
    height: 3.375rem;
    font-size: 1rem;
    padding-left: 1.5rem;
    box-sizing: border-box;
}
.arrow_drop_img {
    position:absolute;
    top:50%;
    right:1.25rem;
    transform: translateY(-50%);
}

/* //member_registration03 */


/* id_pw_find01, id_pw_find02 */
.membership-information-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
/*     padding-top: 2.625rem;  2025.07.11 수정 */
	min-height: calc(100vh - 3.75rem);
}

.membership-information-form {
	width: 100%;
	padding-top: 2.125rem;
}


/* id_pw_find01, id_pw_find02 */

/* attendance01 */
.wrapper-bg {
    padding: 7rem 1.25rem 0 1.25rem;
    background-color: #F9F9F9;
}
.gnb-right-btns {
    position: absolute;
    top:50%;
    right: 1.625rem;
    transform:translateY(-50%);
 }
.gnb-right-btns > button {
    padding-left: 1.438rem;
}
.tab-list {
    display: flex;
    justify-content: space-between;
}
.tab-list li {
    width:50%;
    height: 3.25rem;
    line-height:3.25rem;
    background: #fff;
    box-shadow: -2 0 8 0 rgba(0,0,0,0.02);
}
.tab-list li a {
    position: relative;
    display: block;
    font-size:1.125rem;
    color:#888;
    font-weight:600;
}
.tab-list li a.active {
    color:#222;
}
.tab-list li a::after {
    position: absolute;
    content: '';
    width:4.375rem;
    height: 0.125rem;
    background: #222;
    bottom: 0;
    left: 50%;
    transform:translateX(-50%);
    display: none;
}
.tab-list li a.active::after {
    display: block;
}
.tab-content-wrapper.active {
    display: block;
}
.tab-content-wrapper {
    margin-top: 1.688rem;
    display: none;
}
#tab1 .attendance-check-area, #tab2 .attendance-check-area {
    box-sizing: border-box;
    border-radius: 1.5rem;
    box-shadow: 0 -0.125rem 0.5rem 0 rgba(0,0,0,0.04), 0.125rem 0.125rem 0.5rem 0 rgba(0,0,0,0.04);
}
#tab1 .attendance-check-area {
    padding: 2.625rem 2.188rem;
    margin-bottom: 1.25rem;
    background: #fff;;
}
#tab1 .attendance-check-area .today {
    font-size:1.125rem;
    line-height: 130%;
    color:#222;
    font-weight: 400;
    padding-bottom: 0.375rem;
}
#tab1 .attendance-check-area .hour {
    font-size:1.5rem;
    line-height: 130%;
    color:#222;
    font-weight: 600;
    padding-bottom: 1.25rem;
}
#tab1 .attendance-check-area div button {
    height:4.5rem;
    line-height: 4.5rem;
    border-radius:2.25rem;
    font-size:1.5rem;
    font-weight: 700;
    color:#fff;
    width:100%;
}
/* 입실하기 버튼*/
#tab1 .attendance-check-area .btn01 button {
    background: #6d2ef1;
}
/* //입실하기 버튼 */
/* 조퇴, 외출 버튼 */
#tab1 .attendance-check-area .btn02 {
    display: flex;
    gap:0.75rem;
    justify-content: space-between;
}
#tab1 .attendance-check-area .btn02 button {
    background: #333;
}
#tab1 .attendance-check-area .btn02 button:last-child {
    background: #10c300;
}
/* //조퇴, 외출 버튼 */
/* 외출 종료 버튼 */
#tab1 .attendance-check-area .btn03 button {
    background: #10c300;
}
/* //외출 종료 버튼 */
/* 퇴실하기 버튼 */
#tab1 .attendance-check-area .btn04 button {
    background: #6d2ef1;
}
/* //퇴실하기 버튼 */
/* 오늘의 출결을 완료했습니다 */
.complete-txt {
    font-size: 1.125rem;
    font-weight: 600;
    color: #6d2ef1;
    width:100%;
    height: 3rem;
    line-height: 3rem;
    background: #f6f2ff;
    border-radius: 1.5rem;
}
.complete-txt img {
    display: inline-block;
    padding-right: 0.438rem;
	width: 1.5rem;
}
/* //오늘의 출결을 완료했습니다 */

#tab1 .attendance-check-area:last-child {
    padding: 1.875rem 1.25rem;
}
#tab1 .attendance-check-area > h2 {
    font-size: 1.125rem;
    line-height: 130%;
    padding-bottom: 0.5rem;
}
.course-duration {
    font-size: 0.875rem;
    font-weight: 400;
    color:#767676;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}
.course-duration p::after {
    display: inline-block;
    content: '';
    width:1px;
    height:0.875rem;
    background: #E6E6E6;
    margin-left:0.625rem;
    vertical-align: middle;
}
.course-duration p:last-child::after {
    display: none;
}
.course-duration p:last-child {
    margin-left: 0.625rem;
}
.attendance-check-boxs {
    display: flex;
    justify-content: center;
    gap:0.5rem;
    margin-bottom: 1.25rem;
}
.attendance-check-boxs > .attendance-check-box {
    width:3.5rem;
    height:4.313rem;
    padding: 0.75rem 0;
    box-sizing: border-box;
    border-radius: 0.875rem;
}
.attendance-check-boxs > .attendance-check-box p {
    font-size: 0.75rem;
    line-height: 130%;
    padding-bottom: 0.375rem;
    font-weight: 400;
}
.attendance-check-boxs > .attendance-check-box p:last-child {
    font-size: 1.125rem;
    font-weight: 700;
}
.attendance-check-boxs .box01 {
    background: #f6f2ff;
}
.attendance-check-boxs .box01 p {
    color:#6d2ef1;
}
.attendance-check-boxs .box02 {
    background:#fff3f2;
}
.attendance-check-boxs .box02 p {
    color:#ff5d47;
}
.attendance-check-boxs .box03 {
    background:#fff8e9;
}
.attendance-check-boxs .box03 p {
    color:#f79400;
}
.attendance-check-boxs .box04 {
    background:#f1fbf0;
}
.attendance-check-boxs .box04 p {
    color:#10c300;
}
.attendance-check-boxs .box05 {
    background:#f5f5f5;
}
.attendance-check-boxs .box05 p {
    color:#444444;
}
/* .completion-boxs {
    max-width:420px;
    width:calc(100% - 40px);
    margin: 0 auto;
} */
.completion-box {
    margin-bottom: 0.813rem;
}
.completion-box p {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.5rem;
}
.completion-box p span {
    font-size: 0.875rem;
    line-height: 130%;
    color:#B2B2B2;
}
.completion-box p span:last-child {
    font-weight: 700;
    color:#6d2ef1;
}
.completionRate-box {
    width:100%;
    height: 0.375rem;
    border-radius:3.75rem;
    background: #F6F6F6;
}
.completionRate {
    width:0;
    height: 100%;
    border-radius:3.75rem ;
    background: #6d2ef1;
    transition: width 1s ease-in-out;
}
/* //tab1 */

/* tab2 */
.period-setting {
    display: flex;
    justify-content: space-between;
    gap:0.5rem;
    padding-bottom: 0.875rem;
}
.period-setting li {
    width:100%
}
.period-setting li button {
    width:100%;
    height:2.125rem;
    line-height:2.125rem;
    font-size:1rem;
    font-weight: 500;
    border-radius:3.75rem;
    border: 1px solid #E8E8E8;
    color:#888;
    background: #fff;
}
.period-setting li button.active {
    color:#fff;
    background: #3F00C2;
	border-color: #3F00C2
}
.period {
	position: relative;
    margin-bottom:1.25rem;
}
.period .schedule_box{
	display: flex;
    justify-content: space-between;
    align-items: center;
    gap:0.5rem;
	padding-right: 3.313rem;
}
.period > button {
	width:3rem;
	height:3rem;
	border-radius: 50%;
    background: #6d2ef1;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right:0;
}
.period .schedule {
    position: relative;
    width:100%;
    height:3rem;
    line-height: 3rem;
    border-radius:1.875rem;
    border: 1px solid #E8E8E8;
    background: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.period .schedule input{
    width:100%;
    height:3rem;
}
.period .schedule input:focus {
    border: 0 !important;
    outline: none;
}

.period .schedule label{
    width:3rem;
    height: 3rem;
    position: absolute;
    top:0;
    right:0;
    background: #fff;
}
.period .schedule img {
    position: absolute;
    top:50%;
    right:1.125rem;
    transform:translateY(-50%);
	width: 1.1875rem
}
.period div {
    font-weight: 700;
}

#tab2 .attendance-check-area {
    padding: 1.5rem 1.375rem;
    margin-bottom:0.75rem;
    background: #fff;;
}
#tab2 .attendance-check-area > div {
    text-align: left;
}
#tab2 .attendance-check-area > div > p {
    font-size:1.125rem;
    font-weight: 600;
    color:#222;
}

#tab2 .attendance-check-area > ul {
    padding-top: 1rem;
    border-top:0.125rem solid #EAEAEA;
    margin-top: 1rem;
}
#tab2 .attendance-check-area > ul > li {
    display: flex;
    justify-content: space-between;
	margin-bottom: 0.75rem;
}

#tab2 .attendance-check-area > ul > li:last-child {
	margin-bottom: 0;
}

#tab2 .attendance-check-area > ul > li > p {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size:0.75rem;
	height: 1.5rem;
    padding: 0 0.75rem;
    border-radius: 1.5rem;
}
#tab2 .attendance-check-area > ul > li > p:last-child {
    margin-bottom: 0;
}
#tab2 .attendance-check-area > ul > li > .status01 {
    background: #eef6ff;
    color:#0082FD;
}
#tab2 .attendance-check-area > ul > li > .status02 {
    background: #f1fbf0;
    color:#10C300;
}
#tab2 .attendance-check-area > ul > li > .status03 {
    background: #f6f2ff;
    color:#6d2ef1;
}
#tab2 .attendance-check-area > ul > li > p > span {
    font-size: 1rem;
    color:#333;

}
#tab2 .attendance-check-area > ul > li > p > span:first-child {
    font-weight: 600;
}





/* //tab2 */


/* //attendance01 */

/* qr_code_scan */
.qr {
    position: fixed;
    top:3.75rem;
    left:0;
    width:100vw;
    height:calc(100vh - 3.75rem);
    background: rgba(0,0,0,0.37);
    display: flex;
    align-items: center;
}
.qr_wrapper {
    /* max-width: 252px; */
    max-width: 15.75rem;
    width:calc(100vw - 2.5rem);
    margin: 0 auto;
}

.qr_wrapper .qr_img_box img {
    width:100%;
}
.qr_wrapper p {
    margin-top: 2rem;
    font-size: 1rem;
    line-height: 130%;
    color:#fff;
}
/* //qr_code_scan */

/* attendance02 */
.header2 {
    background: #6d2ef1;
}
.header2 > h1 {
    color:#fff;
}
.wrapper-bg {
    background-color: #F9F9F9;
}
.tab-list-box2 {
    display: flex;
    justify-content: center;
}
.tab-list2 {
    width:15rem;
    height: 3rem;
    line-height: 3rem;
    box-shadow: 0 -0.125rem 0.5rem 0 rgba(0,0,0,0.04), 0.125rem 0.125rem 0.5rem 0 rgba(0,0,0,0.04);
    border-radius: 1.5rem;
    margin:1.5rem 0 1.25rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.25rem;
    box-sizing: border-box;
    background: #fff;
}
.tab-list2 > li > a {
    display: inline-block;
    width:7.25rem;
    height: 2.5rem;
    line-height:2.5rem;
    border-radius: 1.25rem;
    font-size:1rem;
    font-weight: 400;
    color:#767676;
}
.tab-list2 > li > a.active {
    background: #6d2ef1;
    color: #fff;
    font-weight: 600;
}
.tab-content-wrapper2 {
    display: none;
}
.tab-content-wrapper2.active {
    display: block;
}
#tab1 .attendance-check-area2, #tab2 .attendance-check-area2 {
    box-sizing: border-box;
    border-radius: 1.5rem;
    box-shadow: 0 -0.125rem 0.5rem 0 rgba(0,0,0,0.04), 0.125rem 0.125rem 0.5rem 0 rgba(0,0,0,0.04);
}
#tab1 .attendance-check-area2 {
    padding: 2.25rem;
    margin-bottom: 0.75rem;
}
#tab1 .attendance-check-area2 .today {
    font-size:1.125rem;
    line-height: 130%;
    color:#222;
    font-weight: 400;
    padding-bottom: 0.375rem;
}
#tab1 .attendance-check-area2 .hour {
    font-size:1.5rem;
    line-height: 130%;
    color:#222;
    font-weight: 600;
    padding-bottom: 1.5rem;
}
#tab1 .attendance-check-area2 div button {
    width:100%;
    height:4rem;
    line-height:4rem;
    border-radius:1.125rem;
    font-size:1.5rem;
    font-weight: 700;
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #6d2ef1;
}
#tab1 .attendance-check-area2 div button img {
    padding-right: 0.5rem;
}
#tab1 .attendance-check-area2:last-child {
    padding: 1.875rem 1.563rem;
    margin-bottom: 0;
}
.attendance-title-box {
    padding: 1.5rem 1.25rem;
    box-sizing: border-box;
    background: #f6f6f6;
    border-radius: 0.875rem;
    margin-bottom: 1.5rem;
}
.attendance-title-box h2 {
    text-align: left;
    font-size:1.125rem;
    line-height: 130%;
    font-weight: 700;
    padding-bottom: 0.875rem;
    color:#222;
}
.course-duration2 li {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 130%;
    font-weight: 400;
}
.course-duration2 li:last-child {
    padding-bottom: 0;
}
.course-duration2 li p {
    color:#A8A8A8;
}
.course-duration2 li span {
    color:#444;
}

/* 반원그래프 */
.completion-boxs2 {
    display: flex;
    justify-content: space-between;
    padding: 0 1.25rem;
    box-sizing: border-box;
    max-width: 16.25rem;
    margin: 0 auto;
}
.completionRate-box2 {
    position: relative;
    height: 4.375rem;
}
.completionRate-box2 > .completionRate_txt, .completionRate-box2 > .completionRate_txt {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.completionRate_txt {
    width:100%;
    display: flex;
    flex-direction: column;
}
.completionRate_txt > p {
    font-size: 1.125rem;
    line-height: 130%;
    font-weight: 700;
    color:#333;
}
.completionRate_txt > p > span {
    font-size: 0.75rem;
    font-weight: 400;
}
.completionRate_txt > span {
    font-size:0.875rem;
    color:#B2B2B2;
    line-height: 130%;
}
/* //반원그래프 */
.attendance-check-boxs2 {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}
.attendance-check-boxs2 .attendance-check-box2 p {
    font-size:0.875rem;
    line-height: 130%;
    font-weight: 500;
    color:#444;
    padding-bottom: 0.5rem;
}
.attendance-check-boxs2 .attendance-check-box2 span {
    width:3rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 50%;
    font-size: 1.125rem;
    font-weight: 700;
    display: inline-block;
}
.attendance-check-boxs2 .attendance-check-box2 .box01 {
    background:#f6f1ff;
    color:#6d2ef1;
}
.attendance-check-boxs2 .attendance-check-box2 .box02 {
    background:#fff3f2;
    color:#ff5d47;
}
.attendance-check-boxs2 .attendance-check-box2 .box03 {
    background:#fff8e9;
    color:#fdad00;
}
.attendance-check-boxs2 .attendance-check-box2 .box04 {
    background:#f1fbf0;
    color:#10c300;
}
.attendance-check-boxs2 .attendance-check-box2 .box05 {
    background:#f5f5f5;
    color:#444;
}

/* 2025.07.18 */
.result-wrappper {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background-color: #f4f4f4;
	border-radius: 0.625rem;
	font-size: 1.125rem;
	line-height: 1.3;
	color: #767676;
	font-weight: 500;
}
.result-wrappper > strong {
	margin-left: 0.3125rem;
	color: #6D2EF1;
	font-weight: 700;
}

.btn-b01 {
    width:100%;
    height:3.75rem;
    line-height: 3.75rem;
    border-radius: 1.875rem;
    color:#fff;
    font-size: 1.125rem;
    font-weight: 700;
    box-sizing:border-box;
	cursor: pointer;
}

.btn-color01 {
    background-color:#6d2ef1;
}

.btn-color02 {
    background-color:#373737
}

/* //attendance02 */




/* @media (max-width: 500px) {
    .intro-wrapper {
        background:#6d2ef1 url(../img/intro_bg.svg) right bottom/contain no-repeat fixed;
    }
} */




@media only all and (max-width: 359px) {
    html {
        font-size: 0.75rem;
    }
}

@media only all and (max-height: 640px) {
	.intro-wrapper:before {
		width: calc(24.375rem / 1.25);
		height: calc(31.1875rem  /1.25);
		background-size: calc(24.375rem / 1.25) calc(31.1875rem  /1.25)
	}
}