@font-face {
    font-family: 'The Jamsil 1';
    src: url('/assets/fonts/The_Jamsil/TheJamsil1Thin.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'The Jamsil 2';
    src: url('/assets/fonts/The_Jamsil/TheJamsil2Light.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'The Jamsil 3';
    src: url('/assets/fonts/The_Jamsil/TheJamsil3Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'The Jamsil 4';
    src: url('/assets/fonts/The_Jamsil/TheJamsil4Medium.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'The Jamsil 5';
    src: url('/assets/fonts/The_Jamsil/TheJamsil5Bold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'The Jamsil 6';
    src: url('/assets/fonts/The_Jamsil/TheJamsil6ExtraBold.woff2') format('woff2');
    font-display: swap;
}

.main {
    width: 100%;
}

.main .main_visual {
    display: flex;
    width: 100%;
    height: 864px;
    background-image: url("/pages/kjca/img/main_top_image.jpg");
    padding: 255px 0 0 310px;
    flex-direction: column;
    box-sizing: border-box;
    gap: 5px;
}

.main .main_visual h3,
.main .main_visual h2,
.main .main_visual p,
.main .main_visual span {
    letter-spacing: 0px;
    color: #F9F9F9;
}

.main .main_visual h3 {
    font: normal normal 300 26px/29px "The Jamsil 2";
}

.main .main_visual h3 span {
    font: normal normal 300 26px/29px "The Jamsil 3";
}

.main .main_visual h2 {
    font: normal normal 500 96px/106px "The Jamsil 4";
}

.main .main_visual p {
    font: normal normal 500 22px/25px "The Jamsil 3";
    margin-top: 20px;
}

.main .main_visual .visual_btn {
    display: flex;
    margin-top: 65px;
    gap: 15px;
}

.main .main_visual .visual_btn li {
    width: auto;
    height: 72px;
    border-radius: 72px;
    background: #0A69DF 0% 0% no-repeat padding-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 24px 0 35px;
}

.main .main_visual .visual_btn li:first-child {
    border: 2px solid #FFFFFF;
    background-color: #ffffff00;
}

.main .main_visual .visual_btn a {
    font: normal normal 500 22px / 26px "Pretendard";
    letter-spacing: 0px;
    color: #F9F9F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.main .main_visual .visual_btn a::after {
    content: "";
    background-image: url(/assets/icon/Icon_Arrow.png);
    width: 18px;
    height: 18px;
    display: block;
}

.main .main_content1 {
    width: 100%;
    height: 1357px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 145px 0 0 0;
    box-sizing: border-box;
    gap: 10px;
}

.main .main_content2 {
    width: 100%;
    height: 1044px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 145px 0 0 0;
    box-sizing: border-box;
    gap: 10px;
}

.main .main_content2 dl {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.main .main_content2 dt {
    width: 100%;
    font: normal normal bold 28px / 31px "The Jamsil 5";
    letter-spacing: 0px;
    color: #434343;
    margin-top: 50px;
}

.main .main_content2 ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.main .main_content2 a {
    position: relative;
    width: 413px;
    height: 344px;
    display: flex;
}

.main .main_content2 a .data {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 2;
    padding: 200px 34px 0 34px;
    position: relative;
    box-sizing: border-box;
    justify-content: flex-start;
}

.main .main_content2 a .category_list {
    display: flex;
    top: 15px;
    left: 20px;
    flex-direction: row;
    position: absolute;
}

.main .main_content2 a .recommended,
.main .main_content2 a .category {
    width: 60px;
    height: 31px;
    border-radius: 30px;
    background-color: #19a5d9;
    color: #ffffff;
    font: normal normal 500 18px/21px "Pretendard";
    display: flex;
    align-items: center;
    justify-content: center;
}

.main .main_content2 a .instructor {
    font: normal normal 300 18px/21px "Pretendard";
    letter-spacing: 0px;
    color: #E5E5E5;
}

.main .main_content2 a .lecturer_name {
    font: normal normal 500 30px/45px "The Jamsil 4";
    letter-spacing: 0px;
    color: #F9F9F9;
}

.main .main_content2 a .recommended {
    background-color: #e217c7;
}

.main .main_content2 a img {
    position: absolute;
}


.main .main_content3 {
    width: 100%;
    height: 420px;
    background-color: #0A69DF;
    position: relative;
}

.main .main_content3 .main_content3_wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    padding-left: 330px;
    flex-direction: column;
    box-sizing: border-box;
    justify-content: center;
    z-index: 1;
    padding-top: 40px;
}

.main .main_content3 h3 {
    font: normal normal 300 26px/29px "The Jamsil 2";
    letter-spacing: 0px;
    color: #F9F9F9;
}

.main .main_content3 h2 {
    font: normal normal bold 62px/69px "The Jamsil 5";
    letter-spacing: 0px;
    color: #FFFF00;
    margin-top: 13px;
}

.main .main_content3 h2 span {
    font: normal normal 300 62px/69px "The Jamsil 2";
    letter-spacing: 0px;
    color: #F9F9F9;
}

.main .main_content3 p {
    font: normal normal 300 22px/26px "Pretendard";
    letter-spacing: 0px;
    color: #F9F9F9;
    margin-top: 29px;
}

.main .main_content3 a {
    font: normal normal 300 23px / 28px Pretendard;
    letter-spacing: 0px;
    color: #F9F9F9;
    margin-top: 36px;
    width: 311px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #F9F9F9;
    padding: 0 40px;
    box-sizing: border-box;
}

.main .main_content3 a::after {
    content: "";
    background-image: url(/pages/kjca/img/icon_arrow.svg);
    width: 28px;
    height: 28px;
    display: block;
}

.main .main_content3 img {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}

.main .main_content4 {
    width: 100%;
    height: 821px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 146px;
    box-sizing: border-box;
    gap: 13px;
}

.main .main_content4 .main_reviews {
    margin-top: 50px;
    width: 100%;
    height: 337px;
    display: flex;
    background: #F8F8F8 0% 0% no-repeat padding-box;
}

.main .main_content4 .main_reviews ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
    overflow: hidden;
}

.main .main_content4 .main_reviews li {
    min-width: 434px;
    height: 198px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 25px #00000008;
    border-radius: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
    gap: 20px;
}

.main .main_content4 .main_reviews li .face_wrap {
    height: 110px;
    width: 110px;
    position: relative;
}

.main .main_content4 .main_reviews li .face_wrap img {
    position: relative;
    z-index: 1;
}

.main .main_content4 .main_reviews li .face_wrap .bg {
    height: 85px;
    width: 85px;
    border-radius: 100%;
    background: #FFF5EE 0% 0% no-repeat padding-box;
    position: absolute;
    bottom: 0;
    left: 5px;
}

.main .main_content4 .main_reviews li .data_wrap {
    display: flex;
    flex-direction: column;
}

.main .main_content4 .main_reviews li .info_wrap {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-end;
}

.main .main_content4 .main_reviews li .name {
    font: normal normal bold 16px/19px "Pretendard";
    letter-spacing: 0px;
    color: #434343;
}

.main .main_content4 .main_reviews li .id {
    font: normal normal 500 13px/15px "Pretendard";
    letter-spacing: 0px;
    color: #8B8B8B;
}

.main .main_content4 .main_reviews li .certificate {
    font: normal normal 500 13px/15px "Pretendard";
    letter-spacing: 0px;
    color: #233B8F;
    margin-top: 8px;
}

.main .main_content4 .main_reviews li .review {
    font: normal normal 500 15px/23px "Pretendard";
    letter-spacing: 0px;
    color: #434343;
    margin-top: 18px;
}

.main .main_content5 {
    width: 100%;
    height: 358px;
    background: transparent linear-gradient(101deg, #328FE1 0%, #483FA2 100%) 0% 0% no-repeat padding-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main .main_content5 h3 {
    font: normal normal 800 38px/45px "Pretendard";
    letter-spacing: 0px;
    color: #F9F9F9;
}

.main .main_content5 p {
    font: normal normal 500 26px/31px "Pretendard";
    letter-spacing: 0px;
    color: #F9F9F9;
    margin-top: 10px;
}

.main .main_content5 .main_content5_btn {
    display: flex;
    margin-top: 50px;
    gap: 20px;
}

.main .main_content5 .main_content5_btn li {
    width: 420px;
    height: 80px;
    background: #F9F9F9 0% 0% no-repeat padding-box;
    border: 2px solid #F9F9F9;
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal 600 24px/29px "Pretendard";
    letter-spacing: 0px;
    color: #0A69DF;
}

.main .main_content5 .main_content5_btn li:first-child {
    background: #F9F9F900 0% 0% no-repeat padding-box;
    color: #F9F9F9;
}

.main .main_content5 .main_content5_btn a {
    text-decoration: none;
    color: inherit;
}

.main .main_content1 h3,
.main .main_content2 h3,
.main .main_content4 h3 {
    font: normal normal 800 38px/45px "Pretendard";
    letter-spacing: 0px;
    color: #0A69DF;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main .main_content1 h3::after,
.main .main_content2 h3::after,
.main .main_content4 h3::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #F2F7FE 0% 0% no-repeat padding-box;
    top: -10px;
    left: -15px;
    z-index: -1;
}

.main .main_content1 p,
.main .main_content2 p,
.main .main_content4 p {
    font: normal normal 500 26px/31px "Pretendard";
    letter-spacing: 0px;
    color: #252525;
}

.main .main_content1 ul {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    gap: 20px;
}
.main .main_content1 li {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.main .main_content1 a {
    display: flex;
    width: auto;
    height: auto;
}


@media screen and (max-width: 1350px) {
	.main .main_visual {
		display: flex
	;
		width: 100%;
		height: 864px;
		background-image: url(/pages/kjca/img/main_top_image.jpg);
		padding: 240px 104px;
		flex-direction: column;
		box-sizing: border-box;
		gap: 5px;
	}
}


@media screen and (max-width: 1200px) {
	.main .main_visual {
		display: flex
	;
		width: 100%;
		height: 864px;
		background-image: url(/pages/kjca/img/main_top_image.jpg);
		padding: 240px 20px;
		flex-direction: column;
		box-sizing: border-box;
		gap: 5px;
	}

	.main .main_content5 .main_content5_btn {
		display: inline-block;
	}

	.main .main_content5 .main_content5_btn li {
		margin-top: 10px;
	}

	.main .main_content5 {
		height: 420px;
		padding: 0 20px;
	}

	
}


@media screen and (max-width: 600px) {
	.main .main_visual .visual_btn {     display: inline-block;}
	.main .main_visual .visual_btn li {
		margin-top: 10px; 
	}
}