@charset "utf-8";
/* CSS Document */
@media screen and (max-width:1560px) {

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

}

@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;}

.PHONE{ display: block;}
.PC{display: none !important;}

/* 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;}

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

/* ====== 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: 5.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 .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;}

/* ====== 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%;}

.boxIconList > li{flex: 1 1 33.33% !important; max-width: 33.33% !important;}

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

}


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

/* header */
.scroll #header { transform: translateY(0); } 
.scroll.up #header { transform: translateY(0); } 

/* ====== 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;}

/* ====== board ====== */
.board_viewM{ padding: 2rem; font-size: 16px !important;}
.board_viewF{ padding: 2rem;}

/* ====== 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%;}

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

/* ====== 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_area .Buhorizen .horizen_wrap .slide_ctn .item.wide{ min-height: 45svh;}

/* ====== 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);}

/* ====== consultation ====== */
.overviewTop{padding: 3rem;}

/* ====== consulting ====== */
.colorBoxList > li > .con{text-align: center;gap: 0.5rem;}
.colorBoxList > li > .con > .cBox,
.colorBoxList > li > .con > .cLightBox{width: auto; flex: 1; padding: 1rem; box-sizing: border-box;}
.arrow-container > .xi{font-size: 1.415rem; width: 0.55rem;}

/* ====== overviewTop ====== */
.overviewTop .inner > .txt br{display: none;}

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



/* 테이블 스크롤 */
.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-bottom: 5px; color:var(--color-point);  }
.scr_i .xi{ transform: rotate(90deg);}

}



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

/* ====== contents ====== */
#contents .sub_top_wrap .subTit .t1{ font-size: 6.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;}


/* ====== 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;}

/* ====== 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;}

/* ====== location ====== */
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li > .con{ align-items: start;}

/* ====== consultation ====== */
.overviewTop{padding: 2rem;}
.boxIconList > li{flex: 1 1 50% !important; max-width: 50% !important;}
.anw .anwInner{padding: 1.75rem 1rem 3rem 1rem;}
.lineBoxIn{padding: 1rem;}

/* ====== process ====== */
.processArrow .ArrowList > li{ width: 100% !important;}

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



/* 테이블 스크롤 */
    .table_wrap table {min-width: 600px;}
}


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

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