@charset "UTF-8";

@font-face {
    font-family: "GmarketSans";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "GmarketSans";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'TmoneyRoundWindExtraBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ONE-Mobile-POP';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Onestore/ONE-Mobile-POP.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 공통 */
.font_g {font-family:"GmarketSans", "Pretendard", sans-serif;}

.cocoble_wrap img,
.cocoble_wrap video {max-width:100%; vertical-align:top;}

.cocoble_wrap .conArea02 {color:#000; line-height:1.4; letter-spacing:-0.05em;}
[class ^= "section"] {padding:0 20px;}
[class ^= "section"] .tit_xl {font-size: 36px; line-height: 40px; color:#fff; font-weight: 800; text-align: center;}
[class ^= "section"] .tit_lg {font-size:24px; color:#fff; text-align: center;}
[class ^= "section"] .tit_md {font-size:28px; color:#000; text-align: center;}
[class ^= "section"] .tit_md span {font-size: 18px; color:#000; display: inline-block; margin-bottom: 10px; }

[class ^= "section"]  .tit_lbl {font-size: 12px; line-height: 18px; border-radius:26px; border: 1px solid #35DEC3; color:#35DEC3; padding:5px 15px; font-weight: 400; margin-bottom: 10px; display: inline-block; text-align: center;}

div.tit .tit_sub {font-size: 16px; color:#000000;}
div.tit strong {font-size: 24px; color:#000000; display: block;		}


.new-section {
	h1, h2, h3, h4, p, span, ul, li, .sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: normal;
		border: 0;
	}
}

.btn-block {display:flex; justify-content:center; padding:30px; background:#f2f6fa;}
.btn-block .btn {display: block;    text-align: center;    font-size: clamp(16px, 3.4vw, 20px);    background: #20284c;    color: #fff;    line-height: 2.6;    border-radius: 2em;    font-weight: bold;    width: min(calc(100% - 60px), 340px);}

/* 01 */
.section_01 {padding:226px 0 33px; width:100%; background:url("/images/cocoble/section1-bg.png") no-repeat center / cover; text-align: center; overflow:hidden; position:relative;}
.section_01 .tit_xl { margin-bottom: 20px;}
.section_01 .tit_xl strong {color:#3EFFE0; font-size:36px; margin-top: 10px;}
.section_01 .tit_desc {color:#fff; font-size: 14px; line-height: 20px;	}
.section_01 .chat {position:absolute; left: 50%; top: 183px; width: 155px; animation: chatToLeft 0.7s forwards; transform:translateX(500px); animation-delay:1s;}
@keyframes chatToLeft {
	0% {transform:translateX(500px)}
	100% {transform:translateX(-50%)}
}

.section_02 {color:#fff;  text-align:center; padding:41px 0 112px; 	background:url("/images/cocoble/section2-bg.png") no-repeat center bottom / cover; margin-top: -1px; }
.section_02 .tit_lg strong {color:#35DEC3; font-weight: 800;}
.section_02 .card_01 {display:flex; justify-content:center; margin-top: 22px;}
.section_02 .card_01 ul {display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding:10px;}
.section_02 .card_01 ul li {box-sizing:border-box; display:flex; flex-direction:column; width:calc(50% - 10px); padding:7px; text-align:center; border-radius:16px; background:#fff;}
.section_02 .card_01 ul li .list_title {order:1; color:#0B1B43; font-size:11px; font-weight:500; margin-top:5px; margin-bottom:0;}
.section_02 .card_01 ul li .list_title strong {display:block; font-size:14px; font-weight:800;}



.section_03 {background:#081B46; padding:0; text-align: center; margin-top:-1px; position:relative;}
.section_03 > div {margin-top: -37px;}
.section_03::after {content:''; position:absolute; left:0; top:calc(100% - 1px); width:100%; height:200px; clip-path:polygon(0% 0%, 100% 0%, 100% 60%, 0% 22%); background:#0a1c44;}
.section_03 .tit_lbl {color:#FFBB04; border-color:#FFBB04; }
.section_03 .tit_lg strong {color:#FFBB04; }
.section_03 .tit_desc {color:#fff; font-size: 12px; line-height: 17px; margin-top: 15px;}
.line_web {position:relative; width:100%; max-width:780px; margin:-30px auto 0;}
.line_web::before {content:""; background:url(/images/cocoble/section3-bg.svg) no-repeat center / 136% auto; width:100%; height: 500px; display: inline-block;}
.line_web .web_circle {opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); box-shadow:3px 4px 4px rgb(0 0 0 / 10%), inset -4px -5px 6px rgb(0 0 0 / 20%); border-radius:50%; display:flex; align-items:center; justify-content:center; width:99px; height:99px; color:#fff; font-size:15px; font-weight:700;
	transition:0.5s ease-out;}
.line_web .web_circle.circle_1 {width:128px; height:128px; background:#ffbb01;}
.line_web .web_circle.circle_2 {background:#8f77f3;}
.line_web .web_circle.circle_3 {background:#8dc300;}
.line_web .web_circle.circle_4 {background:#1ca8ff;}
.line_web.on .web_circle {opacity:1;}
.line_web.on .web_circle.circle_1 {transition-delay:0.3s; transform:translate(-132%, -103%);}
.line_web.on .web_circle.circle_2 {transition-delay:0.4s; transform:translate(41.65%, -117%);}
.line_web.on .web_circle.circle_3 {transition-delay:0.5s; transform:translate(-102%, 55.8%);}
.line_web.on .web_circle.circle_4 {transition-delay:0.6s; transform:translate(51.6%, 5.8%);}
.line_web .web_light {opacity:0; position:absolute; width:14px; height:14px; background:#fff; box-shadow:0 0 10px #ffffffd9; border-radius:50%; font-size:0; transition:0.2s 0.3s; }
.line_web .web_light.light_1 {top:14%; left:47%;}
.line_web .web_light.light_2 {top:55%; left:20%;}
.line_web .web_light.light_3 {width: 18px; height: 18px; top: 80%; left: 59%;}
.line_web.on .web_light {opacity:1;}

/* video */
.video_wrap {position:relative; position: relative; margin-top: -75px; text-align: center; color:#0B1532; margin-bottom: 96px;}
.video_frame {width:95%; margin:0 auto; position:relative;}
.video1 video {	width:100%; border-radius: 16px;	overflow:hidden;}
.video_wrap p { margin-top: 10px ; margin-bottom:3px; font-size: 12px; color:#0B1532; font-weight: 600; }
.video_wrap h2 {font-size:16px; font-weight: 800; color:#0B1532;}
.video_btn {display: none; border-radius:50%;	width:87px;	height:87px;	text-indent:-999999em;	position:absolute;	left:50%;	top:50%;	transform:translate(-50%,-50%); border:none;}
.video_btn.play {background:url("/images/cocoble/ico_play.png") no-repeat center / cover;}
.video_btn.stop {background:url("/images/cocoble/ico_stop.svg") no-repeat center / 73px auto;}
.video_stop .video_btn.play {display: block;}
.video_play:hover .video_btn.stop {display: block;}

/* 04 */

.section_04 {padding:109px 24px 24px; background:#F7F7F7; border-radius: 0 0 24px 24px;}
.section_04 .tit {margin-bottom:33px; text-align: center;}
.card_list_02 {padding:20px; background:#fff; border-radius:12px;}
.card_list_02 ul li {position:relative; display:flex; align-items:center;}
.card_list_02 ul li::before,
.card_list_02 ul li::after {content:''; position:absolute; width: 40%; height: 30px; border-left: 1px dashed; border-bottom: 1px dashed; border-color:#d7d7d7; border-bottom-left-radius:10px;}
.card_list_02 ul li::before {bottom: -30px; left: 10%;}
.card_list_02 ul li::after {bottom:-60px; right:10%; transform:scale(-1);}
.card_list_02 ul li:nth-child(2)::before {bottom:-60px; transform:scaleY(-1);}
.card_list_02 ul li:nth-child(2)::after {bottom:-30px; transform:scaleX(-1);}
.card_list_02 ul li:nth-child(4)::before,
.card_list_02 ul li:nth-child(4)::after {display:none;}

.card_list_02 ul li ~ li {margin-top:60px;}
.card_list_02 ul li .list_tit {flex:1; color:#848484; font-size:14px; font-weight:400; line-height:1.42; 	letter-spacing:-0.04em;	word-break: keep-all; text-align:left;}
.card_list_02 ul li .list_tit span {display: inline-block; width: 55px; color: #fff; font-size: 12px; font-weight: 500; line-height: 22px; text-align: center; margin-bottom: 6px; border-radius: 20px; background: #FDA310;}
.card_list_02 ul li:nth-child(2) .list_tit span {background:#1EAEFC;}
.card_list_02 ul li:nth-child(3) .list_tit span {background:#78BF01;}
.card_list_02 ul li:nth-child(4) .list_tit span {background:#A54AFF;}
.card_list_02 ul li .list_tit strong {font-family: "GmarketSans", sans-serif; display:block; font-size:16px; font-weight:700;color:#FDA310;}
.card_list_02 ul li:nth-child(2) .list_tit strong {color:#1EAEFC;}
.card_list_02 ul li:nth-child(3) .list_tit strong {color:#78BF01;}
.card_list_02 ul li:nth-child(4) .list_tit strong {color:#A54AFF;}
.card_list_02 ul li .list_tit:nth-child(2) {color:rgba(255,255,255,0.8);}
.card_list_02 ul li .img_wrap {width:48%; max-width:330px; border:2px solid; border-radius:10px; overflow:hidden;}
.card_list_02 ul li:first-child .img_wrap {border-color:#FDA310}
.card_list_02 ul li:nth-child(2) .img_wrap {border-color:#1EAEFC}
.card_list_02 ul li:nth-child(3) .img_wrap {border-color:#78BF01}
.card_list_02 ul li:nth-child(4) .img_wrap {border-color:#A54AFF}
.card_list_02 ul li:nth-child(odd) .list_tit {padding-left:12px;}
.card_list_02 ul li:nth-child(odd) .img_wrap {order:-1;}
.card_list_02 ul li:nth-child(even) .list_tit {text-align:right; padding-right:12px;}

/* 05 */
.section_05 .tit {margin:72px 0 36px; text-align: center; }
.section_05 .tit strong {font-size: 30px;}

/* 06 ~ 09 */
.section_06 {padding:0 10px 20px;}
.section_06 article {display:block; border-radius:15px; overflow:hidden;}
.section_06 article ~ article {margin-top:24px;}
.section_06 .tit {text-align:center; font-family:"GmarketSans"; color:#fff; font-size:24px; font-weight:500; padding:16px 20px;}
.section_06 .tit strong {font-weight:700;}
.section_06 .tit .tit_label { height:25px; padding:0 15px; text-align:center; background:#fff; margin:0 auto 14px; border-radius:30px; display: inline-block;}
.section_06 .tit .tit_label img {width:auto; height:16px; margin-top: 4px;}
.section_06 .tit .tit_sub {display:block; font-size:16px; }
.section_06 .tit p {font-size:14px; font-weight:400; margin-top:13px; font-family:"Pretendard"; }
.section_06 article:first-child .tit {background:#FCA310;}
.section_06 article:first-child .tit img {height:17px;}
.section_06 article:nth-child(2) .tit {background:#20AEFC}
.section_06 article:nth-child(3) .tit {background:#78BF04}
.section_06 article:nth-child(4) .tit {background:#A54AFF}
.section_06 article:nth-child(4) .tit img {height:20px; margin-top: 2px;}

.card_list_03 { background:#FEF8ED; padding:5px 0 35px;}
.card_list_03 ul {width:80%; max-width:660px; margin:0 auto;}
.card_list_03 ul li {position:relative; margin-top:22px; padding:0 9px; box-sizing:border-box;}
.card_list_03 ul li::before {content:''; position:absolute; top:15px; left:-50%; right:-50%; height:2px; background-image:linear-gradient(to right, rgba(157, 109, 30, 0.8) 30%, rgba(255, 255, 255, 0) 0%); background-position: top; background-size: 6px 2px; background-repeat: repeat-x;}
.card_list_03 ul li:first-child::before {left:50%;}
.card_list_03 ul li:last-child::before {right:50%;}
.card_list_03 ul li .list_tit {position:relative; width:136px; margin:0 auto 10px; text-align:center; color:#fff; font-size:16px; line-height:32px; border-radius:20px; background:#FDA310;}


.card_list_04 {background:#F0FAFF; padding:30px 12px 37px;}
.card_list_04 .video_thumb {position:relative; border-radius: 10px; overflow:hidden;}
.card_list_04 .slide_title { font-size: 18px; color:#022962; text-align: center; margin-top: 5px;	font-weight: 700;}
.card_list_04 ul li {background:#fff; border-radius:16px; padding:12px 12px 5px; box-shadow: 2px 6px 8px #00000014;}
.card_list_04 ul li ~ li {margin-top:20px;}


.card_upgrade {background:#F3FAE7; padding:60px 20px 20px;text-align: center; }

.card_upgrade div > .tit_lbl {font-family:"ONE-Mobile-POP"; color:#fff; font-weight: 100; background:url("/images/cocoble/section6-tit-bg-1.svg") no-repeat center / 190px; font-size: 23px; height:70px; position:absolute; left:50%; line-height: 70px; transform:translateX(-50%); top:-32px; text-align: center; border:none; width:100%;}
.card_upgrade .grade_b .tit_lbl {background-image:url("/images/cocoble/section6-tit-bg-2.svg"); }
.card_upgrade > div { display: flex; flex-direction: column; background: #fff; padding:57px 30px 40px; border-radius: 24px; margin-bottom: 60px; position:relative;}
.card_upgrade .grade_b {margin-bottom: 0;}
.card_upgrade ul {display:flex; flex-direction:column; align-items:center; justify-content: center; gap:36px; }
.card_upgrade li h4 {font-size: 20px; color:#19517B; font-weight: 700; line-height: 40px; margin: 14px 0 10px;	}
.card_upgrade .grade_b li h4 {color:#584935;}
.card_upgrade li p { color:#444444; font-size: 15px; line-height: 20px;}
.card_upgrade .thumb {width:260px; border-radius:16px; overflow:hidden; border:4px solid #EFEFEF; float:none;}



.card_list_05 {padding:30px 32px 33px; background:#FBF4FC;}
.card_list_05 ul li {	border-radius: 12px;	overflow: hidden;	background:#fff; display: flex; flex-direction: column;  margin-bottom: 20px; border-radius: 20px;}
.card_list_05 ul li ~ li {margin-top:16px;}
.card_list_05 ul li .list_tit { font-family: 'TmoneyRoundWindExtraBold', sans-serif; font-size:18px; display:flex;	justify-content: center;	align-items: center;	flex-direction: column;	text-align: center;	padding:17px 0 23px;	color:#2E2E2E;}
.card_list_05 ul li:nth-child(2) .list_tit {transform:translateY(-10%); padding-bottom:17px;}
.section_07 {background:#16172D; padding:48px 0; text-align: center;}
.bubble_wrap {text-align: center; margin-bottom: 20px; overflow:hidden;}
.section_07.on .bubble_wrap {animation: bubbleRotate 2s infinite; animation-delay:0.5s; transform-origin:center bottom;} 
.section_07 .bubble_wrap img {transform:translateY(100%); transition:0.3s; transition-delay:0.5s; }
.section_07.on .bubble_wrap img {transform:translateY(0); height:27px;}
.section_07 .link_btn {margin-top: 20px; display: inline-block; height:27px}
.section_07 .link_btn img {height:100%; }


@keyframes bubbleRotate {
	0% {transform:translateY(0)}
	10% {transform:translateY(-4px)}
	20% {transform:translateY(-3px)}
	30% {transform:translateY(-4px)}
	100% {transform:translateY(0)}
}

/* fixed_footer */
.btop {bottom:9rem; }
.fixed_footer { z-index:102;}
.fixed_footer .cont {max-width:768px; width:100%; margin:0 auto; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:0 0 7px 3px rgba(0,0,0,0.1);  background-color:#ffffea; position:relative;}
.fixed_footer.spread .cont {background:#fff}
.fixed_footer .btn {max-width:none;height: auto;line-height: 70px; background:#D3EF39; color: #15162a;border-radius: 40px;box-shadow:none;font-size: 24px;}
.fixed_footer .btn02 {font-family:"GmarketSans", sans-serif;position:relative; display:block;	color:#16172c; font-size:16px; font-weight:500; line-height:1.4; text-align:center; padding:30px 0; border-bottom:1px solid transparent;	background:#D3EF39; border-radius:20px 20px 0 0;}
.fixed_footer .btn02::before {display:none;content:'';position:absolute;top: calc(50% - 9px);right: 8%;width: 12px;height: 12px;border-left: 3px solid #ddd;border-bottom: 3px solid #ddd;transform: rotate(-45deg);}
	.fixed_footer.spread .btn02 {padding:18px 0 10px;background: #fff;color: #070137;border-bottom: 1px solid;}
	.fixed_footer.spread .btn02::before {display:block;}
.fixed_footer .btn02 strong {display:block; font-size:24px; font-weight:700;}

.fixed_footer .hidden_cont { padding:0 20px 20px; display:none;}
.fixed_footer .hidden_cont ul {padding:20px 10px;}
.fixed_footer .hidden_cont ul li {text-align:left; font-size:18px; margin-bottom:15px;  }
.fixed_footer .hidden_cont ul li .num {margin-right:12px; width:40px; height:40px; line-height:40px; text-align:center; font-size:16px; background: #e6e6e6; border-radius:50%; display:inline-block; position:relative; }

.fixed_footer .input_area::after {content:''; display:block; clear:both;}
.fixed_footer select {width: 80px;height: 45px;display:block;float:left;padding: 0 10px;margin-right: 8px;color:#000; font-size: 16px;-webkit-appearance: none;-moz-appearance: none;appearance: none;background: #fff url('/images/ico_fold_spread_lightblk02.png') no-repeat right 8px center / 12px;/* background-size:1.3rem; */border:1px solid #333;border-radius: 15px;}
.fixed_footer input[type="tel"] {width: calc(100% - 115px);padding: 0 8px;font-size: 16px;display:block;float:left;border-radius: 15px;border-color:#333;line-height: 43px;}
.fixed_footer .txt {text-align:left; color:#BBBBBB; font-size:16px; margin:20px 0 30px; }
.fixed_footer .txt::after {content:''; display:block; clear:both; }
.fixed_footer .txt div:first-child {max-width:78%;}
.fixed_footer .txt div:last-child {float:right;}
.fixed_footer label.input_check span {position:relative; display:block; padding-left:29px; word-break:keep-all;}
.fixed_footer label.input_check span::before {content:'';position:absolute; left:0; width: 22px;height: 22px;margin-right: 5px;border:1px solid #ccc;border-radius:50%;}
.fixed_footer label.input_check span::after {content:'';position:absolute;top:13px;left: 6px;width: 10px;height: 6px;border-left: 2px solid #ccc;border-bottom: 2px solid #ccc;transform:rotate(-49deg);}
.fixed_footer label.input_check input:checked + span::before {border-color:#070236; background:#070236;}
.fixed_footer label.input_check input:checked + span::after {border-color:#fff;}
.fixed_footer .btn_agree {color:#BBBBBB; font-size:16px;}

.agree_layer {position:absolute; left:0; top:0; max-width:768px; margin-top:0; padding-bottom:20px; border-radius:20px 20px 0 0; display:none;}
.agree_layer .boxCon {font-size:16px; text-align:left; line-height:1.4; height:410px; overflow-y:scroll; }
.agree_layer h2 {font-size:20px; margin:15px 0 10px}
.agree_layer h3 {font-size:16px;}
.agree_layer .close {width: 16px;right: 15px;top: 20px;}
.agree_layer .close img {width:100%;}

@media all and (min-width:768px) {
	[class ^= "section"] .tit_xl {font-size: 60px; line-height: 65px;}
	.section_01 .tit_xl strong {font-size: 60px; line-height: 65px;}
	[class ^= "section"] .tit_lg { font-size: 40px; line-height: 45px;}
	[class ^= "section"] .tit_lbl {font-size: 15px; margin-bottom: 20px;}
	.section_01 {padding:426px 0 33px;}
	.section_01 .chat {width:260px; top:296px; }
	.section_01 .tit_desc {font-size: 16px; line-height: 22px;}
	.section_02 {padding:100px 0 170px; }
	.card_list_02 {padding:40px;}
	.card_list_02 ul li .list_tit strong {font-size: 20px;}
	.card_list_02 ul li .img_wrap {border-radius:20px;}
	.card_list_02 ul li .list_tit {font-size: 17px;}
	.card_list_04 {padding:30px 40px 37px;}
	.video_wrap p {font-size: 16px;}
	.video_wrap h2 {font-size: 24px;}
	.line_web::before {background:url(/images/cocoble/section3-bg.svg) no-repeat center / auto 100%; animation: infiniteRotate 80s infinite; }

		@keyframes infiniteRotate {
			0%,100% {transform:rotate(0deg);}
			50% {transform:rotate(360deg);}
		}
	.line_web .web_light {display: none;}
	.section_03 .tit_desc {font-size: 16px; line-height: 22px;}
	.section_02 .card_01 ul {width:80%; gap:20px;}
	.section_02 .card_01 ul li .list_title {font-size: 15px}
	.section_02 .card_01 ul li .list_title strong {font-size: 18px;}
	.section_06 .tit {padding:25px 20px;}
	.section_06 .tit .tit_sub {font-size: 18px;}
	.section_06 .tit strong {font-size: 30px;}
	.section_06 .tit p { font-size: 16px; width: 80%; margin: 10px auto; word-break: keep-all;}
	.section_06 .tit p br {display: none;}
	.card_list_03 {padding:20px 0 35px;}
	.card_list_03 ul {max-width:500px;}
	.card_upgrade ul {flex-direction: row;}
	.section_07.on .bubble_wrap img, .section_07 .link_btn {height:40px;}
}


@media all and (min-width:560px) {
	.video_frame {width:70%;}
	.card_list_03 ul {width:100%; }
	.card_upgrade ul {align-items: center;}
	.card_list_05 {padding:20px 16px 20px;}
	.card_list_05 ul {width:70%; margin:0 auto;}
	.card_list_05 ul li .list_tit {font-size: 18px;}
	.card_list_05 ul li {margin-top: 0; margin-bottom:20px;}
}