@charset "utf-8";

/* 컬러 변수 설정 */
:root {
    /* 백그라운드 */
    --back_main : #1D1D1D;
    --back_header : #141414;
    --back_point : #2E333C;

    /* 메인컬러 */
    --main_color : #504BFF;
    --main_color2 : #567fd3;
    --sub_color1 : #7E36FF;
    --sub_color2 : #9662D8;
    --sub_red : #d44646;

    /* 보더컬러 */
    --bord_main : #9FA4A8;
    --bord_sub : #474C52;

    /* 폰트컬러 */
    --font_main : #FFFFFF;
    --font_sub1 : #EAEBED;
    --font_sub2 : #9FA4AB;
    --font_dis : #666666;

    /* 블랙컬러 */
    --black_main : #333;
    --black_dim : rgba(0, 0, 0, 0.7);

    /* 그라데이션컬러 (프로그래스바) */
    --grad_color : linear-gradient(90deg, rgb(176, 64, 255) 0%, rgb(176, 64, 255) 90%, rgb(248, 192, 255) 100%);
}

/* 폰트 */
@font-face {
	font-family: "Spoqa Han Sans Neo";
	font-weight: 700;
	src: url("../font/SpoqaHanSansNeo-Bold.woff") format("woff");
}
@font-face {
	font-family: "Spoqa Han Sans Neo";
	font-weight: 500;
	src: url("../font/SpoqaHanSansNeo-Medium.woff") format("woff");
}
@font-face {
	font-family: "Spoqa Han Sans Neo";
	font-weight: 400;
	src: url("../font/SpoqaHanSansNeo-Regular.woff") format("woff");
}
@font-face {
	font-family: "Spoqa Han Sans Neo";
	font-weight: 300;
	src: url("../font/SpoqaHanSansNeo-Light.woff") format("woff");
}

/* 스타일 초기화 */
body,ol,ul,li,a,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,fieldset,legend,form{margin:0px; padding:0px;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}
ol,ul,li{list-style:none;}
a,a:hover,a:active,a:visited,a:focus{color:inherit;text-decoration:none;}
body{overflow-x:hidden;font-size:0.75em;color:var(--font_main);font-family: 'pretendard', 'Spoqa Han Sans Neo', 'Nanum Gothic', '나눔 고딕', 'NanumGothic', 'Dotum', '돋움', Arial, sans-serif;letter-spacing: -0.5px}
header,section,footer{display:block;}
input{line-height:normal;/*;-webkit-appearance:none;*/color: var(--font_main);font-size: 1rem;border: none;outline: none;margin-bottom: 1rem;background-color: transparent;font-size: 1rem;}
/* 인풋자동완성 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--font_main);
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
	-webkit-text-fill-color: var(--font_main);
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}
address{font-style:normal}
fieldset{border:0}
caption,legend{display:block;position:absolute;left:-9999px;font-size:0}
button{border:0;padding:0;margin:0;}
button,a{outline:none}
input, select, label, img, input, select, textarea, button, a, pre {
	font-family:'pretendard', 'Spoqa Han Sans Neo', 'Nanum Gothic', '나눔 고딕', 'NanumGothic', 'Dotum', '돋움', Arial, sans-serif;
}

/*레이아웃 스타일*/
html {height: 100%;color:var(--font_main);}
body{position: relative;height: 100%;background:var(--back_main);}
#bodyWrap{background-color:var(--back_main);overflow-y:auto;-webkit-overflow-scrolling: touch; padding-top:0px; 
  margin-top: 49px; height:100%; 
  overflow: scroll !important;
  /* 스크롤바 스타일링 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--bord_sub) transparent; /* Firefox */
}
#bodyWrap.home{height: calc(100% - 49px);}
/* WebKit 기반 브라우저 (Chrome, Safari, Edge) 스크롤바 스타일링 */
#bodyWrap::-webkit-scrollbar {
  width: 4px; /* 세로 스크롤바 너비 */
  height: 4px; /* 가로 스크롤바 높이 */
}
#bodyWrap.main.home{background-color:var(--back_main);}
#bodyWrap.not_over{overflow-y:visible; overflow-x: visible;}

header.sub ~ #bodyWrap { height: calc(100% - 49px) }

#wrap{position:relative;background-color:var(--back_header);height:100%; 
  overflow: hidden;}

.fixed_wrap{height:100%;overflow-y:auto;margin-top:-5px;}

footer{position:absolute;left:0;bottom:0;width:100%;height:80px;line-height:80px;text-align:center;background-color:var(--back_header);color:var(--font_main)}


