@charset "UTF-8"; 

/* 초기화 및 초기 세팅 */
:root { 
 /* 버튼 및 인풋 폼 높이 세팅 */
 --hd_height: 8.2rem; 
 --height: 5rem; 
 --height_sm: 3.2rem; 
 --height_md: 6.9rem; 
 --height_lg: 8.3rem; 
 --ic_date: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6q0-.825.587-1.412Q4.175 4 5 4h1V2h2v2h8V2h2v2h1q.825 0 1.413.588Q21 5.175 21 6v14q0 .825-.587 1.413Q19.825 22 19 22Zm0-2h14V10H5v10ZM5 8h14V6H5Zm0 0V6v2Z"/></svg>'); 
 } 


html { 
 font-size: 10px; 
 } 

body { font-family:'Pretendard Variable', "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
 
 padding: 0; 
 max-width:2500px; margin:0 auto;  width:100%;;  
 } 

html, h1, h2, h3, h4, h5, h6, form, fieldset, img { 
 margin: 0; 
 padding: 0; 
 border: 0
 } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
 display: block
 } 

ul, dl, dt, dd { 
 margin: 0; 
 padding: 0; 
 list-style: none
 } 

legend { 
 position: absolute; 
 margin: 0; 
 padding: 0; 
 font-size: 0; 
 line-height: 0; 
 text-indent: -9999em; 
 overflow: hidden
 } 

label, input, button, select, img { 
 vertical-align: middle; 
 } 

input, button { 
 margin: 0; 
 padding: 0; 
 } 

input[type="submit"] { 
 cursor: pointer
 } 

button { 
 cursor: pointer
 } 

select { 
 margin: 0
 } 

p { 
 margin: 0; 
 padding: 0; 
 word-break: keep-all; 
 line-height: 130%; 
 } 

hr { 
 display: none
 } 

a { 
 text-decoration: none
 } 

a:hover { 
 text-decoration: none; 
 } 

.un_reboot_a { 
 color: var(--main); 
 text-decoration: underline; 
 } 

*, :after, :before { 
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box; 
 word-break: keep-all; 
 } 

img { 
 width: 100%; 
 display: inline-block; 
 height: auto; 
 } 

.fc_gray1 { 
 color: #6C757D
 } 

.fc_gray2 { 
 color: #ADB5BD
 } 

.fc_gray3 { 
 color: rgba(54, 61, 66, 0.6); 
 } 

/*메인*/
 .idx_pg { padding-top:var(--hd_height);  
width: 100%; overflow: hidden;
 
 } 


/*서브*/
.sub_tit { 
 position: relative; 
 } 

.sub_pg { padding-top:15rem;  
 min-height: 800px;  width: 100%; overflow: hidden;
 
 } 


.line_h1 { 
 line-height: 1.0em; 
 } 

.line_h1_1 { 
 line-height: 1.1em; 
 } 

.line_h1_2 { 
 line-height: 1.2em; 
 } 

.line_h1_3 { 
 line-height: 1.3em; 
 } 

.line_h1_4 { 
 line-height: 1.4em; 
 } 

.line_h1_5 { 
 line-height: 1.5em; 
 } 

.line_h1_6 { 
 line-height: 1.6em; 
 } 

.line_h1_7 { 
 line-height: 1.7em; 
 } 

.line_h1_8 { 
 line-height: 1.8em; 
 } 

.line_h1_9 { 
 line-height: 1.9em; 
 } 

.line_h2 { 
 line-height: 2.0em; 
 } 


/*폰트커스텀 기본사이즈 10px*/

.tit_h1 { 
 font-size: 6rem; 
 margin-bottom: 4rem; 
 font-weight: 700; 
 line-height: 1.2; 
 letter-spacing: -1.2px; 
 } 

.tit_h2 { 
 font-size: 3.4rem; 
 font-weight: 700; 
 letter-spacing: -0.68px; 
 } 

.tit_h3 { 
 font-size: 2.8rem; 
 font-weight: 500; 
 color: rgba(54, 61, 66, 0.6); 
 margin-bottom: 2.5rem; 
 line-height: 130%; 
 letter-spacing: -0.56px; 
 } 

.tit_h4 { 
 font-size: 5rem; 
 font-weight: 800; 
 line-height: 1.2; 
 letter-spacing: -1px; 
 } 

