@charset "UTF-8";

.img-mask-services {
    display: inline-block;
    line-height: 0;
    overflow: hidden;
    border-radius: 10px;
}
.img-mask-services img {
    padding: 0;
    transform: scale(1);
    transition: var(--transition-300e);
}
.img-mask-services img:hover {
    transform: scale(1.1);
}
.inner-service-details {
    margin: clamp(0.938rem, 0.75rem + 0.94vw, 1.875rem) auto clamp(1.25rem, 1.125rem + 0.63vw, 1.875rem);
    padding-bottom: clamp(0rem, -0.25rem + 1.25vw, 1.25rem);
    width: clamp(17.188rem, -2.125rem + 20vw, 21.875rem);
}
.inner-service-details h3 {
    position: relative;
    font-family: var(--font-family-02);
    font-size: clamp(0.813rem, 0.725rem + 0.44vw, 1.25rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
    text-align: center;
    padding: clamp(0rem, -0.063rem + 0.31vw, 0.313rem) 0 10px;
    cursor: pointer;
    background-color: var(--white-02);
	border: 1px solid transparent;
    transition: var(--transition-300e);
}
.inner-service-details h3::before {
    content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: 1px solid var(--main-01);    
}
.inner-service-details h3::after {
    content: '';
	position: absolute;
	top: 50%;
    left: clamp(15.625rem, -2.4rem + 18.67vw, 20rem);
	transform: translateY(-50%);
	width: clamp(2.188rem, 1.875rem + 1.56vw, 3.75rem);
	height: 1px;
	background-color: var(--main-01);
}
.inner-service-details h3:hover {
    background-color: var(--yellow-01);
    transition: var(--transition-300e);
}
#inner-personal {
    padding: 0 clamp(0.938rem, -0.813rem + 8.75vw, 9.688rem) clamp(1.563rem, 0.938rem + 3.13vw, 4.688rem);
    text-align: center;
}
#inner-personal-top h1 {
    position: absolute;
    padding-top: 50px;
    font-family: var(--font-family-02);
    font-size: clamp(1.125rem, 0.912rem + 1.06vw, 2.188rem);
    font-weight: var(--font-weight-7);
    color: var(--base);
    text-shadow: 1px 2px 0px #00000029;
    z-index: 1;
}
#inner-personal h2 {
    font-family: var(--font-family-02);
    font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
    padding: clamp(2.188rem, 1.063rem + 5.63vw, 7.813rem) 0 clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
}
#inner-personal .inner-personal-text {
    width: 80%;
    margin: 0 auto;
    text-align: left;
    text-indent: 1em;
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
    font-weight: var(--font-weight-5);
    color: var(--reg-text);
}
#inner-personal .inner-personal-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(17.188rem, 16.625rem + 2.81vw, 20rem), 1fr));
    grid-gap: 1rem;
    margin-top: clamp(1.875rem, 1rem + 4.38vw, 6.25rem);
}
#inner-personal .inner-personal-box .inner-personal-service .inner-personal-img {
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
}
#inner-union {
    padding: 0 clamp(0.938rem, -0.813rem + 8.75vw, 9.688rem) clamp(1.563rem, 0.938rem + 3.13vw, 4.688rem);
    text-align: center;
}
#inner-union-top h1 {
    position: absolute;
    padding-top: 50px;
    font-family: var(--font-family-02);
    font-size: clamp(1.125rem, 0.912rem + 1.06vw, 2.188rem);
    font-weight: var(--font-weight-7);
    color: var(--base);
    text-shadow: 1px 2px 0px #00000029;
    z-index: 1
}
#inner-union h2 {
    font-family: var(--font-family-02);
    font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
    padding: clamp(2.188rem, 1.063rem + 5.63vw, 7.813rem) 0 clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
}
#inner-union .inner-union-text {
    width: 80%;
    margin: 0 auto;
    text-align: left;
    text-indent: 1em;
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
    font-weight: var(--font-weight-5);
    color: var(--reg-text);
}
#inner-union .inner-union-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(17.188rem, 16.625rem + 2.81vw, 20rem), 1fr));
    grid-gap: 1rem;
    margin-top: clamp(1.875rem, 1rem + 4.38vw, 6.25rem);
}
#inner-union .inner-union-box .inner-union-service .inner-union-img {
    width: 100%;
    height: 60%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
#inner-company {
    padding: 0 clamp(0.938rem, -0.813rem + 8.75vw, 9.688rem) clamp(1.563rem, 0.938rem + 3.13vw, 4.688rem);
    text-align: center;
}
#inner-company-top h1 {
    position: absolute;
    padding-top: 50px;
    font-family: var(--font-family-02);
    font-size: clamp(1.125rem, 0.912rem + 1.06vw, 2.188rem);
    font-weight: var(--font-weight-7);
    color: var(--base);
    text-shadow: 1px 2px 0px #00000029;
    z-index: 1;
}
#inner-company h2 {
    font-family: var(--font-family-02);
    font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
    padding: clamp(2.188rem, 1.063rem + 5.63vw, 7.813rem) 0 clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
}
#inner-company .inner-company-text {
    width: 80%;
    margin: 0 auto;
    text-align: left;
    text-indent: 1em;
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
    font-weight: var(--font-weight-5);
    color: var(--reg-text);
}
#inner-company .inner-company-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(17.188rem, 16.625rem + 2.81vw, 20rem), 1fr));
    grid-gap: 1rem;
    margin-top: clamp(1.875rem, 1rem + 4.38vw, 6.25rem);
}
#inner-company .inner-company-box .inner-company-service .inner-company-img {
    width: 100%;
    height: 60%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