/* 공통 스타일 */
*{box-sizing:border-box;}
 *:not(input,textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:focus:not(input) {
  outline: 0;
  /*border:none;*/
  /*color: rgba(0, 0, 0, 0);*/
}

.clear{zoom:1}
.clear:after{clear:both;content:"";display:block;}
.f_l{float:left}
.f_r{float:right}
.hide_text{text-indent:-9999px;white-space:nowrap;overflow:hidden}
.h3_title{font-size:20px;font-weight:700}
.h2_title{font-size:1.833em;font-weight:700}
.hide{display:none !important;}

.pb_60{padding-bottom:60px}
.pb_130{padding-bottom:130px}


/*font 공통 스타일*/
.font_v{font-family:verdana,Arial;}
.nodata{color:var(--font_sub2);font-weight:400;font-size:12px;}

/*color 공통 스타일*/
.red_font{color:var(--sub_red);}
.blue_font{color:var(--main_color)}
.green_font{color:var(--main_color);}
.red{background-color:var(--sub_red)}
.green{background-color:var(--main_color)}
.black{background-color:var(--black_main)}
.blue{background-color:var(--main_color);}
.gray{background-color:var(--bord_sub)}
.white{background-color:var(--font_main)}

/*공통 버튼 (기본 파란색)*/
.btn_ui{display:inline-block;min-width: 90px;height:35px;line-height:33px;padding:0 15px;border-radius:2px;font-weight:700;text-align:center;font-size:1.25em;color:var(--font_main);background-color:var(--main_color);border: none;outline: none;}
a.btn_ui{color:var(--font_main) !important;}
.btn_ui.auth_btn.disable_btn{cursor: default;background-color: var(--font_dis);}
.btn_ui.block{width:100%;height:45px;line-height:43px;font-size:1.5em;}
.btn_ui.bg_blue{background-color:var(--sub_color1);border-color:var(--sub_color1);}
.btn_ui.bg_red{background-color:var(--main_color);border-color:var(--main_color);}
.btn_ui.bg_black{background-color:var(--back_point);border-color:var(--back_point);}
/*큰 하얀색 버튼 (120초모의고사,무한단어)*/
.btn_ui.bg_white{width:100%;max-width:260px;height:70px;line-height:67px;color:var(--font_main);background:var(--main_color);font-size: 3em;letter-spacing: -2px;border-radius: 10px;}

/*alert 메세지*/
.alert{display:none;position:absolute;color:var(--sub_red);font-size:1.1em}

/*인풋타입*/
.form_input{width:100%;padding:13px 10px;
    background: var(--back_main);
    border: 1px solid var(--bord_sub);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: none !important;
    }

/* ios에서 inner shadow 나오는 스타일 없애기 */
textarea, input[type="text"] {
	-webkit-appearance: none;
    resize: none;
}

.input_check{display:inline-block;position:relative;height:28px;padding-left:36px;line-height:28px;font-size:1.167em;color:var(--font_dis);}
.input_check .icon{width:28px;height:28px;position:absolute;left:0;top:0;background:url(../image/common/check_bg.svg) no-repeat;background-size: 28px 56px;}
.input_check input{display:block;position:absolute;left:-9999px}
.input_check input:checked+.icon{background-position:0 -28px}

/* Touch-friendly auto-login checkbox for mobile */
.login_wrap .input_check {
    min-height: 44px; /* Increase touch target height */
    padding-top: 8px; /* Center the visual elements */
    padding-bottom: 8px;
    cursor: pointer;
}

.login_wrap .input_check .icon {
    top: 8px; /* Adjust icon position to center */
}

/* Ensure the entire label area is clickable on mobile */
@media (max-width: 768px) {
    .login_wrap .input_check {
        min-height: 48px; /* Even larger for mobile */
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .login_wrap .input_check .icon {
        top: 10px;
    }
}

.select_ui{display:inline-block;position:relative;width:100%}
.select_ui select{width:100%;padding:12px 0 12px 10px;font-size:1.167em;border:1px solid var(--bord_sub);background-color:var(--back_main);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  line-height:36px;text-indent:0;
    }
/*.select_ui .icon{position:absolute;right:1px;top:50%;width:32px;height:25px;margin-top:-12.5px;background:#fff url(../image/common/select_arrow.jpg) no-repeat}*/

.loader_bg{z-index: 9990;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;padding-top:35%;text-align:center;background:url(../image/common/bg_black_50.png)}
.loader_bg img{display:inline-block;}

.fixed_bottom{z-index: 10;position:fixed;bottom:0;left:0;min-height:56px;width:100%;background-color: var(--back_header);}
.fixed_bottom.pd310{padding:10px;}

/*상 to the 중 to the 하*/
.level_icon{position:absolute;top:50%;margin-top:-12px;display:block;width:25px;height:25px;line-height:25px;border-radius:12px;font-size:1.167em;font-weight:700;color:var(--font_main);text-align:center;}
.level_icon.top{background-color:var(--main_color)}
.level_icon.mid{background-color:var(--main_color2)}
.level_icon.lower{background-color:var(--font_dis)}

/*페이징*/
.paging{width:100%;text-align:center;padding:20px 0;}
.paging ul{
  display: inline-flex;              
  align-items: center;
  gap: 20px;                          
  margin: 0 auto;
}

.paging ul:has(li:nth-child(n+6)) { 
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  margin: 0 auto; gap:0;
  max-width: 350px;}
.paging ul:has(li:nth-child(n+8)) { 
  max-width: 400px;}
.paging ul:has(li:nth-child(n+10)) { 
  max-width: 450px;}
.paging ul:has(li:nth-child(n+12)) { 
  max-width: 500px;}
.paging ul li{ display: inline-flex; }

.paging ul li a{
  font-size: 15px;
  display: inline-flex;
  justify-content: center; align-items: center;
  width: 23px; height: 23px;
  background-color: transparent;
  color: var(--font_main); font-weight: 700;
  text-align: center; border-radius: 50%;
}
.paging ul li.active a{background-color:var(--main_color);}
.paging > ul > li > a.point_p_first,
.paging > ul > li > a.point_p_end{background:url(../image/common/page_arrow_end.png) no-repeat 48% 5px;}
.paging > ul > li > a.point_p_next,
.paging > ul > li > a.point_p_prev{background:url(../image/common/page_arrow.png) no-repeat 48% 5px;}
.paging > ul > li > a.point_p_end,
.paging > ul > li > a.point_p_next{background-position:50% -33px;}

/*메뉴 뉴아이콘추가*/
header .gnb_div .gnb_wrap .gnb>li{position:relative}
/* header .gnb_div .gnb_wrap .gnb>li:nth-child(2) .new01_icon{width:45px; height:45px; position:absolute; top:3px; left:3px; z-index:9999;background:url(../image/contents/new_icon.png) no-repeat center; background-size:cover;} */
header .gnb_div .gnb_wrap .gnb>li ul li{position:relative}
/* header .gnb_div .gnb_wrap .gnb>li:nth-child(2) ul li:first-child a .sub_new_icon{width:25px; height:25px; position:absolute; top:5px; left:23px; z-index:9999;background:url(../image/contents/new_icon.png) no-repeat center; background-size:cover;} */
/* header .gnb_div .gnb_wrap .gnb>li:nth-child(2) ul li:last-child a .sub_new_icon{width:25px; height:25px; position:absolute; top:5px; left:23px; z-index:9999;background:url(../image/contents/new_icon.png) no-repeat center; background-size:cover;} */
/* header .gnb_div .gnb_wrap .gnb>li:nth-child(7) ul li:nth-child(2) a .sub_new_icon{width:25px; height:25px; position:absolute; top:5px; left:23px; z-index:9999;background:url(../image/contents/new_icon.png) no-repeat center; background-size:cover;} */

/*header*/
header{position:absolute;left:0;top:0;width:100%;height:49px;z-index:20;}
header.sub{background-color:var(--back_header);}
header.main{background-color:var(--back_header);}
header.main.home{background:var(--back_header);}

header.sub .sub_title{font-size:1.333em;font-weight:700;line-height:49px;text-align:center;}

header.sub #back{display:block;position:absolute;left:0px;top:0px;width:50px;height:49px;background:url(../image/common/back_arr.svg) no-repeat 50%;background-size:27.5px 24px;}

header.main .logo{width:35vw;max-width:160px;min-width:130px;height:100%;line-height:49px;margin:0 auto;display: block;}
header.main .logo img{width:100%; height:auto;vertical-align: middle}
.main .header_title #back {display: none;}

header .menu{display:block;position:absolute;top:0px;right:0px;width:50px;height:49px;background:url(../image/common/menu_open_icon.svg) no-repeat 50%;background-size:27.5px 24px;}

/* 알림 버튼 */
header .notice{background:url(../image/common/icon_bell.svg) no-repeat 50%;background-size:24px;
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50px;
  height: 49px;
  ;}
/* alert 클래스로 알림 표시 */
header .notice .alert{
  position: absolute;
  top: 30%;
  right: 20%;
  aspect-ratio: 1 / 1;
  width: 20%;
  height: auto;
  background-color: var(--sub_red);
  border-radius: 50%;
  box-shadow: -1px 1px var(--font_main);
  display: block;
}

header .gnb_div{position:absolute;right:0;top:0;width:0;background:url(../image/common/menu_back_bg.png); z-index:9999;opacity:0;-webkit-transition:opacity 0.3s,width 0s 0.3s;transition:opacity 0.3s,width 0s 0.3s;overflow:hidden}
header .gnb_div.on{width:100%;opacity:1;transition:opacity 0.3s,width 0s 0s;}
header .gnb_div .gnb_wrap{position:relative;float:right;right:0;width:300px;-webkit-transform:translateX(300px);transform:translateX(300px);-webkit-transition:transform 0.3s;transition:transform 0.3s}
header .gnb_div .gnb_wrap.on{border-radius: 20px 0 0 0px; overflow-x: hidden; -webkit-transform:translateX(0px);transform:translateX(0px)}
header .gnb_div .gnb_wrap .top{height:49px;line-height:49px;background-color:var(--back_header);}
header .user{padding-left:50px;font-size:1.167em;color:var(--font_main);font-weight:700;background:var(--back_header) url(../image/common/user.svg) no-repeat 17px center;background-size:auto 45%}
header .top-login{
  width: 50px;
  height: 50px;
  translate: -100%;
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;}
  header .top-login svg{
    width: 100%;
    height: 100%;
    scale: 60%;
    stroke-width: 3;
  }
  @media screen and (min-width: 801px) {
    header .user-menu-toggle{
      translate: -320px !important;
    }
    header .top-login{
      display: none;
    } 
    header.sub .sub_title>p{
      width: calc(100% - 300px);
    }
  }
header .user-menu-toggle {display:block;position:absolute;top:0px;right:0px;width:50px;height:49px;}
header .notification::after {
  content: "";
  font-size: 16px;
  line-height: 115%;
  text-align: center;
  font-weight: 500;
  position: absolute;
  width: 9PX;
  height: 9PX;
  background:  rgb(255 80 80);
  border-radius: 100%;
  right: 7px;
  top: 10px;
}

.user-menu-list a.notification::after {
  left: 50%;
  font-weight: 400;
  width: 16px;
  height: 16px;
  top: 25%;
  background: rgb(255 80 80);
  border-radius: 50%;
  line-height: 1.4;
}

.user-menu-list a.notification::before {
  content: attr(data-count);
  color: white;
  position: absolute;
  width: 12px;
  text-align: center;
  left: 50%;
  font-size: 10px;
  transform: translate(2px, -3px);
  display: inline-block;
  z-index: 10;
}

/* 안읽은 메시지가 0개일 때 배지 숨김 */
.user-menu-list a.notification[data-count="0"]::after {
  display: none;
}

/* 모바일 메뉴바 상단 (로그아웃시) */
header .gnb_div .gnb_wrap .top.login{
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  padding-left:10px;
  line-height: 130%;
  background: linear-gradient(135deg, #504BFF 0%, #7E36FF 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}
/* 로그인, 회원가입 버튼 */
header .gnb_div .gnb_wrap .top.login a{
  display: flex;
  gap: 5px;
  line-height: 1;
  width: 110px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 16px;
  border-radius: 8px;
  padding: 8px;
  text-decoration: none;
  font-weight: 400;
  transition: all 0.3s ease;
  justify-content: center;
  align-items: center;
}
/* 버튼 호버효과 */
header .gnb_div .gnb_wrap .top.login a:hover{
  background-color: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.6);
}

header .gnb_div .gnb_wrap .top.login a svg{
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

/* 모바일 메뉴바 상단 (로그인시) */
header .gnb_div .gnb_wrap .top.user{
display: flex;
line-height: 130%;
padding: 15px 20px;
background: linear-gradient(135deg, #504BFF 0%, #7E36FF 100%);
color: #ffffff;
font-size: 16px;
font-weight: 500;
}
/* 메뉴바 닫기 버튼 */
header .gnb_div .gnb_wrap .exit{
  position:absolute;
  right:0;
  top:0;
  background:url(../image/common/x.svg) no-repeat center;
  background-size:17px;
  z-index: 10;
  transition: all 0.3s ease;
  width:49px;
  height:49px;
  background-color: rgba(255,255,255,0.1);
  border-radius: 0 0 0 8px;
}
header .gnb_div .gnb_wrap.on .exit:hover{
  background-color: rgba(255,255,255,0.2);
}
/* 메뉴바 컨테이너 */
header .gnb_div .gnb_wrap .overflow_wrap{overflow-y:auto;background-color:#f8f9fa;-webkit-overflow-scrolling:touch;transition: all 0.3s;}
header .gnb_div .gnb_wrap .overflow_wrap .character_speech{
  border-radius: 20px;
  background: linear-gradient(0deg, #504bff26, transparent 50%);
  transition: transform 0.3s;
  will-change: background-image;
  position: relative;
  opacity: 0;
 }
 header .gnb_div .gnb_wrap .overflow_wrap .character_speech.second{
  opacity: 0;
  background: transparent;
 }
 header .gnb_div .gnb_wrap .overflow_wrap .character_speech.second::before{
  opacity: 0;
  background: transparent;
 }
 header .gnb_div .gnb_wrap .overflow_wrap .character_speech.second::after{
  opacity: 0;
 }

@keyframes change_background {
  0% {
    background: url(../image/common/character_reo_m.png) no-repeat 200% -25% / 109%, linear-gradient(0deg, #504bff26, transparent 50%);
  }
  45% {
    background: url(../image/common/character_reo_m.png) no-repeat 200% -25% / 109%, linear-gradient(0deg, #504bff26, transparent 50%);
  }
  55% {
    background: url(../image/common/character_wooni_m.png) no-repeat 200% -25% / 109%, linear-gradient(0deg, #504bff26, transparent 50%);
  }
  100% {
    background: url(../image/common/character_wooni_m.png) no-repeat 200% -25% / 109%, linear-gradient(0deg, #504bff26, transparent 50%);
  }
}
/* 네비게이션이 닫힐 때 애니메이션 리셋 */
.gnb_div:not(.on) .character_speech {
  opacity: 0 !important;
  animation: none !important;
  background: linear-gradient(0deg, #504bff26, transparent 50%) !important;
}
.gnb_div:not(.on) .character_speech.second {
  opacity: 0 !important;
  animation: none !important;
  background: transparent !important;
}
.gnb_div:not(.on) .character_speech.second::before {
  opacity: 0 !important;
  animation: none !important;
  background: transparent !important;
}
.gnb_div:not(.on) .character_speech.second::after {
  opacity: 0 !important;
  animation: none !important;
} 
.gnb_div.on .character_speech {
  animation: fade_in_character 0.3s 0.3s ease-in-out forwards, change_background 3s 2s linear infinite alternate;
}
 .gnb_div.on .character_speech.second {
  animation: fade_in_second 0.3s 0.3s ease-in-out forwards, change_speech_color 3s 2s linear infinite alternate;
  position: relative;
}
.gnb_div.on .character_speech.second::before {
  position: absolute;
  bottom: 10px;
  right: 0;
  padding: 10px;
  border-radius: 100px;
  content: "난 레오!";
  font-size: 16px;
  font-weight: 300;
  color: #ffffff;
  text-align: center;
  line-height: 1.4;
  animation: fade_in_text 0.3s 0.3s ease-in-out forwards, change_text_mobile 3s 2s linear infinite alternate, change_speech_color 3s 2s linear infinite alternate;
}
.gnb_div.on .character_speech.second::after {
  position: absolute;
  content: "";
  width: 0px;
  border-width: 15px 0px 15px 19px;
  border-color: transparent transparent transparent var(--sub_color1);
  border-style: solid;
  right: 56px;
  bottom: 27px;
  top: auto;
  rotate: 90deg;
  border-color: transparent transparent transparent black;
  animation: fade_in_tail 0.3s 0.3s ease-in-out forwards, change_speech_tail 3s 2s linear infinite alternate;
}
@keyframes change_text_mobile {
  0% {
    content: "난 레오!";
  }
  45% {
    content: "난 레오!";
  }
  55% {
    content: "난 우니!";
  }
  100% {
    content: "난 우니!";
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade_in_character {
  0% {
    opacity: 0;
    background: linear-gradient(0deg, #504bff26, transparent 50%);
  }
  100% {
    opacity: 1;
    background: url(../image/common/character_reo_m.png) no-repeat 200% -25% / 109%, linear-gradient(0deg, #504bff26, transparent 50%);
  }
}

@keyframes fade_in_second {
  0% {
    opacity: 0;
    background: transparent;
  }
  100% {
    opacity: 1;
    background: black;
  }
}

@keyframes change_speech_color {
  0% {
    background: black;
  }
  45% {
    background: black;
  }
  55% {
    background: #5e3300;
  }
  100% {
    background: #5e3300;
  }
}
@keyframes change_speech_tail {
  0% {
    border-color: transparent transparent transparent black;
  }
  45% {
    border-color: transparent transparent transparent black;
  }
  55% {
    border-color: transparent transparent transparent #5e3300;
  }
  100% {
    border-color: transparent transparent transparent #5e3300;
  }
}

@keyframes fade_in_tail {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade_in_text {
  0% {
    opacity: 0;
    background: transparent;
  }
  100% {
    opacity: 1;
    background: black;
  }
}

 header .gnb_div.on .gnb_wrap .overflow_wrap .character_speech a{
  display: block;
  position: absolute;
  right: 4px;
  width: fit-content;
  padding: 10px 15px;
  background: var(--sub_color1);
  border-radius: 100px;
  aspect-ratio: 2.6 / 1;
  transition: all 0.3s;
  animation: scale 0.6s ease-in-out infinite alternate;
  font-size: 0.9rem;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.03);
  }
 }

 header .gnb_div.on .gnb_wrap .overflow_wrap .character_speech a::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -15px;
  width: 15px;
  height: 12px;
  border-width: 0px 20px 15px 20px;
  border-color: transparent transparent transparent var(--sub_color1);
  border-style: solid;
}

header .gnb_div .gnb_wrap .overflow_wrap>.gnb{
padding: 10px;
}
/* 1차 메뉴 스타일 */
header .gnb_div .gnb_wrap .overflow_wrap>ul>li>a{
  
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:70px;
  padding:0 20px;
  border-bottom:1px solid rgba(0,0,0,0.05);
  background-color:#ffffff;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-radius: 10px;
}
header .gnb_div .gnb_wrap .overflow_wrap>ul>li.on>a{
  background: linear-gradient(265deg, #cbddffb5, transparent);
}

header .gnb_div .gnb_wrap .overflow_wrap>ul>li>a:hover{
  background-color:#f8f9fa;
  transform: translateX(2px); 
}

/* 대메뉴 아이콘 */
header .gnb_div .gnb_wrap .overflow_wrap>ul>li>a i{
position: relative;
left: 0;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
margin-right: 15px;
border-radius: 15px 8px;
opacity: 0.9;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
background-size: 55%;
background-position: center;
background-repeat: no-repeat;
}

/* Lucide SVG 아이콘 스타일 */
header .gnb_div .gnb_wrap .overflow_wrap>ul>li>a svg{
width: 28px;
height: 28px;
color: white;
stroke-width: 1.7;
stroke: white !important;
}

/* 각 메뉴별 색상 변수 정의 - li 요소에 정의하여 하위 요소들이 상속 가능 */
/* 학습하기 */
header .gnb_div .gnb_wrap .gnb>li.menu-study {
  --menu-color: rgb(176, 64, 255);
}
header .gnb_div .gnb_wrap .gnb>li.menu-study>a i{
  background-color: var(--menu-color);
}

/* 멤버십 정보 */
header .gnb_div .gnb_wrap .gnb>li.menu-membership {
  --menu-color:rgb(29 114 255);
}
header .gnb_div .gnb_wrap .gnb>li.menu-membership>a i{
  
  background-color:var(--menu-color);
  background-size: 70%;
  background-position: center 35%;
  background-image: url(../image/common/membership.png);
}

header .gnb_div .gnb_wrap .gnb>li.menu-membership>a svg {
display: none;
}

/* 모의고사 */
header .gnb_div .gnb_wrap .gnb>li.menu-mock {
  --menu-color: #504bff;
}
header .gnb_div .gnb_wrap .gnb>li.menu-mock>a i{
  background-color: var(--menu-color);
}

/* 시험&평가 */
header .gnb_div .gnb_wrap .gnb>li.menu-exam {
  --menu-color: rgb(122, 90, 248);
}
header .gnb_div .gnb_wrap .gnb>li.menu-exam>a i{
  background-color: var(--menu-color);
}

/* 플레이존 */
header .gnb_div .gnb_wrap .gnb>li.menu-playzone {
  --menu-color: rgb(255, 107, 107);
}
header .gnb_div .gnb_wrap .gnb>li.menu-playzone>a i{
  background-color: var(--menu-color);
}

/* 스터디포인트 */
header .gnb_div .gnb_wrap .gnb>li.menu-studypoint {
  --menu-color: rgb(52, 199, 89);
}
header .gnb_div .gnb_wrap .gnb>li.menu-studypoint>a i{
  background-color: var(--menu-color);
}

/* 이벤트 */
header .gnb_div .gnb_wrap .gnb>li.menu-event {
  --menu-color: rgb(255, 149, 0);
}
header .gnb_div .gnb_wrap .gnb>li.menu-event>a i{
  background-color: var(--menu-color);
}

/* 커뮤니티 */
header .gnb_div .gnb_wrap .gnb>li.menu-community {
  --menu-color: #00c1d9;
}
header .gnb_div .gnb_wrap .gnb>li.menu-community>a i{
  background-color: var(--menu-color);
}

/* 로그인 */
header .gnb_div .gnb_wrap .gnb>li.menu-login {
  --menu-color: rgb(102, 126, 234);
}
header .gnb_div .gnb_wrap .gnb>li.menu-login>a i{
  background-color: var(--menu-color);
}

/* 화살표 아이콘 */
.gnb .icon-arrow-down {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url(../image/common/icon_arrowdown.svg) no-repeat center;
  background-size: contain;
  opacity: 0.4;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.gnb li.on .icon-arrow-down {
  transform: rotate(180deg);
}
/* 카드형 서브메뉴 컨테이너 */
header .gnb_div .gnb_wrap .gnb>li>ul{
  display:none;
  background-color:#ffffff;
  padding:20px 10px;
  margin:0;
}

header .gnb_div .gnb_wrap .gnb>li.on>ul{
  display:block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 카드 그리드 레이아웃 */
header .gnb_div .gnb_wrap .card-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  row-gap: 15px;
  margin-bottom: 10px;
}

/* 카드 스타일 */
header .gnb_div .gnb_wrap .menu-card{
display: flex;
flex-direction: column;
align-items: center;
padding: 15px 10px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
text-decoration: none;
color: #2c3e50;
font-weight: 400;
font-size: 14px;
text-align: center;
min-height: 90px;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
justify-content: start;
}

header .gnb_div .gnb_wrap .menu-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

header .gnb_div .gnb_wrap .menu-card .card-icon{
  width: 42px;
  height: 42px;
  margin-bottom: 8px;
  border-radius: 15px;
  box-shadow: 0px 2px 5px rgb(50 62 116 / 30%);
  opacity: 0.7;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 서브메뉴 카드 아이콘이 부모 대메뉴의 색상을 상속 */
header .gnb_div .gnb_wrap .gnb>li .menu-card .card-icon {
  background-color: var(--menu-color);
}

header .gnb_div .gnb_wrap .menu-card:hover .card-icon{
  opacity: 0.9;
}

/* 서브메뉴 카드 SVG 아이콘 스타일 */
header .gnb_div .gnb_wrap .menu-card .card-icon svg {
  width: 24px;
  height: 24px;
  color: white;
  stroke: white;
  stroke-width: 1.5;
}

/* 서브메뉴 아이콘 스타일 */
.card-icon svg{
  width: 70%;
  height: 100%;
  color: white;
  stroke-width: 1.5;
}

/* 더보기 버튼 */
header .gnb_div .gnb_wrap .more-button{
  display: block;
  width: 100%;
  padding: 15px;
  background: #504bff;
  color: #ffffff;
  text-align: center;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  margin-top: 10px;
  opacity: 0.9;
  transition: all 0.3s ease;
}

header .gnb_div .gnb_wrap .more-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 백 버튼 */
header .gnb_div .gnb_wrap .back-button{
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8f9fa;
  color: #6c757d;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

header .gnb_div .gnb_wrap .back-button:hover{
  background-color: #e9ecef;
  color: #495057;
}

header .gnb_div .gnb_wrap .back-button::before{
  content: "←";
  margin-right: 10px;
  font-size: 1.2em;
}

/* 카테고리 뱃지 스타일 */
header .gnb_div .gnb_wrap .category-badge {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 5px;
  padding: 4px 10px;
  background: #8884ff;
  color: var(--font_main);
  font-size: 14px;
  font-weight: 400;
  border-radius: 20px;
  text-align: center;
  position: relative;
  opacity: 0.9 !important;
  cursor: pointer;
}
header .gnb_div .gnb_wrap .category-badge.on{
  background: #504bff;
}

header .gnb_div .gnb_wrap .category-badge .icon-arrow-down{
  filter: invert(1) brightness(2);
  opacity: 1 !important;
  transform: rotate(0deg);
}

header .gnb_div .gnb_wrap .category-badge.on .icon-arrow-down{
  transform: rotate(180deg);
}

/* 기존 스타일 제거 */
header .gnb_div .gnb_wrap .gnb>li>ul>li>a{display:none;}
header .gnb_div .gnb_wrap .gnb>li>ul>li:first-child>a{display:none;}

/* 반응형 개선 */
@media (max-width: 480px) {
  header .gnb_div .gnb_wrap .overflow_wrap>ul>li>a{
      height: 65px;
      font-size: 15px;
  }
}


/* header .gnb_div .gnb_wrap .gnb>li#home>a i{background-position:-144px 100%}
header .gnb_div .gnb_wrap .gnb>li#id2>a i{background-position:-18px 100%}
header .gnb_div .gnb_wrap .gnb>li#id3>a i{background-position:-36px 100%}
header .gnb_div .gnb_wrap .gnb>li#id4>a i{background-position:-54px 100%}
header .gnb_div .gnb_wrap .gnb>li#id5>a i{background-position:-72px 100%}
header .gnb_div .gnb_wrap .gnb>li#id6>a i{background-position:-90px 100%}
header .gnb_div .gnb_wrap .gnb>li#id7>a i{background-position:-108px 100%}
header .gnb_div .gnb_wrap .gnb>li#id8>a i{background-position:-126px 100%} */

header .gnb_div .gnb_wrap .overflow_wrap>ul>li>a .on_off_btn{position:absolute;left:221px;top:50%;margin-top:-17px}

header .gnb_div .gnb_wrap .overflow_wrap .sns_div{padding:25px 0;background-color:var(--font_dis)}
header .gnb_div .gnb_wrap .overflow_wrap .sns_div ul{width:245px;margin:0 auto}
header .gnb_div .gnb_wrap .overflow_wrap .sns_div ul li{float:left;margin-left:15px}
header .gnb_div .gnb_wrap .overflow_wrap .sns_div ul li:first-child{margin-left:0}
header .gnb_div .gnb_wrap .overflow_wrap .sns_div ul li a{display:block;width:50px;height:50px;background:url(../image/common/sns.png) no-repeat;background-size:400% 100%}
header .gnb_div .gnb_wrap .overflow_wrap .sns_div ul li.li2 a{background-position:-50px 0}
header .gnb_div .gnb_wrap .overflow_wrap .sns_div ul li.li3 a{background-position:-100px 0}
header .gnb_div .gnb_wrap .overflow_wrap .sns_div ul li.li4 a{background-position:-150px 0}
header .gnb_div .gnb_wrap .overflow_wrap .clause {float: left;width: 100%;padding:20px; padding-bottom: 10px; margin: 0 auto;text-align: center;}
header .gnb_div .gnb_wrap .overflow_wrap .clause ul a {color: var(--font_sub2);font-size: 15px;font-family: Arial, Helvetica, sans-serif;display:inline-block;padding-right: 5px;}

/*쪽지함*/
/* header .gnb_div .gnb_wrap ul>li.msg>a i{position:absolute;left:16px;top:50%;display:inline-block;width:18px;height:18px;margin-top:-9px;background:url(../image/common/menu_icons.png) no-repeat -162px 100%;background-size:1000% 100%;} */
header .gnb_div .gnb_wrap ul>li.msg>a .new_icon{position:absolute;left:221px;top:50%;width:64px;height:34px;line-height:34px;margin-top:-17px;text-align:center;color:var(--font_main);letter-spacing:-1px;background:var(--main_color);background-size:contain;border-radius: 34px;}

/*온오프 버튼*/
.on_off_btn{position:relative;width:64px;height:34px;background:url(../image/common/off_bg.svg) no-repeat;background-size:contain}
.on_off_btn .on_bg{width:100%;height:100%;left:0;background:url(../image/common/on_bg.svg) no-repeat;opacity:0; transition: opacity 0.5s}
.on_off_btn .circle{width:32px;height:100%;left:31px;background:url(../image/common/onoff_circle.svg) no-repeat;transition: left 0.5s}
.on_off_btn .on_bg,.on_off_btn .circle{position:absolute;top:0;background-size:contain}
.on_off_btn.on .on_bg{opacity:1}
.on_off_btn.on .circle{left:2px}

/*===footer===*/

/*======================서브============================*/
/*공통*/
.inset_wrap{background-color:var(--back_main);padding:10px;border-top:1px solid var(--bord_sub);
  /* position:relative */
}
.inset_wrap.no_padder{padding:0;}
.inset_wrap.no_bt{border-top:0;}

/*================서브 탭메뉴======================*/
.sub_tab ul {display: flex;}
.sub_tab ul>li{float:left;width:50%;background-color:var(--bord_sub);border-bottom:1px solid var(--bord_main);color:var(--font_sub2);border-radius: 0.8rem 0.8rem 0 0;}
.sub_tab.wid3 ul>li{flex: 1;}
.sub_tab ul>li.active{border-color:var(--font_main);background-color: var(--main_color);}
.sub_tab ul>li>a{display:block;height:40px;line-height:40px;text-align:center;font-weight:700;}
.sub_tab ul>li.active>a{color:var(--font_main)}

/*=================board_default, collapse 공통스타일==========================*/
.collapse .group_title{padding-bottom:12px;font-size:14px;font-weight:700;color:var(--font_main);}
/*.collapse ul{margin-bottom:40px;}*/
.collapse ul>li{background-color:var(--back_point); margin-bottom:1rem;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;overflow: hidden;border: 1px solid var(--bord_sub);}
.collapse ul>li>.title,
.collapse ul>li>.togglebtn{display:inline-block;width:100%;padding:14px;padding-right: 35px;word-break:break-all;}
.collapse ul>li img {max-width:100%;width:100%}
.collapse ul>li.nodata{width:100%;padding:14px 20px;text-align:center;color:var(--font_sub1);}
.collapse ul>li>.cnt{display:none;position:relative;padding:10px 20px;line-height:21px;
  background-color: var(--font_main); color: var(--bord_sub); font-size: 0.9rem;}
.collapse ul>li>.cnt.p_10{padding:14px}
.collapse ul>li>.cnt.p_10 > p, .collapse ul>li>.cnt.p_10 strong{font-size: 1rem;font-weight: normal;}

.file_div{position:relative;;padding:5px 0;text-align:right}
.file_div .file_toggle span{color: var(--main_color2)}
.file_div.on ol{display:block;z-index: 999;}
.file_div ol{display:none;background-color:var(--font_main);position:absolute;top:31px;right:0;padding:5px 10px;border:1px solid var(--font_sub2);border-radius:5px}
.file_div ol li{line-height:23px;min-width:100px;text-align:left;}
.file_div ol li a{display:block;width:100%;max-width:200px;padding:0 !important;white-space: nowrap;overflow:hidden;text-overflow:ellipsis;}
.file_div ol li a:hover,.collapse ul>li>.cnt .file_div ol li a:focus{color:var(--main_color);text-decoration: underline}

.collapse ul>li>.cnt iframe{width:100%}
.collapse ul>li a{position:relative}
.collapse ul>li a .right_arw,
.collapse ul>li a .lock_arw{position:absolute;right:10px;top:50%;width:25px;height:25px;margin-top:-12px;background:url(../image/common/right_arw.svg) no-repeat;background-size:200% 100%}
.collapse ul>li.disabled a .right_arw,
.collapse ul>li a .lock_arw{background-position:-25px 0}
.collapse ul>li a .top_arw{position:absolute;right:10px;top:50%;width:25px;height:25px;margin-top:-12px;background:url(../image/common/toogle_arw.svg) no-repeat;background-size:200% 100%}
.collapse ul>li a.on .top_arw{background-position:-25px 0}

.collapse ul>li.disabled{background-color: var(--font_dis);}
.collapse ul>li.disabled>.togglebtn,
.collapse ul>li.disabled>.title{color: var(--font_sub2);/*cursor:default;*/background:var(--bord_sub);border: 1px solid var(--bord_main);}
.collapse ul>li.disabled>.cnt{color:var(--font_sub1);}

.collapse ul>li dl{position:relative;min-height:24px;}
.collapse ul>li dt{position:absolute;top:0;left:0;width:24px;}
.collapse ul>li dt .icon{display:block;width:24px;height:24px;line-height:24px;font-weight:700;text-align:center;border-radius:50%;color:var(--font_main);}
.collapse ul>li .title dt .icon{background-color:var(--main_color);}
.collapse ul li .title dd span{vertical-align:middle;}
.collapse ul>li .cnt dt .icon{line-height:24px;background-color:var(--sub_red);}

.type_list{background-color:var(--back_main);}
.type_list h4{padding:10px 5px;margin-bottom:5px; border-radius:5rem;line-height:18px;color:var(--font_main);background-color:var(--back_point);border:0;text-align:center;font-weight: 700;}
.collapse.type_list ul>li{background:none;border-radius: 6px;overflow:hidden;}
.collapse.type_list ul>li a{position:relative;font-size:1.333em;background-color:var(--font_main);border-radius:6px}
.collapse.type_list ul>li a.on{border-radius:6px 6px 0 0}
.collapse.type_list>ul>li ul>li{margin-bottom:5px}

.board_default .collapse ul>li>.togglebtn .title{font-weight:700;font-size:1.2em;padding-top:5px;padding-right:25px;}
.board_default .collapse ul>li>.togglebtn .date{font-size:0.8em;color:var(--main_color2);font-weight:700;letter-spacing:-1px;}

.h5_title>*{display:block}
.h5_title small{color:var(--main_color2);padding-bottom:5px}

/*=================자주묻는질문==========================*/
.board_group .collapse ul li a, .board_group .collapse ul li.nodata{line-height: 21px;}
.board_group .collapse ul>li dt .icon{line-height:24px;}
.board_group .collapse ul li .title dl{position:relative;}
.board_group .collapse ul li .title dt{position:absolute;top:0;left:0;}
.board_group .collapse ul>li .title dt .icon{background-color:var(--font_sub2);}
.board_group .collapse ul li .title dd{width: 100%;padding-left:33px;padding-right: 25px;overflow: inherit;text-overflow: inherit;white-space: normal;}
.board_group .collapse ul li .title dd span{display:inline-block;line-height:1.5em;}
.board_group .collapse ul>li .cnt{padding:14px;}
.board_group .collapse ul>li .cnt dt .icon{background-color:var(--main_color2)}
.board_group .collapse ul>li .cnt dd{padding-left:33px;}
.board_group .collapse ul>li .cnt dd img{max-width:100%;}
.board_group .collapse ul>li:first-child {background: var(--back_point);}

/*=================Q&A==========================*/
.inquiry_wrapper{padding-bottom:56px;}
.inquiry_wrapper  dl{margin-bottom:15px;}
.inquiry_wrapper  dl dt{font-size:1.1em;font-weight:bold;padding-bottom:10px;}
.inquiry_wrapper  #hide_submit{position:absolute;left:-9999px;}
.inquiry_wrapper  .helper{padding-bottom:10px}
.inquiry_wrapper input, .inquiry_wrapper textarea{background-color: var(--bord_sub); padding: 0.8rem; color: var(--font_main); font-size: 1rem; border: 1px solid var(--font_sub1); border-radius: 2px; white-space: unset;}
.inquiry_wrapper input::placeholder, .inquiry_wrapper textarea::placeholder{color: var(--font_sub2);}

.inquiry_wrapper_fixed.btns{background-color:var(--back_main);border-top:1px solid var(--bord_main);}
.inquiry_wrapper_fixed.btns dl{position:relative;min-height: 35px;margin:0;}
.inquiry_wrapper_fixed.btns dl dt{padding:0;padding-right:100px;line-height: 35px;vertical-align:middle; display: none;}
.inquiry_wrapper_fixed.btns dl dt input{margin-right:5px;vertical-align:middle;}
#frm_inquiry .inquiry_wrapper_fixed .btn_ui {width: 100%;}

/*================실전모의고사 > 실전모의고사======================*/
.test_list .collapse ul>li>a{font-size:1.2em;padding:16px 14px;}
.test_list .collapse ul>li {background-color: var(--back_point);border: 1px solid var(--bord_sub);font-weight: 700;}

/*================실전모의고사 > 결과리스트======================*/
.testresult_list .collapse ul>li {background-color: var(--back_point);border: 1px solid var(--bord_sub);font-weight: 700;}
.testresult_list .collapse ul>li>.togglebtn{display:block;}
.testresult_list .collapse ul>li>.togglebtn .top_arw{right:14px;}
.testresult_list .collapse ul>li>.togglebtn .date {font-size: 1em;color: var(--main_color2);font-weight: 700;letter-spacing: -1px;}
.testresult_list .collapse ul>li>.togglebtn .title {font-size: 1.2em;padding-top: 5px;padding-right: 25px;}
.testresult_list .collapse ul>li>.togglebtn .right_area{padding-right:13px;}
.testresult_list .collapse ul>li>.togglebtn .right_area dl{min-height: 17px;margin-top: 5px;}
.testresult_list .collapse ul>li>.togglebtn .right_area dl:first-child{margin-bottom: 1rem;}
.testresult_list .collapse ul>li>.togglebtn .right_area dt{width: fit-content;top: 6px;background: var(--bord_sub);padding: 0.3rem 0.5rem;box-sizing: content-box;border-radius: 5rem;}
.testresult_list .collapse ul>li>.togglebtn .right_area dd{padding-left: 66px;font-size: 1em;letter-spacing: -2px;color: var(--font_main);}
.testresult_list .collapse ul>li>.togglebtn .right_area dd strong{font-size: 2.2em;}

@media screen and (max-width: 390px) {
    .testresult_list .collapse ul>li>.togglebtn .f_l {float: none; margin-bottom: 1rem;}
    .testresult_list .collapse ul>li>.togglebtn .f_r {float: none;}
    .testresult_list .collapse ul>li>.togglebtn .right_area dl:first-child {margin-bottom: 0rem;}
}

.testresult_list .collapse ul>li>.cnt{padding:0;}
.testresult_list .collapse ul>li>.cnt>dl{position:relative;padding:14px;border-top:1px solid var(--bord_main);}
.testresult_list .collapse ul>li>.cnt>dl.click{cursor:pointer;}
.testresult_list .collapse ul>li .cnt>dl>dt{position:absolute;top:14px;left:14px;}
.testresult_list .collapse ul>li .cnt>dl>dt .icon{display:block;width:max-content;height:24px;line-height:24px;padding-inline: 8px;color:var(--font_main);font-weight:700;text-align:center;background-color:var(--sub_color1);border-radius:4px;letter-spacing:-1px;box-sizing: border-box;}
.testresult_list .collapse ul>li .cnt>dl>dd{padding-left:40px;padding-right:40px;line-height: 25px;height: 25px;overflow: hidden;}
.testresult_list .collapse ul>li .cnt>dl>dd img{max-width:25px;}
.testresult_list .collapse ul>li .cnt>dl>dd .title{max-width: 86%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.testresult_list .collapse ul>li .cnt .right_arw,
.testresult_list .collapse ul>li .cnt .lock_arw{position:absolute;top:14px;right:14px;width:25px;height:25px;background:url(../image/common/right_arw.svg) no-repeat;background-size:200% 100%}
.testresult_list .collapse ul>li .cnt .lock_arw{background-position:-25px 0}

.testresult_list .collapse .sub {    position: relative;
    padding: 12px 14px 10px;
    background-color: var(--bord_sub);
    word-break: break-all;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px; }

.testresult_list .collapse .sub .s_class{padding-left:35px;background:url(../image/common/flag_icon.svg) no-repeat left center;background-size:25px}
.testresult_list .collapse .sub .s_class li{float:left;line-height:25px;padding-left:20px;background:url(../image/common/test_sam_ra.svg) no-repeat 8px center;background-size:6px 8px;
                                                    border:none;margin:0}
.testresult_list .collapse .sub .s_class li:first-child{background:none;padding:0}

/*================이벤트======================*/
.gallery_default_wrapper .list{overflow:hidden;}
.gallery_default_wrapper .list #exEventList{margin-top:40px;}
.gallery_default_wrapper .list h4{font-size: 14px;font-weight: 700;padding-top:5px;padding-bottom: 13px;}
.gallery_default_wrapper .list ul{overflow:hidden;}
.gallery_default_wrapper .list ul>li{width:100%;margin-bottom:10px;border:none;border-radius:0.8rem;background-color:var(--font_main);overflow: hidden;}
.gallery_default_wrapper .list ul>li.nodata {width: 100%;text-align: center;padding: 25px;}
.gallery_default_wrapper .list ul>li:hover,
.gallery_default_wrapper .list ul>li:focus{border-color:none}
.gallery_default_wrapper .list ul>li>a{display:block;background-color:var(--font_main);}
.gallery_default_wrapper .list ul>li>a .thumb{height:200px;line-height:199px;overflow:hidden;text-align:center;background-color: var(--bord_main);}
.gallery_default_wrapper .list ul>li>a .thumb img{display:inline-block;vertical-align:middle;height: 100%;width: 100%; object-fit: cover;}
.gallery_default_wrapper .list ul>li>a .title{padding:15px 12px;font-weight:700;background:var(--bord_sub);text-align:center;font-size: 1.25em;}
.gallery_default_wrapper .list ul>li>a .title>span{display:block;width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.gallery_default_wrapper .list ul>li>a .title .date{font-weight:400;font-size:12px;color:var(--font_sub2);text-align:right;padding-top:10px}

.gallery_event_wrapper .list ul>li>a .title>span{display:inline-block;width:100%;text-align:left;}

/*================이벤트 상세보기======================*/
.gallery_view_wrapper .title{width:100%;padding:15px;margin-bottom:30px;border-bottom:1px solid var(--bord_main);background-color:var(--back_main);}
.gallery_view_wrapper .title span{font-size:16px;font-weight:700;word-break: break-all;line-height: 1.3em;}
.gallery_view_wrapper .title .date{margin-top: 3px;font-size:12px;font-weight: 400;color:var(--font_sub2);}
.gallery_view_wrapper .image{text-align:center;font-size:0;padding-bottom:10px}
.gallery_view_wrapper .image img{display:inline-block;max-width:100%;}
.gallery_view_wrapper .cont{padding:20px 10px;border-top:1px solid var(--font_sub1);line-height: 1.5em;word-break: break-all; font-size: 1rem;}
.gallery_view_wrapper .btns{width:100%;margin-top:30px;padding:10px 10px 0 10px;border-top:1px solid var(--bord_sub);}
.gallery_view_wrapper .btns .list_btn{display: block;width: 35px;height: 35px;background: url(../image/common/icon_listbtn.svg) no-repeat 0 0;background-size:contain;line-height:200px;overflow:hidden;}

/*=======================이벤트글강조====================*/
.gallery_view_wrapper .cont .set_center{text-align:center; display:none}
.gallery_view_wrapper .cont .sol a{ border-radius:10px;background-color:var(--main_color); padding:10px; font-size:20px; color:var(--font_main); font-weight:700; display:none}

.gallery_view_wrapper .cont .set_center_m{text-align:center;}
.gallery_view_wrapper .cont .sol_m a{ border-radius:10px;background-color:var(--main_color); padding:10px; font-size:20px; color:var(--font_main); font-weight:700;}

/*=======진도율========*/
.progress_wrap .total_pro{padding:20px;background-color: var(--back_main);}
.progress_wrap h3{font-size:1.167em;font-weight:700;}
.progress_wrap dl dt{padding:22px 55px 22px 0px;position:relative;height:56px}
.progress_wrap dl dt .pro_bar{width:100%;height:11px;border-radius:5rem;background-color:var(--back_header);overflow: hidden;}
.progress_wrap dl dt .pro_bar .ing{position:relative;height:100%;background:var(--grad_color);}
/* .progress_wrap dl dt .pro_bar .ing i{position:absolute;right:-3px;top:50%;z-index:10;display:block;width:43px;height:36px;margin-top:-18px;background:url(../image/progress/turtle.png) no-repeat;background-size:contain} */

/* .progress_wrap dl dt .bignum{position:absolute;right:0;top:0;width:56px;height:56px;line-height:56px;text-align:center;font-size:1.833em;font-family:verdana, Arial;font-weight:700;color:#fff;background:url(../image/progress/big_num_bg.png) no-repeat;background-size:200% 100%} */
.progress_wrap dl dt .bignum{position:absolute;right:0;top:0;width:56px;height:56px;line-height:56px;text-align:center;font-size:1.833em;font-family:verdana, Arial;font-weight:700;color:var(--font_main);background: var(--main_color); border-radius: 50%;}
.progress_wrap dl dt .bignum span{font-size:0.455em}

.progress_wrap dl dt.finish .ing{background-color:var(--sub_red)}
.progress_wrap dl dt.not_left .pro_bar .ing i{right:-38px}
.progress_wrap dl dt.finish .pro_bar .ing i{right:-50px}
.progress_wrap dl dt.finish .bignum{background-position:-56px 0}
.progress_wrap dl .info{margin-top:24px;position:relative}
.progress_wrap dl .info p{padding-right:150px}
.progress_wrap dl .info button{position:absolute;right:0;top:50%;margin-top:-15px;padding-left:30px;padding-right:10px;font-size:1em;background-color: transparent;}
.progress_wrap dl .info button i{display:block;position:absolute;left:5px;top:50%;margin-top:-10px;width:20px;height:20px;background:url(../image/common/toogle_arw.svg) 0 0;background-size:200% 100%}
.progress_wrap dl .info button.on i{background-position:-20px 0}

.progress_wrap .inner{display:none}
.progress_wrap .inner ul {margin-bottom: 5rem;}
.progress_wrap .inner ul li{position:relative;padding:21px 41px 10px;background-color:var(--back_point);border:1px solid var(--bord_sub); color:var(--font_main); margin: 1rem; border-radius: 4px;}
/* .progress_wrap .inner ul li:first-child{border-top:1px solid #ddd} */
.progress_wrap .inner ul li .num{position:absolute;left:10px;top:9px;width:34px;height:34px;line-height:31px;font-size:1.4em;font-weight:700;text-align:center;background-color:var(--font_main);color:var(--main_color);border-radius:16px;border:2px solid var(--bord_main);letter-spacing:-2px;padding-right:2px;}
.progress_wrap .inner ul li .bar{width:100%;height:10px;background-color:var(--back_main)}
.progress_wrap .inner ul li .bar .active{height:100%;background-color:var(--main_color)}
.progress_wrap .inner ul li .per{position:absolute;right:10px;top:9px;width:32px;height:32px;line-height:32px;text-align:center;font-weight:700;background-color:var(--back_main);border-radius:16px}
.progress_wrap .inner ul li .per span{font-size:0.563em}
.progress_wrap .inner ul li p{padding:8px 0 0 10px}

.progress_wrap .inner ul li.finish .per{background-color:var(--main_color)}

.progress_wrap .empty{text-align:center;font-size:1.333em;font-weight:700;padding:20px 0}

/*마이페이지 > 학습현황*/
/*.my_progress_wrap .progress_wrap dl .info{margin-top:0;}*/
.my_progress_wrap .progress_wrap .inner ul li{padding:10px 15px;}
.my_progress_wrap .progress_wrap .left_cnt{float:left;}
.my_progress_wrap .progress_wrap .right_cnt{float:right;}
.my_progress_wrap .progress_wrap .left_cnt>div{padding-top: 10px;}
.my_progress_wrap .progress_wrap .left_cnt strong{font-size: 1.45em;padding-left: 7px;letter-spacing: -1px;vertical-align: sub;}
.my_progress_wrap .easypiechart{position:relative;display:inline-block;margin-left: 5px;text-align:center;width:75px;height:75px;line-height:87px;}
.my_progress_wrap .easypiechart .h2{display: inline-block;font-size: 1.85em;font-weight: 700;letter-spacing: -1px;}
.my_progress_wrap .easypiechart .easypie-text{position: absolute;z-index: 1;line-height: 1;font-size: 0.87em;width: 100%;top:17px;}
.my_progress_wrap .easypiechart canvas{position: absolute;top: 0;left: 0;}

.my_progress_wrap .mock_progress .inner ul li{background-color:var(--back_point);color:var(--font_main)}

/* (유형 1 > 챕터 5 > 12번) 같은 로케이션 */
.location{line-height: 13px;}
.location i,
.location span{display:inline-block;vertical-align:middle}
.location i{width:32px;height:25px;background-image:url(../image/common/icon_location.svg);background-repeat:no-repeat;background-position:0 0;background-size:25px}
.location .arw{width:15px;height:8px;background-image:url(../image/question/question_title_arw.svg);background-repeat:no-repeat;background-position:center;background-size:6px 8px}

/*나만의 단어*/
.myword_wrap .collapse ul>li>.title{padding:0;display: table;table-layout: fixed;}
.myword_wrap .collapse ul>li>.title dl{position:relative;display: table-row;}
.myword_wrap .collapse ul>li>.title dl>*{display: table-cell;width:50%;padding:14px 20px;word-wrap: break-word;}
.myword_wrap .collapse ul>li>.title dt{width:50%;position:static;border-right:1px solid var(--font_sub2);font-size:1.1em;font-weight:700;}
.myword_wrap .collapse ul>li>.title dd{background: var(--back_point);}
.myword_wrap .collapse ul>li>.title dt.font_v{letter-spacing:-1px;}
.myword_wrap .collapse ul>li>.cnt{padding:10px;}
.myword_wrap .collapse ul>li>.cnt.small{padding:5px 10px;}
.myword_wrap .collapse ul>li>.cnt .question_btn{display:block;width:25px;height:25px;background-color: transparent;background-image:url(../image/study/icon_go_question.svg);background-repeat:no-repeat;background-size:contain;line-height:200px;overflow:hidden;}

/*수능단어*/
.satlist_wrap ul{margin-bottom:40px;overflow:hidden;}
.satlist_wrap ul li.item{float:left;width:47%;margin:0 1.5%;margin-bottom:10px;background:var(--main_color) url(../image/study/bg_testday.png) no-repeat 0 0;background-size:contain;}
.satlist_wrap ul li.item>a{padding:25px 20px;font-size:27px;font-weight:700;color:var(--font_main);text-align:center;letter-spacing:-2px;}

.sat_word_btns{z-index:50;position:fixed;bottom:20px;right:20px;}
@media screen and (min-width: 801px) {.sat_word_btns {margin-right: 300px;}}
.sat_word_btns button{display:block;width:67px;height:70px;line-height:200px;overflow:hidden;background:url(../image/study/icon_coverbtn_04.svg) no-repeat;background-size:contain}
.sat_word_btns>button{position:absolute;bottom:0;right:0;}
.sat_word_btns>button.cover_close_btn{background-image:url(../image/study/icon_coverbtn_03.svg);}
.sat_word_btns>button.check_btn{background-image:url(../image/study/icon_checkbtn.svg);}
.sat_word_btns>button.return_btn{background-image:url(../image/study/icon_blindbtn.svg);}

.sat_word_btns .sub_btns{position:absolute;bottom:75px;right:10px;}
.sat_word_btns .sub_btns>button{width:130px;height:52px;line-height:50px;padding-right:55px;text-align:right;color: #fff;background:url(../image/study/icon_coverbtn_01.svg) no-repeat;background-position:100% 50%;background-size:45px 45px;}
.sat_word_btns .sub_btns>button.word_btn{background-image:url(../image/study/icon_coverbtn_02.svg);}

.cover_bg{display:block;z-index:40;position:fixed;top:0;right:0;left:0;bottom:0;background:url(../image/common/bg_black_50.png);}
.myword_wrap #wordList{padding-bottom: 80px;}

.myword_wrap .collapse ul>li>.cnt.answer_check{text-align:right;background-color:var(--main_color2);color:var(--font_main);font-weight:700;}
.myword_wrap .collapse ul>li>.title .myanswer{color:var(--font_sub1);}
.myword_wrap .collapse ul>li>.title dl .input{padding:7px;}
.myword_wrap .collapse ul>li>.title dl .input_text{width:100%;padding:6px 3px;border:1px solid var(--bord_main);border-radius:3px;color:var(--font_dis);font-size:12px;font-weight:400;}
.myword_wrap .collapse ul>li>.title dl .input_text.han{-webkit-ime-mode:active;-moz-ime-mode:active;-ms-ime-mode:active;ime-mode:active; }
.myword_wrap .collapse ul>li>.title dl .input_text.eng{-webkit-ime-mode:inactive;-moz-ime-mode:inactive;-ms-ime-mode:inactive;ime-mode:inactive; }

/*수능단어 상세*/
.word_view_wrap.inset_wrap{padding-top:30px;}
.word_view_wrap .card_wrap{position:relative;padding-top:30px;height:230px;background:var(--back_point) repeat-x 0 35%;background-size:1px 107px;}
.word_view_wrap .card{position:absolute;top:22%;width:100%;min-height:163px;line-height:145px;padding: 0 26px;text-align:center;background:url(../image/study/bg_wordcard.png) no-repeat 50% 0;background-size:341px auto;-webkit-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition:transform 0.3s 0.3s;transition:transform 0.3s 0.3s}
.word_view_wrap .card.back{background-image:url(../image/study/bg_wordcard_back.png);color:var(--back_main)}
.word_view_wrap .card span{display:inline-block;width:270px;vertical-align:middle;font-weight:700;}
.word_view_wrap .card.front span{color:#fff;font-size:2.8em;letter-spacing: -2px;line-height: 1.1em;
        text-shadow: 1px 0 0 #e9be3a, -1px 0 0 #e9be3a, 0 1px 0 #e9be3a, 0 -1px 0 #e9be3a, 1px 1px #e9be3a, -1px -1px 0 #e9be3a, 1px -1px 0 #e9be3a, -1px 1px 0 #e9be3a;
        -moz-text-shadow: 1px 0 0 #e9be3a, -1px 0 0 #e9be3a, 0 1px 0 #e9be3a, 0 -1px 0 #e9be3a, 1px 1px #e9be3a, -1px -1px 0 #e9be3a, 1px -1px 0 #e9be3a, -1px 1px 0 #e9be3a;
        -webkit-text-shadow: 1px 0 0 #e9be3a, -1px 0 0 #e9be3a, 0 1px 0 #e9be3a, 0 -1px 0 #e9be3a, 1px 1px #e9be3a, -1px -1px 0 #e9be3a, 1px -1px 0 #e9be3a, -1px 1px 0 #e9be3a;
}
.word_view_wrap .card.back span{font-size:2em;letter-spacing:-1px;word-wrap: break-word;line-height: normal;}
.word_view_wrap .btns{max-width:290px;width:100%;margin:0 auto;padding-top:20px;text-align:center;}
.word_view_wrap .btns button{display:block;width:35px;height:35px;background:url(../image/study/icon_arw_left.svg) repeat-x 0 0;background-size:contain;line-height:200px;overflow:hidden;}
.word_view_wrap .btns button.next_btn{background-image:url(../image/study/icon_arw_right.svg);}
.word_view_wrap .btns>div{display:inline-block;font-size:1.5em;letter-spacing:-1px}
.word_view_wrap .btns>div strong{font-size:1.5em;}

.word_view_wrap .script_wrap{margin-top:30px;padding:20px;}
.word_view_wrap .script_wrap h4{font-size:1.4em;font-weight:700;padding-top: 5px;}
.word_view_wrap .script_wrap button{position:relative;border:0;padding-left:33px;padding-right:10px;font-size:1.2em;}
.word_view_wrap .script_wrap button i{display: block;position: absolute;left: 7px;top: 8px;width: 20px;height: 20px;background: url(../image/study/icon_question.svg) no-repeat 0 0;background-size:cover;}
.word_view_wrap .script_wrap .script{padding-top:15px;line-height:1.5em;font-size:1.2em;}
.word_view_wrap .script_wrap .script .WORD{display:inline-block;background-color:var(--main_color2);color:var(--font_main);font-weight:700;padding:0 5px;margin:1px 0;}

/*단어 에니메이션*/
.word_view_wrap .card.off{-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transition:transform 0.3s;transition:transform 0.3s}

/*무한단어*/
.unlimit_ready_wrap{position:relative;background-color:var(--back_main);}
.unlimit_ready_wrap .top_visual{position:relative;}
/*.unlimit_ready_wrap .top_visual img{max-width:100%;height:auto;}*/
.unlimit_ready_wrap .bg_img{position:relative;width:100%;height:575px;overflow:hidden;}
.unlimit_ready_wrap img.bg{position:absolute;top:-100%;left:-100%;right:-100%;bottom:-100%;margin: auto;height: 100%;min-height: 100%;/*min-width: 100%;*/}

.unlimit_ready_wrap .top_visual h3,
.unlimit_ready_wrap .top_visual h4{z-index: 10;position:absolute;top:7%;left:0;width:100%;text-align:center;}
.unlimit_ready_wrap .top_visual h3 img{height:auto;max-width: 230px;width:100%;}
.unlimit_ready_wrap .top_visual h4{top:22%;font-size:1.4em;font-weight:400;color:#fff;line-height:1.3em;
    text-shadow: 2px 0 0 #333, -2px 0 0 #333, 0 2px 0 #333, 0 -2px 0 #333, 1px 1px #333, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333;
    -moz-text-shadow: 2px 0 0 #333, -2px 0 0 #333, 0 2px 0 #333, 0 -2px 0 #333, 1px 1px #333, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333;
    -webkit-text-shadow: 2px 0 0 #333, -2px 0 0 #333, 0 2px 0 #333, 0 -2px 0 #333, 1px 1px #333, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333;
}
.unlimit_ready_wrap .top_visual h4 p:last-child{padding-top:14px;font-size:1.1em;}

.unlimit_ready_wrap .bottom_cnt{position:absolute;top:430px;left:0;width:100%;text-align:center;}
.unlimit_ready_wrap .bottom_cnt button{display:inline-block;}

/*무한단어 상세*/
.unlimit_play_wrap .timer_wrap{height:50px;margin:15px 0;}
.unlimit_play_wrap .timer_wrap img{max-width:42px;}
.unlimit_play_wrap .timer_wrap dl{position:relative;}
.unlimit_play_wrap .timer_wrap dl dt{z-index:5;position:absolute;top:0;left:0;}
.unlimit_play_wrap .timer_wrap dl dd{padding-left:32px;padding-top:18px;}
.unlimit_play_wrap .timer_wrap dl dd .bar{position:relative;}
.unlimit_play_wrap .timer_wrap dl dd .bar>div{height:10px;border-radius:5px;}
.unlimit_play_wrap .timer_wrap dl dd .bar .active{position: absolute;left: 0;top: 1px;background:var(--grad_color);overflow: visible !important;}
.unlimit_play_wrap .timer_wrap dl dd .bar .active img{z-index: 10;position:absolute;top:-33px;right:-24px;max-width:75px;}
.unlimit_play_wrap .timer_wrap dl dd .bar .active img.end{max-width:42px;top:-13px;right:-12px;}
.unlimit_play_wrap .timer_wrap dl dd .bar .bg{height:12px;border:none;background-color:var(--back_header);}

.unlimit_play_wrap .question input{color:var(--font_main);}
.unlimit_play_wrap .question .answer_crt{position:absolute;top:0;left:46%;}
.unlimit_play_wrap .question .answer_crt img{width:100%;max-width:60px;}

.unlimit_play_wrap .question dl{position:relative;height:40px;line-height:40px;margin-bottom:20px;}
.unlimit_play_wrap .question dl dt{position:absolute;top:0;left:0;}
.unlimit_play_wrap .question dl dt .icon{display:block;width:40px;height:40px;line-height:38px;padding-right: 1px;color:var(--font_main);text-align:center;background-color:var(--bord_sub);border-radius:50%;font-size:1.7em;}
.unlimit_play_wrap .question dl dd{display: inline-block;width: 100%;padding-left:40px;color:var(--font_sub2);text-align:center;font-size:1.25em;line-height: 1.3em}
.unlimit_play_wrap .question dl dd .word{color:var(--font_main);font-weight:500;}

.unlimit_play_wrap .question dl.a_wrap dt .icon{background-color:var(--main_color2);}
.unlimit_play_wrap .question dl.a_wrap dd{color:var(--font_dis);font-weight:500;}

.unlimit_play_wrap .question .answer{width:100%;padding:15px;border:1px solid var(--font_sub1);border-radius:3px;text-align:center;color:var(--font_main);font-size: 1rem;outline: none;}
.unlimit_play_wrap .question .btns{margin-top:15px;}

/*무한단어 결과*/
.unlimit_result_wrap .collapse{padding-bottom:55px;}
.unlimit_result_wrap ul li .icon{display:inline-block;width:25px;height:25px;line-height:26px;color:var(--font_main);text-align:center;background-color:#666;border-radius:50%;font-weight:700;}
.unlimit_result_wrap ul li .title,
.unlimit_result_wrap ul li .cnt{padding:10px;}
.unlimit_result_wrap ul li .title{position:relative;}
.unlimit_result_wrap ul li .title .icon{position:absolute;top:10px;left:10px;}
.unlimit_result_wrap ul li .title .word{min-height:25px;line-height:25px;padding-left:35px;}

.unlimit_result_wrap ul li .cnt .icon{background-color:var(--main_color);color:var(--font_main)}
.unlimit_result_wrap ul li .cnt>div>div{display:block;float:left;height:25px;line-height:23px;color:var(--font_sub2);}
.unlimit_result_wrap ul li .cnt .word{padding-left:10px;font-weight:500;color:var(--font_main);}
.unlimit_result_wrap ul li .cnt .answer strong{color:var(--font_main);font-weight:500;padding:0 7px;}
.unlimit_result_wrap ul li .cnt .answer_crt img{width:25px;}

.score_wrap{z-index: 10;width:100%;background-color: var(--back_header);border-top:1px solid var(--bord_main);padding:10px}
.score_wrap .btn_ui.bg_blue{position:absolute;top:10px;right:10px;background-color: var(--main_color);border-color: var(--main_color);}
.score_wrap>div{width:100%;padding-right:100px;}
.score_wrap>div p{display:inline-block;width:49%;text-align:right;}
.score_wrap>div p:first-child{text-align:left;}
.score_wrap>div .score{font-weight:700;font-size:2.4em;color:var(--sub_red);}

.unlimit_result_wrap .collapse ul>li:first-child{background: var(--back_point);}

/*120초 모의고사*/
.test_120_ready_wrap .top_visual h3{top:7%}
.test_120_ready_wrap .top_visual h3 img{max-width: 340px;width:100%;}
.test_120_ready_wrap .top_visual h4{top:22%;}
.test_120_ready_wrap .bottom_cnt{top:450px;}
.test_120_ready_wrap .bottom_cnt .nocnt{color:#888;font-size: 1.4em;line-height: 1.3em;letter-spacing: -1px;}

/*문제풀기 화면*/
.inset_wrap.mystudy_wrap.no_padder{border-top: none;}
.test_question_detail .mock_top{width:100%;background-color:var(--back_point);color:var(--font_main);padding:10px;font-size: 1.4em;font-weight: 700;}
.test_question_detail .mock_top .title{line-height: 35px;text-align:center;}
.test_question_detail .mock_top button{display:block;width:35px;height:35px;line-height:200px;overflow:hidden;background:url(../image/question/icon_audio_pause.svg) no-repeat 0 0;background-size:contain}
.test_question_detail .mock_top .play_btn{background-image:url(../image/question/icon_audio_play.svg)}
.test_question_detail .mock_top .next_btn{background-image:url(../image/study/icon_arw_right.svg)}
.test_question_detail .mock_top .prev_btn{background-image:url(../image/study/icon_arw_left.svg)}

/* prev/next 버튼 disabled 상태 스타일 */
.test_question_detail .mock_top .prev_btn:disabled,
.test_question_detail .mock_top .next_btn:disabled,
.test_question_detail .mock_top .prev_btn.disabled,
.test_question_detail .mock_top .next_btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.test_question_detail .btns{padding:10px;background-color:var(--back_main);margin-top: 2rem;}

.question_detail .question_wrap .answer_check{display:none;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:url(../image/question/bg_white_80.png);}
.question_detail .question_wrap .answer_check p{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top: -130px;padding-top:220px;font-size:36px;font-weight:700;text-align:center;letter-spacing:-2px;background-repeat:no-repeat;}
.question_detail .question_wrap .answer_check p.crt{color:var(--back_main);background-image:url(../image/question/icon_correct.svg);}
.question_detail .question_wrap .answer_check p.incrt{color:var(--back_main);background-image:url(../image/question/icon_incorrect.svg);}

.question_detail .top .title{font-size:1.25em;font-weight:700;line-height: 1.3em;padding:15px;background-color:var(--back_point);margin-top: 2rem;}
.question_detail .top .title>div{padding-top:10px;}
.question_detail .top .title .num{display:inline-block;width:auto;height:40px;line-height: 40px;font-size:1.3em;color:var(--font_main);padding:0 15px;letter-spacing: -1px;background-color: var(--main_color);border-radius: 20px;}
.question_detail .ex_img{background-color:var(--font_main);border-bottom:1px solid var(--bord_main);}
.question_detail .ex_img img{display:block;margin:0 auto;background-color: var(--font_main);max-width:100%;}

.question_detail .selec dl{position:relative;min-height:51px;padding:9px 13px;cursor:pointer;background-color:var(--font_main);border-bottom:1px solid var(--bord_main);}
.question_detail .selec dl:hover,
.question_detail .selec dl:focus{background-color:var(--font_sub1);}
.question_detail .selec dl dt{position:absolute;top:9px;left:14px;width:32px;height:32px;line-height:32px;font-size:1.5em;text-align:center;color:var(--font_main);font-weight:bold;background-color:var(--font_sub2);border-radius:50%;letter-spacing:-1px;}
.question_detail .selec dl dd{padding-left:47px;font-size:1.175em;line-height:30px;color:var(--black_main);}
.question_detail .selec dl dd span{display: inline-block;vertical-align: middle;line-height:1.5em;}
.question_detail .selec dl.selected{background-color:var(--font_sub1);}
.question_detail .selec dl.selected dt{background-color:var(--main_color);}
.question_detail .selec dl.selected dd{font-weight:700;}

.question_detail .selec.hasimg{background-color:var(--font_main);}
.question_detail .selec.hasimg dl{display:block;float:left;width:20%;border:0;min-height:80px;}
.question_detail .selec.hasimg dl dt{top:50%;left:50%;margin-left:-16px;margin-top: -16px;}
.question_detail .selec.hasimg dl dd{display:none;}

.question_detail .selec.result dl{color:var(--font_sub1);cursor:default;}
.question_detail .selec.result dt{background-color:var(--font_sub2)}
.question_detail .selec dl.wrong,
.question_detail .selec dl.answer{color:var(--font_sub2);}
.question_detail .selec dl.wrong dt{background-color:var(--sub_red);}
.question_detail .selec dl.answer dt{background-color:var(--main_color);}

.question_btns>.btn{float:left;width:20%;height:60px;background-color:var(--back_header);font-weight:700}
.question_btns>.btn .icon{display:block;width:24px;height:24px;margin:0 auto 7px;background:url(../image/question/quest_btm_bar.svg) no-repeat;background-size:500% 200%}
.question_btns>.btn.scrt_q .icon{background-position:-24px 0}
.question_btns>.btn.trsl_q .icon{background-position:-48px 0}
.question_btns>.btn.words_q .icon{background-position:-72px 0}
.question_btns>.btn.next_q .icon{background-position:-96px 0}

.question_btns>.btn.on{background-color:var(--main_color);color:var(--font_main)}
.question_btns>.btn.on.scrt_q .icon{background-position:-24px -24px}
.question_btns>.btn.on.trsl_q .icon{background-position:-48px -24px}
.question_btns>.btn.on.words_q .icon{background-position:-72px -24px}
.question_btns>.btn.on.next_q .icon{background-position:-96px -24px}

.question_btns>.btn:disabled{color:var(--font_dis);font-weight:400;}

.question_detail .script_wrap{background-color:var(--font_main);color:var(--back_main);}
.question_detail .script_wrap dl{display:none;border-bottom:1px solid var(--bord_main);padding:20px}
.question_detail .script_wrap dl dt{font-size:1.167em;font-weight:700;margin-bottom:10px;margin-top:20px;display:inline-block;background:var(--main_color2);padding: 0.3rem 0.5rem;border-radius: 5rem;color:var(--font_main);margin-bottom:0.5rem;}
.question_detail .script_wrap dl>*:first-child{margin-top:0;}
.question_detail .script_wrap dl dd{line-height:1.7em;}
.question_detail .script_wrap dl.scrt a{display:inline-block;padding: 0 5px;margin:1px 0;color:var(--font_main);background-color:var(--back_main);font-weight:700;}
.question_detail.sound_wrapper .script_wrap{background-color:var(--back_point)}
.question_detail.sound_wrapper .question_title{background-image:none;}

.favor_q {display:block;position:absolute;bottom:75px;right:10px;display:block;width:60px;height:60px;background:url(../image/question/icon_favor.svg) no-repeat;background-size:200% 100%}
.favor_q.on{background-position:-60px 0}

/*나만의 단어 등록 팝업레이어*/
.layer_popup{display:none;position:fixed;z-index:100000;left:0;top:0;width:100%;height:100%;background:url(../image/common/bg_black_50.png)}
.layer_popup .layer_wrap{width:100%;max-width:300px;position:absolute;left:50%;top:50%;border-radius:4px;background:var(--back_main)}
.layer_popup .layer_wrap .exit.icon{position:absolute;right:10px;top:10px;width:16px;height:16px;background:url(../image/common/x_black.svg) no-repeat 0 0;background-size:contain;}
.layer_popup .layer_wrap .title{padding:30px;color:var(--font_main);text-align:center;}
.layer_popup .layer_wrap .title h3{font-size: 2.1em;}
.layer_popup .layer_wrap .title p{font-size: 1.5em;padding-top: 10px;line-height:1.4em;}
.layer_popup .btns{text-align:center;padding: 0 0 20px;}


/*쿠폰팝업*/
.layer_popup.coupon_layer .layer_wrap .title {
  padding: 36px 28px;
}
.layer_popup.coupon_layer .layer_wrap .title h3 span {
  
  color: #999;
  padding-top: 20px;
  display: inline-block;
  font-size: 0.6em;
  margin-left: 18px;
  margin-top: -5px;
}
.layer_popup.coupon_layer .layer_wrap .layer_content .input_div {
  padding: 24px 10px;
  background-color: #fefefe;
}
.layer_popup.coupon_layer .layer_wrap .layer_content .input_div {
  font-size: 2em;
}
.layer_popup.coupon_layer .layer_wrap .layer_content .input_div > * {
  display: block;
  float: left;
}
.layer_popup.coupon_layer .layer_wrap .layer_content .input_div input {
  color: #000;
  display: block;
  width: 56px;
  height: 25px;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  border: 0;
  background-color: #ececec;
  -moz-box-shadow: inset 0 0 7px #cecece;
  -webkit-box-shadow: inset 0 0 7px #cecece;
  box-shadow: inset 0 0 7px #cecece;
  border-radius: 4px;
}
.layer_popup.coupon_layer .layer_wrap .layer_content .input_div span {
  margin: 0 3px;
}
.layer_popup.coupon_layer .layer_wrap .layer_content .btns {
  width: 190px;
  margin: 0 auto;
  padding: 22px 0;
}

.layer_popup .layer_wrap .exit {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  background: url(../image/common/layer_exit.png);
}
.coupon-container {
  /* 사용중인 쿠폰*/
  padding: 20px;
  background: #27282c;
  width: 90%;
  margin: 0 auto;
  margin-top: 50px;
  /* border: 1px solid #e0e0e0; */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.coupon-container .coupon-status-banner {
  background-color: transparent;
  color: white;
  padding: 12px;
  text-align: center;
}
.coupon-container .coupon-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 400;
}
.coupon-container .coupon-date {
  font-size: 16px;
  color: #999;
}
.coupon-container .coupon-date #startDate {
  font-size: 14px;
}
.coupon-container .coupon-date #endDate {
  font-size: 16px;
  font-weight: 500;
  color: #504bff;
}
.coupon-container .coupon-details {
  border-radius: 10px;
  margin-top: 20px;
  padding: 16px 25px;
  line-height: 1;
  background-color: rgba(0, 0, 0, 0.0784313725);
}
.coupon-container .coupon-details h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
}
.coupon-container .coupon-details p {
  font-size: 16px;
}

/*문제풀기 결과화면*/
.test_question_result .mock_top{width:100%;background-color:var(--back_main);border-bottom:none;padding:10px 15px;font-size: 1.4em;font-weight: 700;}
.test_question_result .mock_top .title{line-height: 45px;}
.test_question_result .mock_top dl{position:relative;}
.test_question_result .mock_top dl dt{position:absolute;bottom:6px;left:0;font-size:0.75em;}
.test_question_result .mock_top dl dd{margin-left:46px;font-size:0.75em;letter-spacing: -2px;color:var(--font_main);background: var(--main_color); padding: 3px 15px; border-radius: 42px;}
.test_question_result .mock_top dl dd strong{font-size: 2.5em;}

.test_question_result .list ul{border:1px solid var(--bord_sub);background-color:var(--back_point);border-radius:5px;}
.test_question_result .list ul>li{padding:12px 10px;border-top:1px solid var(--bord_sub);}
.test_question_result .list ul>li:first-child{border-top:0;}
.test_question_result .list ul>li>dl{position:relative;}
.test_question_result .list ul>li>dl>dt{position:absolute;top:0;left:0;}
.test_question_result .list ul>li>dl>dt .icon{display:block;width:26px;height:26px;line-height:26px;padding-right:1px;color:var(--font_main);font-weight:700;text-align:center;background-color:var(--main_color);border-radius:50%;letter-spacing:-1px;}
.test_question_result .list ul>li>dl>dd{padding-left:35px;line-height: 25px;height: 25px;overflow: hidden;}
.test_question_result .list ul>li>dl>dd img{width:100%;max-width:25px;}
.test_question_result .list ul>li>dl>dd .title{max-width: 88%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.test_question_result .btns{padding:10px 0;background-color:var(--back_main);border-top:none;text-align:center;}
.test_question_result .btns a{display:inline-block;padding:0 10px;}
.test_question_result .btns a:first-of-type{background-color: var(--bord_sub);}

/*==============나의학습================*/
.mystudy_wrap .sub_tab .sort{padding-top:6px;text-align:center;margin-block: 1rem;display: none;}
.mystudy_wrap .sub_tab .sort *{font-size:1.1em;padding:2px 3px;}
.mystudy_wrap .sub_tab .sort button{background:none; color:var(--font_sub2)}
.mystudy_wrap .sub_tab .sort button.on{font-weight:700;color: var(--font_main);}

.chapter_title{position:relative;padding:10px 40px 10px 15px;line-height:20px;font-size:1.167em;font-weight:700;border-bottom:1px solid var(--bord_main);background-color:var(--back_main)}
.chapter_title .level_icon{right:15px}

.chapter_list ul>li h5{font-weight:700;font-size: 1rem;}
.chapter_list ul>li .togglebtn{padding-left:45px;background:url(../image/common/unlocation.svg) no-repeat 10px center;background-size:25px}
.chapter_list ul>li .togglebtn.on{background: var(--main_color) url(../image/common/icon_location.svg) no-repeat 10px center;background-size:25px}
.chapter_list ul>li.disabled .togglebtn{background:var(--back_point) url(../image/common/unlocation.svg) no-repeat 10px center;background-size:25px}
.chapter_list ul>li .cnt .btn_div{width:100%;padding:0 12px;}
.chapter_list ul>li .cnt .btn_div .btn_wrap{width:25%;float:left}
.chapter_list ul>li .cnt .btn_div .btn_wrap .q_btn{display:block;width:60px;height:60px;margin:15px auto 0;font-size:2.5em;font-weight:700;color:var(--font_main);line-height:72px;background:url(../image/study/question.svg) no-repeat;background-size:200% 100%}
.chapter_list ul>li .cnt .btn_div .btn_wrap .q_btn.sound{background-image:url(../image/study/ico_playall.svg);}
.chapter_list ul>li .cnt .btn_div .btn_wrap .q_btn.disabled{background-position:-60px 0}
.chapter_list ul>li .bx-wrapper{position:relative;padding-bottom:30px;z-index:2}
.chapter_list ul>li .slider_wrap{position:relative;overflow:hidden;background-color:var(--font_sub1)}
.chapter_list ul>li .slider_wrap i{display:block;position:absolute;top:50%;width:8px;height:12px;margin-top:-6px;background:url(../image/study/bx_arow.svg) no-repeat;background-size:200% 100%;z-index:1}
.chapter_list ul>li .slider_wrap i.la{left:5px}
.chapter_list ul>li .slider_wrap i.ra{right:5px;background-position:-8px 0}
.chapter_list ul>li.disabled{background-color:var(--font_dis)}
.chapter_list ul>li a .right_arw{background:url(../image/study/right_down.svg);    background-size: 200% 100%;}

.study_part .type_list{padding:10px;}
.study_part .collapse.type_list>ul>li{border:0;}
.study_part .collapse.type_list ul>li a{font-size:1em;border-radius:6px 6px 0 0;padding-bottom:25px; color: var(--back_main)}
.study_part .collapse.type_list ul>li.disabled a{background-color:var(--font_sub1);color:var(--black_main)}
.study_part .collapse.type_list ul>li.disabled a .right_arw{background-position:0 0;}
.study_part .collapse.type_list ul>li a h5 span{font-size:1.2em; font-weight: 700;}

.study_part .collapse.type_list>ul>li ul>li a.open_tip{position:absolute;left:50%;margin-left:-20px;top:-19px;display:block;width:40px;height:19px;background:url(../image/study/tip.svg) no-repeat; background-size:contain}
.study_part .collapse.type_list>ul>li ul>li .tip{position:relative;background:url(../image/study/tip_icon.svg) no-repeat 10px 10px;background-size:25px;color:var(--font_sub2);line-height:18px;}
.study_part .collapse.type_list>ul>li ul>li .tip div{display:none;padding:15px 15px 15px 45px;overflow:hidden;}

/*=============나의학습 > 문제풀기===============*/
.question_title{position:relative;background:var(--back_main) url(../image/common/icon_location.svg) no-repeat 15px center;background-size:25px;min-height:50px;padding-left:55px;}
.question_title ul li{float:left;padding-left:25px;height:50px;line-height:50px;font-weight:700;color:var(--font_main);background:url(../image/question/question_title_arw.svg) no-repeat 10px center;background-size:6px 8px}
.question_title ul li:first-child{padding-left:0;background:none}
.question_title .fast_div{position:absolute;right:10px;top:50%;margin-top:-13px;line-height:25px;}
/*.question_title .fast_div button{display:block;width:38px;height:38px;margin-left:8px;background:url(../image/question/icon_fast.png) no-repeat;background-size:200% 100%;}*/
/*.question_title .fast_div button:first-child{margin-left:0}*/
/*.question_title .fast_div button.x4{background-position:-38px 0}*/

.question_title .fast_div >*{float:left;}
.question_title .fast_div button{width:25px;height:25px;background:none;}
.question_title .fast_div button img{max-width:100%;}
.question_title .fast_div>div{line-height:25px;color:var(--font_main);}
.question_title .fast_div .info{padding-right:10px;}
.question_title .fast_div .au-speed{width:35px; white-space: nowrap; text-align:center;}
/* add/remove circle icons for conversation_part */
.icon.add_circle{display:inline-block;width:20px;height:20px;background:center/contain no-repeat url("../image/renewal/icons/icon_20_add_circle.svg");}
.icon.remove_circle{display:inline-block;width:20px;height:20px;background:center/contain no-repeat url("../image/renewal/icons/icon_20_remove_circle.svg");}

.audio_wrap{background-color:var(--back_main)}
.audio_wrap audio{width:100%}

.audio_wrap .audio{position:relative;width:100%;padding:10px 15px;margin:0 auto;}
.audio_wrap .audio .au-controls,
.audio_wrap .audio .au-progress{float:left;}
.audio_wrap .audio .au-controls{z-index:10;position:relative;}
.audio_wrap .audio .au-controls button{display:block;width:25px;height:25px;background:none;}
.audio_wrap .audio .au-controls button img{max-width:100%;}
.audio_wrap .audio .au-controls li{float:left;margin-right:5px;}
.audio_wrap .audio .au-controls li.au-speed{color:var(--font_main);padding-top: 8px;padding-left: 10px;}
.audio_wrap .audio .au-controls li.au-speed strong{font-size: 1.167em;}

.audio_wrap .audio .au-progress{position:relative;width: 100%;-webkit-width:calc(100% - 120px);-moz-width:calc(100% - 120px);width:calc(100% - 120px);margin:7px 0 0 55px;background-color: var(--back_main);border-radius: 20px;}
.audio_wrap .audio .ui-widget-content{height: 10px;background:var(--back_main) url(../image/question/bg_audio.jpg);background-size:6px 6px;border: 1px solid var(--bord_sub);}
.audio_wrap .audio .ui-widget-header{background:var(--main_color) url(../image/question/bg_audio_active.jpg);background-size:6px 6px;}
.audio_wrap .audio .ui-state-default{z-index:1;width:33px;height:33px;margin-top:-8.5px;margin-left:-16.5px;outline: none;background:url(../image/question/audio_control.svg);background-size:33px 33px;border: 0;border-radius: 0;}

.audio_wrap .audio .au-time-holder{position: absolute;top:14px;left:0;width:100%;padding-left: 40px;color: var(--font_main);font-size: 12px;line-height: 14px;}
.audio_wrap .audio .au-time-holder>*{width: 40px;text-align: center;}
.audio_wrap .audio .au-time-holder .au-current-time{padding-left:10px;}
.audio_wrap .audio .au-time-holder .au-all-time{padding-right:10px;}

/*=================마이페이지====================*/
/*내 정보 확인*/
.myinfo_wrap{/*padding-bottom:66px !important;*/}
.myinfo_wrap form>div{position:relative;}
.myinfo_wrap form>div.top{border-top:0}
.myinfo_wrap form>div.middle{display:none}
.myinfo_wrap form input,.myinfo_wrap form textarea,.myinfo_wrap form select{font-size:1em;}
.myinfo_wrap form input.form_input {border: none;}

/*.myinfo_wrap .alert{right:9999px}*/
.myinfo_wrap .top .alert.on{right:25px;top:45px}
.myinfo_wrap .comp_div .alert.on{width:100%;text-align:center;position:static;padding-bottom:10px;}

.myinfo_wrap form .dl_list{width:100%;}
.myinfo_wrap form .dl_list dl dt{width:100%;padding-top:12px;text-align:left;color:var(--black_main);vertical-align:top;font-weight:600;font-size:1.1em;}
.myinfo_wrap form .dl_list dl dd{width:100%;position:relative;padding:13px 0;font-size: 1em;color:var(--back_point);font-size: 16px;}
.myinfo_wrap form .dl_list dl dd p{padding-top:7px;line-height: 1.4em;}

.myinfo_wrap form .school_td>*{width:50%;}
.myinfo_wrap form .school_td {display: flex;gap: 7px;align-items: center;}

.myinfo_wrap form .btns_wrap{position:absolute;right:0;top:0;width:110px;height:35px;overflow:hidden;transition: width 0.3s}
.myinfo_wrap form .btns_wrap .btns{position:absolute;left:0;top:0;width:340px;transition: left 0.3s}
.myinfo_wrap form .btns_wrap.on{width:183px;}
.myinfo_wrap form .btns_wrap.on .btns{left:-113px}
.myinfo_wrap form .btns_wrap .btns button{float:left;width:90px;font-size:0.9em;padding:0 10px;margin-left:3px;letter-spacing:-1px;font-weight: 500;}
.myinfo_wrap form .btns_wrap .btns button:first-child{margin-left:0;width:110px;}

.myinfo_wrap form .info_submit{margin:0 auto}

.myinfo_wrap form .dropout_wrap .dropout{
  background: var(--font_sub1);color: var(--font_sub2);}

.myinfo_wrap form .comp_div{width:100%;background-color:var(--back_main);}

/*회원가입 플로우*/
.login_wrap,.join_apply_wrap,.join_apply_wrap,.join_apply_wrap,.join_comp_wrap{padding-top:40px !important;}

/*로그인*/
.login_wrap form{position:relative;max-width:370px;margin:0 auto}
.login_wrap input{margin-bottom:5px;}
.login_wrap .login_btn{margin:10px 0 15px;}
.login_wrap .btns>ul{text-align:center;}
.login_wrap .btns>ul>li{display:inline-block;margin:0 3px;color:var(--font_sub2);}
.login_wrap .alert{position:static;text-align:center;width:100%;padding-top:10px}
.login_wrap label{color: var(--font_sub2);}
.login_wrap input{color: var(--font_main);font-size: 1rem;border: none;outline: none;margin-bottom: 1rem;background-color: transparent;}
.login_wrap .form_wrap{background-color: var(--back_point);margin-inline: 1rem;padding: 3rem;}
.login_wrap dd:first-of-type{margin-block: 1rem;}
.login_wrap legend{display: block;position: relative;left: 0;font-size: 1.2rem;font-weight: 700;margin-bottom: 2rem;}

/*회원가입 메일인증*/
.join_apply_wrap .title_p{text-align:center;font-size:1.3em;font-weight: 700;line-height:1.5em;}
.join_apply_wrap form{margin:0 auto}
.join_apply_wrap dl{padding:10px 0;}
.join_apply_wrap dt{margin-bottom:15px;}
.join_apply_wrap dt.title{max-width:370px;width:100%;font-weight:700;font-size:1.1em;margin:0 auto;margin-bottom:15px;}
.join_apply_wrap .btns{text-align:center;}
.join_apply_wrap .btns a{color:var(--font_sub2);}
.join_apply_wrap .alert{position:static;text-align: center;margin-top: 10px;}
.join_apply_wrap #pw{margin-bottom:10px;}
.join_apply_wrap .email_box{margin:20px 0;}
.join_apply_wrap .email_box .form_input{max-width:370px;margin:0 auto;text-align:center;background-color:transparent;}

/*회원가입 정보작성*/
.myinfo_wrap.signup_wrap{padding-top:50px !important;padding-bottom: 0 !important;}
.myinfo_wrap.signup_wrap .alert{text-align:center;}
.signup_wrap form>div.table{padding:0;}
.signup_wrap form .dl_list{max-width:500px;margin:0 auto;width:100%;padding:10px;padding-bottom: 0;}
.signup_wrap.myinfo_wrap form label {color:var(--font_sub2)}
.signup_wrap.myinfo_wrap form input {border:none;font-size: 1rem;}
.signup_wrap.myinfo_wrap form .dl_list dl dd p {color: var(--font_sub2);}
.signup_wrap .job_div{max-width:370px;margin:0 auto;width:100%;padding:10px;padding-bottom: 1rem;font-size: 1rem;}
.signup_wrap.myinfo_wrap form .job_div label {color: var(--font_main); position: relative; padding-left: 30px;margin-right: 2rem;}
.signup_wrap.myinfo_wrap form .job_div input[type=radio]{display: none;}
.signup_wrap.myinfo_wrap form .job_div label::before{content: ""; width: 28px; height: 28px; position: absolute; left: 0; top: 0; background: url(../image/common/check_bg.svg) no-repeat; background-size: 28px 56px;}
.signup_wrap.myinfo_wrap form .job_div input[type=radio]:checked+label::before{background-position:0 -28px}

/* Mobile Signup Form Enhancements */
.signup_wrap .dl_list dl dt {
    width: 100%;
    padding-top: 12px;
    text-align: left;
    color: #333;
    vertical-align: top;
    font-weight: 700;
    font-size: 1.1em;
    display: block;
}

.signup_wrap .dl_list dl dd {
    width: 100%;
    position: relative;
    padding: 10px 0;
    font-size: 1em;
    color: #333;
}

.signup_wrap .form_input,
.myinfo_wrap .form_input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd !important;
    border-radius: 4px;
    background-color: #fff !important;
    font-size: 1rem;
    color: #333 !important;
    box-sizing: border-box;
}

.signup_wrap .form_input:focus,
.myinfo_wrap .form_input:focus {
    outline: none;
    border-color: #504bff !important;
}

.signup_wrap .select_ui select,
.myinfo_wrap .select_ui select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 1rem;
    color: #333;
    margin-bottom: 0.3rem;
}

.signup_wrap .form_input[disabled],
.myinfo_wrap .form_input[disabled] {
    background-color: #f5f5f5 !important;
    color: #666 !important;
    cursor: not-allowed;
}

.signup_wrap .btn_ui {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.signup_wrap .btn_ui.bg_blue {
    background-color: var(--main_color);
    color: white;
}

/* Nice ID Auth Button Styling */
.signup_wrap #btnNiceIdAuth {
    background: var(--main_color);
    color: white;
    padding: 15px 30px;
    font-size: 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

/* Error field highlighting */
.signup_wrap .error-field {
    border-color: #ff4757 !important;
    background-color: #fee !important;
}

/*회원가입 완료*/
.join_comp_wrap .title_p{text-align:center;font-size:1.3em;line-height:1.5em;}
.join_comp_wrap .email_box .form_input{text-align:left;max-width:370px;margin:0 auto;font-size: 1rem;border:none;}
.join_comp_wrap dl{padding-top:10px;}
.join_comp_wrap dl dt{max-width:370px;width:100%;margin:0 auto;padding:15px 0 10px;font-weight:700;font-size:1.1em;color:var(--font_sub2)}
.join_comp_wrap .btns{margin:30px 0 20px;text-align:center;}
.join_comp_wrap .btns a{color:var(--font_sub2);}

/****구매내역****/
/*영역2개 공통리스트*/
/*사용방법
    <div class="two_area_list">
        <h3 class="group_title">리스트 제목</h3>//생략가능
        <ul>
            <li class="item">
                <div class="title">
                    <h5>
                        <small>작은제목</small>
                        <span>큰제목 <span>큰제목의 작은제목</span></span>
                    </h5>
                    <ul class="right_area clear">
                        <li>제목옆 오른쪽 영역 목록1</li>
                        <li>제목옆 오른쪽 영역 목록2</li>
                    </ul> //생략가능
                </div>
                <div class="sub"> //태그 변경 가능
                    내용
                </div>
            </li>
        </ul>
    </div>
*/
.two_area_list>ul>li{margin-bottom:10px;border:1px solid var(--bord_main);-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.two_area_list>ul>li.nodata,
.two_area_list>ul>li>.title{position:relative;display:block;padding:10px 14px 10px;min-height:60px;background-color:var(--back_point);}
.two_area_list>ul>li>.title{-webkit-border-radius: 3px 3px 0 0;-moz-border-radius: 3px 3px 0 0;border-radius: 3px 3px 0 0;}
.two_area_list>ul>li.nodata{text-align:center;line-height:58px;}
.two_area_list>ul>li>.title h5{font-weight:700;}
.two_area_list>ul>li>.title h5 *{display:block;width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.two_area_list>ul>li>.title h5 small{margin-bottom: 3px;font-size:0.9em;color:#78aa46;}
.two_area_list>ul>li>.title h5 span{font-size:1.25em;}

.two_area_list>ul>li>.sub{position:relative;padding:12px 14px 10px;background-color:var(--bord_sub);word-break:break-all;-webkit-border-radius: 0 0 3px 3px;-moz-border-radius: 0 0 3px 3px;border-radius: 0 0 3px 3px;}
.two_area_list>ul>li>.sub .text{padding:12px 16px}
.two_area_list>ul>li>.sub p{line-height:18px}
.two_area_list>ul>li>.title .right_area{position:absolute;right:14px;top:10px}
.two_area_list>ul>li>.title .right_area>li{float:left;margin-left:18px}
.two_area_list>ul>li>.title .right_area>li:first-child{margin-left:0}

.buylist_wrap .two_area_list>ul>li>.title{min-height:0;padding:14px;}
.buylist_wrap .nodata{padding:20px 0;text-align:center;background-color: var(--back_point);border-radius:2px;}

/*가격표시*/
.price{position:relative}
.price>div{float:left;}
.price>div>div{float:left;}
.price .val>*{vertical-align:middle}
.price .val strong{font-weight:700;font-size:1.167em}
.price .line_thr{color:var(--font_dis)}
.price .line_thr strong{text-decoration: line-through}
.price .real_price{padding-left:28px;background:url(../image/contents/price_arw.svg) no-repeat 10px center;background-size:8px 12px}

/*유형*/
.types>*{float:left;width:30px;height:30px;line-height:30px;text-align:center;padding-right: 2px;}
.types>dt{width: auto;margin-right: 7px;}
.types>dd{margin-left:3px;font-size:1.5em;font-weight:700;font-family:verdana,Arial;color:var(--font_main);background-color:var(--main_color);letter-spacing: -2px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.types dd.all{background-color:var(--sub_red);font-size: 1.2em;letter-spacing: -1px;padding-right: 0;}
.types>dd.mock{width:auto;padding:0 10px;}
.types dt+dd{margin-left:0}

/*파랑날짜 (만료일 등)*/
.days>*{float:left;height:30px;line-height:30px;}
.days>dt{margin-right:7px;}
.days>dd{padding:0 10px;background-color:var(--back_main);color:var(--font_main);font-size:1.5em;font-weight:700;letter-spacing: -1px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

/*======오답노트=======*/
.wrong_list .list{padding:0 4px;}
.wrong_list .list>ul>li{float:left;width:50%;}
.wrong_list .list>ul>li .a_wrap{padding: 8px 4px 0px 4px;}
.wrong_list .list>ul>li a{display:block;border-radius:5px;border:1px solid #ddd;background-color:var(--back_point);font-weight:700;overflow:hidden}
.wrong_list .list>ul>li.disabled a{color:var(--font_sub2);cursor:default;}
.wrong_list .list>ul>li.nodata{text-align:center;padding:15px 0;width:100%;border:1px solid var(--bord_sub);border-radius:5px;margin: 8px 0;background: var(--back_point);}

.wrong_list .list>ul>li a .image{font-size:0}
.wrong_list .list>ul>li a .image img{width:100%;height:auto}
.wrong_list .list>ul>li a .location{text-align:center;height:35px;line-height:33px;}
.wrong_list .list>ul>li a .location .arw{width:13px;}

/*====즐겨찾기====*/
#favorList li {background-color: var(--bord_main);}
#favorList li a{padding:14px 40px 14px 45px}
#favorList li a .q_icon{position:absolute;left:10px;top:50%;margin-top:-12px;color:var(--font_main);width:25px;height:25px;line-height:25px;font-size:1.250em;font-weight:800;color:var(--font_main);border-radius:13px;background-color:var(--main_color);text-align:center}

#favorList li .cnt{font-weight:700;padding:14px 10px 14px 45px; background:var(--bord_sub) url(../image/common/icon_location.svg) no-repeat 10px center;background-size:25px}
#favorList li .cnt .location{line-height: inherit}
#favorList li.disabled .cnt{font-weight:400;}

/*====학습가이드===*/
.exp_wrap{padding-top: 2rem;text-align:center;line-height:20px;background-color:var(--back_main)}
.guide_list_wrap .guide_list{background-color:var(--back_main);text-align:center;}

.guide_list_wrap .guide_list>ul>li>h3{height:42px;line-height:40px;background-color:var(--back_header);border-top:1px solid var(--bord_main);border-bottom:1px solid var(--bord_sub);font-size:1.167em;font-weight:700;margin-block:2rem 1rem;}

.guide_list_wrap .guide_list>ul>li .img{width:30vw;max-width:150px;height:30vw;max-height:150px;margin:0 auto;background:url(../image/guide/guide.svg) no-repeat; background-size:300% 400%; border-radius: 24px; position: relative;}

.guide_list_wrap .guide_list:not(.refundGuide)>ul>li>ul{display: flex;justify-content: space-between;gap: 1rem;}
.guide_list_wrap .guide_list>ul>li>ul>li{flex: 1;}
.guide_list_wrap .guide_list>ul>li>ul>li p{font-size:1.167em;font-weight:700;text-indent: 0;line-height: 200%;}
.guide_list_wrap .guide_list>ul>li>ul>li span{line-height:20px;}

.guide_list_wrap .guide_list>ul>li .img::after{content: "";display: block;position: absolute;top:0;right:0;width:6vw;max-width:30px;height: 6vw;max-height:30px;background: transparent;color:var(--font_main);font-weight: 700;border-radius: 50%;align-content: center;border: 3px solid var(--font_main);}
.guide_list_wrap .guide_list>ul>li>ul>li:nth-of-type(1) .img::after{content: "1";}
.guide_list_wrap .guide_list>ul>li>ul>li:nth-of-type(2) .img::after{content: "2";}
.guide_list_wrap .guide_list>ul>li>ul>li:nth-of-type(3) .img::after{content: "3";}

.guide_list_wrap .guide_list>ul>li.blue_icons .img{background-color: var(--main_color);}
.guide_list_wrap .guide_list>ul>li.blue_icons .li2 .img{background-position:50% 0}
.guide_list_wrap .guide_list>ul>li.blue_icons .li3 .img{background-position:100% 0}

.guide_list_wrap .guide_list>ul>li.yellow_icons .img{background-color: var(--main_color2);}
.guide_list_wrap .guide_list>ul>li.yellow_icons .li1 .img{background-position:0 33.33%}
.guide_list_wrap .guide_list>ul>li.yellow_icons .li2 .img{background-position:50% 33.33%}
.guide_list_wrap .guide_list>ul>li.yellow_icons .li3 .img{background-position:100% 33.33%}

.guide_list_wrap .guide_list>ul>li.red_icons .img{background-color: var(--sub_color1);}
.guide_list_wrap .guide_list>ul>li.red_icons .li1 .img{background-position:0 66.66%}
.guide_list_wrap .guide_list>ul>li.red_icons .li2 .img{background-position:50% 66.66%}
.guide_list_wrap .guide_list>ul>li.red_icons .li3 .img{background-position:100% 66.66%}

.guide_list_wrap .guide_list>ul>li.green_icons .img{background-color: var(--sub_color2);}
.guide_list_wrap .guide_list>ul>li.green_icons .li1 .img{background-position:0 100%}
.guide_list_wrap .guide_list>ul>li.green_icons .li2 .img{background-position:50% 100%}
.guide_list_wrap .guide_list>ul>li.green_icons .li3 .img{background-position:100% 100%}

/*=======문제 맛보기======*/
.tasty_list .collapse ul>li{background-color: var(--back_point); border: 1px solid var(--bord_sub);}
.tasty_list .collapse ul>li>.title h5 span{font-size:1.2em;}

.tasty_list .collapse>ul>li>.cnt{padding:0;border-radius:0 0 5px 5px; background: var(--font_sub1);color: var(--black_main)}
.tasty_list .collapse>ul>li>.cnt a{padding:14px 50px 14px 45px;display:block;border:0;border-top:1px solid var(--bord_sub);background:none;border-radius:0}

.tasty_list  .collapse ul>li dl{min-height:inherit}
.tasty_list  .collapse ul>li dt{left:-35px;width:25px}
.tasty_list  .collapse ul>li dt .icon{width:25px;height:25px;line-height:26px;background-color:var(--font_dis);font-size:0.875em}
.tasty_list  .collapse ul>li dd div{white-space: nowrap;overflow:hidden;text-overflow: ellipsis}

/*==========컨텐츠 구매==========*/
.content_item {display: flex; flex-wrap: wrap; color: var(--font_main); background-color: var(--back_point); margin: 1.4rem; border-radius: 0.4rem; overflow: hidden; font-size: 1rem;}
.content_item > .content_desc {width: 100%; padding: 2.8rem;}
.content_item > .content_desc > div {margin-bottom: 1.4rem; font: 1.6rem; font-weight: 700;}
.content_item > .content_desc > small {color: var(--font_sub2); font: 14px;}
.content_item > .content_price {display: flex; align-items: center; justify-content: center; width: 100%; padding: 1rem; padding-bottom: 2.8rem;}
.content_item > .content_price .price_before {color: var(--bord_main);text-decoration: line-through;}
.content_item > .content_price .price_arrow {color: var(--bord_main);}
.content_item > .content_price .price_after {font-size: 1.6rem; font-weight: 700;}
.content_item > .content_purchase {display: flex; align-items: center; justify-content: center; width: 100%; background-color: var(--main_color); font: 1.4rem; font-weight: 700; padding-block: 1rem;}

/*==========컨텐츠 구매==========*/
.buy_complete_wrap .collapse ul>li>.title{background-color: var(--back_point);}
.buy_complete_wrap .collapse ul>li:first-child{background-color: var(--back_point);}
.buy_complete_wrap .title_p{padding-bottom:30px;text-align:center;line-height:1.4em;font-size:1.2em;font-weight:700;}
.buy_complete_wrap .collapse ul>li>.title h5{font-size:1.2em;font-weight:700;line-height: 25px;}
.buy_complete_wrap .collapse ul>li>.cnt{padding:14px;line-height:1.4em;}
.buy_complete_wrap .collapse ul>li dl{min-height:0;}
.buy_complete_wrap .collapse ul>li dt{width:65px;top:5px;}
.buy_complete_wrap .collapse ul>li dd{padding-left:65px;}
.buy_complete_wrap .collapse ul>li dd span{display:inline-block;width: 25px;height: 25px;line-height: 25px;background-color: var(--main_color);font-size: 0.875em;font-weight: 700;border-radius:50%;text-align:center;color:var(--font_main);}
.buy_complete_wrap .collapse ul>li dd.all span{background-color:var(--sub_red);}

.buy_complete_wrap .big_price{padding:30px 10px 10px;border-bottom:1px solid var(--bord_main);font-size:1.3em;font-weight:700;}
.buy_complete_wrap .big_price>div:first-child{padding-top:12px;}
.buy_complete_wrap .big_price strong{font-size:1.7em;letter-spacing:-2px;padding-right:5px;}

.buy_complete_wrap .btns{padding-top:10px;background-color:var(--back_header);border-top:1px solid var(--bord_main);text-align:center;}
.buy_complete_wrap .btns a{min-width:120px;margin-left:10px; background-color: var(--main_color);}
.buy_complete_wrap .btns a:first-child{margin-left:0;}

.content_wrap{height:100%;overflow-y:auto}
.content_wrap .two_area_list>ul>li>.title{min-height:30px;padding:14px;}
.content_wrap .two_area_list>ul>li>.title h5{width:auto;font-size:1.25em;}
.content_wrap .two_area_list>ul>li>.title .right_area{position:static;padding-right: 0px;}
.content_wrap .two_area_list>ul>li .price .val strong{font-size:1.3em;}

/*==========컨텐츠 구매 > 결제진행 팝업==========*/
.buy_complete_popup .layer_content{padding:20px 0;}
.buy_complete_popup .btns{padding:0;}

/*============컴텐츠 구매>유형입력===========*/
.content_wrap .level_icon{right:10px}

.content_wrap .type_list{padding-bottom:46px}
.content_wrap .type_list .top_title{text-align:center;padding-bottom:10px}

.content_wrap .type_list>.two_area_list>ul>li .title{min-height:inherit;padding:14px 35px 14px 35px}
.content_wrap .type_list .check_div{position:absolute;left:10px;top:50%;margin-top:-9px}
.content_wrap .type_list .check_div label{display:block;width:18px;height:18px;background:url(../image/contents/check.svg) no-repeat -18px 0;background-size:200% 100%}
.content_wrap .type_list .check_div.on label{background-position: 0 0}
.content_wrap .type_list .check_div input{display:block;position:absolute;left:-9999px}
.content_wrap .type_list .two_area_list>ul>li>.title h5{font-size:1em;}

.content_wrap .type_list .disabled .title{background-color:var(--font_dis)}
.content_wrap .disabled .level_icon{background-color:var(--font_dis)}

.type_show{position:fixed;left:0;bottom:0;width:100%;height:56px;border-top:1px solid var(--bord_sub);background:var(--back_point)}
.type_show .submit_btn{position:absolute;right:10px;top:50%;margin-top:-17px}
.type_show dl{position:absolute;left:10px;top:50%;margin-top:-12px}
.type_show dl dt, .type_show dl dd{float:left;height:25px;line-height:25px}
.type_show dl dd{margin-left:5px;width:25px;background-color:var(--main_color);text-align:center;font-weight:700;color:var(--font_main);border-radius:13px}


/* ===============쿠폰관리====================================*/
.coupon-container {
  /* 사용중인 쿠폰*/
  padding: 20px;
  background: #27282c;
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  /* border: 1px solid #e0e0e0; */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.coupon-container .coupon-status-banner {
  background-color: transparent;
  color: white;
  padding: 12px;
  text-align: center;
}
.coupon-container .coupon-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 400;
}
.coupon-container .coupon-date {
  font-size: 16px;
  color: #999;
}
.coupon-container .coupon-date #startDate {
  font-size: 14px;
}
.coupon-container .coupon-date #endDate {
  font-size: 16px;
  font-weight: 500;
  color: #504bff;
}
.coupon-container .coupon-details {
  border-radius: 10px;
  margin-top: 20px;
  padding: 16px 25px;
  line-height: 1;
  background-color: rgba(0, 0, 0, 0.0784313725);
}
.coupon-container .coupon-details h3 {
  color:#666;
  margin: 0 0 12px 0;
  font-size: 14px;
}
.coupon-container .coupon-details p {
  color:#666;
  line-height: 1.5;
  font-size: 16px;
}
.content_wrap #have_coupon {
  /* 쿠폰등록상자 */
  position: relative;
  width: 90%;
  margin: 20px auto;
  border-radius: 7px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgb(150, 98, 216) 34%, rgb(80, 75, 255) 100%);
  padding: 1rem 1.5rem;
  padding-top: 1.5rem;
  border: none;
}
#have_coupon #have_coupon_text {
  color: white;
  font: 1.2rem / 1.2rem "Spoqa Han Sans Neo", "sans-serif";
}
#have_coupon button {
  margin-top: 15px;
  background: transparent;
  height: 3rem;
  color: white;
  border: 1px solid;
  border-color: white;
  border-radius: 50px;
  font: 0.9rem / 0.9rem "Spoqa Han Sans Neo", "sans-serif";
}

/*==========컨텐츠 구매 > 쿠폰입력==========*/
.coupon_wrap{padding-top:103px;padding-bottom:103px;text-align:center}
.coupon_wrap h3{font-size:1.667em;font-weight:700}
.coupon_wrap p{padding-top:11px;color:var(--bord_main)}
.coupon_wrap .input_div,.coupon_wrap button{max-width:330px;margin:0 auto}
.coupon_wrap .input_div{margin-top:27px;margin-bottom:10px;padding-top:14px;border-radius: 5px;border:1px solid var(--bord_sub);background-color:var(--back_point);color:var(--font_main)}
.coupon_wrap .input_div input{border:0;width:22%;text-align:center;font-size: 1rem;outline: none;}
.coupon_wrap .input_div span{width:5%}

/*우리반 시험지*/
.samtest_div .two_area_list>ul>li>.title{position:relative;padding:14px}
.samtest_div .two_area_list>ul>li>.sub .s_class{float:left;}
.samtest_div .two_area_list>ul>li>.sub .situ{float:right;line-height:25px;font-weight:700}

.samtest_div .two_area_list>ul>li h5{float:left;padding:6px 0}
.two_area_list>ul>li>.title .right_area{position:static;float:right;padding-right:55px}
.samtest_div .two_area_list>ul>li .right_area>li>ul>li{line-height:16px;margin-bottom: 0.8rem;}
.samtest_div .two_area_list>ul>li .right_area strong{color: var(--font_main); padding: 0.2rem 0.5rem; border-radius: 5rem;}
.samtest_div .two_area_list>ul>li .right_area .type_li {margin-bottom: 0.8rem;}
.samtest_div .two_area_list>ul>li .right_area .type_li strong{background: var(--sub_color1);}
.samtest_div .two_area_list>ul>li .right_area .clos_li strong{background: var(--font_dis); margin-left: 0.2rem;}
.samtest_div .two_area_list>ul>li .right_area .tt{display:inline-block;width:38px;color:#aaa;}

.samtest_div .two_area_list>ul>li .title .arrow{display:block;position:absolute;right:14px;top:50%;margin-top:-12px;width:25px;height:25px;background:url(../image/study/icon_arw_right.svg) no-repeat;background-size:contain}

.samtest_div .go_class_btn {display:inline; padding:15px; font-size:1.5em; }

/*우리반*/
.s_class{padding-left:35px;background:url(../image/common/flag_icon.svg) no-repeat left center;background-size:25px}
.s_class li{float:left;line-height:25px;padding-left:20px;background:url(../image/common/test_sam_ra.svg) no-repeat 8px center;background-size:6px 8px; }
.s_class li:first-child{background:none;padding:0}

/*우리반 시험지 > 결과리스트*/
.testresult_list.samtest_result>div>p{padding:9px 10px;font-weight:700;}
.testresult_list.samtest_result .close_div .collapse ul>li .cnt>dl>dd{padding-right:0}
.testresult_list.samtest_result .close_div .collapse ul>li>.togglebtn .right_area dd{color:var(--font_sub2)}

.testresult_list.samtest_result .collapse ul>li>.togglebtn .right_area dt{top:0;}
.testresult_list.samtest_result .collapse ul>li>.togglebtn .right_area dd strong{font-size: 1.2em; letter-spacing: -1px; line-height: 26px;}

/*========쪽지함=======*/
.input_check.square{display:inline-block;position:relative;height:18px;padding-left:28px;line-height:18px;font-size:1em;}
.input_check.square .icon{width:15px;height:15px;position:absolute;left:0;top:0;background:url(../image/common/check_bg_square.svg) no-repeat 0 0;background-size:15px 30px;}
.input_check.square input{display:block;position:absolute;left:-9999px}
.input_check.square input:checked+.icon{background-position:0 -15px}

.circle_btn{display:inline-block;width:34px;height:34px;text-indent:100%;white-space:nowrap;overflow:hidden;outline:none;
    -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}

.circle_btn.trash_btn{background:var(--back_point) url(../image/common/icon_btn.svg) no-repeat 50% 3px;background-size:25px 150px;}
.circle_btn.send_btn{background:var(--main_color) url(../image/common/icon_btn.svg) no-repeat 50% -46px;background-size:25px 150px;}
.circle_btn.search_btn{width:35px;height:35px;background:var(--main_color) url(../image/common/icon_btn.svg) no-repeat 50% -97px;background-size:25px 150px;}

.message_wrap{padding-bottom: 70px;}
.mess.fixed_bottom{background-color:var(--back_header);border-top:1px solid var(--bord_main);}
/* .message_wrap .form_input{background-color:#fff;} */
.message_wrap .fixed_bottom {position: relative;}

.message_wrap .collapse ul>li>.title{position:relative;padding:5px 15px 15px 40px;background-color: var(--back_point);}
.message_wrap .collapse ul>li>.title .input_check{z-index:2;position:absolute;left:0;top:0;padding:0;width:40px;height:40px;}
.message_wrap .collapse ul>li>.title .input_check.square .icon{left:13px;top:13px;}
.message_wrap .collapse ul>li>.title .top_info{height:30px;line-height:30px;}
.message_wrap .collapse ul>li>.title .top_info .name{color:var(--font_sub2);}
.message_wrap .collapse ul>li>.title .top_info .date{color:var(--main_color2);font-weight:700;}
.message_wrap .collapse ul>li>.title .msg{display: block;width: 100%;font-size: 1.25em;font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.message_wrap .collapse ul>li>.cnt{padding:10px;padding-left: 40px;}
.message_wrap .collapse ul>li>.cnt .new{padding-top: 7px;font-weight: 700;}

/*쪽지 보내기*/
.message_send_wrap .write_wrap{margin-top:10px;}
.message_send_wrap .write_wrap h4{font-weight:700;margin-bottom:15px;}
.message_send_wrap .top_wrap{margin-bottom:30px;}
.message_send_wrap .reply_wrap{margin-top:30px;}
.message_send_wrap .no_mt{margin-top:0;}
.message_send_wrap .no_mb{margin-bottom:0;}
.message_wrap .collapse ul>li:first-child{background-color: var(--back_main);}

.message_send_wrap .top_wrap .member_wrap{position:relative;padding-right:43px;}
.message_send_wrap .top_wrap .member_wrap .form_input{display:inline-block;width:auto;margin-right:3px;margin-bottom:3px;}
.message_send_wrap .top_wrap .member_wrap .add_btn{position:absolute;top:-7px;right:0;width:45px;height:45px;background:var(--main_color) url(../image/common/icon_plus.svg) no-repeat 50%;background-size:22px 22px;}
.message_send_wrap .top_wrap .member_wrap .item{display:inline-block;width:auto;height: 30px;line-height: 30px;padding:0 15px;margin-right:3px;margin-bottom:5px;color:var(--font_main);text-align: center;background-color:transparent;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;border: 1px solid var(--font_main);}
.message_send_wrap .top_wrap .member_wrap .item.origin{background-color: transparent}

.message_send_wrap .class_list{margin-top:10px;margin-bottom:20px;background-color:var(--back_point);border:1px solid var(--bord_sub);border-width:1px 0;}
.message_send_wrap .class_list .nodata{padding:15px 0;text-align:center;}
.message_send_wrap .class_list .input_check{display:block;width:100%;height:45px;line-height:45px;padding-left:10px;padding-left:35px;border-top:1px solid var(--bord_sub);cursor:pointer;color:var(--font_main);}
.message_send_wrap .class_list .input_check:first-child{border-top:0;}
.message_send_wrap .class_list .input_check .icon{left:10px;top:14px;}
.message_send_wrap .f_r{width: 100%;}
.message_send_wrap .btn_ui{width: 100%;}

/*쪽지 보내기 완료*/
.message_complete_wrap{width:100%;text-align:center;padding:100px 0;}
.message_complete_wrap .complete{font-weight: 700;font-size: 1.3em;}
.message_complete_wrap .btns{padding-top: 50px;text-align:center;}
.message_complete_wrap .btns button{display:inline-block;}

/****쪽지보기****/
.message_view_wrap .write_wrap{margin-top:5px;}
.message_view_wrap .form_input.textarea{font-size: 1.2em;line-height: 1.6em;line-height:1.4em;background-color: var(--bord_sub); padding: 0.8rem; color: var(--font_main); font-size: 1rem; border: 1px solid var(--font_sub1); border-radius: 2px; font-weight: 700;min-height: 300px;     white-space: unset}

.message_send_wrap textarea{font-size: 1rem; background-color: var(--bord_sub);border: 1px solid var(--font_sub1);}
.message_send_wrap textarea::placeholder{color: var(--font_sub2);}

/******우리반 리스트******/
.myclass_wrap .collapse ul>li>.title{position:relative;padding-right:45px;background-color: var(--back_point);}
.myclass_wrap .delete_btn{position:absolute;top:15px;right:10px;display:block;width:30px;height:30px;background:var(--sub_red) url(../image/common/x.svg) no-repeat 50%;background-size:10px 10px;}
.myclass_wrap .collapse ul>li>.title .date{color:var(--main_color2);letter-spacing: -1px;padding-bottom: 5px;}
.myclass_wrap .collapse ul>li>.title .name{display: block;width: 100%;font-size: 1.25em;font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.myclass_wrap .collapse ul>li>.cnt{background-color:var(--bord_sub);color:var(--font_main);-webkit-border-radius: 0 0 3px 3px;-moz-border-radius: 0 0 3px 3px;border-radius: 0 0 3px 3px;}

.find_class_wrap .searchfrm{background-color:var(--back_main);}
.find_class_wrap .searchfrm .search_wrap{width:300px;margin:0 auto;}
.find_class_wrap .searchfrm .search_wrap>*{float:left;display:block;width:auto;}
.find_class_wrap .searchfrm .search_btn{width:35px;}
.find_class_wrap .searchfrm .select_ui,
.find_class_wrap .searchfrm .form_input{height:34px;line-height:33px;border:1px solid var(--bord_sub);background:transparent;}
.find_class_wrap .searchfrm .select_ui select{font-size:1em;padding:8px 0 8px 10px;line-height: 25px;text-indent:10px;border:0;}
.find_class_wrap .searchfrm .select_ui{width:95px;border-right:0;border-radius: 2px 0 0 2px;}
.find_class_wrap .searchfrm .form_input{width: 160px;padding:5px;line-height:1em;margin-right: 10px;border-left:0;border-radius: 0 2px 2px 0;}

.find_class_wrap .name{padding:3px 0;}

/***** selectbox 스타일 *****/
span.customSelect {
	width: 100%;
  padding: 13px 10px;
  border: 1px solid var(--bord_sub);
  border-radius: 3px;
  background: var(--back_main) url(../image/common/select_bg.svg) no-repeat right center; background-size: 2rem 1rem;
}
span.customSelect option {
    background: var(--back_main);
    border: 1px solid var(--bord_sub);
}

/* 선생님찾기 select */
.find_class_wrap .searchfrm span.customSelect{
	border: 0;
	border-right: 1px solid var(--bord_sub);
	background-color: transparent;
	border-radius: 0;
	height: 33px;
	padding: 0;
	line-height: 33px;
	padding-left: 15px;
}

/* 비밀번호 찾기 */
.pw_find label{color: var(--font_sub2);}
.pw_find input{color: var(--font_main);font-size: 1rem;border: none;outline: none;margin-bottom: 1rem;background-color: transparent;}

/* 명예의전당 */
.hof_content {position: relative; z-index: 0;}
.hof_wrap {width: 100%; margin-top: 2rem; position: relative;}
.hof_wrap .qutation {position: relative;}
.hof_wrap .qutation::before {position: absolute; content: ""; display: block; top: 7px; left: calc(10% + 40px); width: calc(30%); height: 1px; background: var(--bord_sub);}
.hof_wrap .qutation img {margin-left: 10%;}
.hof_wrap .qutation p {width: 80%; margin: 0 auto; color: var(--font_sub2); margin-top: 1rem;}

.head_userScore {position: relative; width: 90%; background: linear-gradient(90deg, rgb(150, 98, 216) 34%, rgb(80, 75, 255) 100%); margin: 0 auto; border-radius: 1rem; margin-top: 80px; padding: 0.5rem;}
.head_userScore .trophy {position: absolute; right: 0; top: -80px; max-width: 80px;}
.head_userScore .trophy img {width: 100%; object-fit: cover;}
.head_userScore .rank {font-size: 0.8rem; text-align: center; margin-block: 1rem;}
.head_userScore .rank .user_rank {font-size: 1.4rem; font-weight: 700;}
.head_userScore .score ul {display: flex; gap: 1rem; width: 100%; justify-content: space-around; margin-block: 1rem; text-align: center;}
.head_userScore .score ul li span {display: block;}
.head_userScore .score ul li span:last-child {font-size: 1.3rem;}

.head_title {width: 70%; margin: 0 auto; text-align: center; padding-block: 3rem; position: relative;}
.head_title::before {content: ""; display: block; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 140%; height: 400px; background: url(../image/hof/confetti.png) no-repeat center top / 100%; z-index: -1;}
.head_title span {display: block; font-size: 1.2rem; line-height: 240%; position: relative;}
.head_title span::before, .head_title span::after {content: ""; display: block; position: absolute; width: 40%; height: 1px; top: 50%; background: var(--bord_sub);}
.head_title span::before {left: 0;}
.head_title span::after {right: 0;}
.head_title .title_img {width: 100%; border-bottom: 1px solid var(--bord_sub); padding-bottom: 1rem;}
.head_title .title_img img {width: 60%; object-fit: cover;}

.cont_tab_high {margin-block: 2rem 1rem;}
.cont_tab_high .tabWrap {width: 60%; min-width: max-content; margin: 0 auto; display: flex; text-align: center;}
.cont_tab_high .tabWrap li {flex: 1; padding: 0.5rem 1rem; border: 1px solid var(--bord_sub); color:var(--bord_sub); font-size: 0.9rem; cursor: pointer; white-space: nowrap;}
.cont_tab_high .tabWrap li.on {background: var(--bord_sub); color: var(--font_main);}

.cont_rangkingWrap {margin-block: 1rem; width: 100%;}
.cont_rangkingWrap .tabCont {width: 100%; justify-content: space-between; margin: 0 auto; gap: 0.5rem; display: none;}
.cont_rangkingWrap .tabCont li {flex: 1; text-align: center; position: relative;}
.cont_rangkingWrap .tabCont .rank-first {order: 2; width: 100%;}
.cont_rangkingWrap .tabCont .rank-second {order: 1; transform: translateY(1rem);}
.cont_rangkingWrap .tabCont .rank-third {order: 3; transform: translateY(1rem);}
.cont_rangkingWrap .tabCont li > img {width: 100%; object-fit: cover;}
.cont_rangkingWrap .tabCont li > *:not(img) {position: absolute; left: 50%; transform: translateX(-50%); width: 100%;}

.cont_rangkingWrap .tabCont li > span {top: 10%; display: block; width: 40px; height: 60px; margin: 0 auto; align-content: center;}
.cont_rangkingWrap .tabCont li > p > span:first-child {display: block; color: var(--font_sub2)}
.cont_rangkingWrap .tabCont li > p > span:last-child {display: block; font-size: 3.6vw; font-weight: 700;}
.cont_rangkingWrap .tabCont .rank-first .first_yellow {width: 40px; max-width: 8vw; background: url(../image/hof/first_yellow.png) no-repeat center center / 100%; color: var(--black_main); font-weight: 700;}
.cont_rangkingWrap .tabCont li > p {top: 35%;}
.cont_rangkingWrap .tabCont li > div {bottom: 28%; font-size: 3vw; line-height: 3vw;}
@media screen and (min-width: 801px) {
    .cont_rangkingWrap .tabCont li > p > span:last-child {font-size: 1.4rem;}
    .cont_rangkingWrap .tabCont li > div {bottom: 28%; font-size: 1.4rem; line-height: 1.4rem;}
}
.cont_rangkingWrap .tabCont.on {display: flex;}

.rank_table .main_button {display: flex; width: max-content; margin: 0 auto; gap: 0.5rem; justify-content: space-between; margin-top: 4rem;}
.rank_table .main_button button, .rank_table .main_button input[type="date"] {background: var(--bord_sub); width: 2rem; height: 2rem; border-radius: 4px; cursor: pointer; position: relative;}
.rank_table .main_button input[type="date"] {background: var(--bord_sub) url(../image/hof/calender.png) no-repeat center center / 60%;}
/* input date 날짜, 아이콘 숨기기 */
.rank_table input[type=date]::-webkit-datetime-edit-text,
.rank_table input[type=date]::-webkit-datetime-edit-month-field,
.rank_table input[type=date]::-webkit-datetime-edit-day-field,
.rank_table input[type=date]::-webkit-datetime-edit-year-field,
.rank_table input[type=date]:valid::before {-webkit-appearance: none; display: none;}
.rank_table input[type=date]::-webkit-date-and-time-value {opacity: 0;}

.rank_table .main_button input[type="date"]::-webkit-calendar-picker-indicator {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer;}
.rank_table .main_button label {position: relative;}
.rank_table .main_button label img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; object-fit: cover;}
.rank_table .main_button .hof_date {margin-inline: 1rem; text-align: center; font-size: 1rem; line-height: 32px;}

.rank_table .data_none {border-top: 2px solid var(--bord_main); border-bottom: 1px solid var(--bord_sub); text-align: center; padding: 2rem 1rem; margin-bottom: 1rem; color: var(--font_sub2);}

.rank_table .hof_table {border: 0; width: 100%; font-size: 0.8rem;}
.rank_table .hof_table th {display: block;}
.rank_table .hof_table tr {border-top: 1px solid var(--bord_sub); display: block; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 1rem;}
.rank_table .hof_table tr:first-child {border-top: 2px solid var(--bord_main);}
.rank_table .hof_table tr img {max-width: 30px; object-fit: cover;}
.rank_table .hof_table td {display: block; text-align: center; width: 21%; color: var(--font_sub2);}
.rank_table .hof_table td:nth-child(1) {font-size: 1rem; font-weight: 700;}
.rank_table .hof_table td:nth-child(1),
.rank_table .hof_table td:nth-child(n+2):nth-child(-n+3) {color: var(--font_dis);}
.rank_table .hof_table td:nth-child(2) {width: 49%;}
.rank_table .hof_table td:nth-child(4) {font-size: 1rem; font-weight: 700; color: var(--font_main);}
@media screen and (max-width: 359px) {
    .rank_table .hof_table td:last-child {flex: 1;}
}


/*24.12.02 choi*/
/*멤버십 정보*/
.mem_top {
  margin-top: 32px;
  text-align: center;
}
.mem_top_img {
  width: 100%;
}
.mem_top_text {
  font-size: 16px;
  position: relative;
  width: fit-content;
  max-width: 90%;
  word-break: keep-all;
  margin: 0 auto;
  margin-top: 16px;
  line-height: 1.4;
}
.mem_top_text::after,
.mem_top_text::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 15px;
  height: 14px;
  background-image: url(../image/hof/quote.png);
  top: 0;
}
.mem_top_text::after {
  transform: rotate(180deg);
  right: -24px;
}
.mem_top_text::before {
  left: -24px;
}

.mem_mid {
  margin-top: 32px;
}
.mem_mid_contents {
  background-color: #27282c;
  width: 90%;
  margin: 0 auto;
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: 32px;
  padding: 16px 8px;
}
.mem_mid_contents .cont_icon {
  width: 64px;
  height: 64px;
  margin-left: 16px;
}
.mem_mid_contents:first-child img {
  width: 120%;
  height: 100%;
}
.mem_mid_contents:nth-child(2) .cont_icon {
  width: 52px;
  height: 56px;
}
.mem_mid_contents .cont_icon img {
  width: 100%;
  height: 100%;
}
.mem_mid_contents .cont_title {
  color: #b9b7ff;
  font-size: 16px;
  margin-bottom: 4px;
  font-weight: 700;
}
.mem_mid_contents .cont_text {
  font-size: 14px;
}

.mem_bttm {
  margin: 32px 0;
}
.mem_bttm ul {
  width: 90%;
  margin: 0 auto;
}
.mem_bttm ul li {
  color: #9fa4a8;
  padding: 4px 0;
  list-style: disc;
  margin-left: 24px;
}
.mem_bttm ul li a {
  display: inline-block;
  padding: 0 4px;
  color: #eaebed;
}

/*멤버십 결제*/
.payment_top {
  padding-bottom: 32px;
  text-align: center;
  margin-top: 32px;
}
.payment_top .top_title {
  font-size: 24px;
  font-weight: 600;
}
.payment_top .top_text {
  color: #ffffff;
  font-size: 18px;
  margin-top: 8px;
}
.payment_top .top_text span {
  color: #b9b7ff !important;
}
.payment_top .top_warning {
  background-color: #b040ff;
  width: fit-content;
  border-radius: 100vw;
  margin: 0 auto;
  font-size: 14px;
  margin-top: 8px;
  padding: 8px;
}

.payment_mid {
  margin-top: 40px;
}
.mid_contents {
  background-color: #f7f8fa;
  width: 90%;
  border-radius: 8px;
  margin: 0 auto;
  margin-bottom: 24px;
  position: relative;
  padding: 32px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
.payment_mid .on {
  transform: scale(1.02);
  background: linear-gradient(
      90deg,
      rgba(80, 75, 255, 1) 0%,
      rgba(176, 64, 255, 1) 100%
  );
}
.membership_payment_wrap .payment_mid .cont_description {
  left: 50%;
  transform: translate(-50%);
  position: relative;
  display: none;
  border-radius: 8px;
  background: linear-gradient(90deg, rgb(80, 75, 255) 0%, rgb(176, 64, 255) 100%);
  width: 90%;
  padding: 20px;
  cursor: pointer;
  margin-bottom: 4vh;
  margin-top: -10px;
}
.membership_payment_wrap .payment_mid .cont_description > p {
  font-weight: 500;
  color: white;
  padding-left: 15px;
  padding-bottom: 5px;
  font-size: 18px;
}
.cont_description > span {
  text-align: center;
  line-height: 1.6;
  font-size: 14px;
  color: #f7f8fa;
}
.membership_payment_wrap .payment_mid .cont_description > p::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  width: 3px;
  height: 1.5rem;
  margin-left: 10px;
  background-color: #ffffff;
}
.membership_payment_wrap {
  padding-top: 2vh;
  background: linear-gradient(44deg, #1d1d1d 60%, #504bffa6);
}
.payment_mid .on > .cont_price span.discount {
  background-color: #f7f8fa !important;
  color: #504bff !important;
  font-weight: 500;
}
.payment_mid .on .cont_title {
  color: #eaebed !important;
}
.payment_mid .on .cont_price {
  color: white !important;
}
.payment_mid .on .cont_price span {
  color: #eaebed !important;
}
.payment_mid .on .cont_inner p {
  color: #eaebed !important;
}
.mid_contents {
  position: relative;
}
/* event 효과 */
.mid_contents.last::after {
  content: "EVENT";
  scale: 2.5 3;
  font-weight: 700;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 2px;
  translate: -35% 80%;
  transform: rotate(336deg);
  color: #ffffff;
  background: linear-gradient(90deg, rgb(80, 75, 255) 0%, rgb(176, 64, 255) 100%);
  opacity: 0.8;
  opacity: 0.8;
  z-index: 1;
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0.5;
  }
  100% {
      opacity: 1;
  }
}
.mid_contents .now {
  display: block !important;
}
.mid_contents .using {
  display: none;
  background-color: #504bff;
  border-radius: 100vw;
  position: absolute;
  top: -16px;
  left: 12px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  width: 72px;
  text-align: center;
  box-shadow: 2px 2px 10px rgba(25, 25, 25, 0.6);
}
.mid_contents .cont_title {
  color: #504bff;
  font-size: 18px;
  font-weight: 700;
}
.mid_contents .cont_price {
  color: black;
  font-size: 24px;
  font-weight: 700;
}
.mid_contents .cont_price span {
  color: #9fa4a8;
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  padding-left: 8px;
}
.mid_contents .cont_inner ul li {
  width: 100%;
  display: flex;
  column-gap: 8px;
  margin: 8px 0;
  align-items: center;
}
.mid_contents .cont_inner img {
  width: 20px;
  height: 20px;
}
.mid_contents .cont_inner p {
  color: #73787e;
  font-size: 14px;
  width: fit-content;
}
.mid_contents .cont_price .before_price {
  font-weight: 200;
  text-decoration: line-through;
  font-weight: bold;
}
.mid_contents .cont_price .discount {
  display: flex;
  width: fit-content;
  text-align: start;
  padding: 2px 3px;
  font-weight: 500;
  background-color: #504bff;
  color: white;
  border-radius: 5px;
}
.mid_contents .cont_price .vat {
  display: none;
  font-size: 14px;
  color: #9fa4a8;
}

.payment_mid .year_plan {
  width: fit-content;
  padding: 8px 16px;
  background-color: #504bff;
  color: white;
  font-size: 18px;
  font-weight: 500;
  border-radius: 100vw;
  margin: 24px auto;
}

.payment_bttm .off {
  display: none !important;
}
.payment_bttm .on {
  background-color: #504bff !important;
  color: white !important;
}
.payment_bttm {
  text-align: center;
}
.payment_bttm .tooltip_warning {
  background-color: #b040ff;
  width: fit-content;
  border-radius: 100vw;
  margin: 0 auto;
  font-size: 14px;
  margin-top: 32px;
  padding: 8px;
  display: block;
  position: relative;
}
.payment_bttm .tooltip_warning::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  left: calc(50% - 6px);
  bottom: -20px;
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  border-top: 12px solid rgba(176, 64, 255, 1);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid transparent;
}
.payment_bttm .purchase,
.payment_bttm .purchase_change,
.payment_bttm .goBack {
  width: 240px;
  height: 64px;
  line-height: 64px;
  border-radius: 100vw;
  font-size: 18px;
  font-weight: 700;
}

.payment_bttm .purchase,
.payment_bttm .purchase_change {
  background-color: #9fa4a8;
  color: #474c52;
  transition: 0.3s;
}
.payment_bttm .goBack {
  background-color: #73787e;
}
.payment_bttm .purchase {
  margin: 16px 0 40px 0;
}
.payment_bttm .btn_wrap {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 40px;
}


/* EBS 초등 홈스쿨 */
.home_play .home_set .home_list {background: var(--back_point);}
.home_play .home_set .home_list a div {padding: 1rem;}
.home_play .home_set .home_list a div b {line-height: 200%;}

.home_set {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home_list {
    width: 100%;
}

.home_list_a{
    font-size: 16px;
    background-color: var(--back_main);
}

.home_play_a{
    font-size: 16px;
    display: flex;
    align-items: center;
    background-color: var(--back_point);
}

.home_play_a span {
    width: 50%;
    margin-left: 5%;
}

.play_btn {
    width: 50px !important;
    top: 25px;
    left: 50px;
}

.pause_btn {
  width: 50px !important;
  top: 25px;
  left: 50px;
}
/* 아이디, 비밀번호 찾기 통합 */
.join_apply_wrap {
  background: var(--back_point);
  padding: 2.5rem;
  padding-bottom: 3rem;
  max-width: 500px;
  margin: 2rem auto;
}
.join_apply_wrap .tab {
    text-align: center;
    display: flex;
    justify-content: space-around;
    font-size: 1.2rem;
    font-weight: 500;
    margin-block: 1rem 2rem;
}
.join_apply_wrap .tab input[type=radio]{
    display: none;
}
.join_apply_wrap .tab input[type=radio]:checked + label{
    border-bottom: 2px solid var(--font_main);
    color: var(--font_main) !important;
}
/* 아이디 찾기 폼, 비밀번호 찾기 폼 */
.join_apply_wrap #find-id-form, .join_apply_wrap #find-password-form {
    display: flex;
    flex-direction: column;
    gap:10px;
}
.join_apply_wrap #find-id-form p, .join_apply_wrap #find-password-form p {
    text-align: start;
    color: var(--font_main);
    margin-bottom: 1rem;
    font-size: 14px;
    color: var(--font_sub1);
}
.join_apply_wrap #find-id-form label, .join_apply_wrap #find-password-form label {
    color: var(--font_sub2);
}
.join_apply_wrap #find-id-form input, .join_apply_wrap #find-password-form input {
    margin-block: 0.5rem 2rem;
}
/* 버튼들 */
.join_apply_wrap .findLoginBtns {
  display: flex;
  gap: 10px;
  justify-content: space-evenly;
  border-bottom: 1px solid #efefef;
  padding-bottom: 1rem;
}

.join_apply_wrap #register-btn{
  width:auto !important;
}
.join_apply_wrap .findLoginBtns button,
.join_apply_wrap .registerForm #register-btn {
  width: 100%;
  font-weight: 500 !important;
    padding: 0.7rem 1.5rem; font-size: 1.2em; font-weight: 900;
    border-radius: 4px;
    white-space: nowrap;
}
.join_apply_wrap .findLoginBtns #find-password-btn,
.join_apply_wrap .findLoginBtns #find-id-btn,
.join_apply_wrap .registerForm #register-btn {
    background: var(--main_color);
}
.join_apply_wrap .findLoginBtns #login-btn {
    background: var(--bord_main);
}
.join_apply_wrap .registerForm {

  padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* 구분선 */
.join_apply_wrap hr {
    margin-block: 1rem;
}

.join_apply_wrap .registerForm-text{
  color: var(--font_sub1);
  font-size: 14px;
}

/* 문법학습 input color */
.mystudy_wrap .question_detail .question_wrap .selec dl dd input {color: var(--back_point); margin-bottom: 0;}

/* 2025-01-20 김지수 - 문법학습 글자색 변경 */
.mystudy_wrap .question_detail .question_wrap .content_wrap .subTitle_wrap span {color: var(--back_main);}


/*나의 멤버십*/
.membership_my_info_wrap {
  width: 90%;
  margin: 32px auto;
}
.membership_my_info_wrap .myInfo_title {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 24px;
}
.membership_my_info_wrap .no_membership,
.membership_my_info_wrap .yes_membership {
  background-color: #27282c;
  padding: 24px;
  color: #eaebed;
  border-radius: 8px;
  padding: 10px;
  padding-bottom: 30px;
}
p.no_membership.cancellation {
  padding-bottom: 0px;
  font: 1.1rem / 2.4rem "Spoqa Han Sans Neo", "sans-serif";
  text-align: center;
}
p.no_membership.cancellation.app {
  line-height: 1.6;
  padding: 20px;
  margin-bottom: 10px;
}
.yes_membership.cancellation {
  font: 0.9rem;
  line-height: 0;
  padding: 25px;
  background: repeating-linear-gradient(45deg, black, transparent 100px);
}
.yes_membership .cont_start {
  text-align: left;
  margin-bottom: 24px;
}
.yes_membership table td {
  padding: 8px 0;
  position: relative;
}

.membership_my_info_wrap .myInfo_contents span.cancellation {
  color: #777;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  display: block;
  margin-top: 10px;
}
.yes_membership .btn_change {
  width: max-content;
  position: absolute;
  background-color: #504bff;
  transform: translate(-100%, -50%);
  padding: 3px 4px;
  border-radius: 4px;
  transition: all 0.3s;
}
.yes_membership .btn_change:hover {
  filter: brightness(1.5);
}
.yes_membership table td:first-child {
  padding-right: 16px;
}
.membership_my_info_wrap .myInfo_btns {
  margin-top: 32px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.membership_my_info_wrap .myInfo_btns .using {
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 24px;
}
.membership_my_info_wrap .myInfo_btns .btn_change,
.membership_my_info_wrap .myInfo_btns .btn_cancel,
.membership_my_info_wrap .myInfo_btns .btn_start {
  width: 240px;
  height: 64px;
  line-height: 64px;
  border-radius: 100vw;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  display: block;
}
.membership_my_info_wrap .myInfo_btns .btn_cancel {
  background-color: #9fa4a8;
  color: #474c52;
}
.membership_my_info_wrap .myInfo_btns .btn_change,
.membership_my_info_wrap .myInfo_btns .btn_start {
  margin-bottom: 5%;
  background-color: #504bff;
  color: white;
}
.membership_my_info_wrap .off {
  display: none !important;
}

/*결제 완료*/
.billing_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 24px;
  margin-top: 148px;
}
.billing_wrap .billing_img {
  width: 96px;
  height: 96px;
}
.billing_wrap .billing_text {
  color: white;
  font-size: 18px;
  text-align: center;
}
.billing_wrap .billing_text span {
  font-size: 24px;
  font-weight: 700;
  display: block;
}
.billing_wrap .billing_study_btn {
  width: 240px;
  height: 64px;
  line-height: 64px;
  background-color: #504bff;
  border-radius: 100vw;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  display: block;
  color: white;
}

/*모달*/
.myInfo_mem_modal.account_deletion {
  display: none;
}
.myInfo_mem_modal .mem_modal {
  width: 100vw;
  height: 100vh;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 24px;
}
.myInfo_mem_modal .mem_modal .modal_x {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
}
.myInfo_mem_modal .mem_modal .modal_x img {
  width: 70%;
  height: 70%;
}
.myInfo_mem_modal .mem_modal > img {
  width: 148px;
  height: 148px;
}
.myInfo_mem_modal .mem_modal .modal_text_wrap > span {
  color: #d0d3d8;
  margin: 0 auto;
  display: table;
}
.myInfo_mem_modal .mem_modal .modal_title {
  padding-bottom: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}
.myInfo_mem_modal .mem_modal .modal_btns {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.myInfo_mem_modal .mem_modal .modal_btns .modal_btn_no,
.myInfo_mem_modal .mem_modal .modal_btns .modal_btn_yes {
  width: 240px;
  height: 64px;
  border-radius: 100vw;
  font-weight: 700;
  font-size: 20px;
}
.myInfo_mem_modal .mem_modal .modal_btns .modal_btn_no {
  background-color: #504bff;
  color: white;
}
.myInfo_mem_modal .mem_modal .modal_btns .modal_btn_yes {
  background-color: #73787e;
  color: #27282c;
}


/*카드 등록*/
.myInfo_mem_modal.pay_change {
  display: none;
}
.regi_card_wrap {
  width: 90%;
  margin: 64px auto;
}
.regi_card_wrap .sub_title {
  font-size: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid #9fa4a8;
  margin-bottom: 16px;
}
.regi_card_wrap .card_form {
  background-color: #27282c;
  margin: 0 auto;
  padding: 16px;
  border-radius: 8px;
}
.regi_card_wrap .card_form .regi_card_title {
  font-size: 18px;
  color: #eaebed;
  text-align: center;
  margin: 8px 0 16px 0;
}
.regi_card_wrap .card_form input {
  font-size: 16px;
  color: white !important;
  padding: 8px 0;
  margin: 8px 0;
}
.regi_card_wrap .card_form label {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #73787e;
  color: #eaebed;
  font-size: 16px;
}
.regi_card_wrap .card_form .card_num_wrap {
  display: flex;
  justify-content: center;
  column-gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.regi_card_wrap .card_form .card_num_wrap input {
  width: 50px;
  text-align: center;
}
.regi_card_wrap .card_form .card_pw {
  width: 100%;
}
.regi_card_wrap .card_form .card_done {
  width: 100%;
  text-align: center;
  padding: 8px;
  background-color: #504bff;
  font-weight: 600;
  font-size: 18px;
  border-radius: 100vw;
}
/* .regi_card_wrap .card_form .card_done :active {
  filter: brightness(1.2);
  background-color: #504BFF;
} */
.regi_card_wrap .card_form .on {
  background-color: #504bff;
  color: white;
}
.regi_card_wrap .card_owner input {
  width: 100%;
}

@media screen and (max-width: 320px) {
  .mem_top_text {
      font-size: 14px;
  }
  .cont_text {
      font-size: 12px;
  }
  .payment_top .top_warning,
  .payment_top .top_text,
  .payment_bttm .tooltip_warning {
      font-size: 12px;
  }
  .billing_wrap {
      margin-top: 88px;
  }
  .billing_wrap .billing_text span {
      font-size: 20px;
  }
}



/* 영어학당 상세페이지 스타일조정  */
.study_part.conversation.part .question_detail .top .title > div {
    padding-top: 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}
.study_part.conversation.part .container {
    margin-top: 25px !important;
}
.content-list.conversation.part {
    background: none !important;
    padding-bottom:0px;
}
.content-list.conversation.part .question_detail .top .title{
    margin-top:0.5rem;
}
.content-list.conversation.part .info-box{
    margin: 0 auto;
    margin-right: 5px;
}
.study_part.conversation.part ul{
    margin-top:0px
}
.content-list.conversation.part .program-list{
    padding: 5px;
    padding-top:10px;
}
.content-list.conversation.part .tag{
    margin-bottom: 5px;
    padding: 4px 9px;
    border-radius: 10px;
}
.content-list.conversation.part .tag-container {
    padding: 0px;
    padding-top: 7px;
    right: 0px;
    position: relative;
}
.content-list.conversation.part .program-title{
    font-weight: 400;
    margin: 3px 0px;
    padding-right: 7px;
    font-size: 16px;
}
.content-list.conversation.part .program-item{
    padding: 10px;
}
.content-list.conversation.part .program-thumbnail{
    width: 50%;
    margin: 0;
    background-color:transparent;
}
.content-list.conversation.part .program-description{
    -webkit-line-clamp: none;
}
.content-list.conversation.part .program-info {
    padding-bottom: 10px;
}
.content-list.conversation.part .program-info p.info_txt {
        padding-top: 0px;
        padding-right: 7px;
        text-align: -webkit-right;
}
 /* ====================== */
 /* ===EBS 영어학당 목록 변경 ==== */
.content-list.conversation {
    width: 100%;
    height: auto;
    padding-bottom: 20px;
  }
  .content-list.conversation.part {
    background: #2d2d2d;
  }
  .content-list.conversation .program-list {
    background: #222;
    margin: 0 auto;
    padding: 10px;
    padding-top: 30px;
  }
  .content-list.conversation .program-list p.total {
    padding-left: 20px;
    font-size: 18px;
    color: #999;
  }
  .content-list.conversation .program-item {
    padding: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: 0.2s;
    padding-bottom: 10px;
  }
  .content-list.conversation .program-item .level {
    margin: 15px;
    z-index: 1;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 8px;
    font-size: 18px;
    font-weight: 500;
    color: white;
    background: #7e36ff;
    border-radius: 2px 2px 2px 20px;
  }
  .content-list.conversation .program-item:hover {
    background: rgba(68, 68, 68, 0.4666666667);
  }
  .content-list.conversation .program-item:hover .program-thumbnail > img {
    scale: 1.05;
    transition: 0.2s;
    cursor: pointer;
  }
  .content-list.conversation .program-thumbnail {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 313 / 176;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 auto;
    flex-shrink: 0;
    background-color: transparent;
  }
  .content-list.conversation .program-thumbnail img {
    width: 100%;
    transition: 0.2s;
  }
  .content-list.conversation .program-thumbnail::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .content-list.conversation .program-title {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0px;
    color: #ffffff;
  }
  .content-list.conversation .program-description {
    width: 90%;
    line-height: 1.4;
    font-size: 16px;
    color: #999;
    margin-bottom: 5px;
    /* 말줄임 */
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    /* -webkit-line-clamp: 3; */
    -webkit-box-orient: vertical;
  }
  .content-list.conversation .tag {
    display: inline-block;
    padding: 5px 9px;
    background-color: #f0f0f0;
    border-radius: 13px;
    font-size: 14px;
    color: #666;
    margin-right: 5px;
  }
  .content-list.conversation .program-info {
    background: linear-gradient(149deg, transparent 70%, #66666680);
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0 0 30px 0;
  }
  .content-list.conversation .program-info p.info_txt {
    padding-top: 10px;
    color: #999;
  }
  .content-list.conversation .tag-container {
    padding-top: 20px;
  }

    /*  ==========EBS 영어학당 추가 2025.03.06====================== */
    .study_part.conversation audio {
        width: 100%;
    }
    .study_part.conversation ul {
        margin-top: 1.5rem;
    }
    .study_part.conversation .title_top.part ul {
        margin-top: 0;
    }
  .study_part.conversation .title_top {
    padding: 32px 0 40px 0;
    font: 1.2rem/1.5rem "Spoqa Han Sans Neo", "sans-serif";
    color: white;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
    line-height: 1.5;
  }
  .study_part.conversation .title_top.part{
    font-size:12px;
    padding: 0px !important;
    text-align: left;
  }

  .title_top.part .script_wrap dl {
    display: block;
    }
  /* 파트별페이지 상단박스 */
  .study_part.conversation .item {
    text-align: left;
    position: relative;
    background: linear-gradient(90deg, rgb(150, 98, 216) 34%, rgb(80, 75, 255) 100%);
    border-radius: 10px;
    position: relative;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 2rem !important;
    padding: 20px;
    padding-bottom: 10px;
  }
  .study_part.conversation .title_top.part .item {
    width: 100%;
    margin-bottom: 0.5rem !important;
  }
  .study_part.conversation .item--part {
    pointer-events: none; /* hover 효과를 차단 */
  }
  .study_part.conversation .item--part p {
    color: white;
    padding-bottom: 20px;
  }
  .study_part.conversation .item:active .bg {
    -webkit-backdrop-filter: brightness(0.5);
            backdrop-filter: brightness(0.5);
    transition: 0.2s;
  }
  .study_part.conversation .item .bg {
    position: absolute;
    height: calc(100% + 1px);
    width: 100%;
    left: 0;
    top: 0;
  }
  .study_part.conversation .item h4 {
    background: transparent !important;
    font-size: large !important;
    font-weight: 400;
  }
  .study_part.conversation .item p {
    padding-top: 10px;
    font-size: 14px;
    font-weight: 300;
    width: 85%;
  }
  .study_part.conversation .item .level {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    font-size: x-large;
    font-weight: 400;
    font-size: 16px;
    color: white;
    background: rgba(0, 0, 0, 0.3411764706);
    border-radius: 0 0 0 20px;
  }
  .study_part.conversation .container {
    margin: auto;
    background: #444;
    margin-top: 30px !important;
  }
  .study_part.conversation .container .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 51px;
    background: white;
    padding: 5px;
    position: relative;
    font-size: 16px;
  }
  .study_part.conversation .container .list-item::before {
    content: attr(data-order);
    position: absolute;
    left: 10px;
    top: 10%;
    transform: translateY(50%);
    background: var(--font_sub2);
    color: white;
    width: 45px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
  .study_part.conversation .container .list-item span {
    padding: 0 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    margin-left: 55px;
    display: block;
    width: 85%;
  }
  .study_part.conversation .container .play-button {
    background: #504BFF;
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .question_btns.fixed_bottom.clear.part button.btn.star_q .icon {
    scale: 1.2;
    font-size: 17px;
    color: #141414;
    border-radius: 50%;
    line-height: 22px;
    background: #73787e;
  }
  .question_btns.fixed_bottom.clear.part button.btn.star_q>.icon.on {
    background: var(--main_color);
  }
  .inset_wrap.mystudy_wrap.study_part.conversation {
    padding: 0px;
  }

  /* =========== 본인인증 모달 관련 START ================== */
  
.auth_modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth_modal {
  background-color: white;
  border-radius: 1.6rem;
  box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.3);
  max-width: 22rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.auth_modal_content {
  padding: 2rem 1.5rem;
  text-align: center;
}
.auth_modal_content .auth_modal_icon {
  margin-bottom: 2.4rem;
}
.auth_modal_content .auth_modal_icon img {
  width: 5rem;
  height: 5rem;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  padding: 1rem;
}
.auth_modal_content .auth_modal_icon img.success, .auth_modal_content .auth_modal_icon img.error {
  background-color: #504BFF;
}
.auth_modal_content .auth_modal_message {
  font: 1rem/1.5rem "Spoqa Han Sans Neo", "sans-serif";
  color: #27282C;
  font-weight: 500;
  margin-bottom: 2.4rem;
  line-height: 1.5;
}
.auth_modal_content .auth_modal_buttons {
  margin-top: 1.5rem;
}
.auth_modal_content .auth_modal_buttons .auth_retry_btn {
  background-color: #504BFF;
  color: white;
  border: none;
  border-radius: 0.8rem;
  padding: 1rem 1.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.auth_modal_content .auth_modal_buttons .auth_retry_btn:hover {
  background-color: rgb(30.4166666667, 24, 255);
  transform: translateY(-0.2rem);
}
.auth_modal_content .auth_modal_buttons .auth_retry_btn:active {
  transform: translateY(0);
}
  /* =========== 본인인증 모달 관련 END ================== */

/* =========== 사용자 메뉴 관련 START ================== */
.user-menu-toggle {
  position: relative;
  display: inline-block;
}

.user-menu-inp {
  -webkit-appearance: none;
  display: none;
  visibility: hidden;
}

/* 외부 컨테이너 - 그림자 담당 */
.user-menu-shadow-wrapper {
  position: absolute;
  width: 200px;
  right: 0;
  top: 120%;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0);
  transition: all 0.3s, box-shadow 0.1s 0.3s;
  /* 그림자가 잘리지 않도록 패딩 추가 */
  padding: 5px;
}

/* 내부 컨테이너 - clip-path와 내용 담당 */
.user-menu-container {
  background-color: white;
  color: #333;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  clip-path: inset(10% 50% 90% 50% round 10px);
  transition: all 0.3s;
  /* 외부 컨테이너의 패딩을 상쇄하기 위해 마진 조정 */
  margin: -5px;
  width: calc(100% + 10px);
}
.user-menu-list {
  --delay: 0.1s;
  --trdelay: 0.15s;
  position: relative;
  transform: translateY(30px);
  opacity: 0;
  transition: background-color 0.2s 0s;
}

.user-menu-list svg{
  width: 20px;
  height: 20px;
  color: #333;
  stroke-width: 2;
  stroke: #333;
}
.user-menu-list svg.lucide-log-out{
  stroke: var(--main_color);
}

.user-menu-list a {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s;
  position: relative;
}

.user-menu-list a i {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  font-size: 14px;
}

.user-menu-list:hover {
  background-color: #f5f5f5;
}

/* .user-menu-list.logout-item:hover {
} */

.user-menu-list.logout-item a {
  color:var(--main_color);
  font-weight: 500;
}
.user-menu-list.logout-item a:last-child{
  border-top: 1px solid #ccc;
}

.notification-badge {
  background-color: var(--main_color);
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 10px;
  margin-left: auto;
  min-width: 16px;
  text-align: center;
}

.user-menu-inp:checked ~ .user-menu-shadow-wrapper {
  visibility: visible;
  opacity: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.user-menu-inp:checked ~ .user-menu-shadow-wrapper .user-menu-container {
  clip-path: inset(0% 0% 0% 0% round 10px);
}

.user-menu-inp:checked ~ .user-menu-shadow-wrapper .user-menu-container .user-menu-list {
  transform: translateY(0);
  opacity: 1;
}

.user-menu-inp:checked ~ .user-menu-shadow-wrapper .user-menu-container .user-menu-list:nth-child(2) {
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 1)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 1));
}

.user-menu-inp:checked ~ .user-menu-shadow-wrapper .user-menu-container .user-menu-list:nth-child(3) {
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 2)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 2));
}

.user-menu-inp:checked ~ .user-menu-shadow-wrapper .user-menu-container .user-menu-list:nth-child(4) {
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 3)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 3));
}

.user-menu-inp:checked ~ .user-menu-shadow-wrapper .user-menu-container .user-menu-list:nth-child(5) {
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 4)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 4));
}

/* 아이콘 스타일 */
.icon-mypage::before { content: ""; }
.icon-message::before { content: ""; }
.icon-settings::before { content: ""; }
.icon-logout::before { content: ""; }

/* 모바일에서 메뉴 위치 조정 */
@media (max-width: 768px) {
  .user-menu-shadow-wrapper {
    width: 180px;
    right: -35px;
  }
}
/* =========== 사용자 메뉴 관련 END ================== */

/* =========== 고객센터 관련 스타일 ================== */
.customer-center-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    margin-bottom: 15px;
}

.customer-center-icon {
  border-radius: 100%;
  width: 60px;
  height: 60px;
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.05);
}

.center-number-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.center-number {
    text-align: center;
    color: #504bff;
    font-weight: 700;
}

.center-number.title {
    font-size: 18px;
}

.center-number.phone {
    font-size: 22px;
}
/* =========== 고객센터 관련 스타일 END ================== */