@charset "utf-8";

#content {padding: 20rem 1.8rem 0; max-width: calc(1144px + 3.6rem); width: 100%; margin: 0 auto;}
#content .sub_tit {font-size: 5.8rem; font-weight: 700; color: #383B44; text-align: center; margin-bottom: 8rem;}

/* ============================== [ Tab ] ========================================================================================== */
.cs_tab {display: flex; gap:2rem}
.cs_tab li {flex:1;}
.cs_tab li a {font-size: 3.2rem; font-weight: 700; width: 100%; height: 8rem; display: flex; align-items: center; justify-content: center; border-radius: 1.5rem; box-shadow: 0px 0px 6px 0px #66697433; background-color: #fff;}
.cs_tab li a.active {color: #fff; background-color: #12287C;}

/* ============================== [ 목록 ] ========================================================================================== */

.noti {margin-top: 2rem; margin-bottom: 4.8rem;}
.noti_list li ~ li {margin-top: 2rem;}
.noti_list li {background-color: #F4F7F8; border-radius: 15px;}
.noti_list li .ctrl {display: flex; align-items: center; justify-content: space-between; padding: 3.2rem 11rem 3.2rem 4rem; position: relative;}
.noti_list li .ctrl strong {line-height: 5.6rem; font-size: 3.2rem; font-weight: 700; color: #383B44; flex:1;}
.noti_list li .ctrl span {width: 15.3rem; text-align: right; font-size: 2.4rem;}
.noti_list li .ctrl:after{display: block;content: '';position: absolute;top: 5rem;right: 4rem;width: 3rem;height: 2rem;background: url(../images/main/icon_dropdown.png) no-repeat center / cover;transition: transform 0.3s;}
.noti_list li .ctrl.active:after{transform: rotate(180deg);}
.noti_list li .ans {display: none; font-size: 2.4rem; line-height: 3.6rem; padding: 0 4rem 3.2rem;}

.speeking_list > li{margin-top: 2rem;}
.speeking_list > li {background-color: #F4F7F8; border-radius: 15px;}
.speeking_list > li .ctrl {display: flex; align-items: center; justify-content: space-between; padding: 3.2rem 11rem 3.2rem 4rem; position: relative;}
.speeking_list > li .ctrl strong {line-height: 5.6rem; font-size: 3.2rem; font-weight: 700; color: #383B44; flex:1;}
.speeking_list > li .ctrl span {width: 15.3rem; text-align: right; font-size: 2.4rem;}
.speeking_list > li .ctrl:after{display: block;content: '';position: absolute;top: 5rem;right: 4rem;width: 3rem;height: 2rem;background: url(../images/main/icon_dropdown.png) no-repeat center / cover;transition: transform 0.3s;}
.speeking_list > li .ctrl.active:after{transform: rotate(180deg);}
.speeking_list > li .ans {display: none; font-size: 2.4rem; line-height: 3.6rem; padding: 0 4rem 3.2rem;}

.qna {margin-top: 2rem; margin-bottom: 4.8rem;}
.qna_list li ~ li {margin-top: 2rem;}
.qna_list li {background-color: #F4F7F8; border-radius: 15px;}
.qna_list a {line-height: 5.6rem; font-size: 3.2rem; font-weight: 700; color: #383B44; padding: 3.2rem 10rem 3.2rem 8.4rem; position: relative;}
.qna_list a:after{display: block;content: '';position: absolute;top: 5rem;right: 4rem;width: 3rem;height: 2rem;background: url(../images/main/icon_dropdown.png) no-repeat center / cover;transition: transform 0.3s;}
.qna_list a.active:after{transform: rotate(180deg);}
.qna_list .ans {display: none; font-size: 2.4rem; line-height: 3.6rem; padding: 0 4rem 3.2rem 8rem; position: relative;}
.qna_list a:before{content: 'Q.';top: 3rem;}
.qna_list a:before,
.qna_list .ans:before{display: block;position: absolute;left: 4rem;font-size: 2.4rem;color: #383b44;}
.qna_list .ans:before{content: 'A.';top: 0;}
.qna_list .ans strong {font-weight: 700; display: block;}
.qna_list .ans .txt_gray {font-size: 2.4rem;line-height: 1.75em;font-weight: 400;color: gray;}
.tab_cont .btn_wrap .btn_more {display: none; margin-top: 3rem; font-size: 2rem; text-align: center;}

.paging {display: flex; margin-top: 4.8rem; gap:8px; align-items: center; justify-content: center;}
.paging > a {width: 6rem; height: 6rem; background-position: center; background-repeat: no-repeat; background-size: 100% auto; box-shadow: 0px 0px 6px 0px #66697433; border-radius: 5px;}
.paging .first {background-image: url(../images/sub/btn_previous_end.png);}
.paging .prev {background-image: url(../images/sub/btn_previous.png);}
.paging .next {background-image: url(../images/sub/btn_next.png);}
.paging .last {background-image: url(../images/sub/btn_next_end.png);}
.paging ol {display: flex;margin: 0 2.8rem; gap:1rem}
.paging ol a {width: 4.2rem; height: 4.2rem; line-height: 4rem; border-radius: 50%; font-size: 2.4rem; text-align: center; }
.paging ol a.active {background-color: #12287C; color: #fff;}
@media screen and (max-width: 1200px) {
	.paging ol {margin: 0 10px;}
	.paging ol a {width: 35px; height: 35px; font-size: 20px; line-height: 1.8em;}
}
@media screen and (max-width: 768px) {
	#content {padding-top: 100px;}
	#content .sub_tit {font-size: 30px; margin-bottom: 30px;}
	.cs_tab {gap:1rem}
	.cs_tab li a {height: 36px; font-size: 16px; border-radius: 8px;}
	.tab_cont .btn_wrap .btn_more {display: block;}

	.noti_list li .ctrl {padding: 18px 15px;padding-right: 45px; display: block;}
	.noti_list li .ctrl strong {line-height: 1.7em; font-size: 16px;}
	.noti_list li .ctrl span {width: 15.3rem; font-size: 14px; display: block;  text-align: left; margin-top: 6px;}
	.noti_list li .ctrl:after{top: 25px;right: 20px;width: 15px;height: 10px;}
	.noti_list li .ans {font-size: 16px; line-height: 3.6rem; padding: 0 15px 16px;}

  .speeking_list li .ctrl {padding: 18px 15px;padding-right: 45px; display: block;}
	.speeking_list li .ctrl strong {line-height: 1.7em; font-size: 16px;}
	.speeking_list li .ctrl span {width: 15.3rem; font-size: 14px; display: block;  text-align: left; margin-top: 6px;}
	.speeking_list li .ctrl:after{top: 25px;right: 20px;width: 15px;height: 10px;}
	.speeking_list li .ans {font-size: 16px; line-height: 3.6rem; padding: 0 15px 16px;}

	.qna_list li a {line-height: 1.7em; font-size: 18px; padding: 16px 50px;padding-right: 55px;}
	.qna_list a:before{top: 15px;}
	.qna_list a:before,
	.qna_list .ans:before{font-size: 18px;left: 20px;}
	.qna_list a:after{top: 25px;right: 20px;width: 15px;height: 10px;}
	.qna_list .ans{padding: 0 55px 16px 50px;font-size: 16px;text-align: justify;word-break: break-all;}
	.qna_list .ans .txt_gray {font-size: 16px; text-align: justify;word-break: break-all;}
	.paging {display: none;}
}

/* ============================== [ 문의 ] ========================================================================================== */
.cs_form {margin-top: 6rem; margin-bottom: 13rem;}
.cs_form h3 {font-size: 3.2rem; font-weight: 700; color: #383B44;}
.cs_form h3 ~ h3 {padding-top: 6rem; margin-top: 6rem; border-top:1px solid #B6C9CF}
.cs_form .item {display: flex; margin-top: 6rem;}
.cs_form .item .tit {width: 20rem; padding-top: 2.4rem; font-size: 2.4rem; font-weight: 600; color: #383B44;}
.cs_form .item .tit::after {content: '*'; color: #F05060;}
.cs_form .item .tit ~ div {flex:1;}
.cs_form .item .inpt_wrap {position: relative;}
.cs_form .item .inpt_wrap .inpt {position: relative;}
.cs_form .item .inpt_wrap .inpt input {font-size: 2.4rem; padding: 0 14rem 0 4rem; box-shadow: 0px 0px 6px 0px #66697433; border:1px solid #EBF1F3; border-radius: 10px; height: 7.2rem; width: 100%;}
.cs_form .item .inpt_wrap .inpt span.cnt {position: absolute; right: 1.2rem; bottom: 1.9rem; font-size: 2.4rem; line-height: 3.6rem; color: #C8CCD9;}
.cs_form .item .inpt_wrap .inpt textarea {font-size: 2.4rem; height: 40rem; resize: none; outline: none; padding: 2rem 4rem 6rem; width: 100%; border-radius: 10px; box-shadow: 0px 0px 6px 0px #66697433; border:1px solid #EBF1F3;}

.cs_form .item .files {display: flex; gap:2rem;}
.cs_form .item .files .file_name {display: flex; align-items: center; flex:1; background-color: #EBF1F3; border:1px solid #EBF1F3; border-radius: 10px; padding: 0 6rem 0 4rem; position: relative;}
.cs_form .item .files .file_name p {font-size: 2.4rem; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.cs_form .item .files .file_name button {position: absolute; right: 1.2rem; top: 1.2rem; width: 4.8rem; height: 4.8rem; background: url(../images/sub/btn_delete.png) no-repeat 0 0; background-size: 100% auto;}
.cs_form .item .files .file_wrap {position: relative;}
.cs_form .item .files .file_wrap input[type="file"] {overflow:hidden; font-size:0; line-height:0; position:absolute; left:-10%; top:-10%; height:0; width:0;}
.cs_form .item .files .file_wrap span {cursor: pointer; width: 17.3rem; height: 7.2rem; border-radius: 10px; background-color: #2F438C; color: #fff; font-size: 2.4rem; display: flex; align-items: center; justify-content: center;}

.cs_form .item .email {display: flex; align-items: center; gap:1.5rem}
.cs_form .item .inpt_wrap .email > input {width: calc(50% - 2.7rem); padding: 0 4rem;}
.cs_form .item .inpt_wrap .email .select_wrap {width: calc(50% - 2.7rem); position: relative;}
.cs_form .item .inpt_wrap .email .nice-select {width: 100%; font-weight: 500;}
.cs_form .item .inpt_wrap .email .select_wrap input {width: 100%; display: none;}
.cs_form .item .inpt_wrap .email > span {font-size: 2.4rem;}

.cs_form .err_txt {font-size: 2.4rem; line-height: 3.6rem; color: #F05060; position: absolute; left: 4rem; top: calc(100% + 10px); display: none;}
.btn_err_txt {font-size: 2.4rem; line-height: 3.6rem; color: #F05060; margin-top: 20px; text-align: center; line-height: 1;}
.cs_form .item.err .err_txt {display: block;}
.cs_form .item.err .nice-select,
.cs_form .item.err .inpt_wrap .inpt input ,
.cs_form .item.err .inpt_wrap .inpt textarea,
.cs_form .item.err .files .file_name  {border-color: #F05060;}

.chk_area {position: relative; padding-top: 6rem; margin-top: 6rem; border-top:1px solid #B6C9CF;}
.chk_area .cotn {display: flex; align-items: center;}
.chk_wrap {display: flex; align-items: center; cursor: pointer;}
.chk_wrap i {display: block; width: 4.4rem; margin-right: 2rem; height: 4.4rem; background: url(../images/sub/btn_checkbox_normal.png) no-repeat 0 0; background-size: 100% auto;}
.chk_wrap input:checked ~ i {background-image: url(../images/sub/btn_checkbox_selected.png);}
.chk_wrap span {font-size: 2.4rem; font-weight: 600; color: #383B44;}
.chk_area a {font-size: 2.4rem; text-decoration: underline; margin-left: 3.2rem;}

.cs_btn{margin: 108px auto 0; display: flex; align-items: center; justify-content: center; width: 452px; height: 96px; position: relative; background: url(../images/btn_fix.png) no-repeat center; background-size: 100% auto; border-radius: 25px;}
.cs_btn span {margin-top: -5px; color: #223A97; font-size: 32px; font-weight: 700; text-align: center; display: flex;align-items: center;justify-content: center; }

@media screen and (max-width: 768px){
	.cs_btn{margin-top: 50px; background-image: none; background-color: #223A97;border:4px solid #fff; width: 100%; height: 54px; border-radius: 15px;}
	.cs_btn span {position: absolute; font-size: 20px; border-radius: 8px; width: calc(100% - 10px); height: calc(100% - 10px); left: 4px; top: 8px; background-color: #FFEF3A;}
}


@media screen and (max-width: 768px) {
	.cs_form h3 {font-size: 24px;}
	.cs_form h3 ~ h3 {padding-top: 48px; margin-top: 48px;}
	.cs_form .item {flex-direction: column; margin-top: 48px;}
	.cs_form .item .tit {padding-top: 0; margin-bottom: 10px; font-size: 18px;}
	.nice-select {height: 36px; line-height: 36px; font-size: 12px; border-radius: 5px; padding-left: 15px; padding-right: 40px;}
	.cs_form .nice-select {height: 50px; line-height: 50px; font-size: 18px;}
	.nice-select:after {top: calc(50% - 5px); right: 13px; width: 15px; height: 10px; background-size: 100% auto; margin-top: 0;}
	.nice-select .list {padding: 3px; margin-top: 6px;}
	.nice-select .option {font-size: 12px; line-height: 4rem; min-height: 4rem; padding-left: 12px; padding-right: 12px;}
	.cs_form .err_txt {left: 20px; top: calc(100% + 5px); font-size: 16px;}
	.btn_err_txt {font-size: 16px; margin-top: 5px;}
	.cs_form .item .inpt_wrap .inpt input {font-size: 18px; border-radius: 5px; height: 50px; padding-left: 20px; padding-right: 9rem;}
	.cs_form .item .inpt_wrap .inpt span.cnt {font-size: 18px; bottom: 8px;}
	.cs_form .item .inpt_wrap .inpt textarea {font-size: 18px; height: 350px; border-radius: 5px; padding: 2rem;}
	.cs_form .item .files {gap:10px;}
	.cs_form .item .files .file_name {border-radius: 5px; padding-left: 20px; width: calc(100% - 110px); flex:none;;}
	.cs_form .item .files .file_name p {font-size: 16px; width: 100%;}
	.cs_form .item .files .file_wrap span {width: 100px; height: 50px; border-radius: 5px; font-size: 18px;}
	.cs_form .item .files .file_name button {width: 40px; height: 40px; top: 5px;}
	.cs_form .item .inpt_wrap .email input {padding-right: 20px;}
	.cs_form .item .inpt_wrap .email .nice-select {padding-left: 1.5rem;}
	.chk_area {padding-top: 48px; margin-top: 48px;}
	.chk_wrap span {font-size: 16px;}
	.chk_wrap i {width: 22px; height: 22px; margin-right: 10px;}
	.chk_area a {font-size: 14px;}
}

.popup {display: none; padding: 20px; max-width: 756px; width: 100%; background-color: #fff; border-radius: 35px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999;}
.popup .tit {padding: 20px 0 70px; font-size: 3.2rem; line-height: 5.6rem; font-weight: 700; color: #383b44; text-align: center;}
.popup .desc {font-size: 2.4rem; line-height: 3.6rem; text-align: center; margin-top: 0;}
.popup .cs_btn {margin-top: 70px; width: 252px; background-image: url(../images/sub/btn_thumb_selected.png);}
@media screen and (max-width: 768px) {
	.popup {width: calc(100% - 36px); border-radius: 25px;}
	.popup .tit {font-size: 28px; padding-bottom: 30px; padding-top: 10px;}
	.popup .desc {font-size: 18px;}
	.popup .cs_btn {background-image: none; width: 100%; margin-top: 40px;}
}


/* ============================== [ 개인정보처리방침 ] ========================================================================================== */
.policy_item{padding: 6rem 0;border-top: 1px solid #B6C9CF;}
.policy_item *{line-height: 1.5em;font-weight: 400;color: #7b7f8f;word-break: break-all;}
.policy_item h3{font-size: 3.2rem;font-weight: 700; color: #383B44;}
.policy_item .txt{margin-top: 3rem;}
.policy_item p,
.decimal_list > li{font-size: 2.4rem;}

.decimal_list{counter-reset: type-decimal;margin-top: 3rem;}
.decimal_list > li{display: block;position: relative;padding-left: 3.6rem;}
.decimal_list > li + li{margin-top: 3rem;}
.decimal_list > li::before{margin-right: 4px;content: counter(type-decimal) ".";counter-increment: type-decimal;position: absolute;top: 0;left: 0;}

.circle_list{counter-reset: type-circle;margin-top: 3rem;}
.circle_list > li{display: block;position: relative;padding-left: 3.2rem;font-size: 2.2rem;}
.circle_list > li::before{display: inline-block;content: counter(type-circle) "";counter-increment: type-circle;position: absolute;top: 0;left: 0;padding: 0 8px;text-align: center;}
.circle_list > li::after{display: inline-block;content: '';position: absolute;top: 4px;left: 0;border: 2px solid #7b7f8f;border-radius: 50%;width: 1.1em;height: 1.1em;}
.circle_list > li + li{margin-top: 2rem;}

.half_list{counter-reset: type-half;margin-top: 1rem;}
.half_list > li{display: block;position: relative;padding-left: 3.2rem;font-size: 2rem;}
.half_list > li::before{display: inline-block;content: counter(type-half) "";counter-increment: type-half;position: absolute;top: 0;left: 0;padding: 0 8px;text-align: center;}
.half_list > li::after{display: inline-block;content: ')';position: absolute;top: 0;left: 2rem;}
.half_list > li + li{margin-top: 1.5rem;}

.alpha_list{margin-top: 1rem;}
.alpha_list > li{list-style-type: upper-alpha;font-size: 18px;}
.alpha_list > li + li{margin-top: 1rem;}

.privacy .table_wrap {border-top:3px solid #111; margin-top: 4rem; margin-bottom: 4rem; border-left: 1px solid #ddd; color: #000;}
.privacy .table_wrap th {background-color: #f7f7f7; font-weight: 600;}
.privacy .table_wrap th,
.privacy .table_wrap td {padding: 1rem; border-bottom: 1px solid #ddd; height: 6rem; text-align: center; border-right: 1px solid #ddd;}
.privacy .half_list > li {font-size: 2.4rem;}
.privacy .half_list p {display: flex; flex-wrap: wrap; font-size: 2.2rem; margin-top: 1rem;}
.privacy .half_list p a {margin: 0 10px; text-decoration: underline;}

@media screen and (max-width: 768px) {
	.policy_item{padding: 30px 0;}
	.policy_item h3{font-size: 24px;}
	.policy_item p,
	.decimal_list > li{font-size: 18px;}
	.decimal_list > li{padding-left: 3rem;}
	.circle_list > li{font-size: 16px;}
	.circle_list > li::before{padding: 0 6.5px;}
	.circle_list > li::after{top: 2.5px;}
	.half_list > li{font-size: 15px;}
	.alpha_list > li{font-size: 14px;}
	.privacy .table_wrap {width: 100%; overflow-y: auto;}
	.privacy .table_wrap table { width: 768px;}
}

/* ============================== [ 학습원리효과 ] ========================================================================================== */
.mb0 {margin-bottom: 0 !important;}
.mb40 {margin-bottom: 4rem;}
#sub_content {padding-top: 120px;}
#sub_content .txt_wrap {padding: 8rem 1.8rem;}
#sub_content .tooltip {margin: 0 auto 6rem; background-image: url(../images/main/tooltip_2.png);}
.main_title {margin-bottom: 6rem; font-size: 6.4rem; font-weight: 700; color: #00C2FF; text-align: center;}
.sub_title {margin-bottom: 4rem; font-size: 5.8rem; font-weight: 600; color: #383B44; text-align: center; line-height: 1.4;}
.sub_text {font-size: 3.2rem; text-align: center; line-height: 1.4;}
.sub_text_b {font-size: 3.2rem; text-align: center; line-height: 1.4; font-weight: 700;}
.sub_text_bk {font-size: 5.8rem; text-align: center; line-height: 1.7; color: #383B44;}
/* slide */
.sub_slide_wrap {position: relative; width: 100%; max-width: calc(1144px + 110px); margin: 0 auto; padding: 0 55px;}

.slide_bullet {margin-top: 4.8rem; text-align: center;}
.slide_bullet.swiper-pagination-bullets .swiper-pagination-bullet {width: 2.4rem; height: 2.4rem; opacity: 1; background-color: #DFE0E4; margin: 0 0.8rem;}
.slide_bullet.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #00C2FF;}
.slide_arr {position: absolute; top: 50%; width: 8.4rem; height: 8.4rem; background-image: url(../images/main/icon_slide.png); background-position: center; background-repeat: no-repeat; background-size: 100% auto; z-index: 1;}
.slide_arr.arr_prev {left: -19.4rem; transform: translateY(-50%);}
.slide_arr.arr_next {right: -19.4rem; transform:translateY(-50%) rotate(180deg);}

/* video */
.video_wrap {margin-top: 0;}

#sub1_01 .main_title {margin-bottom: 4rem;}
.slide_arr.arr_prev.abroad_arr {left: 13%;}
.slide_arr.arr_next.abroad_arr {right: 13%;}

#sub1_02 {padding-bottom: 4.8rem;}

#sub1_03 {background-color: #DFEAEF; padding-bottom: 4.8rem;}

#sub1_04 {background-color: #F4F7F8; padding-bottom: 4.8rem;}

#sub1_05 .card {height: 1264px; overflow: hidden; position: relative; background: url(../images/main/bg_page_01.jpg) no-repeat center; background-size: cover;}
#sub1_05 .card .sub_text {color: #383B44;}
#sub1_05 .card li {width: 36%; position: absolute; opacity: 0;  left: 50%;top: 100%;transform: scale(1) rotate(var(--rotate));transition: opacity 0.3s ease, left 1s ease, top 1s ease; transition-delay: 0.2s;}
#sub1_05 .card li.show {opacity: 1;}


@keyframes cardUp {
	0% {
		opacity: 0;
		transform: translateY(500px) scale(0.95) rotate(0deg);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(var(--rotate));
	}
}

#sub1_06 {padding-bottom: 4.8rem; background-color: #F4F7F8; perspective: 1000px;}
#sub1_06 .txt_wrap {padding-bottom: 0;}
#sub1_06 ul {position: relative; width: 70.6rem; height: 88.2rem; margin: 0 auto;}
#sub1_06 ul li {position: absolute; left: 0; top: 0;   width: 100%;
	transform: rotateY(180deg);
	backface-visibility: hidden;
	visibility: hidden;
	z-index: 0;
	animation: none;
	animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
}

#sub1_06 ul li:nth-child(1) { animation: flipCard 12s infinite; animation-delay: 0s; }
#sub1_06 ul li:nth-child(2) { animation: flipCard 12s infinite; animation-delay: 1.5s; }
#sub1_06 ul li:nth-child(3) { animation: flipCard 12s infinite; animation-delay: 3s; }
#sub1_06 ul li:nth-child(4) { animation: flipCard 12s infinite; animation-delay: 4.5s; }
#sub1_06 ul li:nth-child(5) { animation: flipCard 12s infinite; animation-delay: 6s; }
#sub1_06 ul li:nth-child(6) { animation: flipCard 12s infinite; animation-delay: 7.5s; }
#sub1_06 ul li:nth-child(7) { animation: flipCard 12s infinite; animation-delay: 9s; }
#sub1_06 ul li:nth-child(8) { animation: flipCard 12s infinite; animation-delay: 10.5s; }

@keyframes flipCard {
  0% {
    visibility: visible;
    transform: rotateY(180deg);
    z-index: 1;
  }
  10% {
    transform: rotateY(0deg);
  }
  20% {
    transform: rotateY(180deg);
  }
  21% {
    visibility: hidden;
    z-index: 0;
  }
  100% {
    visibility: hidden;
  }
}

#sub1_07 {padding-bottom: 4.8rem;}

#sub1_08 {padding-bottom: 8rem; background-color: #F4F7F8;}

#sub1_08 .board_wrap {max-width: 1144px; width: 100%; margin: 0 auto; padding: 10rem 0; background-color: #010101; border-radius: 26px;}
#sub1_08 .board_wrap .img_wrap {position: relative;}
#sub1_08 .board_wrap .img_wrap::after {opacity: 0; display: block; content: ''; width: 100%; height: 100%; background: url(../images/sub/kr/img_leaderboard_02.png) no-repeat 0 0; background-size:100% auto ; position: absolute; left: 0; top: 0; animation: blinkFade 1.2s ease-in-out infinite;}
#sub1_08 .board_wrap .img_wrap .img {width: 100%; height: 0; padding-top: 56.25%; position: relative; overflow: hidden;}
#sub1_08 .board_wrap .img_wrap .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#sub1_08 .inner_wrap {position: relative; overflow: hidden;}
#sub1_08 .heart {opacity: 0; position: absolute; left: 0; bottom: 0; background: url(../images/sub/btn_like_on.png) no-repeat; width: 7.2rem; height: 7.2rem; background-size: 100% auto;}
#sub1_08 .like {opacity: 0; position: absolute; left: 0; bottom: 0; background: url(../images/sub/rating_focus.png) no-repeat; width: 5.6rem; height: 6.6rem; background-size: 100% auto;}
#sub1_08 .good1 {opacity: 0; position: absolute; left: 20%; bottom: 0; background: url(../images/sub/good.png) no-repeat; background-size: 100% auto; width: 20%; height: 18%;}
#sub1_08 .good2 {opacity: 0; position: absolute; left: 50%; bottom: 0; background: url(../images/sub/good.png) no-repeat; background-size: 100% auto; width: 20%; height: 18%;}
#sub1_08 .cool {opacity: 0; position: absolute; left: 70%; bottom: 0; background: url(../images/sub/cool.png) no-repeat; background-size: 100% auto; width: 20%; height: 18%;}

.sub_cont_nor {padding: 0 55px;}

@keyframes blinkFade {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes floatUp {
	0% {
	  opacity: 0;
	  bottom: -100px;
	}
	20% {
		opacity: 1;
	  }
	100% {
	  opacity: 1;
	  bottom: 100%;
	}
  }
  @keyframes floatUpZoom {
	0% {
		opacity: 0;
		transform: scale(1.2);
		bottom: -100px;
	  }
	  50% {
		  opacity: 1;
		  transform: scale(0.9);
		}
	  100% {
		opacity: 1;
		transform: scale(1.3);
		bottom: 100%;
	  }
  }

  #sub1_08 .effect {
	position: absolute;
	bottom: -50px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	z-index: 10;
	transition: opacity 0.3s ease-out;
  }
  .effect.e02 {animation: floatUp 3s ease-in-out}
  .effect.e01 {animation: floatUpZoom 3s ease-in-out}
#sub1_09 .sub_text {padding: 6rem 1.8rem 8rem;}

#sub1_10 {background-color: #F4F7F8;}
#sub1_10 .sub_title {margin-bottom: 2.4rem;}
#sub1_10 > .sub_text {padding: 12rem 1.8rem 20rem;}
#sub1_10 .chart_wrap {padding: 0 1.8rem;}
#sub1_10 .chart {max-width: 1144px; width: 100%; margin: 0 auto;}
@media screen and (max-width: 1700px) {
	.slide_arr.arr_prev {left: 11px;}
	.slide_arr.arr_next {right: 11px;}
	#sub_content .txt_wrap {padding-top: 5rem;}
	#sub1_05 .card {height: 930px;}
}
@media screen and (max-width: 1024px) {
	#sub_content {padding-top: 65px;}
	.main_title {font-size: 5.2rem; margin-bottom: 4rem;}
	.sub_title {font-size: 4.4rem; margin-bottom: 2.5rem;}
	.sub_text {font-size: 2.4rem;}
	.sub_text_b {font-size: 2.4rem;}
	.sub_text_bk {font-size: 4.4rem; line-height: 1.5;}
	#sub_content .txt_wrap {padding: 5rem 1.8rem;}
	#sub_content .txt_wrap {padding-top: 4rem;}
	#sub1_05 .card {height: 730px;}
	#sub1_06 ul {width: 48rem; height: 59rem;}
}
@media screen and (max-width: 768px) {
	.sub_slide_wrap {padding: 0 35px;}
	.sub_cont_nor {padding: 0 35px;}
	.slide_bullet {margin-top: 24px;}
	.slide_bullet.swiper-pagination-bullets .swiper-pagination-bullet {width: 12px; height: 12px; margin: 0 3px;}
	.slide_arr {width: 34px; height: 34px;}
	.slide_arr.arr_prev {left: 18px;}
	.slide_arr.arr_next {right: 18px;}
	#sub1_10 > .sub_text {padding-bottom: 10rem;}

	#sub1_05 .card {height:1000px;}
	#sub1_05 .card li {width: 53%;}
	#sub1_08 .heart {width: 2rem;}
	#sub1_08 .like {width: 1.5rem;}
	.sub_text br {display: none;}
	#sub2_07 .sub_text br {display: block;}
}
@media screen and (max-width: 500px) {
	.main_title {font-size: 32px;}
	.sub_title {font-size: 28px;}
	.sub_text {font-size: 20px;}
	.sub_text_b {font-size: 20px;}
	.sub_text_bk {font-size: 28px;}
	#sub1_05 .card {height:680px;}
	#sub1_06 ul {width: 32rem; height: 40rem;}
}

#sub2_02 {position: relative; padding-bottom: 12rem; background: url(../images/main/bg_page_02.jpg) no-repeat center; background-size: cover;}
#sub2_02::before {display: block; content: ''; width: 58rem; height: 92.9rem; background: url(../images/sub/npc_01.png) no-repeat 0 0; background-size: 100% auto; position: absolute; left: 0; bottom: 0; z-index: 1;}
#sub2_02::after {display: block; content: ''; width: 58rem; height: 92.9rem; background: url(../images/sub/npc_02.png) no-repeat 0 0; background-size: 100% auto; position: absolute; right: 0; bottom: 0;}

#sub2_03 {padding-bottom: 4.8rem;}
.tit_img {position: relative; overflow: hidden; padding-top: 56.25%; width: 100%; height: 0;}
.tit_img img {position: absolute; left: 0; bottom: 0; height: 100%;}

#sub2_04 {padding-bottom: 8rem; background-color: #DFEAEF;}

#sub2_05 {padding-bottom: 4.8rem; background-color: #F4F7F8;}
#sub2_05 .tooltip {margin-top: -2rem;}
#sub2_06 {padding: 8rem 0; background-color: #F4F7F8;}

#sub2_07 {padding-bottom: 8rem;}
#sub2_07 .chart_02 div {max-width: 1199px; width: 100%;; margin: 0 auto 12rem;}
#sub2_07 .chart_02 div img {height: 100%;}
#sub2_07 .chart_02 div .mo {display: none;}
#sub2_07 .sub_text {padding: 0 1.8rem;}

.muted {width: 72px;height: 72px; z-index: 0; position: absolute; right: 15px; bottom: 15px; background: url(../images/btn_off.png) no-repeat 0 0; background-size: 100% auto;}
.muted.on {background-image: url(../images/btn_on.png);}
#sub2_02 .muted {right: 20%;}
@media screen and (max-width: 1700px) {
	#sub2_02::after,
	#sub2_02::before {width: 40rem; height: 63.9rem;}
}
@media screen and (max-width: 1350px) {
	#sub2_02 {padding-bottom:270px;}
	#sub2_02::after,
	#sub2_02::before {width: 30rem; height: 46.9rem;}
}
@media screen and (max-width: 1024px) {
	#sub2_07 .chart_02 div {max-width: 100%; margin-bottom: 5rem;}
	#sub2_07 .chart_02 div .pc {display: none;}
	#sub2_07 .chart_02 div .mo{display: block;}
}

@media screen and (max-width: 768px) {
	#sub2_02 {padding-bottom:200px;}

	#sub2_02::after,
	#sub2_02::before {width: 22rem; height: 35rem;}
	.muted {width: 36px; height: 36px; right: 10px; bottom: 10px;}
	#sub2_02 .muted {right: 25%;}

}

/* ============================== [ 로그인 ] ========================================================================================== */
.sub_wrap {padding-top: 10.2rem;}
.sub_cont_01 {position: relative; padding: 16.4rem 18px 10rem; min-height: 1100px; margin: 0 auto; max-width: 1236px; width: 100%;}
.sub_cont_01 h2 {font-size: 3.2rem; line-height: 7.2rem; text-align: center; color: #383B44; font-weight: 700;}
.sub_cont_01 h2.login_tit {line-height: 1.4; font-size: 5.8rem;}
.sub_cont_01 .desc {margin-top: 4rem; text-align: center; font-size: 2.8rem; line-height: 4rem;}

.btm_btn {position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); width: 100%; display: flex; flex-direction: column; gap: 2.5rem;}
.nor_btn {margin-top: 8rem; display: flex; flex-direction: column; gap: 2.5rem;}
.common_btn a {position: relative; margin: 0 auto; display: flex; align-items: center; justify-content: center; width: 452px; height: 104px; background: url(../images/btn_fix.png) no-repeat center; background-size: 100% auto; border-radius: 25px;}
.common_btn a.disabled {background-image: url(../images/btn_disabled.png); cursor: initial;}
.common_btn a.disabled span {color: #CBD2D3;}
.common_btn a span {margin-top: -5px; color: #223A97; font-size: 32px; font-weight: 700; text-align: center; display: flex;align-items: center;justify-content: center; }
.common_btn2 a{position: relative; margin: 0 auto; display: flex; align-items: center; justify-content: center; width: 452px; height: 104px; background: url(../images/btn_modal_link.png) no-repeat center; background-size: 100% auto; border-radius: 25px;}
.common_btn2 a span {margin-top: -5px; color: #223A97; font-size: 34px; font-weight: 700; text-align: center; display: flex;align-items: center;justify-content: center; }
@media screen and (max-width: 768px){
	.nor_btn {max-width: 226px; margin: 30px auto 0;}
	.btm_btn {max-width: 226px; bottom: 30px; gap:15px;}
	.common_btn a{background-image: none; background-color: #223A97; width: calc(100% - 32px); height: 48px; border-radius: 10px 12.5px;}
	.common_btn a.disabled{background-color: #E3EAEB; background-image: none;}
	.common_btn a span {margin-top: 0; position: absolute; font-size: 16px; border-radius: 7.5px; width: calc(100% - 7.5px); height: calc(100% - 8px); left: 2.5px; top: 2.5px; background-color: #FFEF3A;}
	.common_btn a.disabled span {background-color: #F4F7F8;}
	.common_btn2 a{background-image: none; background-color: #223A97; width: calc(100% - 32px); height: 48px; border-radius: 10px 12.5px;}
	.common_btn2 a span {margin-top: 0; position: absolute; font-size: 16px; border-radius: 7.5px; width: calc(100% - 7.5px); height: calc(100% - 8px); left: 2.5px; top: 2.5px; background-color: #fff;}
}

.sns_login {width: 100%; max-width: 46rem; margin: 15rem auto 0;}
.sns_login a {width: 100%; height: 8rem; border-radius: 1.5rem; display: flex; align-items: center; justify-content: center;}
.sns_login a ~ a {margin-top: 3rem;}
.sns_login a span {font-size: 2.4rem; color: #fff; font-weight: 700;}
.sns_login a.google {border:2px solid #000; background: #fff url(../images/login/img_google.png) no-repeat left 2.4rem center; background-size: 7rem;}
.sns_login a.google span {color: #000;}
.sns_login a.apple {background: #000 url(../images/login/img_apple.png) no-repeat left 2.4rem center; background-size: 7rem;}
.sns_login a.line {background: #06C755 url(../images/login/img_line.png) no-repeat left 2.4rem center; background-size: 7rem;}
.sns_login a.naver {background: #06be34 url(../images/login/img_naver.png) no-repeat left 2.4rem center; background-size: 7rem;}
.sns_login a.kakao {background: #ffe100 url(../images/login/img_kakao.png) no-repeat left 2.4rem center; background-size: 7rem;}

.sel_wrap ~ .sel_wrap {margin-top: 6rem;}
.sel_wrap.inpt_group {display: flex; align-items: center;}
.sel_wrap.sel_tp_01 {margin-top: 9rem;}
.sel_wrap.sel_tp_02 {margin-top: 12rem;}
.sel_wrap .tit {width: 19.6rem; font-size: 2.4rem; font-weight: 600; color: #383B44;}
.sel_wrap .tit.ess::after {content: '*'; color: #F05060;}
.sel_wrap .select_box {flex:1; width: 100%;}
.sel_wrap .edit {padding-left: 4rem; padding-right: 11rem; font-size: 2.4rem; font-weight: 600; flex:1; width: 100%; height: 7.2rem; border-radius: 10px; border:1px solid #EBF1F3; box-shadow: 0px 0px 6px 0px #66697433; background: url(../images/login/btn_edit.png) no-repeat right 1.9rem center; background-size: 7.2rem;}

.policy_wrap {margin: 7rem auto 0; max-width: 850px; width: 100%;}
.policy_wrap .policy_inner {margin-top: 3rem; padding-top: 3rem; padding-bottom: 3rem; border-top:1px solid #B6C9CF; border-bottom:1px solid #B6C9CF;}
.policy_wrap .policy_inner .sub_pol {padding-left: 7.5rem; margin-top: 1.6rem;}
.policy_wrap .chk_wrap {align-items: flex-start;}
.policy_wrap .chk_wrap ~ .chk_wrap {margin-top: 1.9rem;}
.policy_wrap .chk_wrap strong,
.policy_wrap .chk_wrap p {line-height: 1.25; font-size: 2.8rem; color: #383B44; flex:1;}

.profile_wrap {margin-top: 20rem;}
.profile_wrap .profile {width: 24rem; height: 24rem; margin: 0 auto; border-radius: 50%; background: url(../images/login/img_profile_add.png) no-repeat 0 0; position: relative; background-size: 100% auto;}
.profile_wrap .profile.none::after {display: flex; align-items: center; justify-content: center; content: '미구독'; font-size: 3.2rem; color: #FFEF3A; font-weight: 700; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 50%; background-color: rgba(0, 19, 92, .75);}
.profile_wrap .profile img {width: 100%; height: 100%; display: block;}
.profile_wrap .txt {margin-top: 6rem; font-size: 2.8rem; text-align: center; color: #383B44;}
.profile_wrap .tit {font-size: 2.8rem; margin-top: -13rem; margin-bottom: 9rem; text-align: center; color: #383B44;}
@media screen and (max-width: 1024px) {
	.sub_wrap {padding-top: 63px;}

}
@media screen and (max-width: 768px) {
	.sub_wrap {padding-top: 60px; min-height: 90vh;}
	.sub_cont_01 {padding-top: 40px; padding-bottom: 30px; min-height: calc(100vh - 175px);}
	.sub_cont_01 h2 {font-size: 26px; line-height: 36px !important;}
	.sub_cont_01 h2.login_tit {font-size: 26px;}
	.sub_cont_01 .desc {margin-top: 20px; font-size: 14px; line-height: 1.4;}
	.sns_login {margin-top: 22%;}
	.sns_login a ~ a {margin-top: 20px;}
	.sns_login a {height: 40px; border-radius: 7.5px; max-width: 230px; margin: 0 auto; background-size: 36px !important; background-position: left 11px center !important;}
	.sns_login a span {font-size: 14px;}
	.sel_wrap ~ .sel_wrap {margin-top: 3rem;}
	.sel_wrap .tit {font-size: 14px; margin-bottom: 12px;}
	.sel_wrap.sel_tp_01 {margin-top: 45px;}
	.sel_wrap.sel_tp_02 {margin-top: 60px;}
	.sel_wrap.inpt_group {display: block;}
	.sel_wrap .edit {padding-right: 40px; padding-left: 15px; font-size: 12px; height: 36px; border-radius: 5px; background-size: 36px; background-position: right center;}
	.policy_wrap .policy_inner {margin-top: 15px; padding: 15px 0;}
	.policy_wrap .policy_inner .sub_pol {padding-left: 37px;}
	.policy_wrap .chk_wrap ~ .chk_wrap {margin-top: 15px;}
	.policy_wrap .chk_wrap strong,
	.policy_wrap .chk_wrap p {font-size: 14px; line-height: 1.4;}

	.profile_wrap {margin-top: 100px;}
	.profile_wrap .profile {width: 120px; height: 120px;}
	.profile_wrap .txt {margin-top: 30px; font-size: 14px;}
	.profile_wrap .tit {font-size: 14px; margin-top: -80px; margin-bottom: 70px;}
	.profile_wrap .profile.none::after {font-size: 16px;}
}


/* ============================== [ 결제 ] ========================================================================================== */
.payment_wrap {position: relative; padding: 16.4rem 18px 10rem; margin: 0 auto; max-width: 1040px; width: 100%;}
.payment_wrap h2.tit {margin-bottom: 5rem; font-size: 3.2rem; font-weight: 700; line-height: 7.2rem; color: #383B44; text-align: center;}
.payment_wrap .group ~ .group {margin-top: 6rem; padding-top: 6rem; border-top:1px solid #B6C9CF;}
.payment_wrap .group .tit {margin-bottom: 3rem; font-size: 3.2rem; font-weight: 600; color: #000;}
.payment_wrap .group input[type="text"] {padding-left: 4rem; padding-right: 4rem; font-size: 2.4rem; font-weight: 600; width: 100%; height: 7.2rem; border-radius: 10px; border:1px solid #EBF1F3; box-shadow: 0px 0px 6px 0px #66697433; flex:1;}
.payment_wrap .group .btn_with {display: flex; margin-top: 3rem; gap: 2rem;}
.payment_wrap .group .btn_with button {width: 17.3rem; height: 7.2rem; border-radius: 1rem; font-size: 2.4rem; font-weight: 500; background-color: #2F438C; color: #fff;}
.payment_wrap .group .btn_with.error input[type="text"] {border-color: #F05060;}
.payment_wrap .group .error_txt {color: #F05060; padding: 2rem  0 0 4rem; font-size: 2.4rem; font-weight: 500;}
.payment_wrap .group.tot {margin-bottom: 0; display: flex; justify-content: space-between;}
.payment_wrap .pay_area .pay dl {justify-content: flex-end;}
.payment_wrap .group.tot dl {display: flex; align-items: center; gap:5rem}
.payment_wrap .group.tot dl ~ dl {margin-top: 1.5rem;}
.payment_wrap .group.tot dl dt {color: #7B7F8F; font-size: 2.4rem; font-weight: 500;}
.payment_wrap .group.tot dl dd {width: 17rem; color: #A4A7B4; font-weight: 700; font-size: 3.2rem; text-align: right;}
.payment_wrap .group.tot dl dd::after {content: '원';margin-left: 7px; font-size: 2.4rem;}
.payment_wrap .group.tot dl.total {margin-top: 3.6rem;}
.payment_wrap .group.tot dl.total dt {font-size: 2.8rem; font-weight: 700; color: #383B44;}
.payment_wrap .group.tot dl.total dd {width: auto; font-size: 5.2rem; font-weight: 700; color: #00C2FF;}
.payment_wrap .group.tot dl.total dd::after {color: #383B44; margin-left: 8px; font-size: 2.8rem; font-weight: 700;}
.rdo label {display: flex; align-items: center; cursor: pointer; position: relative;}
.rdo label input {position: absolute; left: 0; top: 0; width: 0; height: 0; font-size: 0; background-color: transparent;}
.rdo label {display: flex; align-items: center; cursor: pointer;}
.rdo label ~ label {margin-top: 4rem;}
.rdo label i {width: 3.4rem; height: 3.4rem; border:1px solid #223A97; border-radius: 50%; position: relative;}
.rdo label input:checked ~ i::after {display: block; content: ''; width: 2rem; height: 2rem; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #223A97;}
.rdo label p {margin-left: 1.7rem; font-size: 2.4rem; font-weight: 500; color: #7B7F8F;}
.payment_wrap .tab_cont {margin-top: 8rem;}
.payment_wrap .noti_list li .ctrl strong {font-size: 2.8rem;}
.payment_wrap .noti_list .ans li {font-size: 2.4rem;font-weight: 500; padding-left: 3rem; position: relative; color: #7B7F8F;}
.payment_wrap .noti_list .ans li::before {display: block; content: ''; width: 5px; height: 5px; background-color: #7B7F8F; border-radius: 50%; position: absolute; left: 1.2rem; top: 1.2rem;}
.payment_wrap .noti_list .ans li a {color: #383B44; text-decoration: underline; display: inline-block;}
.payment_wrap .chk_wrap {margin-top: 6rem;}
.payment_wrap .chk_wrap strong {line-height: 1.25; font-size: 2.4rem; color: #383B44; flex:1;}
.payment_wrap .use_info_items { text-align: justify; }
.payment_wrap .use_info_items li {margin-top: 10px; }
.payment_wrap .use_info_items li:first-child {margin-top:0px; font-size:24px; line-height:36px;}

.payment_modal {
  position: fixed;
  bottom: 0px;
  width: 700px;
  height: 650px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFF;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 999999;
  box-shadow:
    -4px -4px 6px rgba(0, 0, 0, 0.1),
     4px -4px 6px rgba(0, 0, 0, 0.1);
}
.payment_modal .line_img {margin: 0 auto; padding-top: 30px}
.payment_modal .line_img:hover {cursor: pointer;}
.payment_modal h3 {
  position: relative;
  top: 20px;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 56px;
  text-align: center;
  color: #000;
  letter-spacing: 1px;
}
.payment_modal h3 .point {color: #00C2FF;}
.payment_modal .tit {
  position: relative;
  top: 40px;
  text-align: center;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.44px;
  color: #000;
}
.payment_modal .info {
  position: relative;
  top: 60px;
  text-align: center;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -0.44px;
}
.payment_modal .tit2 {
  position: relative;
  top: 190px;
  text-align: center;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.44px;
  color: #000;
}
.payment_modal .line {
  background: #333;
  width: 80%;
  height: 1px;
  margin: 0 auto;
  position: relative;
  top: 20%;
  opacity: 0.2;
}
.payment_modal .price_info {
  position: relative;
  top: 26%;
  text-align: center;
}
.payment_modal .price_info .price_name {
  color: #383B44;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.48px;
  opacity: 0.5;
}
.payment_modal .price_info .price {
  color: #00C2FF;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 100% */
  letter-spacing: -1.2px;
  margin-left: 7px;
  margin-right: 7px;
}
.payment_modal .price_info .price_type {
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 5px;
  color: #000;
}

.payment_modal .total_price_info {
  position: relative;
  top: 26%;
  text-align: center;
}

.payment_modal .total_price_info .price_name {
  color: #383B44;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: -0.48px;
  opacity: 0.5;
  color: #000;
}
.payment_modal .total_price_info .price {
  color: #00C2FF;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 100% */
  letter-spacing: -1.2px;
  margin-left: 7px;
  margin-right: 7px;
}
.payment_modal .total_price_info .price_type {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 5px;
  color: #000;
}

.payment_modal #float{position: relative; top:55%;}
.payment_modal #float .btn_payment_float{display: flex; align-items: center; justify-content: center; width: 452px; height: 104px; position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%); background: url(../images/btn_fix.png) no-repeat center; background-size: 100% auto; border-radius: 25px;}
.payment_modal #float .btn_payment_float_white {display: flex; align-items: center; justify-content: center; width: 452px; height: 104px; position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%); background: url(../images/btn_modal_link.png) no-repeat center; background-size: 100% auto; border-radius: 25px;}
.payment_modal #float .btn_payment_float, .btn_payment_float_white span {margin-top: -5px; color: #223A97; font-size: 32px; font-weight: 700; text-align: center; display: flex;align-items: center;justify-content: center; }

/* ============================== [ 완료페이지 ] ========================================================================================== */
.sub_cont_01 h2.comp_tit {font-size: 4.4rem; margin-bottom: 8.5rem;}
.sub_cont_01 h2.comp_tit2 {font-size: 5.8rem; margin-bottom: 4rem;}
.sub_cont_01 h2.comp_tit3 {font-size: 4.4rem; margin-bottom: 4rem;}
.sub_cont_01 h2.comp_tit4 {font-size: 3rem; margin-bottom: 1rem;}
.sub_cont_01 p.comp_txt {line-height: 4rem; padding-top: 19.5rem; font-size: 2.8rem; text-align: center; background: url(../images/login/icon_fail.png) no-repeat top center; background-size: 11rem;}
.sub_cont_01 p.comp_txt2 {font-size: 2.8rem; color: #383B44; text-align: center; margin-bottom: 4rem;}
.sub_cont_01 p.comp_txt3 {color: #9C9DA2; line-height: 4rem; font-size: 2.8rem; text-align: center;}
.sub_cont_01 p.comp_txt4 {font-size: 2.5rem; margin-top: 8.5rem; margin-bottom: 3rem; color: #000; font-style: normal; font-weight: 400; text-align: center; line-height: 40px; letter-spacing: -0.56px;}
.sub_cont_01 p.comp_txt5 {font-size: 2.5rem; text-align: center; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: -0.56px;}
.sub_cont_01 .comp_info_box {
  width: 100%;
  height: 141px;
  background: #F4F7F8;
  margin: 0 auto;
}
.sub_cont_01 .comp_info_box .plan_name {
  color: #714CFF;
  text-align: center;
  font-family: "NotoSans";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px;
  padding-top: 30px;
}
.sub_cont_01 .comp_info_box .date_range {
  color: #000;
  text-align: center;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px; /* 128.571% */
  letter-spacing: -0.56px;
  padding-top: 9px;
}

@media screen and (max-width: 768px) {
	.payment_wrap {padding-top: 40px; padding-bottom: 30px;}
	.payment_wrap .group input[type="text"] {padding-left: 15px; padding-right: 15px; font-size: 12px; height: 36px; border-radius: 5px;}
	.payment_wrap h2.tit {font-size: 26px; line-height: 36px; margin-bottom: 96px;}
	.payment_wrap .group .tit {font-size: 14px; margin-bottom: 12px;}
	.payment_wrap .group ~ .group {padding-top: 20px; margin-top: 20px;}
	.payment_wrap .group .btn_with {margin-top: 12px; gap:10px}
	.payment_wrap .group .btn_with button {width: 86px; height: 36px; font-size: 12px; border-radius: 5px;}
	.payment_wrap .group .error_txt {padding: 10px 0 0 15px; font-size: 12px;}
	.rdo {margin-top: 15px; padding-left: 7px;}
	.rdo label ~ label {margin-top: 20px;}
	.rdo label p {font-size: 12px;}
	.rdo label i {width: 18px; height: 18px;}
	.rdo label input:checked ~ i::after {width: 10px; height: 10px;}
	.payment_wrap .group.tot dl {gap:10px;}
	.payment_wrap .group.tot dl ~ dl {margin-top: 3px;}
	.payment_wrap .group.tot dl dt {font-size: 12px;}
	.payment_wrap .group.tot dl dd {font-size: 16px; width: 105px;}
	.payment_wrap .group.tot dl dd::after {font-size: 12px; margin-left: 3px;}
	.payment_wrap .group.tot dl.total {margin-top: 18px;}
	.payment_wrap .group.tot dl.total dt {font-size: 14px;}
	.payment_wrap .group.tot dl.total dd {font-size: 26px;}
	.payment_wrap .group.tot dl.total dd::after {font-size: 14px; margin-left: 4px;}
	.payment_wrap .tab_cont {margin-top: 40px;}
	.payment_wrap .noti_list li {border-radius: 7.5px;}
	.payment_wrap .noti_list li .ctrl strong {font-size: 14px;}
	.payment_wrap .noti_list .ans li ~ li {margin-top: 5px;}
	.payment_wrap .noti_list .ans li {font-size: 12px; padding-left: 15px;}
	.payment_wrap .noti_list .ans li::before {width: 3px; height: 3px; left: 7px; top: 6px;}
	.payment_wrap .chk_wrap {margin-top: 30px;}
	.payment_wrap .chk_wrap strong {font-size: 12px;}
	.sub_cont_01 h2.comp_tit {font-size: 26px; margin-bottom: 60px;}
	.sub_cont_01 h2.comp_tit2 {font-size: 26px; margin-bottom: 20px;}
  .sub_cont_01 h2.comp_tit3 {font-size: 26px; margin-top: 20px; margin-bottom: 20px;}
  .sub_cont_01 h2.comp_tit4 {font-size: 20px; margin-bottom: 10px;}
  .sub_cont_01 .comp_info_box {
    width: 100%;
    height: 100px;
    background: #F4F7F8;
    margin: 0 auto;
  }
  .sub_cont_01 .comp_info_box .plan_name {
    color: #714CFF;
    text-align: center;
    font-family: "NotoSans";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 10px;
    padding-top: 30px;
  }
  .sub_cont_01 .comp_info_box .date_range {
    color: #000;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px; /* 128.571% */
    letter-spacing: -0.56px;
    padding-top: 10px;
  }

	.sub_cont_01 p.comp_txt {line-height: 18px; padding-top: 120px; padding-bottom: 150px; font-size: 14px; background-size: 80px;}
	.sub_cont_01 p.comp_txt2 {font-size: 16px; line-height: 22px; margin-bottom: 20px;}
	.sub_cont_01 p.comp_txt3 {font-size: 14px; line-height: 18px;}
  .sub_cont_01 p.comp_txt4 {font-size: 18px; margin-top: 50px; margin-bottom: 0.5rem; color: #000; font-style: normal; font-weight: 400; text-align: center; line-height: 40px; }
  .sub_cont_01 p.comp_txt5 {font-size: 17px; text-align: center; margin-bottom: 100px; font-style: normal; font-weight: 400; line-height: 25px; letter-spacing: -0.56px;}
  .payment_wrap .use_info_items li:first-child {margin-top:0px; line-height:15px;}
}

/* ============================== [ 구독 플랜 선택 ] ========================================================================================== */
.plan_wrap {padding-top: 16.4rem; overflow: hidden;}
.plan_wrap h2 {font-size: 4.4rem; margin-bottom: 4rem; color: #383B44; text-align: center; font-weight: 700;}
.plan_wrap .desc {font-size: 2.8rem; color: #383B44; line-height: 4rem; margin-top: 0; margin-bottom: 7rem;}
.plan {padding: 9rem 5.5rem 2.8rem; background: url(../images/login/plan_bg.png) no-repeat center; background-size: cover;}
.plan h2 {text-align: center; color: #000; font-size: 5.6rem; font-weight: 700;}
.plan h3 {text-align: center; color: #fff; font-size: 5.6rem; font-weight: 700;}
.plan .sub_txt {margin-top: 3rem; color: #6047CF; font-size: 2.8rem; font-weight: 600; line-height: 4rem; text-align: center;}
.plan figure {width: 500px; margin: 0 auto; position: relative;}
.plan .plan_intro {margin-top: 7rem; margin-bottom: 11rem;}
.plan .plan_intro .plan1::after {position: absolute; right: -7.8rem; top: -5rem; display: block; content: ''; background: url(../images/login/app_pt_ko.png) no-repeat 0 0; background-size: 100%; width: 26.9rem; height: 26.9rem;}
.plan .plan_intro .down_btn {margin: 4.4rem auto 0; width: 44.8rem; height: 10.7rem; font-size: 3.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #121212; border-radius: 20rem; background: #fff url(../images/login/app_down_arrow.png) no-repeat right center; background-size: 10.7rem; box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, .35);}
.plan_sel {margin-top: 4.4rem; position: relative;}
.plan_sel a {position: relative;}
/* .plan_sel a::after {display: block; content: ''; width: calc(100% - 52px); height: calc(100% - 52px); border-radius: 40px; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .6) url(../images/login/img_select.png) no-repeat right 32px top 32px; background-size: 130px; opacity: 0; visibility: hidden; transition: .3s;} */
.plan_sel a::after {display: block; content: ''; width: 90%; height: 79%; border-radius: 40px; position: absolute; left: 50%; top:43%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .6) url(../images/login/img_select.png) no-repeat right 32px top 32px; background-size: 130px; opacity: 0; visibility: hidden; transition: .3s;}
.plan_sel a.active::after {opacity: 1; visibility: visible;}
.sel_area {position: relative; width: 500px; margin: 0 auto;}
.sel_area ~ .sel_area {margin-top: 2.7rem;}
.sel_area1::after {position: absolute; top: 6.8rem; right: 100%; display: block; content: ''; background: url(../images/login/img_talky.png) no-repeat; background-size: 100% auto; width: 41.6rem; height: 48.6rem;}
.sel_area1 a figure .discount_txt {
  position: absolute;
  top: 145px;
  left: 83px;
  font-size: 40px;
  line-height: 28px;
  letter-spacing: -2%;
  color: #121212;
  opacity: 0.5;
  font-family: 'MPLUSRoundedExtraBold';
}
.sel_area2 a figure .discount_txt {
  position: absolute;
  top: 145px;
  left: 83px;
  font-size: 40px;
  line-height: 28px;
  letter-spacing: -2%;
  color: #121212;
  opacity: 0.5;
  font-family: 'MPLUSRoundedExtraBold';
}
.sel_area2::before {position: absolute; bottom: -5.7rem; left: calc(100% - 14.7rem); display: block; content: ''; background: url(../images/login/img_speaky.png) no-repeat; background-size: 100% auto; width: 74.6rem; height: 96.7rem;}
.sel_area .sel_price_area {position: relative; top: -160px; text-align: center;}
.sel_area .sel_price_area .sel_price {font-family: 'MPLUSRoundedExtraBold'; font-size: 80px; color:#000; font-style: normal; font-weight: 600; line-height: 60px; letter-spacing: 2px;}
.sel_area .sel_price_area .sel_price_amount_month {font-size: 38px; color:#808080; font-style: normal; font-weight: 700; line-height: 60px; letter-spacing: 5px;}
.sel_area .sel_price_area .sel_price_total_amount {display: block; font-size: 40px; color:#808080; margin-top: 15px; font-weight: 100;}
.sel_area .sel_price_area .sel_price_total_amount strong {font-weight: 700; font-family: 'MPLUSRoundedExtraBold';}

@media screen and (max-width: 1024px) {
	.plan_wrap {padding-top: 40px;}
	.plan_wrap h2 {font-size: 36px; margin-bottom: 20px;}
	.plan_wrap .desc {font-size: 14px; line-height: 1.4; margin-bottom: 3rem;}
	.plan {padding: 30px 20px 50px;}
  .plan h2 {font-size: 15px;}
	.plan h3 {font-size: 22px;}
	.plan .plan_intro {margin-top: 20px; margin-bottom: 60px;}
	.plan figure, .sel_area {max-width: 250px; width: 100%;}
	.plan .plan_intro .plan1::after {width: 135px; height: 135px; top: -25px; right: -39px;}
	.plan .plan_intro .down_btn {width: 224px; height: 54px; font-size: 18px; background-size: 54px; margin-top: 22px;}
	.plan .sub_txt {margin-top: 15px; font-size: 14px; line-height: 1.4;}
	.plan_sel {margin-top: 20px;}
	.sel_area1::after {width: 208px; height: 243px;}
	.sel_area2::before {width: 373px; height: 483px; bottom: -4px; left: calc(100% - 70px);}
	.plan_sel a::after {width: 90%; height: 76%; top: 41%; border-radius: 20px; background: rgba(0, 0, 0, .6) url(../images/login/img_select.png) no-repeat right 16px top 16px; background-size: 65px;}
  .sel_area .sel_price_area {position: relative; top: -91px; text-align: center;}
  .sel_area .sel_price_area .sel_price {font-size:32px; color:#000; font-style: normal; font-weight: 600; line-height: 60px; letter-spacing: 2px;}
  .sel_area .sel_price_area .sel_price_amount_month {font-size:20px; color:#808080; font-style: normal; font-weight: 580; line-height: 60px; letter-spacing: 2px;}
  .sel_area .sel_price_area .sel_price_total_amount {display: block; font-size: 18px; color:#808080; font-weight: 100; margin-top: -10px;}
  .sel_area1 a figure .discount_txt {
    position: absolute;
    top: 20%;
    left: 16%;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: -2%;
    color: #121212;
    opacity: 0.5;
    font-family: 'MPLUSRoundedExtraBold';
  }
  .sel_area2 a figure .discount_txt {
    position: absolute;
    top: 20%;
    left: 16%;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: -2%;
    color: #121212;
    opacity: 0.5;
    font-family: 'MPLUSRoundedExtraBold';
  }
}
@media screen and (max-width: 768px) {
	.sel_area1::after,
	.sel_area2::before {display: none;}
}

@media screen and (max-width: 768px) {
  .payment_modal {
    position: fixed;
    bottom: 0px;
    width: 90%;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    background: #FFF;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 999999;
    box-shadow:
      -4px -4px 6px rgba(0, 0, 0, 0.1),
      4px -4px 6px rgba(0, 0, 0, 0.1);
  }
  .payment_modal .line_img {margin: 0 auto; padding-top:20px; width: 70px; height: 25px;}
  .payment_modal .line_img:hover {cursor: pointer;}
  .payment_modal h3 {
    position: relative;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    color: #000;
    letter-spacing: 1px;
    bottom: 0px;
  }
  .payment_modal h3 .point {color: #00C2FF;}
  .payment_modal .tit {
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.44px;
    margin-bottom: 0px;
    color: #000;
  }
  .payment_modal .info {
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.44px;
    margin-bottom: 80px;
  }
  .payment_modal .line {
    background: #333;
    width: 80%;
    height: 1px;
    margin: 0 auto;
    position: relative;
    opacity: 0.2;
    margin-bottom: 20px;
  }
  .payment_modal .tit2 {
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.44px;
    margin-bottom: 120px;
    top: 0px;
  }
  .payment_modal .price_info {
    position: relative;
    text-align: center;
    margin-bottom: 10px;
  }
  .payment_modal .price_info .price_name {
    color: #383B44;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -0.48px;
    opacity: 0.5;
  }
  .payment_modal .price_info .price {
    color: #00C2FF;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 100% */
    letter-spacing: -1.2px;
    margin-left: 7px;
    margin-right: 7px;
  }
  .payment_modal .price_info .price_type {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 5px;
    color: #000;
  }

  .payment_modal .total_price_info {
    position: relative;
    text-align: center;
    margin-bottom: 114px;
  }
  .payment_modal .total_price_info .price_name {
    color: #383B44;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -0.48px;
    opacity: 0.5;
  }
  .payment_modal .total_price_info .price {
    color: #00C2FF;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 100% */
    letter-spacing: -1.2px;
    margin-left: 7px;
    margin-right: 7px;
  }
  .payment_modal .total_price_info .price_type {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 5px;
    color: #000;
  }

  .payment_modal #float .btn_payment_float{background-image: none; background-color: #223A97;border:4px solid #fff; width: 75%; height: 64px; border-radius: 15px; box-shadow: none;}
  .payment_modal #float .btn_payment_float_white {transform: translateX(-50%); background: url(../images/btn_modal_link.png) no-repeat center; background-size: 100% auto; width: 75%; height: 64px; border-radius: 15px; box-shadow: none;}
	.payment_modal #float .btn_payment_float span{position: fixed; font-size: 16px; border-radius: 8px; width: calc(100% - 10px); height: calc(100% - 10px); left: 4px; background-color: #FFEF3A;}
  .payment_modal #float .btn_payment_float_white span{position: fixed; font-size: 16px; border-radius: 8px; width: calc(100% - 10px); height: calc(100% - 10px); left: 4px;}
}

/* ============================== [ 마이페이지 ] ========================================================================================== */
.mypage {padding: 80px 18px 60px; margin: 0 auto; max-width: calc(1144px + 36px); position: relative;}
.mypage h2 {font-size: 5.8rem; font-weight: 700; color: #383B44; text-align: center;}
.mypage h3.sub_title {font-size: 3.2rem; font-weight: 700; line-height: 2; color: #383B44; text-align: center;}
.mypage_btn_01 {margin-top: 8rem;}
.final_btn {margin-top: 9.5rem; height: 23.3rem; justify-content: flex-end;}
.mypage.cancel_area {min-height: 1100px;}

.my_profile {margin-top: 6rem;}
.my_profile .sub_tit {font-size: 3.2rem; font-weight: 700; line-height: 1.5; text-align: center; color: #383B44;}
.my_profile .pf_img {position: relative; margin: 2rem auto 0; width: 24.6rem; height: 24.3rem;}
.my_profile .pf_img .label {width: 11rem; height: 4.8rem; border-radius: 24.5rem; background-color: #FFEF3A; position: relative; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 700; color: #223A97; position: absolute; top: -6px; left: -3.4rem;}
.my_profile .pf_img .label::after {display: block; content: ''; background: url(../images/login/ico_tooltip.png) no-repeat 0 0; background-size: 100% auto; width: 1.6rem; height: 1.2rem; position: absolute; right: 2.6rem; top:100%;}
.my_profile .pf_img .img {width: 100%; height: 100%; overflow: hidden; border-radius: 50%;}
.my_profile .pf_img .img img {height: 100%;}
.my_profile .pf_img .img.none {position: relative;}
.my_profile .pf_img .img.none::after {display: block; content: ''; width: 100%; height: 100%; background-color: #00135c; opacity: .75; position: absolute; left: 0; top: 0; border-radius: 50%;}
.my_profile .pf_img a {background: url(../images/login/ico_edit.png) no-repeat 0 0; background-size: 100%; width: 4.8rem; height: 4.8rem; border-radius: 50%; position: absolute; right: 3px; bottom: 3px;}
.my_profile .sub_txt {font-size: 2.8rem; line-height: 1.4; margin-top: 2rem; text-align: center; color: #383B44;}
.my_profile .sub_txt.sc {color: #00C2FF; font-weight: 700;}
.my_menu {margin-top: 5.4rem;}
.my_menu h3 {color: #383B44; font-size: 3.2rem; line-height: 1.5; font-weight: 700; margin-bottom: 2.4rem; line-height: 1.5;}
.my_menu .my_box {border-radius: 1.5rem; padding: 0 3.6rem; background-color: #F4F7F8;}
.my_menu .my_box li ~ li {border-top:1px solid #B6C9CF;}
.my_menu .my_box li .tit {font-size: 2.8rem; color: #383B44;}
.my_menu .my_box li .mail_info {padding: 3.4rem 0;}
.my_menu .my_box li .login_info {margin-top: 2rem; display: flex; align-items: center; justify-content: space-between;}
.my_menu .my_box li .login_info .mail {color: #383B44; font-weight: 700; font-size: 2.8rem;}
.my_menu .my_box li .login_info .line_login {position: relative; font-size: 2.4rem; font-weight: 500; color: #7B7F8F; display: flex; align-items: center;}
.my_menu .my_box li .login_info .line_login::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #7BDE81;
  background-image: url(../images/login/img_line.png); /* 아이콘 경로 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}
.my_menu .my_box li .login_info .google_login {position: relative; font-size: 2.4rem; font-weight: 500; color: #7B7F8F; display: flex; align-items: center;}
.my_menu .my_box li .login_info .google_login::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #FFF;
  background-image: url(../images/login/img_google.png); /* 아이콘 경로 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}
.my_menu .my_box li .login_info .apple_login {position: relative; font-size: 2.4rem; font-weight: 500; color: #7B7F8F; display: flex; align-items: center;}
.my_menu .my_box li .login_info .apple_login::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #000;
  background-image: url(../images/login/img_apple.png); /* 아이콘 경로 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}
.my_menu .my_box li .login_info .naver_login {position: relative; font-size: 2.4rem; font-weight: 500; color: #7B7F8F; display: flex; align-items: center;}
.my_menu .my_box li .login_info .naver_login::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #06be34;
  background-image: url(../images/login/img_naver.png); /* 아이콘 경로 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}
.my_menu .my_box li .login_info .kakao_login {position: relative; font-size: 2.4rem; font-weight: 500; color: #7B7F8F; display: flex; align-items: center;}
.my_menu .my_box li .login_info .kakao_login::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #ffe100;
  background-image: url(../images/login/img_kakao.png); /* 아이콘 경로 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}
.my_menu .my_box li .switch_wrap {padding: 3rem 0; display: flex; align-items: center; justify-content: space-between;}
.switch {cursor: pointer; position: relative;}
.switch input {position: absolute; left: 0; top: 0;}
.switch span {position: relative; display: block; width: 96px; height: 44px; border-radius: 22px; background-color: #D6E1E4; transition: .3s;}
.switch i {display: block; width: 42px; height: 32px; border-radius: 16px; background-color: #fff; position: absolute; top: 6px; left: 6px; transition: .3s;}
.switch input:checked ~ span {background-color: #2F438C;}
.switch input:checked ~ span i {left: calc(100% - 42px - 6px);}
.my_menu .my_box li > a {padding: 3.4rem 0; background: url(../images/login/ico_my_arr.png) no-repeat right center; background-size: 2rem 3rem;}
.mypage {min-height: calc(100vh - 137px);}
.mypage .logout {margin: 6rem auto 0; font-size: 2.8rem; color: #7B7F8F; display: flex; align-items: center; justify-content: center; width: 20rem; height: 8rem; border-radius: 5.2rem; border:1px solid #7B7F8F;}

.mypage .my_edit {margin-top: 6rem; padding-bottom: 27rem;}
.mypage .my_edit .sel_wrap .tit {margin-bottom: 3rem;}
.mypage .my_edit .sel_wrap .edit {background-position: right center;}
.mypage .my_edit .sel_wrap .prd {border-radius: 1.5rem; padding: 1.8rem 4.2rem; background-color: #F4F7F8;}
.mypage .my_edit .sel_wrap .prd p {line-height: 1.5; font-size: 2.4rem; font-weight: 500;}

.mypage .cancel_wrap {margin: 6.4rem auto 0; max-width: 845px; width: 100%;}
.mypage .cancel_wrap .etc {height: 7.2rem; margin-top: 1.4rem; padding: 0 4.2rem; width: calc(100% - 6rem); margin-left: 6rem; border:1px solid #EBF1F3; border-radius: 1rem; background-color: #fff; box-shadow: 0 0 6px 0 rgba(102, 105, 116, .2); font-size: 2.4rem; font-weight: 500;}
.mypage .rdo {padding-left: 0;}
.mypage .rdo label ~ label {margin-top: 2.5rem;}
.mypage .rdo label p {margin-left: 2.5rem; font-size: 2.8rem; color: #383B44;}

.mypage .cancel_desc {font-size: 2.8rem; line-height: 1.4; text-align: center; color: #383B44; margin-top: 6rem;}
.mypage .talky_sad {margin: 4rem auto 0; width: 33.8rem;}
.mypage .final_desc {margin-top: 9.4rem; font-size: 2.4rem; line-height: 1.5; color: #383B44; text-align: center;}

.cancel_text {margin-top: -2rem; color: #7B7F8F; font-size: 2.4rem; font-weight: 500; text-align: center;}
.mem_wrap {margin-top: 6rem; padding-top: 6rem; border-top:1px solid #B6C9CF;}
.mem_wrap .mail_wrap h4 {font-size: 2.4rem; font-weight: 500; color: #383B44;}
.mem_wrap .mail_wrap .mail {padding: 2.4rem 3rem; margin-top: 2.4rem; background-color: #F4F7F8; border-radius: 1.5rem;}
.mem_wrap .mail_wrap .mail p {font-size: 2.8rem; font-weight: 700; color: #383B44;}
.mem_wrap .mem_li {margin-top: 6rem;}
.mem_wrap .mem_li h4 {font-size: 2.4rem; margin-bottom: 2.4rem; font-weight: 600; color: #383B44;}
.mem_wrap .mem_li ul li {padding-left: 3rem; font-size: 2.4rem; line-height: 1.5; position: relative; color: #383B44;}
.mem_wrap .mem_li ul li strong {font-weight: 600;}
.mem_wrap .mem_li ul li::before {display: block; content: ''; width: 0.8rem; height: 0.8rem; border-radius: 50%; background-color: #383B44; position: absolute; left: 5px; top: 15px;}
.mem_chk {padding-top: 5.6rem; margin-top: 6rem; border-top:1px solid #B6C9CF;}
.mem_chk .chk_wrap strong {color: #383B44; font-size: 2.4rem;}
.mem_chk > p {margin-top: 2rem; padding-left: 6rem; color: #383B44; font-size: 2.4rem; font-weight: 500; line-height: 1.5;}
.mem_chk .chk_wrap p {padding-top: 3rem; font-weight: 500; color: #7B7F8F; font-size: 2.4rem; line-height: 1.5;}
.final_btn > a {text-align: center; display: inline-block; margin-top: 1.2rem; font-size: 2.8rem; color: #7B7F8F; text-decoration: underline; text-underline-offset: 5px;}

.coupon {max-width: 648px; width: 100%; margin: 4rem auto 0;}
.filter {display: flex; align-items: center; justify-content: space-between;}
.filter > p {font-size: 2.8rem; color: #383B44;}
.filter .nice-select {width: 204px;}
.cp {margin-top: 24px; height: 320px; background: url(../images/login/coupon_blue.png) no-repeat center; background-size: 100% 320px;}
.cp > div {height: 50%; padding: 30px;}
.cp .top {display: flex; justify-content: space-between;}
.cp .top .name p {font-size: 32px; font-weight: 700; line-height: 46px; color: #383B44;}
.cp .top .name strong {color: #00C2FF; font-size: 52px; line-height: 56px; font-weight: 700;}
.cp .top span {display: block; width: 160px; height: 48px; border-radius: 24px; background-color: #00C2FF; color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; position: relative;}
.cp .top span::after {display: block; content: ''; left: 24px; bottom: -10px; width: 16px; height: 10px; background: url(../images/login/ico_tooltip_bl.png) no-repeat 0 0; background-size: 100% auto; position: absolute;}
.cp .bottom {display: flex; flex-direction: column; justify-content: center;}
.cp .bottom > * {color: #7B7F8F; font-size: 24px; line-height: 36px;}
.cp .bottom strong {font-weight: 700;}
.cp .bottom b {font-weight: 700; color: #00C2FF; font-size: 24px; line-height: 36px;}
.cp.disabled {background-image: url(../images/login/coupon_disabled.png);}
.cp.disabled .top span {background-color: #AAADB8;}
.cp.disabled .top span::after {background-image: url(../images/login/ico_tooltip_gy.png);}
.cp.disabled .top .name p,
.cp.disabled .top .name strong ,
.cp.disabled .bottom > *,
.cp.disabled .bottom b {color: #7B7F8F; opacity: 0.6;}
.cp.used {background-image: url(../images/login/coupon_used.png);}
.cp.used .top span {background-color: #AAADB8;}
.cp.used .top span::after {background-image: url(../images/login/ico_tooltip_gy.png);}
.cp.used .top .name p,
.cp.used .top .name strong ,
.cp.used .bottom > *,
.cp.used .bottom b {color: #7B7F8F;}

@media screen and (max-width: 768px) {
	.mypage {padding-top: 40px; padding-bottom: 30px; min-height: calc(100vh - 176px);}
	.mypage h2 {font-size: 2.6rem;}
	.mypage h3.sub_title {font-size: 2.6rem; line-height: 1.4;}
	.mypage_btn_01 {margin-top: 50px;}
	.final_btn {margin-top: 55px; height: 111px;}
	.mypage.cancel_area {min-height: calc(100vh - 150px);}

	.my_profile {margin-top: 40px;}
	.my_profile .sub_tit {font-size: 14px;}
	.my_profile .pf_img {width: 90px; height: 90px; margin-top: 10px;}
	.my_profile .pf_img .label {width: 55px; height: 24px; border-radius: 12.25px; font-size: 12px; top: -3px; left: -17px;}
	.my_profile .pf_img .label::after {width: 8px; height: 6px; right: 13px;}
	.my_profile .pf_img a {width: 28px; height: 28px;}
	.my_profile .sub_txt {font-size: 14px; margin-top: 10px;}

	.my_menu {margin-top: 30px;}
	.my_menu h3 {font-size: 14px; margin-bottom: 12px;}
	.my_menu .my_box {border-radius: 8px; padding: 0 15px;}
	.my_menu .my_box li .tit {font-size: 14px;}
	.my_menu .my_box li .mail_info {padding: 12px 0;}
	.my_menu .my_box li .login_info {margin-top: 12px; display: block;}
	.my_menu .my_box li .login_info .mail {font-size: 14px;}
	.my_menu .my_box li .login_info .line_login {margin-top: 12px; font-size: 12px;}
	.my_menu .my_box li .login_info .line_login::before {margin-right: 12px; width: 15px; height: 15px; border-radius: 2.5px;}
  .my_menu .my_box li .login_info .google_login {margin-top: 12px; font-size: 12px;}
	.my_menu .my_box li .login_info .google_login::before {margin-right: 12px; width: 15px; height: 15px; border-radius: 2.5px;}
  .my_menu .my_box li .login_info .apple_login {margin-top: 12px; font-size: 12px;}
	.my_menu .my_box li .login_info .apple_login::before {margin-right: 12px; width: 15px; height: 15px; border-radius: 2.5px;}
  .my_menu .my_box li .login_info .naver_login {margin-top: 12px; font-size: 12px;}
	.my_menu .my_box li .login_info .naver_login::before {margin-right: 12px; width: 15px; height: 15px; border-radius: 2.5px;}
  .my_menu .my_box li .login_info .kakao_login {margin-top: 12px; font-size: 12px;}
	.my_menu .my_box li .login_info .kakao_login::before {margin-right: 12px; width: 15px; height: 15px; border-radius: 2.5px;}
	.my_menu .my_box li .switch_wrap {padding: 13px 0;}
	.switch span {width: 48px; height: 22px; border-radius: 11px;}
	.switch i {width: 21px; height: 16px; border-radius: 8px; top: 3px; left: 3px;}
	.switch input:checked ~ span i {left: calc(100% - 21px - 3px);}
	.my_menu .my_box li > a {padding: 13px 0; background-size:10px 15px;}
	.mypage .logout {margin-top: 30px; font-size: 14px; width: 100px; height: 40px; border-radius: 26px;}

	.mypage .my_edit {margin-top: 30px; padding-bottom: 90px;}
	.mypage .my_edit .sel_wrap .tit {margin-bottom: 12px;}
	.mypage .my_edit .sel_wrap .prd {padding: 12px 15px; border-radius: 7px;}
	.mypage .my_edit .sel_wrap .prd p {font-size: 14px;}

	.mypage .cancel_wrap {margin: 50px auto 0;}
	.mypage .cancel_wrap .etc {height:36px; margin-top: 9px; padding: 0 15px; margin-left: 30px; font-size: 12px; width: calc(100% - 30px); border-radius: 5px;}
	.mypage .rdo label ~ label {margin-top: 20px;}
	.mypage .rdo label p {margin-left:12px; font-size: 14px;}

	.mypage .cancel_desc {font-size:14px; margin-top: 20px;}
	.mypage .talky_sad {margin-top: 10px; width: 170px;}
	.mypage .final_desc {margin-top: 50px; font-size: 12px; font-weight: 500;}


	.cancel_text {font-size: 12px; margin-top: -10px;}
	.mem_wrap {margin-top: 30px; padding-top: 0; border-top:none;}
	.mem_wrap .mail_wrap h4 {font-size: 12px;}
	.mem_wrap .mail_wrap .mail {padding: 12px 15px; margin-top: 12px; border-radius: 7px;}
	.mem_wrap .mail_wrap .mail p {font-size: 14px;}
	.mem_wrap .mem_li {margin-top: 12px;}
	.mem_wrap .mem_li h4 {font-size: 12px; margin-bottom: 12px;}
	.mem_wrap .mem_li ul li {padding-left: 15px; font-size: 12px;}
	.mem_wrap .mem_li ul li::before {width: 4px; height: 4px; left: 2px; top: 7px;}
	.mem_chk {padding-top: 28px; margin-top: 30px;}
	.mem_chk .chk_wrap strong {font-size: 12px;}
	.mem_chk > p {margin-top: 10px; padding-left: 32px; font-size:12px;}
	.mem_chk .chk_wrap p {padding-top: 15px; font-size: 12px;}
	.final_btn > a {margin-top: 0; font-size: 14px; text-underline-offset: 3px;}

	.coupon {margin-top: 22px; max-width: 324px;}
	.filter > p {font-size: 14px}
	.filter .nice-select {width: 102px;}
	.cp {margin-top: 12px; height: 160px; background-size: 100% 160px;}
	.cp > div {padding: 15px;}
	.cp .top .name p {font-size: 16px; line-height: 28px;}
	.cp .top .name strong {font-size: 26px; line-height: 28px;}
	.cp .top span {width: 80px; height: 24px; border-radius: 12px; font-size: 12px; font-weight: 700;}
	.cp .top span::after {left: 12px; bottom: -5px; width: 8px; height: 5px;}
	.cp .bottom > *,
	.cp .bottom b {font-size: 12px; line-height: 18px;}

  .my_menu .my_box li .login_info .line_login::before {
    width: 15px;
    height: 15px;
  }

  .my_menu .my_box li .login_info .google_login::before {
    width: 15px;
    height: 15px;
  }

  .my_menu .my_box li .login_info .apple_login::before {
    width: 15px;
    height: 15px;
  }

  .my_menu .my_box li .login_info .naver_login::before {
    width: 15px;
    height: 15px;
  }

  .my_menu .my_box li .login_info .kakao_login::before {
    width: 15px;
    height: 15px;
  }
}

.cancel_layer {opacity: 0; visibility: hidden; bottom: -100%; width: 828px; height: 752px; background-color: rgba(255, 255, 255, .5); border-radius: 20px; position: fixed; left: 50%; transform: translateX(-50%); box-shadow: 0 -4px 20px 0 rgba(0, 0, 0, .25); transition: .3s;}
.cancel_layer.active {bottom: -25px; opacity: 1; visibility: visible;}
.cancel_layer .c_wrap {width: calc(100% - 20px); height: calc(100% - 20px); background-color: #fff; border-radius: 20px; position: absolute; left: 10px; top: 10px;}
.cancel_layer .c_wrap em {width: 55px; height: 6px; border-radius: 6px; background-color: #d9d9d9; position: absolute; left: 50%; top: 24px; transform: translateX(-50%);}
.cancel_layer .c_wrap h3 {font-size: 32px; font-weight: 700; line-height: 56px; text-align: center; color: #383B44; margin-top: 45px;}
.cancel_layer .c_wrap > p {height: 206px; color: #F05060; font-size: 22px; line-height: 36px; display: flex; align-items: center; justify-content: center; text-align: center;}
.cancel_layer .c_wrap .nor_btn {margin-top: 30px;}

@media screen and (max-width: 768px)  {
	.cancel_layer {width: 334px; height: 404px; border-radius: 10px;}
	.cancel_layer.active {bottom: -7px;}
	.cancel_layer .c_wrap {width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 10px; left: 5px; top: 5px;}
	.cancel_layer .c_wrap em {width: 27px; height: 3px; border-radius: 6px; top: 12px;}
	.cancel_layer .c_wrap h3 {font-size: 16px; line-height: 28px; margin-top: 23px;}
	.cancel_layer .c_wrap > p {height: 98px; font-size: 11px; line-height: 18px;}
	.cancel_layer .c_wrap .nor_btn {margin-top: 15px;}
}

/* ============================== [ 구독관리 ] ========================================================================================== */
.subscription_wrap {position: relative; margin: 0 auto; max-width: 1140px; width: 100%; padding: 8rem 18px 10rem;}
.subscription_wrap h2.title {font-size: 5.8rem; text-align: center; color: #383B44; font-weight: 700; line-height: 124%;}
.subs_container {display: flex; flex-direction: column; row-gap: 3.4rem; margin-top: 6rem;}
.subscription_plan {width: 100%; border-radius: 15px; background-color: #F4F7F8; padding: 3rem; display: flex; flex-direction: column; row-gap: 9px; align-items: center; justify-content: center; position: relative;}
.subscription_plan .status {background: url('../images/img_tooltip_purple.svg') no-repeat center; width: 160px; height: 58px; display: flex; justify-content: center; margin: 0 auto; position: absolute; top: 2.4rem; left: 2.4rem;}
.subscription_plan .status span {color: #fff; font-size: 2.4rem; line-height: 3.6rem; letter-spacing: -0.48px; font-weight: 700; padding-top: 4px;}
.subscription_plan .status.expiry {background: url('../images/img_tooltip_gray.svg') no-repeat center;}
.subscription_plan .subs_plan_name {color: #383B44; font-size: 3.2rem; font-weight: 700; line-height: 175%; display: flex; column-gap: 1rem;}
.subscription_plan .subs_plan_name.ing {color: #714CFF;}
.subscription_plan .subs_plan_name.expiry {color: #7B7F8F;}
.subscription_plan .subs_plan_explaint {font-size: 2.8rem; text-align: center; line-height: 128%; letter-spacing: -0.56px; display: flex; column-gap: 0.8rem;}

.subs_detail_box {border-radius: 15px; background-color: #F4F7F8; width: 100%; padding: 3.4rem 3.6rem; display: flex; flex-direction: column;}
.subs_info {display: flex; flex-direction: column;}
.subs_info .title {font-size: 2.8rem; font-weight: 700; color: #383B44; line-height: 3.6rem; letter-spacing: -0.56px;}
.subs_info .expiry_date {display: flex; align-items: center; margin-top: 2rem; margin-bottom: 2.6rem; column-gap: 1rem;}
.subs_info .expiry_date p {font-weight: 700; font-size: 2.8rem; line-height: 3.6rem; letter-spacing: -0.56px;}
.subs_info .expiry_date p.remain {color: #714CFF;}
.subs_info .expiry_date p.remain.expiry {color: #F05060;}
.subs_info .payment_info {display: flex; align-items: flex-end; column-gap: 0.8rem;}
.subs_info .payment_info figure {width: 7.6rem; height: 4rem;}
.subs_info .payment_info figure img {width: 100%; height: 100%; object-fit: contain;}
.subs_info .payment_info span {font-size: 2.8rem; font-weight: 500; line-height: 3.6rem; letter-spacing: -0.56px;}

.subs_list {margin-top: 3.2rem; border-top: 1px solid #B6C9CF;}
.subs_list ul li a {padding: 3.4rem 0; position: relative; border-bottom: 1px solid #B6C9CF;}
.subs_list ul li:last-child a {padding-bottom: 0; border-bottom: none;}
.subs_list ul li a span {font-size: 2.8rem;}
.subs_list ul li a:after {content:''; width: 2rem; height: 3rem; background: url('../images/login/ico_my_arr.png') no-repeat center / cover; position: absolute; top: 3.4rem; right: 0;}

.subs_container .explaint_txt {padding-left: 3.6rem;}
.subs_container .explaint_txt p {color: #383B44; font-size: 2.4rem; font-weight: 500; line-height: 150%; letter-spacing: -0.48px; position: relative; padding-left: 3rem;}
.subs_container .explaint_txt p:before {content:'※'; font-size: 2.4rem; font-weight: 500; line-height: 150%; position: absolute; left: 0;}

.subs_container .noti_list li .ctrl strong {font-size: 2.8rem;}
.subs_container .noti {margin-top: 0; margin-bottom: 0;}
.subs_container .noti_list li .ans {font-size: 2.8rem;}
.subs_container .noti_list li .ans ul li {font-size: 2.8rem; line-height: 3.6rem; position: relative; padding-left: 2.5rem; font-weight: 500;}
.subs_container .noti_list li .ans ul li:before {content:'•'; font-size: 2.8rem; font-weight: 500; position: absolute; left: 0;}

.subs_container .nor_btn.no_plan {margin-top: 5.4rem;}
.subs_container .nor_btn.expiry {margin-top: 23rem;}

.subs_container .banner_area {display: flex; align-items: center; justify-content: center; margin-top: 5.4rem;}
.subs_container .banner_area figure {width: 90rem; height: 45rem;}
.subs_container .banner_area figure img {width: 100%; height: 100%; object-fit: contain;}

.cancel_layer .c_wrap > p.no_color {color: #383B44;}
.cancel_layer .c_wrap > .refund_txt {text-align: center; margin-top: 6.4rem; font-size: 2.2rem; font-weight: 400; line-height: 3.6rem; letter-spacing: -0.44px;}
.cancel_layer .c_wrap > .refund_txt .red {color: #F05060; font-weight: 700;}
.cancel_layer .c_wrap > .refund_txt strong {color: #383B44;}

@media screen and (max-width: 1024px){
	.subs_container .explaint_txt {padding-left: 0;}
}
@media screen and (max-width: 768px) {
	.subscription_wrap {padding-top: 40px; padding-bottom: 18px; width: 100%; max-width: 100%;}
	.subscription_wrap h2.title {font-size: 26px;}

	.subs_container {margin-top: 40px; row-gap: 18px;}
	.subscription_plan {padding: 36px 0;}
	.subscription_plan.expiry {padding: 18px 0;}
	.subscription_plan span {font-size: 14px;}
	.subscription_plan .subs_plan_name {font-size: 14px; line-height: 21px; column-gap: 5px;}
	.subscription_plan .subs_plan_explaint {font-size: 14px; line-height: 20px; column-gap: 3px;}
	.subscription_plan .status {width: 80px; height: 30px; background-size: 80px 30px !important; top: 8px; left: 10px;}
	.subscription_plan .status span {font-size: 12px; line-height: 18px; padding-top: 3px;}

	.subs_detail_box {padding: 12px 15px;}
	.subs_info .title {font-size: 14px; line-height: 21px;}
	.subs_info .expiry_date {margin: 12px 0; column-gap: 5px;}
	.subs_info .expiry_date p {font-size: 14px; line-height: 21px;}
	.subs_info .payment_info {column-gap: 2px;}
	.subs_info .payment_info figure {width: 38px; height: 20px;}
	.subs_info .payment_info span {font-size: 12px; line-height: 18px; letter-spacing: -0.24px;}

	.subs_list {margin-top: 12px;}
	.subs_list ul li a {padding: 13px 0;}
	.subs_list ul li a span {font-size: 14px; line-height: 25px;}
	.subs_list ul li a:after {width: 10px; height: 15px; top: 18px;}

	.subs_container .explaint_txt p {font-size: 12px; padding-left: 18px;}
	.subs_container .explaint_txt p:before {font-size: 14px;}

	.subs_container .nor_btn.expiry {margin-top: 30px;}
	.subs_container .nor_btn.no_plan {margin-top: 22px;}

	.subs_container .banner_area {margin-top: 22px; margin-bottom: 60px;}
	.subs_container .banner_area figure {width: 100%; height: 100%;}

	.subs_container .noti_list li .ctrl strong {font-size: 14px;}

	.cancel_layer .c_wrap > .refund_txt {font-size: 11px; line-height: 18px; margin-top: 29px; margin-bottom: 36px;}
}

/* ============================== [ 결제 내역 ] ========================================================================================== */
.ph_wrap {position: relative; margin: 0 auto; max-width: 1140px; width: 100%; padding: 8rem 18px 10rem;}
.ph_wrap h2.title {font-size: 5.8rem; text-align: center; color: #383B44; font-weight: 700; line-height: 124%;}
.ph_container {margin-top: 8rem;}
.ph_list {display: flex; flex-direction: column; row-gap: 2.4rem;}
.ph_list li {display: flex; align-items: flex-start; justify-content: space-between; background-color: #F4F7F8; border-radius: 15px; padding: 3.4rem 3.6rem;}
.ph_list li .ph_info {display: flex; flex-direction: column; row-gap: 1.2rem;}
.ph_list li .ph_info .ph_date {display: flex; align-items: center; column-gap: 1rem;}
.ph_list li .ph_info .ph_date span {color: #383B44; font-size: 2.8rem; line-height: 3.6rem; letter-spacing: -0.56px; font-weight: 700;}
.ph_list li .ph_info .ph_detail {display: flex; flex-direction: column;}
.ph_list li .ph_info .ph_detail span {color: #383B44; font-size: 2.4rem; font-weight: 500; line-height: 3.6rem; letter-spacing: -0.48px;}
.ph_list li .ph_info .ph_detail .ph_billing .card_info {position: relative; padding-left: 1rem;}
.ph_list li .ph_info .ph_detail .ph_billing .card_info:before {content:'/'; font-size: 2.4rem; font-weight: 500; line-height: 3.6rem; position: absolute; top: 0; left: 0;}
.ph_list li .ph_amount {display: flex; align-items: center; column-gap: 0.5rem;}
.ph_list li .ph_amount span {font-size: 3.2rem; font-weight: 700; line-height: 5.6rem; letter-spacing: -0.64px; color: #00C2FF;}
.ph_list li .ph_amount span.currency {color: #383B44;}
.ph_list li.refund .ph_info .ph_refund {display: flex; align-items: center; column-gap: 0.5rem;}
.ph_list li.refund .ph_info .ph_refund span {font-size: 2.4rem; font-weight: 500; line-height: 3.6rem; letter-spacing: -0.48px;}
.ph_list li.refund .ph_amount {position: relative;}
.ph_list li.refund .ph_amount:after {content:''; width: 100%; height: 2px; background-color: #7B7F8F; opacity: 0.5; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
.ph_list li.refund .ph_amount span {color: #7B7F8F; opacity: 0.5;}

@media screen and (max-width: 768px) {
	.ph_wrap h2.title {font-size: 26px; line-height: 36px;}
	.ph_container {margin-top: 40px;}
	.ph_list {row-gap: 12px;}
	.ph_list li {padding: 17px 18px;}
	.ph_list li .ph_info {row-gap: 6px;}
	.ph_list li .ph_info .ph_date {column-gap: 3px;}
	.ph_list li .ph_info .ph_date span {font-size: 14px; line-height: 18px;}
	.ph_list li .ph_info .ph_detail span {font-size: 12px; line-height: 18px;}
	.ph_list li .ph_info .ph_detail .ph_billing .card_info {padding-left: 5px;}
	.ph_list li .ph_info .ph_detail .ph_billing .card_info:before {font-size: 12px; line-height: 18px;}
	.ph_list li .ph_amount span {font-size: 16px; line-height: 28px;}
	.ph_list li.refund .ph_info .ph_refund span {font-size: 12px; line-height: 18px; letter-spacing: -0.24px;}

}

/* ============================== [ 구독 환불 신청 ] ========================================================================================== */
.subscription_plan .subs_plan_explaint {color: #383B44;}
.subscription_plan .subs_plan_explaint.amount {column-gap: 0;}
.subscription_plan .subs_plan_explaint .amount_txt {font-weight: 700; padding-left: 0.5rem;}

.payment_wrap.refund {padding: 0; padding-top: 6rem; max-width: 100%; padding-bottom: 1.6rem;}
.payment_wrap .group.tot .pay_info {display: flex; align-items: flex-end; flex-direction: column; justify-content: flex-end;}
.payment_wrap .group.tot .pay_info span {color: #A4A7B4; font-size: 3.2rem; font-weight: 700; line-height: 5.6rem; letter-spacing: -0.64px;}

@media screen and (max-width: 768px){
	.payment_wrap .group.tot .pay_info span {font-size: 16px; line-height: 28px;}
	.payment_wrap.refund .tab_cont {margin-top: 20px;}
	.nor_btn.refund {gap: 15px;}
	.payment_wrap.refund {padding-top: 30px; padding-bottom: 0;}
}

/* ============================== [ 구독 환불 신청 완료 ] ========================================================================================== */
.refund_wrap {position: relative; margin: 0 auto; max-width: 1140px; width: 100%; padding: 8rem 18px 10rem;}
.refund_container {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.refund_box {padding-bottom: 6rem; border-bottom: 1px solid #B6C9CF; width: 100%; margin-bottom: 6rem; display: flex; flex-direction: column; row-gap: 4rem;}
.refund_box:last-child {padding-bottom: 0; border-bottom: none; margin-bottom: 0;}
.refund_box h2 {color: #383B44; text-align: center; font-size: 4.4rem; font-weight: 700; line-height: 7.2rem; letter-spacing: -0.88px;}
.refund_box p {text-align: center; color: #383B44; font-size: 2.8rem; line-height: 4rem; font-weight: 400;}
.refund_box .refund_txt_box {display: flex; flex-direction: column; row-gap: 2.4rem; align-items: flex-start;}
.refund_box .refund_txt_box:last-child {margin-top: 2rem;}
.refund_box .refund_txt_box .sub_title {font-size: 2.4rem; font-weight: 600; line-height: 3.6rem; letter-spacing: -0.48px; margin-bottom: 0;}
.refund_box .refund_txt_box ul {display: flex; flex-direction: column;}
.refund_box .refund_txt_box ul li {font-size: 2.4rem; color: #383B44; font-weight: 400; line-height: 3.6rem; letter-spacing: -0.48px; position: relative;}
.refund_box .refund_txt_box ul li:before {content:'•'; font-size: 2.4rem; font-weight: 400; color: #383B44;}
.refund_box .refund_txt_box ul li strong {font-weight: 600;}
.refund_box > span {font-size: 2.4rem; color: #383B44; font-weight: 500; line-height: 3.6rem; text-align: center;}

@media screen and (max-width: 768px) {
	.refund_box {row-gap: 20px; margin-bottom: 30px; padding-bottom: 27px;}
	.refund_box h2 {font-size: 26px; line-height: 36px;}
	.refund_box p {font-size: 14px; line-height: 140%;}
	.refund_box .refund_txt_box {row-gap: 12px;}
	.refund_box .refund_txt_box .sub_title {font-size: 12px; line-height: 18px; letter-spacing: -0.24px;}
	.refund_box .refund_txt_box ul li {font-size: 12px; line-height: 18px; letter-spacing: -0.24px;}
	.refund_box .refund_txt_box ul li:before {font-size: 12px; line-height: 18px;}
	.refund_box > span {opacity: 0.5; font-size: 12px;}
}

/* ============================== [ 학습 관리 ] ========================================================================================== */
.subscription_wrap h2.title.management {position: relative;}
.profile_box {display: flex; column-gap: 2rem; align-items: center; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); padding-top: 20px;}
.profile_box figure {width: 6.4rem; height: 6.4rem;}
.profile_box figure img {width: 100%; height: 100%; object-fit: contain;}
.profile_box span {color: #383B44; font-size: 3.2rem; font-weight: 700; line-height: 5.6rem; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}

.management_tab {display: flex; gap: 2rem; margin-top: 10rem;}
.management_tab li {flex: 1;}
.management_tab li a {font-size: 3.6rem; font-weight: 700; width: 100%; display: flex; align-items: center; justify-content: center; background-color: transparent; color: #7B7F8F; padding-bottom: 3.6rem; border-bottom: 10px solid #7B7F8F; line-height: 5.6rem;}
.management_tab li a.active {color: #00C2FF; border-bottom: 10px solid #00C2FF;}

.mission_box {display: flex; flex-direction: column;}
.calendar_box {display: flex; align-items: center; justify-content: center; position: relative; margin-top: 3.6rem; padding-bottom: 6.3rem; border-bottom: 1px solid #B6C9CF;}
.calendar_box .btn_calendar {position: absolute; top: 0; left: 0;}
.calendar_box .btn_calendar figure {width: 6.1rem; height: 6.1rem;}
.calendar_box .btn_calendar figure img {width: 100%; height: 100%; object-fit: contain;}
.calendar_box .month_box {display: flex; align-items: center; column-gap: 22rem;}
.calendar_box .month_box a figure {width: 6.1rem; height: 6.1rem;}
.calendar_box .month_box a figure img {width: 100%; height: 100%; object-fit: contain;}
.calendar_box .month_box span {color: #383B44; font-size: 3.2rem; font-weight: 700; line-height: 5.6rem;}

.mission_sub_box {display: flex; flex-direction: column; row-gap: 3rem; margin-top: 3.7rem;}
.mission_sub_box .title {color: #383B44; font-size: 3.2rem; font-weight: 700; line-height: 5.6rem;}
.mission_status_box {border-radius: 1.5rem; background-color: #F4F7F8; display: flex; align-items: center; justify-content: center; padding: 3.5rem 0; column-gap: 9rem;}
.mission_status_box.empty {padding: 7.2rem 0; display: flex; flex-direction: column;}
.mission_status_box.empty p {color: #7B7F8F; font-size: 3.2rem; font-weight: 500; line-height: 5.6rem; letter-spacing: -0.64px; opacity: 0.5;}
.mission_status_box.no_plan {padding: 4rem 0; display: flex; flex-direction: column;}
.mission_status_box.no_plan figure {width: 6.8rem; height: 6.8rem;}
.mission_status_box.no_plan figure img {width: 100%; height: 100%; object-fit: contain;}
.mission_status_box.no_plan p {color: #7B7F8F; font-size: 3.2rem; font-weight: 500; line-height: 5.6rem; letter-spacing: -0.64px; opacity: 0.5; text-align: center; margin-top: 3rem;}
.mission_status_box .mission_txt {display: flex; align-items: center; column-gap: 4rem;}
.mission_status_box .mission_txt figure {width: 13rem; height: 13rem; padding: 0.8rem 1rem 0.9rem 1.4rem;}
.mission_status_box .mission_txt.unit figure {padding: 1.5rem 1.1rem 1.4rem 1.1rem;}
.mission_status_box .mission_txt figure img {width: 100%; height: 100%; object-fit: contain;}
.mission_status_box .mission_txt p {color: #383B44; font-size: 3.2rem; font-weight: 500; line-height: 5.6rem; letter-spacing: -0.64px;}
.mission_status_box .mission_txt p span {color: #00C2FF; font-weight: 700; position: relative;}
.mission_status_box .mission_txt p span:after {content:'개';}

.mission_card_box {display: flex; flex-direction: column; row-gap: 4rem;}
.mission_card_box .mission_card_one {border-radius: 1.5rem; overflow: hidden;}
.mission_card_box .mission_card_one .lecture {width: 100%; position: relative;}
.mission_card_box .mission_card_one .lecture .category {position: absolute; top: 4.2rem; right: 4rem; border-radius: 2.6rem; background-color: #00C2FF; color: #fff; font-size: 3.2rem; font-weight: 700; line-height: 5.6rem; /*width: 15.8rem;*/ padding: 0px 20px; height: 5.2rem; text-align: center;}
.mission_card_box .mission_card_one .lecture img {width: 100%; height: 100%; object-fit: cover; display: block;}
.mission_card_box .mission_card_one .lecture video {width: 100%; height: 100%; object-fit: cover; display: block;}
.mission_card_box .mission_card_one .lecture_title {display: flex; align-items: center; justify-content: space-between; padding: 4rem; background-color: #F4F7F8;}
.mission_card_box .mission_card_one .lecture_title .lecture_txt {display: flex; flex-direction: column; row-gap: 0.4rem;}
.mission_card_box .mission_card_one .lecture_title .lecture_txt .subject {color: #383B44; font-size: 3.2rem; font-weight: 700; line-height: 5.6rem;}
.mission_card_box .mission_card_one .lecture_title .lecture_txt .teacher {color: #383B44; font-size: 2.8rem; font-weight: 600; line-height: 3.6rem; letter-spacing: -0.48px;}
.mission_card_box .mission_card_one .lecture_title .status {border-radius: 2.6rem; opacity: 0.3; background-color: #7B7F8F; color: #fff; font-size: 3.2rem; font-weight: 500; line-height: 5.6rem; text-align: center; width: 15.8rem; height: 5.2rem;}

.speaking_box {margin-top: 5.2rem;}
.speaking_box .speaking_txt {margin-bottom: 5.2rem; border-top: 1px solid rgba(56, 59, 68, 0.3); padding-top: 5.2rem;}
.speaking_box .speaking_txt p {color: #383B44; font-size: 3.2rem; font-weight: 500; line-height: 5.6rem; letter-spacing: -0.64px; text-align: center;}
/*.select_group {display: flex; align-items: center; column-gap: 3.2rem; justify-content: center;}
.select_group .sel_wrap {margin-top: 0; width: 33%;}*/
.select_group {display: flex; align-items: center; column-gap: 3.2rem; justify-content: center;}
.select_group .sel_wrap {margin-top: 0; width: 50%;}

.lecture_group {display: flex; flex-direction: column; margin-top: 5rem; row-gap: 5rem; width: 100%;}
.lecture_group .lecture_one {padding: 2rem 3rem;}
.lecture_group .lecture_one .lecture_info {display: flex; flex-direction: column; row-gap: 1.2rem; padding-bottom: 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid rgba(123, 127, 143, 0.5);}
.lecture_group .lecture_one .lecture_info .title {font-size: 2.4rem; color: #383B44; opacity: 0.5; font-weight: 500; line-height: 3.6rem;}
.lecture_group .lecture_one .lecture_info .subject {font-size: 3.2rem; color: #00C2FF; font-weight: 700; line-height: 5.6rem;}
.lecture_group .lecture_one .lecture_progress {display: flex; align-items: center; column-gap: 2rem;}
.lecture_group .lecture_one .lecture_progress .progress_bar {width: 66rem; position: relative;}
.lecture_group .lecture_one .lecture_progress .progress_bar .bar_bg {width: 100%; height: 1rem; background-color: #222;}
.lecture_group .lecture_one .lecture_progress .progress_bar .bar_status {width: 0%; height: 1rem; background-color: #00C2FF; position: absolute; top: 0; left: 0; z-index: 1;}
.lecture_group .lecture_one .lecture_progress .play {width: 6.8rem; height: 6.8rem; background-color: transparent;}
.lecture_group .lecture_one .lecture_progress .play img {width: 100%; height: 100%; object-fit: contain;}
.lecture_group .lecture_one .lecture_progress .lecture_time {display: flex; align-items: center; margin-right: 1rem;}
.lecture_group .lecture_one .lecture_progress .lecture_time span {color: #222; font-size: 2.4rem; font-weight: 500; line-height: 3.6rem;}
.lecture_group .lecture_one .lecture_progress .lecture_time .total {position: relative; margin-left: 0.6rem; padding-left: 1.4rem;}
.lecture_group .lecture_one .lecture_progress .lecture_time .total:before {content: '/'; position: absolute; left: 0;}
.lecture_group .lecture_one .lecture_progress .vol {width: 6.8rem; height: 6.8rem; background-color: transparent;}
.lecture_group .lecture_one .lecture_progress .vol img {width: 100%; height: 100%; object-fit: contain;}

.popup.management .tit {display: flex; align-items: center; justify-content: center;}
.popup.management .tit.keywords {color: #00C2FF;}
.popup.management .tit figure {width: 6.8rem; height: 6.8rem;}
.popup.management .tit figure img {width: 100%; height: 100%; object-fit: contain;}
.popup.management div.desc {display: flex; align-items: center; justify-content: center;}
.popup.management .hints {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: fit-content;}
.popup.management .hints li {font-size: 3.2rem; font-weight: 500; line-height: 5.6rem; letter-spacing: -0.64px; position: relative; color: #383B44; padding-left: 2rem;}
.popup.management .hints li:before {content: ''; border-radius: 100%; width: 0.8rem; height: 0.8rem; background-color: #383B44; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}


@media screen and (max-width: 768px){
	.subscription_wrap h2.title.management {display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 20px;}
	.profile_box {position: relative; column-gap: 5px; top: 0%; left: 0%; transform: translateX(0%); padding-top: 20px;}
	.profile_box figure {width: 24px; height: 24px;}
	.profile_box span {font-size: 12px; line-height: 15px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}

	.management_tab {gap: 8px; margin-top: 0;}
	.management_tab li a {font-size: 14px; line-height: 16px; padding-bottom: 7px; border-bottom: 3px solid #7B7F8F;}
	.management_tab li a.active {border-bottom: 3px solid #00C2FF;}

	.calendar_box {margin-top: 10px; padding-bottom: 26px; border-bottom: 0.283px solid #B6C9CF;}
	.calendar_box .btn_calendar figure {width: 24px; height: 24px;}
	.calendar_box .month_box {column-gap: 38px;}
	.calendar_box .month_box a figure {width: 24px; height: 24px;}
	.calendar_box .month_box span {font-size: 14px; line-height: 15px;}

	.mission_sub_box {margin-top: 25px;}
	.mission_sub_box .title {font-size: 14px; line-height: 15px;}
	.mission_status_box {column-gap: 30px; padding: 11px 15px; border-radius: 4px;}
	.mission_status_box.empty {padding: 20px;}
	.mission_status_box.empty p {font-size: 14px; line-height: 15px; letter-spacing: -0.28px;}
	.mission_status_box.no_plan {padding: 15px;}
	.mission_status_box.no_plan figure {width: 24px; height: 24px;}
	.mission_status_box.no_plan p {font-size: 14px; line-height: 140%; letter-spacing: -0.28px; margin-top: 13px;}
	.mission_status_box .mission_txt {column-gap: 12px;}
	.mission_status_box .mission_txt figure {width: 36px; height: 36px; padding: 0.2rem;}
	.mission_status_box .mission_txt.unit figure {padding: 4px 3px;}
	.mission_status_box .mission_txt p {font-size: 14px; line-height: 15px; letter-spacing: -0.28px;}

	.mission_sub_box {row-gap: 7px;}
	.mission_card_box {row-gap: 17px;}
	.mission_card_box .mission_card_one {border-radius: 4px;}
	.mission_card_box .mission_card_one .lecture .category {top: 10px; right: 10px; /*width: 56px;*/ padding: 0px 10px; height: 18px; font-size: 12px; line-height: 18px;}
	.mission_card_box .mission_card_one .lecture_title {padding: 11px;}
	.mission_card_box .mission_card_one .lecture_title .lecture_txt .subject {font-size: 12px; line-height: 15px;}
	.mission_card_box .mission_card_one .lecture_title .lecture_txt .teacher {font-size: 8px; line-height: 10px; letter-spacing: -0.16px;}
	.mission_card_box .mission_card_one .lecture_title .status {width: 56px; height: 18px; font-size: 12px; line-height: 16px;}

	.speaking_box.mobile {margin-top: 25px;}
	.speaking_box .speaking_txt {margin-bottom: 17px; padding-top: 17px;}
	.speaking_box .speaking_txt p {font-size: 14px; line-height: 25px;}
	.select_group {flex-direction: column; row-gap: 20px;}
	.select_group .sel_wrap {width: 100%;}

	.popup.management .tit {font-size: 16px; line-height: 28px;}
	.popup.management .tit figure {width: 24px; height: 24px;}
	.popup.management .desc {font-size: 12px; line-height: 18px;}
	.popup.management .cs_btn span {font-size: 16px;}
	.popup.management .hints li {font-size: 16px; line-height: 26px;}
	.popup.management .hints li:before {width: 6px; height: 6px;}

	.lecture_group {margin-top: 5px; row-gap: 20px;}
	.lecture_group .lecture_one {background-color: #fff; border-radius: 10px; padding: 18px 14px;}
	.lecture_group .lecture_one .lecture_info {padding-bottom: 12px; margin-bottom: 8px; row-gap: 4px;}
	.lecture_group .lecture_one .lecture_info .title {font-size: 15px; line-height: 18px;}
	.lecture_group .lecture_one .lecture_info .subject {font-size: 16px; line-height: 20px;}
	.lecture_group .lecture_one .lecture_progress {column-gap: 8px; flex-wrap: wrap; justify-content: center;}
	.lecture_group .lecture_one .lecture_progress .progress_bar {width: 78%;}
	.lecture_group .lecture_one .lecture_progress .lecture_time {order: 4;}
	.lecture_group .lecture_one .lecture_progress .lecture_time span {font-size: 14px; line-height: 20px;}
	.lecture_group .lecture_one .lecture_progress .progress_bar .bar_bg {height: 8px;}
	.lecture_group .lecture_one .lecture_progress .progress_bar .bar_status {height: 8px;}
	.lecture_group .lecture_one .lecture_progress .play {width: 24px; height: 24px;}
	.lecture_group .lecture_one .lecture_progress .vol {width: 24px; height: 24px;}
}

/* ============================== [ 학습 관리 - 달력 ] ========================================================================================== */
.bg {background-color: rgba(0, 0, 0, 0.49); display: none; width: 100%; height: 100%; z-index: 100; position: fixed; top: 0; left: 0;}
.calendar_popup {position: absolute; top: 10rem; left: 50%; transform: translateX(-50%); z-index: 1000; background-color: #fff; max-width: 114rem; width: 100%;}
.close {background-color: transparent; position: absolute; top: 2.4rem; right: 2.4rem;}
.close figure {width: 6rem; height: 6rem;}
.close figure img {width: 100%; height: 100%; object-fit: contain;}
.calendar {margin-top: 23rem;}

@media screen and (max-width: 768px){
	.calendar_popup {top: 70px;}
	.calendar {margin-top: 60px;}
	.close {top: 8px; right: 8px;}
	.close figure {width: 24px; height: 24px;}
}

.new_icon {
  width: 115px;
}

/* ============================== [ 쿠폰함 추가 added by Brian 2025. 07. 03. ] ========================================================================================== */
.coupon_download {
  background: #00C2FF;
  margin: 0 auto;
  color: #FFF;
  vertical-align: middle;
  width: 60%;
  padding-top: 3.5%;
  padding-bottom: 3.5%;
  border-radius: 200px;
  font-weight: 700;
  font-size: 28px;
  padding-left: 15%;
  display: inline-flex;
}

.coupon_download img {
  margin-left: 10px;
  width: 35px;
}

@media screen and (max-width: 768px) {
  .new_icon {
    width: 57px;
  }

  .coupon_download {
    padding-left: 13%;
    font-size: 16px;
  }

  .coupon_download img {
    margin-left: 5px;
    width: 16px;
    height: 18px;
  }
}