#service-inner-top h1 {
    position: absolute;
    padding-top: 50px;
    font-family: var(--font-family-02);
    font-size: clamp(1.125rem, 0.912rem + 1.06vw, 2.188rem);
    font-weight: var(--font-weight-7);
    color: var(--base);
    text-shadow: 1px 2px 0px #00000029;
    z-index: 1;
}
#service-inner-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: clamp(2.188rem, 1.375rem + 4.06vw, 6.25rem) clamp(0.625rem, -2.375rem + 15vw, 15.625rem) clamp(3.125rem, 2.063rem + 5.31vw, 8.438rem);
}
.overview {
    width: 70%;
}
.overview .service-content-img {
    width: clamp(17.813rem, 14.5rem + 16.56vw, 34.375rem);
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 10px;
}
.overview .service-inner-sub h2 {
    font-family: var(--font-family-02);
    font-size: clamp(0.813rem, 0.675rem + 0.69vw, 1.5rem);
    font-weight: var(--font-weight-6);
    color: var(--main-01);
    padding: clamp(0.938rem, -0.024rem + 1.84vw, 2.188rem) 0 clamp(0.938rem, 0.457rem + 0.92vw, 1.563rem) 0;
}
.overview .content-head .content-name h2 {
    margin: clamp(0rem, -1.443rem + 2.76vw, 1.875rem) 0 clamp(0.938rem, 0.216rem + 1.38vw, 1.875rem);
    font-family: var(--font-family-02);
    font-size: clamp(0.813rem, 0.675rem + 0.69vw, 1.5rem);
    font-weight: var(--font-weight-6);
    color: var(--main-01);
} 
.overview .option h3 {
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
    font-weight: var(--font-weight-4);
    color: var(--reg-text);
}
.overview .content-head .content-name p {
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
    font-weight: var(--font-weight-5);
    color: var(--reg-text);
} 
.overview .option .option-content {
    display: flex;
    align-items: center;
}
.overview .option img {
    width: 15px;
    margin-right: 10px;
}
.overview .option-strong {
    text-decoration: underline;
}
.overview span {
    text-decoration: underline;
}
.overview hr {
    margin-top: 40px;
    height: 1px;
    background-color: rgba(236, 226, 229, 0.5);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}
.overview p {
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
    font-weight: var(--font-weight-5);
    color: var(--reg-text);
}
.enroll {
    width: 300px;
    padding: 0 clamp(0.938rem, 0.75rem + 0.94vw, 1.875rem) clamp(0.938rem, 0.75rem + 0.94vw, 1.875rem);
    margin-left: 30px;
    border-radius: 11px;
    box-shadow: 0px 20px 40px 0px rgb(11 2 55 / 8%);
} 
.enroll hr {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
} 
.enroll .enroll-sub p {
    font-family: var(--font-family-02);
    font-size: clamp(0.875rem, 0.8rem + 0.38vw, 1.25rem);
    font-weight: var(--font-weight-7);
    color: var(--reg-text);
}
.enroll .enroll-title {
    color: var(--reg-text);
}
.enroll p {
    font-family: var(--font-family-02);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-4);
    color: var(--reg-text);
    margin: clamp(0.5rem, 0.163rem + 0.65vw, 0.938rem) 0;
}
.enroll .enroll-contents {
    font-family: var(--font-family-02);
    font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
    font-weight: var(--font-weight-5);
    color: var(--reg-text);
}
.enroll .enroll-contents:hover {
    color: var(--yellow-01);
}
.enroll .enroll-content {
    padding: 0 0 0 40px;
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
    font-weight: var(--font-weight-4);
    color: var(--reg-text);
}
.enroll .enroll-content:hover {
    color: var(--yellow-01);
}
.enroll img {
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    color: var(--light-blue_02);
    font-weight: var(--font-weight-5);
    margin-right: 18px;
} 
.enroll .enroll-btn {
    padding: 25px 0 20px 0;
    margin: clamp(0rem, -2.405rem + 4.61vw, 3.125rem) auto 0;
    text-align: center;
} 
.enroll .enroll-btn a {
    color: var(--white);
    background: var(--main-01);
    font-family: var(--font-family-02);
    font-size: clamp(0.813rem, 0.775rem + 0.19vw, 1rem);
    font-weight: var(--font-weight-5);
    padding: clamp(0.5rem, 0.438rem + 0.31vw, 0.813rem) clamp(2.188rem, 2.063rem + 0.63vw, 2.813rem);
    border-radius: 10px;
} 
.enroll .enroll-btn a:hover {
    background-color: var(--yellow-01);
    color: var(--main-01);
    transition: var(--transition-300e);
}