@charset "UTF-8";

/*=================================================================================
* google font
=================================================================================*/ 
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px!important;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/*=================================================================================
* root
=================================================================================*/ 
:root {
	
	/* colors */
	--color-primary: #121212;
	--color-secondary: #666;
	--color-border: #e1e1e1;
	--color-white: #fff;
	--color-gray: #646464;
	--color-lightgray: #ccc;
	--color-bg: #E2F0FD;
	--color-bg2: #FFEBEC;
	--color-bg3: #E3FDE2;
	--color-bg4: #FFF7D5;
	--color-bg5: #3273DD;
	--color-point1: #3273DD;
	--color-point2: #DF2D31;
	--color-point3: #eee;
	--color-point4: #EB4246;
	--color-point5: #;
	--color-form: #004B9E;

	/* typography */
	--font-family-base: 'Pretendard', sans-serif;
	--font-event-01: clamp(48px, 3.333vw, 64px);
	--font-event-02: clamp(36px, 2.5vw, 48px);
	--font-event-03: clamp(30px, 1.979vw, 38px);
	--font-text-01: clamp(21px, 1.563vw, 30px);
	--font-text-02: clamp(18px, 1.25vw, 24px);
	--font-text-03: clamp(16px, 0.938vw, 18px);
	--font-text-04: clamp(14px, 0.833vw, 16px);
	--font-text-05: clamp(13px, 0.729vw, 14px);

	/* radius */
	--radius-sm: 3px;
	--radius-md: 5px;
	--radius-lg: 10px;
	--radius-xl: 35px;

	/* shadow */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);

	/* gap */
	--gap-table: 1%;
	--gap: clamp(10px, 1.042vw, 20px);
	--gap-xs: clamp(2px, 0.208vw, 4px);
	--gap-sm: clamp(5px, 0.417vw, 8px);
	--gap-md: clamp(10px, 0.781vw, 15px);
	--gap-lg: clamp(14px, 1.25vw, 24px);
	
	/* align */
	--align-center: center;
	--align-start: flex-start;
	--align-end: flex-end;
	
	/* justify */
	--justify-center: center;
	--justify-left: flex-start;
	--justify-right: flex-end;
	--justify-between: space-between;
	--justify-around: space-around;

	/* flex size */
	--flex-1: 1;
	
	/* btn */
	--link-main: #3273DD;
	--link-main-hover: #094AB2;
	--link-sub: #646464;
	--link-sub-hover: #232323;
	
	/* banner-color */
	--banner-01: #52C437;
	--banner-02: #5594DD;
	--banner-03: #FFC134;
}


