@CHARSET "UTF-8";
/* voca */
.voca-wrap{font-size:20px;}
.voca-top{border-bottom:1px solid #C9CBCF; padding: 50px 0 20px;}
.voca-top .container{display:flex; justify-content:space-between; align-items: flex-start;}
.voca-top h2{color: #092C86; margin-bottom:0;}
.voca-top .vocaSearch-wrap{width: calc(100% - 311px);}
.myVoca .voca-top .vocaSearch-wrap{ margin: -30px 0 0}
.voca-top .vocaSearch{}
.voca-top .vocaSearch .vocaSearch-bar{width:100%; border: 2px solid #092C86; border-radius:30px; margin: 2px 0 10px;}
.voca-top .vocaSearch .vocaSearch-bar input{padding: 15px 25px; width: calc(100% - 66px);}
.voca-top .vocaSearch .vocaSearch-bar button{font-size: 20px; padding: 17px 20px;}
.voca-top .searchHistory{display:flex; justify-content:space-between; padding: 0 25px;}
.voca-top .searchHistory p{font-weight:bold; position:relative; }
.voca-top .searchHistory p::after{position:absolute; width:2px; height:20px; content:""; right:-16px; top:2px; background-color: #092C86;}
.voca-top .searchHistory ul{width: calc(100% - 140px); display:flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; color: #7C818D;}
.voca-top .searchHistory ul li{font-size: 18px; display: flex; align-items: center;}
.voca-top .searchHistory ul li span{cursor:pointer;}
.voca-top .searchHistory ul li i{padding:2px 5px; cursor:pointer;}
.voca-top .searchHistory ul li.deleteAll{}
.voca-top .searchHistory ul li button{border: 1px solid #7C818D; border-radius:20px; padding: 2px 15px; font-size: 16px;cursor:pointer;}
/* 크롬, 사파리, 엣지 */
input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none; appearance: none;}
/* 파이어폭스 */
input[type="search"]::-moz-search-clear {display: none;}

/* voca-middle */
.voca-middle {padding: 50px 0 30px; border-bottom: 1px solid #C9CBCF;}
.voca-middle .container {}
.voca-middle .todayVocaWrap {}
.voca-wrap .main {border-bottom: 1px solid #CED5E7;}
.voca-wrap h4 {font-family: 'Pretendard', sans-serif; font-weight:bold;}
.voca-wrap .todayVoca {display: flex; align-items: center; justify-content: space-between; font-size:80px; font-weight:500; padding: 10px 0 20px;}
.voca-wrap .todayVoca p {}
.voca-wrap .todayVoca .vocaBtns {display: flex; flex-direction: column;}
.voca-wrap .todayVoca .vocaBtns button{display: flex; justify-content: space-between; align-items: center; border:2px solid #828282; border-radius: 30px; }
.voca-wrap .todayVoca .vocaBtns .saveBtn {transition:.3s; color:#828282; margin-bottom:10px;}
.voca-wrap .todayVoca .vocaBtns button.saveBtn.save{color: #092C86; border-color: #092C86;}
.voca-wrap .todayVoca .vocaBtns .saveBtn.save path{fill:#FFAC27; stroke: #FFAC27;}
.voca-wrap .todayVoca .vocaBtns .saveBtn svg {transition:.3s; width: 25px; height: auto;}
.voca-wrap .todayVoca .vocaBtns .saveBtn svg path{transition:.3s; fill: none; stroke: #828282; stroke-width: 2px;}
.voca-wrap .todayVoca .vocaBtns .learningBtn {transition:.3s; color:#828282;}
.voca-wrap .todayVoca .vocaBtns .learningBtn svg {transition:.3s; width: 25px; height: auto;}
.voca-wrap .todayVoca .vocaBtns .learningBtn svg path{transition:.3s; fill:#828282;}
.voca-wrap .todayVoca .vocaBtns .learningBtn svg circle{transition:.3s; stroke-width:2px; stroke:#828282;}
.voca-wrap .todayVoca .vocaBtns .learningBtn.end {color: #007853; border-color: #007853;}
.voca-wrap .todayVoca .vocaBtns .learningBtn.end svg path{fill: #007853;}
.voca-wrap .todayVoca .vocaBtns .learningBtn.end svg circle{stroke-width:2px; stroke:#007853;}
.voca-wrap .todayVoca .vocaBtns span {}
.voca-wrap .todayVoca .vocaBtns svg {margin-left:15px;}
/* 단어 뜻 리스트 */
.voca-wrap .main ul {}
.voca-wrap .main ul li {margin-bottom: 10px;}
.voca-wrap .main ul li:last-child{margin-bottom: 25px;}
.voca-wrap .main ul li span.num{width: 35px; display:inline-block; text-align:center;}
.voca-wrap span.bold {font-weight:bold; color:#092C86; margin-right: 10px;}
/* 예문 영역 */
.voca-wrap .sampleSentence {margin-top: 10px; display:flex; gap:15px; align-items: flex-start;}
.voca-wrap .sampleSentence .sample {padding:5px 25px; border-radius: 20px; font-size: 18px; background-color: #092C86; display:inline-block; color:#fff;}
.voca-wrap .sampleSentence div {}
.voca-wrap .sampleSentence div p{line-height:31px;}
.voca-wrap .sampleSentence .en {font-weight: 600;}
.voca-wrap .sampleSentence .en span {font-weight: bold; background-color: #F0F000; color: #0040E4; padding: 2px 4px;}
.voca-wrap .sampleSentence .kr {margin-top: -3px;}

/* voca-bottom */
.voca-bottom {background-color: #F2F4F9; padding: 30px 0;}
.voca-bottom .container {}
.voca-bottom .title {cursor:pointer; display:flex; align-items: center; justify-content: space-between;}
.voca-bottom .title p {font-size: 32px; font-weight: bold;}
.voca-bottom .title a {border: 2px solid #092c86; color: #092c86; display:inline-block; padding: 5px 30px; border-radius: 30px; font-weight:bold;}
.voca-bottom .vocaListWrap {margin-top:20px;}
.voca-bottom .vocaListWrap > li {margin-bottom: 10px; padding: 20px 25px; background-color: #fff; border-radius: 20px; border: 1px solid #C9CBCF;}
.voca-bottom .vocaListWrap > li.act .meaning{display:none;}
.voca-bottom .vocaListWrap > li:last-child{margin-bottom: 0px;}
.voca-bottom .vocaList-title {display:flex; align-items: center; justify-content: space-between; cursor:pointer;}
.voca-bottom .vocaList-title .vocaList {width: 40%; font-size: 40px; font-weight: 600;}
.voca-bottom .vocaList-title .meaning {width: 65%;}
.voca-bottom .vocaList-title i {}
.voca-bottom .vocaList-con{display:none; margin-top: 20px;}
.voca-bottom .todayVocaWrap {}
.voca-bottom .todayVocaWrap .main {}
.voca-bottom .todayVocaWrap .main ul {}
.voca-bottom .todayVocaWrap .main li {}
.voca-bottom .sampleSentence {}
.voca-bottom .sampleSentence .sample {}
.voca-bottom .sampleSentence .en {}
.voca-bottom .sampleSentence .kr {}

.voca-bottom .vocaBtns {display: flex; justify-content: flex-end; gap: 15px; align-items:center;}
.voca-bottom .vocaBtns button{padding:0;}
.voca-bottom .vocaBtns .saveBtn {transition:.3s; color:#828282;}
.voca-bottom .vocaBtns button.saveBtn.save{color: #092C86;}
.voca-bottom .vocaBtns .saveBtn.save path{fill:#FFAC27; stroke: #FFAC27;}
.voca-bottom .vocaBtns .saveBtn svg {transition:.3s; width: 25px; height: auto;}
.voca-bottom .vocaBtns .saveBtn svg path{transition:.3s; fill: none; stroke: #828282; stroke-width: 2px;}
.voca-bottom .vocaBtns .learningBtn {transition:.3s; color:#828282;}
.voca-bottom .vocaBtns .learningBtn svg {transition:.3s; width: 25px; height: auto;}
.voca-bottom .vocaBtns .learningBtn svg path{transition:.3s; fill:#828282;}
.voca-bottom .vocaBtns .learningBtn svg circle{transition:.3s; stroke-width:2px; stroke:#828282;}
.voca-bottom .vocaBtns .learningBtn.end {color: #007853; border-color: #007853;}
.voca-bottom .vocaBtns .learningBtn.end svg path{fill: #007853;}
.voca-bottom .vocaBtns .learningBtn.end svg circle{stroke-width:2px; stroke:#007853;}
.voca-bottom .vocaBtns span {}
.voca-bottom .vocaBtns svg {}

/* myvoca */
.myvoca-middle {padding: 50px 0; border-bottom: 1px solid #C9CBCF;}
.myvoca-middle .container {}
.myVocaWrap {}
.myVocaWrap h4 {}
.vocaProgressWrap { border-radius:30px; margin-top: 10px;}
.vocaProgressWrap>span{font-weight: bold; display: inline-block; margin: 5px 0;}
.vocaProgressWrap .vocaProgressTrack {border-radius:30px; height: 30px; width: 100%; background-color:#F2F4F9;  font-size:16px; box-shadow: inset 0 0px 5px rgba(0,0,0, 0.25);}
.vocaProgressWrap .vocaProgressFill {position: relative; height: 30px; border-radius:30px; background: linear-gradient(90deg, #092C86CC 0%, #092C86FF 100%); width:6%;}
.vocaProgressWrap .percent {position:absolute; color:#fff; top:50%; transform: translate(-100%,-50%); right: -15px;padding: 0 5px;}
.vocaProgressWrap .percent.low{color: #092C86; right: -5px; color: #222; transform: translate(100%,-50%);width: 300px; padding: 0 5px;}
.myVocaWrap ul {margin-top: 20px; display: flex; }
.myVocaWrap ul li {width: calc(100% / 3); text-align:center; border-right: 2px solid #CED5E7; padding: 20px 0;}
.myVocaWrap ul li:last-child{border:0;}
.myVocaWrap ul li img {height:70px;}
.myVocaWrap ul li p { padding: 20px 0 5px; font-weight: bold;}
.myVocaWrap ul li p.ea {font-size:38px; padding:0;}
.myVocaWrap ul li.all {}
.myVocaWrap ul li.memorized {}
.myVocaWrap ul li.unmemorized {}
.myVocaWrap ul li.all .ea{color: #808080;}
.myVocaWrap ul li.memorized .ea{color: #092C86;}
.myVocaWrap ul li.unmemorized .ea{color: #FF3E3E;}
.exampleHtml-wrap>div{margin-bottom:5px;}
.exampleHtml-wrap>div:last-child{margin-bottom: 0;}
.noData{ display:none; font-size: 24px; padding: 50px 0; text-align:center; font-weight:500;}
#btnMoreWord{width: 100%; cursor: pointer; padding: 10px; text-align: center; font-weight: bold; color: #fff; border-radius: 15px; background-color: #092C86;}

.ac-dropdown {
  position: absolute;
  z-index: 9999;
  width: 320px;        /* 입력창 너비에 맞춰 조정 */
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.ac-item {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.ac-item[aria-selected="true"], .ac-item:hover {
  background: #f5f7fb;
}
.ac-head { font-weight: 700; }
.ac-pos   { font-size: 12px; opacity: .7; }
.ac-gloss { font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-highlight { background: #ffec99; }


:root{
  --toggle-off:#d7deea;
  --toggle-on:#2f6bff;
  --toggle-knob:#fff;
  --text:#13223a;
}

.toggle{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  cursor:pointer;
  user-select:none;
  font-weight:600;
  color:var(--text);
  margin-right: 15px;
}

/* 실제 체크박스는 숨기고 접근성 포커스만 살림 */
.toggle__input{
  position:absolute;
  opacity:0;
  width:0; height:0;
}

/* 트랙(배경) */
.toggle__track{
  width:46px; height:26px;
  background:var(--toggle-off);
  border-radius:999px;
  position:relative;
  transition:background .2s ease;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

/* 노브(동그라미) */
.toggle__track::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:22px; height:22px;
  background:var(--toggle-knob);
  border-radius:50%;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  transition:transform .2s ease;
}

/* 체크 상태 */
.toggle__input:checked + .toggle__track{
  background:var(--toggle-on);
}
.toggle__input:checked + .toggle__track::after{
  transform:translateX(20px);
}

/* 키보드 포커스 */
.toggle__input:focus-visible + .toggle__track{
  outline:2px solid #99b3ff;
  outline-offset:3px;
}

/* 비활성화 */
.toggle__input:disabled + .toggle__track{
  opacity:.5; cursor:not-allowed;
}
.toggle__input:disabled ~ .toggle__label{
  opacity:.6; cursor:not-allowed;
}

/* 선택 사항: 스위치 옆 텍스트 */
.toggle__label{
  font-size:.95rem;
  letter-spacing:.02em;
}
.searchToggleDiv{
  text-align : end;
}
.voca-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0 6px;
}
.voca-titlebar h2{ font-size:22px; font-weight:800; margin:0; letter-spacing:-0.2px; }
.my-voca-btn{
  display:inline-flex; align-items:center;
  padding:7px 12px; border:1px solid #2a5bd7; color:#2a5bd7;
  border-radius:999px; text-decoration:none; font-weight:700; font-size:13px;
  transition:background .2s,border-color .2s,transform .04s;
}
.my-voca-btn:hover{ background:#f3f7ff; border-color:#204ac0; }
.my-voca-btn:active{ transform:translateY(1px); }

/* 알파벳 래퍼 */
.alpha-wrap{
  background:#f8fafd; border:1px solid #eef1f6; border-radius:14px;
  padding:10px; margin:8px 0 12px;
}

/* 그리드로 간격 균등 + 줄바꿈 */
.alpha-grid{
  display:flex; flex-wrap:wrap; gap:8px;
}

.alpha-chip{
  appearance:none; border:1px solid #d9e0ec; background:#fff;
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#2b354f; letter-spacing:0.3px;
  cursor:pointer; user-select:none;
  transition:box-shadow .18s, background .18s, border-color .18s, transform .04s;
  box-shadow:0 1px 0 rgba(20,30,55,.04);
}
.alpha-chip:hover{ background:#f7f9fe; border-color:#cfd8f0; }
.alpha-chip:active{ transform:translateY(1px); }

.alpha-chip.active{
  background:#2a5bd7; color:#fff; border-color:#2a5bd7;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08), 0 4px 10px rgba(42,91,215,.18);
}

/* “전체”는 살짝 넓게 */
.alpha-chip.all{
  padding:0 10px; width:auto; min-width:48px;
}

/* 다크모드 살짝 대응 */
@media (prefers-color-scheme: dark){
  .alpha-wrap{ background:#0f1218; border-color:#1b2332; }
  .alpha-chip{ background:#121826; border-color:#1b2332; color:#dfe7ff; }
  .alpha-chip:hover{ background:#0f1726; }
  .alpha-chip.active{ background:#3b82f6; border-color:#3b82f6; }
}
.alpha-chip.disabled{
  opacity:.45; cursor:not-allowed;
  background:#f5f7fb; border-color:#e1e6f2; color:#a0a8b8;
  box-shadow:none;
}
.alpha-chip.disabled.active{ /* 혹시라도 active가 붙지 않도록 안전장치 */
  background:#f5f7fb; color:#a0a8b8; border-color:#e1e6f2;
}
.sec1-boards{max-width:1300px; display:flex; margin-top: -170px; justify-content: space-between; margin: 0 auto;}
.td-voca,.td-jindo{ margin-top: -170px;}

.td-voca {display: block; position:relative; color: #fff; width: 50%;}
.td-voca .blackboard{}
.td-voca .wrap{position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); width:80%;}
.td-voca .wrap>p{font-size: 30px;}
.td-voca .voca {display:flex; justify-content: center; gap: 40px; align-items:center;}
.td-voca .voca-con {font-size: 42px; }
.td-voca .line{width: 90%; margin: 15px auto; height: 1px; background-color: rgba(255,255,255,0.5);}
.td-voca .voca-mean {}
.td-voca .voca-mean li {margin-bottom: 5px; text-align: start;}
.td-voca .voca-mean li:last-child{margin-bottom: 0}
.td-voca .voca-mean li span { font-weight:bold;}
.td-voca .character2 {right: -12%; width: 28%; top: 7%; z-index: 4;}
.td-voca a{display: inline-block; margin-top: 25px; color: #FFFF27; border-radius: 30px; padding: 5px 30px; border: 2px solid #FFFF27;}

.td-jindo{position:relative; color: #fff; width: 47%;}
.td-jindo .tablet{position:relative; }
.td-jindo .wrap{position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); width:80%; text-align:start; z-index:2;}
.td-jindo .wrap p{font-size: 30px; width:80%; line-height: 1.4;}
.td-jindo .wrap p span{display:block; font-size: 34px;}
.td-jindo .wrap a{display: inline-block; margin: 45px 0 25px; color: #FFFF27; border-radius: 30px; padding: 5px 50px; border: 2px solid #FFFF27;}
.td-jindo .inner{position: absolute; width: 55%; bottom: 11px; right: 50px; z-index:1;}


.ipa{font-size: large;
    color: #9b9393;
    margin-left: 10px;}
.mainJsp .top-banner{display:block;}
.top-banner{background-color: #363EC7; overflow: hidden; transition: all 0.3s ease;height:70px; display:none;}
.top-banner.hide {height: 0; opacity: 0;}
.top-banner .container{display: flex; justify-content: space-between; align-items: center; height:70px}
.top-banner img{height:65px; margin-top: 5px; display:block;}
.top-banner .container div{color: #fff; display: flex; justify-content: space-between; align-items: center; width:55%;}
.top-banner .container div p{font-size: 28px;}
.top-banner .container div a{font-size: 18px; font-weight:500; border: 2px solid #fff; padding:5px 50px; border-radius: 30px;}

@media screen and (max-width: 1440px){
	.voca-top .vocaSearch-wrap{width: calc(100% - 270px);}
	.voca-top .vocaSearch .vocaSearch-bar{margin-top: 2px;}
	.voca-wrap{font-size: 18px;}
	.voca-top .searchHistory ul li{font-size: 16px;}
	.voca-top .searchHistory ul{width: calc(100% - 134px);}
	.voca-top .searchHistory ul li button{padding: 2px 12px; font-size: 14px; }
	.voca-top .vocaSearch .vocaSearch-bar button{padding: 15px 20px;}
	.voca-top .vocaSearch-wrap{ width: calc(100% - 270px);}
	.toggle__track{height: 24px;width: 44px;}
	.toggle__track::after{width:20px; height: 20px;}
	.alpha-chip{width:34px; height: 34px; padding:0;}
	.myVoca .voca-top .vocaSearch-wrap{margin-top: -24px;}
	.td-voca{width:48%;}
	.td-voca a{margin-top: 20px;}
	.td-voca .line{margin:10px auto;}
	.td-voca .voca-con{font-size:40px;}
	.td-voca .line{width:95%;}
	.td-voca .wrap>p{font-size:28px;}
	.sec1-boards{justify-content:space-evenly;}
	.td-jindo{width:44%;}
	.td-jindo .wrap p{font-size:28px;}
	.td-jindo .wrap p span{font-size:32px;}
}
@media screen and (max-width: 1279px){
	.voca-top{padding: 45px 0 15px;}
	.voca-top .vocaSearch .vocaSearch-bar input{padding: 12px 20px;}
	.voca-top .vocaSearch .vocaSearch-bar button{font-size: 18px; padding: 13px 20px;}
	.voca-top .vocaSearch-wrap{width: calc(100% - 235px);}
	.voca-top .searchHistory{padding: 0 20px;}
	.voca-top .searchHistory ul{width: calc(100% - 131px); gap: 6px 8px;}
	.voca-middle{padding: 40px 0 30px;}
	.container button{font-size: 16px; padding: 8px 15px;}
	.voca-wrap .todayVoca .vocaBtns svg{margin-left: 10px;}
	.voca-wrap .todayVoca p{font-size: 70px;}
	.voca-wrap .todayVoca{padding: 5px 0 10px;}
	.voca-wrap .todayVoca .vocaBtns .saveBtn svg{width: 22px;}
	.voca-wrap .todayVoca .vocaBtns .learningBtn svg{width: 22px;}
	.voca-bottom .title p{font-size: 28px;}
	.voca-wrap .sampleSentence .sample{font-size: 16px; padding: 3px 22px;}
	.voca-wrap .sampleSentence div p{line-height:25px;}
	.voca-wrap .sampleSentence div p.en{margin-bottom: 3px;}
	.voca-bottom .title a{padding: 3px 25px;}
	.voca-bottom .vocaListWrap > li{padding: 20px 25px;}
	.voca-wrap .main ul li:last-child{margin-bottom: 20px;}
	.voca-bottom .vocaList-title .vocaList{font-size: 32px;width: 52%;}
	.voca-bottom .vocaBtns .saveBtn svg{width: 22px;}
	.voca-bottom .vocaBtns .learningBtn svg{width:22px;}
	.voca-bottom .vocaBtns{gap:10px}
	.voca-bottom .vocaList-con{margin-top: 15px;}
	.voca-bottom{padding: 30px 0 40px;}
	.myVocaWrap ul li img{height: 71px;}
	.myVocaWrap ul li p{padding: 20px 0 5px;}
	.myVocaWrap ul li p.ea{font-size:36px;}
	.myvoca-middle{padding: 30px 0;}
	.vocaProgressWrap{margin-top: 5px;}
	.alpha-wrap{margin: 8px 0 5px;}
	.voca-bottom .vocaListWrap{margin-top: 10px;}
	.container button.alpha-chip{font-size:14px; width: 32px; height: 32px; }
	.alpha-grid{gap: 6px;}
	
	.td-voca, .td-jindo{margin-top: -120px;}
	.td-voca{}
	.td-voca .voca-con{font-size: 38px;}
	.td-voca .wrap>p{font-size: 26px;}
	.td-voca a{margin-top: 10px;}
	.td-jindo{width:44.5%;}
	.td-voca .voca{height: 78px;}
	.td-voca .voca-mean{display:flex; flex-direction: column; justify-content: center;}
	.td-voca .voca-mean li:nth-child(4){display: none;}
	.td-voca .voca-mean li:nth-child(5){display: none;}
	.td-jindo .wrap p{font-size: 26px;}
	.td-jindo .wrap p span{font-size:30px;}
	.td-jindo .wrap a{margin: 35px 0 10px; padding: 5px 40px;}
	.td-jindo .inner{bottom: 10px; width:52%;}
	
	.top-banner .container div{width: 58%;}
	.top-banner .container div p{font-size: 24px;}
	.top-banner .container div a{font-size: 16px; padding: 4px 40px;}
	.top-banner .container{height:60px;}
	.top-banner img{height: 55px;}
	.top-banner{height: 60px;}
	
}
@media screen and (max-width: 1024px){
	.voca-wrap{font-size: 16px;}
	.voca-top .vocaSearch-wrap{width: calc(100% - 185px);}
	.voca-top .searchHistory ul{width: calc(100% - 120px); gap: 3px 5px;}
	.voca-top .searchHistory ul li{font-size: 14px;}
	.voca-top .searchHistory p::after{height:16px;}
	.voca-top .vocaSearch .vocaSearch-bar input{padding: 10px 15px; width: calc(100% - 55px);}
	.voca-top .vocaSearch .vocaSearch-bar button{font-size: 16px; padding: 10px 15px;}
	.voca-top .searchHistory{padding: 0 10px;}
	.voca-top{padding: 30px 0 10px;}
	.voca-middle{padding: 30px 0 20px;}
	.voca-wrap .todayVoca p{font-size:60px;}
	.voca-wrap .todayVoca{padding: 0 0 10px;}
	.voca-wrap .todayVoca .vocaBtns .saveBtn{margin-bottom: 5px;}
	.voca-wrap .todayVoca .vocaBtns button{font-size: 14px; padding: 6px 15px; border: 1px solid #828282;}
	.voca-wrap .todayVoca .vocaBtns .saveBtn svg{width: 18px;}
	.voca-wrap .todayVoca .vocaBtns .learningBtn svg{width: 18px;}
	.voca-wrap .main ul li{margin-bottom: 6px;}
	.voca-wrap .main ul li span.num{width: 25px;margin-right: 2px;}
	.voca-wrap .main ul li:last-child{margin-bottom: 15px;}
	.voca-wrap .sampleSentence .sample{font-size: 14px; padding: 3px 18px;}
	.voca-wrap .sampleSentence div p{line-height: 22px;}
	.voca-wrap .sampleSentence .en span{padding: 1px 2px;}
	.voca-wrap .sampleSentence{gap: 12px;}
	.voca-bottom .title p{font-size: 24px;}
	.voca-bottom{padding: 20px 0 30px;}
	.voca-bottom .vocaListWrap{margin-top: 15px;}
	.voca-bottom .vocaList-title .vocaList{font-size: 28px;}
	.ipa{font-size: 16px;}
	.voca-bottom .vocaList-title .meaning{width:50%;}
	.voca-bottom .vocaListWrap > li{padding: 15px 20px;}
	.voca-bottom .vocaBtns .saveBtn svg{width: 20px;}
	.voca-bottom .vocaBtns .learningBtn svg{width: 20px;}
	.voca-bottom .vocaList-con{margin-top: 10px;}
	.myvoca-middle{padding: 30px 0;}
	.vocaProgressWrap{margin-top: 15px;}
	.myVocaWrap ul{margin-top: 20px;}
	.myVocaWrap ul li{padding: 20px 0;}
	.myVocaWrap ul li img{height: 55px;}
	.myVocaWrap ul li p.ea{font-size: 32px;}
	.myVocaWrap ul li p{padding: 15px 0 5px; font-size: 18px;}
	.container button.nav-bar{padding: 0;}
	#btnMoreWord{padding: 8px; border-radius: 10px;}
	.toggle__label{font-size:14px;}
	.toggle__track{height: 20px; width: 38px;}
	.toggle__track::after{width:16px; height:16px;}
	.voca-top .vocaSearch-wrap{width: calc(100% - 200px);}
	.toggle__input:checked + .toggle__track::after{transform: translateX(18px);}
	.vocaProgressWrap .vocaProgressTrack,.vocaProgressWrap .vocaProgressFill{height: 26px;}
	.vocaProgressWrap .vocaProgressTrack{font-size: 14px;}
	.noData{display:none; padding: 30px 0 20px; font-size: 20px;}
	.myVoca .voca-top .vocaSearch-wrap{margin-top: -22px;}
	.voca-top .vocaSearch .vocaSearch-bar{margin-bottom: 5px;}
	.container button.alpha-chip{width: 30px; height:30px;}
	.voca-bottom .vocaListWrap{margin-top: 10px;}
	.td-voca{}
	.td-voca .voca-con{font-size: 34px;}
	.main_wrap .section1 .container{padding: 30px 0;}
	.section1.section{padding-bottom: 0px;}
	.box-line{}
	.td-voca .voca{height:72px;}
	.td-voca .line{margin: 7px auto;}
	.td-voca .wrap>p{font-size: 2.5vw;}
	.td-voca a{ margin-top:5px; padding: 3px 20px; }
	/* .sec1-boards{flex-direction: column-reverse;} */
	.td-jindo .wrap p{font-size: 2.5vw; }
	.td-jindo .wrap p span{font-size: 3vw;}
	.td-jindo .wrap a{margin: 25px 0 0px; padding: 3px 30px;}
	.td-jindo .inner{right:22px; bottom:7px; width: 50%;}
	.td-voca, .td-jindo{margin-top:-100px;}
	.top-banner .container div p{font-size: 20px;}
	.top-banner,.top-banner .container{height:50px; justify-content: space-evenly;}
	.top-banner img{height:45px;}
	.top-banner .container div a{font-size:14px; padding:3px 25px; font-size: 14px; border-width:1px; border: 1px solid #fff;}
}

@media screen and (max-width: 768px){
	.voca-top .vocaSearch-wrap{width:calc(100% - 135px);}
	.voca-top .searchHistory p{display:none;}
	.voca-top .searchHistory ul{width: 100%;}
	.voca-top .vocaSearch .vocaSearch-bar{ margin: -2px 0 5px;}
	.voca-top .vocaSearch .vocaSearch-bar button{padding: 8px 15px; font-size: 15px;}
	.voca-top .vocaSearch .vocaSearch-bar input{padding: 6px 15px; width: calc(100% - 51px);}
	.voca-wrap .todayVoca p{font-size: 50px;}
	.voca-middle{padding: 20px 0 15px;}
	.voca-wrap .todayVoca p{font-size: 45px; font-weight: 600;}
	.voca-wrap .todayVoca .vocaBtns button{padding: 4px 12px;}
	.voca-wrap .todayVoca .vocaBtns .saveBtn svg,.voca-wrap .todayVoca .vocaBtns .learningBtn svg{width: 16px;}
	.voca-bottom .title a{padding: 2px 25px;}
	.voca-bottom .vocaList-title .vocaList{font-size: 22px; width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.ipa{font-size: 14px; margin-left: 5px;}
	.voca-bottom .title p{font-size: 20px;}
	.voca-bottom .vocaListWrap > li{padding: 10px 15px; border-radius: 15px;}
	.voca-wrap span.bold{margin-right: 5px;}
	.voca-wrap .sampleSentence{gap: 8px;}
	.voca-bottom{padding: 15px 0 20px;}
	.voca-wrap .main ul li:last-child{margin-bottom: 10px;}
	.voca-wrap .sampleSentence{margin-top: 8px;}
	.voca-bottom .title a{font-size: 14px; padding: 2px 20px;}
	.voca-top h2{font-size: 28px;}
	.myvoca-middle{padding: 20px 0;}
	.myVocaWrap ul li img{height: 50px;}
	.myVocaWrap ul li p{font-size: 16px;}
	.myVocaWrap ul li p.ea{font-size: 28px;}
	.myVocaWrap ul li{padding:15px 0;}
	.voca-bottom .vocaList-title .meaning{width: 43%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.exampleHtml-wrap>div{margin-bottom: 3px;}
	.voca-bottom .vocaList-con{margin-top: 5px;}
	.toggle{margin-right:10px; gap: .4rem; margin-bottom:5px;}
	.toggle__track{height: 18px; width:32px;}
	.toggle__input:checked + .toggle__track::after{transform: translateX(14px);}
	.toggle__track::after{width:14px; height: 14px;}
	.toggle__label{font-sixe: 12px;}
	.vocaProgressWrap{margin-top: 5px;}
	.myVocaWrap ul li p{padding: 10px 0 5px;}
	.noData{display:none; font-size: 18px;}
	.myVoca .voca-top{padding: 35px 0 10px;}
	.voca-top{padding: 20px 0 10px;}
	.voca-top .vocaSearch-wrap{}
	.myVoca .voca-top .vocaSearch-wrap{margin-top: -24px;}
	.container button.alpha-chip{width:26px; height: 26px; font-size:12px; padding: 0;}
	.alpha-chip.all{padding: 0; min-width: 40px;}
	.alpha-wrap{padding: 6px;}
	.alpha-grid{gap: 4px;}
	.td-voca{width: 430px; margin-top: -70px}
	.td-voca .voca-con{font-size: 28px;}
	.td-voca .character2{width:23%; right: -9%; display:none;}
	.main_wrap{overflow-x:hidden}
	.box-line{border-radius: 0 0 26px 26px;}
	.td-voca .wrap>p{font-size: 4.2vw;}
	.td-voca a{padding: 3px 25px;}
	.td-voca .voca{gap: 30px; height: auto;}
	.top-banner .container div p{font-size: 16px;}
	.top-banner, .top-banner .container{height: 45px;}
	.top-banner img{height: 40px;}
	.top-banner .container div a{font-size: 12px; padding: 3px 20px;}
	.sec1-boards{flex-direction: column-reverse; align-items: center;}
	.td-jindo .tablet, .td-voca .blackboard{display:block;}
	.td-jindo {width: 79%; margin-top: -60px;}
	.td-voca{margin-top: 15px; width:85%;}
	.td-jindo .wrap p{font-size:4.2vw;}
	.td-jindo .wrap p span{font-size: 5.2vw;}
	.td-jindo .inner{right:6%;}
	.td-voca .wrap{height: 80%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;}
}
@media screen and (max-width: 590px){
	.top-banner img.top-banner2{display: none;}
	.top-banner .container div{width: calc(100% - 110px);}
	.td-jindo .wrap a, .td-voca a{font-size:14px; border-width:1px;}
}
@media screen and (max-width: 479px){
	.voca-wrap{font-size: 14px;}
	.voca-top{padding-top: 15px;}
	.voca-top .container{flex-direction: column; gap: 3px;}
	.voca-top .vocaSearch-wrap{width: 100%;}
	.voca-top .searchHistory ul li i{padding: 2px 3px;}
	.voca-top .searchHistory ul{gap: 2px 5px;}
	.voca-top .searchHistory ul li button{font-size: 12px; padding: 2px 10px;}
	.voca-middle{padding: 15px 0 10px;}
	.voca-wrap .todayVoca{align-items: flex-start; padding-bottom: 5px;}
	.voca-wrap .todayVoca p{font-size: 40px;}
	.voca-wrap .todayVoca .vocaBtns .saveBtn,.voca-wrap .todayVoca .vocaBtns .learningBtn{border: 0; margin-bottom: 0;}
	.voca-wrap .todayVoca .vocaBtns span{display:none;}
	.voca-wrap .todayVoca .vocaBtns button{padding: 0;}
	.voca-wrap .todayVoca .vocaBtns{flex-direction: row; align-items:center; gap: 10px; padding-top: 8px;}
	.voca-wrap .todayVoca .vocaBtns .saveBtn svg, .voca-wrap .todayVoca .vocaBtns .learningBtn svg{width: 20px; margin-left: 0;}
	.voca-wrap .main ul li{margin-bottom: 4px;}  
	.voca-wrap .main ul li span.num{width:15px;}
	.voca-wrap .sampleSentence .sample{font-size: 12px; padding: 2px 10px;}
	.voca-wrap .main ul li:last-child{margin-bottom: 8px;}
	.voca-wrap .sampleSentence div p{line-height: 18px;}
	.voca-bottom .title p{font-size: 18px;}
	.voca-bottom .vocaListWrap{margin-top: 10px;}
	.voca-bottom .vocaListWrap > li{margin-bottom: 5px;}
	.voca-bottom{padding: 10px 0 15px;}
	.voca-bottom .title a{padding: 2px 15px; border-width: 1px;}
	.voca-bottom .vocaList-title .vocaList{font-size:20px;}
	.voca-bottom .vocaBtns .saveBtn svg{width: 18px;}
	.voca-bottom .vocaBtns .learningBtn svg{width: 18px;}
	.voca-bottom .vocaListWrap > li{padding: 8px 10px; border-radius: 10px;}
	.voca-bottom .vocaBtns{margin-top: 3px;}
	.voca-bottom .vocaList-con{margin-top: 5px;}
	.voca-top h2{font-size: 24px;}
	.voca-top .vocaSearch .vocaSearch-bar{margin-top: 0;}
	.myvoca-middle{padding: 15px 0;}
	.myVocaWrap ul li img{height: 40px;}
	.myVocaWrap ul li p.ea{font-size:24px;}
	.vocaProgressWrap{margin-top: 10px;}
	.myVocaWrap ul{margin-top: 15px;}
	.myVocaWrap ul li p{padding: 12px 0 2px;}
	.myVocaWrap ul li{padding: 10px 0;}
	#btnMoreWord{padding:5px;}
	.vocaProgressWrap .vocaProgressTrack, .vocaProgressWrap .vocaProgressFill{height:24px;}
	.voca-top .vocaSearch-wrap{margin-top: 0;}
	.vocaProgressWrap{margin-top: 0px;}
	.searchToggleDiv{position:absolute; right:0; top: 2px;}
	.voca-top .container{position:relative;}
	.noData{display:none; font-size: 16px;}
	.myVocaWrap ul li{padding: 5px 0;}
	.vocaProgressWrap .percent.low{font-size: 12px;}
	.vocaProgressWrap .vocaProgressTrack, .vocaProgressWrap .vocaProgressFill{height: 20px;}
	.myVoca .voca-top .vocaSearch-wrap{margin-top: 0;}
	.myVoca .voca-top{padding: 15px 0 10px;}
	.td-voca{width: 95%; margin-top: 10px;}
	.td-voca .voca-con{font-size: 22px;}
	.main_wrap .section1 .container{padding:20px 0 30px;}
	.td-voca .wrap>p{font-size: 18px;}
	.td-voca .voca-mean li{margin-bottom: 3px;}
	.td-voca .line{margin: 5px auto;}
	.td-voca a{margin-top:5px;}
	.td-voca .voca{gap: 20px;}
	.top-banner .container div{width: 70%;}
	.top-banner .container div p{font-size:12px; }
	.top-banner img{height:30px;}
	.top-banner, .top-banner .container{height:35px}
	.top-banner .container div a{font-size:10px; padding: 2px 15px;}
	.td-jindo{margin-top: -80px; width: 86%;}
	.td-jindo .wrap a{padding: 3px 20px;}
	.td-jindo .wrap p{font-size: 18px;}
	.td-jindo .wrap p span{font-size: 22px;}
}
@media screen and (max-width: 380px){
	.top-banner .container{justify-content: space-between;}
	.top-banner .container div{width:72%;}
}

.no_result_circle{
	height: 461px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}