.fw_100 { 
 font-weight: 100; 
 } 

.fw_200 { 
 font-weight: 200; 
 } 

.fw_300 { 
 font-weight: 300; 
 } 

.fw_400 { 
 font-weight: 400; 
 } 

.fw_500 { 
 font-weight: 500; 
 } 

.fw_600 { 
 font-weight: 600; 
 } 

.fw_700 { 
 font-weight: 700; 
 } 

.fw_800 { 
 font-weight: 800; 
 } 

.fw_900 { 
 font-weight: 900; 
 } 

.wh_pre { 
 white-space: pre-line; 
 } 

.wh_nowrap { 
 white-space: nowrap; 
 } 

.bg-light2 { 
 background-color: #EEF2FF; 
 } 

/*글자 줄임말*/
.line_text { 
 white-space: nowrap; 
 overflow: hidden; 
 text-overflow: ellipsis; 
 word-break: break-all; 
 } 

.line1_text { 
 white-space: normal; 
 overflow: hidden; 
 text-overflow: ellipsis; 
 word-wrap: break-word; 
 display: -webkit-box; 
 -webkit-line-clamp: 1; 
 -webkit-box-orient: vertical; 
 } 

.line2_text { 
 white-space: normal; 
 overflow: hidden; 
 text-overflow: ellipsis; 
 word-wrap: break-word; 
 display: -webkit-box; 
 -webkit-line-clamp: 2; 
 -webkit-box-orient: vertical; 

 } 

.line3_text { 
 white-space: normal; 
 overflow: hidden; 
 text-overflow: ellipsis; 
 text-align: left; 
 word-wrap: break-word; 
 display: -webkit-box; 
 -webkit-line-clamp: 3; 
 -webkit-box-orient: vertical; 

 } 

 .fs_14{font-size: 1.4rem;}
  .fs_15{font-size: 1.5rem;}
/*border radius*/
/* .rounded { border-radius: 0.5rem!important; } 
.rounded-lg { border-radius: 1.0rem!important; } 
.rounded-xl { border-radius: 2rem!important; } */

/* 폼 사각형 */
.sq_guide { 
 display: flex; 
 flex-wrap: wrap; 
 } 

.sq_guide li { 
 width: 90px; 
 height: 90px; 
 border-radius: 0.5rem; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 font-size: 1.4rem; 
 margin: 0.5rem; 
 } 

/* 스크롤바 none */
.none_scroll_bar { 
 -ms-overflow-style: none; 
 } 

.none_scroll_bar::-webkit-scrollbar { 
 display: none; 
 } 

/* 버튼 */
.btn {  font-size: 1em;
 height: var(--height); 
 } 

.btn-sm { 
 height: var(--height_sm); 
 } 

.btn-md { 
 height: var(--height_md); 
 } 

.btn-lg { 
 height: var(--height_lg); 
 } 

/* 인풋 자동완성 초기화 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active { 
 -webkit-text-fill-color: var(--text); 
 -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset; 
 box-shadow: 0 0 0px 1000px var(--bg) inset; 
 transition: background-color 5000s ease-in-out 0s; 
 } 

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active { 
 -webkit-text-fill-color: var(--text); 
 -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset; 
 box-shadow: 0 0 0px 1000px var(--bg) inset; 
 transition: background-color 5000s ease-in-out 0s; 
 } 

/* 입력 인풋 */
.form-control { 
 height: var(--height); background-color:#fff
 } 

.form-control::placeholder { 
 
 font-weight: 400; 
 color: #ADB5BD; 
 } 

.form-control-sm { 
 height: var(--height_sm); 
 } 

.form-control-md { 
 height: var(--height_md); 
 } 

.form-control-lg { 
 height: var(--height_lg); 
 } 

.ip_wr .ip_tit { 
 margin-bottom: 1rem; 
 } 

.ip_wr .ip_tit h5 { 
 font-size: 1.8rem; 
 font-weight: 700; 
 display: inline-block; 
 } 

/* form-text */
.form-text { 
 font-size: 1.3rem; 
 display: none; 
 align-items: center; 
 } 

.form-text i { 
 margin-right: 0.25rem; 
 } 

