@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1600px) {
#header .top_wrap .logo > a img{height: 43px;}
#header .gnb_wrap .gnb > li .dp1{ padding: 0 1vw;}
#header .gnb_wrap .gnb > li{min-width: 0;}

#header .gnb_wrap .gnb > li .dp1 .tt{font-size: 1rem;}
}

@media screen and (max-width:1560px) {

/* header */
#header .gnb_wrap .gnb > li{min-width: 5rem;}

/* ====== contents ====== */
#contents .sub_top_wrap { width: 94%; padding-top: 9rem; } 
#contents .sub_top_wrap .subTit .t1 { font-size: 6vmin; } 
#contents .nav > li{ font-size: 1rem;}

/* ====== wideBoxList ====== */
.wideBoxList.h2 > li > .in{height: 20vw;}
.wideBoxList.st2 > li > .in{height: 20vw;}
}




@media screen and (max-width:1024px) {
html{ font-size: 15px}

/* header */
#header .header_link{position: relative;}
#header .header_link::before{content: ''; position: absolute; right: 0; width: 3rem; height: 100%; background: linear-gradient(90deg,rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 1) 100%);}
#header .header_link .box0{margin: 0; max-width: 100%;}
#header .header_link .list{overflow-x: auto; overflow-y: clip; position: relative;}
#header .header_link .list li {flex-shrink: 0;}
#header .header_link .list > li > a{ padding: 0 1.3rem;}

/* ====== contents ====== */
#contents .sub_top_wrap { width: 94%; padding-top: 7rem; } 

/* ====== ALL ====== */
.PC { display: none; } 
.PHONE { display: block; } 

.dotList > li:before{ top: 9px;}
.dotList > li{ word-break: normal;}

.flex_box.s2{margin: 0 0 -1em -1em;}

/* ====== process ====== */
.processArrow .ArrowList{ gap: 2rem 0;}
.processArrow .ArrowList.w5 > li,
.processArrow .ArrowList.w4 > li{ width: 50%;}

/* ====== header ====== */
#header .gnb_wrap { display: none; } 
#header .top_wrap .logo > a img { height: 40px; } 
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1 { height: 4.5rem; } 
#header:after { display: none; } 


/* ====== All layer ====== */
#header .all_wrap .all_layer .all_inner .innerGuide { display: none; } 
#header .all_wrap .all_layer .all_inner .innerBg {  } 
#header .all_wrap .all_layer .all_inner .innerBg .Bginner > .title { font-size: 3.5vmin;  } 
#header .all_wrap .all_layer .all_inner .innerLink .gnb > li { flex-direction: column; } 
#header .all_wrap .all_layer .all_inner .innerLink .gnb > li > .dp1 { display: inline-block; min-width: auto; max-width: max-content; } 
#header .all_wrap .all_layer .all_inner .innerLink .gnb > li > .dp1 > .in > .tt { margin-bottom: 1rem; font-size: var(--font-size-lg);} 
#header .all_wrap .all_layer .all_inner .innerLink .gnb > li .dp2 > li .in > .tt { font-size: 1.063rem; } 
#header .all_wrap .all_layer .all_inner .innerLink .gnb > li .dp2{ gap: 1rem 2rem;}
#header .all_wrap .all_layer .all_inner .innerBg,
#header .all_wrap .all_layer .all_inner .innerLink .linkContainer{ transition-delay: .7s;}
#header .all_wrap .all_layer .all_inner .innerBg .Bginner > .title{ transition-delay: 1.3s;}

/* ====== sec_area ====== */
#sec_area .mainScroll{ display: none;}
#sec_area .Buhorizen .horizen_wrap .slide_ctn{ position:relative; flex-wrap: wrap; gap: 2rem; opacity: 1; transform: translateY(0); padding-left: 0; padding-right: 0%; width: 92%; margin: 4.5rem auto;}
#sec_area .Buhorizen .horizen_wrap .slide_ctn .item{ margin-right: 0; padding: 46px 40px; width: calc((100% - 2rem) / 2); box-sizing: border-box;}
#sec_area .Buhorizen .horizen_wrap .slide_ctn .item.wide{ min-height: 45svh;}
#sec_area .Buhorizen .horizen_wrap .slide_ctn .item.wide .titCon{ padding: 0 40px; bottom: 2rem;}
#sec_area .Buhorizen .horizen_wrap .bg_box{ height: auto;}
#sec_area .Buhorizen .horizen_wrap .bg_box .bg{ position: relative; transform: translateY(0); width: 100%; max-width: 100%; height: 40svh;}

/* ====== sec_community ====== */
.youtube_container .media_tab{ justify-content: center;}
.youtube_container .youtubeSlide_Wrap > .youtubeSlide .youtubeCon > .somenail{ height: 20svh;}

/* ====== contractWrap ====== */
.contractWrap{ flex-direction: column; align-items: center; gap: 6rem;}
.contractWrap .diagramBox .imgCon{ position:relative; top: 0;}
.contractWrap .diagramBox .arrow-container{ top: -4rem; transform: translateX(-50%) rotate(90deg); left: 50%;}

/* ====== wideBoxList ====== */
.wideBoxList > li > .in,
.wideBoxList.st2 > li > .in{ height: auto;}
.wideBoxList > li > .in > .icon{ position:relative; bottom: 0; right: 0;}
.wideBoxList > li > .in > .txt,
.wideBoxList > li > .in > .tit{ width: 100%;}

/* ====== checkBoxList ====== */
.checkBoxList > li > .in > .chk{ position:relative; top: 2px;}

/* ====== performance_container ====== */
.performance_container{ flex-direction: column; gap: 0;}
.performance_container .performance_boxCon,
.performance_container .page_tit{ width: 100%;}

/* ====== subPageTop ====== */
.subPageTop .inner > .txtCon > .tit br{display: none;}

/* ===== calculateWrap ===== */
.calculateWrap{flex-direction: column; width: 100%; box-sizing: border-box; gap: 0.5rem;}
.calculateWrap .numTxt{display: flex; align-items: center; justify-content: space-between; width: 100%;}
.calculateWrap .numTxt.minus .num{position: relative;}
.calculateWrap .numTxt.minus .num::before{content: ''; position: absolute; left: -1.7rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1px; background: #555;}
.calculateWrap .numTxt.result{padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #ddd;}
.calculateWrap .txt_sec,
.calculateWrap .arrow-right{display: none;}
.calculateWrap .numTxt .tit{font-size: var(--font-size-md);}

/* ====== wideBoxList ====== */
.wideBoxList.h2 > li > .in{height: auto; display: flex; flex-direction: column;}
.wideBoxList > li > .in > .icon{margin-top: auto;}

/* ====== features_list ====== */
.features_list{ }
.features_list>li { width: calc((100% - 1em) / 2); }

/* ====== sub_tab  ====== */
.sub_tab {overflow-x: scroll; justify-content: start;} 
.sub_tab > li{flex-shrink: 0; height: 3.25rem; padding: 0 1em;}

/* 이용약관 */
.email_top br{display: none;}

/* 건설업 4대보험 */
.wideBoxList > li > .in .dotList{min-height: 5em;}


}


@media screen and (max-width:768px) {
html{ font-size: 14px}
/* .header_link{ display: none;} */

/* ====== contents ====== */
#contents .doc.pdT,
#contents .doc{ padding: 2.5rem 0 8rem 0;}
#contents .sub_page_menu { display: none; } 
#contents .sub_top_wrap .subTit { top: 60%; } 
#contents .sub_top_wrap { width: 100%; } 
#contents .sub_top_wrap { height: 35svh;  } 

/* ====== all ====== */
.main_box{ padding: 5rem 0;}
.scroll #header { transform: translateY(0); } 
.scroll.up #header { transform: translateY(0); } 
.wideImg.h1{ height: 26vh;}
.pageWrapper .page_con{ padding: 4rem 0;}
.agent_Wrapper .agentTop > .exCon{ padding: 2rem 0;}
.page_tit p br{display: none;}
.AlSearch{width: 100%;}

/* ====== All layer ====== */
#header .all_wrap .all_layer .all_inner .innerBg .Bginner > .title { font-size: 4vmin; } 

/* ====== sub_tab ====== */
.sub_tab .tab_idx.t5 > li{ width: 25%; max-width: 25%; min-width: 25%;}
.sub_tab .tab_idx.h1 > li{ height: 3.865rem;}
.sub_tab .tab_idx > li > .tt{ font-size: 1rem;}

/* ====== boxIconList ====== */
.boxIconList > li{ width: 100%;}

/* ====== Gboxlist ====== */
.Gbox .Gboxlist > li{ flex: 1 1 50%; max-width: 50%;}

/* ====== process ====== */
.processArrow .ArrowList > li > .con > .Cbox > .num{ width: 2rem; height: 2rem; margin-right: var(--space-1); left: 0 !important; position:relative;}
.processArrow .ArrowList > li > .con > .btmCon{ padding: 1.35rem;}

/* ====== sec_area ====== */
#sec_about .aboutContainer{ gap: 2rem; flex-direction: column; justify-content: center;}
#sec_about .aboutContainer .titCon,
#sec_about .aboutContainer .txtCon{ width: 100%;}
#sec_about .aboutContainer .titCon .tit,
#sec_about .aboutContainer .txtCon .txt{ text-align: center;}
#sec_about .aboutContainer .txtCon .main_more{ display: flex; justify-content: center;}
#sec_about .aboutImg-cover{ height: 18rem;}
#sec_about .aboutImg-cover .roundMark > img{ height: 40px;}
#sec_area .Buhorizen .horizen_wrap .slide_ctn .item{ width: 100%;}


/* ====== sec_community ====== */
.youtube_container .pageTit_wrap{ flex-direction: column; gap: 1rem; align-items: center;}
.youtube_container .youtubeSlide_Wrap > .youtubeSlide .youtubeCon > .somenail{ height: 30svh;}

/* ====== about ====== */
.business_top > *{ height: 80vh;}

/* ====== location ====== */
.locationContainer .loadmap .wrap_map{ height: 40vh !important;}
.locationContainer .mapInfoWrap{ flex-direction: column; padding: 2rem;}
.locationContainer .mapInfoWrap .leftInfo{ width: 100%;}
.locationContainer .mapInfoWrap .rightInfo{ width: 100%;}
.locationContainer .mapInfoWrap .rightInfo .mapOpen > li > .in{ min-height: 15svh;}

/* ====== location ====== */
.contractWrap .diagramBox, .contractWrap .contractList{ width: 100%;}
.contractWrap .diagramBox .arrow-container{ top: -4.5rem;}
.contractWrap .diagramBox .imgCon{ background: var(--color-point4); border-radius: var(--radius-lg);}

/* ====== sub_sectionWrap ====== */
.sub_sectionWrap{ flex-direction: column; gap: 1rem;}
.sub_sectionWrap .sec_tit{ width: 100%; padding-left: 0;}
.sub_sectionWrap .sec_tit:before{ display: none;}
.sub_sectionWrap .sec_txtBox{ width: 100%;}

/* ====== operateInfo ====== */
.operateInfo{ flex-direction: column; gap: 0;}
.operateInfo .operateItem:not(.center),
.operateInfo .operateItem{ width: 100%;}
.conImgwrapper{ padding: 1.5rem;}
.conImgwrapper.st1 .imgBox img{width: 100%;}

/* ====== ExampleList ====== */
.ExampleList{ flex-direction: column;}
.ExampleList .box{ min-height: auto;}
.ExampleList .ttWrap,
.ExampleList .tit_box{ width: 100%;}
.ExampleList .ttWrap .tt_box br{display: none;}

/* ====== subPageTop ====== */
.subPageTop_Wrapper > .txtCon > .tt br{display: none;}

/* ====== sub_sectionWrap ====== */
.sub_sectionWrap .sec_tit .t1 br{display: none;}

/* ====== calculateWrap ====== */
.calculateWrap{padding: 1.5rem 1.5rem 0;}

/* ====== fieldWrap ====== */
.fieldWrap{ flex-direction: column;}
.fieldWrap > li{width: 100%;}
.fieldWrap > li .icon{ width: 15vw; height: 15vw;}
.fieldWrap > li .info br{display: none;}

/* ====== serviceMajor ====== */
.serviceMajor{flex-direction: column; display: flex !important; height: auto !important;}
.serviceMajor > .leftImg{height: 45svh;}
.serviceMajor > .leftImg > img{display: block;}
.serviceMajor > .rightInfo > .item{ padding: .5rem 1rem !important;}

/* ====== sec_about ====== */
#sec_about .aboutContainer .txtCon .txt > .tt br{display: none;}

/* 이용약관 */
.guide_box .guide_in{padding: 1.5rem;}

/* 건설업 4대보험 */
.flex_box.s3{margin: 0 0 -2em -2em;}
.wideBoxList.st2 > li > .in{margin: 0 0 2em 2em;}

.lang_st{margin: 0 0 0 1.5rem;}
.serviceMajor.st2 > .rightInfo > .item > .tt{flex-basis: 93%;}
.serviceMajor.st2 > .rightInfo > .item > .chk{flex-basis: 5%;}

/* ====== wideBoxList ====== */
.wideBoxList > li{ flex: 1 1 100% !important; max-width: 100% !important;}
.wideBoxList > li > .in > .icon{ margin-top: var(--space-5);}
.wideBoxList.st2 > li > .in:after{display: none !important;}
.wideBoxList.st2 > li > .in:before{display: none !important;}
.wideBoxList > li > .in .dotList > li{font-size: var(--font-size-base);}


/* 테이블 스크롤 */
    .table_wrap{overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; position: relative;}
    .table_wrap table {min-width: 700px;}
    .scr_i{display: inline-flex; align-items: center; gap:.2em; margin-top: 5px; color:var(--color-point);  }
    .scr_i .xi{ transform: rotate(90deg);}

}


@media screen and (max-width:481px) {

/* ====== page_tit ====== */
.page_tit{ margin-bottom: 2.5rem;} 

/* ====== board ====== */
.board_search { flex-wrap: wrap; } 
.board_search .search { flex-wrap: wrap; gap: .25rem 0; } 
.board_search .search .inp,
.board_search .search button,
.board_search .search label .input_st,
.board_search .search label { width: 100%; } 

.board_table { font-size: .836rem; } 
.board_table .w_date { width: 6rem; } 
.board_search { flex-wrap:wrap; } 
.board_search .total { display:none; } 
.board_search .search { flex:1 1 100%; } 
.board_search .search .select { min-width:6em; } 
.board_search .search .inp { flex:1; width:auto; } 
.board_search .search .btn .ico { font-size:1.250em } 
.board_search .search .btn .tt { display:none; } 

.w_date,
.w_no{ display: none;}

/* ====== All layer ====== */
#header .all_wrap .all_layer .all_inner .innerBg .Bginner > .title{ font-size: 5.5vmin;}

/* ====== animation ====== */
.gsClass.listProcess.lay2 .el,
.gsClass.listProcess .el{ transform: translateX(0); opacity: 1;}

/* ====== contents ====== */
#contents .sub_top_wrap .subTit .t1{ font-size: 8.5vmin; letter-spacing: 0;}
#contents .sub_top_wrap .subTit .t2{ letter-spacing: 0;}
#contents .nav > li{padding: 0 0.6em;}
#contents .nav > li:before{left: -1px;}


/* ====== Gboxlist ====== */
.Gbox .Gboxlist > li{ flex: 1 1 100%; max-width: 100%;}

/* ====== cenItemContainer ====== */
.cenItemContainer > .item{ flex-direction: column-reverse; gap: 1rem;}
.cenItemContainer > .item > .imgCon,
.cenItemContainer > .item > .titBox{ width: 100%;}
.cenItemContainer > .item > .titBox{ padding: 2rem;}

/* ====== sec_area ====== */

#sec_area .Buhorizen .horizen_wrap .slide_ctn .item .info p{ margin-top: 30px;}
#sec_area .Buhorizen .horizen_wrap .slide_ctn .item{ padding: 36px 30px;}
#sec_area .Buhorizen .horizen_wrap .slide_ctn{ margin: 3rem auto;}
#sec_area .Buhorizen .horizen_wrap .slide_ctn .item.wide .titCon{ padding: 0 30px;}

/* ====== sec_contact ====== */
#sec_contact .wideImg{ height: 42.5svh;}

/* ====== footer ====== */
#footer .footerWrapper .footerTop{ flex-direction: column;}
#footer .footerWrapper .footerTop .rightInfo,
#footer .footerWrapper .footerTop .leftInfo{ width: 100%;}
#footer .footerWrapper .footerTop .leftInfo > .logoCon{ margin-bottom: 1rem;}
#footer .footerWrapper .footerTop .rightInfo{ align-items: start;}
#footer .menu{ justify-content: start;}

/* ====== about ====== */
.business_top .txt_box .msg{ font-size: var(--font-size-xl);}

/* ====== subPageTop ====== */
.subPageTop{ padding: 2rem;}
.subPageTop_Wrapper > .txtCon{ padding: 1.5rem 1rem;}



/* ====== checkBoxList ====== */
.checkBoxList > li{ flex: 1 1 100% !important;}

/* ====== performance_container ====== */
.performance_container .perforItem{ padding: 1.5rem;}
.performance_container .perforItem:not(.wide) .numberCon .Num{font-size: var(--font-size-xl);}
.performance_container .perforItem .numberCon .Num{line-height: normal;}
.performance_container .perforItem .numberCon > .fnT,
.performance_container .perforItem .numberCon > .bnT{line-height: 0.7;}


/* ====== serviceMajor ====== */
.serviceMajor{ grid-template-columns: auto; height: auto !important;}
.serviceMajor > .leftImg{ height: 20svh;}


/* ====== reference_container ====== */
.reference_container .boxContainer > .topCon > .ico{ display: none;}
.reference_container .refer_tabList{ width: 100%;}
.reference_container .refer_tabList > li{ height: 2rem; padding: 0 1rem;}

/* ====== processWrapper ====== */
.processWrapper .proItemWrap{padding: 1.5rem;}
.processWrapper .proItemWrap > .item{ padding: 1.5rem 0; gap: 1.5rem;}
.processWrapper .proItemWrap > .item > .icon{ width: 4.5rem; height: 4.5rem; min-width: 4.5rem;}
.processWrapper .proItemWrap > .item > .icon > img{ height: 35px;}
.processWrapper .processD{ padding: 1rem 0;}

/* ====== ExampleList ====== */
.ExampleList .box{ padding: 1rem;}
.ExampleList .ttWrap{ gap: .35rem;}
.ExampleList .ttWrap .box{ min-height: 6rem;}

/* ====== arrow-right ====== */
.arrow-right{ font-size: 1.25rem;}

/* ====== meritWrapper ====== */
.meritWrapper .meritList > li{ flex: 1 1 100%;}

/* ====== wideBoxList ====== */
.page_con.bg3 .wideBoxList > li > .in{ padding: 1.6rem;}

/* ====== checkBoxList ====== */
.checkBoxList > li > .in{padding: 1.5rem;}

/* ====== calculateWrap ====== */
.calculateWrap .numTxt .tit{font-size: var(--font-size-base);}
.calculateWrap .numTxt .num{font-size: var(--font-size-lg);}
.calculateWrap .numTxt .num .sm-size{ margin-bottom: 0.2rem;}
.calculateWrap .numTxt.result{padding-top: 0.5rem; margin-top: 0.5rem;}
.calculateWrap .numTxt .txt{font-size: var(--font-size-md);}

/* ====== fieldWrap ====== */
.fieldWrap > li {padding: 1.8rem;}
.fieldWrap > li .icon{ width: 22vw; height: 22vw;}
.fieldWrap > li .icon img{ height: 45px;}

/* ====== features_list ====== */
.features_list{ }
.features_list>li { width: 100%; }

/* 건설업 4대보험 */
.wideBoxList > li > .in .dotList{min-height: 0;}
.flex_box.s3{margin: 0 0 -1em -1em;}
.wideBoxList.st2 > li > .in { margin: 0 0 1em 1em; }
.wideBoxList.st2 > li > .in:after{display: none !important;}

.wideBoxList.st2 > li:nth-child(3){ order:2;}
.wideBoxList.st2 > li:nth-child(4){ order:3;}

.wideBoxList.st2 > li:nth-child(7){ order:4;}
.wideBoxList.st2 > li:nth-child(8){ order:5;}

.wideBoxList.st2 > li:nth-child(11){ order:6;}
.wideBoxList.st2 > li:nth-child(12){ order:7;}


.wideBoxList.st2 > li:nth-child(15){ order:8;}
.wideBoxList.st2 > li:nth-child(16){ order:9;}


}

@media screen and (max-width:374px) {
html{ font-size: 13px}
}

@media screen and (max-width:320px) {
html{ font-size: 12px}
}