@import url('/css/tokens/tokens-ref.css');
@import url('/css/tokens/tokens-sys.css');
@import url('/css/tokens/tokens-ref-mobile.css');
@import url('/css/tokens/tokens-sys-mobile.css');
@font-face {
	font-family: 'Pretendard';	
	font-weight: 700;
	font-display: swap;
	src: url('/fonts/Pretendard-Bold.subset.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: url('/fonts/Pretendard-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: url('/fonts/Pretendard-Medium.subset.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/Pretendard-Regular.subset.woff2') format('woff2');
}

/******************* css reset *******************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, button { margin: 0; padding: 0; border: 0; font-family: 'Pretendard', 'sans-serif'; outline: none; background-color: transparent; word-break: keep-all;}
button{cursor: pointer;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;font: var(--sys-font-body-5); letter-spacing: var(--sys-font-letterSpacing-default);}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {	content: ''; content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}
a{text-decoration: none; color: inherit;}
body{color: var(--color-text-default);}
input, select{user-select: none;}
*, *:before, *:after{box-sizing: border-box;}
img{max-width: 100%;}

/* common */
.br{display: block;}
.container{width: var(--sizing-container, 1080px); margin: 0 auto;}
section .container{padding: var(--spacing-container-padding, 96px) 0px; display: flex; flex-direction: column; gap: var(--spacing-container-spacing, 64px);}

/* input */
input[type="text"]{height: var(--sizing-700, 56px); padding: 0px var(--spacing-100, 16px); border-radius: var(--radius-100, 8px); background: var(--color-background-dark, #F2F2F2); font: var(--sys-font-detail-1); width: 100%; outline: none; border-width: 1px; border-style: solid; border-color: transparent;}
input[type="text"]:focus{border-color: var(--color-content-accent-standard, #2E4FD1);} input[type="text"]::placeholder{color: var(--color-text-disabled, #999);}

input[type="checkbox"]{display: none;}
input[type="checkbox"]+label{display: flex; gap: var(--spacing-50, 8px); font: var(--sys-font-detail-1); user-select: none;}
input[type="checkbox"]+label:before{content:''; display: block; width: var(--sizing-300, 24px); height: var(--sizing-300, 24px); border-radius: var(--radius-50, 4px); border: 1px solid var(--color-border-control, #CCC); background: var(--color-background-onsurface, #FFF);}
input[type="checkbox"]:checked+label:before{background-image: url('../img/check.svg'); background-repeat: no-repeat; background-position: center; background-color: var(--color-content-accent-standard, #2E4FD1); background-size: var(--sizing-150) var(--sizing-100); border: none;}
input[type="checkbox"]+label:active:before{background-color: var(--color-background-dark, #F2F2F2);}
input[type="checkbox"]:checked+label:active:before{background-color: var(--color-content-accent-dark, #253FA7);}

/* select */
select{width: 100%; height: var(--sizing-700, 56px); padding: 0px var(--spacing-100, 16px); align-items: center; gap: var(--spacing-125, 20px); flex-shrink: 0;border-radius: var(--radius-100, 8px); border: 1px solid var(--color-border-control, #CCC); background: var(--color-background-onsurface, #FFF); outline: none; font: var(--sys-font-detail-1); appearance: none; -webkit-appearance: none; background: url('../img/arrow-down.svg')no-repeat; background-size: var(--sizing-250); background-position: right var(--spacing-100, 16px) center;}
select:focus{border: 1px solid var(--color-content-accent-standard, #2E4FD1);}



/* title */
.comp-title{display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-100, 16px);}
.comp-title h5{font: var(--sys-font-title-2);}
.comp-title h6{font: var(--sys-font-body-3);}

/* video */
section.video_wrap .contents{display: flex; padding-top: var(--spacing-200, 32px); gap: var(--spacing-400, 64px) var(--spacing-200, 32px); flex-wrap: wrap; flex-direction: row !important;}
section.video_wrap .contents .box{flex-basis: 40%; flex-grow: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-125, 20px);}
section.video_wrap .contents .box .text{display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-25, 4px); flex-grow: 1;}
section.video_wrap .contents .box .text strong{font: var(--sys-font-subtitle-4);}
section.video_wrap .contents .box .text p{font: var(--sys-font-body-5); color: var(--color-text-subdued, #595959);}
section.video_wrap .contents .box iframe{width: 523px; height: 294px; border-radius: var(--radius-200, 16px);}

/* process_wrap */
.process_wrap ol{ display: flex; padding: var(--spacing-300, 48px) var(--spacing-75, 12px); border-radius: var(--radius-200, 16px); background: var(--color-background-light, #FAFAFA);}
.process_wrap li{display: flex; flex-direction: column; align-items: center; gap: var(--spacing-125, 20px); flex-grow: 1; text-align: center; flex-shrink: 0; flex-basis: 0; padding: 0 var(--spacing-25, 4px); position: relative;}
.process_wrap li:first-child:after{content: ''; display: block; position: absolute; left: 50%; top: 14px; width: calc(100% * 5); height: 1px; border-top: 1px dashed var(--color-content-accent-standard, #2E4FD1); opacity: 0.4; z-index: 0;}
.process_wrap li .num{display: flex; width: var(--sizing-400, 32px); height: var(--sizing-400, 32px); justify-content: center; align-items: center; border-radius: var(--radius-full, 100%); background: var(--color-content-accent-standard, #2E4FD1); color: var(--color-text-default-alt, #FAFAFA); font: var(--sys-font-detail-2); z-index: 1;}
.process_wrap li dl{display: flex; flex-direction: column; align-items: center; gap: var(--spacing-25, 4px);}
.process_wrap li dt{font: var(--sys-font-subtitle-4)}
.process_wrap li dd{color: var(--color-text-subdued, #595959); font: var(--sys-font-detail-1);}

/* table */
.comp-table-small{border-top: 1px solid var(--color-border-frame-light-alt, #595959); text-align: center; background: var(--color-background-onsurface, #FFF);}
.comp-table-small th{font: var(--sys-font-detail-2);}
.comp-table-small thead th{background: var(--color-content-accent-lighter, #F7F8FD); padding: var(--spacing-75, 12px) var(--spacing-50, 8px);}
.comp-table-small tr{border-bottom: 1px solid var(--color-border-frame-light, #E6E6E6);}
.comp-table-small tbody th{padding: var(--spacing-75, 12px) var(--spacing-50, 8px);}
.comp-table-small td{padding: var(--spacing-75, 12px) var(--spacing-50, 8px); color: var(--color-text-subdued, #595959); font: var(--sys-font-detail-1);}
.comp-table-small tfoot{background-color: var(--color-content-accent-lighter); }
.comp-table-small tfoot td{font: var(--sys-font-detail-2); color: var(--color-content-accent-standard);}

.comp-table-large{text-align: center; width: 100%; table-layout: fixed; background: var(--color-background-onsurface, #FFF); position: relative;}
.comp-table-large:before{content: ''; display: block; width: 100%; height: 1px; position: absolute; left: 0; top: 0; background-color: var(--color-border-frame-light-alt, #595959);}
.comp-table-large th, .comp-table-large td{border: 1px solid var(--color-border-frame-light, #E6E6E6);}
.comp-table-large th{font: var(--sys-font-detail-2);}
.comp-table-large th.slash span{display: flex;}
.comp-table-large th.slash span:first-child{justify-content: flex-end;}
.comp-table-large th.slash span:last-child{justify-content: flex-start;}
.comp-table-large td{font: var(--sys-font-detail-1);}
.comp-table-large thead th{background: var(--color-content-accent-dark, #253FA7); color: var(--color-grey-white, #FFF); padding: var(--spacing-100, 16px) var(--spacing-75, 12px);}
.comp-table-large tbody tr:first-child > *{border-top: none;}
.comp-table-large tbody tr th{background: var(--color-content-accent-lighter, #F7F8FD); padding: var(--spacing-100, 16px) var(--spacing-75, 12px); }
.comp-table-large tbody td{padding: var(--spacing-100, 16px) var(--spacing-75, 12px); color: var(--color-text-subdued, #595959);}
.comp-table-large tr > *:first-child{border-left: none;}
.comp-table-large tr > *:last-child{border-right: none;}
.comp-table-large tbody strong{font: var(--sys-font-detail-2); color: var(--color-content-accent-standard, #2E4FD1);}
.comp-table-large tbody .disabled{display: block; color: var(--color-text-disabled, #999);}
.comp-table-large tbody .etc{text-align: left;}
.comp-table-large tbody .etc span{display: block; text-indent: calc(-1 * var(--spacing-50, 8px)); padding-left: var(--spacing-50, 8px);}
.comp-table-large tbody .etc span:before{content: '-'; margin-right: var(--spacing-25, 4px);}

/* header */
header{height: 96px;}
header .fixed{left: 0; top: 0; width: 100%; height: 96px; border-bottom: 1px solid var(--color-border-frame-light, #E6E6E6); background: var(--color-background-onsurface, #FFF); z-index: 1000;}
header .container{display: flex; justify-content: space-between; align-items: center; height: 100%;}
header .call{display: none}
header .menu_wrap ul{ display: flex; align-items: center; gap: var(--spacing-200, 32px); overflow-x: auto;}
header .menu_wrap li{display: flex; padding: var(--spacing-50, 8px) var(--spacing-none, 0px); align-items: center; flex-shrink: 0;}
header .menu_wrap li a{font: var(--sys-font-subtitle-4);}
header .menu_wrap li a:hover{color: var(--color-brand-standard, #FA3848);}

/* footer */
footer{border-top: 1px solid var(--color-border-frame-light, #E6E6E6); background: var(--color-background-onsurface, #FFF);}
footer .container{display: flex; width: var(--sizing-container, 1080px); padding: var(--spacing-400, 64px) var(--spacing-none, 0px); flex-direction: column; justify-content: center; align-items: center; gap: var(--spacing-200, 32px);}
footer .info{display: flex; flex-wrap: wrap; color: var(--color-text-subdued, #595959); font: var(--sys-font-detail-1); max-width: 800px; gap: var(--spacing-none, 0px) var(--spacing-50, 8px); justify-content: center;}
footer .info span{display: flex; align-items: center; gap: var(--spacing-50, 8px);}
footer .info span:after{content: ''; display: block; width: 1px; height: 16px; background: var(--color-border-frame-dark, #D9D9D9);}
footer .info .copyright{flex-basis: 100%; justify-content: center;}
footer .info .registration_number:after, footer .info .privacy:after, footer .info .copyright:after{display: none;}
footer .info .copyright{ color: var(--color-text-disabled, #999);}
.consulting{height: var(--sizing-900, 72px); border-top: 1px solid var(--color-border-control, #CCC); background: var(--color-background-onsurface, #FFF); position: sticky; bottom: 0; z-index: 1000;}
.consulting .container{display: flex; height: 100%; justify-content: space-between; align-items: center;}
.consulting .tel{display: flex; justify-content: center; align-items: center;  gap: var(--spacing-100, 16px);}
.consulting .tel dt{display: flex; justify-content: center; align-items: center; gap: var(--spacing-25, 4px); font: var(--sys-font-subtitle-4);}
.consulting .tel dt:before{content: ''; display: block; width: var(--sizing-300); height: var(--sizing-300); background: url('/../img/call.svg')no-repeat; background-size: contain;}
.consulting .tel dd{color: var(--color-brand-standard, #FA3848); font: var(--sys-font-title-4);}
.consulting .btn_request{display: flex; height: var(--sizing-700, 56px); min-width: 168px; padding: 0px 24px; justify-content: center; align-items: center; gap: 8px;border-radius: var(--radius-100, 8px); background: var(--color-content-accent-standard, #2E4FD1); color: var(--color-grey-white, #FFF); font: var(--sys-font-button-1);}
.fab{position: fixed; right: 20px; bottom: 92px; display: flex; flex-direction: column; gap: var(--spacing-75, 12px); z-index: 1000;}
.fab .top{display: flex; width: var(--sizing-700, 56px); height: var(--sizing-700, 56px);  padding-bottom: var(--spacing-25, 4px); justify-content: center; align-items: center; border-radius: var(--radius-full, 100%); border: 1px solid var(--color-border-control, #CCC); background: var(--color-background-onsurface, #FFF);}

/* 상담 신청 레이어 */
.inquiry_layer{position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1001; background-color: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; padding: var(--spacing-300);}
.inquiry_layer .container{display: flex; width: 440px; padding: var(--spacing-125, 20px); flex-direction: column; gap: var(--spacing-200, 32px); border-radius: var(--radius-150, 12px); background: var(--color-background-onsurface, #FFF); max-height: 100%; overflow-y: auto;}
.inquiry_layer .container{display: flex; width: 440px; padding: var(--spacing-125, 20px); flex-direction: column; gap: var(--spacing-200, 32px); border-radius: var(--radius-150, 12px); background: var(--color-background-onsurface, #FFF); max-height: 100%; overflow-y: overlay;}
.inquiry_layer .container::-webkit-scrollbar {width: var(--sizing-100); background-color: rgba(0,0,0,0.1); }
.inquiry_layer .container::-webkit-scrollbar-thumb{ background-color: rgba(0,0,0,0.2); border-radius: var(--radius-100);}
.inquiry_layer .container::-webkit-scrollbar-thumb:hover{background-color: rgba(0,0,0,0.4);}
.inquiry_layer .title{display: flex; padding: 0px 0px var(--spacing-50, 8px) var(--spacing-50, 8px); justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border-frame-light-alt, #595959);}
.inquiry_layer .title h5{font: var(--sys-font-subtitle-4);}
.inquiry_layer .title .close{display: flex; width: var(--sizing-400, 32px); height: var(--sizing-400, 32px); justify-content: center; align-items: center;}
.inquiry_layer .title .close img{width: var(--sizing-200); height: var(--sizing-200);}
.inquiry_layer .contents{display: flex; flex-direction: column; gap: var(--spacing-100, 16px);}
.inquiry_layer .contents dl{display: flex; flex-direction: column; gap: var(--spacing-25, 4px);}
.inquiry_layer .contents dt{color: var(--color-text-subdued, #595959); font: var(--sys-font-detail-1);}
.inquiry_layer .contents dd{display: flex; flex-wrap: wrap; gap: var(--spacing-75) var(--spacing-100);}
.inquiry_layer .privacy{display: flex; flex-direction: column; padding-top: var(--spacing-100, 16px); gap: var(--spacing-50, 8px);}
.inquiry_layer .btn_submit{ display: flex; height: var(--sizing-700, 56px); min-width: 168px; padding: 0 var(--spacing-150, 24px); border-radius: var(--radius-100, 8px); background: var(--color-content-accent-standard, #2E4FD1); justify-content: center; align-items: center; color: var(--color-grey-white, #FFF); font: var(--sys-font-button-2); flex-shrink: 0;}


@media(max-width:1100px){
    .container, section .container{padding-left: var(--spacing-container-side); padding-right: var(--spacing-container-side);}
    section.video_wrap .contents .box iframe{width: 100%; height: 26vw;}
    
    
    .br{display: inline-block; padding: 0 0.15em;}
    .comp-title h6 .br{display: block;}
}


@media(max-width:800px){
    input[type="text"]{height: var(--sizing-900, 54px); padding: 0px var(--spacing-100, 12px); font: var(--sys-font-body-5);}
    input[type="checkbox"]+label{font: var(--sys-font-body-5); align-items: center;}
    input[type="checkbox"]+label:before{width: var(--sizing-400, 24px); height: var(--sizing-400, 24px);}
    input[type="checkbox"]:checked+label:before{background-size: var(--sizing-200) var(--sizing-150);}
    
    header, header .fixed{height: 99px;}
    header .container{padding: var(--spacing-50) 0 0 var(--spacing-50); flex-direction: column; height: auto; justify-content: flex-start; align-items: stretch;}
    header .logo_wrap{display: flex; justify-content: space-between; align-items: center; height: var(--sizing-700); padding-right: var(--spacing-50, 0px);}
    header .logo{padding: 0 var(--spacing-100); display: flex; align-items: center;}
    header .logo img{height: 20px;}
    header .call{display: block; width: var(--sizing-700); height: var(--sizing-700); display: flex; align-items: center; justify-content: center;}
    header .call img{width: var(--sizing-400); height: var(--sizing-400);}
    header .menu_wrap ul{gap: 0}
    header .menu_wrap li{padding: var(--spacing-100) var(--spacing-75);}
    
    footer .container{padding: var(--spacing-400, 48px) var(--sizing-250); gap: var(--spacing-200, 24px);}
    footer .info{gap: var(--spacing-none, 0px) var(--spacing-75, 9px);}
    footer .info span:after{display: none;}
    
    
    .comp-title h5{font: var(--sys-font-title-2);}
    
    
    .consulting{height: auto;}
    .consulting .container{padding: 0; height: auto; align-items: stretch;}
    .consulting .tel{flex-direction: column; align-items: flex-start; gap: 0; padding: var(--spacing-100) var(--spacing-container-side);}
    .consulting .tel dt:before{display: none;}
    .consulting .btn_request{height: auto; border-radius: 0; min-width: auto; padding: 0 var(--spacing-500);}
    
    .inquiry_layer .title .close{width: var(--sizing-600, 36px); height: var(--sizing-600, 36px);}
    .inquiry_layer .title .close img{width: var(--sizing-250); height: var(--sizing-250);}
    .inquiry_layer .contents{gap: var(--spacing-150, 18px);}
    .inquiry_layer .contents dl{gap: var(--spacing-50, 6px);}
    .inquiry_layer .privacy{gap: var(--spacing-75, 9px);}
    .inquiry_layer .btn_submit{height: var(--sizing-900, 54px);}
    
    .fab{right: 15px; bottom: 100px;}
    .fab .top{width: var(--sizing-900, 54px); height: var(--sizing-900, 54px);}
    
    .process_wrap li .num{width: var(--sizing-500, 30px); height: var(--sizing-500, 30px);}
    
    .comp-table-small thead th, .comp-table-small tbody th, .comp-table-small td{padding: var(--spacing-75, 9px) var(--spacing-50, 6px);}
}

@media(max-width: 700px){
    
    .process_wrap ol{padding: 0px var(--spacing-container-side, 15px); border-radius: var(--radius-200, 12px); background: var(--color-background-onsurface, #FFF);  gap: var(--spacing-none, 0px); flex-wrap: wrap;}
    .process_wrap li:first-child:after{display: none;}
    .process_wrap li{padding: var(--spacing-150, 18px) var(--spacing-none, 0px);  gap: var(--spacing-125, 15px); flex-direction: row; flex-basis: 40%;border-bottom: 1px solid var(--color-border-frame-light, #E6E6E6); text-align: left;}
    .process_wrap li .num{width: var(--sizing-1000, 60px); height: var(--sizing-1000, 60px); border-radius: var(--radius-150, 9px); background: var(--color-content-accent-lighter, #F7F8FD); color: var(--color-content-accent-standard, #2E4FD1); font: var(--sys-font-title-4);}
    .process_wrap li dl{gap: 0; align-items: flex-start;}
    .process_wrap li:nth-child(n+5){border-bottom: none;}
}

@media(max-width: 660px){
    section.video_wrap .contents{flex-direction: column; gap: var(--spacing-400, 48px);}
    section.video_wrap .contents .box{flex-basis: 100%;}
    section.video_wrap .contents .box iframe{width: 100%; height: 52vw;}
    section.video_wrap .contents .box .text{text-align: left; align-items: flex-start; width: 100%;}
    section.video_wrap .contents .box .text strong{font: var(--sys-font-subtitle-3);}
    section.video_wrap .contents .box .text p{font: var(--sys-font-body-5);}
}

@media(max-width:600px){
    input[type="checkbox"]+label{font: var(--sys-font-body-3);}
    
    header, header .fixed{height: 96px}
    
    
    .comp-title h5{font: var(--sys-font-title-1);}
    .comp-title h6{color: var(--color-text-subdued, #595959); max-width: 360px;}
    .comp-title h6 .br{display: inline-block;}
    
    .consulting{border: none;}
    .consulting .tel{display: none;}
    .consulting .btn_request{width: 100%; height: var(--sizing-1000, 60px);}
    
    .inquiry_layer{padding: 0;}
    .inquiry_layer .container{width: 100%; height: 100%; border-radius: 0; padding: 0 var(--spacing-container-side) var(--spacing-container-side);}
    .inquiry_layer .title{padding: var(--spacing-container-side) 0px var(--spacing-50, 8px) var(--spacing-50, 8px); position: sticky; top: 0; background-color: var(--color-background-onsurface);}
    .inquiry_layer .title h5{font: var(--sys-font-title-3);}
    .inquiry_layer .contents dt{font: var(--sys-font-body-5);}
    .inquiry_layer .contents dd{gap: var(--spacing-100) var(--spacing-100);}
    
    .fab{bottom: 75px;}
    .fab .top{width: var(--sizing-700, 42px); height: var(--sizing-700, 42px);}
    .fab .top svg{width: var(--sizing-200);}
    
    .process_wrap ol{flex-direction: column; padding: 0;}
    .process_wrap li{flex-basis: 100%;}
    .process_wrap li:not(:last-child){border-bottom: 1px solid var(--color-border-frame-light, #E6E6E6);;}
    .process_wrap li dt{font: var(--sys-font-body-2);}
    .process_wrap li dd{font: var(--sys-font-body-5);}
    
    section.video_wrap .contents .box .text strong{font: var(--sys-font-subtitle-2);}
}