/*=================================================================================
* container
=================================================================================*/ 
.wrap { width: 100%; margin: 0!important; }
.container, .container .left-area, .container .mobile-area { margin-bottom: 0!important; }
.container { width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; }
.container .left-area { height: 100vh; width: 540px; }
.container .mobile-area { height: 100vh; overflow: hidden; width: 480px;  background-image: linear-gradient(to top, #fff 0%, #F6FAFD 100%); box-shadow: 0 0 30px rgba(0,0,0,.16); }
.mobile-area iframe { border: 0; width: 100%; height: 100%; display: block; }
.layout { display: flex; gap: var(--gap-md); }
.content { flex: var(--flex-1); }
.no-margin { margin: 0; }
.link-underline { text-decoration: underline; }

/*=================================================================================
* color
=================================================================================*/ 
.fc-primary { color: var(--color-primary)!important; }
.fc-secondary { color: var(--color-secondary)!important; }
.fc-white { color: var(--color-white)!important; }
.fc-gray { color: var(--color-gray)!important; }
.fc-blue { color: var(--color-point1)!important; }

/*=================================================================================
* font-style
=================================================================================*/ 
.fs-event-01 { font-size: var(--font-event-01)!important; line-height: 1.1; }
.fs-event-02 { font-size: var(--font-event-02)!important; line-height: 1.1; }
.fs-event-03 { font-size: var(--font-event-03)!important; line-height: 1.1; }
.fs-text-01 { font-size: var(--font-text-01)!important; }
.fs-text-02 { font-size: var(--font-text-02)!important; }
.fs-text-03 { font-size: var(--font-text-03)!important; }
.fs-text-04 { font-size: var(--font-text-04)!important; }
.fs-text-05 { font-size: var(--font-text-05)!important; }
.fs-text-06 { font-size: var(--font-text-06)!important; }

.fw-100 { font-weight: 100!important; }
.fw-200 { font-weight: 200!important; }
.fw-300 { font-weight: 300!important; }
.fw-400 { font-weight: 400!important; }
.fw-500 { font-weight: 500!important; }
.fw-600 { font-weight: 600!important; }
.fw-700 { font-weight: 700!important; }
.fw-800 { font-weight: 800!important; }
.fw-900 { font-weight: 900!important; }

h1 { font-size: var(--font-text-01); }
h2 { font-size: var(--font-text-02); }
h3 { font-size: var(--font-text-03); }
h4 { font-size: var(--font-text-04); }
div, p, ol, li, dt, dd, span { font-size: var(--font-text-04); margin-bottom: clamp(10px, 1.042vw, 20px); }

.slogan { font-size: var(--font-text-03); }

/*=================================================================================
* grid
=================================================================================*/ 
.grid { display: grid; gap: var(--gap); }

/* 2 / 3 / 4 컬럼 */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* 자동 반응형 */
.grid-auto, .grid-auto2, .grid-auto3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* 카드 */
.card { padding: 20px; border-radius: clamp(20px, 0.521vw, 15px); background: var(--color-white); }
.card.shadow { box-shadow: 0 2px 20px rgba(0, 0, 0, .2); }
.card-line { background: none; border: solid 1px var(--color-border); }
.card-bg { background: var(--color-bg); }
.card-bg2 { background: var(--color-bg2); }
.card-bg3 { background: var(--color-bg3); }
.card-bg4 { background: var(--color-bg4); }
.card-bg5 { background: var(--color-bg5); }

/*=================================================================================
* text-align
=================================================================================*/ 
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/*=================================================================================
* bullet
=================================================================================*/ 
.bullet li { list-style: disc; margin-left: 20px; }
.bullet-01 { background-color: var(--color-point4); color: var(--color-bg4); padding: 3px 10px; border-radius: 20px; margin-left: 5px; }

/*=================================================================================
* flex
=================================================================================*/ 
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-left { display: flex; justify-content: var(--justify-start); align-items: var(--align-start); }
.flex-center { display: flex; justify-content: var(--justify-center); align-items: var(--align-center); }
.flex-right { display: flex; justify-content: var(--justify-end); align-items: var(--align-end); }
.flex-between { display: flex; justify-content: var(--justify-between); align-items: var(--align-center); }

/*=================================================================================
* form
=================================================================================*/ 
.form-wr dl dd div:nth-child(1) { width: 13%; }
.form-wr dl dd div:nth-child(2) { width: 87%; }
.form-wr dl { border-top: solid 1px var(--color-border); }
.form-wr dl dd { display: flex; align-items: center; border-bottom: solid 1px var(--color-border); padding-top: clamp(7px, 0.729vw, 14px); padding-bottom: clamp(7px, 0.729vw, 14px); }
.form-wr dl dd, .form-wr dl dd div { margin: 0; }
.form-wr dl dd div { padding-left: clamp(7px, 0.729vw, 14px); padding-right: clamp(7px, 0.729vw, 14px); }
.form-wr .input-check, .form-wr .input-radio { width: auto !important; margin-right: 20px; display: flex; align-items: center; line-height: 36px !important; }
.form-wr .input-check .check-box, .form-wr .input-radio .radio-box { margin-bottom: 0; display: flex; align-items: center; width: 20px;  height: 20px; border: solid 1px var(--color-border); margin-right: 10px; border-radius: var(--radius-sm); cursor: pointer; position: relative; }
.form-wr .input-radio .radio-box { border-radius: 100%; }
.form-wr .input-check input[type="checkbox"]:checked ~ .check-box::after, .form-wr .input-radio input[type="radio"]:checked ~ .radio-box::after { content: ""; display: inline-block; position: absolute; transition: all 0.4s ease; left: 5px; top: 3px; visibility: visible; }
.form-wr .input-check input[type="checkbox"]:checked ~ .check-box::after { height: 9px; width: 6px; margin-top: -1px; border-bottom: 3px solid var(--color-form); border-right: 3px solid var(--color-form); transform: rotate(45deg); }
.form-wr .input-radio input[type="radio"]:checked ~ .radio-box::after { height: 10px; width: 10px; border-radius: 100%; background-color: var(--color-form); margin-top: 2px; }
.form-wr em { display: block; margin: 0 10px; line-height: 36px; }
.border-0 { border: 0!important; }

.auto-switch { display: flex; align-items: center; justify-content: space-between; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; } /* 스위치 박스 */
.switch input { opacity: 0; width: 0; height: 0; } /* 실제 input 숨김 */
.slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-lightgray); border-radius: 50px; transition: .3s; margin-bottom: 0; } /* 트랙 */
.slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--color-white); border-radius: 50%; transition: .3s; box-shadow: 0 2px 6px rgba(0,0,0,.2); } /* 동그라미 */
.switch input:checked + .slider { background: var(--color-point1); } /* 체크되었을 때 */
.switch input:checked + .slider::before { transform: translateX(20px); }
.autoLoginLabel { cursor: pointer; color: var(--color-gray); } /* 텍스트 */