.ip_valid .ip_valid { 
 display: flex; 
 color: var(--success); 
 } 

.ip_invalid .ip_invalid { 
 display: flex; 
 color: var(--danger); 
 } 

/* textarea 높이 */
textarea.form-control { 
 height: 20rem; 
 padding: 1rem; 
 } 

/* 셀렉트 박스 */
.custom-select {  border-radius: 0.8rem;
 padding-right: 3.5rem; 
 color: var(--input_placeholder); 
 background-size: 2.4rem;  font-size: 1.6rem;
 } 

/* 날짜 선택 */
input.form-control[type="date"] { 
 position: relative; 
 } 

input.form-control[type="date"]::-webkit-calendar-picker-indicator { 
 -webkit-appearance: none; 
 background: none; 
 width: 100%; 
 height: 100%; 
 cursor: pointer; 
 position: absolute; 
 left: 0; 
 top: 0; 
 } 

input.form-control[type="date"]::before { 
 content: ''; 
 display: block; 
 width: 2.4rem; 
 height: 2.4rem; 
 position: absolute; 
 top: 50%; 
 transform: translateY(-50%); 
 right: 1rem; 
 background: var(--text); 
 cursor: pointer; 
 -webkit-mask: var(--ic_date); 
 mask: var(--ic_date); 
 -webkit-mask-repeat: no-repeat; 
 mask-repeat: no-repeat; 
 -webkit-mask-position: center; 
 mask-position: center; 
 -webkit-mask-size: contain; 
 mask-size: contain; 
 } 


/* 체크박스 및 라디오 */
.checks_wr { 
 display: flex; 
 flex-wrap: wrap; 
 margin-bottom: -1rem; 
 } 

.checks_wr .checks { 
 margin-right: 3rem; 
 margin-bottom: 1rem; 
 } 

.checks label { 
 display: flex; 
 align-items: center; 
 cursor: pointer; 
 } 

.checks label.chk_right { 
 flex-flow: row-reverse; 
 justify-content: flex-end; 
 } 

.checks input { 
 display: none; 
 } 

.ic_box { 
 display: inline-block; 
 width: 2.4rem; 
 height: 2.4rem; 
 font-size: 2rem; 
 text-align: center; 
 border: 1px solid #c5c5c5; 
 color: var(--border); 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 margin-right: 0.5rem; 
 border-radius: 3rem; 
 background: url(../img/ic_check.png) #ADB5BD no-repeat center; 
 background-size: 12px; 
 background-color: #c5c5c5; 
 } 

input:checked + .ic_box { 
 border-color: #a41c20; 
 color: #222; 
 background-color: #a41c20; 
 } 

.chk_right .ic_box { 
 margin-right: 0; 
 margin-left: 0.5rem; 
 } 

input:checked ~ .chk_p { 
 color: #A41C20; 
 } 

/* 페이지네이션 */
.pagination { 
 margin-top: 40px; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 } 

.pagination li { 
 height: 100%; 
 } 

.pagination a { 
 font-size: 1.8rem; 
 padding: 0 10px; 
 font-weight: 600; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 width: 100%; 
 height: 100%; 
 } 

.pagination a.disabled { 
 color: #AAA; 
 } 

.pagination a.on { 
 color: var(--main); 
 text-decoration: underline; 
 } 

/* 테이블 */
.table_01 { 
 width: 100%; 
 border-collapse: collapse; 
 border-bottom: 1px solid #e3e3e3; 
 text-align: center; 
 border-top: 2px var(--primary) solid; 
 } 

.table_01 th { 
 background: #F6F6F6; 
 text-align: center; 
 border: 1px solid #e3e3e3; 
 } 

.table_01 td { 
 border: 1px solid #e3e3e3; 
 } 

.table_01 th, .table_01 td { 
 padding: 1rem 0.8rem; 
 } 

/* 테이블 슬래쉬 */
.table_01 th.slash { 
 background-image: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="rgb(77,77,77)" /></svg>'); 
 background-repeat: no-repeat; 
 } 

.table_01 th.backslash { 
 background-image: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="rgb(77,77,77)" /></svg>'); 
 background-repeat: no-repeat; 
 } 

.table_01 th.slash, .table_01 th.backslash { 
 text-align: left; 
 } 

