@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;
\*------------------------------------*/

:root {
	--font-default: "Pretendard", sans-serif;
	--font-paperlogy: "Paperlogy-8ExtraBold", var(--font-default);
	--font-jalnan: "JalnanGothic", var(--font-default);
	--font-lipquid: "InkLipquid", var(--font-default);
	--color-default: #20294C;
	--color-primary: #34C1D8;
	
	--max-width:min(calc(100% - 40px), 1240px);
}

body {font-family: var(--font-default); color:var(--color-default); font-size:16px; line-height:1.5;  -webkit-text-size-adjust:none;}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {color:inherit; font-weight:700;}
h3 {margin-bottom:0;}

em {font-style:normal;}
button {color:var(--font-default); border:none;	background:transparent;	cursor: pointer; padding:0;}
picture {	display:block;}
img, video {max-width:100%; vertical-align:top;}

object, svg {position: absolute;height:100%;}

::placeholder {color:#B8BAC1;}

a:focus {outline:none;}
a:active,
button:not([disabled]):active,
button:not(.__active):active {animation:clickLink 0.1s linear forwards;}
button.__active:active {animation: none !important;}
@keyframes clickLink {
	from {transform:scale(1);}
	to {transform:scale(0.95);}
}

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

/* 색상 */
.c_primary {color:var(--color-primary) !important;}
.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;}

/* 정렬 */
.al_c {text-align:center;}
.flex {	display:flex;	display:-webkit-flex;	display:-ms-flex;}

/* 여백 */
.mt10 {margin-top:10px;}

/* 숨김처리 */
.scroll_hidden {overflow:hidden !important;}
.reader_only {position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);}

/* 타이틀 */
.title_01 {word-break:keep-all;	text-align:center;}
.title_01 .__label {display:block;}
.title_01 .__label img {width:100%;}
.title_01 .__main {font-family:var(--font-paperlogy); font-size:50px; font-weight:800; line-height: 1.35; letter-spacing:-0.01em;}
.title_01 .__sub {display:inline-block; font-size: 28px; line-height: 1.4; font-weight:500; letter-spacing:-0.01em;}
.title_01 .__sub strong {font-weight:800;}
.title_01 .__main ~ .__sub {margin-top:16px;}
.title_02 .__main {font-size:24px; line-height:1.4; font-weight:600; letter-spacing:-0.01em;}

