/* 20240717 */
/* Base */
:root {
--color-primary: #202a60;
--color-primary-light: #909bd6;
--color-secondary: #fff32b;
--color-secondary-light: #ffdc87;
--color-red: #ff0000;
--color-gray-100: #f4f4f4;
--color-gray-200: #ededed;
--color-gray-300: #ababab;
}
/* Utilities */
.text-primary {
color: var(--color-primary);
}
.text-danger {
color: var(--color-red);
}
.font-bold {
font-weight: 600;
}
.bg-primary {
background-color: var(--color-primary);
}
.bg-primary-light {
background-color: var(--color-primary-light);
}
.bg-secondary {
background-color: var(--color-secondary);
}
.bg-secondary-light {
background-color: var(--color-secondary-light);
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-200 {
background-color: var(--color-gray-200);
}
.bg-gray-300 {
background-color: var(--color-gray-300);
}
.box-rounded-sm {
border-radius: 13px;
}
.box-rounded {
border-radius: 26px;
}
.box-rounded-lg {
border-radius: 39px;
}
.d-block {
display: block;
}
.divide {
display: block;
height: 1px;
width: 100%;
background-color: var(--color-gray-300);
}
table.table-fixed {
table-layout: fixed;
}
/* Main page */
/* Main Card Icon */
.main-card .top .icon {
width: 60px;
height: 60px;
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
position: relative;
top: -16px;
left: -16px;
float: left;
transition: transform 0.6s ease 0s, background-color 0.3s ease 0.2s;
}
.main-card .top .icon::after {
display: block;
content: "";
width: 38px;
height: 38px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.main-card:hover .top .icon {
background-color: #fff !important;
transform: translateX(10px);
}
.main-card .top .icon.m3::after,
.main-card .top .icon.h1::after,
.main-card .top .icon.h2::after,
.main-card .top .icon.h3::after,
.main-card .top .icon.kmh::after,
.main-card .top .icon.ssu::after,
.main-card .top .icon.wsu::after {
width: 44px;
height: 44px;
}
@media screen and (max-width: 850px) {
.main-card .top .icon {
width: 40px;
height: 40px;
top: -5px;
left: -5px;
}
.main-card .top .icon::after {
width: 30px;
height: 30px;
}
.main-card .top .icon.m3::after,
.main-card .top .icon.h1::after,
.main-card .top .icon.h2::after,
.main-card .top .icon.h3::after,
.main-card .top .icon.kmh::after,
.main-card .top .icon.ssu::after,
.main-card .top .icon.wsu::after {
width: 30px;
height: 30px;
}
.main-card:hover .top .icon {
transform: translateX(5px);
}
}
@media screen and (max-width: 650px) {
.main-card .top .icon {
width: 48px;
height: 48px;
top: -10px;
left: -8px;
}
.main-card .top .icon::after {
width: 34px;
height: 34px;
}
.main-card .top .icon.m3::after,
.main-card .top .icon.h1::after,
.main-card .top .icon.h2::after,
.main-card .top .icon.h3::after,
.main-card .top .icon.kmh::after,
.main-card .top .icon.ssu::after,
.main-card .top .icon.wsu::after {
width: 40px;
height: 40px;
}
.main-card:hover .top .icon {
transform: translateX(5px);
}
}
.icon.m3::after {
background-image: url(../../img/ico/m3-out.svg);
}
.main-card:hover .icon.m3::after,
.main-card.set-time .icon.m3::after {
background-image: url(../../img/ico/m3-on.svg);
}
.icon.h1::after {
background-image: url(../../img/ico/h1-out.svg);
}
.main-card:hover .icon.h1::after,
.main-card.set-time .icon.h1::after {
background-image: url(../../img/ico/h1-on.svg);
}
.icon.h2::after {
background-image: url(../../img/ico/h2-out.svg);
}
.main-card:hover .icon.h2::after,
.main-card.set-time .icon.h2::after {
background-image: url(../../img/ico/h2-on.svg);
}
.icon.h3::after {
background-image: url(../../img/ico/h3-out.svg);
}
.main-card:hover .icon.h3::after,
.main-card.set-time .icon.h3::after {
background-image: url(../../img/ico/h3-on.svg);
}
.icon.kmh::after {
background-image: url(../../img/ico/kmh-out.svg);
}
.main-card:hover .icon.kmh::after,
.main-card.set-time .icon.kmh::after {
background-image: url(../../img/ico/kmh-on.svg);
}
.icon.ssu::after {
background-image: url(../../img/ico/ssu-out.svg);
}
.main-card:hover .icon.ssu::after,
.main-card.set-time .icon.ssu::after {
background-image: url(../../img/ico/ssu-on.svg);
}
.icon.wsu::after {
background-image: url(../../img/ico/wsu-out.svg);
}
.main-card:hover .icon.wsu::after,
.main-card.set-time .icon.wsu::after {
background-image: url(../../img/ico/wsu-on.svg);
}
.icon.srv::after {
background-image: url(../../img/ico/srv-out.svg);
}
.main-card:hover .icon.srv::after,
.main-card.set-time .icon.srv::after {
background-image: url(../../img/ico/srv-on.svg);
}
.icon.ssc::after {
background-image: url(../../img/ico/ssc-out.svg);
}
.main-card:hover .icon.ssc::after,
.main-card.set-time .icon.ssc::after {
background-image: url(../../img/ico/ssc-on.svg);
}
.icon.dir::after {
background-image: url(../../img/ico/dir-out.svg);
}
.main-card:hover .icon.dir::after,
.main-card.set-time .icon.dir::after {
background-image: url(../../img/ico/dir-on.svg);
}
.icon.ban::after {
background-image: url(../../img/ico/ban-out.svg);
}
.main-card:hover .icon.ban::after,
.main-card.set-time .icon.ban::after {
background-image: url(../../img/ico/ban-on.svg);
}
.icon.nqa::after {
background-image: url(../../img/ico/nqa-out.svg);
}
.main-card:hover .icon.nqa::after,
.main-card.set-time .icon.nqa::after {
background-image: url(../../img/ico/nqa-on.svg);
}
.icon.ntc::after {
background-image: url(../../img/ico/ntc-out.svg);
}
.main-card:hover .icon.ntc::after,
.main-card.set-time .icon.ntc::after {
background-image: url(../../img/ico/ntc-on.svg);
}
.icon.acd::after {
background-image: url(../../img/ico/acd-out.svg);
}
.main-card:hover .icon.acd::after,
.main-card.set-time .icon.acd::after {
background-image: url(../../img/ico/acd-on.svg);
}
.icon.tch::after {
background-image: url(../../img/ico/tch-out.svg);
}
.main-card:hover .icon.tch::after,
.main-card.set-time .icon.tch::after {
background-image: url(../../img/ico/tch-on.svg);
}
.icon.fac::after {
background-image: url(../../img/ico/fac-out.svg);
}
.main-card:hover .icon.fac::after,
.main-card.set-time .icon.fac::after {
background-image: url(../../img/ico/fac-on.svg);
}
.icon.mpn::after {
background-image: url(../../img/ico/mpn-out.svg);
}
.main-card:hover .icon.mpn::after,
.main-card.set-time .icon.mpn::after {
background-image: url(../../img/ico/mpn-on.svg);
}
.icon.map::after {
background-image: url(../../img/ico/map-out.svg);
}
.main-card:hover .icon.map::after,
.main-card.set-time .icon.map::after {
background-image: url(../../img/ico/map-on.svg);
}
.icon.rec::after {
background-image: url(../../img/ico/rec-out.svg);
}
.main-card:hover .icon.rec::after,
.main-card.set-time .icon.rec::after {
background-image: url(../../img/ico/rec-on.svg);
}
.icon.sms::after {
background-image: url(../../img/ico/sms-out.svg);
}
.main-card:hover .icon.sms::after,
.main-card.set-time .icon.sms::after {
background-image: url(../../img/ico/sms-on.svg);
}
.icon.ess::after {
background-image: url(../../img/ico/ess-out.svg);
}
.main-card:hover .icon.ess::after,
.main-card.set-time .icon.ess::after {
background-image: url(../../img/ico/ess-on.svg);
}
.icon.rev::after {
background-image: url(../../img/ico/rev-out.svg);
}
.main-card:hover .icon.rev::after,
.main-card.set-time .icon.rev::after {
background-image: url(../../img/ico/rev-on.svg);
}
.icon.set::after {
background-image: url(../../img/ico/set-out.svg);
}
.main-card:hover .icon.set::after,
.main-card.set-time .icon.set::after {
background-image: url(../../img/ico/set-on.svg);
}
.icon.phn::after {
background-image: url(../../img/ico/phn-out.svg);
}
.main-card:hover .icon.phn::after,
.main-card.set-time .icon.phn::after {
background-image: url(../../img/ico/phn-on.svg);
}
.icon.evt::after {
background-image: url(../../img/ico/evt-out.svg);
}
.main-card:hover .icon.evt::after,
.main-card.set-time .icon.evt::after {
background-image: url(../../img/ico/evt-on.svg);
}
.icon.con::after {
background-image: url(../../img/ico/con-out.svg);
}
.main-card:hover .icon.con::after,
.main-card.set-time .icon.con::after {
background-image: url(../../img/ico/con-on.svg);
}
.icon.grd::after {
background-image: url(../../img/ico/grd-out.svg);
}
.main-card:hover .icon.grd::after,
.main-card.set-time .icon.grd::after {
background-image: url(../../img/ico/grd-on.svg);
}
.icon.int::after {
background-image: url(../../img/ico/int-out.svg);
}
.main-card:hover .icon.int::after,
.main-card.set-time .icon.int::after {
background-image: url(../../img/ico/int-on.svg);
}
.icon.lqa::after {
background-image: url(../../img/ico/lqa-out.svg);
}
.main-card:hover .icon.lqa::after,
.main-card.set-time .icon.lqa::after {
background-image: url(../../img/ico/lqa-on.svg);
}
.icon.ptc::after {
background-image: url(../../img/ico/ptc-out.svg);
}
.main-card:hover .icon.ptc::after,
.main-card.set-time .icon.ptc::after {
background-image: url(../../img/ico/ptc-on.svg);
}
/* Main Card Icon END */
.main_list > ul > li a {
z-index: 1;
}
.main-card .card-item {
width: 100%;
height: 0;
padding-top: 62.75%;
position: relative;
}
.main-card .card-item img {
position: absolute;
width: 100%;
height: auto;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.2s ease;
}
.main-card .card-item .bg-off {
opacity: 1;
}
.main-card:hover .card-item .bg-on,
.main-card:focus-within .card-item .bg-on {
opacity: 1;
}
.main-card .card-item .bg-effect {
opacity: 0;
}
.main-card.set-time .card-item .bg-on,
.main-card.set-time .card-item .bg-off {
opacity: 0;
}
.main-card.set-time .card-item .bg-effet {
opacity: 1;
}
/* 기본 상태에서의 스타일 */
.main-card .txt_box {
transform: scale(1);
transform-origin: left bottom;
transition: transform 0.3s ease-in-out;
}
.main-card:hover .txt_box {
transform: scale(1.05);
}
/* 기본 상태에서의 스타일 */
.main-card .plus_ico {
transition: transform 0.3s ease; /* 애니메이션 전환 설정 */
}
/* :hover 상태에서의 스타일 */
.main-card:hover .plus_ico {
transform: rotate(90deg); /* 왼쪽으로 20px 이동하고 한바퀴 회전 */
}
@media screen and (max-width: 1440px) {
.main_list > ul > li {
width: 50%;
}
}
/* 시간표 여백 수정 */
@media screen and (min-width: 650px) and (max-width: 1440px) {
.pop_slide .mhw420 {
max-height: 100%;
max-width: 100%;
}
.sky_banner .ctrl_wrap {
right: 24px;
}
}
.svg-container {
position: relative;
width: 800px;
height: 502px;
}
.svg-shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: contain;
}
@media screen and (max-width: 768px) {
.tbl_list.class_schedule ul.cont li:first-child p {
padding-left: 12px;
}
.tbl_list.class_schedule ul.cont li:nth-child(3) strong,
.tbl_list.class_schedule ul.cont li:nth-child(4) strong {
display: inline-block;
padding-left: 12px;
}
}
@media screen and (max-width: 650px) {
.main_list > ul > li {
width: 100%;
padding: 10px;
}
.main_list > ul > li a {
}
.main_list {
padding: 16px 15px;
}
}
/* Refund Page */
.mypage_wrap .mypage_tit.refund {
display: flex;
flex-flow: column;
padding: 53px 30px 24px;
}
.mypage_wrap .mypage_tit.refund h3 {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
font-size: 45px;
color: #fff;
font-weight: 400;
text-align: center;
padding: 0;
}
.mypage_wrap .mypage_tit.refund h3::before {
display: flex;
content: "";
width: 56px;
height: 56px;
background: url(../../img/mypage/ico_refund.svg) no-repeat left center / 56px 56px;
}
.mypage_wrap .mypage_tit.refund .btn_wrap {
align-self: flex-end;
}
.mypage_wrap .mypage_tit.refund .btn_link {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 14px 40px;
max-width: 380px;
font-size: 20px;
line-height: initial;
background-color: #ffdc87;
border-radius: 14px;
text-align: center;
box-sizing: border-box;
}
.mypage_wrap .mypage_tit.refund .btn_link:hover {
background-color: var(--color-secondary);
transition: ease all 0.3s;
}
.mypage_wrap .mypage_tit.refund .btn_link::after {
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 -960 960 960' width='16px' fill='%23202a60'%3E%3Cpath d='M288-64 188-164l316-316-316-316 100-100 416 416L288-64Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 2px center;
}
.refund-body {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
gap: 20px;
background-color: #fff;
padding: 53px 20px;
border-radius: 0 0 26px 26px;
word-break: keep-all;
}
.refund-body .refund-title {
font-size: 24px;
text-align: center;
color: var(--color-primary);
}
.refund-body .alert-box {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 26px;
padding: 40px 64px;
background-color: var(--color-gray-200);
font-size: 18px;
text-align: center;
box-sizing: border-box;
}
.refund-body .alert-box br.m-block {
display: none;
}
.list-disc {
list-style: disc;
}
.refund-body .btn-wrap {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
gap: 20px;
width: 100%;
padding: 20px 0;
}
.refund-body .btn-wrap a {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
max-width: 240px;
gap: 10px;
padding: 40px 60px;
border-radius: 26px;
font-size: 33px;
font-weight: 600;
line-height: 1.45;
color: var(--color-primary);
border: 1px solid var(--color-primary);
transition: ease all 0.2s;
}
.refund-body .btn-wrap a.btn-left {
background-color: var(--color-secondary);
}
.refund-body .btn-wrap a.btn-right {
background-color: var(--color-gray-200);
}
.refund-body .btn-wrap a.btn-left:hover,
.refund-body .btn-wrap a.btn-right:hover {
background-color: var(--color-primary);
}
.refund-body .btn-wrap a.btn-left:hover {
color: var(--color-secondary);
}
.refund-body .btn-wrap a.btn-right:hover {
background-color: var(--color-primary);
color: #fff;
}
.refund-body .btn-wrap a::after {
min-width: 30px;
min-height: 30px;
background-color: #fff;
border-radius: 50%;
border: 1px solid var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
align-self: end;
margin-bottom: 6px;
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 -960 960 960' width='16px' fill='%23202a60'%3E%3Cpath d='M288-64 188-164l316-316-316-316 100-100 416 416L288-64Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 5px center;
}
@media screen and (max-width: 1250px) {
.mypage_wrap .mypage_tit.refund {
padding: 20px 10px;
gap: 10px;
}
.mypage_wrap .mypage_tit.refund h3 {
font-size: 25px;
gap: 12px;
}
.mypage_wrap .mypage_tit.refund .btn_wrap {
align-self: center;
}
.mypage_wrap .mypage_tit.refund .btn_link {
font-size: 15px;
}
.mypage_wrap .mypage_tit.refund h3::before {
width: 25px;
height: 25px;
background: url(../../img/mypage/ico_refund.svg) no-repeat left center / 25px 25px;
}
}
@media screen and (max-width: 890px) {
.mypage_wrap .mypage_tit.refund .btn_link {
justify-content: space-between;
width: 100%;
padding: 7px 14px;
}
.refund-body {
padding: 23px 15px 50px;
gap: 12px;
}
.refund-body .refund-title {
font-size: 16px;
}
.refund-body .alert-box {
width: 100%;
gap: 10px;
border-radius: 6px;
padding: 20px 20px;
font-size: 14px;
}
.refund-body .alert-box br.m-block {
display: block;
}
.list-disc {
font-size: 12px;
padding: 0px 26px;
}
.refund-body .btn-wrap {
flex-flow: column;
gap: 12px;
}
.refund-body .btn-wrap a {
box-sizing: border-box;
width: 100%;
max-width: 100%;
font-size: 16px;
font-weight: bold;
padding: 20px;
border-radius: 12px;
}
.refund-body .btn-wrap a > br {
display: none;
}
}
/* Modal */
.modal {
border-radius: 23px;
}
.modal.max-w800 {
width: 100%;
max-width: 1000px;
border-radius: 23px;
}
.modal-content {
width: 100%;
min-width: fit-content;
border-radius: 23px;
}
.modal-content .modal-scroll {
max-height: 70vh;
padding: 0 40px;
overflow-y: auto;
}
.modal-content .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--color-primary);
padding: 25px 40px;
border-radius: 23px 23px 0 0;
position: relative;
}
.modal-content .modal-header h2 {
color: #fff;
font-size: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.modal-content .modal-header h2::before {
content: "";
width: 95px;
height: 36px;
display: inline-block;
background: url(../../img/popup/ico_pop_logo.png) no-repeat left center / 95px 36px;
}
.modal-content .btn-close-icon {
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='M256-181.91 181.91-256l224-224-224-224L256-778.09l224 224 224-224L778.09-704l-224 224 224 224L704-181.91l-224-224-224 224Z'/%3E%3C/svg%3E");
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-position: center;
background-size: contain; */
position: absolute;
right: 15px;
top: 15px;
}
.modal-content .modal-body {
background: #fff;
padding: 40px 0;
border-radius: 0 0 23px 23px;
}
.modal-content .modal-body .block {
margin-bottom: 40px;
}
.modal-content .input_wrap {
padding: 0;
}
.modal-content .modal-subtitle {
padding-bottom: 10px;
font-size: 18px;
}
@media screen and (max-width: 768px) {
.modal-content {
min-width: 100%;
}
}
/* 반응형테이블 */
.modal-content .table {
background-color: #fff;
overflow: hidden;
border: 1px solid var(--color-gray-300);
word-break: keep-all;
}
.modal-content .table.table-checkbox .header,
.modal-content .table.table-checkbox .row {
display: grid;
grid-template-columns: 50px 180px auto 150px;
align-items: stretch;
}
.modal-content .table.table-list .header,
.modal-content .table.table-list .row {
display: grid;
grid-template-columns: 180px auto 150px;
align-items: stretch;
}
.modal-content .table.table-list .cell.merged-row {
grid-row: span 3;
}
.modal-content .table.table-list .cell.merged-col {
grid-column: span 2;
border-top: 1px solid var(--color-gray-300);
color: var(--color-primary);
font-weight: 600;
}
.modal-content .table .header {
background-color: #f2f2f2;
font-weight: bold;
border-bottom: 1px solid var(--color-gray-300);
}
.modal-content .table .header .cell {
border-right: 1px solid var(--color-gray-300);
}
.modal-content .table.table-checkbox .header .cell:first-child {
justify-content: center;
}
.modal-content .table .header .cell:last-child {
border-right: none;
}
.modal-content .table .row:nth-child(odd) {
background-color: #fffdf8;
}
.modal-content .table .cell {
padding: 12px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.modal-content .table .cell:not(:last-child) {
border-right: 1px solid var(--color-gray-300);
}
.modal-content .table.table.table-list .cell:nth-last-child(2) {
border-right: 0;
}
.modal-content .table .row:not(:last-child) {
border-bottom: 1px solid var(--color-gray-300);
}
.modal-content .table .cell-content {
display: flex;
flex-direction: column;
width: 100%;
}
.modal-content .table .cell-content div {
position: relative;
}
.modal-content .table .cell-content div + div {
padding-top: 4px;
}
.modal-content .table .cell-content div:nth-child(n + 2) {
padding-left: 28px;
}
.modal-content .table .cell-content div:nth-child(n + 2)::before {
content: "";
display: inline-block;
color: var(--color-primary);
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%23202a60'%3E%3Cpath d='m560-172-20-20 154-154H252v-402h28v374h414L540-528l20-20 188 188-188 188Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
top: 4px;
left: 4px;
}
/* .modal-content .table .cell-content div::before {
content: "";
display: block;
position: absolute;
top: 16px;
left: 4px;
width: 4px;
height: 4px;
border-radius: 6px;
background-color: var(--color-primary);
} */
.modal-content .table.table-checkbox .checkbox-cell {
justify-content: center;
}
/* 체크박스 커스텀 스타일 */
.modal-content .table .checkbox-wrapper {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
}
.modal-content .table .checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.modal-content .table .checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 1px solid var(--color-primary);
border-radius: 3px;
transition: ease all 0.2s;
}
.modal-content .table .checkbox-wrapper:hover input ~ .checkmark {
background-color: var(--color-gray-100);
}
.modal-content .table .checkbox-wrapper input:checked ~ .checkmark {
background-color: var(--color-primary);
}
.modal-content .table .checkmark:after {
content: "";
position: absolute;
display: none;
}
.modal-content .table .checkbox-wrapper input:checked ~ .checkmark:after {
display: block;
}
.modal-content .table .checkbox-wrapper .checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
/* 체크박스가 비활성화(disabled)된 상태일 때의 스타일 */
.modal-content .table .checkbox-wrapper input:disabled ~ .checkmark {
background-color: var(--color-gray-200); /* 비활성화된 상태의 배경색 */
border-color: var(--color-gray-300); /* 비활성화된 상태의 테두리 색 */
cursor: not-allowed; /* 커서 모양 변경 */
opacity: 0.6; /* 비활성화된 상태의 투명도 조정 */
}
/* 체크박스가 비활성화된 상태일 때 체크 표시의 스타일 */
.modal-content .table .checkbox-wrapper input:disabled:checked ~ .checkmark:after {
border-color: var(--color-gray-300); /* 체크 표시의 색상 변경 */
}
@media screen and (max-width: 768px) {
.modal-content .modal-scroll {
padding: 0 20px;
}
.modal-content .modal-header {
padding: 12px 20px;
}
.modal-content .modal-header h2 {
font-size: 15px;
gap: 10px;
}
.modal-content .modal-header h2::before {
content: "";
width: 95px;
height: 24px;
display: inline-block;
background: url(../../img/popup/ico_pop_logo.png) no-repeat left center / 95px 36px;
}
.modal-content .btn-close-icon {
top: 11px;
}
.modal-content .btn-close-icon img {
width: 25px;
}
.modal-content .modal-body {
padding: 20px 0px;
}
.modal-content .table {
border: 0;
}
.modal-content .table.table-checkbox .header,
.modal-content .table.table-checkbox .row {
display: flex;
flex-direction: column;
font-size: 14px;
margin-bottom: 6px;
border-radius: 8px;
border: 1px solid var(--color-gray-300);
}
.modal-content .table.table-list .header {
display: none;
}
.modal-content .table.table-list .row {
display: flex;
flex-direction: column;
font-size: 14px;
margin-bottom: 10px;
border-radius: 8px;
border: 1px solid var(--color-gray-300);
}
.modal-content .table .header .cell {
display: none;
}
.modal-content .table.table-checkbox .header .cell:first-child {
display: flex;
width: 100%;
justify-content: space-between;
border-right: none;
}
.modal-content .table .row .cell {
width: 100%;
border-right: none;
border-bottom: 1px solid #ddd;
align-items: baseline;
}
.modal-content .table .row .cell:last-child {
border-bottom: none;
}
.modal-content .table .cell[data-label="신청내용"] {
flex-flow: column;
gap: 4px;
}
.modal-content .table .cell-content div + div {
padding-top: 2px;
}
.modal-content .table .cell-content div:nth-child(n + 2) {
padding-left: 22px;
}
.modal-content .table .cell-content div:nth-child(n + 2)::before {
top: 2px;
left: 2px;
}
.modal-content .table.table-checkbox .checkbox-cell {
padding: 12px;
justify-content: space-between;
}
.modal-content .table .cell:not(.checkbox-cell):before {
content: attr(data-label);
font-weight: bold;
width: 80px;
min-width: 80px;
margin-right: 10px;
}
.modal-content .table.table-list .cell.merged-col:not(.checkbox-cell):before {
color: initial;
}
.modal-content .table .checkbox-cell::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
.modal-content .sub-note {
display: inline-block;
margin-top: 10px;
}
.modal-content .alert-box {
background-color: var(--color-gray-100);
padding: 20px;
border-radius: 14px;
margin-top: 20px;
}
.modal-content .alert-box h4 {
font-size: 20px;
margin-bottom: 12px;
}
.alert-box .list-number li {
display: flex;
flex-flow: row;
align-items: baseline;
padding-bottom: 6px;
gap: 10px;
}
.alert-box .list-number li span.square-number {
background-color: var(--color-secondary);
border: 1px solid var(--color-primary);
width: 22px;
height: 22px;
border-radius: 6px;
color: var(--color-primary);
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
font-size: 13px;
font-weight: 600;
}
.refund-account-info .info-title {
text-align: center;
background-color: var(--color-primary);
color: var(--color-secondary);
border-radius: 14px 14px 0 0;
padding: 12px 0;
}
.refund-account-info .info-title h4 {
font-size: 20px;
color: #ffffff;
}
.refund-account-info .info-title p {
color: var(--color-secondary);
}
.refund-account-info .list-disc {
list-style: inside;
padding: 0 12px;
}
.refund-account-info .input_wrap.row {
display: flex;
margin-bottom: 0;
}
.refund-account-info .input_wrap.row input {
border-bottom: 0;
}
.refund-account-info .input_wrap.row input:first-child {
border-right: 0;
}
.refund-account-info .input_wrap input[name="account_number"] {
border-radius: 0 0 14px 14px;
}
/* 스피너 숨기기 */
.refund-account-info input[name="account_number"]::-webkit-outer-spin-button,
.refund-account-info input[name="account_number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox에서 스피너 숨기기 */
.refund-account-info input[name="account_number"] {
-moz-appearance: textfield;
}
.btn-modal-submit {
padding: 18px 40px;
font-size: 18px;
font-weight: 500;
background-color: #ffdc87;
border-radius: 14px;
text-align: center;
width: 100%;
border: 0;
font-weight: 600;
cursor: pointer;
margin-bottom: 20px;
}
.btn-modal-close {
display: block;
box-sizing: border-box;
padding: 18px 40px;
font-size: 18px;
font-weight: 500;
background-color: #ccc;
color: #333;
border-radius: 14px;
text-align: center;
width: 100%;
border: 0;
font-weight: 600;
cursor: pointer;
margin-bottom: 20px;
}
.btn-modal-submit:disabled,
.btn-modal-submit[disabled] {
background-color: var(--color-gray-100);
color: var(--color-gray-300);
cursor: not-allowed;
}
@media screen and (max-width: 768px) {
.modal-content .modal-subtitle {
padding-bottom: 8px;
font-size: 15px;
}
.modal-content .modal-body .block {
margin-bottom: 20px;
}
.modal-content .sub-note {
display: inline-block;
margin-top: 0;
font-size: 14px;
}
.modal-content .alert-box h4 {
font-size: 16px;
margin-bottom: 10px;
}
.modal-content .alert-box {
padding: 14px;
}
.alert-box .list-number li {
align-items: baseline;
gap: 6px;
padding-bottom: 6px;
font-size: 14px;
}
.refund-account-info .info-title {
padding: 8px 18px;
}
.refund-account-info .info-title h4 {
font-size: 16px;
}
.refund-account-info .info-title p {
font-size: 14px;
}
.refund-account-info .input_wrap.row {
flex-flow: column;
}
.refund-account-info .input_wrap.row input:first-child {
border-right: 1px solid var(--color-primary);
}
}
/* 재원생 서비스 */
.student_service.space-t-0 {
margin-top: 0;
border-start-start-radius: 0;
border-start-end-radius: 0;
}
.student_service .flex-block {
display: flex;
justify-content: center;
align-items: center;
padding: 60px 20px;
}
.mypage_wrap .mypage_tit.student h3 {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
}
.mypage_wrap .mypage_tit.student h3::before {
display: flex;
content: "";
width: 56px;
height: 56px;
background: url(../../img/mypage/icon_membership.svg) no-repeat left 4px / 56px 56px;
}
@media screen and (max-width: 1250px) {
.mypage_wrap .mypage_tit.student h3 {
gap: 12px;
}
.mypage_wrap .mypage_tit.student h3::before {
width: 25px;
height: 25px;
background: url(../../img/mypage/icon_membership.svg) no-repeat left 2px / 25px 25px;
}
}
@media screen and (max-width: 850px) {
.mypage_wrap .mypage_top.m_pb {
padding-bottom: 20px;
}
.mypage_wrap .mypage_top.m_pb .mypage_tit.student h3 {
padding: 20px 10px 6px;
}
}
.student_service .btn-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 2열 그리드 */
grid-template-rows: auto;
gap: 20px;
width: 100%;
max-width: 1080px;
align-self: center;
}
.student_service .btn-wrap a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 40px 40px;
border-radius: 26px;
font-size: 33px;
font-weight: 600;
line-height: 1.45;
color: var(--color-primary);
transition: ease all 0.2s;
}
.student_service .btn-wrap a:nth-child(1) {
grid-column: 1;
grid-row: 1;
background-color: #ffdc87;
}
.student_service .btn-wrap a:nth-child(2) {
grid-column: 2;
grid-row: 1;
color: #fff;
background-color: #909bd6;
}
.student_service .btn-wrap a:nth-child(3) {
grid-column: 3;
grid-row: 1;
color: #fff;
background-color: #c7b299;
position: relative;
}
.student_service .btn-wrap a:nth-child(3) .title {
color: #fff;
}
.student_service .btn-wrap a:nth-child(3) .subtitle {
color: #fff;
font-size: 16px;
font-weight: 400;
}
.student_service .btn-wrap a:nth-child(4) {
grid-column: 1 / 4;
grid-row: 2;
background-color: #ffffff;
border: 1px solid var(--color-gray-300);
box-sizing: border-box;
}
.student_service .btn-wrap a:nth-child(4) p {
color: var(--color-primary);
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 16px;
}
.student_service .btn-wrap a:nth-child(4) p i {
color: var(--color-primary);
font-size: 10px;
border: 1px solid var(--color-primary);
padding: 0px 24px;
border-radius: 24px;
text-transform: uppercase;
letter-spacing: 0.25px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: ease-in all 0.2s;
}
.student_service .btn-wrap a:nth-child(4) p i::after {
color: var(--color-primary);
content: "";
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 height%3D%2224px%22 viewBox%3D%220%20-960%20960%20960%22 width%3D%2224px%22 fill%3D%22%23202a60%22%3E%3Cpath d%3D%22M260-200q-74.85%200-127.42-52.23Q80-304.46%2080-379.31q0-68.77%2047-122.07%2047-53.31%20116.85-57.24%2010.07-74.3%2074.61-136.61Q383-757.54%20460-757.54q16.08%200%2028.04%2011.96T500-717.54v291.23l82.46-82L610.77-480%20480-349.23%20349.23-480l28.31-28.31%2082.46%2082v-291.23q-75.23%203.23-127.62%2065.42Q280-589.92%20280-520h-20q-58%200-99%2041t-41%2099q0%2058%2041%2099t99%2041h480q42%200%2071-29t29-71q0-42-29-71t-71-29h-60v-80q0-49.54-22-91.04-22-41.5-58-68.96v-47.62q56.31%2031.16%2088.15%2086.97Q720-584.85%20720-520v40h24.62q57.46%201.85%2096.42%2042.19Q880-397.46%20880-340q0%2058.85-40.58%2099.42Q798.85-200%20740-200H260Zm220-298.77Z%22/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
display: inline;
transition: ease-in all 0.2s;
}
.student_service .btn-wrap a:nth-child(4) span {
display: block;
padding-top: 10px;
padding-bottom: 10px;
font-size: 18px;
font-weight: 400;
word-break: keep-all;
color: #000;
}
.student_service .btn-wrap a:nth-child(4):hover p i {
color: #ffffff;
background: var(--color-primary);
}
.student_service .btn-wrap a:nth-child(4):hover p i::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 height%3D%2224px%22 viewBox%3D%220%20-960%20960%20960%22 width%3D%2224px%22 fill%3D%22%23fff32b%22%3E%3Cpath d%3D%22M260-200q-74.85%200-127.42-52.23Q80-304.46%2080-379.31q0-68.77%2047-122.07%2047-53.31%20116.85-57.24%2010.07-74.3%2074.61-136.61Q383-757.54%20460-757.54q16.08%200%2028.04%2011.96T500-717.54v291.23l82.46-82L610.77-480%20480-349.23%20349.23-480l28.31-28.31%2082.46%2082v-291.23q-75.23%203.23-127.62%2065.42Q280-589.92%20280-520h-20q-58%200-99%2041t-41%2099q0%2058%2041%2099t99%2041h480q42%200%2071-29t29-71q0-42-29-71t-71-29h-60v-80q0-49.54-22-91.04-22-41.5-58-68.96v-47.62q56.31%2031.16%2088.15%2086.97Q720-584.85%20720-520v40h24.62q57.46%201.85%2096.42%2042.19Q880-397.46%20880-340q0%2058.85-40.58%2099.42Q798.85-200%20740-200H260Zm220-298.77Z%22/%3E%3C/svg%3E");
}
.student_service .btn-wrap a:nth-child(1):hover,
.student_service .btn-wrap a:nth-child(2):hover,
.student_service .btn-wrap a:nth-child(3):hover {
background-color: var(--color-primary);
color: var(--color-secondary);
}
.student_service .btn-wrap a:nth-child(3):hover .title {
color: var(--color-secondary);
}
.student_service .btn-wrap a:nth-child(4):hover {
background-color: var(--color-gray-100);
}
.student_service .btn-wrap a::after {
content: "";
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
align-self: end;
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: 60px 60px;
transition: ease all 0.2s;
will-change: background-image;
transform: translateZ(0);
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
/* Safari 브라우저 타겟팅 */
@supports (-webkit-backdrop-filter: none) {
.student_service .btn-wrap a::after {
transition: none;
}
}
.student_service .btn-wrap a:nth-child(1)::after {
background-image: url("data:image/svg+xml,%3Csvg width%3D%2264%22 height%3D%2264%22 viewBox%3D%220 0 64 64%22 fill%3D%22none%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath d%3D%22M54.1 51.8H58.3C59.8 51.8 61 50.6 61 49.1V9.5C61 8 59.8 6.8 58.3 6.8H5.7C4.2 6.8 3 8 3 9.5V49.1C3 50.6 4.2 51.8 5.7 51.8H47.6%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M3 14.1H61%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M43.7 6.8V14.1%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M51.7 6.8V14.1%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M55.2 55.4L51.6 43.2L56.1 41.8L45.2 33.1L41.1 46.5L45.6 45.1L49.2 57.2L55.2 55.4Z%22 fill%3D%22%23FFF32B%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M56.2 18.5H9.20001V27.9H56.2V18.5Z%22 fill%3D%22%23202A60%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M19.7 32.7H9.20001V46.6H19.7V32.7Z%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M35.5 32.7H25V46.6H35.5V32.7Z%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
}
.student_service .btn-wrap a:nth-child(1):hover::after {
background-image: url("data:image/svg+xml,%3Csvg width%3D%2264%22 height%3D%2264%22 viewBox%3D%220 0 64 64%22 fill%3D%22none%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath d%3D%22M54.1 51.8H58.3C59.8 51.8 61 50.6 61 49.1V9.5C61 8 59.8 6.8 58.3 6.8H5.7C4.2 6.8 3 8 3 9.5V49.1C3 50.6 4.2 51.8 5.7 51.8H47.6%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M3 14.1H61%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M43.7 6.8V14.1%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M51.7 6.8V14.1%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M55.2 55.4L51.6 43.2L56.1 41.8L45.2 33.1L41.1 46.5L45.6 45.1L49.2 57.2L55.2 55.4Z%22 fill%3D%22%23FFF32B%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M56.2 18.5H9.20001V27.9H56.2V18.5Z%22 fill%3D%22%23FFF32B%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M19.7 32.7H9.20001V46.6H19.7V32.7Z%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M35.5 32.7H25V46.6H35.5V32.7Z%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
}
.student_service .btn-wrap a:nth-child(2)::after {
background-image: url("data:image/svg+xml,%3Csvg width%3D%2264%22 height%3D%2264%22 viewBox%3D%220%200%2064%2064%22 fill%3D%22none%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath d%3D%22M57.2%2057.2H6.79999C4.59999%2057.2%202.89999%2055.5%202.89999%2053.3V10.7C2.89999%208.5%204.59999%206.8%206.79999%206.8H57.1C59.3%206.8%2061%208.5%2061%2010.7V53.3C61.1%2055.5%2059.3%2057.2%2057.2%2057.2Z%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M26%2039.8V25.9C26%2024.4%2027.7%2023.5%2028.9%2024.3L39.8%2031.2C41%2031.9%2041%2033.6%2039.8%2034.4L28.9%2041.3C27.6%2042.2%2026%2041.3%2026%2039.8Z%22 fill%3D%22%23202A60%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M2.89999%2013.6H61.1%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M2.89999%2050.4H61.1%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M11.1%2024.1C12.3702%2024.1%2013.4%2023.0703%2013.4%2021.8C13.4%2020.5297%2012.3702%2019.5%2011.1%2019.5C9.82973%2019.5%208.79999%2020.5297%208.79999%2021.8C8.79999%2023.0703%209.82973%2024.1%2011.1%2024.1Z%22 fill%3D%22%23FFF32B%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
}
.student_service .btn-wrap a:nth-child(2):hover::after {
background-image: url("data:image/svg+xml,%3Csvg width%3D%2264%22 height%3D%2264%22 viewBox%3D%220%200%2064%2064%22 fill%3D%22none%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath d%3D%22M57.2%2057.2H6.79999C4.59999%2057.2%202.89999%2055.5%202.89999%2053.3V10.7C2.89999%208.5%204.59999%206.8%206.79999%206.8H57.1C59.3%206.8%2061%208.5%2061%2010.7V53.3C61.1%2055.5%2059.3%2057.2%2057.2%2057.2Z%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M26%2039.8V25.9C26%2024.4%2027.7%2023.5%2028.9%2024.3L39.8%2031.2C41%2031.9%2041%2033.6%2039.8%2034.4L28.9%2041.3C27.6%2042.2%2026%2041.3%2026%2039.8Z%22 fill%3D%22%23FFF32B%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M2.89999%2013.6H61.1%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M2.89999%2050.4H61.1%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3Cpath d%3D%22M11.1%2024.1C12.3702%2024.1%2013.4%2023.0703%2013.4%2021.8C13.4%2020.5297%2012.3702%2019.5%2011.1%2019.5C9.82973%2019.5%208.79999%2020.5297%208.79999%2021.8C8.79999%2023.0703%209.82973%2024.1%2011.1%2024.1Z%22 fill%3D%22%23FFF32B%22 stroke%3D%22%23202A60%22 stroke-width%3D%222%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
}
.student_service .btn-wrap a:nth-child(3)::after {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_148_3)%22%3E%3Cline%20x1%3D%220%22%20y1%3D%2259%22%20x2%3D%2260%22%20y2%3D%2259%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M12%2046C13.1046%2046%2014%2046.8954%2014%2048V59C14%2060.1046%2013.1046%2061%2012%2061H6C4.89543%2061%204%2060.1046%204%2059V48C4%2046.8954%204.89543%2046%206%2046H12Z%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M26%2025C27.1046%2025%2028%2025.8954%2028%2027V59C28%2060.1046%2027.1046%2061%2026%2061H20C18.8954%2061%2018%2060.1046%2018%2059V27C18%2025.8954%2018.8954%2025%2020%2025H26Z%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M40%2034C41.1046%2034%2042%2034.8954%2042%2036V59C42%2060.1046%2041.1046%2061%2040%2061H34C32.8954%2061%2032%2060.1046%2032%2059V36C32%2034.8954%2032.8954%2034%2034%2034H40Z%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M54%2019C55.1046%2019%2056%2019.8954%2056%2021V59C56%2060.1046%2055.1046%2061%2054%2061H48C46.8954%2061%2046%2060.1046%2046%2059V21C46%2019.8954%2046.8954%2019%2048%2019H54Z%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2212.2929%22%20y1%3D%2220.2929%22%20x2%3D%2220.2929%22%20y2%3D%2212.2929%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2226.7071%22%20y1%3D%2212.2929%22%20x2%3D%2233.7071%22%20y2%3D%2219.2929%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2248.774%22%20y1%3D%227.63324%22%20x2%3D%2239.774%22%20y2%3D%2218.6332%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2223%22%20r%3D%224%22%20fill%3D%22%23202A60%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2210%22%20r%3D%224%22%20fill%3D%22%23202A60%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2221%22%20r%3D%224%22%20fill%3D%22%23202A60%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2251%22%20cy%3D%225%22%20r%3D%224%22%20fill%3D%22%23202A60%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_148_3%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22white%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.student_service .btn-wrap a:nth-child(3):hover::after {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_148_3)%22%3E%3Cline%20x1%3D%220%22%20y1%3D%2259%22%20x2%3D%2260%22%20y2%3D%2259%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M12%2046C13.1046%2046%2014%2046.8954%2014%2048V59C14%2060.1046%2013.1046%2061%2012%2061H6C4.89543%2061%204%2060.1046%204%2059V48C4%2046.8954%204.89543%2046%206%2046H12Z%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M26%2025C27.1046%2025%2028%2025.8954%2028%2027V59C28%2060.1046%2027.1046%2061%2026%2061H20C18.8954%2061%2018%2060.1046%2018%2059V27C18%2025.8954%2018.8954%2025%2020%2025H26Z%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M40%2034C41.1046%2034%2042%2034.8954%2042%2036V59C42%2060.1046%2041.1046%2061%2040%2061H34C32.8954%2061%2032%2060.1046%2032%2059V36C32%2034.8954%2032.8954%2034%2034%2034H40Z%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M54%2019C55.1046%2019%2056%2019.8954%2056%2021V59C56%2060.1046%2055.1046%2061%2054%2061H48C46.8954%2061%2046%2060.1046%2046%2059V21C46%2019.8954%2046.8954%2019%2048%2019H54Z%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2212.2929%22%20y1%3D%2220.2929%22%20x2%3D%2220.2929%22%20y2%3D%2212.2929%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2226.7071%22%20y1%3D%2212.2929%22%20x2%3D%2233.7071%22%20y2%3D%2219.2929%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Cline%20x1%3D%2248.774%22%20y1%3D%227.63324%22%20x2%3D%2239.774%22%20y2%3D%2218.6332%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2223%22%20r%3D%224%22%20fill%3D%22%23FFEF18%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2210%22%20r%3D%224%22%20fill%3D%22%23FFEF18%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2221%22%20r%3D%224%22%20fill%3D%22%23FFEF18%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2251%22%20cy%3D%225%22%20r%3D%224%22%20fill%3D%22%23FFEF18%22%20stroke%3D%22%23202A60%22%20stroke-width%3D%222%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_148_3%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22white%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.student_service .btn-wrap a:nth-child(4)::after {
background-image: url("../../img/mypage/ico_dugak_app.png");
width: 120px;
height: 120px;
border-radius: 0;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 120px 120px;
}
@media screen and (max-width: 1250px) {
.mypage_wrap .mypage_top .my_link {
width: 185px;
}
}
@media screen and (max-width: 890px) {
.mypage_wrap .mypage_top .my_link {
width: 185px;
}
.student_service .btn-wrap {
display: flex;
flex-flow: column;
gap: 10px;
}
.student_service .btn-wrap a:nth-child(4)::after {
width: 100px;
height: 100px;
background-size: 100px 100px;
align-self: baseline;
}
.student_service .flex-block {
padding: 40px 20px;
}
}
@media screen and (max-width: 768px) {
.student_service .top img {
width: 120px;
margin: 0 auto 30px;
}
.student_service .btn-wrap a {
font-size: 16px;
padding: 14px 20px;
border-radius: 12px;
}
.student_service .btn-wrap a::after {
width: 60px;
height: 60px;
border-radius: 50px;
background-size: 40px 40px;
}
.student_service .btn-wrap a:nth-child(4) {
flex-flow: row-reverse;
gap: 20px;
}
.student_service .btn-wrap a:nth-child(4) p {
color: var(--color-primary);
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 16px;
}
.student_service .btn-wrap a:nth-child(4) span {
font-size: 12px;
}
.student_service .btn-wrap a:nth-child(4) span br {
display: none;
}
.student_service .btn-wrap a:nth-child(4)::after {
width: 60px;
height: 60px;
background-size: 60px 60px;
align-self: baseline;
}
.student_service .btn-wrap a:nth-child(3)::after {
align-self: center;
}
}
@media screen and (max-width: 475px) {
.student_service .btn-wrap a:nth-child(4) {
flex-flow: column-reverse;
gap: 10px;
}
.student_service .btn-wrap a:nth-child(4)::after {
width: 80px;
height: 80px;
background-size: 80px 80px;
align-self: center;
}
.student_service .btn-wrap a:nth-child(4) p {
flex-flow: column;
align-items: center;
gap: 6px;
}
.student_service .btn-wrap a:nth-child(4) p i {
padding: 0px 12px;
gap: 4px;
}
.student_service .btn-wrap a:nth-child(4) span {
text-align: center;
}
}
/* 입반테스트 신청 */
.section {
width: 100%;
max-width: 1450px;
margin: 0 auto;
background-color: #fff;
box-sizing: border-box;
}
.section.entrance-wrap {
margin: 0 auto;
border-radius: 26px;
padding: 80px 0 190px;
}
.section-header {
text-align: center;
}
.entrance-wrap .section-body {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.entrance-wrap .alert-box {
display: flex;
flex-flow: column;
gap: 20px;
padding: 40px;
margin-bottom: 60px;
border-radius: 26px;
background-color: var(--color-gray-200);
}
.entrance-wrap .alert-box .flex-row-box {
display: flex;
flex-flow: row;
gap: 30px;
}
.entrance-wrap .flex-row-box .col:first-child {
width: 360px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
flex-shrink: 1;
gap: 6px;
padding: 20px;
border-radius: 13px;
text-align: center;
background-color: var(--color-primary);
box-sizing: border-box;
}
.entrance-wrap .flex-row-box .col:last-child {
width: 100%;
}
.entrance-wrap .flex-row-box .col:first-child p {
color: #ffffff;
font-size: 24px;
font-weight: 600;
}
.entrance-wrap .flex-row-box .col:first-child span {
color: var(--color-secondary);
font-size: 20px;
font-weight: 600;
}
.entrance-wrap .list-badge {
width: 100%;
display: flex;
flex-flow: column;
gap: 12px;
padding: 16px 0;
}
.entrance-wrap .list-badge li {
display: flex;
align-items: center;
gap: 20px;
background: #fff;
border-radius: 26px;
padding-right: 20px;
border: 1px solid var(--color-primary);
box-sizing: border-box;
}
.entrance-wrap .list-badge span {
padding: 10px 60px;
border-radius: 24px 0 0 24px;
font-weight: 600;
border-right: 1px solid var(--color-primary);
background-color: var(--color-secondary);
color: var(--color-primary);
}
.entrance-wrap .text-highlight {
color: #ff6600;
font-size: 18px;
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 13px;
border: 1px solid var(--color-gray-300);
}
.entrance-wrap .divider-line {
display: inline-block;
width: 100%;
height: 1px;
background-color: var(--color-gray-300);
}
.entrance-wrap .list-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 0;
background-color: #fff;
border-radius: 13px;
border: 1px solid var(--color-gray-300);
}
.entrance-wrap .list-grid li {
grid-column: span 1;
padding: 12px 26px;
display: flex;
align-items: center;
gap: 20px;
}
.entrance-wrap .list-grid li span {
font-weight: 600;
}
.entrance-wrap .list-grid li a.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 30px;
border-radius: 50px;
font-size: 12px;
font-weight: 400;
color: #fff;
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
transition: ease all 0.2s;
}
.entrance-wrap .list-grid li a.badge::before {
content: "";
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220%20-960%20960%20960%22 width=%2224px%22 fill=%22%23fff32b%22%3E%3Cpath d=%22m600-176-240-84-188%2073v-533l188-64%20240%2084%20188-73v536l-188%2061Zm-14-34v-468l-212-74v468l212%2074Zm28%200%20146-48v-474l-146%2054v468Zm-414-18%20146-56v-468l-146%2050v474Zm414-450v468-468Zm-268-74v468-468Z%22/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
}
.entrance-wrap .list-grid li a.badge:hover {
color: var(--color-primary);
background: var(--color-secondary);
}
.entrance-wrap .list-grid li a.badge:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220%20-960%20960%20960%22 width=%2224px%22 fill=%22%23202a60%22%3E%3Cpath d=%22m600-176-240-84-188%2073v-533l188-64%20240%2084%20188-73v536l-188%2061Zm-14-34v-468l-212-74v468l212%2074Zm28%200%20146-48v-474l-146%2054v468Zm-414-18%20146-56v-468l-146%2050v474Zm414-450v468-468Zm-268-74v468-468Z%22/%3E%3C/svg%3E");
}
.entrance-wrap .list-grid li:first-child {
border-right: 1px solid var(--color-gray-300);
}
.entrance-wrap .list-grid li:last-child {
grid-column: span 2;
border-top: 1px solid var(--color-gray-300);
}
.entrance-wrap .form-wrap {
width: 100%;
max-width: 450px;
margin: 40px auto;
}
.entrance-wrap .form-wrap .input_wrap {
margin-bottom: 25px;
}
.entrance-wrap .form-wrap .input_wrap .helper-text {
font-size: 14px;
display: block;
color: #999;
}
.entrance-wrap .error {
width: 100%;
line-height: 30px;
background-color: rgba(254, 74, 74, 0.1);
font-size: 12px;
font-weight: 300;
color: #fe4a4a;
text-align: center;
display: none;
}
.entrance-wrap .input-error {
border: 1px solid var(--color-red);
}
.entrance-wrap .agreement-box {
padding: 0px;
}
.agreement-box .agreement-content {
padding: 20px;
border-radius: 13px;
border: 1px solid var(--color-gray-300);
background-color: var(--color-gray-200);
margin-bottom: 20px;
max-height: 400px;
overflow-y: auto;
}
.agreement-box .agreement-header {
font-weight: 600;
margin-bottom: 6px;
}
.agreement-body + .agreement-header {
margin-top: 20px;
}
/* 체크박스 커스텀 스타일 */
.entrance-wrap .checkbox-cell {
justify-content: center;
}
.agreement-check {
margin-bottom: 40px;
}
.entrance-wrap .checkbox-wrapper {
position: relative;
display: block;
width: fit-content;
padding-left: 30px;
margin-bottom: 6px;
cursor: pointer;
}
.entrance-wrap .checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.entrance-wrap .checkmark {
position: absolute;
top: 2px;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 1px solid var(--color-primary);
border-radius: 3px;
transition: ease all 0.2s;
}
.entrance-wrap .checkbox-wrapper:hover input ~ .checkmark {
background-color: var(--color-gray-100);
}
.entrance-wrap .checkbox-wrapper input:checked ~ .checkmark {
background-color: var(--color-primary);
}
.entrance-wrap .checkmark:after {
content: "";
position: absolute;
display: none;
}
.entrance-wrap .checkbox-wrapper input:checked ~ .checkmark:after {
display: block;
}
.entrance-wrap .checkbox-wrapper .checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
/* 체크박스가 비활성화(disabled)된 상태일 때의 스타일 */
.entrance-wrap .checkbox-wrapper input:disabled ~ .checkmark {
background-color: var(--color-gray-200); /* 비활성화된 상태의 배경색 */
border-color: var(--color-gray-300); /* 비활성화된 상태의 테두리 색 */
cursor: not-allowed; /* 커서 모양 변경 */
opacity: 0.6; /* 비활성화된 상태의 투명도 조정 */
}
/* 체크박스가 비활성화된 상태일 때 체크 표시의 스타일 */
.entrance-wrap .checkbox-wrapper input:disabled:checked ~ .checkmark:after {
border-color: var(--color-gray-300); /* 체크 표시의 색상 변경 */
}
@media screen and (max-width: 1250px) {
.student_service .btn-wrap a {
font-size: 24px;
padding: 20px 20px;
gap: 10px;
}
.student_service .btn-wrap a:nth-child(3) .subtitle {
font-size: 14px;
}
}
@media screen and (max-width: 890px) {
.section.entrance-wrap {
border-radius: 0;
padding: 80px 0 80px;
}
.entrance-wrap .section-body {
padding: 20px 0;
}
.entrance-wrap .alert-box .flex-row-box {
display: flex;
flex-flow: column;
gap: 0px;
}
.entrance-wrap .alert-box {
padding: 30px 20px;
margin: 0 20px;
}
.entrance-wrap .flex-row-box .col:first-child {
width: 100%;
gap: 0px;
}
.entrance-wrap .list-badge {
padding-bottom: 0;
}
.entrance-wrap .list-badge li {
border-radius: 13px;
}
.entrance-wrap .list-badge span {
padding: 10px 30px;
border-radius: 13px 0 0 13px;
}
.entrance-wrap .text-highlight {
font-size: 16px;
}
.entrance-wrap .list-grid {
display: flex;
flex-flow: column;
gap: 0;
}
.entrance-wrap .list-grid li:first-child {
border-right: 0;
}
.entrance-wrap .list-grid li + li {
border-top: 1px solid var(--color-gray-300);
}
.entrance-wrap .form-wrap {
max-width: 100%;
}
.entrance-wrap .agreement-box {
padding: 20px;
}
.entrance-wrap .list-grid li a.badge {
padding: 2px 26px;
}
}
@media screen and (max-width: 475px) {
.entrance-wrap .list-grid li {
padding: 12px 13px;
align-items: center;
flex-flow: column;
align-items: flex-start;
gap: 4px;
}
.entrance-wrap .list-grid li a.badge {
padding: 4px 26px;
width: 100%;
box-sizing: border-box;
border-radius: 6px;
justify-content: center;
}
}
/* Privacy Page */
.checkprivacy {
background: #ededed;
width: 100%;
}
.checkprivacy .agree_txt {
width: 1450px;
margin: 40px auto;
padding: 80px;
border-radius: 24px;
box-sizing: border-box;
background: #fff;
}
.agree_txt .tit {
width: 100%;
margin: 0 auto;
font-size: 40px;
padding-bottom: 80px;
font-weight: bold;
text-align: center;
color: #333;
line-height: 1;
}
.checkprivacy pre {
white-space: pre-wrap;
}
@media screen and (max-width: 1480px) {
.checkprivacy {
padding: 20px;
}
.checkprivacy .agree_txt {
width: 100%;
margin: 0 auto;
padding: 20px;
}
.agree_txt .tit {
padding-top: 20px;
padding-bottom: 40px;
font-size: 30px;
}
}
@media screen and (max-width: 890px) {
.checkprivacy {
padding: 10px 0;
}
.checkprivacy .agree_txt {
width: 100%;
padding: 20px;
border-radius: 0;
}
.agree_txt .tit {
font-size: 25px;
}
}
/* Map page */
.section.map-wrap {
margin: 0 auto;
border-radius: 26px;
padding: 40px 0 40px;
}
.map-wrap .title {
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}
.map-wrap .title span {
display: block;
font-size: 28px;
color: var(--color-primary-light);
}
.map-wrap .section-body {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.map-wrap .alert-box {
display: flex;
flex-flow: column;
gap: 20px;
padding: 40px;
border-radius: 26px;
background-color: var(--color-primary);
}
.map-wrap .alert-box.bg {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(32, 42, 96, 1)), url(../../img/background/bg-box-01.jpg);
background-size: cover; /* 배경 이미지 크기 조정 */
background-position: center; /* 배경 이미지 위치 조정 */
}
.map-wrap .alert-box .sub-title {
text-align: center;
margin-bottom: 20px;
}
.map-wrap .alert-box .sub-title > h2 {
font-size: 42px;
color: var(--color-secondary);
margin-bottom: 20px;
}
.map-wrap .alert-box .sub-title > h2 br {
display: none;
}
.map-wrap .alert-box .sub-title > span {
font-size: 32px;
color: #fff;
}
.map-wrap .alert-box .sub-title .detail {
font-size: 18px;
color: #fff;
word-break: keep-all;
}
.map-wrap .alert-box .sub-title .detail .m-visible {
display: none;
}
.map-wrap .alert-box .sub-title .detail span {
display: block;
font-size: 28px;
font-weight: 600;
margin-bottom: 6px;
color: #fff;
}
.map-wrap .schedule-box {
width: 100%;
display: flex;
flex-flow: column;
gap: 20px;
padding: 40px;
box-sizing: border-box;
background-color: #fff;
border-radius: 24px;
}
.map-wrap .flex {
width: 100%;
display: flex;
gap: 20px;
}
.map-wrap .flex .title {
width: 160px;
align-self: flex-start;
margin: 0;
padding: 10px 12px;
border-radius: 24px;
text-align: center;
font-size: 16px;
font-weight: 600;
border: 1px solid var(--color-primary);
color: var(--color-primary);
background-color: var(--color-secondary);
}
.map-wrap .flex .detail {
width: 100%;
display: flex;
align-items: center;
font-size: 18px;
align-self: center;
}
.map-wrap .table {
width: 400px;
}
.map-wrap .table tr td {
padding: 10px;
border: 1px solid var(--color-gray-300);
}
.map-wrap .table tr td:first-child {
text-align: center;
}
.map-wrap .table .badge {
display: inline-block;
border-radius: 6px;
margin-left: 6px;
padding: 2px 12px;
font-size: 14px;
font-weight: 600;
color: #fff;
background-color: var(--color-red);
}
.map-wrap a.badge-link {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 30px;
margin-left: 15px;
border-radius: 50px;
font-size: 12px;
font-weight: 400;
color: #fff;
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
transition: ease all 0.2s;
}
.map-wrap a.badge-link:hover {
color: var(--color-primary);
background: var(--color-secondary);
}
.map-wrap a.badge-link::before {
content: "";
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220%20-960%20960%20960%22 width=%2224px%22 fill=%22%23fff32b%22%3E%3Cpath d=%22m600-176-240-84-188%2073v-533l188-64%20240%2084%20188-73v536l-188%2061Zm-14-34v-468l-212-74v468l212%2074Zm28%200%20146-48v-474l-146%2054v468Zm-414-18%20146-56v-468l-146%2050v474Zm414-450v468-468Zm-268-74v468-468Z%22/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
}
.map-wrap a.badge-link:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220%20-960%20960%20960%22 width=%2224px%22 fill=%22%23202a60%22%3E%3Cpath d=%22m600-176-240-84-188%2073v-533l188-64%20240%2084%20188-73v536l-188%2061Zm-14-34v-468l-212-74v468l212%2074Zm28%200%20146-48v-474l-146%2054v468Zm-414-18%20146-56v-468l-146%2050v474Zm414-450v468-468Zm-268-74v468-468Z%22/%3E%3C/svg%3E");
}
.map-wrap .caution {
color: #fff;
text-align: center;
}
.map-wrap .divide {
margin: 50px 0;
}
.map-wrap .form-title {
text-align: center;
}
.map-wrap .form-title h3 {
display: inline-block;
margin-bottom: 30px;
font-size: 36px;
font-weight: 600;
color: var(--color-primary);
}
.map-wrap .btn_wrap {
display: flex;
flex-flow: column;
gap: 10px;
}
.map-wrap .btn_wrap .btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0 auto;
width: 100%;
height: 54px;
padding: 0px 20px;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
box-sizing: border-box;
transition: background-color 0.3s ease, color 0.1s ease;
}
.map-wrap .btn_wrap .btn-submit {
border: 1px solid var(--color-primary);
color: var(--color-primary);
background: var(--color-secondary);
}
.map-wrap .btn_wrap .btn-guest {
border: 1px solid var(--color-primary);
color: #ffffff;
background: var(--color-primary);
}
.map-wrap .btn_wrap .btn-submit:hover {
color: var(--color-secondary);
background: var(--color-primary);
}
.map-wrap .btn_wrap .btn-guest:hover {
color: var(--color-secondary);
}
.map-wrap .btn_wrap .btn-submit::after {
content: "";
display: block;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="%23202a60"%3E%3Cpath d="M88-504.67v-24h121.33v24H88Zm114 230-16.67-16.66L270-376l16 16.67-84 84.66ZM270-658l-84.67-84.67L202-759.33l84 84.66L270-658Zm400 420L496.67-411.33 463.33-308l-74.66-248 250.66 76-104 37.33 170 170L670-238ZM413.33-718.67V-840h24v121.33h-24Zm168 60.67-16.66-16.67 84.66-84.66L666-742l-84.67 84Z"/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-size: cover;
}
.map-wrap .btn_wrap .btn-submit:hover::after {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="%23ffffff"%3E%3Cpath d="M88-504.67v-24h121.33v24H88Zm114 230-16.67-16.66L270-376l16 16.67-84 84.66ZM270-658l-84.67-84.67L202-759.33l84 84.66L270-658Zm400 420L496.67-411.33 463.33-308l-74.66-248 250.66 76-104 37.33 170 170L670-238ZM413.33-718.67V-840h24v121.33h-24Zm168 60.67-16.66-16.67 84.66-84.66L666-742l-84.67 84Z"/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.map-wrap .form-wrap {
width: 100%;
max-width: 450px;
margin: 0 auto;
}
.map-wrap .form-wrap .input_wrap {
margin-bottom: 25px;
}
.map-wrap .error {
width: 100%;
line-height: 30px;
background-color: rgba(254, 74, 74, 0.1);
font-size: 12px;
font-weight: 300;
color: #fe4a4a;
text-align: center;
display: none;
}
.map-wrap .input-error {
border: 1px solid var(--color-red);
}
.input_wrap .radio-group {
display: flex;
flex-flow: column;
gap: 12px;
padding: 20px;
border-radius: 24px;
border: 1px solid var(--color-gray-300);
}
.input_wrap .radio-input {
display: none; /* 기본 라디오 버튼 숨기기 */
}
.input_wrap .radio-label {
display: inline-flex;
align-items: center;
cursor: pointer;
padding: 0 0 0 30px; /* 배경 이미지를 위한 공간 확보 */
position: relative;
}
.input_wrap .radio-label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 24px; /* SVG 너비와 높이 설정 */
height: 24px;
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center;
background-size: cover;
}
.input_wrap .radio-input:checked + .radio-label::before {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center center;
background-size: cover;
}
/* 비활성화된 상태의 스타일 */
.input_wrap .radio-input:disabled + .radio-label {
cursor: not-allowed;
opacity: 0.5; /* 비활성화된 상태를 시각적으로 구분 */
}
/* 체크박스 커스텀 스타일 */
.map-wrap .checkbox-cell {
justify-content: center;
}
.map-wrap .checkbox-wrapper {
position: relative;
display: block;
width: fit-content;
padding-left: 30px;
margin-bottom: 6px;
cursor: pointer;
}
.map-wrap .checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.map-wrap .checkmark {
position: absolute;
top: 2px;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 1px solid var(--color-primary);
border-radius: 3px;
transition: ease all 0.2s;
}
.map-wrap .checkbox-wrapper:hover input ~ .checkmark {
background-color: var(--color-gray-100);
}
.map-wrap .checkbox-wrapper input:checked ~ .checkmark {
background-color: var(--color-primary);
}
.map-wrap .checkmark:after {
content: "";
position: absolute;
display: none;
}
.map-wrap .checkbox-wrapper input:checked ~ .checkmark:after {
display: block;
}
.map-wrap .checkbox-wrapper .checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
/* 체크박스가 비활성화(disabled)된 상태일 때의 스타일 */
.map-wrap .checkbox-wrapper input:disabled ~ .checkmark {
background-color: var(--color-gray-200); /* 비활성화된 상태의 배경색 */
border-color: var(--color-gray-300); /* 비활성화된 상태의 테두리 색 */
cursor: not-allowed; /* 커서 모양 변경 */
opacity: 0.6; /* 비활성화된 상태의 투명도 조정 */
}
/* 체크박스가 비활성화된 상태일 때 체크 표시의 스타일 */
.map-wrap .checkbox-wrapper input:disabled:checked ~ .checkmark:after {
border-color: var(--color-gray-300); /* 체크 표시의 색상 변경 */
}
@media screen and (max-width: 890px) {
.section.map-wrap {
border-radius: 0;
}
.map-wrap .section-header {
padding: 0 20px;
}
.map-wrap .section-header .title {
font-size: 18px;
margin-bottom: 0;
}
.map-wrap .section-header .title span {
font-size: 18px;
}
.map-wrap .section-body {
max-width: 100%;
}
.map-wrap .title {
font-size: 16px;
}
.map-wrap .alert-box {
padding: 40px 20px;
}
.map-wrap .alert-box .sub-title h2 {
font-size: 30px;
line-height: 38px;
}
.map-wrap .alert-box .sub-title > h2 br {
display: block;
}
.map-wrap .alert-box .sub-title > span {
font-size: 18px;
}
.map-wrap .alert-box .sub-title .detail > span {
font-size: 20px;
margin-bottom: 20px;
}
.map-wrap .alert-box .sub-title .detail {
font-size: 14px;
}
.map-wrap .alert-box .sub-title .detail .m-visible {
display: block;
}
.map-wrap .schedule-box {
padding: 20px;
}
.map-wrap .flex {
flex-flow: column;
gap: 0;
}
.map-wrap .flex .title {
width: 100%;
border-radius: 13px 13px 0 0;
box-sizing: border-box;
}
.map-wrap .flex .detail {
flex-flow: column;
text-align: center;
border-radius: 0 0 13px 13px;
padding: 12px;
border: 1px solid var(--color-primary);
border-top: 0;
font-size: 16px;
box-sizing: border-box;
}
.map-wrap .flex:nth-of-type(3) .detail {
padding: 0;
}
.map-wrap .table {
width: 100%;
}
.map-wrap .table tr td {
padding: 6px;
border: 0;
}
.map-wrap .table tr + tr {
border-top: 1px solid var(--color-gray-300);
}
.map-wrap .table tr td + td {
border-left: 1px solid var(--color-gray-300);
}
.map-wrap .table .badge {
width: 100%;
box-sizing: border-box;
margin: 0;
}
.map-wrap a.badge-link {
margin-left: 0;
margin-top: 5px;
padding: 4px 26px;
width: 100%;
box-sizing: border-box;
border-radius: 6px;
justify-content: center;
}
.map-wrap .caution {
font-size: 14px;
}
.map-wrap .divide {
margin: 40px 0;
}
.map-wrap .form-title h3 {
margin-bottom: 20px;
font-size: 24px;
}
.map-wrap .form-wrap {
max-width: 100%;
}
.map-wrap .input_wrap {
padding: 0;
}
.map-wrap .input_wrap .radio-group {
border-radius: 13px;
}
.map-wrap .btn_wrap {
padding: 0;
}
}
/* recruit-wrap */
.section.recruit-wrap {
margin: 0 auto;
border-radius: 26px;
overflow: hidden;
}
.recruit-wrap .bg-top {
width: 100%;
height: 940px;
position: relative;
background-image: url(../../img/recruit/recruit-bg_05.png);
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
}
.recruit-wrap .text {
width: 100%;
position: absolute;
bottom: 0;
}
.recruit-wrap .title {
padding: 40px 20px;
text-align: center;
background-color: rgba(0, 0, 0, 0.75);
}
.recruit-wrap .title img {
width: 120px;
}
.recruit-wrap .title h1 {
color: var(--color-secondary);
font-size: 100px;
}
.recruit-wrap .title p {
color: #fff;
font-size: 24px;
font-weight: 100;
}
.recruit-wrap .subtitle p {
color: #fff;
font-size: 18px;
font-weight: 100;
padding: 26px 20px;
text-align: center;
background-color: var(--color-primary);
}
.recruit-wrap .content {
padding: 60px 32px;
max-width: 1200px;
margin: 0 auto;
}
.recruit-wrap .content-title {
padding: 60px 0;
margin-bottom: 40px;
text-align: center;
position: relative;
}
.recruit-wrap .content-title h2 {
display: inline-block;
padding: 0 24px;
position: relative;
z-index: 1;
text-align: center;
font-size: 42px;
background-color: #fff;
}
.recruit-wrap .content-title::after {
display: block;
content: "";
width: 100%;
height: 1px;
background-color: var(--color-gray-300);
position: absolute;
top: 50%;
}
.recruit-wrap .content .row {
display: flex;
padding-bottom: 60px;
}
.recruit-wrap .content .col-title {
width: 200px;
flex-shrink: 0;
position: relative;
}
.recruit-wrap .content .col-title h4 {
font-size: 32px;
color: var(--color-primary);
position: relative;
z-index: 1;
letter-spacing: 0.75px;
}
.recruit-wrap .content .col-title .btn-faq {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 42px;
border-radius: 6px;
font-size: 20px;
font-weight: 400;
color: #fff;
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
transition: ease all 0.2s;
cursor: pointer;
margin-top: 4px;
transition: all ease 0.2s;
}
.recruit-wrap .content .col-title .btn-faq:hover {
color: var(--color-primary);
background-color: var(--color-secondary);
border: 1px solid var(--color-primary);
}
.recruit-wrap .content .col-info {
flex: 1;
padding-top: 6px;
}
.recruit-wrap .content .col-info {
flex: 1;
padding-top: 6px;
}
.recruit-wrap .content .col-info p {
font-size: 18px;
line-height: 26px;
margin-bottom: 4px;
}
.recruit-wrap .content .col-info ul {
display: flex;
flex-wrap: wrap;
flex: 1;
justify-content: space-between;
padding-top: 6px;
}
.recruit-wrap .content .col-info ul li {
text-align: center;
display: flex;
flex-flow: column;
align-items: center;
}
.recruit-wrap .content .col-info ul li h5 {
font-size: 22px;
margin: 20px 0 6px;
}
.recruit-wrap .content .col-info ul li p {
}
.recruit-wrap .content .col-info .icon-box {
width: 120px;
height: 120px;
border-radius: 120px;
padding: 12px;
background-color: #f2f2f2;
transition: all ease 0.2s;
border: 2px solid transparent;
}
.recruit-wrap .content .col-info .icon-email {
width: 20px;
padding-top: 10px;
}
.recruit-wrap .content .col-info .icon-arrow {
width: 60px;
height: 144px;
display: flex;
align-items: center;
}
.recruit-wrap .content .col-info .icon-arrow img {
width: 100%;
}
.recruit-wrap .content .col-info .icon-box img {
width: 100%;
transform: scale(1);
transition: all ease 0.3s;
}
/* .recruit-wrap .content .col-info ul li:hover .icon-box {
background-color: var(--color-secondary);
border-color: var(--color-primary);
}
.recruit-wrap .content .col-info ul li:hover .icon-box img {
transform: scale(1.25);
} */
.recruit-wrap .content .col-info ul li.active .icon-box {
background-color: var(--color-secondary);
border-color: var(--color-primary);
}
.recruit-wrap .content .col-info ul li.active .icon-box img {
transform: scale(1.25);
}
.recruit-wrap .content .col-info .email::before {
display: inline-block;
content: "";
width: 20px;
height: 20px;
background-image: url(../../img/recruit/email.svg);
background-size: cover;
background-position: 0 3px;
background-repeat: no-repeat;
}
.btn-copymail {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 24px;
border-radius: 50px;
font-size: 13px;
font-weight: 400;
color: #fff;
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
transition: ease all 0.2s;
margin-left: 10px;
}
.btn-copymail::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
}
.recruit-wrap .btn-copymail:hover {
color: var(--color-primary);
background-color: var(--color-secondary);
}
.recruit-wrap .btn-copymail:hover::before {
background-image: url("data:image/svg+xml;utf8,");
}
.recruit-wrap .btn-download {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 22px 40px;
font-size: 18px;
font-weight: 500;
background-color: #ffdc87;
border-radius: 14px;
text-align: center;
border: 0;
font-weight: 600;
transition: all ease 0.2s;
}
.recruit-wrap .btn-download::before {
content: "";
display: inline-block;
width: 32px;
height: 32px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
}
.recruit-wrap .btn-download:hover {
color: var(--color-secondary);
background-color: var(--color-primary);
}
.recruit-wrap .btn-download:hover:before {
background-image: url("data:image/svg+xml;utf8,");
}
@media screen and (max-width: 1430px) {
.section.recruit-wrap {
border-radius: 0;
}
.recruit-wrap .content {
padding: 60px 32px;
max-width: 940px;
}
.recruit-wrap .content .row {
flex-flow: column;
}
.recruit-wrap .content .col-title {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
}
.recruit-wrap .content .col-title .btn-faq {
padding: 6px 42px;
border-radius: 22px;
font-size: 16px;
margin-top: 0px;
}
.recruit-wrap .content .col-info ul {
margin-top: 12px;
}
.recruit-wrap .content .col-info ul li {
margin-bottom: 20px;
}
.recruit-wrap .content .col-info .icon-box {
width: 80px;
height: 80px;
}
.recruit-wrap .content .col-title h4 {
text-indent: 18px;
}
.recruit-wrap .content .col-title::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
position: absolute;
top: 22px;
left: 0;
background-color: var(--color-gray-200);
}
}
@media screen and (max-width: 1024px) {
.recruit-wrap .bg-top {
height: 600px;
}
.recruit-wrap .title {
padding: 20px 20px;
}
.recruit-wrap .title h1 {
font-size: 54px;
}
.recruit-wrap .title p {
font-size: 18px;
}
.recruit-wrap .subtitle p {
font-size: 16px;
padding: 20px 20px;
}
.recruit-wrap .content .col-info ul {
flex-flow: column;
align-items: flex-start;
}
.recruit-wrap .content .col-info ul li {
width: 100%;
padding: 26px;
flex-flow: row;
align-items: center;
gap: 40px;
border: 1px solid #ddd;
text-align: left;
border-radius: 24px;
box-sizing: border-box;
}
.recruit-wrap .content .col-info ul li:nth-child(even) {
border: 0;
padding: 0;
justify-content: center;
}
.recruit-wrap .content .col-info ul li:nth-child(even) .icon-arrow {
width: 40px;
height: 60px;
display: flex;
align-items: center;
transform: rotate(90deg);
}
.recruit-wrap .content .col-info ul li br {
display: none;
}
.recruit-wrap .content .col-info ul li h5 {
margin-top: 0;
}
.recruit-wrap .content .col-info .icon-box {
width: 120px;
height: 120px;
}
}
@media screen and (max-width: 890px) {
}
@media screen and (max-width: 768px) {
.recruit-wrap .content {
padding: 40px 20px;
max-width: 100%;
}
.recruit-wrap .bg-top {
height: 640px;
background-image: url(../../img/recruit/recruit-bg_05_m.png);
background-position: center center;
}
.recruit-wrap .title {
padding: 20px 20px;
}
.recruit-wrap .title h1 {
font-size: 40px;
}
.recruit-wrap .title p {
font-size: 18px;
}
.recruit-wrap .subtitle p {
font-size: 16px;
padding: 20px 20px;
}
.recruit-wrap .content-title {
padding: 20px 0;
margin-bottom: 20px;
}
.recruit-wrap .content-title h2 {
font-size: 26px;
padding: 0;
}
.recruit-wrap .content-title::after {
display: none;
}
.recruit-wrap .content .col-title .btn-faq {
padding: 4px 30px;
font-size: 14px;
}
.recruit-wrap .content .row {
padding-bottom: 40px;
}
.recruit-wrap .content .col-title h4 {
font-size: 20px;
letter-spacing: 0;
}
.recruit-wrap .content .col-title::after {
top: 12px;
}
.recruit-wrap .content .col-info .icon-box {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.recruit-wrap .content .col-info .icon-box img {
width: 100%;
max-width: 70px;
}
.recruit-wrap .content .col-info ul {
margin-top: 0;
}
.recruit-wrap .content .col-info ul li h5 {
font-size: 18px;
margin: 0;
}
.recruit-wrap .content .col-info ul li {
padding: 20px;
gap: 20px;
margin-bottom: 10px;
}
.recruit-wrap .content .col-info ul li p {
font-size: 15px;
}
.recruit-wrap .content .col-info ul li:nth-child(even) .icon-arrow {
height: 30px;
}
.recruit-wrap .content .col-info p {
font-size: 15px;
line-height: 1.25;
margin-bottom: 0;
}
.btn-copymail {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 10px 24px;
font-size: 15px;
width: 100%;
margin-top: 10px;
margin-left: 0;
}
}
@media screen and (max-width: 640px) {
.recruit-wrap .bg-top {
height: 600px;
background-image: url(../../img/recruit/recruit-bg_05_m.png);
}
}
@media screen and (max-width: 480px) {
.recruit-wrap .bg-top {
height: 560px;
background-position: center bottom;
}
}
/* 성적조회 academy-facility.html */
.mypage_wrap .mypage_tit.facility h3 {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
}
.mypage_wrap .mypage_tit.facility h3::before {
display: flex;
content: "";
width: 56px;
height: 56px;
background: url(../../img/mypage/icon_chart_w.svg) no-repeat center center / 56px 56px;
}
.facility-body {
display: flex;
flex-flow: column;
align-items: center;
background-color: #fff;
padding: 53px 40px;
border-radius: 0 0 26px 26px;
word-break: keep-all;
}
.facility-body .facility-title {
font-size: 32px;
text-align: center;
color: var(--color-primary);
margin-bottom: 60px;
}
.facility-body .facility-title span {
display: block;
font-size: 36px;
color: var(--color-primary-light);
font-weight: 400;
}
.facility-body .facility-title::after {
display: block;
content: "";
width: 120px;
height: 4px;
margin: 20px auto 0;
background-color: #202a60;
}
.student-info-summary,
.score-summary,
.score-chart,
.grade-threshold,
.squestion-analysis {
margin-bottom: 40px;
width: 100%;
}
.facility-body .info-table {
width: 100%;
vertical-align: middle;
text-align: center;
line-height: 1.25;
}
.facility-body .info-table th,
.facility-body .info-table td {
border: 1px solid var(--color-gray-300);
padding: 12px 6px;
font-size: 15px;
vertical-align: middle;
}
.facility-body .info-table td a {
font-weight: 600;
color: #4d3ec2;
}
.facility-body .info-table th:first-child,
.facility-body .info-table td:first-child {
border-left: 0;
}
.facility-body .info-table th:last-child,
.facility-body .info-table td:last-child {
border-right: 0;
}
.facility-body .info-table th {
background-color: var(--color-gray-100);
font-weight: 500;
}
.facility-body a.link-underline {
text-decoration: underline;
color: #4d3ec2;
}
.facility-body form {
width: 100%;
}
.facility-body .form-wrap {
width: 100%;
max-width: 840px;
margin: 0 auto;
display: flex;
flex-flow: column;
justify-content: center;
}
.facility-body .form-wrap.full-width {
max-width: 100%;
}
.facility-body .flex-row {
width: 100%;
display: flex;
flex-flow: row;
gap: 40px;
}
.facility-body .flex-row.flex-between {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.facility-body .flex-row.flex-between .select-wrap {
display: flex;
width: 100%;
max-width: 800px;
}
.facility-body .flex-row.flex-between .input_wrap {
display: flex;
width: 100%;
max-width: 800px;
margin-bottom: 0;
}
.facility-body .btn.view-summary {
padding: 14px 30px 14px 40px;
background-color: #4d3ec2;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 16px;
font-weight: 500;
transition: all ease 0.2s;
}
.facility-body .btn.view-summary::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23ffffff' d='M377-198v-60h463v60H377Zm0-252v-60h463v60H377Zm0-253v-60h463v60H377ZM189-161q-28.05 0-48.02-19Q121-199 121-227.5t19.5-48q19.5-19.5 48-19.5t47.5 19.98q19 19.97 19 48.02 0 27.23-19.39 46.61Q216.23-161 189-161Zm0-252q-28.05 0-48.02-19.68Q121-452.36 121-480t19.98-47.32Q160.95-547 189-547q27.23 0 46.61 19.68Q255-507.64 255-480t-19.39 47.32Q216.23-413 189-413Zm-1-253q-27.64 0-47.32-19.68T121-733q0-27.64 19.68-47.32T188-800q27.64 0 47.32 19.68T255-733q0 27.64-19.68 47.32T188-666Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: all ease 0.2s;
}
.facility-body .btn.view-summary::after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23ffffff' d='M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translateX(0);
transition: all ease 0.3s;
}
.facility-body .btn.view-summary:hover {
color: var(--color-secondary);
}
.facility-body .btn.view-summary:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23fff32b' d='M377-198v-60h463v60H377Zm0-252v-60h463v60H377Zm0-253v-60h463v60H377ZM189-161q-28.05 0-48.02-19Q121-199 121-227.5t19.5-48q19.5-19.5 48-19.5t47.5 19.98q19 19.97 19 48.02 0 27.23-19.39 46.61Q216.23-161 189-161Zm0-252q-28.05 0-48.02-19.68Q121-452.36 121-480t19.98-47.32Q160.95-547 189-547q27.23 0 46.61 19.68Q255-507.64 255-480t-19.39 47.32Q216.23-413 189-413Zm-1-253q-27.64 0-47.32-19.68T121-733q0-27.64 19.68-47.32T188-800q27.64 0 47.32 19.68T255-733q0 27.64-19.68 47.32T188-666Z'/%3E%3C/svg%3E");
}
.facility-body .btn.view-summary:hover::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23fff32b' d='M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z'/%3E%3C/svg%3E");
transform: translateX(10px);
}
.facility-body input,
.facility-body select,
.facility-body .input_wrap {
width: 100%;
}
.facility-body .input_wrap {
display: flex;
align-items: center;
}
.facility-body .input_wrap label {
text-align: right;
padding-right: 20px;
font-size: 20px;
pointer-events: none;
}
.facility-body .text-box {
width: 100%;
min-height: 140px;
margin: 40px auto;
padding: 40px 20px;
border-top: 1px solid var(--color-gray-200);
border-bottom: 1px solid var(--color-gray-200);
font-size: 18px;
box-sizing: border-box;
}
.facility-body .text-box ul {
width: fit-content;
margin: 0 auto;
}
.facility-body .text-box ul li {
position: relative;
padding-left: 1em;
font-size: 18px;
line-height: 1.6;
}
.facility-body .text-box ul li::before {
content: "•";
position: absolute;
left: 0;
top: -2px;
color: var(--color-gray-300); /* 강조 색상 */
}
.facility-body .alert-box {
width: 100%;
min-height: 140px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 26px;
margin: 40px auto;
padding: 40px 20px;
background-color: var(--color-gray-100);
border: 1px solid var(--color-gray-300);
font-size: 18px;
text-align: center;
box-sizing: border-box;
flex-wrap: wrap;
white-space: pre;
}
.facility-body .alert-btnbox {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
border-radius: 16px;
padding: 30px 20px;
background-color: var(--color-gray-100);
font-size: 18px;
box-sizing: border-box;
line-height: 1;
margin-bottom: 40px;
}
.asterisk {
display: inline-block;
font-size: 1rem;
line-height: 1;
vertical-align: middle;
color: var(--color-red);
}
.facility-body .alert-box span {
color: var(--color-red);
}
.facility-body .btn-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.facility-body .btn {
width: 100%;
max-width: 600px;
display: flex;
align-items: center;
justify-content: center;
padding: 22px 40px;
font-size: 18px;
font-weight: 500;
border-radius: 60px;
text-align: center;
border: 0;
font-weight: 600;
transition: all ease 0.2s;
}
.facility-body .btn-submit {
background-color: var(--color-secondary-light);
}
.facility-body .btn-submit:hover {
background-color: var(--color-primary);
color: var(--color-secondary);
}
.facility-body .btn:disabled {
cursor: not-allowed;
background-color: var(--color-gray-100) !important;
color: var(--color-gray-300) !important;
}
.facility-body .btn-auth {
color: #fff;
background-color: var(--color-primary);
}
.facility-body .btn-auth:hover {
color: var(--color-secondary);
}
.facility-body .alert-btnbox .alert-btn {
background-color: var(--color-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
border-radius: 50px;
padding: 4px 20px;
transition: all ease 0.2s;
box-sizing: border-box;
}
.facility-body .alert-btnbox .alert-btn::after {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23ffffff' d='M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translateX(0);
transition: all ease 0.2s;
}
.facility-body .alert-btnbox .alert-btn:hover {
color: #fff32b;
}
.facility-body .alert-btnbox .alert-btn:hover::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23fff32b' d='M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z'/%3E%3C/svg%3E");
transform: translateX(4px);
}
.facility-body .btn-download-pdf {
width: 100%;
max-width: 800px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 22px 40px;
font-size: 18px;
font-weight: 500;
background-color: var(--color-primary);
border-radius: 50px;
text-align: center;
border: 0;
color: #fff;
font-weight: 600;
transition: all ease 0.2s;
}
.facility-body .btn-download-pdf::after {
content: "";
display: inline-block;
width: 28px;
height: 28px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23ffffff' d='M480-313 287-506l43-43 120 120v-371h60v371l120-120 43 43-193 193ZM160-160v-203h60v143h520v-143h60v203H160Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: all ease 0.2s;
}
.facility-body .btn-download-pdf:hover {
color: var(--color-secondary);
}
.facility-body .btn-download-pdf:hover::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23fff32b' d='M480-313 287-506l43-43 120 120v-371h60v371l120-120 43 43-193 193ZM160-160v-203h60v143h520v-143h60v203H160Z'/%3E%3C/svg%3E");
}
.facility-body .btn-icon {
position: relative;
display: inline-block;
background-color: transparent;
border: none;
padding: 0;
cursor: pointer;
}
.facility-body .btn-icon:hover img {
transition: opacity 0.3s ease;
opacity: 0.1;
}
.facility-body .btn-icon::after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1;
}
.facility-body .btn-icon:hover::after {
opacity: 1;
}
.facility-body .btn-icon:hover img {
opacity: 0.5;
}
/* academy-facility-result */
.facility-body .summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.facility-body .summary-item {
overflow: hidden;
}
.facility-body .test-info {
position: relative;
padding-bottom: 42px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 12px;
background: var(--color-secondary-light);
overflow: hidden;
}
.facility-body .test-title {
display: block;
font-size: 24px;
font-weight: 300;
color: var(--color-primary);
}
.facility-body .test-round {
display: block;
font-size: 42px;
line-height: 1.2;
font-weight: bold;
color: var(--color-primary);
}
.facility-body .test-date {
display: block;
position: absolute;
bottom: 0;
width: 100%;
padding: 8px 12px 10px;
font-size: 16px;
background: var(--color-primary);
color: #fff;
}
.facility-body .summary-stats {
grid-column: span 2;
display: flex;
border: 1px solid #ddd;
border-radius: 12px;
}
.facility-body .stat-box {
padding: 20px;
flex: 1;
text-align: center;
background: #fff;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
position: relative;
min-height: 140px;
}
.stat-box + .stat-box {
border-left: 1px solid #ddd;
}
.facility-body .stat-box .label {
padding: 4px 20px;
font-size: 18px;
color: #141414;
}
.facility-body .stat-box .value {
font-size: 42px;
line-height: 45px;
color: var(--color-primary);
font-weight: bold;
}
.facility-body .stat-box .sub {
width: 100%;
position: absolute;
left: 0;
bottom: 18px;
font-size: 14px;
}
.facility-body .predict-score .predict-row {
display: flex;
justify-content: center;
gap: 40px;
}
.facility-body .predict-box {
flex: 1;
}
.facility-body .score-wrap,
.facility-body .predict-box {
display: flex;
align-items: baseline;
gap: 12px;
}
.facility-body .predict-score .label {
color: #202a60;
background-color: #e2e7ff;
border-radius: 50px;
padding: 4px 20px;
width: 100%;
box-sizing: border-box;
transform: translateY(-12px);
}
.facility-body .block-title {
width: 100%;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 14px;
font-size: 18px;
font-weight: 500;
color: #141414;
}
.facility-body .block-title::before {
display: inline-block;
content: "";
width: 8px;
height: 8px;
background-color: var(--color-primary-light);
}
.facility-body .grade-threshold {
display: flex;
gap: 20px;
}
.facility-body .grade-threshold .col,
.facility-body .grade-threshold .table-facility {
width: 100%;
min-width: auto;
}
.facility-body .table-wrap-outer {
position: relative;
}
/* 스크롤 힌트 통합 컨테이너 */
.scroll-hint {
position: absolute;
top: 0;
right: -12px;
width: 32px;
height: 100%;
z-index: 9;
pointer-events: auto;
}
/* 배경 */
.scroll-gradient {
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 100%;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 10;
pointer-events: none;
border-left: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: -8px 0 12px -4px rgba(0, 0, 0, 0.15);
border-radius: 12px 0 0 12px;
}
/* 화살표 */
.scroll-arrow {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
z-index: 11;
animation: scrollArrowBlink 1.2s infinite;
}
@keyframes scrollArrowBlink {
0%, 100% {
opacity: 0.6;
transform: translateX(0);
}
50% {
opacity: 1;
transform: translateX(-4px);
}
}
.facility-body .table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
}
.facility-body .table-facility {
width: 100%;
min-width: 600px;
border-collapse: collapse;
border-top: 2px solid var(--color-primary);
}
.facility-body .table-facility th,
.facility-body .table-facility td {
border: 1px solid var(--color-gray-300);
vertical-align: middle;
text-align: center;
padding: 8px 6px;
font-size: 14px;
line-height: 1.25;
}
.facility-body .table-facility th {
font-weight: 500;
background-color: #f0f4ff;
}
.facility-body .table-facility.table-analysis thead th:first-child {
width: 60px;
}
.facility-body .table-facility.border-x-none td:first-child,
.facility-body .table-facility.border-x-none th:first-child {
border-left: none;
}
.facility-body .table-facility.border-x-none td:last-child,
.facility-body .table-facility.border-x-none th:last-child {
border-right: none;
}
.student_service .top p.text-sub {
font-size: 20px;
font-weight: 400;
color: #141414;
}
.student_service .top p.text-sub span {
font-weight: 400;
color: var(--color-red);
}
@media screen and (max-width: 1250px) {
.mypage_wrap .mypage_tit.facility h3 {
gap: 12px;
}
.student_service .top p.text-sub {
font-size: 18px;
}
.mypage_wrap .mypage_tit.facility h3::before {
display: flex;
content: "";
width: 25px;
height: 25px;
background: url(../../img/mypage/icon_chart_w.svg) no-repeat center center / 25px 25px;
}
.facility-body .facility-title {
font-size: 24px;
}
.facility-body .facility-title::after {
width: 80px;
margin: 10px auto 0;
}
.facility-body .flex-row.flex-between .select-wrap {
max-width: 640px;
}
.facility-body .facility-title span {
font-size: 28px;
}
}
@media screen and (max-width: 1024px) {
.facility-body .flex-row.flex-between {
flex-flow: column;
}
.facility-body .flex-row.flex-between .select-wrap {
max-width: 100%;
}
.facility-body .flex-row.flex-between .input_wrap {
max-width: 100%;
}
.facility-body .summary-grid {
display: grid;
grid-template-columns: 1fr;
column-gap: 0;
}
.facility-body .test-info {
min-height: 140px;
}
.facility-body .test-title {
font-size: 20px;
}
.facility-body .test-round {
font-size: 36px;
}
.facility-body .stat-box .label {
font-size: 14px;
}
.facility-body .stat-box .value {
font-size: 36px;
}
.facility-body .grade-threshold {
display: flex;
flex-flow: column;
gap: 20px;
}
.facility-body .btn-download-pdf {
gap: 6px;
padding: 16px 20px;
font-size: 16px;
}
.facility-body .btn-download-pdf::after {
width: 24px;
height: 24px;
}
.facility-body .btn {
padding: 16px 20px;
font-size: 16px;
}
.facility-body .text-box ul li {
font-size: 16px;
}
.facility-body .alert-box {
font-size: 16px;
}
}
@media screen and (min-width: 891px) {
.facility-body .input_wrap label {
width: 70px;
flex: 0 0 auto;
}
.facility-body .input_wrap:nth-of-type(1) label,
.facility-body .input_wrap:nth-of-type(3) label {
text-align: left;
}
.table-summary {
table-layout: fixed;
}
.col-test-name {
width: 15%;
}
.col-select {
width: 5%;
}
.col-score {
width: 10%;
}
.col-standard {
width: 5%;
}
.col-predict {
width: 5%;
}
.col-pdf {
width: 5%;
}
}
@media screen and (max-width: 890px) {
.facility-body .input_wrap {
flex-flow: column;
align-items: flex-start;
padding: 0;
}
.facility-body .input_wrap label {
text-align: left;
padding-right: 0;
font-size: 16px;
}
.facility-body input {
font-size: 18px;
}
.facility-body .form-wrap .flex-row {
flex-flow: column;
gap: 0px;
}
.facility-body .flex-row.flex-between .select-wrap {
flex-flow: column;
gap: 16px;
}
.facility-body .table-summary {
white-space: nowrap;
}
}
@media screen and (max-width: 768px) {
.facility-body .facility-title {
margin-bottom: 40px;
}
.facility-body {
padding: 40px 20px;
}
.facility-body .summary-stats {
flex-flow: column;
}
.facility-body .stat-box {
min-height: auto;
}
.stat-box + .stat-box {
border-top: 1px solid #ddd;
border-left: 0;
}
.facility-body .stat-box .sub {
position: initial;
margin-top: 4px;
}
.facility-body .predict-score .label {
transform: translateY(-6px);
}
.facility-body .alert-btnbox {
font-size: 14px;
line-height: 16px;
gap: 16px;
padding: 20px;
border-radius: 12px;
}
}
@media screen and (max-width: 620px) {
.student_service .top p.text-sub {
font-size: 15px;
}
}
@media screen and (max-width: 480px) {
.facility-body .text-box {
width: 100%;
min-height: auto;
margin: 20px auto 40px;
padding: 20px 20px;
border: 1px solid var(--color-gray-200);
border-radius: 12px;
}
.facility-body .alert-box {
width: 100%;
min-height: auto;
margin: 20px auto 40px;
padding: 20px 20px;
border-radius: 12px;
font-size: 14px;
}
.facility-body .text-box ul li {
font-size: 14px;
}
.facility-body .alert-btnbox {
flex-flow: column;
}
.facility-body .alert-btnbox .alert-btn {
width: 100%;
padding: 8px 20px;
}
}
/* Lib Choices Custom */
.choices {
position: relative;
overflow: hidden;
margin-bottom: 24px;
font-size: 16px;
width: 100%;
}
.choices__inner {
box-sizing: border-box;
width: 100%;
background-color: #ebeeff;
background: #ebeeff url(../../img/ico/ico_select_arrow.png) no-repeat right 28px center / 15px 13px;
padding: 0 18px;
border: 1px solid #202a60;
border-radius: 0;
font-size: 18px;
height: 55px;
line-height: 55px;
}
.choices[data-type*="select-one"] .choices__inner {
padding-bottom: 0;
}
.choices[data-type*="select-one"]::after {
display: none;
}
.choices__list--single {
padding: 0;
}
.is-open .choices__inner {
border-radius: 0;
}
.is-focused .choices__inner,
.is-open .choices__inner {
border-color: #202a60;
}
.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
border-color: #202a60;
}
.is-active.choices__list--dropdown,
.is-active.choices__list[aria-expanded] {
display: block;
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
width: 100%;
background-color: #ebeeff;
border: 1px solid #202a60;
border-radius: 0;
box-sizing: border-box;
}
.choices__item {
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
font-size: 18px;
padding: 0 18px;
height: 45px;
line-height: 45px;
}
.choices__item + .choices__item {
border-top: 1px solid rgba(32, 42, 96, 0.25);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background-color: rgba(32, 42, 96, 0.85);
color: #ffffff;
}