@charset "utf-8";

@font-face {
    font-family: 'NexonLv1Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'NexonLv1Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'NexonLv1Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
:root { 
	--mainColor:#FFAE00;
	--mintColor: #00b6ad;
	--font54:5.4rem;
	--font52:5.2rem;
	--font50:5.0rem;
	--font48:4.8rem;
	--font46:4.6rem;
	--font45:4.5rem;
	--font44:4.4rem;
	--font40:4.0rem;
	--font36:3.6rem; 
	--font34:3.4rem;
	--font32:3.2rem;
	--font30:3.0rem;
	--font28:2.8rem;
	--font26:2.6rem;
	--font25:2.5rem;
	--font24:2.4rem;
	--font23:2.3rem;
	--font22:2.2rem;
	--font21:2.1rem;
	--font20:2.0rem;
	--font19:1.9rem;
	--font18:1.8rem;
	--font17:1.7rem;
	--font16:1.6rem;
	--font15:1.5rem;
	--font14:1.4rem;
}
@media screen and (max-width:1440px){
	:root {
		--font54:4.35rem;
		--font52:4.3rem;
		--font50:4.2rem;
		--font48:4.0rem;
		--font46:3.8rem;
		--font45:3.75rem;
		--font44:3.7rem;
		--font40:3.4rem;
		--font36:3.2rem;
		--font34:3.1rem;
		--font32:2.9rem; 
		--font30:2.8rem;
		--font28:2.6rem;
		--font26:2.4rem;
		--font25:2.35rem;
		--font24:2.3rem;
		--font23:2.2rem;
		--font22:2.1rem;
		--font21:2.0rem;
		--font20:1.9rem;
		--font19:1.8rem; 
		--font18:1.7rem;
		--font17:1.6rem;
		--font16:1.5rem;
		--font15:1.4rem;
		--font14:1.3rem;
	}
}
@media screen and (max-width:1280px){
	:root { 
		--font54:3.9rem;
		--font52:3.85rem;
		--font50:3.8rem;
		--font48:3.5rem;
		--font46:3.3rem;
		--font45:3.25rem;
		--font44:3.2rem;
		--font40:3.0rem;
		--font36:2.8rem;
		--font34:2.7rem;
		--font32:2.65rem; 
		--font30:2.6rem;
		--font28:2.4rem;
		--font26:2.3rem;
		--font25:2.25rem;
		--font24:2.2rem;
		--font23:2.1rem;
		--font22:2.0rem;
		--font21:1.9rem;
		--font20:1.8rem; 
		--font19:1.7rem; 
		--font18:1.6rem;
		--font17:1.5rem;
		--font16:1.45rem;
		--font15:1.3rem;
		--font14:1.25rem;
	}
}
@media screen and (max-width:1024px){
	:root { 
		--font54:3.1rem;
		--font52:3.05rem;
		--font50:3.0rem;
		--font48:2.85rem;
		--font46:2.7rem;
		--font45:2.65rem;
		--font44:2.6rem;
		--font40:2.5rem;
		--font36:2.4rem;
		--font34:2.35rem;
		--font32:2.32rem; 
		--font30:2.3rem;
		--font28:2.2rem;
		--font26:2.15rem;
		--font25:2.12rem;
		--font24:2.1rem;
		--font23:2.0rem;
		--font22:1.9rem;
		--font21:1.8rem;
		--font20:1.7rem;
		--font19:1.65rem;  
		--font18:1.6rem;
		--font17:1.5rem;
		--font16:1.4rem;
		--font15:1.3rem;
		--font14:1.2rem;
	}
}
@media screen and (max-width:640px){
	:root { 
		--font54:2.65rem;
		--font52:2.62rem;
		--font50:2.6rem;
		--font48:2.5rem;
		--font46:2.3rem;
		--font44:2.25rem;
		--font40:2.2rem;
		--font36:2.15rem;
		--font34:2.13rem;
		--font32:2.10rem; 
		--font30:2.05rem;
		--font28:2.0rem;
		--font26:1.95rem;
		--font25:1.92rem;
		--font24:1.9rem;
		--font23:1.85rem;
		--font22:1.8rem;
		--font21:1.7rem;
		--font20:1.65rem;
		--font19:1.5rem;  
		--font18:1.4rem;
		--font17:1.3rem;
		--font16:1.35rem;
		--font15:1.2rem;
		--font14:1.1rem;
	}
}

body { background:#151515; font-size:1.2rem; }
* { font-family: 'NexonLv1Gothic'; }
body, html,
#wrap { height:100%; }
.inner1000 { max-width:1000px; margin:0 auto; }
.gap30 { margin-top:30px; }
.gap40 { margin-top:40px; }
.gap60 { margin-top:60px; }
.header { position:relative; height:100px; border-bottom:1px solid rgba(255, 255, 255, 0.20); }
.header .logo { padding-left:40px; height:100%; display:flex; align-items:center; gap:20px; }
.header .logo .txt { color:#fff; font-size:var(--font22); font-weight:700; line-height:1.3; }
.header .logo img { border-radius:4px; }
.header .r-logo { position:absolute; right:40px; top:50%; transform:translateY(-50%); }
.header .r-logo img { width:248px; }
#wrap h2 { display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--font54); font-weight:700; line-height:1.3; text-align:center; height:190px; background:#1b1b1b; }
.contents { position:relative; padding:60px 0 100px; min-height:calc(100% - 100px - 190px); }
.btnbox { margin:0 auto; max-width:1000px; }
.btnbox .btn { margin-top:120px; display:flex; align-items:center; justify-content:center; gap:10px; }
.btnbox .btn a { width:100%; height:70px; color:#fff; font-size:var(--font22); font-weight:700; line-height:1.3; border-radius:10px; background:var(--mainColor); display:flex; align-items:center; justify-content:center; gap:10px; }
.btnbox .btn a.prev { background:#222; color:#777; }
.btnbox .btn a.mint { background:var(--mintColor); color:#fff; }
.btnbox .btn a.btn_w { background:#fff; color:#333; }
.btnbox .txt { margin-top:30px; color:#555; font-size:var(--font20); font-weight:400; line-height:1.3; text-align:center; }
.txt-list1.txt-ac { text-align:center; }
.txt-list1 p:not(:last-child) { margin-bottom:30px; }
.txt-list1 p { color:#fff; font-size:var(--font18); font-weight:400; line-height:1.5; }
.txt-list1 p strong { font-weight:700; }
.txt-list1 p img { vertical-align:middle; margin:0 0 0 10px; }

.txt-list2 { margin-top:20px; border-radius:20px; border:1px solid rgba(255, 255, 255, 0.20); padding:50px; }
.txt-list2 li:not(:last-child) { margin-bottom:10px; }
.txt-list2 li { position:relative; padding-left:15px; color:#fff; font-size:var(--font17); font-weight:400; line-height:1.3; }
.txt-list2 li:before { content:''; display:block; width:5px; height:1px; background:#fff; position:absolute; left:0; top:10px; }

.ch-list { margin:30px auto 0; max-width:1000px; } 
.ch-list .ch { position:relative; }
.ch-list .ch:not(:last-child) { margin-bottom:10px; }
.ch-list .ch input[type="checkbox"],
.ch-list .ch input[type="radio"] { position:absolute; left:0; top:3px; opacity:0; }
.ch-list .ch input[type="checkbox"] + span,
.ch-list .ch input[type="radio"] + span { cursor:pointer; transition:all 0.3s; position:relative; padding:40px 50px 40px 100px; color:#fff; font-size:var(--font17); font-weight:400; line-height:1.5; display:block; border-radius:20px; border:2px solid rgba(255, 255, 255, 0.05); }
.ch-list .ch input[type="checkbox"] + span:before,
.ch-list .ch input[type="radio"] + span:before { content:''; display:block; width:30px; height:30px; vertical-align:middle; transition:all 0.3s; background:url(/sub/heart/mental/img/ch_off.svg) no-repeat center/ cover; position:absolute; left:50px; top:50%; transform:translateY(-50%); }
.ch-list .ch input[type="checkbox"]:checked + span:before,
.ch-list .ch input[type="radio"]:checked + span:before { background:url(/sub/heart/mental/img/ch_on.svg) no-repeat center/ cover; }
.ch-list .ch input[type="checkbox"]:checked + span,
.ch-list .ch input[type="radio"]:checked + span { color:#111; border-color:#fff; background:#fff; }

@media screen and (max-width:1024px){
	.gap30 { margin-top:15px; }
	.gap40 { margin-top:20px; }
	.gap60 { margin-top:30px; }
	.header { height:80px; }
	.header .logo { padding-left:20px; }
	.header .r-logo { right:20px; }
	.header .r-logo img { width:200px; }
	#wrap h2 { height:100px; padding:0 10px; }
	.contents { padding:30px 20px 80px; }
	.btnbox .btn { margin-top:60px; }
	.btnbox .btn a { height:60px; border-radius:5px; gap:6px; }
	.btnbox .txt { margin-top:15px; }
	.txt-list1 p:not(:last-child) { margin-bottom:15px; }
	.txt-list1 p br { display:none }
	.txt-list1 p span.m_br { display:block }
	.txt-list1 p img { margin:0 0 0 8px; height:30px; }
	.txt-list2 { margin-top:10px; border-radius:10px; padding:20px; }
	.txt-list2 li:not(:last-child) { margin-bottom:8px; }
	.txt-list2 li { padding-left:12px; }
	.txt-list2 li:before { width:4px; top:7px; }
	.ch-list .ch input[type="checkbox"] + span,
	.ch-list .ch input[type="radio"] + span { padding:20px 25px 20px 50px; border-radius:10px; border-width:1px; }
	.ch-list .ch input[type="checkbox"] + span:before,
	.ch-list .ch input[type="radio"] + span:before  { width:20px; height:20px; left:20px; }
}
@media screen and (max-width:640px){
	.header { height:100px; }
	.header .logo { gap:5px; }
	.header .logo .txt { font-size:var(--font20); }
	.header .logo .txt span { display:block; }
	.header .logo img { width:70px; }
	.header .r-logo img { width:180px; }
}

.welcome .imgbox { margin:0 auto; text-align:center; }
.welcome .txt-list1 { margin:60px 0; }
.welcome .sbox { margin:0 auto; padding:40px; text-align:center; max-width:1000px; border-radius:20px; background:rgba(255, 255, 255, 0.2);}
.welcome .sbox dt { margin:0 0 15px; color:#fff; font-size:var(--font18); font-weight:700; line-height:1.5; display:flex; align-items:center; justify-content:center; text-align:center; gap:12px; }
.welcome .sbox dt img { width:55px; }
.welcome .sbox dd { color:rgba(255, 255, 255, 0.80); font-size:var(--font17); font-weight:400; line-height:1.5; }
@media screen and (max-width:1024px){
	.welcome .txt-list1 { margin:30px 0; }
	.welcome .sbox { padding:20px; border-radius:10px; }
	.welcome .sbox dt { margin:0 0 8px; gap:10px; }
	.welcome .sbox dt img { width:48px; }
}


.sides .imgbox { margin:100px 0; text-align:center; display:flex; align-items:center; justify-content:center; gap:0 80px; }
.sides .imgbox figure { margin:0; padding:0; }
@media screen and (max-width:1024px){
	.sides .imgbox { margin:50px 0; gap:0 40px; }
	.sides .imgbox figure { height:135px; }
}

.matrix .btn_mov { text-align:center; margin-bottom:60px; }
.matrix .btn_mov a { display:inline-flex; align-items:center; justify-content:center; height:80px; gap:10px; margin:0 auto; padding:0 40px; background:#00b3ab; border-radius:10px; }
.matrix .btn_mov a span { margin-left:5px; display:inline-block; color:#fff; font-size:var(--font22); font-weight:700; line-height:1.3; } 
.matrix .imgbox { text-align:center; margin-bottom:60px; }
.matrix .num-list { margin:30px auto; padding:50px; max-width:1000px; border-radius:20px; border:1px solid rgba(255, 255, 255, 0.20); }
.matrix .num-list li:not(:last-child) { margin-bottom:10px; }
.matrix .num-list li { display:flex; align-items:center; gap:20px; color:#fff; font-size:var(--font17); font-weight:400; line-height:1.5; }
.matrix .num-list li span { flex-shrink:0; color:#000; font-size:var(--font16); font-weight:700; line-height:1.5; width:26px; height:26px; background:#fff; border-radius:25px; display:flex; align-items:center; justify-content:center; }
@media screen and (max-width:1024px){
	.matrix .btn_mov { margin-bottom:30px; }
	.matrix .btn_mov a { height:60px; gap:10px; margin:0 auto; padding:0 30px; gap:5px; }
	.matrix .btn_mov .icon { width:40px; }
	.matrix .imgbox { margin-bottom:30px; }
	.matrix .num-list { margin:15px auto; padding:25px; border-radius:10px; }
	.matrix .num-list li { gap:14px; }
	.matrix .num-list li span { width:22px; height:22px; }
}

.train_bg { background:url(/sub/heart/mental/img/train_bg.svg) right bottom no-repeat; }
@media screen and (max-width:1440px){
	.train_bg { background-size:380px auto; }
}
@media screen and (max-width:1024px){
	.train_bg { background-size:260px auto; }
}
@media screen and (max-width:640px){
	.train_bg { background-size:160px auto; }
}

.matrix_train .step { margin:60px auto; max-width:802px; padding:0 7px; }
.matrix_train .step .bar { position:relative; background:rgba(255, 255, 255, 0.15); height:1px; width:100%; }
.matrix_train .step .bar .point { position:absolute; top:50%; transform:translateY(-50%); }
.matrix_train .step .bar .point:before { content:''; display:block; width:10px; height:10px; background:#555; border:2px solid rgba(255, 255, 255, 0.30); border-radius:10px; }
.matrix_train .step .bar .point.on:before { width:16px; height:16px; background:var(--mainColor); border-radius:20px; }
.matrix_train .step .bar .point.p1 { left:0; }
.matrix_train .step .bar .point.p2 { left:calc(33.3% - 7px); }
.matrix_train .step .bar .point.p2.on { left:calc(33.3% - 10px); }
.matrix_train .step .bar .point.p3 { left:calc(66.666% - 7px); }
.matrix_train .step .bar .point.p3.on { left:calc(66.666% - 10px); }
.matrix_train .step .bar .point.p4 { right:0; }

.matrix_train .question .list { display:flex; align-items:center; justify-content:center; gap:20px; }
.matrix_train .question .list .qbox { display:flex; align-items:center; justify-content:center; gap:20px; }
.matrix_train .question .list .txt { color:#fff; font-size:var(--font26); font-weight:400; line-height:1.5; }
.matrix_train .question .list .txt strong { font-weight:700; }
.matrix_train .question .list span { flex-shrink:0; color:#fff; font-size:var(--font16); font-weight:700; line-height:1.5; width:46px; height:46px; background:var(--mintColor); border-radius:46px; display:flex; align-items:center; justify-content:center; }
.matrix_train .question .list .sbox { flex-shrink:0; padding:0 20px; height:43px; display:inline-flex; align-items:center; justify-content:center; text-align:center; color:#fff; font-size:var(--font18); font-weight:400; line-height:1.0; background:rgba(255, 255, 255, 0.05); border-radius:50px; }
.matrix_train .question .ex { margin-top:20px; display:flex; align-items:center; justify-content:center; gap:10px; color:#777; font-size:var(--font17); font-weight:300; line-height:1.3; }
.matrix_train .question .ex span { flex-shrink:0; color:#bbb; font-size:var(--font18); font-weight:700; }
.matrix_train .selbox { margin-top:60px; }
.matrix_train .selbox .listbox { display:flex; flex-wrap:wrap; gap:10px; }
.matrix_train .selbox .listbox .ch { width:calc((100% - 40px) / 5); }
.matrix_train .selbox .listbox .ch input[type="checkbox"],
.matrix_train .selbox .listbox .ch input[type="radio"] { position:absolute; left:0; top:3px; opacity:0; }
.matrix_train .selbox .listbox .ch input[type="checkbox"] + span,
.matrix_train .selbox .listbox .ch input[type="radio"] + span { cursor:pointer; width:100%; height:60px; transition:all 0.3s; position:relative; padding:0; color:#555; font-size:var(--font20); font-weight:700; line-height:1.5; display:block; border-radius:10px; background:#222; display:flex; align-items:center; justify-content:center; }
.matrix_train .selbox .listbox .ch input[type="checkbox"]:checked + span,
.matrix_train .selbox .listbox .ch input[type="radio"]:checked + span { color:#fff; background:var(--mainColor); }
.matrix_train .selbox .ipbox { margin-top:30px; display:flex; align-items:center; gap:10px; border-radius:10px; background:#222; padding:10px; }
.matrix_train .selbox .ipbox .txt { width:54px; flex-shrink:0; color:#999; font-size:var(--font18); font-weight:700; line-height:1.3; text-align:center; }
.matrix_train .selbox input[type="text"] { padding:0 20px; width:100%; height:50px; border-radius:5px; background:#333; color:#fff; font-size:var(--font17); font-weight:400; line-height:1.3; }
.matrix_train .selbox input::placeholder { color:#999; font-weight:300; }
.matrix_train .selbox .txt_ip { padding:20px; border-radius:10px; background:#222; } 
.matrix_train .selbox .txt_ip .addbox { display:flex; justify-content:flex-end; gap:3px; }
.matrix_train .selbox .txt_ip .addbox a { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:5px; background:rgba(255, 255, 255, 0.05); }
.matrix_train .selbox .txt_ip .addbox a:first-child { background:var(--mainColor); }
.matrix_train .selbox .txt_ip .list { margin-top:20px; }
.matrix_train .selbox .txt_ip .list .box { display:flex; gap:20px; margin-top:10px; }
@media screen and (max-width:1024px){
	.matrix_train .step { margin:40px auto; }
	.matrix_train .question .list { flex-wrap:wrap; gap:5px; }
	.matrix_train .question .list .qbox { gap:14px; }
	.matrix_train .question .list span { width:38px; height:38px; }
	.matrix_train .question .list .sbox { padding:0 12px; height:38px; }
	.matrix_train .selbox { margin-top:30px; }
	.matrix_train .selbox .listbox { gap:5px; }
	.matrix_train .selbox .listbox .ch { width:calc((100% - 20px) / 4); }
	.matrix_train .selbox .listbox .ch input[type="checkbox"] + span,
	.matrix_train .selbox .listbox .ch input[type="radio"] + span { height:55px; border-radius:5px; }
	.matrix_train .selbox .ipbox { margin-top:15px; gap:5px; border-radius:5px; padding:5px; }
	.matrix_train .selbox .ipbox .txt { width:45px; }
	.matrix_train .selbox input[type="text"] { padding:0 10px; height:45px; border-radius:3px; }
	.matrix_train .selbox .txt_ip .list .box { gap:10px; margin-top:5px; }
}
@media screen and (max-width:640px){
	.matrix_train .selbox .listbox .ch { width:calc((100% - 5px) / 2); }
	.matrix_train .selbox .txt_ip .list .box { gap:5px; flex-wrap:wrap; margin-top:10px;}
	.matrix_train .selbox .txt_ip .list .box input[type="text"] { width:calc((100% - 5px) / 2); }
	.matrix_train .selbox .txt_ip .list .box:nth-child(2n) input[type="text"] { background:rgba(51, 51, 51, 0.4); }
}

.matrix_train .view-box { position:relative; border-radius:20px; background:rgba(255, 255, 255, 0.03); }
.matrix_train .view-box .txtbox { display:flex; flex-wrap:wrap; padding:100px 0; }
.matrix_train .view-box .txtbox .cbox { display:flex; width:100%; max-width:700px; margin:0 auto;  }
.matrix_train .view-box .txtbox .box { width:50%; display:flex; align-items:center; flex-direction:column; padding:20px 10px 70px; }
.matrix_train .view-box .txtbox .box.b1,
.matrix_train .view-box .txtbox .box.b2 { justify-content:flex-end; flex-direction:column-reverse; margin-top:30px; }
.matrix_train .view-box .txtbox .box.b3,
.matrix_train .view-box .txtbox .box.b4 { justify-content:flex-end; }
.matrix_train .view-box .txtbox .box.b1 { order:3; }
.matrix_train .view-box .txtbox .box.b2 { order:2; }
.matrix_train .view-box .txtbox .box .txt { margin-top:20px; color:rgba(255, 255, 255, 0.60); font-size:var(--font17); font-weight:400; line-height:1.3; display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; }
.matrix_train .view-box .txtbox .box.b1 .txt:first-child,
.matrix_train .view-box .txtbox .box.b2 .txt:first-child { margin-top:20px; }
.matrix_train .view-box .txtbox .box .txt a { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:5px; background:rgba(255, 255, 255, 0.05); }
.matrix_train .view-box .txtbox .box .txt a.add { background:var(--mainColor); }
.matrix_train .view-box .txtbox .box .txt input[type="text"] { max-width:195px; }
.matrix_train .view-box .txtbox .box .stxt { margin-top:30px; color:#333; font-size:var(--font18); font-weight:700; line-height:1.2; padding:0 20px; height:60px; background:var(--mainColor); border-radius:50px; display:flex; align-items:center; justify-content:center; text-align:center; }
.matrix_train .view-box .txtbox .box .stxt:last-child { margin-top:10px; }
.matrix_train .view-box .txtbox .box.b1 .stxt,
.matrix_train .view-box .txtbox .box.b2 .stxt { /* margin:0 0 10px; */}
.matrix_train .view-box .txtbox .box.b3 .list,
.matrix_train .view-box .txtbox .box.b4 .list { display:flex; justify-content:flex-end; flex-direction:column-reverse; }
.matrix_train .view-box .p-txt { position:absolute; color:#eee; font-size:var(--font20); font-weight:400; line-height:1.3; }
.matrix_train .view-box .p-txt.p1 { left:50%; transform:translateX(-50%); top:50px; }
.matrix_train .view-box .p-txt.p2 { right:0; transform:translateY(-50%); top:50%; text-align:left; width:127px; }
.matrix_train .view-box .p-txt.p3 { left:50%; transform:translateX(-50%); bottom:50px; }
.matrix_train .view-box .p-txt.p4 { left:0; transform:translateY(-50%); top:50%; text-align:right; width:127px; }
.matrix_train .view-box .p-line { position:relative; width:100%; }
.matrix_train .view-box .line { background:rgba(255, 255, 255, 0.8); position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.matrix_train .view-box .line.line-1 { width:2px; height:calc(100% - (95px * 2)); }
.matrix_train .view-box .line.line-2 { width:calc(100% - (140px * 2)); height:2px; }
.matrix_train .view-box .line:before,
.matrix_train .view-box .line:after { content:''; display:block; width:16px; height:13px; position:absolute; background:url(/sub/heart/mental/img/train_view_arr.svg) center center no-repeat; }
.matrix_train .view-box .line.line-1:before { left:50%; transform:translateX(-50%); top:-6px; }
.matrix_train .view-box .line.line-1:after { left:50%; transform:translateX(-50%) rotate(180deg); bottom:-6px; margin-left:1px; }
.matrix_train .view-box .line.line-2:before { top:50%; transform:translateY(-50%) rotate(-90deg); left:-6px; }
.matrix_train .view-box .line.line-2:after { top:50%; transform:translateY(-50%) rotate(90deg); right:-6px; margin-top:-1px; }
.matrix_train .view-box .center { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1; color:#fff; font-size:var(--font22); font-weight:700; line-height:1.3; }
.matrix_train .view-box input[type="text"] { padding:0 20px; width:100%; height:50px; border-radius:5px; background:#333; color:#fff; font-size:var(--font17); font-weight:400; line-height:1.3; }
.matrix_train .view-box input::placeholder { color:#999; font-weight:300; font-size:var(--font15); }
.matrix_train .movCont { text-align:center; }
.matrix_train .movCont .txt { margin:60px 0 30px; color:#fff; font-size:var(--font20); font-weight:400; line-height:1.3; }
.matrix_train .movCont .btn { max-width:300px; height:70px; margin:0 auto; }
.matrix_train .movCont .btn a { width:100%; height:100%; color:#fff; font-size:var(--font22); font-weight:700; line-height:1.3; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:10px; background:var(--mintColor); }
@media screen and (max-width:1024px){
	.matrix_train .view-box { border-radius:10px; }
	.matrix_train .view-box .txtbox { padding:50px 0; }
	.matrix_train .view-box .txtbox .box { padding:40px 10px; }
	.matrix_train .view-box .txtbox .box .txt { margin-top:10px; gap:5px; }
	.matrix_train .view-box .txtbox .box .stxt { margin-top:15px; padding:0 15px; height:50px; }
	.matrix_train .view-box .txtbox .box.b1,
	.matrix_train .view-box .txtbox .box.b2 { margin-top:0px; }
	.matrix_train .view-box .txtbox .box.b1 .txt:first-child,
	.matrix_train .view-box .txtbox .box.b2 .txt:first-child { margin-top:10px; }
	.matrix_train .view-box .txtbox .box.b1 .stxt,
	.matrix_train .view-box .txtbox .box.b2 .stxt { /* margin:0 0 5px; */ }
	.matrix_train .view-box .p-txt.p1 { top:20px; }
	.matrix_train .view-box .p-txt.p3 { bottom:20px; }
	.matrix_train .view-box .p-txt.p2,
	.matrix_train .view-box .p-txt.p4 { width:75px; }
	.matrix_train .view-box .line.line-1 { height:calc(100% - (60px * 2)); }
	.matrix_train .view-box .line.line-2 { width:calc(100% - (90px * 2)); }
	.matrix_train .view-box input[type="text"] { padding:0 10px; height:45px; border-radius:3px; }
	.matrix_train .view-box .center img { width:90px; }
	.matrix_train .movCont .txt { margin:30px 0 15px; }
	.matrix_train .movCont .btn { max-width:200px; height:60px; }
	.matrix_train .movCont .btn a { border-radius:5px; }
}
@media screen and (max-width:640px){
	.matrix_train .view-box .txtbox .box .stxt { padding:0 10px; height:55px; }
}
.movpop { display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:22; }
.movpop .bg { position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); }
.movpop .popbody { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:5; max-width:1280px; width:100%; padding:40px; }
.movpop .mov { position:relative; overflow:hidden; width:100%; margin:0 auto; z-index:2; }
.movpop .mov:before { content:''; display:block; padding-bottom:56.25%; /* 16:9 비율 */ }
.movpop .mov video,
.movpop .mov iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.movpop .mov .play { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2; }
.movpop .close { position:absolute; top:0; right:0; }
@media screen and (max-width:1300px){
	.movpop .close { top:10px; right:10px; }
}
@media screen and (max-width:640px){
	.movpop { padding:30px; }
	.movpop .mov .play img { width:50px; }
	.movpop .close img { width:16px; }
}

.matrix_finish .imgbox { border-radius:20px; background:rgba(255, 255, 255, 0.05); padding:75px 150px; text-align:center; }
.matrix_finish .finish-txt { margin:40px 0 20px; }
.matrix_finish .finish-txt ul { max-width:652px; width:100%; margin:0 auto; }
.matrix_finish .finish-txt li:not(:last-child) { margin-bottom:5px; }
.matrix_finish .finish-txt li { position:relative; display:flex; justify-content:flex-end; padding:0 20px 44px; }
.matrix_finish .finish-txt li.right { justify-content:flex-start; }
.matrix_finish .finish-txt li:before { content:''; display:block; width:38px; height:36px; position:absolute; right:0; bottom:0; background:url(/sub/heart/mental/img/finish_bg.svg) center center no-repeat; }
.matrix_finish .finish-txt li.right:before { left:0; transform:scaleX(-1); }
.matrix_finish .finish-txt .txt { color:#111; font-size:var(--font20); font-weight:700; line-height:1.3; display:inline-flex; align-items:center; justify-content:center; gap:15px; padding:0 40px; height:66px; border-radius:60px; background:#fff; }
.matrix_finish .finish-txt .txt strong { color:var(--mainColor); font-weight:700; }
.matrix_finish .sbox { border-radius:20px; background:rgba(255, 255, 255, 0.2); text-align:center; padding:40px 30px; } 
.matrix_finish .sbox dt { color:#fff; font-size:var(--font22); font-weight:700; line-height:1.5; }
.matrix_finish .sbox dd { margin-top:30px; color:#fff; font-size:var(--font18); font-weight:400; line-height:1.5; }
@media screen and (max-width:1024px){
	.matrix_finish .imgbox { border-radius:10px; padding:30px 80px; }
	.matrix_finish .finish-txt { margin:20px 0 10px; }
	.matrix_finish .sbox { border-radius:10px; border-width:1px; padding:20px; } 
	.matrix_finish .sbox dd { margin-top:15px; }
}
@media screen and (max-width:640px){
	.matrix_finish .imgbox { padding:30px 20px; }
	.matrix_finish .sbox dd br { display:none; }
	.matrix_finish .sbox dd span.m_br { display:block; }
}


.btnPN { position:absolute; top:365px; }
.btnPN.prev { left:50%; margin-left:-726px; }
.btnPN.next { right:50%; margin-right:-726px; }
.btnPN a { display:flex; align-items:center; justify-content:center; width:80px; height:80px; border:2px solid rgba(255, 255, 255, 0.20); background:#222; border-radius:80px; }
@media screen and (max-width:1560px){
	.btnPN.prev { margin-left:-650px; }
	.btnPN.next { margin-right:-650px; }
}
@media screen and (max-width:1320px){
	.btnPN.prev { margin-left:-600px; }
	.btnPN.next { margin-right:-600px; }
	.btnPN a { width:70px; height:70px; }
}
@media screen and (max-width:1200px){
	.btnPN { display:none; }
}

.complete-box { margin:100px auto -90px; max-width:1000px; height:80px; color:#fff; font-size:var(--font24); font-weight:700; line-height:1.3; border-radius:10px; background:var(--mainColor); display:flex; align-items:center; justify-content:center;  }
@media screen and (max-width:1024px){
	.complete-box { margin:50px auto -40px; height:65px; border-radius:5px; }
}

.btn-complete a { margin:0 auto; max-width:300px; width:100%; height:70px; color:#fff; font-size:var(--font22); font-weight:700; line-height:1.3; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:10px; background:var(--mintColor); }
.btn-complete a.mint { background:var(--mintColor); }
.btn-complete a.w200 { max-width:200px; }
@media screen and (max-width:1024px){
	.btn-complete a { max-width:200px; height:60px; border-radius:5px; }
	.btn-complete a.w200 { max-width:160px; }
}


.psychology .test-list { display:flex; gap:20px; }
.psychology .test-list .box { width:calc((100% - 40px) / 3); text-align:center; margin-top:20px; }
.psychology .test-list .box a { position:relative; transition:all 0.4s; display:block; padding:35px 20px; border-radius:20px; background:rgba(255, 255, 255, 0.05); }
.psychology .test-list .box .num { margin:0 auto; width:30px; height:30px; color:#333; font-size:var(--font15); font-weight:700; line-height:1.3; display:flex; align-items:center; justify-content:center; border-radius:30px; background:#fff; }
.psychology .test-list .box .icon { margin:40px 0; transition:all 0.4s; }
.psychology .test-list .box .txt { color:#fff; font-size:var(--font20); font-weight:700; line-height:1.5; }
.psychology .test-list .box .more { transition:all 0.4s; opacity:0; display:block; position:absolute; left:50%; bottom:35px; transform:translateX(-50%); color:#fff; font-size:var(--font15); font-weight:600; line-height:1.3; }
.psychology .test-list .box a:hover { transform:translateY(-20px); background:var(--mainColor); padding:35px 20px 75px; }
.psychology .test-list .box a:hover .icon { margin:20px 0; }
.psychology .test-list .box a:hover .more { opacity:1; }
@media screen and (max-width:1024px){
	.psychology .test-list { gap:10px; }
	.psychology .test-list .box { width:calc((100% - 20px) / 3); margin-top:0; }
	.psychology .test-list .box a { padding:20px; border-radius:10px;}
	.psychology .test-list .box .icon { margin:15px 0; }
	.psychology .test-list .box a:hover { transform:translateY(0); padding:20px; }
	.psychology .test-list .box a:hover .icon { margin:15px 0; }
	.psychology .test-list .box .more { margin-top:15px; opacity:1; position:relative; left:50%; bottom:unset; transform:translateX(-50%); }
}
@media screen and (max-width:640px){
	.psychology .test-list { flex-wrap:wrap; }
	.psychology .test-list .box { width:100%; }
	.psychology .test-list .box .num { width:26px; height:26px; }
	.psychology .test-list .box .icon img { width:90px; }
}


.flexible .imgbox-2 { text-align:center; background:#fff; padding:20px; border-radius:20px; }
@media screen and (max-width:1024px){
	.flexible .imgbox-2 { border-radius:10px; }
}

.ch-table { margin-top:30px; }
.ch-table table thead th { height:60px; padding:13px 0; border-radius:1px; background:rgba(255, 255, 255, 0.05); color:#fff; font-size:var(--font18); font-weight:400; line-height:1.3; text-align:center; }
.ch-table table tbody th { height:60px; text-align:left; border-bottom:1px solid rgba(255, 255, 255, 0.10); }
.ch-table table tbody th .txt { display:flex; align-items:center; gap:20px; color:#fff; font-size:var(--font19); font-weight:400; line-height:1.3; }
.ch-table table tbody th .txt span { flex-shrink:0; color:#fff; font-size:var(--font14); font-weight:400; line-height:1.3; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid #fff; border-radius:60px; }
.ch-table table tbody td { text-align:center; border-bottom:1px solid rgba(255, 255, 255, 0.10); }
.ch-table table tbody tr.correct th { padding-left:20px; background:#faa74b; }
.ch-table table tbody tr.correct td { background:#faa74b; }
.ch-table table tbody tr.correct th .txt,
.ch-table table tbody tr.correct th .txt span { color:#111; border-color:#111; }
.ch-table table tbody tr.correct td .ch input[type="checkbox"] + span:before,
.ch-table table tbody tr.correct td .ch input[type="radio"] + span:before { background:url(/sub/heart/mental/img/ch1_o_off.svg) no-repeat center/ cover;}
.ch-table table tbody tr.correct td .ch input[type="checkbox"]:checked + span:before,
.ch-table table tbody tr.correct td .ch input[type="radio"]:checked + span:before { background:url(/sub/heart/mental/img/ch1_o_on.svg) no-repeat center/ cover; }
@media screen and (max-width:1024px){
	.ch-table { margin-top:15px; }
	.ch-table table thead th { height:50px; padding:8px 0; }
	.ch-table table tbody th { height:50px; }
	.ch-table table tbody th .txt { gap:10px; }
	.ch-table table tbody th .txt span { width:24px; height:24px; }
	.ch-table table tbody td .ch input[type="checkbox"] + span,
	.ch-table table tbody td .ch input[type="radio"] + span,
	.ch-table table tbody td .ch input[type="checkbox"] + span:before,
	.ch-table table tbody td .ch input[type="radio"] + span:before { width:20px; height:20px; }
	.ch-table table tbody tr.correct th { padding-left:10px; }
}
@media screen and (max-width:860px){
	.ch-table .srcoll-box { overflow:auto; }
	.ch-table .srcoll-box table { width:860px; }
	.ch-table table col.w1 { width:60px !important; }
	.ch-table table col.w2 { width:100px !important; }
}

.flexible .answer { margin-top:30px; }
.flexible .answer .listening { margin:30px 0; border-radius:20px; background:#fff; text-align:center; padding:50px 20px; }
.flexible .answer .listening .btn { display:flex; align-items:center; justify-content:center; gap:15px; }
.flexible .answer .listening .btn a { max-width:240px; width:100%; height:60px; color:#fff; font-size:var(--font22); font-weight:700; line-height:1.0; display:flex; align-items:center; justify-content:center; gap:20px; border-radius:10px; background:var(--mintColor); }
.flexible .answer .listening .btn a.stop { width:60px; background:#ffae00; }
.flexible .answer .listening .num { position:relative; margin:40px auto 30px; width:40px; }
.flexible .answer .listening .num .txt { width:40px; height:40px; color:#111; padding-top:3px; font-size:var(--font18); font-weight:700; line-height:1.0; display:flex; align-items:center; justify-content:center; }
.flexible .answer .listening .num .circular-chart { width:40px; height:auto; position:absolute; left:0; top:0; z-index:8; padding:0; margin:0; }
.flexible .answer .listening .num .circle { opacity:1; stroke:var(--mainColor); fill:none; stroke-width:2; stroke-dasharray:100; stroke-dashoffset:100; padding:0; margin:0; }
.flexible .answer .listening .txtbox { display:flex; align-items:center; justify-content:center; gap:15px; }
.flexible .answer .listening .txtbox .box { transition:0.3s; height:46px; padding:0 20px; color:#333; font-size:var(--font20); font-weight:700; line-height:0.8; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(17, 17, 17, 0.05);}
.flexible .answer .listening .txtbox .box.on { background:var(--mainColor); }
@media screen and (max-width:1024px){
	.flexible .answer { margin-top:15px; }
	.flexible .answer .listening { margin:15px 0; border-radius:10px; padding:30px 20px; }
	.flexible .answer .listening .btn { gap:10px; }
	.flexible .answer .listening .btn a { max-width:180px; height:50px; gap:10px; }
	.flexible .answer .listening .btn a.stop { width:50px; }
	.flexible .answer .listening .btn a.stop img { width:19px; }
	.flexible .answer .listening .num { margin:20px auto 15px; width:40px; }
	.flexible .answer .listening .num .txt { width:36px; height:36px; padding-top:3px; }
	.flexible .answer .listening .num .circular-chart { width:36px; }
	.flexible .answer .listening .txtbox { gap:10px; }
	.flexible .answer .listening .txtbox .box { height:40px; border-radius:5px; }
}

.flexible .select-box { border-radius:20px; background: rgba(255, 255, 255, 0.05); padding:60px 40px; }
.flexible .select-box h5 { display:flex; align-items:center; justify-content:center; gap:20px; color:#fff; font-size:var(--font26); font-weight:700; line-height:1.1; }
.flexible .select-box h5 span { flex-shrink:0; color:#fff; font-size:var(--font16); font-weight:700; line-height:1.3; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--mintColor); border-radius:60px; }
.flexible .select-box .list { display:flex; gap:20px; flex-wrap:wrap; }
.flexible .select-box .list .box { transition:all 0.3s; cursor:pointer; width:calc((100% - 20px) / 2); padding:40px; border-radius:20px; background:rgba(255, 255, 255, 0.05); text-align:center; color:#fff; font-size:var(--font20); font-weight:700; line-height:1.3; }
.flexible .select-box .list .box span { transition:all 0.3s; margin:0 auto 20px; color:#000; font-size:var(--font16); font-weight:700; line-height:1.3; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:var(--mainColor); border-radius:60px; }
.flexible .select-box .list .box.on { background:var(--mainColor); }
.flexible .select-box .list .box.on span { background:#fff; }
@media screen and (max-width:1024px){
	.flexible .select-box { border-radius:10px; padding:30px 20px; }
	.flexible .select-box h5 { gap:10px; }
	.flexible .select-box h5 span { width:38px; height:38px; }
	.flexible .select-box .list { gap:10px; }
	.flexible .select-box .list .box { width:calc((100% - 10px) / 2); padding:30px 20px; border-radius:10px; }
	.flexible .select-box .list .box span { margin:0 auto 10px; width:24px; height:24px; }
}

.flexible .meditate { margin:0 auto; max-width:1300px; width:100%; }
.flexible .meditate .box { display:flex; align-items:center; flex-wrap:wrap; gap:20px; } 
.flexible .meditate .box > div { width:calc((100% - 20px) / 2); }
.flexible .meditate .box .txtbox { padding:0 0 0 40px; }
.flexible .meditate .box .txtbox li:not(:last-child) { margin-bottom:40px; }
.flexible .meditate .box .txtbox li { display:flex; gap:20px; color:#fff; font-size:var(--font22); font-weight:400; line-height:1.5; }
.flexible .meditate .box .txtbox li span { flex-shrink:0; color:#000; font-size:var(--font16); font-weight:700; line-height:1.3; width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:60px; } 
.flexible .meditate .play-box { margin-top:45px; display:flex; align-items:center; justify-content:center; gap:15px; }


.flexible .mov-box { position:relative; overflow:hidden; width:100%; margin:0 auto; border-radius:20px; }
.flexible .mov-box:before { content:''; display:block; padding-bottom:56.25%; }
.flexible .mov-box .imgbox { position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; cursor:pointer; }
.flexible .mov-box .imgbox > img { width:100%; height:100%; border:0; }
.flexible .mov-box video,
.flexible .mov-box iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.flexible .mov-box .play { position:absolute; top:0; left:0; width:100%; height:100%; z-index:3; cursor:pointer; display:flex; align-items:center; justify-content:center; }
@media screen and (max-width:1024px){
	.flexible .mov-box { border-radius:10px; }
	.flexible .mov-box .play img { width:60px; }
}

.select-result { border-radius:20px; background:rgba(255, 255, 255, 0.05); padding:40px; display:none; }
.select-result .imgbox { margin:50px 0; text-align:center; }
@media screen and (max-width:1024px){
	.select-result { border-radius:10px; padding:30px 20px; }
	.select-result .imgbox { margin:25px 0; }
	.select-result .imgbox img { width:130px; }
}


.chk { position:relative; margin:0 auto; width:24px; }
.chk input[type="checkbox"],
.chk input[type="radio"] { position:absolute; left:0; top:3px; opacity:0; }
.chk input[type="checkbox"] + span,
.chk input[type="radio"] + span { margin:0 auto; cursor:pointer; transition:all 0.3s; width:24px; height:24px; position:relative; color:#fff; font-size:var(--font17); font-weight:400; line-height:1.5; display:block; }
.chk input[type="checkbox"] + span:before,
.chk input[type="radio"] + span:before { content:''; display:block; width:24px; height:24px; vertical-align:middle; transition:all 0.3s; background:url(/sub/heart/mental/img/ch1_off.svg) no-repeat center / cover; position:absolute; left:0; top:0; }
.chk input[type="checkbox"]:checked + span:before,
.chk input[type="radio"]:checked + span:before { background:url(/sub/heart/mental/img/ch1_on.svg) no-repeat center/ cover; }
.correct .chk input[type="checkbox"] + span:before,
.correct .chk input[type="radio"] + span:before,
.result .chk input[type="checkbox"] + span:before,
.result .chk input[type="radio"] + span:before { background:url(/sub/heart/mental/img/ch1_o_off.svg) no-repeat center/ cover; }
.correct .chk input[type="checkbox"]:checked + span:before,
.correct .chk input[type="radio"]:checked + span:before,
.result .chk input[type="checkbox"]:checked + span:before,
.result .chk input[type="radio"]:checked + span:before  { background:url(/sub/heart/mental/img/ch1_o_on.svg) no-repeat center / cover; }
@media screen and (max-width:1024px){
	.chk { width:20px; }
	.chk input[type="checkbox"] + span,
	.chk input[type="radio"] + span,
	.chk input[type="checkbox"] + span:before,
	.chk input[type="radio"] + span:before { width:20px; height:20px; }
}



.ch-list1 { margin-top:40px; display:flex; justify-content:center; gap:0 20px; text-align:center; }
.ch-list1 .chkb { position:relative; margin:0 auto; width:20%; }
.ch-list1.ch33 .chkb { width:28%; }
.ch-list1 .chkb input[type="checkbox"],
.ch-list1 .chkb input[type="radio"] { position:absolute; left:50%; top:3px; opacity:0; transform:translateX(-50%); }
.ch-list1 .chkb input[type="checkbox"] + span,
.ch-list1 .chkb input[type="radio"] + span { margin:0 auto; cursor:pointer; padding-top:40px; position:relative; color:#fff; font-size:var(--font18); font-weight:400; line-height:1.5; display:inline-flex; align-items:center; justify-content:center; gap:10px 25px; }
.ch-list1 .chkb input[type="checkbox"] + span:before,
.ch-list1 .chkb input[type="radio"] + span:before { content:''; display:block; width:24px; height:24px; vertical-align:middle; transition:all 0.3s; background:url(/sub/heart/mental/img/ch1_off.svg) no-repeat center / cover; position:absolute; left:50%; top:0; transform:translateX(-50%); }
.ch-list1 .chkb input[type="checkbox"]:checked + span:before,
.ch-list1 .chkb input[type="radio"]:checked + span:before { background:url(/sub/heart/mental/img/ch1_on.svg) no-repeat center / cover; }
.ch-list1 .chkb input[type="text"] { padding:0 10px; width:100%; max-width:260px; height:40px; border-radius:5px; background:rgba(255, 255, 255, 0.05); color:#fff; font-size:var(--font17); font-weight:400; line-height:1.3; }
.ch-list1 .chkb input::placeholder { color:rgba(255, 255, 255, 0.60); font-weight:300; }
@media screen and (max-width:1024px){
	.ch-list1 { margin-top:20px; gap:0 12px; }
	.ch-list1.ch33 .chkb { width:24%; }
	.ch-list1.ch33 .chkb:last-child { width:50%; }
	.ch-list1 .chkb input[type="checkbox"] + span,
	.ch-list1 .chkb input[type="radio"] + span { padding-top:33px; gap:10px 15px; }
}


.title-s { display:flex; justify-content:center;}
.title-s h4 { height:47px; padding:0 30px; color:#fff; font-size:var(--font18); font-weight:700; line-height:1.0; display:inline-flex; align-items:center; justify-content:center; background:var(--mainColor); border-radius:50px; }
@media screen and (max-width:1024px){
	.title-s h4 { height:42px; padding:0 20px; }
}



.ipbox .list:not(:last-child) { margin-bottom:100px; }
.ipbox .list h4 { display:flex; align-items:center; gap:20px; color:#fff; font-size:var(--font24); font-weight:700; line-height:1.3; }
.ipbox .list h4 span { flex-shrink:0; width:44px; height:44px; color:#fff; font-size:var(--font18); font-weight:700; line-height:1.3; background:var(--mainColor); border-radius:50px; display:flex; align-items:center; justify-content:center; }
.ipbox .list > ul { display:flex; gap:0 40px; flex-wrap:wrap; }
.ipbox .list > ul > li { margin-top:40px; }
.ipbox .list > ul > li.w1 { width:300px; }
.ipbox .list > ul > li.full { width:100%; }
.ipbox .list > ul > li .tit { color:#fff; font-size:var(--font20); font-weight:400; line-height:1.3; margin-bottom:20px; }
.ipbox .list > ul > li .tit span { color:#f00; }
.ipbox .list > ul > li select { width:100%; height:70px; line-height:70px; padding:0 60px 0 30px; font-size:var(--font17); color:#fff; font-weight:300; border:none; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:10px; background:rgba(255, 255, 255, 0.05) url(/sub/heart/mental/img/icon_select_down.svg) calc(100% - 30px) center no-repeat; }
.ipbox .list > ul > li select::-ms-expand { display:none; }
.ipbox .list > ul > li select option { color:#000 }
.ipbox .list textarea { margin-top:40px; width:100%; height:340px; line-height:1.6; padding:20px; font-size:var(--font16); color:#fff; font-weight:400; border:none; outline:none; background:rgba(255, 255, 255, 0.05); border-radius:20px; }
.ipbox .list textarea::placeholder { color:rgba(255, 255, 255, 0.60); font-weight:300; }
.ipbox .ch-ip { display:flex; gap:10px 30px; } 
.ipbox .ch-ip input[type="text"] { padding:0 10px; height:70px; border-radius:5px; background:rgba(255, 255, 255, 0.05); color:#fff; font-size:var(--font17); font-weight:400; line-height:1.3; }
.ipbox .ch-ip input.ip01 { width:300px; }
.ipbox .ch-ip input.ip02 { width:170px; }
.ipbox .ch-ip.ipc { align-items:center; gap: 10px; }
.ipbox .ch-ip .ch { position:relative; display:flex; align-items:center; gap:0 30px; }
.ipbox .ch-ip .ch1 { max-width:480px; width:100%; }
.ipbox .ch-ip .ch input[type="checkbox"],
.ipbox .ch-ip .ch input[type="radio"] { position:absolute; left:0; top:3px; opacity:0; }
.ipbox .ch-ip .ch input[type="checkbox"] + span,
.ipbox .ch-ip .ch input[type="radio"] + span { cursor:pointer; padding-left:30px; position:relative; color:#fff; font-size:var(--font18); font-weight:400; line-height:1.3; display:block; }
.ipbox .ch-ip .ch input[type="checkbox"] + span:before,
.ipbox .ch-ip .ch input[type="radio"] + span:before { content:''; display:block; width:20px; height:20px; vertical-align:middle; transition:all 0.3s; background:url(/sub/heart/mental/img/ch1_off.svg) no-repeat center/ cover; position:absolute; left:0; top:50%; transform:translateY(-50%); }
.ipbox .ch-ip .ch input[type="checkbox"]:checked + span:before,
.ipbox .ch-ip .ch input[type="radio"]:checked + span:before { background:url(/sub/heart/mental/img/ch1_on.svg) no-repeat center/ cover; }
.ipbox .txt-b { margin-top:100px; text-align:center; color:#fff; font-size:var(--font24); font-weight:700; line-height:1.8; }
.ipbox .txt-b img { vertical-align:middle; margin:0 0 0 10px;}
@media screen and (max-width:1024px){
	.ipbox .list:not(:last-child) { margin-bottom:50px; }
	.ipbox .list h4 { gap:10px; }
	.ipbox .list h4 span { width:35px; height:35px; }
	.ipbox .list > ul { gap:0 30px; }
	.ipbox .list > ul > li { margin-top:30px; }
	.ipbox .list > ul > li.w1 { width:200px; }
	.ipbox .list > ul > li .tit { margin-bottom:10px; }
	.ipbox .list > ul > li .tit span { color:#f00; }
	.ipbox .list > ul > li select { height:50px; line-height:50px; padding:0 30px 0 10px; background-position:calc(100% - 10px) center; background-size:12px auto; }
	.ipbox .list > ul > li select::-ms-expand { display:none; }
	.ipbox .list textarea { margin-top:20px; height:280px; padding:15px; border-radius:10px; }
	.ipbox .ch-ip .ch { gap:10px 15px; }
	.ipbox .ch-ip .ch1 { max-width:280px; }
	.ipbox .ch-ip { gap:20px; }
	.ipbox .ch-ip input[type="text"] { height:50px; }
	.ipbox .ch-ip input.ip02 { width:140px; }
	.ipbox .txt-b { margin-top:50px; }
}
@media screen and (max-width:640px){
	.ipbox .ch-ip { flex-wrap:wrap; }
	.ipbox .txt-b span.m_br { display:block; }
	.ipbox .list textarea { height:200px; }
	.ipbox .ch-ip input.ip02 { width:120px; }
}
@media screen and (max-width:480px){
	.ipbox .ch-ip input.ip02 { width:100px; }
}



.survey .finish .txt { text-align:center; color:#fff; font-size:var(--font30); font-weight:700; line-height:1.8; }
.survey .finish .txt img { vertical-align:middle; margin:-5px 0 0 10px; }
.survey .finish .ipbox { margin-top:75px; padding:40px 60px; border-radius:20px; border:2px solid rgba(0, 179, 171, 0.10); background:rgba(0, 179, 171, 0.03); text-align:center; }
.survey .finish .ipbox h5 { color:#fff; font-size:var(--font22); font-weight:700; line-height:1.5; }
.survey .finish .ipbox .box { margin-top:30px; display:flex; align-items:center; justify-content:center; gap:15px; color:#fff; font-size:var(--font17); font-weight:700; line-height:1.3; }
.survey .finish .ipbox .box strong { color:#fff; font-size:var(--font19); font-weight:700; line-height:1.5; margin-right:15px; }
.survey .finish .ipbox .box input[type="text"] { padding:0 20px; width:100%; max-width:160px; height:60px; border-radius:10px; background:rgba(255, 255, 255, 0.05); color:#fff; font-size:var(--font17); font-weight:400; line-height:1.3; }
.survey .finish .ipbox .box input::placeholder { color:rgba(255, 255, 255, 0.60); font-weight:300; }
.survey .finish .ipbox .box select { max-width:200px; width:100%; height:60px; line-height:60px; padding:0 60px 0 20px; font-size:var(--font17); color:#fff; font-weight:300; border:none; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:10px; background:rgba(255, 255, 255, 0.05) url(/sub/heart/mental/img/icon_select_down.svg) calc(100% - 30px) center no-repeat; }
.survey .finish .ipbox .box select::-ms-expand { display:none; }
.survey .finish .ipbox .box select option { color:#000 }
.survey .finish .ipbox .box button { margin-left:15px; flex-shrink:0; width:140px; height:60px; border-radius:10px; background:var(--mintColor); border:none; outline:none; }
.survey .finish .ipbox .box button span { color:#fff; font-size:var(--font18); font-weight:600; line-height:1.5; }
.survey .finish .ipbox .box .ip-b1,
.survey .finish .ipbox .box .ip-b2 { display:flex; align-items:center; justify-content:center; gap:15px; }
@media screen and (max-width:1024px){
	.survey .finish .ipbox { margin-top:35px; padding:20px; border-radius:10px; border-width:1px; }
	.survey .finish .ipbox .box { margin-top:15px; gap:8px; }
	.survey .finish .ipbox .box strong { margin-right:7px; }
	.survey .finish .ipbox .box input[type="text"] { padding:0 10px; height:50px; border-radius:5px; }
	.survey .finish .ipbox .box select { height:50px; line-height:50px; padding:0 40px 0 10px; border-radius:5px; background-position:calc(100% - 10px) center; }
	.survey .finish .ipbox .box select::-ms-expand { display:none; }
	.survey .finish .ipbox .box button { margin-left:7px; width:80px; height:50px; border-radius:5px; }
	.survey .finish .ipbox .box .ip-b1 { gap:8px; }
}
@media screen and (max-width:860px){
	.survey .finish .ipbox .box { flex-wrap:wrap; }
	.survey .finish .ipbox .box .ip-b1,
	.survey .finish .ipbox .box .ip-b2 { width:100%; gap:8px; }
	.survey .finish .ipbox .box input[type="text"],
	.survey .finish .ipbox .box select { max-width:100%; }
	.survey .finish .ipbox .box strong { margin-right:0; }
	.survey .finish .ipbox .box button { margin-left:0; }
}
@media screen and (max-width:640px){
	.survey .finish .txt span.m_br { display:block; }
}

.popup-box { display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:22; }
.popup-box .bg { position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); }
.popup-box .popbody { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:5; max-width:800px; width:100%; padding:80px; border-radius:20px; border:2px solid rgba(0, 179, 171, 0.60); background:#151515; text-align:center; }
.popup-box .popbody .txtbox .txt-1 { color:#fff; font-size:var(--font30); font-weight:700; line-height:1.5; }
.popup-box .popbody .txtbox .txt-2 { margin-top:20px; color:#fff; font-size:var(--font20); font-weight:300; line-height:1.5; }
.popup-box .close { position:absolute; top:30px; right:30px; }
@media screen and (max-width:1300px){
	.popup-box .popbody { padding:50px 40px; border-radius:10px; }
	.popup-box .close { top:20px; right:20px; }
}
@media screen and (max-width:860px){
	.popup-box .popbody { left:20px; transform:translate(0, -50%); max-width:calc(100% - 40px); }
}
@media screen and (max-width:640px){
	.popup-box .close img { width:16px; }
}



.popup_box{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; opacity:1; visibility:visible; transition:all 0.3s; }
.popup_box .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.85); }
.popup_box .pop_body { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:22; width:100%; max-width:560px; padding:0; background:none; border:none; }
.popup_box .pop_body .scroll-box { height:742px; padding-bottom:3px; overflow:auto; }
.popup_box .pop_body .imgbox { padding-right:20px; }
.popup_box .pop_body .imgbox .box { padding:20px; background:#fff; }
.popup_box .pop_body .imgbox .box img:not(:last-child) { margin-bottom:20px; }
.popup_box .pop_body .imgbox .box img { width:100%; }
.popup_box .pop_body .btn_close { margin-top:20px; display:flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; color:#fff; font-size:16px; font-weight:500; line-height:1.3; }
.popup_box .pop_body .btn_close span { position:relative; width:36px; height:36px; display:block; transition:all 0.5s; }
.popup_box .pop_body .btn_close span:before { content:""; display:block; width:22px; height:2px; background-color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(-45deg); border-radius:2px; }
.popup_box .pop_body .btn_close span:after { content:""; display:block; width:22px; height:2px; background-color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(45deg); border-radius:2px; }
.popup_box .pop_body .btn_close:hover span { transform:rotate(-180deg); }
@media screen and (max-height:780px){
	.popup_box .pop_body .scroll-box { height:calc(100vh - 100px); }
}
@media screen and (max-width:1024px){
	.popup_box .pop_body .imgbox { padding-right:10px; }
	.popup_box .pop_body .imgbox .box { padding:10px; }
}
@media screen and (max-width:600px){
	.popup_box .pop_body { left:20px; transform:translate(0, -50%); max-width:calc(100% - 40px); }
	.popup_box .pop_body .scroll-box { height:calc(100vh - 140px); }
}


.os-theme-dark > .os-scrollbar-vertical  { padding:0 !important; background:rgba(255, 255, 255, 0.2) !important; width:5px !important; border-radius:5px !important; }
.os-theme-dark > .os-scrollbar-horizontal { padding:0 !important; background:rgba(255, 255, 255, 0.2) !important; width:5px !important; border-radius:5px !important; }
.os-theme-dark > .os-scrollbar-vertical, 
.os-theme-light > .os-scrollbar-vertical { width:5px !important; }
.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background:#faa74b !important; width:5px !important; height:5px !important; border-radius:5px !important; opacity:1 }
.os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active, 
.os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active,
.os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle,
.os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle.active { background:#faa74b !important; border-radius:5px !important; opacity:1; }


.survey .privacy-box { margin-bottom:60px; }
.survey .privacy-box h4 { color:#fff; font-size:var(--font20); font-weight:500; line-height:1.3; margin-bottom:20px; }
.survey .privacy-box .box { margin:0 auto; padding:40px; max-width:1000px; padding:30px; border-radius:20px; background:rgba(255, 255, 255, 0.2);}
.survey .privacy-box .box p,
.survey .privacy-box .box li { color:#fff; font-size:var(--font17); font-weight:300; line-height:1.4; }
.survey .privacy-box .box li { margin-top:10px; }
.survey .privacy-box .box ul { padding-top:5px; }
.survey .privacy-box .ch { margin-top:20px; display:flex; justify-content:flex-end; }
.survey .privacy-box .ch input[type="checkbox"],
.survey .privacy-box .ch input[type="radio"] { position:absolute; left:0; top:3px; opacity:0; }
.survey .privacy-box .ch input[type="checkbox"] + span,
.survey .privacy-box .ch input[type="radio"] + span { cursor:pointer; transition:all 0.3s; position:relative; padding-left:40px; color:#fff; font-size:var(--font17); font-weight:400; line-height:1.5; display:block;  }
.survey .privacy-box .ch input[type="checkbox"] + span:before,
.survey .privacy-box .ch input[type="radio"] + span:before { content:''; display:block; width:30px; height:30px; vertical-align:middle; transition:all 0.3s; background:url(/sub/heart/mental/img/ch_off.svg) no-repeat center/ cover; position:absolute; left:0; top:50%; transform:translateY(-50%); }
.survey .privacy-box .ch input[type="checkbox"]:checked + span:before,
.survey .privacy-box .ch input[type="radio"]:checked + span:before { background:url(/sub/heart/mental/img/ch_on.svg) no-repeat center/ cover; }


@media screen and (max-width:1024px){
	.survey .privacy-box { margin-bottom:40px; }
	.survey .privacy-box .box { padding:25px; }
	.survey .privacy-box .box li { margin-top:5px; }
	.survey .privacy-box .box ul { padding-top:3px; }
	.survey .privacy-box .ch { margin-top:15px; }
	.survey .privacy-box .ch input[type="checkbox"] + span,
	.survey .privacy-box .ch input[type="radio"] + span { padding-left:30px; }
	.survey .privacy-box .ch input[type="checkbox"] + span:before,
	.survey .privacy-box .ch input[type="radio"] + span:before  { width:20px; height:20px; }
}