@charset "utf-8";

/* common */
html, body{background:#fff;}
*:not(html):not(body){-ms-overflow-style:none; scrollbar-width:none;}
*:not(html):not(body)::-webkit-scrollbar{display:none;}
body{overflow-x:hidden; overflow-y:auto;}
body.hidden{overflow:hidden;}
img{max-width:100%;}

/* container */
.container {padding:0 16px; margin:0 auto;}

/* font */
.h1{font-size:20px !important; font-weight:700 !important; line-height:32px !important;}
.h2{font-size:18px !important; font-weight:700 !important; line-height:28px !important;}
.h3{font-size:16px !important; font-weight:700 !important; line-height:24px !important;}
.b0{font-size:18px !important; font-weight:50 !important; font-family:"SF Pro Display", sans-serif !important; line-height:120% !important;}
.b1{font-size:14px !important; font-weight:400 !important; line-height:20px !important;}
.b2{font-size:12px !important; font-weight:400 !important; line-height:18px !important;}
.bs{font-style:normal !important; font-size:12px !important; font-weight:400 !important; font-family:"SF Pro Display", sans-serif !important; line-height:normal !important; letter-spacing:0.2px !important;}
.c{font-size:10px !important; font-weight:400 !important; line-height:14px !important;}

/* color */
.c-pb{color:var(--Primary-Base) !important;}
.c-p400{color:var(--Primary-400) !important;}

/* icon */
.icon-bg{position:relative; width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;}
.icon-bg:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%;border-radius: 50%;opacity: 0.08;background-color: var(--Secondary-Violet);}
.icon{display:inline-block;width:24px;height:24px;font-size:0;position: relative;z-index: 2;}
.icon-m{width:20px; height:20px;}
.icon-s{width:18px; height:18px;}
.icon-xs{width:16px; height:14px;}
.icon-xxs{width:14px; height:14px;}
.icon:before{content:''; display:block; width:100%; height:100%; background-repeat: no-repeat; background-position: center; background-size:cover;}
.icon-prev:before{background-image: url(../images/icon/icon-prev.svg);}
.icon-calendar-next{width:16px; height:16px;}
.icon-calendar-next:before{background-image: url(../images/icon/icon-calendar-next.svg);}
.icon-calendar-prev{width:16px; height:16px;}
.icon-calendar-prev:before{background-image: url(../images/icon/icon-calendar-prev.svg);}
.icon-check{width:20px; height:20px;}
.icon-check:before{background-image: url(../images/icon/icon-check.svg);}
.icon-clipboard-text{width:14px; height:14px;}
.icon-clipboard-text:before{background-image: url(../images/icon/icon-clipboard-text.svg);}
.icon-clipboard-typography:before{background-image: url(../images/icon/icon-clipboard-typography.svg);}
.icon-clipboard-typography-purple:before{background-image: url(../images/icon/icon-clipboard-typography-purple.svg);}
.icon-discount-shape{width:20px; height:20px;}
.icon-discount-shape:before{background-image: url(../images/icon/icon-discount-shape.svg);}
.icon-down{width:12px; height:12px;}
.icon-down:before{background-image: url(../images/icon/icon-down.svg);}
.icon-info{width:19px; height:19px;}
.icon-info:before{background-image:url(../images/icon/icon-info.svg);}
.icon-tip{width:19px; height:19px;}
.icon-tip:before{background-image:url(../images/icon/icon-tip.svg);}
.icon-qna-right{width:12px; height:12px;}
.icon-qna-right:before{background-image: url(../images/icon/icon-qna-right.svg);}
.icon-radio{width:20px; height:20px;}
.icon-radio:before{background-image:url(../images/icon/icon-radio.svg);}
.icon-radio-on{width:20px; height:20px;}
.icon-radio-on:before{background-image:url(../images/icon/icon-radio-on.svg);}
.icon-right{width:20px; height:20px;}
.icon-right:before{background-image: url(../images/icon/icon-right.svg);}
.icon-right-gray{width:20px; height:20px;}
.icon-right-gray:before{background-image: url(../images/icon/icon-right-gray.svg);}
.icon-right-blue{width:20px; height:20px;}
.icon-right-blue:before{background-image: url(../images/icon/icon-right-blue.svg);}
.icon-search{width:20px; height:20px;}
.icon-search:before{background-image: url(../images/icon/icon-search.svg);}
.icon-set{width:24px; height:24px;}
.icon-set:before{background-image: url(../images/icon/icon-set.svg);}
.icon-set-white{width:24px; height:24px;}
.icon-set-white:before{background-image: url(../images/icon/icon-set-white.svg);}
.icon-alarm{width:24px; height:24px;}
.icon-alarm:before{background-image: url(../images/icon/icon-alarm.svg);}
.icon-edit{width:12px; height:12px;}
.icon-edit:before{background-image: url(../images/icon/icon-edit.svg);}
.icon-plus{width:24px; height:24px;}
.icon-plus:before{background-image: url(../images/icon/icon-plus.svg);}
.icon-speaker{width: 20px;height: 20px;}
.icon-speaker:before{background-image: url(../images/icon/icon-speaker.svg);}
.icon-my01{width:20px; height:20px;}
.icon-my01:before{background-image: url(../images/icon/icon-my01.svg);}
.icon-my02{width:20px; height:20px;}
.icon-my02:before{background-image: url(../images/icon/icon-my02.svg);}
.icon-my03{width:20px; height:20px;}
.icon-my03:before{background-image: url(../images/icon/icon-my03.svg);}
.icon-my04{width:20px; height:20px;}
.icon-my04:before{background-image: url(../images/icon/icon-my04.svg);}
.icon-my05{width:20px; height:20px;}
.icon-my05:before{background-image: url(../images/icon/icon-my05.svg);}
.icon-my06{width:20px; height:20px;}
.icon-my06:before{background-image: url(../images/icon/icon-my06.svg);}
.icon-my07{width:20px; height:20px;}
.icon-my07:before{background-image: url(../images/icon/icon-my07.svg);}
.icon-my08{width:20px; height:20px;}
.icon-my08:before{background-image: url(../images/icon/icon-my08.svg);}
.icon-my09{width:20px; height:20px;}
.icon-my09:before{background-image: url(../images/icon/icon-my09.svg);}
.icon-my10{width:20px; height:20px;}
.icon-my10:before{background-image: url(../images/icon/icon-my10.svg);}
.icon-my11{width:20px; height:20px;}
.icon-my11:before{background-image: url(../images/icon/icon-my11.svg);}
.icon-menu{display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:16px;}
.icon-menu:before{width:24px; height:24px;}
.icon-menu.menu01{background-color:#D3D5FE;}
.icon-menu.menu01:before{background-image: url(../images/icon/icon-menu01.svg);}
.icon-menu.menu02{background-color:#FFEFDA;}
.icon-menu.menu02:before{background-image: url(../images/icon/icon-menu02.svg);}
.icon-menu.menu03{background-color:#FFE4F1;}
.icon-menu.menu03:before{background-image: url(../images/icon/icon-menu03.svg);}
.icon-menu.menu04{background-color:#CFE5FC;}
.icon-menu.menu04:before{background-image: url(../images/icon/icon-menu04.svg);}
.icon-menu.menu05{background-color:#EFDFD3;}
.icon-menu.menu05:before{background-image: url(../images/icon/icon-menu05.svg);}
.icon-menu.menu06{background-color:#D3EEEF;}
.icon-menu.menu06:before{background-image: url(../images/icon/icon-menu06.svg);}
.icon-menu.menu07{background-color:#EAEAEA;}
.icon-menu.menu07:before{background-image: url(../images/icon/icon-menu07.svg);}
.icon-menu.menu08{background-color:#F6E6FF;}
.icon-menu.menu08:before{background-image: url(../images/icon/icon-menu08.svg);}
.icon-quiz-mic{width:20px; height:20px;}
.icon-quiz-mic:before{background-image: url(../images/icon/icon-quiz-mic.svg);}
.icon-quiz-play{width:20px; height:20px;}
.icon-quiz-play:before{background-image: url(../images/icon/icon-quiz-play.svg);}
.icon-quiz-cloud{width:20px; height:20px;}
.icon-quiz-cloud:before{background-image: url(../images/icon/icon-quiz-cloud.svg);}
.icon-quiz-set{width:20px; height:20px;}
.icon-quiz-set:before{background-image: url(../images/icon/icon-quiz-set.svg);}

/* bootstrap custom */
.button-fixed-wrap{height:98px;}
.button-box.fixed{position:fixed;left:0;right:0;bottom:0;margin:0 auto;padding:10px 20px 40px;background-color:#FFF; max-width: 500px;}
#wrapper.bg .button-box.fixed{background-color:transparent;}
.button-box{display:flex; position:relative; align-items:center;justify-content:space-between;gap:6px;}
.btn{display:flex; width:100%; height:32px; padding:0 10px; border:1px solid transparent; border-radius:16px; font-size:12px; line-height:18px; font-weight:500;; flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;}
.btn-lg{height:48px; padding:0 10px; border-radius:10px; font-size:14px; line-height:20px; font-weight:500;;}
.btn-s{height:28px; padding:0 10px; border-radius:14px; font-size:12px; line-height:18px; font-weight:500;;}
.btn-primary{background-color:var(--Primary-Base); color:#FFF;}
.btn-primary.bulk{background-color:var(--Secondary-50); color:var(--Primary-Base);}
.btn-secondary{padding:0 12px 0 18px; background-color:var(--Primary-Base); color:#FFF;}
.btn-secondary:after{width:10px; height:10px; background:url(../images/icon/icon-right.svg) no-repeat center / cover; content:'';}
.btn-secondary.btn-lg{padding:0 14px 0 18px;}
.btn-secondary.btn-s{padding:0 10px 0 14px;}
.btn-secondary.bulk{background-color:var(--Secondary-50); color:var(--Primary-Base);}
.btn-secondary.bulk:after{background-image:url(../images/icon/icon-right-blue.svg);}
.btn-secondary2{background-color:var(--Secondary-50); color:var(--Grayscale-400);}
.btn-secondary2.bulk{border-color:var(--Line-Base); background-color:#FFF;}
.button-box .col-4{width:calc(33.33% - 4px) !important;}
.button-box .col-6{width:calc(50% - 3px) !important;}
.btn:hover, .btn:focus, .btn:active, .btn:focus-visible{opacity:1 !important; border-color:inherit !important; background-color:inherit !important; box-shadow:none !important; color:inherit !important;}
.btn.bulk:hover, .btn.bulk:focus, .btn.bulk:active{border-color:transparent !important;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{border-color:var(--Primary-Base) !important; background-color:var(--Primary-Base) !important; color:#fff !important;}
.btn-primary.bulk:hover, .btn-primary.bulk:focus, .btn-primary.bulk:active{background-color:var(--Secondary-50) !important; color:var(--Primary-Base) !important;}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active{border-color:var(--Primary-Base) !important; background-color:var(--Primary-Base) !important; color:#fff !important;}
.btn-secondary.bulk:hover, .btn-secondary.bulk:focus, .btn-secondary.bulk:active{background-color:var(--Secondary-50) !important; color:var(--Primary-Base) !important;}
.btn-secondary2:hover, .btn-secondary2:focus, .btn-secondary2:active{border-color:var(--Line-Base) !important; background-color:var(--Secondary-50) !important; color:var(--Grayscale-400) !important;}
.btn-secondary2.bulk:hover, .btn-secondary2.bulk:focus, .btn-secondary2.bulk:active{border-color:var(--Line-Base) !important; background-color:transparent !important;}
.btn:active{transform:none !important;}

.form-control{z-index:1; height:48px; padding:0 16px; border-color:var(--Line-Base); border-radius:10px; color:var(--Text-Black); font-size:14px; line-height:20px; font-weight:500;;}
.form-control::placeholder{color:var(--Grayscale-400);}
textarea.form-control{height:268px; padding:16px; border-color:var(--Line-Base); border-radius:10px; color:var(--Text-Black);}

.form-select{height:48px; padding:0 16px; border-color:var(--Line-Base); border-radius:10px; background-image:url(../images/icon/icon-select.svg); background-repeat:no-repeat; background-position:right 16px center; background-size:20px; background-color:#fff; font-size:14px; line-height:20px; font-weight:500;;}
.form-select::placeholder{color:var(--Grayscale-400);}

.form-switch .form-check-input{position:relative; width:44px; height:24px; border:none; border-radius:12px; background-image:none; background-color:#ECECEC; cursor:pointer; transition:background-color 0.25s ease; appearance:none;-webkit-appearance:none;}
.form-switch .form-check-input::after{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background-color:#fff; box-shadow:0 1px 2px rgba(16, 24, 40, 0.16); content:''; transition:left 0.25s ease, background-color 0.25s ease;}
.form-switch .form-check-input:checked{background-color:var(--Primary-Base);}
.form-switch .form-check-input:checked::after{left:calc(100% - 22px);}

.card{display:flex; width:100%; padding:12px; border-width:0; border-radius:16px; background-color:#fff; color:inherit; text-decoration:none; transition:box-shadow 0.2s ease, transform 0.15s ease; align-items:flex-start; flex-direction:row; gap:0;}
.card.shadow-sm, .card.shadow{box-shadow:0 4px 30px 0 rgba(12, 18, 33, 0.12) !important;}

/* dot */
.dot{width:6px; height:6px; border-radius:50%; background-color:var(--Label-Colors-Tertiary);}

/* custom-select */
.custom-select{position:relative;}
.custom-select .select-btn{padding:0 30px 0 16px; border-radius:15px; background:var(--Primary-400) url(../images/icon/icon-down.svg) no-repeat right 12px center; color:#FFF; font-size:14px; line-height:30px;}
.custom-select .select-list{display:flex;opacity:0;visibility:hidden;position:absolute;top:calc(100% - 2px);left:0;right:0;padding:6px 15px;border:1px solid var(--Line-Base);border-radius:10px;background-color:#FFF;transition:0.15s ease-in-out;gap:8px;flex-direction:column;z-index: 3;}
.custom-select.active .select-list{opacity:1; visibility:inherit; top:calc(100% + 3px);}
.custom-select .select-list li div{color:var(--Grayscale-400); font-size:14px; line-height:24px;}
.custom-select .select-list li.active div{color:var(--Primary-400);}

/* drop-select */
.drop-select{position:relative;}
.drop-select .form-select{cursor:pointer;}
.drop-select .drop-box{opacity:0;visibility:hidden;position:absolute;top:calc(100% - 2px);left:0;right:0;max-height:200px;border:1px solid var(--Line-Base);border-radius:10px;background-color:#FFF;box-shadow:0 4px 30px 0 rgba(12, 18, 33, 0.12);transition:0.15s ease-in-out;overflow-x:hidden;overflow-y:auto;z-index: 3;}
.drop-select.active .drop-box{opacity:1; visibility:inherit; top:calc(100% + 3px);}
.drop-select.active .form-select{background-image:url(../images/icon/icon-select-on.svg);}
.drop-select .drop-box ul li + li{border-top:1px solid var(--Line-Base);}
.drop-select .drop-box ul li button{width:100%; min-height:48px; padding:13px 16px; color:var(--Grayscale-600); font-size:14px; line-height:20px; font-weight:700;; text-align:left;}
.drop-select .drop-box ul li button span{display:flex; font:inherit; font-weight:500;}
.drop-select.required:before{position:absolute; top:0; left:16px; bottom:0; height:20px; margin:auto 0; content:'*'; color:var(--Alerts-Error-Dark);}
.drop-select.required .form-select{padding-left:23px;}

/* custom-radio */
.custom-radio-list{display:flex; flex-direction:column; gap:16px;}
.custom-radio-list.flex-row{gap:30px;}
.custom-radio-item{display:flex; position:relative; gap:9px;}
.custom-radio-item input{position:absolute; top:0; left:0;}
.custom-radio-item label{position:relative; padding-left:29px; color:var(--Grayscale-900); font-size:14px; line-height:20px; font-weight:500;;}
.custom-radio-item label:before{position:absolute; top:0; left:0; width:20px; height:20px; background:url(../images/icon/icon-radio.svg) no-repeat center / cover; content:'';}
.custom-radio-item input:checked + label:before{background-image:url(../images/icon/icon-radio-on.svg);}

.gap-10px{gap:10px;}
.gap-12px{gap:12px;}
.d-flex.gap-2 .col-6{width:calc(50% - 4px);}