@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;
}
.logo a {
	display:flex; align-items:center;
	height:100%;
}
.gnb {
	display:flex;
}
.gnb a {
	position:relative;
	color:#fff; 
	font-size:18px; 
	line-height:48px;
	padding:0 36px;
	transition:all 0.3s;
}
.gnb a:first-child::before {
	content:'';
	position:absolute; 	
	top:50%; 
	right:0; 
	transform:translateY(-50%);
	width:1px; height:18px;
	background:#fff;
}
.gnb a:last-child {
	font-size:16px; 
	line-height:46px;
	margin-left:10px;
	border:1px solid #fff; 
	border-radius:30px;
	padding:0 28px;
}
.gnb a ~ a::before,
.gnb a:first-child::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 18px;
	background: #fff;
}
.gnb a:first-child::before,
.gnb a:last-child::before {
	display:none;
}
.gnb a:hover,
	.header.fixed .gnb a:not(.on):hover {color:#062D93;}
.gnb a.on {
	color:#F7F736; 
}
.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);
}
/* 로그인 아이콘이 있을 때 WHY CODE? 버튼에 마진 추가 */
body:not(.logged-in) .gnb a:last-child {
	margin-right: 60px;
}
/* 로그인 후에도 유저 아이콘과의 간격 유지 */
body.logged-in .gnb a:last-child {
	margin-right: 50px;
}
.btn_menu {
	display:none; width:60px; height:60px;
	background:url("../../images/20231009/btn-topmenu-hamburger.svg") no-repeat center / 30px;
	font-size:0;
}
.header.fixed {
	position:fixed;
	top:0;
	background:#fff;
	box-shadow: 0px 3px 6px #00000029;
	z-index: 997; /* layer_bg : 998, layer_content: 999 */
}
.header.fixed .btn_menu {background-image:url("../../images/20231009/btn-topmenu-hamburger-blue.svg");}
.header.fixed .gnb a {
	color:#6C6C6C;
}
.header.fixed .gnb a.on {
	color:#2F67FB;
}
.header.fixed .gnb a:first-child::before {
	background:#6C6C6C;
}
.header.fixed .gnb a:last-child {
	display: none;
}
.header.fixed .gnb a ~ a::before,
.header.fixed .gnb a:first-child::before {
		background:rgba(108,108,108,0.5);
}
.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.fixed .user-icon:hover {
	background: rgba(47, 103, 251, 0.2);
	box-shadow: 0 4px 12px rgba(47, 103, 251, 0.3);
}
.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.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);
}
html.gnb_on {
	overflow:hidden;
}
html.gnb_on .gnb a::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;}