.slash div, .backslash div { 
 text-align: right; 
 } 

/*테이블 반응형때*/
.table_scroll { 
 overflow-x: auto; 
 overflow-y: hidden; 
 padding: 0px !important; 
 } 


/* 페이저 */
.pager { 
 background: #F5F5F5; 
 border-radius: 15rem; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 width: 250px; 
 height: 65px; 
 margin: 3.5rem auto 0; 
 } 


/* 이미지 크롭 */
.rect { 
 width: 100%; 
 position: relative; 
 overflow: hidden; 
 } 

.rect:after { 
 content: ""; 
 display: block; 
 padding-bottom: 100%; 
 } 

.rect img { 
 position: absolute; 
 width: 100%; 
 height: 100%; 
 object-fit: cover; 
 object-position: center; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%); 
 } 

/* 이미지 크롭 642*362*/
.rect2 { 
 width: 100%; 
 position: relative; 
 overflow: hidden; 
 } 

.rect2:after { 
 content: ""; 
 display: block; 
 padding-bottom: calc(362 / 642 * 100%); 
 } 

.rect2 img { 
 position: absolute; 
 width: 100%; 
 height: 100%; 
 object-fit: cover; 
 object-position: center; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%); 
 } 

/* 푸터 */
.ft { color: #222; padding: 4rem 2rem 15rem; background-color: #f5f5f5; 
 text-align: center; 
 
 } 

.ft_wrap { 
 margin: 4rem auto 3.5rem; 
 max-width: 840px; 
 width: 100%; 
 } 

.ft_txt1 { 
 padding: 3rem 0rem; 
 font-size: 1.6rem; 
 display: flex; 
 flex-wrap: wrap; 
 } 

.ft_img { 
 width: 57px; 
 } 

/*메뉴***********************************/
body.menu_on { 
 overflow: hidden; 
 } 

/* 헤더 */
.h_menu { 
 position: fixed; 
 left: 0; 
 top: 0; 
 width: 100%; 
 
 align-items: center; 
 z-index: 99; 
 } 

.h_menu .con_wrap {  background-color: #000;
 width: 100%; max-width: 2500px; margin: 0 auto; padding: 0rem 10rem; 
 
 display: flex; 
 align-items: center; 
 height: var(--hd_height); 
 justify-content: space-between; 
 } 
