@charset "utf-8";

@import url("reset.css");



/* 폰트 Pretendard@1.3.9 */

@font-face {

	font-family:'Pretendard';

	font-weight:900;

	font-display:swap;

	src:local('Pretendard Black'), url(../font/woff2/Pretendard-Black.woff2) format('woff2'), url(../font/woff/Pretendard-Black.woff) format('woff');

}



@font-face {

	font-family:'Pretendard';

	font-weight:800;

	font-display:swap;

	src:local('Pretendard ExtraBold'), url(../font/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../font/woff/Pretendard-ExtraBold.woff) format('woff');

}



@font-face {

	font-family:'Pretendard';

	font-weight:700;

	font-display:swap;

	src:local('Pretendard Bold'), url(../font/woff2/Pretendard-Bold.woff2) format('woff2'), url(../font/woff/Pretendard-Bold.woff) format('woff');

}



@font-face {

	font-family:'Pretendard';

	font-weight:600;

	font-display:swap;

	src:local('Pretendard SemiBold'), url(../font/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../font/woff/Pretendard-SemiBold.woff) format('woff');

}



@font-face {

	font-family:'Pretendard';

	font-weight:500;

	font-display:swap;

	src:local('Pretendard Medium'), url(../font/woff2/Pretendard-Medium.woff2) format('woff2'), url(../font/woff/Pretendard-Medium.woff) format('woff');

}



@font-face {

	font-family:'Pretendard';

	font-weight:400;

	font-display:swap;

	src:local('Pretendard Regular'), url(../font/woff2/Pretendard-Regular.woff2) format('woff2'), url(../font/woff/Pretendard-Regular.woff) format('woff');

}



@font-face {

	font-family:'Pretendard';

	font-weight:300;

	font-display:swap;

	src:local('Pretendard Light'), url(../font/woff2/Pretendard-Light.woff2) format('woff2'), url(../font/woff/Pretendard-Light.woff) format('woff');

}



@font-face {

	font-family:'Pretendard';

	font-weight:200;

	font-display:swap;

	src:local('Pretendard ExtraLight'), url(../font/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../font/woff/Pretendard-ExtraLight.woff) format('woff');

}



@font-face {

	font-family:'Pretendard';

	font-weight:100;

	font-display:swap;

	src:local('Pretendard Thin'), url(../font/woff2/Pretendard-Thin.woff2) format('woff2'), url(../font/woff/Pretendard-Thin.woff) format('woff');

}







/* 공통 */

#wrap {min-width:320px; line-height:1.6; letter-spacing:-0.01rem;}

.default-box {max-width:1920px; margin:0 auto; box-sizing:border-box;}

