/* 공식과 css 연결되어 있음 주의!! */
.width100per{width: 100%;}
.kdcComWrap *{font-family: 'Noto Sans KR' !important;}
section{width: 100%; position: relative;}
.kdcComWrap img{max-width: 100%;}
.kdcComWrap a{color: inherit;}

.kdcComWrap{width: 90%; margin:0 auto; max-width: 1020px;}
.secMainTit{
	font-size: 22px; font-weight: 700; margin-bottom:20px; color: #fff; line-height: 28px;
	word-break: keep-all;
}
.secMainTit--black{color: #000;}

/* 수강등록 fixed */
.kdcSubmitBtn--fx{
	background-color: #0080ff;
	color: #fff;
	border-radius: 50px;
	width: 108px; height: 44px; line-height: 44px; 
	font-size: 16px;
	text-align: center;
	position: fixed; right: 1.25%;	top: calc(90% - 50px); z-index: 10000;
	box-shadow:0px 3px 1px 0px rgb(0 0 0 / 12%), 0px 1px 2px 0px rgb(0 0 0 / 30%);
}
@media all and (min-width:768px){
	.kdcSubmitBtn--fx{
		width: 110px;
		top: calc(92% - 52px);
	}
}
@media all and (min-width:1080px){
	.kdcSubmitBtn--fx{
		font-size: 18px; 
		width: 128px;
		height: 51px; line-height: 51px;
		top: calc(91.5% - 60px);
	}
}
/* ------------------- */

/* 과정별 bg css 적용 */
.sec2_interactive,.sec4_interactive,
.sec6_interactive .stepBox_STEP::before {background-color: #FFE100;}
.sec2_dbsql,.sec4_dbsql,
.sec6_dbsql .stepBox_STEP::before {background-color: #0049BB;}
.sec2_webstyling,.sec4_webstyling,
.sec6_webstyling .stepBox_STEP::before {background-color: #FF6511;}
.sec2_sidescript,.sec4_sidescript,
.sec6_sidescript .stepBox_STEP::before {background-color: #7F51DB;}
.sec2_sketchup,.sec4_sketchup,
.sec6_skecthup .stepBox_STEP::before {background-color: #007DB3;}
.sec2_webpublisher,.sec4_webpublisher,
.sec6_webpublisher .stepBox_STEP::before {background-color: #FF5638;}
.sec2_python,.sec4_python,
.sec6_python .stepBox_STEP::before {background-color: #FFC837;}
.sec2_java,.sec4_java,
.sec6_java .stepBox_STEP::before {background-color: #15A0C4;}
.sec2_react,.sec4_react,
.sec6_react .stepBox_STEP::before {background-color: #0CB7E6;}
.sec2_GPT,.sec4_GPT,
.sec6_GPT .stepBox_STEP::before {background-color: #40B898;}
.sec2_openAPI,.sec4_openAPI,
.sec6_openAPI .stepBox_STEP::before {background-color: #F3E5AB;}
.sec2_GPT_SB,.sec4_GPT_SB,
.sec6_GPT_SB .stepBox_STEP::before {background-color: #8CF268;}
.sec2_GPT_HC,.sec4_GPT_HC,
.sec6_GPT_HC .stepBox_STEP::before {background-color: #FF8C66;}
.sec2_AI_SYS,.sec4_AI_SYS,
.sec6_AI_SYS .stepBox_STEP::before {background-color: #3DAEF5;}
.sec2_AI_SVC,.sec4_AI_SVC,
.sec6_AI_SVC .stepBox_STEP::before {background-color: #00FFCC;}


/* sec1 */ /* 동영상배너부분 */
.sec1 { background-color: #000;}
.sec1Video{height: 45vh;}
.sec1_GPT_SB .sec1Video,
.sec1_GPT_HC .sec1Video,
.sec1_AI_SYS .sec1Video,
.sec1_AI_SVC .sec1Video{height: 34vh;}
.sec1Video > video {width: 100%; height:100%; object-fit: cover;}
.sec1Img {
	width: 100%; position: absolute; top: 50%; transform:translateY(-50%); display: flex; justify-content: space-around;
}
.sec1Img > img {width: 65%; max-width:380px;}
.sec1_GPT_HC .sec1Img > img{width:70%; max-width: 480px;}


/* ------------------------------------------------------------ */

/* sec2 */
.sec2 {padding: 40px 0; text-align: center;}
.sec2SubTit{
	display: inline-block; color: #fff; border: 1px solid #ffffff; border-radius: 6px;  font-size: 15px; font-weight: 500;
	width:170px; height: 32px; line-height: 32px; margin-bottom: 20px;
}
.sec2SubTit-black{color: #000; border:1px solid black;}

.sec2ConWrap{
	font-family: 'Noto Sans KR';
	display: flex; flex-direction: column; row-gap: 30px;
	width: 100%; max-width: 420px; 
	margin: 0 auto; margin-top: 30px;
}
.sec2ConBox{
	background-color: #fff; border-radius: 10px;
	padding: 12px 12px 15px 12px; flex: 1;
}
.sec2ConTit{
	padding-bottom: 8px;
	border-bottom: 1px solid #707070;
	font-size: 18px; font-weight: 700; color: #000; text-align: left;
}
.sec2ConTxtInfoG{
	display: flex; align-items: center; justify-content: space-between;
	flex-direction: column; row-gap: 40px;
}
.sec2ConTxtBox{display: flex; align-items: flex-start;}
.sec2ConTxtBox{margin-top: 12px;}
.sec2ConTxtBox--courInfo{gap: 10px;}
.sec2ConTxtBox--costInfo:first-child{margin-top: 20px; margin-bottom: 15px;}
.sec2ConTxtBox--costInfo{justify-content: space-between;}
.sec2ConTxt_tit{
	font-size: 12px; font-weight: 600; text-align: center; color: #fff; 
	letter-spacing: -0.5px;
	background-color: #000; border-radius: 50px;
	width: 62px; height: 24px; line-height: 24px; 
}
.sec2ConTxtBox:last-child .sec2ConTxt_tit{background-color: #0080ff !important;}
.sec2ConTxt_txt{
	font-size: 14px; font-weight: 600; line-height: 20px; color: #000;
	flex: 1; text-align: left;
}
.sec2ConTxt_fCost{font-size: 16px; font-weight: 700; color: #999;}
.sec2ConTxt_dCost{font-size: 20px; font-weight: 700; color: #000;}
.sec2ConInfo{
	background-color: #0080ff; border-radius: 5px; 
	width: 100%; min-height: 32px; line-height: 18px; text-align: center;
	color: #fff; font-size: 13px; font-weight: 600; 
	padding: 10px 5px; box-sizing: border-box; word-break: keep-all;
}
/* ------------------------------------------------------------ */

/* sec3 *//* 본 과정을 통해 무엇을 배울 수 있을까요? */
.sec3 {padding: 80px 0; background-color: #FEFBE1; text-align: center;}
.sec3TitImg {width: 75%; max-width: 380px; margin: 0 auto; margin-bottom: 60px; }
.sec3MainImgGroup{ 
	width: 80%; max-width: 300px; margin: 0 auto;
	display: flex; flex-direction: column; row-gap: 20px;
}
.sec3MainImg > img {background-color: #000; box-shadow: 2px 2px 12px 5px rgba(0, 0, 0, 15%); border-radius: 15px; }
/* ------------------------------------------------------------ */

/* sec4 *//* 핸드폰사진 */
.sec4 {padding-top: 80px;}
.sec4MainImg{display: flex;}

/* ------------------------------------------------------------ */

/* sec5 *//* 본 과정에서는 이런 학습목표들을 얻을 수 있어요 */
.sec5 {padding: 50px 0 50px 0;}
.sec5 .kdcComWrap{position: relative; display: flex; align-items: center; justify-content: center;}
.sec5TxtImg {width: 80%; max-width: 250px;}
.sec5TxtImg img{width: 100%;}
.sec5ConImg{
	position: absolute;	top: -50px;	right: 0%; z-index: 10;
	width: 45%; display: none;
}
.sec5ConImg img{filter: drop-shadow(4px 5px 5px rgb(0 0 0 / 10%));}
/* ------------------------------------------------------------ */

/* sec5-1 *//* GOAL */
.sec5-1 {padding: 0 0 55px; background-color: #fff;}
.sec5-1 .goalBoxGroup {width: 100%; max-width: 380px; margin: 0 auto; display: grid;	grid-template-columns: repeat(1, 1fr); row-gap: 20px;}
.sec5-1 .goalBox {
	width: 100%; border-radius: 20px; border: 1px solid #ededed; box-shadow: 2px 2px 16px 3px rgba(0, 0, 0, 10%); overflow: hidden; margin: 0 auto;
}
.sec5-1 .goalImg {overflow: hidden; height: 180px;}
.sec5-1 .goalImg > img {width: 100%; height: 100%; object-fit: cover;}
.sec5-1 .goalTxt {padding: 0 15px; padding-bottom: 20px; box-sizing: border-box; background-color: #fff;} 
.sec5-1 .goalTxt_h1 {font-size: 18px; color: #2EA2FF; font-weight: 700; padding: 10px 0; border-bottom: 1px solid #CBCBCB;}
.sec5-1 .goalTxt_p {font-size: 16px; line-height: 21px; color: #4A4A4A; font-weight: 400; padding-top: 9.5px; word-break: keep-all;}
/* ------------------------------------------------------------ */

/* sec5-2 */
.sec5-2{background-color: #F7F8FA; padding:55px 0;}
.sec5-2 .mainImgBox {
	width: 70%; max-width: 220px; text-align: center;
	margin: 0 auto; margin-bottom: 52px; 
}
.sec5-2 .contTxtImgBoxGroup{
	display: grid; grid-template-columns: repeat(1, 1fr); gap: 50px;
	margin:0 auto; width: 100%; max-width: 380px;
}
.sec5-2 .contImgBox {
	width: 100%; height: auto; max-height: 329px;
	border-radius: 10px; overflow: hidden;
	margin: 0 auto; margin-bottom: 15px; 
}
.sec5-2 .contImgBox img{width: 100%; height: 100%; object-fit: cover;}
.sec5-2 .contTxtBox { width: 100%; word-break: keep-all; text-align: center;} 
.sec5-2 .contTxtBox_h3 {
	font-size: 16px; font-weight: 600; 
	color: #000; line-height: 18px; margin-bottom: 10px;
}
.sec5-2 .contTxtBox_p {font-size: 14px; font-weight: 400; color: #666; line-height: 20px;}
.sec5-2 .contTxtBox_p--second span{position: relative; padding-left: 11px;}
.sec5-2 .contTxtBox_p--second span:before{content:'*'; position: absolute; left: 0px;}
/* ------------------------------------------------------------ */

/* sec6 *//* 본 과정의 핵심 실습 프로젝트 커리큘럼 확인하기 */
.sec6 {padding: 50px 0; background-color: #F3E5AB;}
.sec6TitImg {text-align: center; width: 80%; max-width: 350px; margin: 0 auto; margin-bottom: 52px;}
.sec6 .stepBoxGroup {
	width: 100%; max-width: 380px; margin: 0 auto; 
	display: grid; grid-template-columns: repeat(1, 1fr); row-gap: 20px;
}
.sec6 .stepBox {width: 100%; margin: 0 auto; background-color: #fff; padding: 15px; border-radius: 10px; box-sizing: border-box;}
.sec6 .stepBox_STEP {
	display: inline-block; 
	font-size: 18px; font-weight: 700; line-height: 18px;
	padding-left: 12px; position: relative;
}
.sec6 .stepBox_STEP::before{
	content: ''; width: 5px; height: 100%; 
	position: absolute; top: 0; left: 0; 
}
.sec6 .stepBox_tit {font-size: 16px; font-weight: 500; padding: 10px 0; border-bottom: 1px solid #CBCBCB; line-height: 22px; color: #3D3D3D;}
.sec6 .stepBox_txt {padding-top:10px; line-height: 18px; font-size: 14px; color: #545454; word-break: keep-all;}
.sec6 .stepBox_txt span{text-indent: -10px; padding-left: 10px; display: block;}
.sec6 .stepBox_txt span:not(:last-child){margin-bottom: 2px;}
.sec6 .sec6BtnBox_aTag {display: block; text-align: center; width: 80%; max-width: 200px; margin: 0 auto;}
/* ------------------------------------------------------------ */

/* sec7 *//* Book */
.sec7 {background-color: #5CB6FF;}
.sec7ImgBox {width: 100%; text-align: center;}
.sec7ImgBox > img {width: 100%;}

/* book animation */
.bookAction{animation: bookAction 1.2s infinite ease-in-out alternate ;}
@keyframes bookAction{
	0%{transform: translateY(0px);}
	100%{transform: translateY(-20px);}
}
/* ------------------------------------------------------------ */

/* sec8 *//* 강사소개 */
.sec8 {padding: 36px 0; background-color: #F7F8FA;}
.sec8 .kdcComWrap {
	width: 90%; max-width: unset;
	display: flex; justify-content: center; align-items: center;
	--sec8KdcComWrap_rMar: calc(calc(100vw - 1020px) / 2);
}
.sec8ImgBox {display: none;	width: 30%; max-width: 300px;}
.sec8ImgBox > img {width: 100%; height: 100%; object-fit: cover; 	}
.sec8TxtBox{
	width: 100%; min-height: 100px; position: relative;
	background-color: #fff; padding: 20px; box-sizing: border-box; border-radius: 10px; box-shadow: 2px 2px 16px 3px rgba(0,0,0,10%);
}

/* 에디터 css 텍스트 설정 */
.sec8TxtBox {font-size: 18px; line-height: 1.7; color: #656565;}

/* 텍스트 크기 클래스 */
.sec8TxtBox .text-tiny {font-size: 0.85em;}
.sec8TxtBox .text-small {font-size: 1em;}
.sec8TxtBox .text-big {font-size: 1.4em; color:#161616;}
.sec8TxtBox .text-huge {font-size: 1.8em; color:#161616;}

/* 제목 태그 */
.sec8TxtBox h2,
.sec8TxtBox h3,
.sec8TxtBox h4 {font-weight: bold; margin: 0 0 0.5em; line-height: 1.3; color:#161616;}

.sec8TxtBox h2 { font-size: 2.5em; }
.sec8TxtBox h3 { font-size: 2em; }
.sec8TxtBox h4 { font-size: 1.5em; }

/* 📱 반응형 폰트 조정 */
@media (max-width: 1024px) {
  .sec8TxtBox {font-size: 17px;}
  .sec8TxtBox .text-big {font-size: 1.3em;}
  .sec8TxtBox .text-huge {font-size: 1.6em;}
  .sec8TxtBox h2 { font-size: 2.2em; }
  .sec8TxtBox h3 { font-size: 1.8em; }
}

@media (max-width: 960px) {
  .sec8TxtBox {font-size: 16px;}
  .sec8TxtBox .text-big {font-size: 1.2em;}
  .sec8TxtBox .text-huge {font-size: 1.5em;}
  .sec8TxtBox h2 { font-size: 2em; }
  .sec8TxtBox h3 { font-size: 1.6em; }
}

@media (max-width: 768px) {
  .sec8TxtBox {font-size: 14px; line-height: 1.5;}
  .sec8TxtBox .text-big {font-size: 1.1em;}
  .sec8TxtBox .text-huge {font-size: 1.4em;}
  .sec8TxtBox h2 { font-size: 1.8em; }
  .sec8TxtBox h3 { font-size: 1.5em; }
}
/* ------------------------------------------------------------ */

/* sec9 *//* 슬랙설명 */
.sec9 {padding: 55px 0; text-align: center; background-color: #F4EDE3;}
.sec9TitImg-main{width: 80%; max-width: 380px; margin: 0 auto;}
.sec9Txt-top{font-size: 16px; font-weight: 700; padding-top: 20px; padding-bottom: 40px; line-height: 1.5;}
.sec9 .slackimgBox {width: 100%;}
.sec9TitImg-sub{width: 88%; max-width: 380px; margin: 0 auto; padding: 30px 0;}
.sec9Txt-checkBox{
	max-width: 500px; margin: 0 auto; 
	display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap:15px; 
}
.sec9Txt-check {
	width: 100%; box-sizing: border-box;
	padding: 13px 15px 11px; padding-left: 12%;
	background-color: #fff; border-radius: 7px;
	position: relative;
	font-size: 14px; font-weight: 500; line-height: 17px; text-align: left; word-break: keep-all;
}
.sec9Txt-check::after{
	content: '';
	position: absolute; top: 50%;	left: 0; transform: translateY(-50%);
	width: 12%;	height: 100%;
	background-image: url(/assets/img/sub/course_kdc/sec9/sec9_img4.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 35%;
}
.sec9Txt-check--bold {font-weight: 700;}
.sec9Txt-bott {padding-top: 50px; margin:0 auto; font-size: 14px; font-weight: 500; color: #6E6E6E; line-height: 20px; letter-spacing: 0.1px; word-break: keep-all;}
/* ------------------------------------------------------------ */

/* sec10 *//* 그린의 K-디지털 기초역량훈련을 이수한다면? */
.sec10 {padding: 55px 0 ; background-color: #1894F8; text-align: center; line-height: 1.5;}
.sec10TitImg{width: 100%; max-width: 400px; margin: 0 auto;	margin-bottom: 52px;}
.sec10 .compleBoxGroup {
	max-width: 500px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(1, 1fr); grid-row-gap: 15px;
}
.sec10 .compleBox {
	background-color: #fff; height: auto; min-height:fit-content; box-sizing: border-box; border-radius: 7px; box-shadow:2px 2px 16px 3px rgba(0,0,0,10%);
	display: flex; flex-direction: row; padding: 8px 0;
}
.sec10 .compleBox_img {
	width: 22%; max-width: 80px; padding: 0 5px 0 5px; box-sizing: border-box;     
	display: flex; align-items: center; justify-content: center;
}
.sec10 .compleBox_titx{
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 1;
	border-left: 1px solid #CBCBCB; padding: 0 8px; box-sizing: border-box; word-break: keep-all;
}
.sec10 .compleBox_tit {
	font-size: 14px; margin-top: 8px; line-height: normal; min-height: auto; font-weight: bold;
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
}
.sec10 .compleBox_txt {font-size: 12px; color: #6E6E6E; font-weight: 500; line-height: 16px; margin-bottom: 5px;}
.compleBox_titx span{display: inline;}
/* ------------------------------------------------------------ */

/* sec11 *//* 수강신청 어떻게 하면 될까요? */
.sec11 {padding: 55px 0; text-align: center; background-color: #FEFBE1;}
.sec11TitImg {width: 80%; max-width: 380px; margin: 0 auto;	margin-bottom: 52px; }
/* ------------------------------------------------------------ */

/* sec12 *//* 잠깐!! 내일배움카드에 단 100원이라도 남아있다면? */
.sec12 {padding: 55px 0; text-align: center; background-color: #F7F8FA; line-height: 1.5; overflow: hidden;}
.sec12 .kdcComWrap{max-width:unset; width: 100%;}
.sec12TitImg {width: 100%; max-width: 500px; min-width: 300px; margin: 0 auto; margin-bottom: 15px;}
.sec12MainTxt {font-size: 14px; font-weight: 600; line-height: 18px; color:#6B6B6B; word-break: keep-all; margin-bottom: 15px;}
.sec12 .kdcCourSl { border-radius: 15px; margin: 20px 0; background-color: #fff; box-shadow: 0 19px 38px rgba(0,0,0,0.1), 0 15px 12px rgba(0,0,0,0.1);}
.sec12 .kdcCourSlImg {
	position: relative; width: 100%; 
	border-radius: 15px 15px 0 0; overflow: hidden;
}
.sec12 .kdcCourSlImg > img {width: 100%; height: 100%; object-fit: cover;}
.sec12 .kdcCourSlTxt {padding: 5px 10px; box-sizing: border-box; text-align: left; line-height: 1.5;}
.sec12 .kdcCourSlTxt_kdt {
	display: inline-block; color: #fff; background:linear-gradient(to right, #18ABED, #3500E6); border-radius: 3px;
	margin: 6px 0 8px; padding: 0px 10px; box-sizing: border-box;
	height: 25px; line-height: 26px;
	font-size: 13px; font-weight: 600; text-align: center; 
}
.sec12 .kdcCourSlTxt_tit {
	overflow: hidden;	text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.3em; height: fit-content; min-height: 39px; font-size: 14px; font-weight: 500; 
	margin-bottom: 5px;
}
.sec12 .kdcCourSlTxt_firCost {font-size: 15px; color: #828282; text-align: right; padding-top: 10px; margin-bottom: 3px; border-top: 2px solid #CBCBCB;}
.sec12 .kdcCourSlTxt_secCostBox {display: flex; justify-content: right; align-items: center; margin-bottom: 10px;}
.sec12 .kdcCourSlTxt_secTxt {font-size: 16px; font-weight: 500; color: #2EA2FF; padding: 0 7px;}
.sec12 .kdcCourSlTxt_secCost {font-size: 16px; font-weight: 500; color: #000;}
/* ------------------------------------------------------------ */

/* sec13 *//* 하단동영상부분 */
.sec13 {background-color:#000; padding: 50px 0; overflow: hidden;}
.sec13 .video {width: 100%; margin: 0 auto; margin-bottom: 40px; padding-top: 20px; transform: scale(2);}
.sec13 .video > video {width: 100%;}
.sec13WinImg {
	width: 100%; max-width:1080px; 
	padding-top: 50px; margin: 0 auto; border-top:1px solid #afafaf;
}
.sec13WinImg > img {width: 100%; margin: 0 auto;}
/* ------------------------------------------------------------ */


@media all and (min-width:480px) {
	/* --------- 공통 --------- */
	.secMainTit{font-size: 24px; line-height: 30px;}

	/* --------- sec1 / sec2 / sec4 --------- */
	.sec1Video{height: 60vh;}
	.sec1_GPT_SB .sec1Video,
	.sec1_GPT_HC .sec1Video,
	.sec1_AI_SYS .sec1Video,
	.sec1_AI_SVC .sec1Video{height: 40vh;}

	.sec2ConBox{padding: 15px 18px 18px 18px;}
	.sec2ConTxt_tit{font-size: 13px; width: 64px;}
	.sec2ConTxt_txt{display: flex;	align-items: center; flex-wrap: wrap;}
	.sec2ConTxtBox--courInfo{gap: 12px;}

	.sec4MainImg{width: 90%; max-width: 500px; margin:0 auto;}

	/* -------- sec5-2 -------- */
	.sec5-2 .contImgBox {border-radius: 14px;}
	.sec5-2 .contTxtBox_h3{font-size: 18px;}
	.sec5-2 .contTxtBox_p{font-size: 15px; line-height: 21px;}

	/* --------- sec9 --------- */
	.sec9TitImg-main{max-width: 400px;}
	.sec9Txt-top{font-size: 18px;}
	.sec9TitImg-sub{max-width: 400px;}
	.sec9 .slackimgBox{width: 90%; max-width: 550px; margin: 0 auto;}
	.sec9Txt-check {padding-left: 14%;}
	.sec9Txt-check::after{width:14%;}

	/* --------- sec10 --------- */
	.sec10 .compleBox{padding: 12px 0;}
	.sec10 .compleBox_img{width: 34%; max-width: 86px; padding: 0 8px;}
	.sec10 .compleBox_titx{row-gap: 8px;}

	/* --------- sec11 / sec12 / sec13 --------- */
	.sec12TitImg{width: 90%;}
	.sec11TitImg{max-width: 400px;}
	.sec13 .video{transform: scale(1.8);}
}

@media all and (min-width:640px) {
	/* --------- 공통 --------- */
	.secMainTit{font-size: 28px; line-height: 34px;}

	/* --------- sec2 --------- */
	.sec2ConBox{padding: 18px 22px 22px 22px;}
	.sec2ConTit{font-size: 20px; padding-bottom: 12px;}
	.sec2ConTxt_tit{font-size: 14px; width: 74px; height: 25px; line-height: 25px; letter-spacing: unset; padding-right: unset;}
	.sec2ConTxt_txt{font-size: 15px; line-height: 23px; margin-top: 2px;}
	.sec2ConTxtBox--costInfo .sec2ConTxt_txt{margin-top: unset; line-height: 15px;}
	.sec2ConTxtBox--costInfo:first-child{margin-bottom: 25px;}
	.sec2ConTxtInfoG{row-gap: 45px;}
	.sec2ConInfo{font-size: 14px; padding: 12px 5px; border-radius: 8px;} 
	.sec2ConTxt_fCost{font-size: 20px; line-height: 17px;}
	.sec2ConTxt_dCost{font-size: 24px; line-height: 19px;}
	
	/* -------- sec5-2 -------- */
	.sec5-2 .contImgBox{border-radius: 16px;}
	.sec5-2 .contTxtBox_h3{font-size: 20px; line-height: 22px;}
	.sec5-2 .contTxtBox_p{font-size: 16px; line-height: 24px;}
	
	/* --------- sec9 --------- */
	.sec9Txt-top{font-size: 20px; line-height: 1.7;}
	.sec9Txt-checkBox{row-gap: 20px;}
	.sec9Txt-check{padding: 15px; font-size: 16px;  padding-left: 15%;}
	.sec9Txt-check::after{ width: 15%;  background-size: 30%;}

	/* --------- sec10 --------- */
	.sec10 .compleBoxGroup{grid-template-columns: repeat(2, 1fr); row-gap: 20px; grid-column-gap: 20px;}
	.sec10 .compleBox {flex-direction: column; border-radius: 10px; padding: 0 7px;}
	.sec10 .compleBox_img{width: 70%; max-width: 110px; padding: unset; margin:10px auto;}
	.sec10 .compleBox_titx{flex:unset; border-top: 1px solid #CBCBCB; border-left: unset;}
	.compleBox_titx span{display: block;}
	.sec10 .compleBox_tit{font-size: 16px; line-height: 20px; margin-top: 15px; display: unset;}
	.sec10 .compleBox_txt{font-size: 14px; line-height: 18px; margin-bottom: 18px;}

	/* --------- sec12 / sec13 --------- */
	.sec12MainTxt{font-size: 16px; line-height: 22px;}

	.sec13{padding: 40px 0 70px;}
	.sec13 .video{margin-bottom: 35px;  transform: scale(1.5);}
}

@media all and (min-width:768px) {
	/* --------- 공통 --------- */
	.secMainTit{font-weight: 800;	font-size: 35px; line-height: 42px;	margin-bottom: 55px;}

	/* --------- sec1 / sec2 --------- */
	.sec1Video{height:70vh;}
	.sec1_GPT_SB .sec1Video,
	.sec1_GPT_HC .sec1Video,
	.sec1_AI_SYS .sec1Video,
	.sec1_AI_SVC .sec1Video{height: 440px !important;}
	.sec1Img > img{width:50%; max-width:480px;}
	/* .sec1_GPT_HC .sec1Img > img{width:60%;} */

	/* GPT_SB/ GPT_HC 별도 */
	.sec1_GPT_SB .sec1Img > img{max-width: 487px !important;}
	.sec1_GPT_HC .sec1Img > img{max-width: 620px !important;}
	.sec1_AI_SYS .sec1Img > img{max-width: 473px !important;}
	.sec1_AI_SVC .sec1Img > img{max-width: 412px !important;}

	.sec2SubTit {width: 245px; height: 45px; line-height: 45px; font-size: 20px; font-weight: 600; border-radius: 13px; margin-bottom: 40px;}

	/* --------- sec3 --------- */
	.sec3{padding: 100px 0;}
	.sec3MainImgGroup{width: 85%; max-width: 650px; row-gap:unset;}
	.sec3MainImg img{width: 52%;}
	.sec3MainImg--left{text-align: left;}
	.sec3MainImg--right{text-align: end;}
	.sec3MainImg--left img,
	.sec3MainImg--right img{margin-bottom: -95px;}
	.sec3MainImg:last-child img{margin-bottom: unset;}
	
	/* --------- sec4 / sec5 / sec5-1 --------- */
	.sec4MainImg{width: 80%; max-width: 700px;}

	.sec5 {padding: 50px 0; background-color: #F7F8FA;}
	.sec5 .kdcComWrap{justify-content: flex-start;}
	.sec5TxtImg {width: auto;}
	.sec5ConImg{display: block;}

	.sec5-1{padding: 55px 0;}
	.sec5-1 .goalBoxGroup {max-width: 700px; grid-template-columns: repeat(2, 1fr); row-gap: 30px; column-gap: 30px;}

	/* -------- sec5-2 -------- */
	.sec5-2 .mainImgBox{max-width: 280px;}
	.sec5-2 .contTxtImgBoxGroup{max-width: unset; grid-template-columns: repeat(2, 1fr); gap: 34px;}
	.sec5-2 .contTxtBox{text-align: left;}
	.sec5-2 .contTxtBox_h3{font-size: 18px;}
	.sec5-2 .contTxtBox_p{font-size: 14px; line-height: 20px;}
	.sec5-2 .contImgBox{height: 205px;}

	/* --------- sec6 --------- */
	.sec6TitImg{max-width: 400px;}
	.sec6 .stepBoxGroup {max-width: 700px;	grid-template-columns: repeat(2, 1fr); row-gap: 30px; column-gap: 30px;}
	.sec6 .stepBox {padding: 20px; min-height: 300px;}

	.sec6_interactive .stepBox{min-height: 250px;}
	.sec6_dbsql .stepBox{min-height: 230px;}
	.sec6_webstyling .stepBox{min-height: 270px;}
	.sec6_sidescript .stepBox{min-height: 250px;}
	.sec6_skecthup .stepBox{min-height: 280px;}
	.sec6_java .stepBox{min-height: 270px;}
	.sec6_react .stepBox,.sec6_GPT .stepBox{min-height: 320px;}

	.sec6 .stepBox_STEP {font-size: 24px; line-height: 24px;} 
	.sec6 .stepBox_tit {font-size: 18px; padding: 15px 0;}
	.sec6 .stepBox_txt {font-size: 15px; padding-top: 15px;}
	.sec6 .stepBox_txt span:not(:last-child){margin-bottom: 4px;}
	.sec6 .sec6BtnBox_aTag{margin-top: 10px;}

	/* --------- sec7 --------- */
	.sec7ImgBox > img {width: auto;}

	/* --------- sec8 --------- */
	.sec8TxtBox{width: 68%;}

	/* --------- sec9 --------- */
	.sec9TitImg-main{max-width: 480px;}
	.sec9Txt-top {font-size: 22px;}
	.sec9 .slackimgBox {width: 90%; max-width: 650px;}
	.sec9TitImg-sub{max-width: 450px; padding:50px 0;}
	.sec9Txt-checkBox{width: 85%; max-width: 750px;}
	.sec9Txt-check {padding: 22px 25px 19px; padding-left: 11%; border-radius: 50px; font-size: 20px;}
	.sec9Txt-check::after{left: 1%; width: 13.5%; background-size: 31%;	}
	.sec9Txt-bott {width: 95%; font-size: 17px; line-height: 24px;} 

	/* --------- sec10 --------- */
	.sec10TitImg{max-width: 420px;}
	.sec10 .compleBoxGroup {max-width: 700px; column-gap: 30px; row-gap: 30px;}
	.sec10 .compleBox {padding: 0px 20px;}
	.sec10 .compleBox_img{max-width: 125px; margin: 18px auto;}
	.sec10 .compleBox_titx{row-gap: 10px;}
	.sec10 .compleBox_tit {font-size: 20px; line-height: 25px; margin-top: 25px;}
	.sec10 .compleBox_txt {font-size: 16px; line-height: 22px; margin-bottom: 24px;}

	/* --------- sec11 / sec12 / sec13 --------- */
	.sec11TitImg{max-width: 450px;}
	.sec11MainImg{width: 80%; margin: 0 auto;}

	.sec12TitImg{max-width: 580px; margin-bottom: 20px;}
	.sec12MainTxt {font-size: 18px; line-height: 24px; margin-bottom: 20px;}
	.sec12 .kdcCourSlide {margin: 50px 10px;}

	.sec13 > .imgwrap {width: 100%; max-width: 1080px; margin: 0 auto;}
	.sec13WinImg {text-align: center;}
}

@media all and (min-width:840px){
	/* --------- sec2 --------- */
	.sec2ConWrap{width: 95%; flex-direction: row; max-width: unset; column-gap: 25px;}
	.sec2ConTxtInfoG{height: calc(100% - 42px);}
	.sec2ConTxtBox--costInfo:first-child{margin-bottom: 35px;}

	/* --------- sec5-2 --------- */
	.sec5-2 .contTxtImgBoxGroup{gap: 45px;}
	.sec5-2 .contImgBox{height: 220px;}

	/* --------- sec10 --------- */
	.sec10 .compleBox_img{max-width: 140px;}
	.sec10 .compleBox_txt{margin-bottom:28px;}

	.sec13 .video{transform: scale(1.2);}
}

@media all and (min-width:960px){
	/* --------- sec2 --------- */
	.sec2ConBox{padding: 25px; border-radius: 15px;}
	.sec2ConTit{font-size: 22px;}
	.sec2ConTxt_tit{font-size: 15px; width: 78px; height: 27px; line-height: 27px; }
	.sec2ConTxtInfoG{height: calc(100% - 46px);}
	.sec2ConTxt_txt{font-size: 17px; line-height: 25px;}
	.sec2ConTxt_fCost{font-size: 22px;}
	.sec2ConTxt_dCost{font-size: 28px; line-height: 23px;}
	.sec2ConInfo{font-size: 15px; padding: 19px 5px; border-radius: 10px;}

	/* --------- sec5 --------- */
	.sec5TxtImg{max-width: 340px;}

	/* --------- sec5-1 --------- */
	.sec5-1 .goalBoxGroup{width: 90%; max-width: unset; column-gap: 50px; row-gap: 50px;}
	.sec5-1 .goalImg {height: 200px;}

	/* --------- sec5-2 --------- */
	.sec5-2 .contTxtImgBoxGroup{gap: 50px;}
	.sec5-2 .contImgBox{height: 230px;}
	.sec5-2 .contTxtBox_h3{font-size: 20px;}
	.sec5-2 .contTxtBox_p{font-size: 16px; line-height: 22px;}

	/* --------- sec6 --------- */
	.sec6 .stepBoxGroup {width: 100%; max-width: unset; row-gap: 50px; column-gap: 50px;}
	.sec6 .stepBox{padding: 20px 20px 25px 20px; min-height: 350px;}
	.sec6_interactive .stepBox{min-height: 280px;}
	.sec6_dbsql .stepBox{min-height: 260px;}
	.sec6_webstyling .stepBox{min-height: 320px;}
	.sec6_sidescript .stepBox{min-height: 280px;}
	.sec6_skecthup .stepBox{min-height: 310px;}
	.sec6_java .stepBox{min-height: 310px;}
	.sec6_react .stepBox{min-height: 370px;}
	.sec6_GPT .stepBox{min-height: 350px;}

	.sec6 .stepBox_STEP{font-size: 26px; line-height: 26px; padding-left: 15px;}
	.sec6 .stepBox_STEP::before{width: 6px;}
	.sec6 .stepBox_tit{font-size: 20px; line-height: 26px; padding: 16px 0;}
	.sec6 .stepBox_txt{font-size: 18px; padding-top: 15px; line-height: 23px;}
	.sec6 .sec6BtnBox_aTag{margin-top: unset;}

	/* --------- sec8 --------- */
	.sec8 .kdcComWrap{justify-content: flex-start; margin: unset; column-gap: 50px;}
	.sec8ImgBox{display:block;}
	.sec8TxtBox{width: calc(70% - 25px); min-height: 120px; border-radius: 20px; padding: 28px;}

	/* --------- sec9 --------- */
	.sec9TitImg-main{max-width: 480px;}
	.sec9Txt-top {font-size: 25px;}
	.sec9 .slackimgBox{max-width: 800px;}
	.sec9TitImg-sub{max-width: 480px;}

	/* --------- sec10 / sec11 / sec12 --------- */
	.sec10 .compleBoxGroup{max-width: 800px; row-gap: 50px; column-gap: 50px;}
	.sec11TitImg{max-width: 480px;}
	.sec12MainTxt {font-size: 20px; line-height: 28px;}
}

@media all and (min-width:1080px) {
	/* --------- 공통 --------- */
	.secMainTit{font-size: 40px; line-height: 48px;}
	
	/* --------- sec1 / sec2 / sec3 --------- */
	.sec1Video{height: calc(100vh - 173px);}
	.sec1_GPT_SB .sec1Video,
	.sec1_GPT_HC .sec1Video,
	.sec1_AI_SYS .sec1Video,
	.sec1_AI_SVC .sec1Video{height: 480px !important;}
	.sec1Img > img{max-width:500px;}

	.sec2{padding: 50px 0 87px;}
	.sec2ConWrap{width: 100%; column-gap: 50px;}
	.sec2ConBox{padding: 30px;}
	.sec2ConTit{font-size: 26px; line-height: 28px; padding-bottom: 12px;}
	.sec2ConTxt_tit{font-size: 16px; width: 90px; height: 30px; line-height: 31px;}
	.sec2ConTxtInfoG{height: calc(100% - 41px);}
	.sec2ConTxt_txt{font-size: 18px; line-height: 28px;}
	.sec2ConInfo{font-size: 18px; height: 60px; line-height: 60px; padding: unset;}
	.sec2ConTxt_fCost{font-size: 26px; line-height: 20px;}
	.sec2ConTxt_dCost{font-size: 32px; line-height: 26px;}

	.sec3TitImg {max-width: 480px; margin-bottom: 100px;}

	/* --------- sec4 --------- */
	.sec4{padding-top: 100px;}
	.sec4MainImg{width: 70%; max-width: 800px;}
	.sec4_javachallenge .sec4MainImg {margin-bottom: 0px;}
	.sec4_pythonchallenge .sec4MainImg {margin-bottom: 0px;}

	/* --------- sec5-1 --------- */
	.sec5-1 {padding-top: 120px; padding-bottom: 100px;}
	.sec5-1 .goalImg{height: 240px;}
	.sec5-1 .goalTxt{padding-bottom: 30px;}
	.sec5-1 .goalTxt_h1 {
		font-size: 25px; line-height: 36px;
		padding-top: 18px; padding-bottom: 5.5px;
	}
	.sec5-1 .goalTxt_p {font-size: 20px; line-height: 35px;}

	/* --------- sec5-2 --------- */
	.sec5-2 {padding: 100px 0;}
	.sec5-2 .wrap {width: 100%;}
	.sec5-2 .mainImgBox {width: 100%; max-width: 320px;}
	.sec5-2 .contImgBox {height: 271px; border-radius: 20px;}
	.sec5-2 .contTxtBox_h3 {font-size: 26px; line-height: 35px;}
	.sec5-2 .contTxtBox_p {font-size: 18px; line-height: 26px;}

	/* --------- sec6 --------- */
	.sec6TitImg{max-width: 420px;}
	.sec6 .stepBox{min-height: 450px;}
	.sec6 .stepBox_STEP {padding-left: 18px; font-size: 28px; line-height: 28px;}
	.sec6 .stepBox_STEP::before{width: 7px;}
	.sec6 .stepBox_tit{font-size: 22px; line-height: 28px;}
	.sec6 .sec6BtnBox_aTag{max-width: 250px;}

	/* --------- sec8 --------- */
	.sec8ImgBox{width: 35%; max-width: 550px;}
	.sec8TxtBox{max-width: 700px; border-radius: 25px;}
	
	/* --------- sec9 --------- */
	.sec9{padding: 80px 0 100px;}
	.sec9Txt-checkBox{max-width: 800px;}
	.sec9Txt-check{font-size:22px; padding: 27px 25px 23px; padding-left: 12%;}
	.sec9Txt-check::after{left: 0%; width: 14.5%; background-size: 32%;}
	.sec9Txt-bott {font-size: 20px; line-height: 28px;} 

	/* --------- sec10 --------- */
	.sec10{padding: 100px 0;}
	.sec10TitImg{max-width: 520px;}
	.sec10 .compleBox_img{width: 58%; max-width: unset; margin: 10px auto;}
	.sec10 .compleBox_tit{font-size: 22px; line-height: 28px;}
	.sec10 .compleBox_txt{font-size: 18px; line-height: 24px; margin-bottom: 30px;}	

	/* --------- sec11 / sec12 / sec13 --------- */
	.sec11{padding: 80px 0 100px;}

	.sec12{padding: 70px 0;}
	.sec12 .kdcCourRoll{overflow: hidden; padding-bottom: 30px;} 
	.sec12 .kdcCourSlTxt_kdt{
		font-size: 14px; margin: 8px 0 10px; 
		height: 28px; line-height: 29px; border-radius: 5px;
	}
	.sec12 .kdcCourSlTxt_tit{font-size: 15px; margin-bottom: 8px;}

	.sec13 {padding: 50px 0 100px;}
	.sec13 .video{margin-bottom: 50px; transform: scale(1);}
	.sec13 .kdcComWrap{ max-width:unset;}
}

@media all and (min-width:1240px) {
	/* --------- sec3 / sec5-1 / sec5-1 --------- */
	.sec3MainImgGroup{max-width: 800px; }

	.sec5-1 .goalBoxGroup{width: 100%;}
	.sec5-1 .goalImg{height: 265px;}

	.sec5-2 .contImgBox {height: 298px;}
	.sec5-2 .contTxtBox_h3 {font-size: 27px;} 
	.sec5-2 .contTxtBox_p {font-size: 20px; line-height: 28px;}

	/* --------- sec6 --------- */
	.sec6{padding: 100px 0;}
	.sec6 .stepBoxGroup{width: 100%; max-width: unset;}
	.sec6 .stepBox{min-height: 513px;}

	.sec6_interactive .stepBox{min-height: 300px;}
	.sec6_dbsql .stepBox{min-height: 280px;}
	.sec6_webstyling .stepBox{min-height: 340px;}
	.sec6_sidescript .stepBox{min-height: 310px;}
	.sec6_skecthup .stepBox{min-height: 330px;}
	.sec6_java .stepBox{min-height: 340px;}
	.sec6_react .stepBox,
	.sec6_GPT .stepBox,
	.sec6_openAPI .stepBox{min-height: 400px;}

	.sec6 .stepBox_STEP{font-size: 32px; line-height: 32px;}
	.sec6 .stepBox_STEP::before{width: 8px;}
	.sec6 .stepBox_tit{font-size:23px;}
	.sec6 .stepBox_txt{font-size: 20px; line-height: 32px;}
	.sec6 .stepBox_txt span{text-indent: -13px; padding-left: 13px;}
	.sec6 .stepBox_txt span:not(:last-child){margin-bottom: 6px;}
	.sec6 .sec6BtnBox_aTag{max-width: unset; width: 75%;}

	/* --------- sec8 --------- */
	.sec8ImgBox{border-radius: 0 20px 20px 0;}

	/* --------- sec9 --------- */
	.sec9TitImg-main{max-width: unset;}
	.sec9Txt-top{font-size: 28px;}
	.sec9TitImg-sub{width: fit-content; max-width: unset;}
	.sec9Txt-bott{font-size: 22px; line-height: 30px;}

	/* --------- sec11 --------- */
	.sec11TitImg{width: fit-content; max-width: unset;}
	.sec11MainImg{width: 90%;}

	/* --------- sec12 --------- */
	.sec12TitImg{width: fit-content; max-width: unset;}
	.sec12MainTxt {font-size: 25px; line-height: 34px;}
	.sec12 .kdcCourSlTxt_kdt{height: 31px; line-height: 33px;}
	.sec12 .kdcCourSlTxt_tit{font-size: 17px; min-height: 40px; line-height: 1.2em;}
	.sec12 .kdcCourSlTxt_firCost{font-size: 17px;}
	.sec12 .kdcCourSlTxt_secTxt,
	.sec12 .kdcCourSlTxt_secCost{font-size: 18px;}
}

@media all and (min-width:1328px) {
	/* --------- sec4 / sec5 / sec5-1 / sec8 / sec9--------- */
	.sec4MainImg{width:100%; max-width: 900px;}
	.sec5ConImg{width: 50%;}
	.sec5-1 {padding-top: 150px;}
	.sec8 .kdcComWrap{width: calc(100% - var(--sec8KdcComWrap_rMar));}
	.sec9 .slackimgBox{width: 100%; max-width: unset;}
}

@media all and (min-width:1400px) {
	/* --------- sec1 / sec2 / sec3 / sec4 --------- */
	.sec1Video{height: 100%;}
	.sec1Img > img{max-width:700px;}

	.sec3MainImgGroup{max-width: unset;}

	.sec4MainImg{max-width: 1080px;}

	/* --------- sec5 / sec5-2 / sec6 / sec8 --------- */
	.sec5TxtImg{max-width:650px;}
	.sec5ConImg{width: auto;}

	.sec5-2 .mainImgBox {max-width:unset;}
	.sec5-2 .contTxtBox_h3 {font-size: 28px;}
	.sec5-2 .contImgBox {height: auto;}

	.sec6TitImg{max-width: 550px;}
	.sec6 .stepBox_STEP{font-size: 40px; line-height: 40px;}
	.sec6 .stepBox_tit{font-size: 26px; line-height: 35px;}

	.sec8ImgBox{width: 45%; max-width: 630.5px;}
	.sec8TxtBox{width: calc(55% - 25px); max-width: 767px; min-height: 160px; border-radius: 50px; padding: 32px 40px;}

	/* --------- sec10 --------- */
	.sec10 .compleBoxGroup{max-width: unset;}
	.sec10TitImg{max-width: unset;}
	.sec10 .compleBox_img{width: auto; max-width: 250px; margin: 20px auto;}
	.sec10 .compleBox_tit{font-size: 24px; line-height: 32px;}
	.sec10 .compleBox_txt{line-height: 26px;}

	/* --------- sec11 --------- */
	.sec11MainImg{width: auto;}

	/* --------- sec12 --------- */
	.sec12 .kdcCourSlTxt_kdt{margin: 6px 0 10px;}
	.sec12 .kdcCourSlTxt_tit{font-size: 18px; margin-bottom: 10px;}
	.sec12 .kdcCourSlTxt_firCost{font-size: 18px; margin-bottom: 5px;}
	.sec12 .kdcCourSlTxt_secTxt, .sec12 .kdcCourSlTxt_secCost{font-size: 20px;}

	/* --------- sec13 --------- */
	.sec13{padding: 0 0 100px;}
	.sec13 .video{margin-bottom: unset;}
}