.checkbox-item { margin-bottom: 0; }
.checkbox-item input[type="checkbox"], .chkarea input[type="checkbox"] {display: none; }
.checkbox-item.all input[type="checkbox"] + label { display: flex; border: 1px solid var(--color-border); align-items: center; gap: 10px; padding: 15px 20px; border-radius: 10px; transition: all 0.3s; font-size: var(--font-text-03) !important; font-weight: 500; cursor: pointer; }
.checkbox-item.all label span, .checkbox-item.common label span { margin-bottom: 0; }
.checkbox-item.common { position: relative; display: flex; align-items: center; padding: 5px 10px; border-bottom: 1px solid var(--color-border); }
.checkbox-item.common .chkarea, .chkarea { flex: auto; padding: 0 10px; margin-bottom: 0; }
.checkbox-item.common input[type="checkbox"] + label, .chkarea input[type="checkbox"] + label { width: 100%; display: flex; align-items: center; padding: 10px 0; gap: 10px; font-size: var(--font-text-03) !important; font-weight: 500; cursor: pointer; }
.checkbox-item.all input[type="checkbox"] + label > span { background: #dae2e6; color: var(--color-white); border-radius: 100px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.checkbox-item.all input[type="checkbox"]:checked + label > span { background: var(--color-point1); }
.checkbox-item.common input[type="checkbox"] + label > span, .chkarea input[type="checkbox"] + label > span  { border-radius: 100px; color: var(--color-lightgray); transition: all 0.3s; }
.checkbox-item.common input[type="checkbox"]:checked + label > span, .chkarea input[type="checkbox"]:checked + label > span { border-color: #222; color: var(--color-primary); }
.checkbox-item.common .icons { color: #ccc; font-weight: 100; cursor: pointer; padding: 10px; margin-bottom: 0; }
.chkarea label span { margin-bottom: 0; }

.form-add { width: 100%; display: flex; flex-wrap: wrap; gap: 2%; margin-bottom: 0; }
.form-add > div.flex { flex-direction: row!important; }
.form-add > div.flex input { width: auto; }
.form-add > div { display: flex; flex-direction: column; align-items: flex-start; }
.form-add > div label { margin-bottom: 5px; }
.form-add > div em { margin-top: 5px; font-size: var(--font-text-05); }
.form-add > div input { width: 100%; }
.form-add > div.col1 { width: 100%; }
.form-add > div.col2 { width: 49%; }
.form-add > div.col3 { width: 32%; }
.form-add .input-radio { width: auto !important; margin-right: 20px; display: flex; align-items: center; line-height: 36px !important; }
.form-add .input-radio .radio-box { margin-bottom: 0; display: flex; align-items: center; width: 20px;  height: 20px; border: solid 1px var(--color-border); margin-right: 10px; border-radius: var(--radius-sm); cursor: pointer; position: relative; }
.form-add .input-radio .radio-box { border-radius: 100%; }
.form-add .input-radio input[type="radio"]:checked ~ .radio-box::after { content: ""; display: inline-block; position: absolute; transition: all 0.4s ease; left: 5px; top: 3px; visibility: visible; }
.form-add .input-radio input[type="radio"]:checked ~ .radio-box::after { height: 10px; width: 10px; border-radius: 100%; background-color: var(--color-form); margin-top: 2px; }

.file-upload { display: flex; align-items: center; gap: 10px; border: solid 1px var(--color-border); width: 100%; border-radius: 10px; padding: 10px; margin-bottom: 0; }
.file-upload input[type="file"] { display: none; }
.file-label { display: inline-flex; align-items: center; justify-content: center; height:36px; padding: 0 20px; background: var(--link-main); color: var(--color-white); border-radius: 10px; cursor: pointer; transition: .3s; margin-bottom: 0!important; }
.file-label:hover { background: var(--link-main-hover); }
.file-name { font-size: 14px; color: var(--color-gray); margin-bottom: 0; }

/*=================================================================================
* btn
=================================================================================*/ 
.btn-wrap { width: 100%; }
.btn { display: inline-flex; justify-content: center; align-items: center; padding: 10px 30px; border-radius: var(--radius-xl); border: none; cursor: pointer; transition: 0.2s; margin-left: clamp(7px, 0.729vw, 14px); margin-right: clamp(7px, 0.729vw, 14px); }
.btn-primary { background: var(--link-main); color: var(--color-white); }
.btn-primary:hover { background: var(--link-main-hover); color: var(--color-white); }
.btn-secondary { background: var(--link-sub); color: var(--color-white); }
.btn-secondary:hover { background: var(--link-sub-hover); color: var(--color-white); }
.btn-outline { border: 1px solid var(--link-main); color: var(--link-main); background: transparent; }
.btn-outline:hover { background: var(--link-main); color: var(--color-white);  }
.btn-form { display: inline-flex; justify-content: center; align-items: center; padding: 0 14px; line-height: 36px;  border-radius: var(--radius-md); border: none; cursor: pointer; transition: 0.2s; margin-left: clamp(7px, 0.729vw, 14px); margin-right: clamp(7px, 0.729vw, 14px);}
.btn.small { padding: 6px 14px 5px!important; }
.btn.big { padding: 17px 50px!important; }
.btn.box { border-radius: 3px; }
.btn-down { display: inline-flex; justify-content: center; align-items: center; padding: 0 10px; height: 36px; line-height: 36px;  border-radius: 3px; border: none; cursor: pointer; background-color: var(--color-primary); color: var(--color-white); }

/*=================================================================================
* padding & margin
=================================================================================*/ 
.mt-0 { margin-top: 0!important; }
.mt-10 { margin-top: 10px!important; }
.mt-20 { margin-top: 20px!important; }
.mt-30 { margin-top: 30px!important; }
.mt-40 { margin-top: 40px!important; }
.mt-50 { margin-top: 50px!important; }
.mr-0 { margin-right: 0!important; }
.mr-10 { margin-right: 10px!important; }
.mr-20 { margin-right: 20px!important; }
.mr-30 { margin-right: 30px!important; }
.mr-40 { margin-right: 40px!important; }
.mr-50 { margin-right: 50px!important; }
.mb-0 { margin-bottom: 0!important; }
.mb-10 { margin-bottom: 10px!important; }
.mb-20 { margin-bottom: 20px!important; }
.mb-30 { margin-bottom: 30px!important; }
.mb-40 { margin-bottom: 40px!important; }
.mb-50 { margin-bottom: 50px!important; }
.ml-0 { margin-left: 0!important; }
.ml-10 { margin-left: 10px!important; }
.ml-20 { margin-left: 20px!important; }
.ml-30 { margin-left: 30px!important; }
.ml-40 { margin-left: 40px!important; }
.ml-50 { margin-left: 50px!important; }

.pt-0 { padding-top: 0!important; }
.pt-10 { padding-top: 10px!important; }
.vt-20 { padding-top: 20px!important; }
.pt-30 { padding-top: 30px!important; }
.pt-40 { padding-top: 40px!important; }
.pt-50 { padding-top: 50px!important; }
.pr-0 { padding-right: 0!important; }
.pr-10 { padding-right: 10px!important; }
.pr-20 { padding-right: 20px!important; }
.pr-30 { padding-right: 30px!important; }
.pr-40 { padding-right: 40px!important; }
.pr-50 { padding-right: 50px!important; }
.pb-0 { padding-bottom: 0!important; }
.pb-10 { padding-bottom: 10px!important; }
.pb-20 { padding-bottom: 20px!important; }
.pb-30 { padding-bottom: 30px!important; }
.pb-40 { padding-bottom: 40px!important; }
.pb-50 { padding-bottom: 50px!important; }
.pl-0 { padding-left: 0!important; }
.pl-10 { padding-left: 10px!important; }
.pl-20 { padding-left: 20px!important; }
.pl-30 { padding-left: 30px!important; }
.pl-40 { padding-left: 40px!important; }
.pl-50 { padding-left: 50px!important; }

/*=================================================================================
* table
=================================================================================*/ 
.table-def { width: 100%; }
.table-def dl dt { border-top: solid 1px var(--color-border); padding-top: clamp(10px, 1.042vw, 20px); text-align: center; font-weight: 700; }
.table-def dl dt, .table-def dl dd { display: flex; gap: var(--gap-table); border-bottom: solid 1px var(--color-border); }
.table-def .col-4 dt span:nth-child(1), .table-def .col-4 dd span:nth-child(1) { width: 7%; text-align: center; }
.table-def .col-4 dt span:nth-child(2), .table-def .col-4 dd span:nth-child(2) { width: 66%; }
.table-def .col-4 dt span:nth-child(3), .table-def .col-4 dd span:nth-child(3) { width: 12%; text-align: center; }
.table-def .col-4 dt span:nth-child(4), .table-def .col-4 dd span:nth-child(4) { width: 12%; text-align: center; }

.table-def .col-5 dt span:nth-child(1), .table-def .col-5 dd span:nth-child(1) { width: 7%; text-align: center; }
.table-def .col-5 dt span:nth-child(2), .table-def .col-5 dd span:nth-child(2) { width: 54%; }
.table-def .col-5 dt span:nth-child(3), .table-def .col-5 dd span:nth-child(3) { width: 12%; text-align: center; }
.table-def .col-5 dt span:nth-child(4), .table-def .col-5 dd span:nth-child(4) { width: 12%; text-align: center; }
.table-def .col-5 dt span:nth-child(5), .table-def .col-5 dd span:nth-child(5) { width: 12%; text-align: center; }

.table-def .col-6 dt span:nth-child(1), .table-def .col-6 dd span:nth-child(1) { width: 7%; text-align: center; }
.table-def .col-6 dt span:nth-child(2), .table-def .col-6 dd span:nth-child(2) { width: 53%; }
.table-def .col-6 dt span:nth-child(3), .table-def .col-6 dd span:nth-child(3) { width: 10%; text-align: center; }
.table-def .col-6 dt span:nth-child(4), .table-def .col-6 dd span:nth-child(4) { width: 10%; text-align: center; }
.table-def .col-6 dt span:nth-child(5), .table-def .col-6 dd span:nth-child(5) { width: 10%; text-align: center; }
.table-def .col-6 dt span:nth-child(6), .table-def .col-6 dd span:nth-child(6) { width: 10%; text-align: center; }

.table-def .col-7 dt span:nth-child(1), .table-def .col-7 dd span:nth-child(1) { width: 7%; text-align: center; }
.table-def .col-7 dt span:nth-child(2), .table-def .col-7 dd span:nth-child(2) { width: 48%; }
.table-def .col-7 dt span:nth-child(3), .table-def .col-7 dd span:nth-child(3) { width: 9%; text-align: center; }
.table-def .col-7 dt span:nth-child(4), .table-def .col-7 dd span:nth-child(4) { width: 9%; text-align: center; }
.table-def .col-7 dt span:nth-child(5), .table-def .col-7 dd span:nth-child(5) { width: 9%; text-align: center; }
.table-def .col-7 dt span:nth-child(6), .table-def .col-7 dd span:nth-child(6) { width: 9%; text-align: center; }
.table-def .col-7 dt span:nth-child(7), .table-def .col-7 dd span:nth-child(7) { width: 9%; text-align: center; }

.table table { width: 100%; border-top: solid 1px var(--color-border); border-left: solid 1px var(--color-border); }
.table table th, .table table td { border-bottom: solid 1px var(--color-border); border-right: solid 1px var(--color-border); padding: 5px; }
.table table th { text-align: center; }

/*=================================================================================
* pagenation
=================================================================================*/ 
.pagenation { display: grid; grid-auto-flow: column; justify-content: center; gap: var(--gap-sm); }
.pagenation a { width: clamp(28px, 2.188vw, 42px); height: clamp(28px, 2.188vw, 42px); border-radius: 5px; border: solid 1px var(--color-border); display: flex; justify-content: center; align-items: center;}
.pagenation a:hover, .pagenation a.active { color: var(--color-white); border: solid 1px var(--link-main); background-color: var(--link-main); }
.pagenation a.prev, .pagenation a.next { text-indent: -500em; overflow: hidden; }
.pagenation a.prev::before { content: ""; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid var(--color-primary); }
.pagenation a.prev:hover::before { border-right: 10px solid var(--color-white); }
.pagenation a.next::before { content: ""; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--color-primary); }
.pagenation a.next:hover::before { border-left: 10px solid var(--color-white); }


/*=================================================================================
* Nav
=================================================================================*/ 
#mobile { width: 100%; height: 100vh; max-width: 480px; margin: 0 auto!important; }
.nav { position: fixed; bottom: 0; margin-bottom: 0; width: 100%; max-width: 480px; height: 75px; border-radius: 20px 20px 0 0; box-shadow: 0 0 30px rgba(0, 0, 0, .16); background-color: var(--color-white); z-index: 1000; padding-bottom: env(safe-area-inset-bottom); transform: translateZ(0); -webkit-transform: translateZ(0); }
.nav ul { display: flex; justify-content: space-around; margin-top: 15px; }
.nav ul li { }
.nav ul li span { font-size: 12px; color: #D1D6DA; }
.nav ul li a { display: flex; flex-direction: column; align-items: center; gap:5px; width: 100%; height: 100%; }
.nav ul li a i { display: block; width: 24px; height: 24px; }
.nav ul li a:hover span, .nav ul li a.active span { color: var(--color-point1); }
.nav ul li:nth-child(1) a i { background: url("../img/icon-home.svg") no-repeat; }
.nav ul li:nth-child(2) a i { background: url("../img/icon-payment.svg") no-repeat; }
.nav ul li:nth-child(3) a i { background: url("../img/icon-quiz.svg") no-repeat; }
.nav ul li:nth-child(4) a i { background: url("../img/icon-menu.svg") no-repeat; }
.nav ul li:nth-child(1) a:hover i, .nav ul li:nth-child(1) a.active i { background: url("../img/icon-home-active.svg") no-repeat; }
.nav ul li:nth-child(2) a:hover i, .nav ul li:nth-child(2) a.active i { background: url("../img/icon-payment-active.svg") no-repeat; }
.nav ul li:nth-child(3) a:hover i, .nav ul li:nth-child(3) a.active i { background: url("../img/icon-quiz-active.svg") no-repeat; }
.nav ul li:nth-child(4) a:hover i, .nav ul li:nth-child(4) a.active i { background: url("../img/icon-menu-active.svg") no-repeat; }

.bottom-sheet { position: fixed; inset: 0; z-index: 9999; pointer-events: none; margin-bottom: 0; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: .3s; }
.sheet-content { position: absolute; left: 0; bottom: 0; width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 20px; transform: translateY(100%); transition: .4s ease; margin-bottom: 0; }
.bottom-sheet.active { pointer-events: auto; }
.bottom-sheet.active .sheet-bg { opacity: 1; }
.bottom-sheet.active .sheet-content { transform: translateY(0); }

.sheet-header { display: flex; justify-content: space-between; margin-bottom: 15px; }
.menu-list li { padding: 15px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 0; }
.menu-list li a { display: block; width: 100%; height: 100%; }
.menu-list li a:hover { color: var(--link-main); }
.menu-list li ul li { border-bottom: 0; padding-bottom: 0; padding-left: 10px; }
body.scroll-lock { overflow: hidden; }

/*=================================================================================
* Header
=================================================================================*/ 
.header { padding: 20px; display: flex; justify-content: space-between; margin-bottom: 0; }
.header .right-link { display: flex; gap: 15px; padding-right: 5px; }
.header .right-link a { text-indent: -500em; display: block; position: relative; width: 24px; height: 24px; }
.header .right-link a.icon-login { background: url("../img/icon-people.svg") no-repeat; }
.header .right-link a.icon-message { background: url("../img/icon-bubble.svg") no-repeat; }
.header .right-link a.icon-message span { width: 17px; height: 17px; border-radius: 100%; display: flex; align-items: center; justify-content: center; position: absolute; top: -5px; right: -5px; background-color: var(--color-point2); color: var(--color-white); font-size: 10px; text-indent: 0; }
h1.logo { display: block; margin: 100px 0 70px; text-indent: -500em; overflow: hidden; background: url("../img/logo.svg") no-repeat; width: 250px; height: 80px; background-size: 100%; }
h1.logo a { display: block; }
h1 a.m-logo { display: block; text-indent: -500em; overflow: hidden; background: url("../img/logo.svg") no-repeat; width: 120px; height: 40px; background-size: 100%; margin-top: -5px; }

/*=================================================================================
* swiper
=================================================================================*/
.swiper { width: 100%; height: 100%; margin-bottom: 0!important; }
.swiper-slide { text-align: center; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swiper-pagination { margin-bottom: 0!important; }
.swiper-pagination-bullet { width: 20px; height: 20px; text-align: center; background: rgba(0, 0, 0, 0.2); }
.swiper-pagination-bullet-active { color: #fff; background: var(--color-point1)!important; }

/*=================================================================================
* Footer
=================================================================================*/ 
.footer { padding: 35px 20px 85px; border-top: solid 1px var(--color-border); background-color: var(--color-white); }
.foot-link em { margin: 0 10px; color: var(--color-gray); }
.footer strong { display: block; margin-bottom: 10px; }
.footer p { font-size: var(--font-text-05); }

/*=================================================================================
* popup
=================================================================================*/ 
.modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: .3s; }
.modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal-content { position: relative; width: 90%; max-width: 400px; max-height: 80vh; background: var(--color-white); border-radius: 16px; overflow: hidden; transform: translateY(30px) scale(.95); transition: .3s; }
.modal.active { opacity: 1; pointer-events: auto; }
.modal.active .modal-content { transform: translateY(0) scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--color-border); }
.modal-header h3 { margin-bottom: 0; }
.modal-body { padding: 16px; overflow: auto; max-height: 60vh; }
body.scroll-lock { overflow:hidden; }

/*=================================================================================
* tab
=================================================================================*/ 
.tab-menu { display: flex; justify-content: space-between; margin-bottom: 20px; }
.tab-menu button { font-weight: 700; font-size: var(--font-text-03); }
.tab-btn { padding: 12px 20px; border: 0; background: var(--color-point3); border-radius: 10px; cursor: pointer; transition: .3s; }
.tab-btn.active { background: var(--color-point1); color: var(--color-white); }
.tab-pane { display: none; padding: 20px; border: 1px solid var(--color-border); border-radius:16px; }
.tab-pane.active { display: block; }

/*=================================================================================
* accordion
=================================================================================*/ 
.accordion { }
.accordion-item { border: 1px solid var(--color-border); margin-bottom: 10px; border-radius: 10px; }
.accordion-header { width: 100%; padding: 10px 16px; border: 0; display: flex; align-items: center; justify-content: space-between; font-weight: 700; cursor: pointer; }
.accordion-header span { margin-bottom: 0; }
.accordion-header span i { font-style: normal; background-color: var(--color-bg5);  padding: 2px 6px; border-radius: 100%; margin-right: 5px; color: var(--color-white); }
.accordion-icon { width: 14px; height: 14px; transition: .3s; background: url("../img/faq-arrow-icon.svg") center center no-repeat; margin-bottom: 1px; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height .3s ease; margin-bottom: 0; }
.accordion-content p { padding: 20px 16px; margin: 0; line-height: 1.6; text-align: left; }
.accordion-item.active .accordion-content { max-height: 400px; border-top: 1px solid var(--color-border);}
.accordion-item.active .accordion-icon { transform: rotate(-180deg); }