/* 버튼 */
.btn {display:inline-block; color:var(--color-default); font-size:24px; line-height:2.5em; font-weight:600; padding:0 40px; background:#fff; border-radius:60px; transition:0.2s;}
.btn:hover {transform:scale(1.05);}
.btn.__green {background:#D9FF00;}
.btn.__link {display:flex; align-items:center; gap:20px; padding-right:20px;}
.btn.__link::after {content:''; display:inline-block; width:24px; height:24px; background:var(--color-default) url("../img/common/btn_arrow_right_white.svg") no-repeat center; border-radius:50%; transition:0.3s;}
.gotop {width:64px; height:64px; padding: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;}
.btn_close {display:inline-block; width:40px; height:40px; background:url("../img/common/btn-close.svg") no-repeat center; font-size:0;}
.btn_cocoble {	display:none;	position:absolute; top:-130px; right:14px;	width:70px; height:70px;	background:url("../img/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);}
.btn_scroll {	position:absolute; 	bottom:-200px; 	right:20px;	display: flex;	flex-direction: column;	align-items: center;	transition:all 0.5s ease-in-out;}
.btn_scroll.on {	bottom:118px;}
.btn_scroll .go_cocoble {	width:132px;	height:132px;}
.btn_scroll .go_cocoble img {	position: absolute;	opacity: 0;}
.btn_scroll .go_cocoble img.visible {	opacity: 1;}

/* 탭 메뉴 - all-in-one 학습 프로세스 */
.tab_header {position:relative;  padding:10px 0; z-index:5; margin-top:-79px; transition:background-color 0.2s;}
	.tab_header.fixed {position:sticky; top:80px; background:var(--color-default);}
.tab_header .container {max-width:1120px; padding:0; min-width:auto; margin:0 auto;}
.tab_header ul {display: flex;	justify-content: center; background:var(--color-default); border-radius:68px;}
.tab_header ul li {flex:1 0 280px;}
.tab_header a {display:block; color:#fff; font-size:24px; line-height:68px; font-weight:700; letter-spacing:-0.01em;	text-align:center; border-radius: 68px;}
.tab_header li.on a {color:var(--color-default); background:#fff;}
.tab_header li:nth-child(2).on a {background:#F1F6F9;}
.tab_header li:nth-child(4).on a {background:#D9EEFD;}
.tab_header a::after,
.tab_header a::before {display:none;	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;}
.tab_01 {overflow:auto; width:100%; text-align:right; margin-left:20px;}
.tab_01 ul {display:inline-flex; justify-content:flex-end; white-space:nowrap;}
.tab_01 ul li a {display:block; font-size:15px; padding:4px 10px; margin:0 5px; border:1px solid; border-radius:8px;}
.tab_02 {overflow:auto; width:100%; max-width:800px; padding:0 5px; margin:0 auto;}
.tab_02 ul {display:inline-flex; justify-content:flex-end; white-space:nowrap; margin:0 -5px;}
.tab_02 ul li a {display:block; padding:8px 16px; margin:0 5px;}
.select_01 {display:flex; justify-content:flex-end; align-items:center; width:100%; max-width:800px; margin:0 auto; padding:10px 20px; text-align:right;}
.select_01 label {font-weight:500;}
.select_01 select {width:150px; height:30px; padding-left:5px; margin-left:5px; color:#000; background:#fff; border:1px solid #ddd; border-radius:4px;}

/* 폼 요소 */
.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("../img/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("../img/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("../img/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;}

/* 레이아웃 */
html.gnb_on {overflow:hidden;}
html.gnb_on .gnb a::before {display:none;}
.container {	position:relative;	max-width:1240px;	padding:0 20px;	margin: 0 auto;}

/* header */
.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:20px;}
.logo {display:flex;	position:static;}
.logo > span {overflow:hidden;}
.logo > span a,
.logo > span img {float:left;}
.logo a img {height:40px;}
.logo .__light {display:none;}
	.header.fixed .logo .__light {display:block;}
	.header.fixed .logo .__dark {display:none;}
.gnb {	display:flex;	padding:0 !important;}
.gnb a {position:relative;	color:#fff; font-size:18px; 	line-height:40px; font-weight:600; padding:0 21px;transition:all 0.3s;}
.gnb a:hover,
.gnb a.on {color:var(--color-primary);}
.btn_menu {display:none; width:64px; height:64px; 	background:url("../img/common/btn_menu.svg") no-repeat center / 44px; font-size:0;}
.header.fixed {position:fixed;	top:0;	background:#fff; z-index: 997; /* layer_bg : 998, layer_content: 999 */}
.header.fixed .btn_menu {background-image:url("../img/common/btn_menu_blue.svg");}
.header.fixed .gnb a {color:#1A1818;}
.header.fixed .gnb a.on,
.header.fixed .gnb a:hover {color:var(--color-primary);}

/* ----------------------- 푸터 */

footer {position:relative; padding:45px 0 220px; background:#000; color:#fff; font-size: 16px;}
address {	display:block;	width: 100%;	max-width: 1200px;	margin:0 auto;	text-align: left;	font-style: normal;	font-weight:300;	line-height:1.75;	margin: 0 auto;	position: relative;}
footer .add em {	font-size: 12px;	line-height: 16px;	padding: 0 5px;	margin-right: 5px;	background: #3b404e;	border-radius: 10px;} 
footer .add em:last-child {	margin-left: 10px;}
address p {    display: flex; flex-wrap: wrap;		align-items: center;}
address p img {	height:23px;	margin-bottom:31px;}
address p a {    color: inherit;}
address p span {    position: relative;    padding-right: 10px;    margin-right: 10px;}
address p span::after {    content: '';    position: absolute;    top: 50%;    right: 0;    width: 1px;    height: 12px;    background: rgba(255,255,255,0.3);    transform: translateY(-50%);}
address p span:last-child {padding-right:0; margin-right:0;}
address p span:last-child::after {display:none;}
address .copy {	font-family:"Proxima"; 	font-size:14px; 	line-height:1.5; 	font-weight:300; 		margin-top:16px;	opacity: 0.8;}
address .copy img {	width:auto;	margin:0;}
.sns_wrap {	display:flex;	margin-top:30px;}
.sns_wrap a {	margin-right:18px;}

/* aside */
.aside_wrap {position:fixed; left:0; bottom:30px;	width:100%;	z-index: 20; transform:translateY(calc(100% + 50px)); transition:0.2s;}
.aside_wrap .__bottom_btn {position:relative; width:calc(100% - 40px); display:flex; align-items:center; justify-content:space-between; padding:0 24px; padding-left:240px;  max-width:1200px; height:90px; margin:0 auto; background:linear-gradient(90deg, #13248A, #0095CB, #13248A) left center / 200%; border-radius:90px; -webkit-clip-path:rect(-100% 100% 100% 0%); clip-path:rect(-100% 100% 100% 0%);
	animation:textGradientRolling 10s linear infinite;
}
.aside_wrap .__bottom_btn::before {transition:0.5s; content:''; position:absolute; bottom:0; left:0; width:240px; height:0; background:url("../img/common/aside_bottom_poi.png") no-repeat left top / 100%;}
.aside_wrap .__bottom_btn p {font-family:var(--font-paperlogy); color:#fff; font-size:32px;}
.aside_wrap .__bottom_btn p ~ p {display:none;}
.aside_wrap .__bottom_btn p strong {color:var(--color-default); color:#d9ff00;}
.aside_wrap .__bottom_btn a {opacity:0; transform:translateX(50%); transition:0.3s 0.3s; position:relative; overflow:hidden; font-family:var(--font-paperlogy); height:60px; font-size:24px; line-height:60px; font-weight:600; padding:0 46px; background:#fff; border-radius:60px;}
.aside_wrap .__bottom_btn a span {position:relative;}
.aside_wrap .__bottom_btn a em {display:none;}
.aside_wrap .__bottom_btn a::before {content:''; position:absolute; top:0; bottom:0; left:0; right:0; background:#5CFFFF; border-radius:60px; transform:translateX(-100%); transition:0.3s;}
.aside_wrap .__bottom_btn a::after {content:''; position:relative; display:inline-block; width:10px; height:100%; margin-left:14px; background:url("../img/common/aside_bottom_btn_arrow.svg") no-repeat center; vertical-align:top; z-index:1;}
.aside_wrap .__bottom_btn a:hover::before {transform:none;}
[data-page="solution"] .aside_wrap .__bottom_btn p {display:none;}
[data-page="solution"] .aside_wrap .__bottom_btn p ~ p {display:block;}
[data-page="solution"] .aside_wrap .__bottom_btn::before {background-image:url("../img/common/aside_bottom_doctor.png");}
.aside_wrap.__active {transform:none;}
.aside_wrap.__active .__bottom_btn::before {height:163px;}
.aside_wrap.__active .__bottom_btn a {opacity:1; transform:none;}