.h_menu .con_wrap a { color:#fff; } 
/* .h_menu .con_wrap.scrolled { backdrop-filter: blur(10px); 
 background: rgba(0,0,0,0.85); 
 }  */
.logo { 
 width: 180px; 
 display: block; 
 } 

.logo img { 
 height: 100%; 
 width: auto; 
 } 

.pc_nav { 
 height: 100%; 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 } 

.pc_nav .nav_wr { 
 height: 100%; 
 } 

.pc_nav .nav_ul { 
 display: flex; 
 height: 100%; 
 } 

.pc_nav .nav_li { 
 height: 100%; 
 position: relative; 
 } 

.pc_nav .nav_a { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 width: 100%; 
 height: 100%; 
 padding: 0 2rem; 
 font-weight: 600; 
 } 

.pc_nav .nav_a:hover { 
 color: #A41C20; 
 } 

.pc_nav .nav_ul2 { 
 display: none; 
 } 

.pc_nav .nav_li:hover .nav_ul2 { 
 display: block; 
 position: absolute; 
 background: var(--bg); 
 top: 100%; 
 left: 50%; 
 transform: translateX(-50%); 
 border: 1px solid var(--border); 
 z-index: 9999; 
 } 

.pc_nav .nav_ul2 a { 
 display: block; 
 padding: 1rem 2rem; 
 white-space: nowrap; 
 } 

/* 모바일 메뉴 */
.hd_menu_btn { 
 font-size: 2rem; 
 display: none; 
 } 

.m_menu_wr { 
 visibility: hidden; 
 opacity: 0; 
 position: fixed; 
 top: 0; 
 right: 0; 
 width: 100%; 
 height: 100%; 
 z-index: 99999; 
 transition: all 0.5s ease-in-out; 
 display: flex; 
 justify-content: flex-end; 
 } 

/* x버튼 */
.close_btn_wr { 
 display: none; 
 opacity: 0; 
 } 

.m_nav .close_btn_wr { 
 display: flex; 
 justify-content: flex-end; 
 opacity: 0; 
 } 

.menu_on .m_nav .close_btn_wr { 
 opacity: 1; 
 } 

.close_btn { 
 padding: 0.5rem; 
 font-size: 2rem; 
 border: 1px solid var(--border); 
 height: auto; 
 } 

/* 메뉴 열렸을때 외부 */
.menu_on .m_menu_wr { 
 visibility: visible; 
 opacity: 1; 
 } 

.m_nav { 
 position: relative; 
 width: 100%; 
 height: 100%; 
 z-index: 99999; 
 background: var(--bg); 
 transition: all 0.4s ease-in-out; 
 max-width: 0; 
 transform: translateX(100%); 
 visibility: hidden; 
 opacity: 0; 
 } 

.menu_on .m_nav { 
 transform: translateX(0); 
 visibility: visible; 
 opacity: 1; 
 max-width: 50rem; 
 } 

.menu_bg { 
 position: fixed; 
 left: 0; 
 top: 0; 
 background: rgba(0, 0, 0, 0.6); 
 transition: all 0.4s ease-in-out; 
 width: 100%; 
 height: 100%; 
 z-index: 99998; 
 visibility: hidden; 
 opacity: 0; 
 } 

.menu_on .menu_bg { 
 visibility: visible; 
 opacity: 1; 
 } 

/* 메뉴 열렸을때 내부 */
.m_nav .nav_wr { 
 height: auto; 
 } 

.m_nav .nav_ul { 
 display: block; 
 } 

.m_nav .nav_li { 
 height: 100%; 
 position: relative; 
 } 

.m_nav .nav_a { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 width: 100%; 
 height: 100%; 
 padding: 1rem 2rem; 
 } 

.m_nav .nav_a i { 
 display: inline-block; 
 } 

.m_nav .nav_ul2 { 
 display: none; 
 background: #f0f0f0; 
 } 

.m_nav .nav_ul2 a { 
 display: block; 
 padding: 1rem 2rem; 
 white-space: nowrap; 
 } 

.t_btn { 
 height: 42px; 
 font-size: 1.8rem; 
 padding-left: 2rem; 
 padding-right: 2rem; 
 margin-left: 2rem; 
 } 

 

/* @media (min-width: 768px) { 
 .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1344px; } 
 } */

/*견적신청하기*/



/*반응형 max 1200 xl*/
@media (max-width: 1199.98px) { 
 body { 
 /* font-size: 1.8rem; */
 } 

 .tit_h1 { 
 font-size: 4.2rem; 
 } 

 .tit_h2 { 
 font-size: 3.8rem; 
 } 

 .tit_h3 { 
 font-size: 2.2rem; 
 } 

 .tit_h4 { 
 font-size: 4rem; 
 } 

 
 } 

/*반응형 max 992px lg*/
@media (max-width: 991.98px) { 
 :root { 
 --hd_height: 5rem; 
 --height: 4.6rem; 
 } 
 body{font-size: 1.6rem;}

 .hd_menu_btn { 
 display: block; 
 } 

 .logo { 
 width: 130px; 
 } 

 .pc_nav { 
 display: none; 
 } 

 .m_nav .nav_a { 
 font-size: 2.2rem; 
 font-weight: 700; 
 padding: 1rem 2rem 3rem; 
 } 

 .close_btn { 
 border: 0px
 } 


 } 


/*반응형 max 767px md*/
@media (max-width: 767.98px) { 
 
 
 .ip_wr .ip_tit h5{font-size: 1.6rem;}

 .tit_h1 { 
 font-size: 7vw; 
 margin-bottom: 1rem; 
 } 

 .tit_h2 { 
 font-size: 5vw; 
 } 

 .tit_h3 { 
 font-size: 4vw; 
 margin-bottom: 0; 
 } 

 .tit_h4 { 
 font-size: 5.5vw; 
 } 
 .h_menu .con_wrap { padding: 0rem 2rem; } 


 } 

/*반응형 max 576px sm*/
@media (max-width: 575.98px) { 
    .form-control{font-size: 0.95em;}

 
 } 


/*반응형 max 380px*/
@media (max-width: 380px) { 

 }