@charset "utf-8";

/*------------------------------------*\
	COMMON
	- 공통, 모듈 요소 스타일

	font-family : 'GmarketSans', sans-serif;
	font-family : 'Noto Sans KR', sans-serif;
	font-family : 'NanumSquare', sans-serif;
	font-family : 'nanumsquareround', sans-serif;
\*------------------------------------*/


body {font-family: 'Noto Sans KR', sans-serif; font-size:16px; line-height:1.5;  -webkit-text-size-adjust:none;}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {
	font-weight:700;
}

em {font-style:normal;}
button {
	border:none;
	background:transparent;
	cursor: pointer;
}
picture {
	display:block;
}

::placeholder {color:#B8BAC1;}

.scroll_hidden {overflow:hidden !important;}

/* 반응형 표시 클래스 */
.show_pc {display: block;}
.show_m {display: none;}

/* 공통클레스 - 기능 */
.flex {
	display:flex;
	display:-webkit-flex;
	display:-ms-flex;
}

.regular		{font-weight:400;}
.medium	{font-weight:500;}
.bold			{font-weight:700;}
/* .black		{font-weight:900;} */

.c_gray	{color:#B7B7B7;}
.c_blue	{color:#2F67FB;}
.c_skyblue {color:#009DFF;}
.c_mint	{color:#A4F0FA;} 
.c_yellow {color:#FEDB4A;}
.c_orange {color:#FDA30F;}
.c_perple {color:#5E16E5;}

.mt10 {margin-top:10px;}

/* 뒷배경 밑줄 */
.under {position:relative; display: inline-block;}
.under:after {content:""; position:absolute; left:0; right:-3px; bottom:7px; top:0; background:#2F67FB; z-index: -1; width:0; transition: 0.3s;}
.under.on:after {width:100%;}
.under.white {color:#fff;}
.under.perple:after {background:#5813D1; top:3px;}
.under.line:after {height:3px; bottom:0; background:#BC77FF; top:auto;}

.f_star {	font-family: 'Cafe24Shiningstar';}
/* 폼 요소 - 테이블, 버튼 등 */
a:focus {outline:none;}
a:active img {
	animation:effectClick 0.1s linear forwards;
}
@keyframes effectClick {
	from {transform:scale(1);}
	to {transform:scale(0.95);}
}


/* 레이아웃 */
.container {
	position:relative;
	max-width:1240px;
	padding:0 20px;
	margin: 0 auto;
}
.header {
	position:fixed;
	top:0; 
	left:0;
	width:100%; 
	z-index:30;
	background:none;
	transition:all 0.3s;
}
.header .container {
	display:flex; 
	justify-content:space-between; 
	align-items:center;
	padding:15px 20px;
	position: relative;
}
.logo {
	position: static;
	width: 128px;
	flex-shrink: 0;
}
.logo a {
	display: flex;
	align-items: center;
	height: 100%;
}
.logo img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
.gnb.cc-site-gnb {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
}
/* 모바일 드로어 닫기: 데스크톱 가로 네비에서는 레이아웃·가독성 위해 숨김 */
@media screen and (min-width: 768px) {
	.header .gnb .close-btn {
		display: none !important;
	}
}
.cc-main-nav-links {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.cc-main-nav-links > a.cc-nav-primary {
	position: relative;
	color: #fff;
	font-size: 18px;
	line-height: 48px;
	padding: 0 36px;
	transition: all 0.3s;
	white-space: nowrap;
	text-decoration: none;
}
.cc-main-nav-links > a.cc-nav-primary ~ a.cc-nav-primary::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 18px;
	background: #fff;
}
.cc-main-nav-links > a.cc-nav-primary:hover,
.header.scrolled .cc-main-nav-links > a.cc-nav-primary:not(.on):hover,
.header.fixed .cc-main-nav-links > a.cc-nav-primary:not(.on):hover {
	color: #062D93;
}
.cc-main-nav-links > a.cc-nav-primary.on {
	color: #F7F736;
}
/* 로그인/로그아웃 텍스트 — 히어로 위에서는 밝은 pill, 스크롤 후 진한 스타일 */
.cc-header-auth {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
body:not(.logged-in) .header .cc-header-auth {
	margin-right: 52px;
}
body.logged-in .header .cc-header-auth {
	margin-right: 44px;
}
.cc-header-auth > a.login-link,
.cc-header-auth > a.logout-link {
	display: inline-block;
	font-size: 16px;
	line-height: 46px;
	margin-left: 12px;
	padding: 0 28px;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.95);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
	transition: all 0.3s;
}
.cc-header-auth > a.login-link:hover,
.cc-header-auth > a.logout-link:hover {
	color: #062D93;
}
.user-nav {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}
.user-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #333;
	transition: all 0.3s;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.user-icon:hover {
	background: rgba(255, 255, 255, 1);
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.user-icon svg {
	width: 20px;
	height: 20px;
}
.login-icon {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 1);
	color: #333;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.login-icon:hover {
	background: rgba(255, 255, 255, 1);
	border-color: rgba(255, 255, 255, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.btn_menu {
	display:none; width:60px; height:60px;
	background:url("../../images/20231009/btn-topmenu-hamburger.svg") no-repeat center / 30px;
	font-size:0;
}
/*
 * 메인(홈) 최상단: .header 가 background:none 이라도 전체 박스가 pointer 대상이 되어
 * 히어로 CTA(z-index 낮음)보다 위에서 클릭을 가로챔. 투명 영역은 통과시키고 링크·버튼만 받도록 함.
 * 스크롤 후(.scrolled / 호환 .fixed)는 실배경이 있으므로 전체 바가 막음.
 * 모바일 전체 메뉴 열림(html.gnb_on) 시에는 헤더 전체가 다시 막도록 복구.
 */
body.cocoble_landing.home-page .header:not(.scrolled):not(.fixed) {
	pointer-events: none;
}
html.gnb_on body.cocoble_landing.home-page .header {
	pointer-events: auto;
}
body.cocoble_landing.home-page .header:not(.scrolled):not(.fixed) .logo a,
body.cocoble_landing.home-page .header:not(.scrolled):not(.fixed) .cc-main-nav-links > a.cc-nav-primary,
body.cocoble_landing.home-page .header:not(.scrolled):not(.fixed) .cc-header-auth > a.login-link,
body.cocoble_landing.home-page .header:not(.scrolled):not(.fixed) .cc-header-auth > a.logout-link,
body.cocoble_landing.home-page .header:not(.scrolled):not(.fixed) .gnb button.close-btn,
body.cocoble_landing.home-page .header:not(.scrolled):not(.fixed) .user-nav a,
body.cocoble_landing.home-page .header:not(.scrolled):not(.fixed) .btn_menu {
	pointer-events: auto;
}

/* 스크롤 후: 흰 배경 + 진한 글자 (레거시 .fixed 와 병행) */
.header.scrolled,
.header.fixed {
	position: fixed;
	top: 0;
	background: #fff;
	box-shadow: 0px 3px 6px #00000029;
	z-index: 997; /* layer_bg : 998, layer_content: 999 */
}
.header.scrolled .btn_menu,
.header.fixed .btn_menu {
	background-image: url("../../images/20231009/btn-topmenu-hamburger-blue.svg");
}
.header.scrolled .cc-main-nav-links > a.cc-nav-primary,
.header.fixed .cc-main-nav-links > a.cc-nav-primary {
	color: #6C6C6C;
}
.header.scrolled .cc-main-nav-links > a.cc-nav-primary.on,
.header.fixed .cc-main-nav-links > a.cc-nav-primary.on {
	color: #2F67FB;
}
.header.scrolled .cc-main-nav-links > a.cc-nav-primary ~ a.cc-nav-primary::before,
.header.fixed .cc-main-nav-links > a.cc-nav-primary ~ a.cc-nav-primary::before {
	background: rgba(108, 108, 108, 0.5);
}
.header.scrolled .cc-header-auth > a.login-link,
.header.scrolled .cc-header-auth > a.logout-link,
.header.fixed .cc-header-auth > a.login-link,
.header.fixed .cc-header-auth > a.logout-link {
	color: #2F67FB;
	border-color: rgba(47, 103, 251, 0.45);
	background: rgba(255, 255, 255, 0.98);
}
.header.scrolled .user-icon,
.header.fixed .user-icon {
	background: rgba(47, 103, 251, 0.1);
	color: #2F67FB;
	box-shadow: 0 2px 8px rgba(47, 103, 251, 0.2);
}
.header.scrolled .user-icon:hover,
.header.fixed .user-icon:hover {
	background: rgba(47, 103, 251, 0.2);
	box-shadow: 0 4px 12px rgba(47, 103, 251, 0.3);
}
.header.scrolled .login-icon,
.header.fixed .login-icon {
	background: rgba(47, 103, 251, 0.1);
	border-color: rgba(47, 103, 251, 0.3);
	color: #2F67FB;
	box-shadow: 0 2px 8px rgba(47, 103, 251, 0.2);
}
.header.scrolled .login-icon:hover,
.header.fixed .login-icon:hover {
	background: rgba(47, 103, 251, 0.2);
	border-color: rgba(47, 103, 251, 0.5);
	box-shadow: 0 4px 12px rgba(47, 103, 251, 0.3);
}
/* /courses는 본문 배경이 밝으므로 첫 렌더부터 내부 페이지 헤더 색상을 고정한다. */
body.courses-route .header {
	position: fixed;
	top: 0;
	background: #fff;
	box-shadow: 0px 3px 6px #00000029;
	z-index: 997;
}
body.courses-route .header .gnb.cc-site-gnb,
body.courses-route .header .cc-main-nav-links,
body.courses-route .header .cc-header-auth {
	display: flex;
	visibility: visible;
	opacity: 1;
}
body.courses-route .header .cc-main-nav-links > a.cc-nav-primary {
	display: inline-flex;
	align-items: center;
	width: auto;
	color: #6C6C6C;
	visibility: visible;
	opacity: 1;
}
body.courses-route .header .cc-main-nav-links > a.cc-nav-primary.on {
	color: #2F67FB;
}
body.courses-route .header .cc-main-nav-links > a.cc-nav-primary ~ a.cc-nav-primary::before {
	background: rgba(108, 108, 108, 0.5);
}
body.courses-route .header .cc-header-auth > a.login-link,
body.courses-route .header .cc-header-auth > a.logout-link {
	display: inline-block;
	color: #2F67FB;
	border-color: rgba(47, 103, 251, 0.45);
	background: rgba(255, 255, 255, 0.98);
	visibility: visible;
	opacity: 1;
}
body.courses-route .header .user-icon,
body.courses-route .header .login-icon {
	background: rgba(47, 103, 251, 0.1);
	border-color: rgba(47, 103, 251, 0.3);
	color: #2F67FB;
	box-shadow: 0 2px 8px rgba(47, 103, 251, 0.2);
}
html.gnb_on {
	overflow: hidden;
}
html.gnb_on .cc-main-nav-links > a.cc-nav-primary::before {
	display: none;
}

.aside_wrap:after {
	content:"";
	width:100vw; 
	position:absolute;
	left:0;
	bottom:0;
	right:0;
	height:130px;
	background:linear-gradient(180deg, transparent 0% ,  rgba(0,0,0,0.2) 100%);
	z-index: -1;
}

.aside_btns {
	position:relative;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	width:calc(100% - 40px);
	max-width:1440px;
	padding: 0 70px 0 100px;
	margin:0 auto;
	background: linear-gradient(300deg, #0DABFF 0%, #0DABFF 30%, #20BAFC 33% , #20BAFC 100%);
	border-radius:32px 32px 0 0;
	transition:all 0.3s;
	transform:translateY(0%);
	max-height:92px;
	cursor:pointer;
	z-index:1;
}

.aside_btns.on {
	transform : translateY(0);
}
.aside_btns .left {
	width:25.2%;	max-width:300px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left:-5%;
}
.aside_btns .left p {
	font-family: "GmarketSans", sans-serif;
	color:#fff;
	font-size: 20px;
}
.aside_btns .left img {
	position:static;
	left:10px;
	bottom:0;
	width:100%;
	max-width:300px;
}
.aside_btns .right {
	display: flex;
	align-items: center;
	justify-content: center;
	flex:1;
	padding: 26px 0;
	/* height: 92px; */
}
.aside_btns .right > * {	margin: 0;}
.aside_btns .right p {font-family: "GmarketSans", sans-serif; flex:1; display:flex; align-items:center; color:#fff; height:34px; /* margin-right:30px; */ /* margin-top:12px; */ justify-content: space-between; padding-left: 4%;}
.aside_btns .right p span {/* margin-left:-5%; */font-size: 32px;}
.aside_btns .right p span strong {	color:#F7FF29;}
.aside_btns .right p span br {display:none;}
.aside_btns .right p span em {	position:relative;	display: inline-block;	vertical-align: top;}
.aside_btns .right p span em:after {	content:"";	position:absolute;	top: -2px;	width:3px;	height:3px;	background:#fff;	border-radius: 50%;	left:50%;	transform:translateX(-50%);}
.aside_btns .right .link_btn {	height:56px;	margin:0 4px;}
.aside_btns .right p a {display:block;color:transparent; width:234px; height:56px; text-align:center; font-size: 26px;font-weight:700;line-height: 36px;padding: 12px 0 8px;/* margin-top:-13px; *//* margin-left:28px; */background:linear-gradient(to right, #b1ff71, #feff44);border-radius:30px;margin-top: -5px;
	font-size:26px; animation:blink 1.8s infinite;
}
@keyframes blink {
	0% {color:transparent;}
	25% {color:#0a0a0a; }
	75% { color:#0a0a0a;}
	100% {color:transparent;}
}
.aside_btns .right .link_btn img,
.aside_btns .right p img {
	height:100%;
}
.aside_btns .right p picture {
	flex:1;
	max-width:257px;
	cursor:pointer;
}
.aside_btns .right .link_btn picture {
	height:100%;
}
.btn_cocoble {
	display:none;
	position:absolute; top:-130px; right:14px;
	width:70px; height:70px;
	background:url("../../images/20231009/btn-floationg-cocoblestart-front.svg") no-repeat center / 100%;
	font-size:0;
}
.btn_brown_md {display:inline-block; font-size:14px; color:#fff !important; line-height:30px; padding:0 12px; border-radius:3px; background:linear-gradient(180deg, #83715f, #6c5c4d);}
.btn_brown_lg {display:inline-block; font-size:16px; color:#fff !important; line-height:40px; padding:0 28px; border-radius:5px; background:linear-gradient(180deg, #83715f, #6c5c4d);}

/* all-in-one 학습 프로세스 */
.tab_header {
	background:#F4F4F4;
	padding:20px 0;
	position:absolute;
	z-index: -1000;
	box-shadow: 0px 6px 15px rgba(0,0,0,0.1);
}
.tab_header.fixed {
	position: fixed;
	left:0;
	right:0;
	z-index: 2000;
	top:0;
}
.tab_header ul {
	display: flex;
	justify-content: center;
}
.tab_header a {
	width:210px;
	border-radius: 5px;
	background:#D5D5D5;
	border: 4px solid #E5E5E5;
	font-family: 'TmoneyRoundWindExtraBold';
	color:#fff;
	padding:12px 0; 
	margin:0 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	line-height: 1;
	position:relative;
}

.tab_header a span {
	border-radius: 50px;
	font-size: 12px;
	padding:4px 10px;
	margin-bottom: 6px;
	background:rgba(255,255,255,0.4);
}
.tab_header a:after,
.tab_header a:before {
	opacity: 0;
	position:absolute;
	content:"";
	left:50%;
	top:100%;
	transform:translateX(-50%);
	width:0;
	height:0;
	border-top: 10px solid #D5D5D5;
	border-left: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid transparent;
} 
.tab_header a:before {
	border-top: 15px solid #E5E5E5;
	border-left: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-right: 15px solid transparent;
}

/* section 08 블록 코딩 기초 학습 step 1 */
.tab_header.fixed li:first-child.on a {
	background:#FD9E28;
	border-color:#FDBD6A;
}
.tab_header.fixed li:first-child.on a:after {
	opacity: 1;
	border-top-color : #FD9E28;
}
.tab_header.fixed li:first-child.on a:before {
	opacity: 1;
	border-top-color : #FDBD6A;
}

/* section 08 디지털 감성 학습 step 2 */
.tab_header.fixed li:nth-child(2).on a {
	background:#39ABFC;
	border-color:#79C7FD;
}
.tab_header.fixed li:nth-child(2).on a:after {
	opacity: 1;
	border-top-color : #39ABFC;
}
.tab_header.fixed li:nth-child(2).on a:before {
	opacity: 1;
	border-top-color : #79C7FD;
}

/* section 08 협력 코딩 게임 step 3 */
.tab_header.fixed li:nth-child(3).on a {
	background:#78BF02;
	border-color:#9AD638;
}
.tab_header.fixed li:nth-child(3).on a:after {
	opacity: 1;
	border-top-color : #78BF02;
}
.tab_header.fixed li:nth-child(3).on a:before {
	border-top-color : #9AD638;
	opacity: 1;
}

/* section 08 ai학습 리포트 step 4 */
.tab_header.fixed li:nth-child(4).on a {
	background:#AD57FB;
	border-color:#BE8DEA;
}
.tab_header.fixed li:nth-child(4).on a:after {
	opacity: 1;
	border-top-color : #AD57FB;
}
.tab_header.fixed li:nth-child(4).on a:before {
	opacity: 1;
	border-top-color : #BE8DEA;
}

/* 대각선 나누기 */

/* sec_line_02 - section_12 */
.sec_line_02:before,
.sec_line_02:after {
	content:'';
	position:absolute; left:50%; bottom:-1px;
	transform:translateX(-50%);
	width:100vw; height:22.7vh; max-height:360px;
}
.sec_line_02::before {
	background:#F5F6FF;
	clip-path:polygon(100% 0%, 100% 100%, 0% 100%, 0% 97%);
}
.sec_line_02::after {
	bottom:-2px;
	background:#7E2EFF;
	transform:translateX(-50%) scaleX(-1);
	clip-path:polygon(100% 0%, 100% 100%, 0% 100%, 0% 81%);
}

.section_12 .sec_line_02::before {
	background:#ebebeb;
	z-index: -2;
}
.section_12 .sec_line_02::after {
	z-index: -1;
}

/* 

.section_14:before,
.section_14:after

.section_14:before,
.section_14:after {
	bottom:99%;
}
.section_14:before {
	background:#fff;
	clip-path:polygon(100% 100%, 100% 100%, 0% 0%, 0% 100%);
	z-index: 2;
}
.section_14:after {
	background:#ebebeb;
	clip-path:polygon(100% 0%, 100% 100%, 0% 100%, 0% 97%);
	height:15vh;
} */



.btn_close {display:inline-block; width:40px; height:40px; background:url("../../images/20231009/common/btn-close.svg") no-repeat center; font-size:0;}
.btn_blue_lg {display:block; width:100%; max-width:336px; color:#fff; font-size:24px; line-height:72px; text-align:center; margin:0 auto;
	background:linear-gradient(112deg, #2caeff, #4e89fe 25%, #5e78fe 39%, #8f4aff); border-radius:40px;
}

.form_element {font-size:18px;}
.form_element input[type="text"],
.form_element select,
.form_element textarea {height:60px; padding:0 20px; border:1px solid rgba(0,0,0,0.1); border-radius:4px;}
.form_element input[type="text"].style_01 {border-top:0; border-left:0; border-right:0; border-radius:0;}
.form_element select {
	-webkit-appearance:none;
	height:60px; padding-right:50px; background:url("../../images/20231009/common/btn-spreadout.svg") no-repeat right 20px center;
}
.form_element textarea {width:100%; height:auto; min-height:160px; padding:17px 20px; resize:none; vertical-align:top;}

.form_input_btn {margin:-12px;}
	.form_element input[type="radio"] {position:absolute; width:0; height:0; font-size:0; border:0; margin:0; padding:0;}
	.form_element input[type="radio"] + label {display:inline-block; line-height:42px; padding-left:42px; padding-right:10px; margin:12px; background:url("../../images/20231009/common/radio-ico-select-none.svg") no-repeat left center; cursor:pointer; transition:color 0.3s;}
	.form_element input[type="radio"] + label:hover {color:#2196f3;}
	.form_element input[type="radio"]:checked + label {background-image:url("../../images/20231009/common/radio-ico-select-normal.svg");}

.form_element ul li {padding:16px;}
.form_element ul li > p {font-size:20px; font-weight:700; margin-bottom:14px;}

/* --------------------------------------------------------------------------
   상단 GNB: 데스크톱(≥768px) 한 줄 고정 — release/인라인 스타일·flex 축소 대비
   (PLAY LAB, WHY CODE?, 로그인 등 단어 단위 줄바꿈 방지)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.header .container {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
	}
	.header .logo {
		flex-shrink: 0;
	}
	.header .gnb {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end;
		flex: 1 1 auto;
		min-width: 0;
	}
	.header .gnb.cc-site-gnb .cc-main-nav-links > a.cc-nav-primary,
	.header .gnb.cc-site-gnb .cc-main-nav-links > a.cc-nav-primary.go_cocoble,
	.header .gnb.cc-site-gnb .cc-header-auth > a.login-link,
	.header .gnb.cc-site-gnb .cc-header-auth > a.logout-link {
		white-space: nowrap !important;
		flex-shrink: 0 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}
	.header .gnb.cc-site-gnb .cc-header-auth > a.login-link,
	.header .gnb.cc-site-gnb .cc-header-auth > a.logout-link {
		min-width: 110px;
		text-align: center;
		box-sizing: border-box;
	}
	.header .user-nav {
		flex-shrink: 0;
	}
}