@CHARSET "UTF-8";
:root{
	--padding-top-pc: 140px; /*공통 박스 패딩*/
	--padding-bottom-pc: 140px; /*공통 박스 패딩*/
	
	--padding-top-tb: 94px; /*공통 박스 패딩*/
	--padding-bottom-tb: 148px; /*공통 박스 패딩*/
	
	--padding-top-mo: 60px; /*공통 박스 패딩*/
	--padding-bottom-mo: 80px; /*공통 박스 패딩*/
}
.wrap-nocode{height:auto; overflow:visible;}
.wrap-nocode .title{font-size:48px;}
.wrap-nocode .subTitle{font-size:18px; margin-top:36px; line-height:1.5; font-family:'PretendardM';}
.cornBox{width:100%; padding-bottom:50px; background:#fff;}
.cornBox img{width:100%;}

.topBanner{width:100%; height:1129px; position:relative; background:url('../../../images/curriculum/nocode/topBanner.jpg') no-repeat center/cover;}
.topBanner .positionBox{width:100%; position:absolute; bottom: 0; left:50%; transform:translate(-50%, -50%); text-align:center;}
.topBanner .positionBox .pointTxt span{margin-left:2px; display:inline-block; background:#2e5bff; color:#fff; font-size:13px; padding:9px; border:1px solid #2e5bff; border-radius:6px; font-family:'PretendardM';}
.topBanner .positionBox .pointTxt span:first-child{background:#fff; color:#2e5bff; margin-left:0;}
.topBanner .positionBox h1{margin-top:32px;}

.openDate{width:100%; background:url('../../../images/curriculum/nocode/openDate_bg.jpg') no-repeat center/cover;}
.openDate .inner{display:flex; justify-content:center; align-items:center; height:107px;}
.openDate .inner .imgWrap{width:100%; max-width:420px; position:relative;}
.openDate .inner .imgWrap::before{content:''; background:url('../../../images/curriculum/nocode/openDate_before.png') no-repeat center/cover; width:107px; height:80px; position:absolute; top:-42px; left:-113px;}
.openDate .inner .imgWrap img{width:100%;}

.courseTab{display:none;}

.nocode-bubble{background:#ff893e; height:auto;}
.nocode-replit{background:#eafaf1; height:auto;}
.nocode-bubble, .nocode-replit{width:100%;}
.nocode-bubble .worry{background:#53cbff;}
.nocode-replit .worry{background:#ff893e;}
.worry{position:relative; background:#fff; padding-bottom:30px;}
.worry .worryImg{padding-top:var(--padding-top-pc); width:100%; margin:0 auto; max-width:1905px;}
.worry .worryImg img{width:100%;}
.worry .inner{text-align:center; padding-bottom:var(--paddng-bottom-pc);}
.worry .inner h1{margin-top:70px;}

/***공통 박스***/
.commonBox .inner{padding-top:var(--padding-top-pc); padding-bottom:var(--padding-bottom-pc);}
.commonInfo{background:#fff;}
.commonInfo .inner{padding-top:0 !important;}/*과정 상단 corn 시작 부분*/
.commonBox .inner .txtBox{text-align:center; width:100%; margin-bottom:52px;}
.commonBox .inner .txtBox .topBubble{display:inline-block; margin-bottom:35px; font-family:'PretendardSB'; background:#0dccff; color:#222; font-size:13px; padding:9px; border:2px solid #222; border-radius:6px;}
.commonBox .inner .txtBox .topBubble_qna{padding:9px 22px;}
.commonBox_orange .inner .txtBox .topBubble{background:#ff7420;}

.commonBox .inner .txtBox .logo{width:100%; max-width:386px; margin:0 auto; position:relative;}
.commonBox .inner .txtBox .logo img{width:100%;}
.commonBox .inner .txtBox .logo::after{content:''; display:block; background:url('../../../images/curriculum/nocode/logo_bubble_after.png') no-repeat center/cover; position:absolute; top:-72px; right:-125px; width:120px; height:117px;}
.commonBox_orange .inner .txtBox .logo::after{background:url('../../../images/curriculum/nocode/logo_replit_after.png') no-repeat center/cover;}

.commonBox .inner .txtBox h2{font-size:38px;}
.commonBox .inner .txtBox h2 span{display:block; color:#00a3cf; font-size:20px; margin-bottom:10px;}
.commonBox_orange .inner .txtBox h2 span{color:#ff893e;}

.commonBox .inner .cardBox{display:grid;}
.commonBox .inner .column3{grid-template-columns:repeat(3, 1fr); gap:20px;}
.commonBox .inner .column2{grid-template-columns:repeat(2, 1fr); gap:95px 22px;}
.commonBox:not(.portfolio) .inner .cardBox .card{position:relative; background:#fff; text-align:center; border:2px solid #222; border-radius:6px; padding:46px 26px;}
.commonBox .inner .cardBox .card .numBlack{background:#222; color:#fff; display:inline-block; width:30px; height:30px; line-height:30px; border-radius:50%;}

/*과정 info*/
.commonInfo .inner .cardBox .card p:first-of-type{font-size:20px; margin-top:17px; font-family:'PretendardSB';}
.commonInfo .inner .cardBox .card img{margin-top:35px; max-height:95px;}
.commonInfo .inner .cardBox .card .sizeDown{width:151px;}
.commonInfo .inner .cardBox .card p:last-of-type{margin-top:35px; font-family:'PretendardM'; line-height:1.4; letter-spacing:-0.05em;}

.commonInfo_orange .inner .cardBox .card .sizeDown{max-width:96px;}

/*추천 수강 대상*/
.recommend{width:100%; background:url('../../../images/curriculum/nocode/recommend.jpg') no-repeat center/cover;}
.recommend_orange{background:url('../../../images/curriculum/nocode/recommend_orange.jpg') no-repeat center/cover;}
.recommend .inner .cardBox .card{padding-top:50px !important;}
.recommend .inner .cardBox .card::after{content:''; display:block; position:absolute; top:0; left:50%; transform:translate(-50%, -34%); width:59px; height:59px;}
.recommend .inner .cardBox .card:first-child::after{background:url('../../../images/curriculum/nocode/recommend_card1.png') no-repeat center/cover;}
.recommend .inner .cardBox .card:nth-child(2)::after{background:url('../../../images/curriculum/nocode/recommend_card2.png') no-repeat center/cover; width:68px;}
.recommend .inner .cardBox .card:last-child::after{background:url('../../../images/curriculum/nocode/recommend_card3.png') no-repeat center/cover;}
.recommend .inner .cardBox .card p:first-child{font-size:18px; font-family:'PretendardM'; line-height:1.4;}
.recommend .inner .cardBox .card p:last-child{display:inline-block; font-size:20px; margin-top:10px; font-family:'PretendardB'; letter-spacing:-0.04em;}
.highlight{box-shadow: inset 0 -10px 0 #b4eefd;}
.highlight_orange{box-shadow: inset 0 -10px 0 #ffdcc5;}

/*띠배너*/
.beltBanner{width:100%; text-align:center;}
.beltBanner .inner{padding-top:61px; padding-bottom:45px;}
.beltBanner .inner p{color:#fff; font-size:24px;}
.beltBanner .inner p:last-of-type{font-size:30px; margin-top: 15px; font-family:'PretendardSB';}
.beltBanner .inner .btnBox{position:relative; display:inline-block;}
.beltBanner .inner .btnBox a{font-family:'PretendardB'; display:block; padding:20px 35px; border:2px solid #222; margin-top:30px; border-radius:32px; font-size:20px; position:relative;}
.beltBanner .inner .btnBox .btn-deco{background:url('../../../images/curriculum/nocode/belt_btn_after.png') no-repeat center/cover; width:41px; height:51px; position:absolute; bottom:-7px; right:-15px; z-index:3;}
.btnShine{overflow:hidden; z-index:1;}
.btnShine::before{content:''; position:absolute; top:5%; left:-75%; width:100%; height:200%; background:linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
transform:rotate(125deg); animation:shine 1.5s infinite; z-index:2;}
@keyframes shine{
	0%{
	left:-75%;
	}
	100%{
	left:125%;
	}
}


.belt_blue{background:url('../../../images/curriculum/nocode/beltBanner.jpg') no-repeat center/cover;}
.belt_blue .inner a{background-image:linear-gradient(to right, #36c9ff, #74e2ff);}
.belt_orange{background:url('../../../images/curriculum/nocode/beltBanner_orange.jpg') no-repeat center/cover;}
.belt_orange .inner a{background-image:linear-gradient(to right, #ff4905, #ff690a);}

.portfolio{background:#caf3fe;}
.portfolio_orange{background:#ffbe95;}
.portfolio .inner .txtBox img{margin-bottom:26px;}
.portfolio .inner .cardBox{width:100%;}
.portfolio .inner .cardBox .card .imgBox{width:100%; margin-bottom:19px; overflow:hidden; border:2px solid #222; border-radius:12px;}
.portfolio .inner .cardBox .card .imgBox img{width:100%;}
.portfolio .inner .cardBox .card p:first-of-type{margin-bottom:19px; font-size:20px; font-family:'PretendardSB';}
.portfolio .inner .cardBox .card p:last-of-type{line-height:1.5; font-family:'PretendardM'; letter-spacing:-0.04em;}

/*qna*/
.qna{width:100%; background:url('../../../images/curriculum/nocode/qna.jpg') no-repeat center/cover;}
.qna .inner .column2{gap:51px 22px;}
.qna .inner .cardBox .card{text-align:left !important; border-radius:12px !important; padding-top:62px !important;}
.qna .inner .cardBox .card::before{width:54px; height:54px; background:#0dccff; border:2px solid #222; border-radius:50%; position:absolute; top:-28px; left:19px; text-align:center; line-height:54px; font-size:22px; font-family:'PretendardSB';}
.commonBox_orange .inner .cardBox .card::before{background:#ff893e;}
.qna .inner .cardBox .card:first-child::before{content:'Q1'}
.qna .inner .cardBox .card:nth-child(2)::before{content:'Q2'}
.qna .inner .cardBox .card:nth-child(3)::before{content:'Q3'}
.qna .inner .cardBox .card:last-child::before{content:'Q4'}
.qna .inner .cardBox .card .question{font-size:20px; font-family:'PretendardSB'; margin-bottom:25px;}
.qna .inner .cardBox .card .answer{line-height:1.5; font-family:'PretendardM';}

/*교육과정*/
.course{background:#fff; border-radius:0 0 50% 50% / 0 0 120px 120px;}
.course .chapter .chapterItem{border:1px solid #222; border-radius:6px; overflow:hidden;}
.course .chapter .chapterItem:not(:last-child){margin-bottom:15px;}
.course .chapter .chapterItem dt{background:#f1f2f6; font-family:'PretendardSB'; font-size:18px; padding:20px 0 20px 37px; border-bottom:1px solid #222;}
.course .chapter .chapterItem dd{padding:20px 0 20px 37px; font-family:'PretendardM';}
.course .chapter .chapterItem dd ul{line-height:2;}
.course .chapter .chapterItem dd ul li{position:relative; padding-left:10px;}
.course .chapter .chapterItem dd ul li::before{content:'·'; display:inline-block; position:absolute; top:0; left:0;}

/*강사소개*/
.teacherBox{background:#eafaf1;}
.teacherBox .inner .txtBox .topBubble{background:#25d776;}
.teacherBox .inner .txtBox h2 span{color:#25d776;}
.teacherBox .inner .teacherItem{gap:41px;}
.teacherBox .inner .teacherItem .profile{width:100%; border:2px solid #222; border-radius: 14px; overflow:hidden; display:flex; align-items:flex-end; background:#fff;}
.teacherBox .inner .teacherItem .profile img{width:100%;}
.teacherBox .inner .teacherItem .career{margin-top:38px;}
.teacherBox .inner .teacherItem .career .advice{font-size:18px; font-family:'PretendardSB'; position:relative;}
.teacherBox .inner .teacherItem .career .advice::before{content:''; background:url('../../../images/curriculum/nocode/advice_before.png'); width:26px; height:19px; position:absolute; top:-35px; left:0;}
.teacherBox .inner .teacherItem .career p:last-of-type{font-size:20px; font-family:'PretendardB'; margin-top:30px;}
.teacherBox .inner .teacherItem .career p:last-of-type::after{content:''; display:block; width:100%; height:2px; background:#d7d7d7; margin-top:24px;}
.teacherBox .inner .teacherItem .career ul{margin-top:26px;}
.teacherBox .inner .teacherItem .career ul li{font-size:16px; font-family:'PretendardM'; line-height:1.5; color:#444; letter-spacing:-0.04em;}
.teacherBox .inner .teacherItem .career ul .careerMargin{margin-bottom:16px;}


/*완강 후 혜택*/
.benefitBox{background:#3b3f3d;}
.benefitBox .inner .txtBox .topBubble{background:#25d776;}
.benefitBox .inner .txtBox h2{color:#fff;}
.benefitBox .inner .txtBox h2 span{color:#25d776;}
.benefitBox .inner .benefit .benefitItem{display:flex; flex-direction:column; text-align:center; border:2px solid #222; border-radius:8px; overflow:hidden;}
.benefitBox .inner .benefit .benefitItem .imgWrap{height:183px; background:#fff; padding:30px 0; display:flex; justify-content:center; align-items:center;}
.benefitBox .inner .benefit .benefitItem .imgWrap .img1{width:139px; height:136px;}
.benefitBox .inner .benefit .benefitItem .imgWrap .img2{width:92px; height:114px;}
.benefitBox .inner .benefit .benefitItem .imgWrap .img3{width:94px; height:107px;}
.benefitBox .inner .cardBox .card{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.benefitBox .inner .benefit .benefitItem .txtWrap{width:100%; padding:20px; background:#f5f5f5; flex:1; display:flex; align-items:center; justify-content:center;}
.benefitBox .inner .benefit .benefitItem .txtWrap p{font-size:20px; font-family:'PretendardB';}

/*최하단 배너*/
.bottomBanner{width:100%; overflow:hidden; background:url('../../../images/curriculum/nocode/bottomBanner.jpg') no-repeat center/cover;}
.bottomBanner .inner{padding-top:89px; padding-bottom:89px; text-align:center; position:relative;}
.bottomBanner .inner::after{content:''; background:url('../../../images/curriculum/nocode/bottomBanner_icon.svg') no-repeat center/cover; width:279px; height:241px; position:absolute; bottom:0; right:0;}
.bottomBanner .inner p{font-size:30px; font-family:'PretendardSB'; line-height:1.4; position:relative; z-index:2;}

/**************************************************************************************************/
@media screen and (max-width: 1024px){
.commonBox .inner{padding-top:var(--padding-top-tb); padding-bottom:var(--padding-bottom-tb);}
.commonBox .inner .column2{gap:75px 21px;}
.commonBox .inner .column3{gap:17px;}
.commonBox:not(.portfolio) .inner .cardBox .card{padding:36px 20px;}
.commonInfo .inner .cardBox .card p:first-of-type{font-size:18px;}

.nocode-replit .worry .worryImg{padding-top:58px;}

.recommend .inner .cardBox .card p:last-child{font-size:19px;}

.beltBanner .inner{padding-top:55px; padding-bottom:48px;}
.btnShine::before{width:80%;}


.qna .inner .column2{gap:39px 20px;}

.course{border-radius:0 0 50% 50% / 0 0 50px 50px;}

.teacherBox .inner .teacherItem .career ul{margin-top:24px;}

.bottomBanner .inner::after{visibility:hidden;}
}
/**************************************************************************************************/
@media screen and (max-width: 767px){
.wrap-nocode .title{font-size:27px;}
.wrap-nocode .subTitle{font-size:15px; margin-top:25px;}
	
.topBanner{width:100%; height:583px; position:relative; background:url('../../../images/curriculum/nocode/topBanner_mo.jpg') no-repeat center/cover;}	
.topBanner .positionBox{transform:translate(-50%, 0); margin-bottom:57px;}
.topBanner .positionBox h1{margin-top:24px;}
.topBanner .positionBox .pointTxt span{padding:8px 5px;}

.openDate .inner .imgWrap{width:534px;}
.openDate .inner .imgWrap::before{width:69px; height:52px; top:-46px; left:-14px;}

/*모바일에서만 버튼 노출*/
.courseTab{background:#222; width:100%; height:50px; line-height:50px; display:grid; grid-template-columns:repeat(2, 1fr);}
.courseTab a{display:block; width:100%; color:#797979; font-size:16px; font-family:'PretendardM'; text-align:center; transition: color 0.3s ease;}
#bubble.active-bubble{color:#53cbff;}
#replit.active-replit{color:#ff7420;}

/*body태그 overflow사용으로 인해 sticky제한. js로 조절위한 addClass 추가*/
.fixed {
  position: fixed;
  top: 60px;
  z-index: 10;
}

.worry .worryImg{padding-top:var(--padding-top-mo);}
.worry .inner{padding-bottom:0;}
.worry .inner h1{margin-top:50px;}

.commonBox .inner{padding-top:var(--padding-top-mo); padding-bottom:var(--padding-bottom-mo);}
.commonBox .inner .txtBox{margin-bottom:36px;}
.commonBox .inner .txtBox .logo{max-width:231px;}
.commonBox .inner .txtBox .logo::after{top:-87px; right:-43px; width:77px; height:74px;}
.commonBox .inner .txtBox .topBubble{margin-bottom:26px;}
.commonBox .inner .txtBox h2{font-size:27px;}
.commonBox .inner .txtBox h2 span{font-size:15px; margin-bottom:15px;}

.commonBox .inner .cardBox{display:block;}
.commonBox:not(.portfolio) .inner .cardBox .card{padding:28px 20px 36px;}
.commonBox .inner .cardBox .card:not(:last-child){margin-bottom:10px;}
.commonInfo .inner .cardBox .card img{margin-top:25px;}
.commonInfo .inner .cardBox .card p:last-of-type{font-size:14px; letter-spacing:-0.03em; margin-top:28px;}

.recommend .inner .cardBox{padding-top:25px;}
.recommend .inner .cardBox .card:not(:last-child){margin-bottom:36px !important;}
.recommend .inner .cardBox .card p:first-child{font-size:15px;}
.recommend .inner .cardBox .card p:last-child{font-size:18px;}

.beltBanner .inner{padding-top:40px; padding-bottom:30px;}
.beltBanner .inner p{font-size:14px;}
.beltBanner .inner p:last-of-type{font-size:20px; margin-top:9px;}
.beltBanner .inner a{padding:17px 25px; margin-top:19px;}
.beltBanner .inner a::after{width:27px; height:37px; top:21px; right:-5px;}
.btnShine::before{width:70%; height:150%; top:-40%;}

.portfolio .inner .txtBox img{width:48px; margin-bottom:19px;}
.portfolio .inner .cardBox .card:not(:last-child){margin-bottom:50px !important;}
.portfolio .inner .cardBox .card p:first-of-type{margin-bottom:14px; font-size:18px;}
.portfolio .inner .cardBox .card p:last-of-type{font-size:14px; letter-spacing:-0.03em;}

.qna{width:100%; background:url('../../../images/curriculum/nocode/qna_mo.jpg') no-repeat center/cover;}
.qna .inner .cardBox .card{padding-top:50px !important;}
.qna .inner .cardBox .card:not(:last-child){margin-bottom:20px;}
.qna .inner .cardBox .card::before{width:33px; height:33px; line-height:33px; font-size:15px; top:-19px; left:19px;}
.qna .inner .cardBox .card .question{font-size:18px;}
.qna .inner .cardBox .card .answer{font-size:14px;}

.course{border-radius:0 0 50% 50% / 0 0 30px 30px;}
.course .chapter .chapterItem:not(:last-child){margin-bottom:10px;}
.course .chapter .chapterItem dt{font-size:15px; padding:15px 0 15px 19px;}
.course .chapter .chapterItem dd{font-size:14px; padding:20px 19px;}

.teacherBox .inner .teacherItem .profile{margin-bottom:40px;}
.teacherBox .inner .teacherItem .career .advice::before{background:url('../../../images/curriculum/nocode/advice_before_mo.png'); width:16px; height:12px; top:-21px;}
.teacherBox .inner .teacherItem .career p:last-of-type{font-size:18px;}
.teacherBox .inner .teacherItem .career ul{margin-top:13px;}
.teacherBox .inner .teacherItem .career ul li{font-size:14px;}

.benefitBox .inner .benefit .benefitItem:not(:last-child){margin-bottom:20px;}
.benefitBox .inner .benefit .benefitItem .txtWrap p{font-size:18px;}
.benefitBox .inner .benefit .benefitItem .imgWrap{height:136px;}
.benefitBox .inner .benefit .benefitItem .imgWrap .img1{width:102px; height:100px;}
.benefitBox .inner .benefit .benefitItem .imgWrap .img2{width:66px; height:82px;}
.benefitBox .inner .benefit .benefitItem .imgWrap .img3{width:66px; height:75px;}

.bottomBanner .inner{padding-top:45px; padding-bottom:45px; text-align:left;}
.bottomBanner .inner p{font-size:19px;}
.bottomBanner .inner::after{visibility:visible; width:153px; height:132px; right:-10px;}
}