================================================================*/
.base-list {
display: flex;
align-items: center;
justify-content: space-between;
}
.base-list > li {
padding: 20px 0px;
font-size: 14px;
color: #666666;
}
.base-list > li:nth-child(1), .base-list > li:nth-child(2) {
padding: 20px 30px;
flex-basis: 470px;
}
.base-list > li:nth-child(3) {
flex-basis: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.base-list > li:nth-child(4) {
flex-basis: 120px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.base-list .lebel-group {
margin-bottom: 9px;
}
.base-list .study-lesson-name,
.base-list .study-subject {
font-size: 18px;
font-weight: 700;
}
/*==============================================================
강의(강좌) 목록 내부 아이템
중2
역사
서술형
================================================================*/
/*==============================================================
layout
================================================================*/
/* 전체 레이아웃 */
.pc-wrap {
overflow: visible;
width: 100%;
display: flex;
flex-direction: column;
min-width: 1200px;
min-width: 1440px;
}
.pc-wrap > .main {
flex: 1;
min-height: 100vh;
}
.pc-wrap:has(.sub-container) {
background-color: #fff;
}
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
/*==============================================================
[START] 서브레이아웃
html 구조 참고
================================================================*/
.sub-container .inner {
max-width: 1280px;
margin: 0 auto;
}
.sub-container .page-head {
padding: 20px 0 70px;
background-image: url("/assets/renewal2024/img/sub/bg_object.png"), url("/assets/renewal2024/img/sub/sub_bg.jpg");
background-repeat: no-repeat;
background-position: 100% 0, 0 0;
background-size: 157px, cover;
}
.sub-container .page-head.my-studyroom-bg {
background-image: url("/assets/renewal2024/img/sub/bg_object_my_studyroom.png"), url("/assets/renewal2024/img/sub/sub_bg.jpg");
}
.sub-container .page-head.qbank-bg {
padding: 20px 0 48px;
background-image: url("/assets/renewal2024/img/sub/bg_object_qbank.png"), url("/assets/renewal2024/img/sub/sub_bg.jpg");
}
.sub-container .page-head.perfectScore-bg {
background-image: url("/assets/renewal2024/img/sub/bg_object_perfect_score.png"), url("/assets/renewal2024/img/sub/sub_bg.jpg");
}
.sub-container .page-head.subjectFocus-bg {
background-image: url("/assets/renewal2024/img/sub/bg_object_subject_focus.png"), url("/assets/renewal2024/img/sub/sub_bg.jpg");
}
.sub-container .page-head.supplement-bg {
background-image: url("/assets/renewal2024/img/sub/bg_object_supplement.png"), url("/assets/renewal2024/img/sub/sub_bg.jpg");
}
.sub-container .page-head.learningInformation-bg {
background-image: url("/assets/renewal2024/img/sub/bg_object_learning_information.png"), url("/assets/renewal2024/img/sub/sub_bg.jpg");
}
.sub-container .page-head.edu-ssam-bg {
background-image: url("/assets/renewal2024/img/sub/bg_object_edussam.png"), url("/assets/renewal2024/img/sub/sub_bg.jpg");
}
.sub-container .page-head.mypage-bg {
background-image: url("/assets/renewal2024/img/sub/bg_object_mypage.png"), url("/assets/renewal2024/img/sub/sub_bg.jpg");
}
.sub-container .page-head.customerService-bg {
padding: 20px 0;
background-image: url("/assets/renewal2024/img/sub/bg_object_customer_service.png"), url("/assets/renewal2024/img/sub/sub_bg.jpg");
}
.sub-container .location {
display: block;
margin-bottom: 36px;
}
.sub-container .location .location-wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 5555;
}
.sub-container .location .location-wrap .breadcrumb {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0 4px;
font-size: 14px;
}
.sub-container .location .location-wrap .breadcrumb .icon_next {
padding: 0 10px;
width: 8px;
height: 12px;
}
.sub-container .location .location-wrap .breadcrumb a {
font-size: 14px;
}
.sub-container .location .location-wrap .select-wrap {
min-width: 260px;
}
.sub-container .location .location-wrap .select-wrap .select-menu {
position: relative;
}
.sub-container .location .location-wrap .select-wrap .select-menu .select-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 auto;
font-size: 40px;
font-weight: 700;
}
.sub-container .location .location-wrap .select-wrap .select-menu .select-btn > i {
display: inline-block;
width: 26px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='20' viewBox='0 0 27 20' fill='none'%3E%3Cg clip-path='url(%23clip0_2941_10439)'%3E%3Cpath d='M17.2726 20H13.6964C12.7445 20 11.858 19.4441 11.44 18.5851L5.13891 5.67883C4.76115 4.90062 4.80144 3.99607 5.24972 3.25828C5.69799 2.5205 6.48373 2.06569 7.34503 2.04548C13.359 1.90399 19.4485 2.08591 25.4473 2.58114C26.2028 2.64178 26.4849 3.0511 26.5 3.41494C26.5101 3.63728 26.4144 3.8192 26.359 3.92532C24.3493 7.76081 20.9444 15.3964 19.5744 18.5042C19.1715 19.4138 18.2699 20.0051 17.2776 20.0051L17.2726 20ZM11.3241 2.9096C10.0045 2.9096 8.68482 2.92476 7.36518 2.95508C6.81113 2.97024 6.31248 3.25828 6.02539 3.7333C5.73829 4.20831 5.7131 4.78439 5.95487 5.27962L12.2559 18.1859C12.5229 18.7367 13.092 19.0904 13.7015 19.0904H17.2776C17.9123 19.0904 18.4915 18.7165 18.7484 18.1353C20.1234 15.0275 23.5283 7.38181 25.5531 3.516C25.5078 3.5059 25.4524 3.49074 25.3818 3.48568C20.7278 3.10163 16.0184 2.9096 11.3291 2.9096H11.3241Z' fill='%2300AB93'/%3E%3Cpath d='M21.5992 12.6322C20.3148 12.3038 19.0254 12.0157 17.7259 11.758C17.5043 11.7125 17.4388 12.0612 17.6654 12.1067C18.9649 12.3644 20.2544 12.6525 21.5387 12.9809C21.7604 13.0365 21.8208 12.6878 21.5992 12.6322Z' fill='%2300AB93'/%3E%3Cpath d='M20.5869 14.406C19.3025 14.0775 18.0131 13.7895 16.7136 13.5317C16.4919 13.4862 16.4265 13.8349 16.6531 13.8804C17.9526 14.1381 19.242 14.4262 20.5264 14.7546C20.748 14.8102 20.8085 14.4615 20.5869 14.406Z' fill='%2300AB93'/%3E%3Cpath d='M22.0828 10.9242C20.874 10.7322 19.6601 10.5452 18.4512 10.3532C18.2246 10.3178 18.1641 10.6665 18.3908 10.7019C19.5996 10.8939 20.8135 11.0809 22.0223 11.2729C22.249 11.3083 22.3094 10.9596 22.0828 10.9242Z' fill='%2300AB93'/%3E%3Cpath d='M22.9944 9.49411C21.7251 9.60528 20.481 9.50927 19.242 9.20607C19.0203 9.15048 18.9599 9.49916 19.1815 9.55475C20.4458 9.863 21.7302 9.95902 23.0246 9.84784C23.2513 9.82763 23.221 9.4739 22.9944 9.49411Z' fill='%2300AB93'/%3E%3Cpath d='M19.4082 16.5385C18.1389 16.6496 16.8948 16.5536 15.6558 16.2504C15.4342 16.1948 15.3737 16.5435 15.5953 16.5991C16.8596 16.9074 18.144 17.0034 19.4384 16.8922C19.6651 16.872 19.6349 16.5183 19.4082 16.5385Z' fill='%2300AB93'/%3E%3Cpath d='M23.6693 7.95789C22.395 7.76081 21.1257 7.56878 19.8514 7.3717C19.6247 7.33633 19.5643 7.68501 19.791 7.72038C21.0653 7.91746 22.3345 8.10949 23.6089 8.30657C23.8355 8.34194 23.896 7.99326 23.6693 7.95789Z' fill='%2300AB93'/%3E%3Cpath d='M24.6314 6.16901C22.9843 6.10837 21.3474 5.98203 19.7104 5.78495C19.4837 5.75969 19.4233 6.10837 19.65 6.13364C21.3171 6.33072 22.9843 6.4621 24.6616 6.52274C24.8882 6.53285 24.858 6.17912 24.6314 6.16901Z' fill='%2300AB93'/%3E%3Cpath d='M25.407 4.936C24.1377 4.88041 22.8836 4.72881 21.6395 4.47614C21.4178 4.43066 21.3524 4.77934 21.579 4.82482C22.8533 5.08254 24.1377 5.23414 25.4372 5.28973C25.6639 5.29984 25.6336 4.9461 25.407 4.936Z' fill='%2300AB93'/%3E%3Cpath d='M21.846 2.58114C15.1117 2.02527 8.27176 1.86861 1.5174 2.11117C1.14467 2.12633 0.817281 2.32847 0.635956 2.65694C0.454631 2.9854 0.459668 3.37956 0.646029 3.70298C3.75878 9.11511 8.24657 15.26 12.0695 19.3481C12.3012 19.5957 12.679 20 13.2632 20C13.4748 20 13.7115 19.9495 13.9835 19.813C14.3814 19.6159 14.7138 19.2824 14.9455 18.8428L22.7576 3.92532C22.813 3.8192 22.9087 3.63728 22.8986 3.41494C22.8835 3.0511 22.6015 2.64683 21.846 2.58114Z' fill='%2300AB93'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2941_10439'%3E%3Crect width='26' height='20' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat 0 0;
background-size: 100%;
transition: all 0.3s ease-in-out;
}
.sub-container .location .location-wrap .select-wrap .select-menu .options {
display: none;
position: absolute;
width: 100%;
min-width: 169px;
top: auto;
bottom: auto;
background: #fff;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
padding: 20px 30px;
border-image-source: url("/assets/renewal2024/img/common/line-img.png");
border-image-slice: 1;
border-image-width: 1px;
border-image-repeat: repeat;
}
.sub-container .location .location-wrap .select-wrap .select-menu .options .option {
border-bottom: 1px dashed #b3b3b3;
}
.sub-container .location .location-wrap .select-wrap .select-menu .options .option > a {
display: block;
padding: 8px 0;
font-size: 18px;
}
.sub-container .location .location-wrap .select-wrap .select-menu .options .option > div {
display: flex;
padding: 16px 10px 28px 20px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 0px 0px 16px 16px;
background: var(--gray-Gray-50, #f5f5f5);
}
.sub-container .location .location-wrap .select-wrap .select-menu .options .option > div > a {
position: relative;
display: block;
color: #666666;
padding: 4px 0 0 10px;
}
.sub-container .location .location-wrap .select-wrap .select-menu .options .option > div > a::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #666666;
transform: translate(0, -50%);
}
.sub-container .location .location-wrap .select-wrap .select-menu .options .option:has(div) {
border-bottom: none;
}
.sub-container .location .location-wrap .select-wrap .select-menu.active .select-arrow {
transform: rotate(180deg);
transition: all 0.3s ease-in-out;
}
.sub-container .location .location-wrap .select-wrap .select-menu.active .options {
display: block;
height: fit-content !important;
}
.sub-container .page-cont {
position: relative;
padding: 68px 0 140px;
z-index: 1;
}
.sub-container .page-cont::after {
content: "";
z-index: -1;
position: absolute;
top: -12px;
left: 0;
display: block;
width: 100%;
height: 100%;
background-image: url("/assets/renewal2024/img/sub/bg_cont1.png"), url("/assets/renewal2024/img/sub/bg_cont2.png");
background-size: auto, 60px;
background-repeat: no-repeat, repeat-x;
}
.sub-container .page-cont .page-section {
margin-bottom: 100px;
}
.sub-container .page-cont .page-section:last-child {
margin-bottom: 0;
}
.sub-container .page-cont .page-section-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.sub-container .page-cont .page-section-top:has(.search-wrap) {
display: block;
}
.sub-container .page-cont .page-section-title {
font-size: 28px;
font-weight: 700;
}
.sub-container .tab {
position: relative;
}
.sub-container .tab-list {
display: flex;
align-items: flex-end;
}
.sub-container .tab-list > li {
height: 40px;
border-radius: 13px 13px 0px 0px;
border-top: 1px solid #121212;
border-right: 1px solid #121212;
border-left: 1px solid #121212;
background: #ebebeb;
color: rgba(18, 18, 18, 0.8);
}
.sub-container .tab-list > li > a, .sub-container .tab-list > li > label {
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
padding: 0px 40px;
color: #121212;
}
.sub-container .tab-list > li > a > span, .sub-container .tab-list > li > label > span {
padding-left: 4px;
font-size: 18px;
font-weight: 700;
}
.sub-container .tab-list > li.on {
height: 50px;
background-color: #0e2b49;
}
.sub-container .tab-list > li.on > a, .sub-container .tab-list > li.on > label {
color: rgba(255, 255, 255, 0.8);
}
.sub-container .tab-cont {
padding: 22px 40px 40px 40px;
background: url("/assets/renewal2024/img/sub/paper-bg.png") no-repeat 0 0;
background-size: 100%;
border-image-source: url("/assets/renewal2024/img/common/line-img.png");
border-image-slice: 2;
border-image-width: 2px;
border-image-repeat: repeat;
}
.sub-container .tab.fixed {
position: absolute;
top: -50px;
width: 100%;
max-width: 1280px;
}
.sub-container .slide-tab {
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 22px;
background: #f5f5f5;
padding: 3px;
}
.sub-container .slide-tab > li > a {
display: block;
padding: 9px 26px;
color: #666666;
}
.sub-container .slide-tab > li.on > a {
border-radius: 22px;
background-color: #00ab93;
color: #fff;
font-weight: 700;
}
@media (min-width: 801px) {
.sub-floating {
display: block;
position: fixed;
bottom: 30px;
right: 18px;
z-index: 1;
opacity: 0;
transition: all 0.5s ease-in;
}
.sub-floating.move {
bottom: 320px;
}
.sub-floating.show {
opacity: 1;
}
.sub-floating > div {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
}
}
.sub-floating .quick-move-top-btn {
margin: 0 auto;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.sub-floating .quick-move-top-btn > img {
width: 100%;
}
/*================================================================
[END] 서브레이아웃
================================================================*/
/* header */
.pc_layout {
position: sticky;
top: -105px;
z-index: 6666;
}
.pc_layout .header_wrap .header > ul {
display: flex;
align-items: center;
gap: 24px;
flex-grow: 1;
}
@media (min-width: 1440px) {
.pc_layout .header_wrap .header > ul {
gap: 56px;
}
}
@media (min-width: 1440px) {
.pc_layout .header_wrap .header > ul.menu-list1 {
height: 100%;
}
}
.pc_layout .header_wrap .header > ul.menu-list2 {
margin-left: 160px;
flex-grow: 1;
justify-content: flex-end;
gap: 20px;
}
@media (min-width: 1440px) {
.pc_layout .header_wrap .header > ul.menu-list2 {
gap: 28px;
height: 100%;
}
}
@media (min-width: 1440px) {
.pc_layout .header_wrap .header > ul.menu-list2 > li > a {
height: 70px;
align-items: center;
display: flex;
}
}
.pc_layout .header_wrap .header > ul.menu-list2 li a {
font-size: 14px;
font-weight: 400;
line-height: 128.571%;
}
@media (min-width: 1440px) {
.pc_layout .header_wrap .header > ul.menu-list2 li a {
font-size: 16px;
line-height: 150%;
height: 100%;
}
}
.pc_layout .header_wrap .header > ul.menu-list2 li.item01 a {
display: flex;
align-items: center;
}
.pc_layout .header_wrap .header > ul.menu-list2 li:nth-of-type(3) ul {
left: unset;
transform: unset;
right: 0;
}
.pc_layout .header_wrap .header > ul > li {
margin-right: 0;
font-size: 22px;
font-weight: 700;
line-height: 144.444%;
}
.pc_layout .header_wrap .header > ul > li.active {
position: relative;
}
.pc_layout .header_wrap .header > ul > li.active > a {
color: #00ab93;
}
@media (min-width: 1440px) {
.pc_layout .header_wrap .header > ul > li {
font-size: 20px;
line-height: 140%;
height: 100%;
}
}
.pc_layout .header_wrap .header > ul > li:hover > a {
color: #00ab93;
}
.pc_layout .header_wrap .header > ul > li:hover:after {
display: none;
content: "";
}
.pc_layout .header_wrap .header > ul > li > a {
padding: 20px 0;
height: auto;
font-size: 18px;
font-weight: 700;
line-height: 144.444%;
display: block;
width: max-content;
}
@media (min-width: 1440px) {
.pc_layout .header_wrap .header > ul > li > a {
font-size: 20px;
line-height: 140%;
}
}
.pc_layout .header_wrap .header > ul > li .sub-menu {
position: absolute;
width: max-content;
min-width: 260px;
height: fit-content !important;
top: auto;
bottom: auto;
border-radius: 20px;
background: #fff;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
padding: 20px;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li {
border-bottom: 1px dashed #b3b3b3;
display: flex;
align-items: center;
gap: 4px;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li:has(.sub-sub-menu) {
flex-direction: column;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li + li {
margin-top: 0;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li > img {
width: 14px;
height: auto;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li.on {
height: inherit;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li.on ul.sub-sub-menu {
height: fit-content !important;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li > ul.sub-sub-menu {
width: 100%;
border-radius: 10px;
background: #f5f5f5;
padding: 6px 30px;
margin: 0 0 10px;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li > ul.sub-sub-menu > li {
margin-top: 0;
padding: 0;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li > ul.sub-sub-menu > li > a {
display: block;
width: max-content;
color: #666;
font-size: 14px;
font-weight: 400;
line-height: 200%;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li > ul.sub-sub-menu > li > a:hover {
color: #00ab93;
}
.pc_layout .header_wrap .header > ul > li .sub-menu > li > ul.sub-sub-menu > li > a:hover::after, .pc_layout .header_wrap .header > ul > li .sub-menu > li > ul.sub-sub-menu > li > a:hover::before {
display: none;
}
.pc_layout .header_wrap .header > ul > li .sub-menu::before {
display: block;
content: "";
background-image: url("/assets/renewal2024/img/common/line-img.png");
background-size: 100%;
background-size: auto;
background-repeat: round;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 20px;
}
.pc_layout .header_wrap .header .all_menu {
cursor: pointer;
}
.pc_layout .header_wrap .header-top {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 0;
}
@media (min-width: 801px) {
.pc_layout .header_wrap .header-top {
padding: 22px 32px;
}
}
.pc_layout .allMenu_wrap {
display: none;
position: fixed;
top: 0;
z-index: 7777;
width: 100%;
height: 100vh;
background: url("/assets/renewal2024/img/common/bg_all_menu.png") no-repeat center center;
background-size: cover;
padding: 40px 0 0;
overflow: auto;
}
.pc_layout .allMenu_wrap .logo {
max-width: 180px;
display: block;
margin: 0 auto;
}
.pc_layout .allMenu_wrap .close-btn {
position: absolute;
top: 40px;
right: 30px;
cursor: pointer;
}
.pc_layout .allMenu_wrap .allMenu {
display: flex;
flex-wrap: wrap;
row-gap: 40px;
max-width: 1450px;
margin: 65px auto 0;
padding: 0;
}
.pc_layout .allMenu_wrap .allMenu > li {
padding: 0 0 0 30px;
width: 20%;
}
.pc_layout .allMenu_wrap .allMenu > li:nth-child(4) {
margin-right: 0;
}
.pc_layout .allMenu_wrap .allMenu > li a {
font-size: 20px;
font-weight: 700;
color: #fff;
}
.pc_layout .allMenu_wrap .allMenu > li a:after {
display: none;
}
.pc_layout .allMenu_wrap .allMenu > li a:hover, .pc_layout .allMenu_wrap .allMenu > li a:active {
color: #ffe982;
border-color: #ffe982;
}
.pc_layout .allMenu_wrap .allMenu > li > .sub-menu {
margin-top: 16px;
}
.pc_layout .allMenu_wrap .allMenu > li > .sub-menu li {
margin-top: 0;
}
.pc_layout .allMenu_wrap .allMenu > li > .sub-menu li > a {
display: block;
width: 100%;
padding: 8px 0px 8px 16px;
font-size: 16px;
font-weight: 400;
color: #fff;
border-left: 1px solid #fff;
}
.pc_layout .allMenu_wrap .allMenu > li > .sub-menu li > a:hover, .pc_layout .allMenu_wrap .allMenu > li > .sub-menu li > a:active {
font-weight: 700;
color: #ffe982;
border-color: #ffe982;
}
.pc_layout .allMenu_wrap .allMenu > li .all-depth3 span {
padding-left: 12px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cellipse cx='2.54118' cy='2' rx='2.54118' ry='2' fill='white'/%3E%3C/svg%3E") no-repeat 0 50%;
}
.pc_layout .allMenu_wrap .allMenu > li .all-depth3 span:hover, .pc_layout .allMenu_wrap .allMenu > li .all-depth3 span:active {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cellipse cx='2.54118' cy='2' rx='2.54118' ry='2' fill='%23FFE982'/%3E%3C/svg%3E") no-repeat 0 50%;
}
.header {
background-color: #fff;
}
.header-container {
width: 100%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1920' height='1' viewBox='0 0 1920 1' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1920 1H0V0H1920V1Z' fill='url(%23pattern0_1928_19654)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_1928_19654' patternContentUnits='objectBoundingBox' width='0.01875' height='36'%3E%3Cuse xlink:href='%23image0_1928_19654' transform='scale(0.000260417 0.5)'/%3E%3C/pattern%3E%3Cimage id='image0_1928_19654' width='72' height='72' xlink:href='data:image/png;base64,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'/%3E%3C/defs%3E%3C/svg%3E") no-repeat 0 100%;
background-size: 100%;
}
.header-container.top {
padding: 21px 0;
}
.header-container.bottom {
padding: 15px 0 18px;
}
.header-inner {
width: 100%;
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.header .logo > a {
display: block;
width: 135px;
}
.header .btns {
display: flex;
align-items: center;
justify-content: flex-start;
}
.header .btns > a {
min-width: 64px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
border-left: 1px solid #dddddd;
padding: 0 16px;
box-sizing: content-box;
}
.header .btns > a:first-child {
border-left: none;
}
.header .my-page-layer {
display: flex;
align-items: center;
justify-content: flex-start;
}
.header .my-page-layer .my-page {
display: flex;
align-items: center;
gap: 8px;
min-height: 64px;
padding-right: 16px;
}
.header .my-page-layer .my-page .profile {
position: relative;
}
.header .my-page-layer .my-page .profile .profile-img {
width: 48px;
height: auto;
display: block;
}
.header .my-page-layer .my-page .my-page-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.header .my-page-layer .my-page .my-page-info .profile-grade {
font-size: 14px;
font-weight: 400;
color: #999999;
}
.header .my-page-layer .my-page .my-page-info .profile-name {
padding-right: 18px;
font-weight: 700;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM7.97038 7.00403L5.25483 4.42286C5.08189 4.25848 4.99444 4.04977 5.00027 3.82259C5.00805 3.61388 5.08966 3.42179 5.23928 3.26665C5.24122 3.26388 5.24365 3.26157 5.24608 3.25926C5.24851 3.25695 5.25094 3.25464 5.25288 3.25187C5.41999 3.09488 5.62791 3.00807 5.85526 3.00068C6.09815 2.99145 6.3119 3.07641 6.48678 3.24264L9.69298 6.29017C9.8018 6.3936 9.88147 6.51181 9.93199 6.64295C9.97668 6.76115 10 6.88306 10 7.00311C10 7.12317 9.97668 7.24507 9.93199 7.36327C9.88147 7.49441 9.8018 7.61447 9.69298 7.71605L6.4965 10.7543C6.32745 10.915 6.11176 11 5.87663 11C5.64151 11 5.42582 10.915 5.25677 10.7543C5.25288 10.7507 5.24705 10.7451 5.24317 10.7396C5.08966 10.5807 5.00805 10.3813 5.00805 10.1633C5.00805 9.94537 5.09354 9.73666 5.25677 9.58336L7.97038 7.00403Z' fill='%23DDDDDD'/%3E%3C/svg%3E") no-repeat 100% 50%;
}
.header .my-page-layer .btns > a {
border-left: 1px solid #dddddd;
}
.header .menu-list {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: flex-start;
}
.header .menu-list > li > a {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
}
.header .menu-list > li > a > i {
display: block;
width: 20px;
height: 20px;
font-size: 0;
}
.header .menu-list > li > a.mystudy > i {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M16.9374 14.0294V9.21668L10.379 12.7872C10.0938 12.9422 9.79473 13.0205 9.48188 13.0221C9.16902 13.0238 8.86999 12.9455 8.58478 12.7872L1.72924 9.04448C1.5574 8.95156 1.43456 8.83364 1.36074 8.69073C1.28691 8.54781 1.25 8.39029 1.25 8.21816C1.25 8.04603 1.28691 7.8885 1.36074 7.74559C1.43456 7.60268 1.5574 7.48476 1.72924 7.39184L8.58478 3.65409C8.72566 3.57502 8.87089 3.51568 9.02047 3.47607C9.17006 3.43647 9.32386 3.41666 9.48188 3.41666C9.6399 3.41666 9.7937 3.43647 9.94328 3.47607C10.0929 3.51568 10.2381 3.57502 10.379 3.65409L18.2552 7.95498C18.4099 8.03405 18.5311 8.1485 18.6187 8.29834C18.7062 8.44804 18.75 8.60902 18.75 8.78129V14.0344C18.75 14.2896 18.6631 14.5043 18.4893 14.6785C18.3154 14.8527 18.1011 14.9398 17.8463 14.9398C17.5913 14.9398 17.3762 14.8519 17.2007 14.676C17.0251 14.5003 16.9374 14.2847 16.9374 14.0294ZM8.58478 17.7676L4.59596 15.6135C4.28311 15.4413 4.03993 15.2063 3.86643 14.9085C3.69279 14.6106 3.60596 14.2878 3.60596 13.9401V10.9912L8.58478 13.6925C8.86999 13.8476 9.16902 13.9251 9.48188 13.9251C9.79473 13.9251 10.0938 13.8476 10.379 13.6925L15.3578 10.9912V13.9401C15.3578 14.2878 15.271 14.6106 15.0973 14.9085C14.9238 15.2063 14.6807 15.4413 14.3678 15.6135L10.379 17.7676C10.2381 17.8466 10.0929 17.9051 9.94328 17.9431C9.7937 17.981 9.6399 18 9.48188 18C9.32386 18 9.17006 17.981 9.02047 17.9431C8.87089 17.9051 8.72566 17.8466 8.58478 17.7676Z' fill='%23121212'/%3E%3C/svg%3E") no-repeat 0 0;
}
.header .menu-list > li > a.qbank > i {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M4.42497 14.3252V10.5264C4.42497 10.2839 4.50702 10.08 4.67112 9.91474C4.83535 9.74931 5.03663 9.6666 5.27496 9.6666C5.51342 9.6666 5.71393 9.74931 5.87648 9.91474C6.03916 10.08 6.1205 10.2839 6.1205 10.5264V14.3299C6.1205 14.5724 6.03916 14.7763 5.87648 14.9416C5.71393 15.107 5.51342 15.1898 5.27496 15.1898C5.03663 15.1898 4.83535 15.1063 4.67112 14.9392C4.50702 14.7724 4.42497 14.5677 4.42497 14.3252ZM9.15445 14.3299V10.5264C9.15445 10.2839 9.23579 10.08 9.39847 9.91474C9.56114 9.74931 9.76165 9.6666 9.99998 9.6666C10.2383 9.6666 10.4388 9.74931 10.6015 9.91474C10.7642 10.08 10.8455 10.2839 10.8455 10.5264V14.3299C10.8455 14.5724 10.7642 14.7763 10.6015 14.9416C10.4388 15.107 10.2383 15.1898 9.99998 15.1898C9.76165 15.1898 9.56114 15.107 9.39847 14.9416C9.23579 14.7763 9.15445 14.5724 9.15445 14.3299ZM2.9659 18.4167C2.71825 18.4167 2.50922 18.33 2.33878 18.1567C2.16847 17.9835 2.08331 17.771 2.08331 17.5192C2.08331 17.2673 2.16847 17.0547 2.33878 16.8814C2.50922 16.7082 2.71825 16.6216 2.9659 16.6216H17.0341C17.2817 16.6216 17.4907 16.7082 17.6612 16.8814C17.8315 17.0547 17.9166 17.2673 17.9166 17.5192C17.9166 17.771 17.8315 17.9835 17.6612 18.1567C17.4907 18.33 17.2817 18.4167 17.0341 18.4167H2.9659ZM13.8795 14.3252V10.5264C13.8795 10.2839 13.9616 10.08 14.1258 9.91474C14.2899 9.74931 14.4912 9.6666 14.7297 9.6666C14.968 9.6666 15.1685 9.74931 15.3312 9.91474C15.4937 10.08 15.575 10.2839 15.575 10.5264V14.3299C15.575 14.5724 15.4937 14.7763 15.3312 14.9416C15.1685 15.107 14.968 15.1898 14.7297 15.1898C14.4912 15.1898 14.2899 15.1063 14.1258 14.9392C13.9616 14.7724 13.8795 14.5677 13.8795 14.3252ZM17.0154 8.22998H2.89296C2.66808 8.22998 2.47689 8.14996 2.31938 7.98992C2.162 7.82988 2.08331 7.63552 2.08331 7.40683V6.89732C2.08331 6.73373 2.12431 6.58914 2.20629 6.46356C2.28815 6.33797 2.39658 6.23757 2.53159 6.16235L9.20895 2.76955C9.45659 2.64541 9.72027 2.58334 9.99998 2.58334C10.2797 2.58334 10.5434 2.64541 10.791 2.76955L17.4203 6.13789C17.5811 6.21311 17.7041 6.32666 17.789 6.47855C17.8741 6.63057 17.9166 6.79304 17.9166 6.96597V7.30899C17.9166 7.56714 17.8299 7.78517 17.6565 7.9631C17.483 8.14102 17.2693 8.22998 17.0154 8.22998Z' fill='%23121212'/%3E%3C/svg%3E") no-repeat 0 0;
}
.header .menu-list > li > a:hover, .header .menu-list > li > a:active {
color: #00ab93;
}
.header .menu-list > li > a:hover.mystudy > i, .header .menu-list > li > a:active.mystudy > i {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M16.9374 14.0294V9.21668L10.379 12.7872C10.0938 12.9422 9.79473 13.0205 9.48188 13.0221C9.16902 13.0238 8.86999 12.9455 8.58478 12.7872L1.72924 9.04448C1.5574 8.95156 1.43456 8.83364 1.36074 8.69073C1.28691 8.54781 1.25 8.39029 1.25 8.21816C1.25 8.04603 1.28691 7.8885 1.36074 7.74559C1.43456 7.60268 1.5574 7.48476 1.72924 7.39184L8.58478 3.65409C8.72566 3.57502 8.87089 3.51568 9.02047 3.47607C9.17006 3.43647 9.32386 3.41666 9.48188 3.41666C9.6399 3.41666 9.7937 3.43647 9.94328 3.47607C10.0929 3.51568 10.2381 3.57502 10.379 3.65409L18.2552 7.95498C18.4099 8.03405 18.5311 8.1485 18.6187 8.29834C18.7062 8.44804 18.75 8.60902 18.75 8.78129V14.0344C18.75 14.2896 18.6631 14.5043 18.4893 14.6785C18.3154 14.8527 18.1011 14.9398 17.8463 14.9398C17.5913 14.9398 17.3762 14.8519 17.2007 14.676C17.0251 14.5003 16.9374 14.2847 16.9374 14.0294ZM8.58478 17.7676L4.59596 15.6135C4.28311 15.4413 4.03993 15.2063 3.86643 14.9085C3.69279 14.6106 3.60596 14.2878 3.60596 13.9401V10.9912L8.58478 13.6925C8.86999 13.8476 9.16902 13.9251 9.48188 13.9251C9.79473 13.9251 10.0938 13.8476 10.379 13.6925L15.3578 10.9912V13.9401C15.3578 14.2878 15.271 14.6106 15.0973 14.9085C14.9238 15.2063 14.6807 15.4413 14.3678 15.6135L10.379 17.7676C10.2381 17.8466 10.0929 17.9051 9.94328 17.9431C9.7937 17.981 9.6399 18 9.48188 18C9.32386 18 9.17006 17.981 9.02047 17.9431C8.87089 17.9051 8.72566 17.8466 8.58478 17.7676Z' fill='%2300AB93'/%3E%3C/svg%3E") no-repeat 0 0;
}
.header .menu-list > li > a:hover.qbank > i, .header .menu-list > li > a:active.qbank > i {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M4.42491 14.3252V10.5264C4.42491 10.2839 4.50696 10.08 4.67106 9.91472C4.83529 9.74929 5.03657 9.66657 5.2749 9.66657C5.51336 9.66657 5.71387 9.74929 5.87642 9.91472C6.0391 10.08 6.12044 10.2839 6.12044 10.5264V14.3299C6.12044 14.5724 6.0391 14.7763 5.87642 14.9416C5.71387 15.107 5.51336 15.1897 5.2749 15.1897C5.03657 15.1897 4.83529 15.1062 4.67106 14.9392C4.50696 14.7723 4.42491 14.5677 4.42491 14.3252ZM9.15439 14.3299V10.5264C9.15439 10.2839 9.23572 10.08 9.3984 9.91472C9.56108 9.74929 9.76159 9.66657 9.99992 9.66657C10.2382 9.66657 10.4388 9.74929 10.6014 9.91472C10.7641 10.08 10.8455 10.2839 10.8455 10.5264V14.3299C10.8455 14.5724 10.7641 14.7763 10.6014 14.9416C10.4388 15.107 10.2382 15.1897 9.99992 15.1897C9.76159 15.1897 9.56108 15.107 9.3984 14.9416C9.23572 14.7763 9.15439 14.5724 9.15439 14.3299ZM2.96583 18.4166C2.71819 18.4166 2.50915 18.33 2.33872 18.1567C2.16841 17.9835 2.08325 17.771 2.08325 17.5191C2.08325 17.2673 2.16841 17.0547 2.33872 16.8814C2.50915 16.7082 2.71819 16.6216 2.96583 16.6216H17.034C17.2816 16.6216 17.4907 16.7082 17.6611 16.8814C17.8314 17.0547 17.9166 17.2673 17.9166 17.5191C17.9166 17.771 17.8314 17.9835 17.6611 18.1567C17.4907 18.33 17.2816 18.4166 17.034 18.4166H2.96583ZM13.8794 14.3252V10.5264C13.8794 10.2839 13.9615 10.08 14.1257 9.91472C14.2899 9.74929 14.4911 9.66657 14.7296 9.66657C14.9679 9.66657 15.1684 9.74929 15.3311 9.91472C15.4937 10.08 15.5749 10.2839 15.5749 10.5264V14.3299C15.5749 14.5724 15.4937 14.7763 15.3311 14.9416C15.1684 15.107 14.9679 15.1897 14.7296 15.1897C14.4911 15.1897 14.2899 15.1062 14.1257 14.9392C13.9615 14.7723 13.8794 14.5677 13.8794 14.3252ZM17.0154 8.22996H2.8929C2.66802 8.22996 2.47683 8.14994 2.31932 7.9899C2.16194 7.82986 2.08325 7.6355 2.08325 7.40681V6.8973C2.08325 6.73371 2.12425 6.58912 2.20623 6.46353C2.28809 6.33795 2.39652 6.23754 2.53153 6.16232L9.20889 2.76952C9.45653 2.64538 9.72021 2.58331 9.99992 2.58331C10.2796 2.58331 10.5433 2.64538 10.7909 2.76952L17.4202 6.13786C17.5811 6.21308 17.704 6.32664 17.7889 6.47852C17.874 6.63054 17.9166 6.79302 17.9166 6.96594V7.30897C17.9166 7.56711 17.8299 7.78515 17.6565 7.96307C17.4829 8.141 17.2692 8.22996 17.0154 8.22996Z' fill='%2300AB93'/%3E%3C/svg%3E") no-repeat 0 0;
}
.header .menu-list.menu-list1 {
gap: 64px;
}
.header .menu-list.menu-list1 > li > a {
font-size: 22px;
font-weight: 700;
}
.header .menu-list.menu-list2 {
gap: 30px;
}
.header .menu-list.menu-list2 > li > a {
font-size: 18px;
}
.header .all_menu {
width: 24px;
}
.header .sub-menu {
display: none;
position: absolute;
width: max-content;
min-width: 260px;
height: fit-content !important;
top: auto;
bottom: auto;
border-radius: 20px;
background: #fff;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
padding: 20px;
}
.header .sub-menu::before {
display: block;
content: "";
background-image: url("/assets/renewal2024/img/common/line-img.png");
background-size: 100%;
background-size: auto;
background-repeat: round;
width: calc(100% + 2px);
height: calc(100% + 2px);
position: absolute;
top: -1px;
left: -1px;
z-index: -1;
border-radius: 20px;
transition: all 0.2s ease-in-out;
}
.header .sub-menu > li {
border-bottom: 1px dashed #b3b3b3;
display: flex;
align-items: center;
gap: 4px;
}
.header .sub-menu > li:has(.sub-sub-menu) {
flex-direction: column;
}
.header .sub-menu > li + li {
margin-top: 0;
}
.header .sub-menu > li > a {
width: 100%;
display: block;
padding: 10px 0 10px 21px;
position: relative;
}
.header .sub-menu > li > a:hover {
color: #00ab93;
}
.header .sub-menu > li > img {
width: 14px;
height: auto;
}
.header .sub-menu > li.on {
height: inherit;
}
.header .sub-menu > li.on ul.sub-sub-menu {
height: fit-content !important;
}
.header .sub-menu > li > ul.sub-sub-menu {
width: 100%;
border-radius: 10px;
background: #f5f5f5;
padding: 6px 30px;
margin: 0 0 10px;
}
.header .sub-menu > li > ul.sub-sub-menu > li {
margin-top: 0;
padding: 0;
}
.header .sub-menu > li > ul.sub-sub-menu > li > a {
display: block;
width: max-content;
color: #666;
font-size: 14px;
font-weight: 400;
line-height: 200%;
}
.header .sub-menu > li > ul.sub-sub-menu > li > a:hover {
color: #00ab93;
}
.header .sub-menu > li > ul.sub-sub-menu > li > a:hover::after, .header .sub-menu > li > ul.sub-sub-menu > li > a:hover::before {
display: none;
}
/* [E]header */
/* footer */
.footer-inner {
max-width: 1280px;
margin: 0 auto;
}
.footer-top {
background-color: #292d37;
height: 56px;
}
.footer-top-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-bottom {
padding-top: 30px;
}
.footer-link {
display: flex;
align-items: center;
vertical-align: middle;
gap: 40px;
}
.footer-link > li {
position: relative;
}
.footer-link > li::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 12px;
margin-right: -19px;
transform: translate(-50%, -50%);
background-color: #777777;
}
.footer-link > li:last-child::after {
display: none;
}
.footer-link > li > a {
font-size: 14px;
color: #ebebeb;
}
.family-site {
position: relative;
}
.family-site-button {
display: flex;
padding: 15px 12px 15px 20px;
align-items: center;
gap: 106px;
color: #ebebeb;
font-size: 16px;
font-weight: 700;
}
.family-site-button > i {
display: flex;
}
.family-site-button.visible {
display: flex;
border-radius: 0px 0px 20px 20px;
background: #000;
box-shadow: 0px 4px 8px 0px rgba(18, 18, 18, 0.16);
}
.family-site-button-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10.0003' cy='9.99984' r='8.33333' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.74967 14.1668C8.74967 14.8572 9.30932 15.4168 9.99967 15.4168C10.69 15.4168 11.2497 14.8572 11.2497 14.1668V11.2502H14.1663C14.8567 11.2502 15.4163 10.6905 15.4163 10.0002C15.4163 9.30981 14.8567 8.75016 14.1663 8.75016H11.2497V5.8335C11.2497 5.14314 10.69 4.5835 9.99967 4.5835C9.30932 4.5835 8.74967 5.14314 8.74967 5.8335V8.75016H5.83301C5.14265 8.75016 4.58301 9.30981 4.58301 10.0002C4.58301 10.6905 5.14265 11.2502 5.83301 11.2502H8.74967V14.1668Z' fill='white'/%3E%3C/svg%3E") no-repeat 0 0;
}
.family-site-button-icon.visible {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10.0003' cy='9.99996' r='8.33333' fill='%23777777'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.70533 7.21316L8.5406 9.99996L5.70533 12.7868C5.32088 13.1646 5.32088 13.7798 5.70533 14.1577C6.08638 14.5322 6.70172 14.5322 7.08278 14.1577L9.92673 11.3624L12.9179 14.3024C13.2989 14.6769 13.9143 14.6769 14.2953 14.3024C14.6798 13.9245 14.6798 13.3093 14.2953 12.9314L11.3129 9.99996L14.2953 7.06848C14.6798 6.69061 14.6798 6.0754 14.2953 5.69753C13.9143 5.32299 13.2989 5.32299 12.9179 5.69753L9.92673 8.63753L7.08278 5.84221C6.70172 5.46767 6.08638 5.46767 5.70533 5.84221C5.32088 6.22008 5.32088 6.83529 5.70533 7.21316Z' fill='black'/%3E%3C/svg%3E") no-repeat 0 0;
}
.family-site-list {
display: none;
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
padding: 20px;
border-radius: 20px 20px 0 0;
background-color: #000;
z-index: 9;
}
.family-site-list a {
display: block;
width: 100%;
padding: 5px 0;
color: #ebebeb;
}
.visible {
display: block;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
}
.company-info-web > p,
.company-info-web span {
font-size: 15px;
color: #666666;
line-height: 18px; /* 128.571% */
}
.company-info-web button {
font-size: 15px;
color: #292d37;
font-weight: 700;
}
.company-info-web > p > span {
display: inline-block;
position: relative;
margin-right: 20px;
}
.company-info-web > p > span::after {
content: "";
display: block;
position: absolute;
top: 15%;
right: -10px;
width: 1px;
height: 70%;
background-color: #777777;
}
.company-info-web .copyright {
margin-top: 20px;
}
.footer-cs-info > p:first-child {
color: #444444;
font-size: 28px;
font-weight: 700;
line-height: 160%; /* 44.8px */
letter-spacing: -0.5px;
}
.footer-cs-info > p:last-child {
margin-top: 4px;
text-align: right;
}
.footer-logo {
margin-top: 30px;
padding: 18px 0;
border-top: 1px solid #dddddd;
text-align: center;
}
/*==============================================================
Form
================================================================*/
input.base-input {
display: block;
height: 44px;
padding: 9px 16px;
border-radius: 8px;
border: 1px solid #cccccc;
color: #121212;
}
input.base-input:focus {
color: #121212;
}
input.base-input::placeholder {
font-style: normal;
font-size: 1rem;
color: #cccccc;
}
input.base-input_disabled {
border: 1px solid #ccc;
background: #ebebeb;
color: #b3b3b3;
padding: 9px 16px;
border-radius: 8px;
}
textarea.base-textarea {
padding: 16px;
border-radius: 8px;
border: 1px solid #cccccc;
color: #121212;
resize: none;
}
textarea.base-textarea:focus {
color: #121212;
}
textarea.base-textarea::placeholder {
font-style: normal;
font-size: 1rem;
color: #cccccc;
}
.base-select {
position: relative;
cursor: pointer;
min-width: 200px;
background-color: #fff;
border: 1px solid #cccccc;
border-radius: 8px;
}
.base-select select {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 9px 30px 9px 16px;
color: #121212;
background: none;
border: none;
z-index: 2;
text-overflow: ellipsis;
white-space: nowrap;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.base-select::after {
content: "";
display: block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M16.5009 4.93394C16.5009 5.19389 16.4009 5.45384 16.2042 5.6538L9.22089 12.6192C8.82423 13.0158 8.17756 13.0158 7.78089 12.6192L0.797561 5.65047C0.400894 5.25388 0.400894 4.61066 0.797561 4.21407C1.19423 3.81748 1.84089 3.81748 2.23756 4.21407L8.50089 10.4629L14.7642 4.21407C15.1609 3.81748 15.8076 3.81748 16.2042 4.21407C16.4042 4.41403 16.5009 4.67399 16.5009 4.93394Z' fill='%23121212'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100%;
position: absolute;
top: 50%;
right: 16px;
margin-top: -16px;
transition: transform 0.3s ease;
transform: translateY(50%) rotate(0deg);
z-index: 1;
}
.base-select.active::after {
transform: translateY(50%) rotate(180deg);
}
select.base-select {
display: inline-block;
width: auto;
height: 44px;
padding: 0 16px;
border-radius: 8px;
border: 1px solid #cccccc;
background: #fff url("/assets/renewal2024/img/icon/ico_arrow_selectbox.png") 16px center no-repeat;
background-position-x: 90%;
background-position-y: center;
color: #121212;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.selectbox-customer {
position: relative;
cursor: pointer;
}
.selectbox-customer h3 {
position: relative;
padding-top: 10px;
padding-right: 36px;
font-weight: 700;
font-size: 2.5rem;
line-height: 160%;
}
.selectbox-customer h3::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 26px;
height: 20px;
background: url("/assets/renewal2024/img/icon/ico_dropdown_off.png");
transform: translateY(-50%);
}
.selectbox-customer ul {
z-index: 3;
opacity: 0;
position: absolute;
width: 100%;
min-width: 170px;
height: auto;
padding: 20px 30px;
border-image-source: url("/assets/renewal2024/img/common/line-img.png");
border-image-slice: 1;
border-image-width: 1px;
border-image-repeat: repeat;
background: #fff;
transition: 0.3s ease;
}
.selectbox-customer ul li {
padding: 8px 0;
border-bottom: 1px dashed #b3b3b3;
font-size: 1.125rem;
line-height: 160%;
}
.selectbox-customer.on h3::after {
background: url("/assets/renewal2024/img/icon/ico_dropdown_on.png");
}
.selectbox-customer.on ul {
opacity: 1;
}
/* 라디오 버튼 */
.radiobox {
display: inline-block;
height: 24px;
}
.radiobox input[type=radio] {
display: none;
}
.radiobox input[type=radio] + label {
display: inline-block;
padding-left: 32px;
background: url("/assets/renewal2024/img/icon/ico_radiobox.png") no-repeat 0 0;
background-size: 24px 24px;
color: #121212;
}
.radiobox input[type=radio]:checked + label {
background: url("/assets/renewal2024/img/icon/ico_radiobox_active.png") no-repeat 0 0;
background-size: 24px 24px;
}
/* 체크박스 */
.checkbox {
display: inline-block;
height: 1.25rem;
padding-left: 1.56rem;
}
.checkbox:first-child {
padding: 0;
}
.checkbox input[type=checkbox] {
display: none;
}
.checkbox input[type=checkbox] + label {
display: inline-block;
height: 20px;
padding-left: 20px;
background: url("/assets/renewal2024/img/icon/ico_check.png") no-repeat 0 0;
background-size: 20px 20px;
font-weight: 400;
color: #222;
line-height: 1.25rem;
text-indent: 8px;
cursor: pointer;
}
.checkbox input[type=checkbox]:checked + label {
background: url("/assets/renewal2024/img/icon/ico_check_active.png") no-repeat 0 0;
background-size: 20px 20px;
}
.checkbox-round[type=checkbox] + label {
display: inline-block;
height: 28px;
padding-left: 36px;
background: url("/assets/renewal2024/img/icon/ico_check_round.png") no-repeat 0 0;
background-size: 28px 28px;
font-weight: 400;
color: #121212;
line-height: 160%;
}
.checkbox-round[type=checkbox]:checked + label {
background: url("/assets/renewal2024/img/icon/ico_check_round_active.png") no-repeat 0 0;
background-size: 28px 28px;
}
/* checkbox */
.checkbox-primary,
.base-checkbox-primary {
cursor: pointer;
}
.checkbox-primary input[type=checkbox],
.base-checkbox-primary input[type=checkbox] {
display: none !important;
}
.checkbox-primary input[type=checkbox] + label,
.base-checkbox-primary input[type=checkbox] + label {
display: flex;
align-items: center;
height: auto;
min-height: 26px;
padding-left: 30px;
background: url("/assets/renewal2024/img/icon/ico_check.png") no-repeat 0 0;
background-size: 24px 24px;
line-height: 150%;
color: #121212;
}
.checkbox-primary input[type=checkbox]:checked + label,
.base-checkbox-primary input[type=checkbox]:checked + label {
background: url("/assets/renewal2024/img/icon/ico_check_active.png") no-repeat 0 0;
}
.checkbox-primary input[type=checkbox]:disabled + label,
.base-checkbox-primary input[type=checkbox]:disabled + label {
background: url("/assets/renewal2024/img/icon/ico_check_disable_active.png") no-repeat 0 0;
color: #999;
}
.checkbox-secondary,
.base-checkbox-secondary {
cursor: pointer;
}
.checkbox-secondary input[type=checkbox],
.base-checkbox-secondary input[type=checkbox] {
display: none !important;
}
.checkbox-secondary input[type=checkbox] + label,
.base-checkbox-secondary input[type=checkbox] + label {
display: flex;
align-items: center;
height: 30px;
padding-left: 40px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='14' cy='14' r='13.5' fill='%23EBEBEB' stroke='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.4966 8.3789C22.1158 8.92928 22.1715 9.87739 21.6212 10.4966L13.6212 19.4966C13.331 19.823 12.9129 20.0068 12.4761 19.9998C12.0394 19.9929 11.6273 19.7959 11.3477 19.4603L6.34771 13.4603C5.81736 12.8239 5.90335 11.878 6.53976 11.3477C7.17618 10.8173 8.12202 10.9033 8.65237 11.5397L12.5367 16.201L19.3789 8.50347C19.9293 7.8843 20.8774 7.82853 21.4966 8.3789Z' fill='white'/%3E%3C/svg%3E") no-repeat 2px 2px;
background-size: 28px 28px;
font-weight: 700;
line-height: 150%;
color: #666;
}
.checkbox-secondary input[type=checkbox]:checked + label,
.base-checkbox-secondary input[type=checkbox]:checked + label {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='14' cy='14' r='13.5' fill='%2300AB93' stroke='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.4966 8.3789C22.1158 8.92928 22.1715 9.87739 21.6212 10.4966L13.6212 19.4966C13.331 19.823 12.9129 20.0068 12.4761 19.9998C12.0394 19.9929 11.6273 19.7959 11.3477 19.4603L6.34771 13.4603C5.81736 12.8239 5.90335 11.878 6.53976 11.3477C7.17618 10.8173 8.12202 10.9033 8.65237 11.5397L12.5367 16.201L19.3789 8.50347C19.9293 7.8843 20.8774 7.82853 21.4966 8.3789Z' fill='white'/%3E%3C/svg%3E") no-repeat 2px 2px;
background-size: 28px 28px;
}
/* radio */
.radio-primary,
.base-radio-primary {
cursor: pointer;
}
.radio-primary input[type=radio],
.base-radio-primary input[type=radio] {
display: none;
}
.radio-primary input[type=radio] + label,
.base-radio-primary input[type=radio] + label {
display: inline-flex;
align-items: center;
min-height: 26px;
padding-left: 32px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='white' stroke='%23CCCCCC'/%3E%3C/svg%3E") no-repeat left center;
background-size: 24px 24px;
}
.radio-primary input[type=radio]:checked + label,
.base-radio-primary input[type=radio]:checked + label {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='white' stroke='%2300AB93'/%3E%3Ccircle cx='12' cy='12' r='6' fill='%2300AB93'/%3E%3C/svg%3E") no-repeat left center;
background-size: 24px 24px;
}
/* 말줄임 */
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ellipsis_oneline {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
/* 텍스트 정렬 */
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
/*==============================================================
ui (공통)
================================================================*/
.base-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
background-size: 100% !important;
}
.contents_box {
border-radius: 30px;
background: #fff;
box-shadow: 0px 2px 2px 0px rgba(58, 63, 78, 0.1);
padding: 40px 60px;
max-width: 1200px;
min-height: 640px;
}
/* paging */
.paging,
.base-paging {
display: flex;
align-items: center;
justify-content: center;
padding-top: 40px;
}
.paging li,
.base-paging li {
width: 34px;
height: 34px;
border-radius: 4px;
background: #fff;
text-align: center;
cursor: pointer;
}
.paging li:not(:last-child),
.base-paging li:not(:last-child) {
margin-right: 8px;
}
.paging li a,
.base-paging li a {
display: inline-block;
width: 34px;
height: 34px;
color: #666666;
line-height: 34px;
}
.paging li.active,
.base-paging li.active {
background: #00ab93;
}
.paging li.active a,
.base-paging li.active a {
color: #fff;
}
.paging li.paging-first a,
.base-paging li.paging-first a {
background: url("/assets/renewal2024/img/icon/ico_paging_first.png");
}
.paging li.paging-first.disabled,
.base-paging li.paging-first.disabled {
pointer-events: none;
cursor: default;
}
.paging li.paging-first.disabled a,
.base-paging li.paging-first.disabled a {
background: url("/assets/renewal2024/img/icon/ico_paging_first_disabled.png");
}
.paging li.paging-prev a,
.base-paging li.paging-prev a {
background: url("/assets/renewal2024/img/icon/ico_paging_prev.png");
}
.paging li.paging-prev.disabled,
.base-paging li.paging-prev.disabled {
pointer-events: none;
cursor: default;
}
.paging li.paging-prev.disabled a,
.base-paging li.paging-prev.disabled a {
background: url("/assets/renewal2024/img/icon/ico_paging_prev_disabled.png");
}
.paging li.paging-next a,
.base-paging li.paging-next a {
background: url("/assets/renewal2024/img/icon/ico_paging_next.png");
}
.paging li.paging-next.disabled,
.base-paging li.paging-next.disabled {
pointer-events: none;
cursor: default;
}
.paging li.paging-next.disabled a,
.base-paging li.paging-next.disabled a {
background: url("/assets/renewal2024/img/icon/ico_paging_next_disabled.png");
}
.paging li.paging-last a,
.base-paging li.paging-last a {
background: url("/assets/renewal2024/img/icon/ico_paging_last.png");
}
.paging li.paging-last.disabled,
.base-paging li.paging-last.disabled {
pointer-events: none;
cursor: default;
}
.paging li.paging-last.disabled a,
.base-paging li.paging-last.disabled a {
background: url("/assets/renewal2024/img/icon/ico_paging_last_disabled.png");
}
/* modal */
.base-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100%;
height: 100%;
z-index: 99999;
}
.base-modal-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.base-modal .base-modal-container {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
max-width: 1280px;
padding: 10px;
transform: translate(-50%, -50%);
border-radius: 40px;
border: 2px solid #000;
background-color: #fff;
box-shadow: 0px 4px 8px 0px rgba(18, 18, 18, 0.16);
}
.base-modal .base-modal-container.medium {
max-width: 1000px;
min-height: 700px;
}
.base-modal .base-modal-container.medium .base-modal-body {
max-height: 564px;
overflow-y: auto;
overflow-x: hidden;
}
.base-modal .base-modal-container.medium .base-modal-footer {
z-index: 15;
position: absolute;
left: 0;
bottom: -52px;
width: 100%;
}
.base-modal .base-modal-container.small {
max-width: 640px;
min-height: 400px;
}
.base-modal .base-modal-container.small .base-modal-body-inner {
padding: 20px;
}
.base-modal-inner {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
}
.base-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding: 6px 30px 6px 50px;
border-radius: 30px 30px 0 0;
background: url("/assets/renewal2024/img/common/bg_modal_head.png") no-repeat 0 0;
background-size: 100% 100%;
}
.base-modal-head > h2 {
font-size: 28px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.base-modal-body {
flex: 1;
}
.base-modal-body-inner {
padding: 30px;
}
.base-modal-footer-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 0px;
border-radius: 0px 0px 30px 30px;
background: #f5f5f5;
}
.base-modal-close-btn {
width: 28px;
height: 28px;
display: inline-block;
background-image: url(/assets/renewal2024/img/icon/ico_close.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
vertical-align: middle;
font-size: 0;
}
/* popup */
#popupLayer,
.base-popup {
display: none;
border-radius: 40px;
padding: 0;
background-color: #fff;
margin: 0 16px;
z-index: 9999;
}
#openPopup {
z-index: 99999;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100%;
height: 100%;
}
#openPopup .open-popup-container {
position: absolute;
top: 50%;
left: 50%;
width: 960px;
height: 560px;
padding: 20px;
background: #fff;
transform: translate(-50%, -50%);
}
#openPopup .open-popup-container .popup-close-btn {
position: absolute;
top: -48px;
right: 0;
width: 40px;
height: 40px;
background: url("/assets/renewal2024/img/icon/ico_close.png") no-repeat;
background-size: 100%;
}
#openPopup .open-popup-container .popup-body .swiper-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#openPopup .open-popup-container .popup-body .swiper-container .swiper-wrapper .popup-img {
width: 100% !important;
height: auto;
}
#openPopup .open-popup-container .popup-body .swiper-container .swiper-wrapper .popup-img img {
max-width: 100%;
height: auto;
}
#openPopup .open-popup-container .popup-body .swiper-container .swiper-wrapper .popup-img.popup-img-last {
cursor: pointer;
}
#openPopup .open-popup-container .popup-body .swiper-container button {
display: inline-block;
width: 40px;
height: 48px;
background: rgba(102, 102, 102, 0.6);
}
#openPopup .open-popup-container .popup-body .swiper-container button::after {
content: "";
position: absolute;
top: 50%;
width: 18px;
height: 28px;
transform: translateY(-50%);
}
#openPopup .open-popup-container .popup-body .swiper-container button.btn-prev {
left: 0;
border-radius: 0px 24px 24px 0px;
}
#openPopup .open-popup-container .popup-body .swiper-container button.btn-prev::after {
left: 8px;
background: url("/assets/renewal2024/img/icon/ico_popup_prev.png") no-repeat 100%;
}
#openPopup .open-popup-container .popup-body .swiper-container button.btn-next {
right: 0;
border-radius: 24px 0px 0px 24px;
}
#openPopup .open-popup-container .popup-body .swiper-container button.btn-next::after {
left: 16px;
background: url("/assets/renewal2024/img/icon/ico_popup_next.png") no-repeat 100%;
}
#openPopup .open-popup-container .popup-body .pagination-wrap {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding-top: 16px;
}
#openPopup .open-popup-container .popup-body .pagination-wrap .popup-pagination {
position: inherit;
}
#registrationCertPopup .base-modal-container {
width: 530px;
overflow: hidden;
}
.popUpDiv .pop-container + div.pop-close-btns {
display: flex;
justify-content: space-between;
padding: 0;
border: 1px solid #ccc;
background: #fff;
}
.popUpDiv .pop-container + div.pop-close-btns input[type=checkbox] {
display: none;
}
.popUpDiv .pop-container + div.pop-close-btns input[type=checkbox] + label {
flex: 1;
margin-right: 0;
padding: 8px 0;
font-weight: 400;
font-size: 16px;
color: #777;
text-align: center;
line-height: 150%;
letter-spacing: -0.16px;
}
.popUpDiv .pop-container + div.pop-close-btns input[type=checkbox]:first-child + label {
border-right: 1px solid #ccc;
}
.popUpDiv .pop-container + div.pop-close-btns input[type=checkbox]:nth-child(2) + label {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
}
/* alert */
.base-alert {
display: none;
min-width: 360px;
padding: 20px;
background: #fff;
border-radius: 20px;
}
.base-alert .alert-body {
padding: 20px 0 25px;
text-align: center;
font-weight: 700;
}
.base-alert .alert-footer .alert-btns {
display: flex;
justify-content: center;
gap: 16px;
}
.scroll-hidden {
overflow-y: hidden;
}
/* scroll */
.base-scrollbar::-webkit-scrollbar {
width: 8px;
height: 4px;
}
.base-scrollbar::-webkit-scrollbar-track {
background: #ebebeb;
}
.base-scrollbar::-webkit-scrollbar-thumb {
background: #008976;
}
.base-scrollbar::-webkit-scrollbar-button {
display: none;
}
.hidden-text {
overflow: hidden;
display: block;
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0, 0, 0, 0);
}
.hidden {
overflow: hidden;
display: block;
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0, 0, 0, 0);
}
.btn-tooltip2 {
position: relative;
width: 16px;
height: 16px;
background: url("/assets/renewal2024/img/mobile/icon/ico_studyroom_hint.png") no-repeat;
background-size: 100%;
cursor: pointer;
}
.btn-tooltip2 .tooltip-layer {
display: none;
z-index: 99;
position: absolute;
top: 35px;
right: -22px;
min-width: 288px;
padding: 36px 16px 16px 16px;
border-radius: 10px;
border: 1px solid #ffd349;
background: #fff6db;
box-shadow: 0px 4px 8px 0px rgba(12, 50, 75, 0.16);
}
.btn-tooltip2 .tooltip-layer::after {
content: "";
position: absolute;
top: -10px;
right: 26px;
width: 13px;
height: 10px;
background: url("/assets/renewal2024/img/mobile/common/tooltip-tail.png") no-repeat;
background-size: 100%;
}
.btn-tooltip2 .tooltip-layer .btn-close-tooltip {
position: absolute;
top: 10px;
right: 10px;
display: inline-block;
width: 20px;
height: 20px;
background: url("/assets/renewal2024/img/mobile/icon/ico_tooltip_close.png") no-repeat;
background-size: 100%;
}
.btn-tooltip2 .tooltip-layer.percentage-tooltip > p {
display: flex;
flex-direction: column;
gap: 4px;
}
/*# sourceMappingURL=common.css.map */