@charset 'utf-8'; /* S core Dream */
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 400; src: url("/V2/resources/font/S-Core_Dream/SCDream4.woff") format("woff"); } 
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 500; src: url("/V2/resources/font/S-Core_Dream/SCDream5.woff") format("woff"); } 
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 700; src: url("/V2/resources/font/S-Core_Dream/SCDream7.woff") format("woff"); } 

/* common */
img { max-width: 100%; } 
.mo { display: none } 
@media (max-width: 768px){
    .mo { display: block } 
}
/* 보카 챌린지(단어장) */
.vacabList { background: #F3E8F6 url(/V2/resources/images/img/voca/bg.png) repeat; overflow: hidden; } 
#club.vacabList #visual { height: 44rem; } 
#club.vacabList #visual > .container { top: 50%; } 
.vacabList .content-article { position: relative; font-family: 'SCDream'; } 
.vacabList .content-article > .container { position: relative; padding-bottom: 24rem; z-index: 2; } 
.vacabList .section-header { padding-top: 10rem; } 
.vacabList .section-header .logo-box img { max-height: 5.4rem; margin: 0 auto; } 
.vacabList .section-header h3 { margin-top: 3rem; margin-bottom: 12.6rem; text-align: center; font-size: 4rem; font-family: 'SCDream'; font-weight: 500; color: #1F3558; } 
.vacabList .section-header h3 strong { display: block; margin-bottom: 3rem; font-size: 7rem; font-weight: 700; line-height: 1.2; } 
.vocal-wrapper { position: relative; } 
.vocal-wrapper + .vocal-wrapper { margin-top: 16.5rem; } 
.vocal-wrapper .vacab-panel { border-radius: 2rem; text-align: center; } 
.vocal-wrapper .vacab-panel > .__inner { position: relative; padding: 9.4rem 7.9rem; } 
.vocal-wrapper.stepEng .vacab-panel > .__inner::before { content: ''; position: absolute; top: 2.3rem; right: 5rem; width: 17rem; height: 24.3rem; background: url(/V2/resources/images/img/voca/character01.png) no-repeat center / contain; } 
.vocal-wrapper.stepEngMiddle .vacab-panel > .__inner::before { content: ''; position: absolute; bottom: 8.7rem; right: 8.9rem; width: 30.2rem; height: 25.4rem; background: url(/V2/resources/images/img/voca/character02.png) no-repeat center / contain; } 
.vocal-wrapper .vacab-panel.__first { position: relative; background-color: #fff; z-index: 3; } 
.vocal-wrapper .vacab-panel.__first::before { content: ''; position: absolute; top: 5.6rem; left: 0; width: 9.4rem; height: 10rem; background: no-repeat center / contain; -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); transform: translateX(-70%); z-index: 1; } 
.vocal-wrapper.stepEng .vacab-panel.__first::before { background-image: url(/V2/resources/images/img/voca/clip01.png); } 
.vocal-wrapper.stepEngMiddle .vacab-panel.__first::before { background-image: url(/V2/resources/images/img/voca/clip02.png); } 
.vocal-wrapper .vacab-panel.__first::after { content: ''; position: absolute; top: 19rem; right: 0; width: 7rem; height: 10.2rem; background: no-repeat center / contain; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); z-index: 1; } 
.vocal-wrapper.stepEng .vacab-panel.__first::after { background-image: url(/V2/resources/images/img/voca/bookmark01.png); } 
.vocal-wrapper.stepEngMiddle .vacab-panel.__first::after { background-image: url(/V2/resources/images/img/voca/bookmark02.png); } 
.vocal-wrapper .vacab-panel.__second,
.vocal-wrapper .vacab-panel.__third { position: absolute; top: 2%; left: -0.3%; width: 100%; height: 98%; } 
.vocal-wrapper .vacab-panel.__second { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); z-index: 2; } 
.vocal-wrapper .vacab-panel.__third { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } 
.vocal-wrapper.stepEng .vacab-panel.__second { background-color: #F0A3A0; } 
.vocal-wrapper.stepEng .vacab-panel.__third { background-color: #f1bec3; } 
.vocal-wrapper.stepEngMiddle .vacab-panel.__second { background-color: #7AB4DB; } 
.vocal-wrapper.stepEngMiddle .vacab-panel.__third { background-color: #aac9e6; } 
.vocal-wrapper.stepEng::before { content: ''; position: absolute; left: 5rem; bottom: 0; width: 25rem; height: 27rem; background: url(/V2/resources/images/img/voca/acc01.png) no-repeat center / contain; -webkit-transform: translateY(32%); -ms-transform: translateY(32%); transform: translateY(32%); } 
.vocal-wrapper.stepEngMiddle::before { content: ''; position: absolute; left: 4.5rem; bottom: 0; width: 20rem; height: 20rem; background: url(/V2/resources/images/img/voca/acc02.png) no-repeat center / contain; -webkit-transform: translateY(55%); -ms-transform: translateY(55%); transform: translateY(55%); } 
.vocal-wrapper .vacab-panel h4 { position: relative; display: inline-block; } 
.vocal-wrapper .vacab-panel h4::before { content: ''; position: absolute; top: 0; left: 0; width: 7.4rem; height: 5.4rem; background: no-repeat center / contain; -webkit-transform: translate(-100%, -60%); -ms-transform: translate(-100%, -60%); transform: translate(-100%, -60%); } 
.vocal-wrapper.stepEng .vacab-panel h4::before { background-image: url(/V2/resources/images/img/voca/star01.png); } 
.vocal-wrapper.stepEngMiddle .vacab-panel h4::before { background-image: url(/V2/resources/images/img/voca/star02.png); } 
.vacab-panel h4 img { max-height: 5.5rem; } 
.vacab-panel .sub_para { margin-top: 3rem; font-size: 3rem; line-height: 1.3; } 
.vacab-panel .sub_para strong { display: inline-block; position: relative; font-weight: 500; } 
.vacab-panel .sub_para strong::after { content: ''; position: absolute; left: -0.5rem; right: -0.5rem; bottom: 0; border-radius: 1rem; height: 1.6rem; z-index: -1; } 
.vocal-wrapper.stepEng .vacab-panel .sub_para strong::after { background-color: #fbdfdb; } 
.vocal-wrapper.stepEngMiddle .vacab-panel .sub_para strong::after { background-color: #cce6f3; } 
/* 보카 panel content */
.vacab-panel .__content { position: relative; margin-top: 5rem; z-index: 1; } 
.vacab-panel .__content > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; row-gap: 4rem; } 
.vocal-wrapper.stepEngMiddle .vacab-panel .__content > ul { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; max-width: 60rem; padding-left: 4rem; } 
.vacab-panel .vacab-item { width: 12rem; height: 12rem; border-radius: 100%; -webkit-transition: background-color 0.1s ease-out, -webkit-transform 0.2s ease-out; transition: background-color 0.1s ease-out, -webkit-transform 0.2s ease-out; -o-transition: transform 0.2s ease-out, background-color 0.1s ease-out; transition: transform 0.2s ease-out, background-color 0.1s ease-out; transition: transform 0.2s ease-out, background-color 0.1s ease-out, -webkit-transform 0.2s ease-out; } 
.vacab-panel .vacab-item > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; font-size: 2rem; color: #111111; line-height: 1.4; letter-spacing: 0; } 
.vacab-item.__type01 { -webkit-box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; background-color: rgba(31, 187, 200, 0.3); } 
.vacab-item.__type02 { -webkit-box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; background-color: rgba(70, 188, 235, 0.3); } 
.vacab-item.__type03 { -webkit-box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; background-color: rgba(69, 193, 151, 0.3); } 
.vacab-item.__type04 { -webkit-box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; background-color: rgba(243, 170, 20, 0.3); } 
.vacab-item.__type05 { -webkit-box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; background-color: rgba(238, 110, 1, 0.3); } 
.vacab-item.__type06 { -webkit-box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; background-color: rgba(216, 58, 72, 0.3); } 
.vacab-item.__type07 { -webkit-box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; background-color: rgba(129, 148, 174, 0.3); } 
.vacab-item.__type08 { -webkit-box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; background-color: rgba(43, 116, 181, 0.3); } 
.vacab-item.__type09 { -webkit-box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; box-shadow: 0.4rem 0.6rem 0rem 0rem rgba(255, 255, 255, 0.3) inset, -0.4rem -0.6rem 0rem 0rem rgba(0, 0, 0, 0.1) inset; background-color: rgba(48, 60, 78, 0.3); } 
/* 아이템 호버 */
.vacab-panel .vacab-item:hover, .vacab-panel .vacab-item:focus-within { -webkit-transform: scale(1.167); -ms-transform: scale(1.167); transform: scale(1.167) } 
.vacab-panel .vacab-item:hover > a, .vacab-panel .vacab-item:focus-within > a { color: #fff; font-weight: 600; } 
.vacab-item.__type01:hover, .vacab-item.__type01:focus-within { background-color: rgba(31, 187, 200, 1); } 
.vacab-item.__type02:hover, .vacab-item.__type02:focus-within { background-color: rgba(70, 188, 235, 1); } 
.vacab-item.__type03:hover, .vacab-item.__type03:focus-within { background-color: rgba(69, 193, 151, 1); } 
.vacab-item.__type04:hover, .vacab-item.__type04:focus-within { background-color: rgba(243, 170, 20, 1); } 
.vacab-item.__type05:hover, .vacab-item.__type05:focus-within { background-color: rgba(238, 110, 1, 1); } 
.vacab-item.__type06:hover, .vacab-item.__type06:focus-within { background-color: rgba(216, 58, 72, 1); } 
.vacab-item.__type07:hover, .vacab-item.__type07:focus-within { background-color: rgba(129, 148, 174, 1); } 
.vacab-item.__type08:hover, .vacab-item.__type08:focus-within { background-color: rgba(43, 116, 181, 1); } 
.vacab-item.__type09:hover, .vacab-item.__type09:focus-within { background-color: rgba(48, 60, 78, 1); } 
/* 배경 악세사리 */
.vacabList .bg-acc { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; } 
.vacabList .bg-acc > span { position: absolute; border-radius: 100%; } 
.vacabList .bg-acc .acc01 { top: 0; left: 0; width: 20rem; height: 20rem; background-color: rgba(255, 255, 255, 0.5); -webkit-transform: translate(-30%, -10%); -ms-transform: translate(-30%, -10%); transform: translate(-30%, -10%); } 
.vacabList .bg-acc .acc02 { top: 0; right: 13.5rem; width: 25rem; height: 25rem; border: 1.5rem solid rgba(0, 128, 193, 0.1); -webkit-transform: translateY(-51%); -ms-transform: translateY(-51%); transform: translateY(-51%); } 
.vacabList .bg-acc .acc03 { top: 8.8rem; right: 11.6rem; width: 5rem; height: 5rem; border: 1.5rem solid rgba(0, 128, 193, 0.3); } 
.vacabList .bg-acc .acc04 { top: 23.4rem; right: 0; width: 15rem; height: 15rem; background-color: rgba(236, 94, 75, 0.2); -webkit-transform: translateX(51%); -ms-transform: translateX(51%); transform: translateX(51%); } 
@media (max-width: 1000px){
    .vocal-wrapper.stepEng .vacab-panel > .__inner::before { width: 14.3rem; height: 20.6rem; top: 6rem; right: 3rem; } 
    .vocal-wrapper.stepEngMiddle .vacab-panel > .__inner::before { right: 3.4rem; width: 28.2rem; height: 20.9rem; } 
}

@media (max-width: 685px){
    .vacabList .content-article > .container { padding-bottom: 13rem; } 
    .vacabList .section-header h3 { max-width: 90%; margin: 3rem auto 9.5rem; } 
    .vocal-wrapper + .vocal-wrapper { margin-top: 12rem; } 
    .vocal-wrapper .vacab-panel > .__inner { padding: 7.6rem 5rem; } 
    .vocal-wrapper.stepEngMiddle .vacab-panel h4 img { max-height: 14rem; } 
    .vocal-wrapper .vacab-panel h4::before { left: 9rem; -webkit-transform: translate(0, -95%); -ms-transform: translate(0, -95%); transform: translate(0, -95%); } 
    .vocal-wrapper.stepEngMiddle .vacab-panel h4::before { left: 10rem; } 
    .vocal-wrapper .vacab-panel.__first::before { position: absolute; top: 0; left: 2.8rem; width: 9rem; height: 9.5rem; -webkit-transform: translate(0, -70%) rotate(90deg); -ms-transform: translate(0, -70%) rotate(90deg); transform: translate(0, -70%) rotate(90deg); z-index: 1; } 
    .vocal-wrapper .vacab-panel.__first::after { content: none; } 
    .vocal-wrapper .vacab-panel.__second,
    .vocal-wrapper .vacab-panel.__third { -webkit-transform: none; -ms-transform: none; transform: none; top: 0; left: unset; height: auto; } 
    .vocal-wrapper .vacab-panel.__second { right: -2%; bottom: -1%; } 
    .vocal-wrapper .vacab-panel.__third { right: -4%; bottom: -2%; } 
    .vacab-panel .__content > ul { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; row-gap: 3rem; max-width: 380px; margin: 0 auto; } 
    .vocal-wrapper.stepEngMiddle .vacab-panel .__content > ul { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-left: 0; } 
    .vacab-panel .vacab-item { position: relative; width: 30%; height: 0; padding-top: 30%; } 
    .vacab-panel .vacab-item > a { position: absolute; top: 0; left: 0; font-size: 2.3rem; } 
    .vocal-wrapper.stepEng .vacab-panel > .__inner::before { top: auto; bottom: 3rem; right: 7rem; background-image: url(/V2/resources/images/img/voca/character01_mo.png); } 
    .vocal-wrapper.stepEngMiddle .vacab-panel > .__inner::before { right: 3.4rem; bottom: 2.5rem; background-image: url(/V2/resources/images/img/voca/character02_mo.png); } 
    .vocal-wrapper.stepEng::before { left: 14rem; width: 23rem; height: 25rem; -webkit-transform: translateY(43%); -ms-transform: translateY(43%); transform: translateY(43%); } 
    .vocal-wrapper.stepEngMiddle::before { left: 6rem; } 
    .vacabList .bg-acc .acc01 { -webkit-transform: translate(-50%, -10%); -ms-transform: translate(-50%, -10%); transform: translate(-50%, -10%); } 
    .vacabList .bg-acc .acc02 { right: 5rem; width: 23rem; height: 23rem; -webkit-transform: translateY(-60%); -ms-transform: translateY(-60%); transform: translateY(-60%); } 
    .vacabList .bg-acc .acc03 { top: 7rem; right: 3rem; } 
    .vacabList .bg-acc .acc04 { top: 22rem; -webkit-transform: translateX(60%); -ms-transform: translateX(60%); transform: translateX(60%); } 
}