.bg-black {background-color:#000;color:#fff;}

.bg-white {background-color:#fff;color:#000;}

.text-green {color:#0EED67;}

.text-gray {color:#E5E8EB;}

.text-gray02 {color:#BDBBC1;}

.text-white {color:#fff;}

.btn-white {background-color:white; border:none;}

.section .inner-box {display:flex; align-items:flex-start; justify-content:space-between; column-gap:40px; max-width:1520px; padding:120px 20px;}

.section .left-content {width:100%; max-width:640px; min-width:640px;}

.section .right-content {width:100%; max-width:720px; text-align:start;}







/* header */

.header {display:none;}



.header .inner-box {padding:29px 8px; text-align:right;}

.header .header-text {position:relative; font-size:18px; line-height:1.2;}

.header .header-text::before {

  content:""; position:absolute; top:4px; left:-26px; width:18px; height:18px;

  background-image:url('../images/circle_icon.png'); background-repeat:no-repeat; background-size:18px 18px;

}







/* main */

.main .inner-box {padding:30px 0;}



.main .card-list {display:flex; align-items:center; justify-content:center;}

.main .card-list .card {position:relative; width:294px; height:220px; margin:8px;}

.main .card-list .card > div {

  position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; transition:transform 2s; transform-style:preserve-3d; backface-visibility:hidden; background-repeat:no-repeat;

}

.main .card-list .card .card-front {background-color:#121212; background-image:url('../images/card_front.png'); transform:perspective(600px) rotateY(0deg);}

.main .card-list .card .card-back {background-color:#ffffff; background-image:url('../images/card_back.png'); transform:perspective(600px) rotateY(-180deg);}

.main .card-list .card.flip-right .card-front {transform:perspective(600px) rotateY(180deg);}

.main .card-list .card.flip-right .card-back {transform:perspective(600px) rotateY(0deg);}

.main .card-list .card.flip-left .card-front {transform:perspective(600px) rotateY(-180deg);}

.main .card-list .card.flip-left .card-back {transform:perspective(600px) rotateY(-360deg);}



.main .card-list .card-01 > div {background-position:0% 0%;}

.main .card-list .card-02 > div {background-position:20% 0%;}

.main .card-list .card-03 > div {background-position:40% 0%;}

.main .card-list .card-04 > div {background-position:60% 0%;}

.main .card-list .card-05 > div {background-position:80% 0%;}

.main .card-list .card-06 > div {background-position:100% 0%;}

.main .card-list .card-07 > div {background-position:0% 31%;}

.main .card-list .card-08 > div {background-position:20% 31%;}

.main .card-list .card-09 > div {background-position:40% 31%;}

.main .card-list .card-10 > div {background-position:60% 31%;}

.main .card-list .card-11 > div {background-position:80% 31%;}

.main .card-list .card-12 > div {background-position:100% 31%;}

.main .card-list .card-13 > div {background-position:0% 66%;}

.main .card-list .card-14 > div {background-position:20% 66%;}

.main .card-list .card-15 > div {background-position:40% 66%;}

.main .card-list .card-16 > div {background-position:60% 66%;}

.main .card-list .card-17 > div {background-position:80% 66%;}

.main .card-list .card-18 > div {background-position:100% 66%;}

.main .card-list .card-19 > div {background-position:0% 97%;}

.main .card-list .card-20 > div {background-position:20% 97%;}

.main .card-list .card-21 > div {background-position:40% 97%;}

.main .card-list .card-22 > div {background-position:60% 97%;}

.main .card-list .card-23 > div {background-position:80% 97%;}

.main .card-list .card-24 > div {background-position:100% 97%;}







/* section01 */

.section01 .left-content {font-size:40px; font-weight:600;}



.section01 .right-content > div + div {margin-top:64px;}

.section01 .right-content .subTitle {font-size:32px; font-weight:500; line-height:1.2; color:#fff;}

.section01 .right-content .list > li {padding:24px 0; font-size:20px; font-weight:500;}

.section01 .right-content .list > li.none-padding {padding:0;}

.section01 .right-content .list > li span {display:inline-block;}

.section01 .right-content .list .list-title {width:140px; margin-right:8px;}

.section01 .right-content .child-list li {position:relative; padding-left:12px; font-size:16px; font-weight:normal;}

.section01 .right-content .child-list li span {position:absolute; top:0; left:0;}

.section01 .right-content .content01 .list > li + li {border-top:1px solid rgba(255, 255, 255, 0.2);}

.section01 .right-content .content03 a {text-decoration:underline;}

.section01 .right-content .content03 .child-list {padding:24px; background:#111; box-sizing:border-box; border:1px solid #222; border-radius:8px; cursor:pointer;}

.section01 .right-content .content03 .child-list li:not(.guide) {margin-left:12px;}

.section01 .right-content .content03 .child-list li:not(.guide)::before {background:#BDBBC1; border-color:#BDBBC1;}







/* section02 */

.section02 .left-content h2 {font-size:50px; font-weight:600; line-height:1;}



.section02 .right-content .list {display:flex; align-items:flex-start; justify-content:flex-start; flex-direction:column;}

.section02 .right-content .list li {width:100%; padding:26px 0; border-top:1px solid #000;}

.section02 .right-content .list .question,

.section02 .right-content .list .answer {font-size:20px; font-weight:500;}

.section02 .right-content .list .question {position:relative; cursor:pointer; padding-right:30px;}

.section02 .right-content .list .question .drop-icon {position:absolute; top:4px; right:0; width:24px; height:24px; margin:0 auto; border-radius:50%; border:2px solid #000; box-sizing:border-box;}

.section02 .right-content .list .question .drop-icon::before,

.section02 .right-content .list .question .drop-icon::after {

  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:12px; height:2px; background-color:#000; transition:transform 0.3s ease;

}

.section02 .right-content .list .question .drop-icon::after {transform:translate(-50%, -50%) rotate(-90deg);}

.section02 .right-content .list .question.show .drop-icon::after {transform:translate(-50%, -50%);}

.section02 .right-content .list .answer {overflow:hidden; max-height:0; padding-top:0; font-weight:normal; transition:max-height 0.2s ease, padding 0.2s ease;}

.section02 .right-content .list .answer.show {display:block; max-height:134px; padding-top:26px;}

.section02 .right-content .list .answer a {font-weight:bold;}







/* footer */

.footer .inner-box {position:relative; padding:80px 0;}



.footer .logo,

.footer .info {max-width:1200px; margin:0 auto; padding:0 20px;}

.footer .logo {display:flex; align-items:center; justify-content:flex-start; column-gap:36px; height:74px;}

.footer .logo .candies {width:150px;}

.footer .logo .mound {width:194px;}

.footer .info,

.footer .info a {color:#ccc;}

.footer .info {display:flex; align-items:flex-start; justify-content:space-between; margin-top:24px;}

.footer .info .link {font-weight:bold;}

.footer .info .link:hover {text-decoration:underline;}

.footer .top-icon {

  position:absolute; right:30px; bottom:20px; display:flex; align-items:center; justify-content:center; flex-direction:column; width:80px; height:80px; background-color:#0EED67; border-radius:50%; font-weight:600; color:#000; cursor:pointer;

}







/* 반응형 처리 */

@media (max-width:1919px) {

  /* header */

  .header .inner-box {width:96.04vw; padding:1.51vw 0;}



  /* main */

  .main .card-list .card {width:15.29vw; height:11.46vw; margin:0.42vw;}

  .main .card-list .card > div {background-size:96vw 50.42vw;}

}



@media (max-width:1439px) {

  /* common */

  .section .left-content {max-width:512px; min-width:512px;}

  .section .inner-box {padding:80px 20px;}



  /* section01 */

  .section01 .left-content {font-size:32px;}



  .section01 .right-content > div + div {margin-top:64px;}

  .section01 .right-content .subTitle {font-size:26px;}

  .section01 .right-content .list > li {padding:18px 0; font-size:18px;}

  .section01 .right-content .list .list-title {width:112px;}

  .section01 .right-content .content03 .child-list {padding:20px;}



  /* section02 */

  .section02 .left-content h2 {font-size:40px;}



  .section02 .right-content .list li {padding:20px 0;}

  .section02 .right-content .list .question,

  .section02 .right-content .list .answer {font-size:18px;}

  .section02 .right-content .list .question {padding-right:26px;}

  .section02 .right-content .list .question .drop-icon {width:22px; height:22px;}

  .section02 .right-content .list .answer.show {padding-top:20px;}

}



@media (max-width:1151px) {

  /* common */

  .section .left-content {max-width:448px; min-width:448px;}



  /* section01 */

  .section01 .left-content {font-size:27px;}

}



@media (max-width:1023px) {

  /* common */

  .section .inner-box {flex-direction:column; column-gap:0; row-gap:70px; max-width:720px;}

  .section .left-content {max-width:none; min-width:inherit;}



  /* main */

  .main .inner-box {padding:20px 0;}



  /* section01 */

  .section01 .left-content {font-size:40px;}



  .section01 .right-content .subTitle {font-size:32px;}

  .section01 .right-content .list > li {font-size:20px;}

  .section01 .right-content .list .list-title {width:140px; margin-right:8px;}

  .section01 .right-content .content03 .child-list {padding:24px;}



  /* section02 */

  .section02 .left-content h2 {font-size:50px;}



  .section02 .right-content .list li {padding:26px 0;}

  .section02 .right-content .list .question {padding-right:28px; font-size:20px;}

  .section02 .right-content .list .question .drop-icon {width:24px; height:24px;}

  .section02 .right-content .list .answer {font-size:18px;}

  .section02 .right-content .list .answer.show {padding-top:26px;}



  /* footer */

  .footer .info {flex-direction:column; row-gap:24px;}

  .footer .top-icon {right:20px;}

}



@media (max-width:719px) {

  /* main */

  .main .inner-box {padding:10px 0;}



  /* section01 */

  .section01 .left-content {font-size:5.49vw;}



  /* section02 */

  .section02 .left-content h2 {font-size:6.94vw;}

}



@media (max-width:479px) {

  /* common */

  .section .inner-box {row-gap:48px; padding:64px 20px;}



  /* section01 */

  .section01 .right-content > div + div {margin-top:48px;}

  .section01 .right-content .subTitle {font-size:24px;}

  .section01 .right-content .list > li {padding:14px 0; font-size:16px;}

  .section01 .right-content .list .list-title {width:94px;}

  .section01 .right-content .child-list li {padding-left:10px; font-size:13px;}

  .section01 .right-content .content03 .child-list {padding:16px;}



  /* section02 */

  .section02 .right-content .list li {padding:16px 0;}

  .section02 .right-content .list .question {padding-right:28px; font-size:16px;}

  .section02 .right-content .list .question .drop-icon {width:24px; height:24px;}

  .section02 .right-content .list .question .drop-icon {top:3.5px; width:18px; height:18px;}

  .section02 .right-content .list .question .drop-icon::before,

  .section02 .right-content .list .question .drop-icon::after {width:10px;}

  .section02 .right-content .list .answer {font-size:14px;}

  .section02 .right-content .list .answer.show {padding-top:16px;}



  /* footer */

  .footer .inner-box {padding:40px 0;}

  .footer .logo {column-gap:26px; height:45px;}

  .footer .logo .candies {width:105px;}

  .footer .logo .mound {width:136px;}

  .footer .info {row-gap:24px; margin-top:24px; font-size:14px;}

  .footer .top-icon {width:50px; height:50px; font-size:13px;}

  .footer .top-icon img {width:9px;}

}



@media (max-width:369px) {

  /* footer */

  .footer .top-icon {width:40px; height:40px; font-size:11px;}

  .footer .top-icon img {width:7px;}

}



@media (max-width:320px) {

  /* common */

  .section .inner-box {row-gap:36px; padding:40px 20px;}



  /* main */

  .main .card-list .card {width:48.922px; height:36.672px; margin:1.344px;}

  .main .card-list .card > div {background-size:307.2px 161.34px;}



  /* section01 */

  .section01 .left-content {font-size:17px;}

  .section01 .right-content > div + div {margin-top:36px;}

  .section01 .right-content .subTitle {font-size:20px;}

  .section01 .right-content .list > li {font-size:15px;}

  .section01 .right-content .child-list li {font-size:12px;}



  /* section02 */

  .section02 .left-content h2 {font-size:22px;}

  .section02 .right-content .list .question {font-size:15px;}

  .section02 .right-content .list .answer {font-size:13px;}



  /* footer */

  .footer .info {font-size:13px;}

  .footer .logo .candies {width:90px;}

  .footer .logo .mound {width:116px;}

}





/* ----privacy---- */

.mb-10 {margin-bottom:10px;}

.mt-30 {margin-top:30px;}

.one-space {word-spacing:30px;}

.two-space {word-spacing:8px;}



.privacy {max-width:1024px; margin:0 auto; padding:40px 20px 80px 20px;}

.privacy table {width:100%; margin:10px 0; border-collapse:collapse;}

.privacy table,

.privacy th,

.privacy td {border:1px solid black;}

.privacy th,

.privacy td {padding:8px;}



.privacy .title h1 {margin-bottom:40px; font-size:28px; text-align:center;}



.privacy .container {margin-top:60px;}

.privacy .container h2 {margin-bottom:20px; font-size:22px;}

.privacy .container .child-list {padding-left:14px;}



@media (max-width:719px) {

	.privacy {font-size:14px;}



	.privacy .title h1 {font-size:24px;}



	.privacy .container {margin-top:40px;}

	.privacy .container h2 {font-size:18px;}

}



@media (max-width:479px) {

	.privacy {padding:20px 20px 60px 20px; font-size:13px;}

	.privacy th,

	.privacy td {padding:4px;}



	.privacy .header h1 {font-size:22px;}

	.privacy .container h2 {font-size:16px;}

}