@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1650px){

.main_busin .left_tit .bg {left: -20.5%;}

}

@media screen and (max-width:1440px){

body{ font-size: 14px;}  

.business_wrap .business_infoW .main_tit {padding-top: 1em; padding-bottom: 2em; padding-left: 4em;}
.main_tit .t4 {font-size: 1.25em;}
.business_wrap .business_infoW .business_list > .list-item {height: 7em;}
.business_wrap .business_infoW .business_list > .list-item > .inner {padding: 0 5em;}
.business_wrap .business_infoW .business_list > .list-item > .inner > .tt {font-size: 2em;}

/*서비스*/
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT > .title{ margin-bottom: 1em;}

/*헤더*/
#header .gnb_wrap{ display: none;}


}

@media screen and (max-width:1024px){

.box0{ width: 94%; margin: 0 auto; padding: 0 2vw;}
.box1{ width:94%;}

body{ font-size: 13px;}

.PC { display:none;}
.PHONE { display:block;}

.fp-section { height: auto!important; } 
.full-height { height: auto; min-height: auto; padding: 6em 0; } 

#nav{ display: none;}

/*공통*/
#contents{ overflow: hidden;}
#contents .sub_page_top{ padding: 6em 0 0 0;}
#contents .sub_page_bg{ border-radius: 0em;}
#contents .sub_page_menu .home .in .xi{ transform: rotate(0deg);}

.scr_i{display: block;}
.scr_i .xi-scroll{ transform: rotate(90deg);}

.bgfix.fix{ background-attachment: local;}

.allGnbOn #header .all_wrap .all_btn {filter: unset !important;}
.sub #header:hover .all_wrap .all_btn .ham:before, 
.sub #header:hover .all_wrap .all_btn .ham:after {background: #fff;}

#header .all_wrap .all_layer .all_img {width: 100%; height: 10em;}
#header .all_wrap .all_layer .all_img ~ .scrollst {flex: 1 100%;}
#header .all_wrap .all_layer .allconWrap {padding: 7vh 4vw;}
#header .all_wrap .all_layer .allconWrap .all_gnb{ margin-bottom: 8em;}
#header .all_wrap .all_layer .all_top .tit_in {margin-bottom: 2em;}
#header .all_wrap .all_layer .all_top .tit_in .tt {font-size: 2.5em;}
#header .all_wrap .all_layer .all_gnb .gnb {flex-wrap: wrap; border-top: 1px solid var(--siteC); border-bottom: 1px solid var(--siteC);}
#header .all_wrap .all_layer .all_gnb .gnb > li {flex: 1 49%; border-bottom: 1px dashed #ddd; padding: 1em 1em 1em 1em;}
#header .all_wrap .all_layer .all_gnb .gnb > li:last-child {border-bottom: unset;}
#header .all_wrap .all_layer .all_gnb .gnb > li ~ li {border-left: unset;}
#header .all_wrap .all_layer .all_gnb .gnb > li .dp2 {padding: 1.5em 0 0 .875em;}

#footer .info_wrap {flex-wrap: wrap; gap: 2em;}

.vision_con .vision_list {flex-wrap: wrap;}
.vision_con .vision_list li {flex: 1 49%;}

.map_btn { min-width: 8em;}

/*공통*/
.main_tit > .t1{ font-size: 4em;}

/*비즈니스*/
.business_wrap .business_imgCon{ height: 60vh;}
.business_wrap .business_infoW .business_list > .list-item{ height: 6em;}

/*서비스*/
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT{ bottom: 3em;}
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT > .title{ margin-bottom: 0em; height: 2em;} 

/*바로돔*/
.main_barodoum{ height: 100vh !important;}
.main_barodoum.full-height{ padding: 0em;}

/*커스터머*/
.main_customer { flex-direction: column;}
.main_customer.full-height{ padding: 0em;}
.main_customer .wrap_bg{ width: 100%; height: 30vh;}
.main_customer .customer_wrap{ width: 100%; height: auto; padding-bottom: 70px;}
.main_customer .customer_wrap .customer_linkW{ margin-top: 60px;}

/*소닉월*/
.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_top .pro_name {font-size: 3.5em;}
.sub-tab-content .content_inner .content_box {padding-bottom: 3em;}
.sub-tab-content .content_inner .content_box .content_main {flex-wrap: wrap; gap: 3em;}
.sub-tab-content .content_inner .content_box .content_main .pro_img {width: 100%; height: unset; max-height: unset;}
.sub-tab-content .content_inner .content_box .content_main .pro_info {width: 100%;}
.sub-tab-content .content_inner .content_box .char_container .inner_con {flex-wrap: wrap;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .bg_con {width: 100%; padding: 2em;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .bg_con .en {font-size: 2em;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC {width: 100%; padding: 2.5em;}

/* 인프라공급 */
.sTn_wrap { width: 100%; } 
.sTn_wrap .sideB { display: flex; flex-wrap: wrap; border-radius: .5em; overflow: hidden; border: 1px solid #ddd;} 
.sTn_wrap .sideB > li { flex:1; } 
.sTn_wrap .sTn { width: 100%; } 
.proAll { flex-wrap: wrap; } 
.proAll .Tright { width: 100%; padding-left: 0; border-left: none;} 
.proAll .Tleft{ position:relative; top: 0; width: 100%;}
.sTn_wrap .sideB > li{ flex: 1 1 50%; max-width: 50%;}
.sTn_wrap .sTn{ border-radius: 0em; }
.TrAll_wrap .tit_wrap > .tit{ font-size: 2.15em;}

/*pc 통합보안*/
.lineBox.s3 .infoBox{ padding: 2em;}
.IcBox .Iclist > li{ flex: 1 1 50%; max-width: 50%;}
.Gbox .Gboxlist > li > .in > .icon > img{ width: 5em;}

.Gbox .Gboxlist > li{ flex: 1 1 100% !important; max-width: 100% !important;}
.security_wrap .security_list > li:nth-child(2) .in > .inner, .security_wrap .security_list > li:nth-child(4) .in > .inner{ text-align: left;}

/*소프트웨어*/
.Logowrap .listCon li{ flex: 1 1 33.33%; max-width: 33.33%;}

/*인트로*/
.intro_wrapA{ height: auto;}
.intro_wrapA .intro_list{ height: auto;}
.intro_wrapA .intro_list > li{ flex: 1 1 100%; max-width: 100%;}
.intro_wrapA .intro_list > li > .in{ height: 30em;}

/* 메뉴탭 */
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img {display:none;}
#header .all_wrap .all_layer .all_inner > .wrap_in .wrap_middle {width: 100%;}
#header .all_wrap .all_layer .wrap_middle .gnb > li ul {width: 70%;}

/* 회사소개 */
.table_scroll{ overflow-x: auto; width: 100%;}
.table_scroll table{ min-width: 800px;}

}


@media screen and (max-width:768px){
body{ font-size: 12px;}


.div-container {width:100%;overflow:auto;/*white-space:no-wrap;*/}
.div-container .divCon1 {display: block; width: 700px;}

#header .gnb_wrap .gnb {display: none;}

.service_list li .icon {width: 4em; margin: 1em auto;}
.service_list li .tt {min-height: 7em;}

.greet_tit .t1 {font-size: 2.5em;}

.history_wrap {display: block; padding: 2em 0 1em 0;}
.history_wrap:before, .history_wrap .tabLink { left:5%; top: 0.5%;}
.history_wrap .wrap_tab { display:flex; gap: 1em; padding: 0 1em 0 1em; width:unset;}
.history_wrap .wrap_tab li { flex:1 50%;}
.history_wrap .wrap_tab > li > a span {display: block;}
.history_wrap .wrap_tab > li > a .t1 {display: block;}
.history_wrap .history {padding-left: 6%; padding-top: 0;}
.history-layout{ flex-direction: column;}
.history_wrap .scrollAniHis, .history_wrap:after{ left: 5%;}


/*공통*/
.main_tit > .t1{ font-size: 3.5em;}

#contents .sub_page_con .con_menu .gnb .dp3 { gap: 0em; border-radius: 1em; overflow: hidden;} 
#contents .sub_page_con .con_menu .gnb .dp3 > li { flex: 1; background: #f7f7f7; } 
#contents .sub_page_con .con_menu .gnb .dp3 > li:first-child,
#contents .sub_page_con .con_menu .gnb .dp3 > li:last-child {border-radius: 0em;} 
#contents .sub_page_con .con_menu .gnb .dp3 > li > a { border-radius: 0em;} 
#contents .sub_page_con .con_menu .gnb .dp3 > li{ flex: 1 1 33.33%; } 


/*탭 내부 공통*/
.lineBox.s33 .boxIn{ flex-direction: column;}
.lineBox.s33 .boxIn .img_w{ width: 100%;}

.page_dot_list.w1.mb100 > li{ width: calc(100%);}
.ImgBox .ImgBox_list > li{ flex: 1 1 100%; max-width: 100%;}



/*비주얼*/
.visualSlide_wrap .slogan .t1{ font-size: 3.5em;}

/*비즈니스*/
.business_wrap{ flex-direction: column;}
.business_wrap .business_imgCon{ width: 100%; height: 35vh;}
.business_wrap .business_infoW{ width: 100%;}
.business_wrap .business_infoW .main_tit{ padding-top: 3em;}

/*서비스*/
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .img_con{ height: 30vh;}
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner > .infoT{ padding: 0 2em;}

/*바로돔*/
.main_barodoum{ height: 70vh !important;}
.main_barodoum .intro_wrap > .icon > .xi{ font-size: 5em;}

/*security*/
.security_wrap .cir_inner:after{ width: 20em; height: 20em;}
.security_wrap .cir_inner{ width: 15em; height: 15em;}
.security_wrap .cir_inner .tt{ font-size: 1.715em;}
.security_wrap .cir_inner .icon > .xi{ font-size: 3.815em;}
.security_wrap .security_list > li > .in > .inner > .title{ font-size: 1.915em;}
.security_wrap .security_list > li:nth-child(2n) .in > .inner{ padding-left: 2em;}
.security_wrap .security_list > li:nth-child(2) .in > .inner, .security_wrap .security_list > li:nth-child(4) .in > .inner{ text-align: left;}

/*소닉월*/
.tab_con{ position: relative; top: 0em;}
.tab_con .sub-tab > li{ flex: 1 1 100%;}
html.up .tab_con{ top: 0em;}

.sub-tab-container .tab_imgbanner .banner_txt .tit {font-size: 2.5em;}
.sub-tab-container .tab_imgbanner .banner_txt .txt {font-size: 1em;}

.sub-tab-header {flex-wrap: wrap;}
.sub-tab-btn {flex: 1 48%;}

.tab-container .tab-content .tab_inner {padding: 2em 2em;}
.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_top .pro_name {font-size: 3em;}

.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC {padding: 1.5em;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .char_listC .char_list > li {flex: 1 1 100%; max-width: 100%;}

.db780 {display: block;}
.div-container {width:100%;overflow:auto;/*white-space:no-wrap;*/}
.div-container .divCon1 {display: block; width: 800px;}

/*백업 솔루션*/
.doble_wrap{ flex-direction: column; align-items: start; padding: 2.5em;}
.doble_wrap .txtT{ width: 100%;}
.doble_wrap .logo_con{ width: 100%; padding-right: 0em; margin-right: 0em; border-right: none; padding-bottom: 1.5em; margin-bottom: 1.5em; border-bottom: 1px solid #ddd;}
.doble_wrap .logo_con > img{ width: 50%;}

/*전산실 이전*/
.process_box .pro_Blist > li{ flex: 1 1 50%; max-width: 50%;}
.process_box .pro_Blist > li:nth-child(2) > .in .Rarrow,
.process_box .pro_Blist > li:nth-child(4) > .in .Rarrow { display: none;}
.process_box .pro_Blist:before{ display: none;}

/*pc 통합보안*/
.lineBox.s3 .infoBox{ padding: 2em;}
.IcBox .Iclist > li{ flex: 1 1 50%; max-width: 50%;}
.Gbox .Gboxlist > li > .in > .icon > img{ width: 5em;}

/*오시는 길*/
.sub_location .address_box{ gap: 1em;}
.root_daum_roughmap .wrap_map{ height: 300px !important;}

/*유지보수*/
.div-container { width:100%; overflow:auto; /*white-space:no-wrap; */ } 
.div-container .divCon1 { display: block; width: 800px; } 

.page_col.div_T { flex-wrap: wrap; gap: 2em; } 
.page_col.div_T .Tleft { flex: 0 0 100% } 
.page_col.div_T .Tright { flex: 0 0 100%; } 

/* 전국지사안내 */
.csCenter_box { display: flex; border-radius: 0 4em 0 4em; } 
.csCenter_box .img_wrap { position: unset; } 
.csCenter_box .img_wrap .img { height: 100%; padding-bottom: 0; } 
.csCenter_box .txt_wrap { width: 100%; padding-left: 0; } 

.icon_circle{ justify-content: center; border-radius: 1.5em;}


/* lnb display:none; */
/* #contents .lnb_wrap {display:none;}
#contents .sub_wrap {width:100%;} */

/* 제품소개 */
.product_section .section_pro .funList > li {width:calc((100% - 4rem) / 2)}

/* == table */
.prod_table_st {overflow-y:scroll;}


/* sub-- */
/* 인사말 */
.greeting_wrapper {flex-direction: column;gap:2rem;}
.greeting_wrapper .left,.greeting_wrapper .right {width:100%;}
.greeting_wrapper .left > .imgCon {height:20rem;}

/* 회사소개 */
.infoContainer .infoWrap{ flex-direction: column;}
.infoContainer .infoWrap .txtCon{ width: 100%;}

/* 제작설비 */
.eq_container .eqList_container > li > .inner{ flex-direction: column; align-items: normal;}
.eq_container .eqList_container > li > .inner > .info{ width: 100%;}
.eq_container .eqList_container > li > .inner > .imgCon{ width: 100%;}

}

@media screen and (max-width:447px){
body{ font-size: 11px;}

.greet_tit .t1 {font-size: 2em;}
.intro_bg {padding: 2em 1em;}

.page_twrap_img.st1 .wrap_con {width: 90%; padding: 2em;}
.history_wrap:before, .history_wrap .tabLink { left:5%; top: 0.5%;}
.history_wrap .wrap_tab > li > a .t1 { font-size:1.55em;}

.sub_location .info li {display: block; padding: 1.5em 1.5em;}
.sub_location .info .icon {margin-bottom: 1em;}

/*헤더*/
.scroll #header{ background: #fff; border-bottom: 1px solid #ddd;}
html:not(.white) .fp-viewing-Business #header, html:not(.white) .fp-viewing-Footer #header, html:not(.white) .fp-viewing-Customer #header{ background: #fff; border-bottom: 1px solid #ddd;}

/* 헤더 메뉴 탭 */
#header .all_wrap .all_layer .wrap_middle .gnb > li ul {gap:0; flex-flow: column nowrap;}

/* gnb */
#contents .sub_page_con .con_menu ul li .dp2 > li > a > .va > .tt  {font-size:var(--font-size-sm)}
#contents .sub_page_con .con_menu ul li .dp2 {gap:1rem;}
#contents .va {white-space:nowrap;}

/* nav */
#contents .nav {display: none;}

/*BOARD*/
.board_search,
.board_search .search { display: block;}
.board_search .total { justify-content: flex-start;}
.board_search .search .input_st { margin-top: 0.5em;}
.board_search .search .input_st,
.board_search .search .select,
.board_search .search .inp { width: 100%;} 

#header .logo > .in img {width: 15em;}

.history_wrap:before, .history_wrap .tabLink { left:5%; top: 8.3%;}
.history_wrap .history > li .year .tt{ font-size: 2.45em;}
.history_wrap:before, .history_wrap .tabLink { left:5%; top: 0.5%;}

.sub_location .info li {padding: 1em 1em;}

/*공통*/
.main_tit > .t1{ font-size: 3.15em;}
.pageTxt .t1{ font-size: 2.15em;}
#contents .tit_wrap .tit .t1{ font-size: var(--font-size-lg-2);}
#contents .sub_page_tit .wrap_tit .sub_tit .tt{ font-size: 2em;}
#contents .tit_wrap .wrapIn{ padding: 2rem 0 0 0;}

/*비주얼*/
.visualSlide_wrap .slogan .t1{ font-size: 3em;}
.business_wrap .business_infoW .main_tit{ padding-left: 2em;}

/*비즈니스*/
.business_wrap .business_infoW .business_list > .list-item > .inner{ padding: 0 2em;}
.business_wrap .business_infoW .business_list > .list-item > .inner > .tt{ font-size: 1.815em;}

/*서비스*/
.service_wrap{ flex-direction: column;}
.service_wrap .serviceSlide_wrap,
.service_wrap .info_con{ width: 100%;}
.service_wrap{ gap: 0em;}
.main_service .service_wrap .main_tit{ text-align: center;}

.service_control .control{ justify-content: center;}
.service_wrap .serviceSlide_wrap .serviceSlide .el > .inner{ display: block;}
.service_wrap .serviceSlide_wrap .serviceSlide{ margin-right: 0em;}

/*바로돔*/
.main_barodoum .intro_wrap{ width: 90%;}

/*커스터머*/
.main_customer .customer_wrap .customer_linkW .link_list > li{ flex: 1 1 100%; max-width: 100%;}
.main_customer .brand_wrap .brand_list > li{ flex: 1 1 50%; max-width: 50%;}

/*인프라 공급*/
.gsClass.twide{ letter-spacing: 1em; opacity: 1; filter: blur(0);}

/*security*/
.security_wrap .security_list > li{ flex: 1 1 100% !important; max-width: 100% !important;}
.security_wrap .cir_inner{ position: relative; margin: 0 auto; transform: none; left: 0; top: 0; margin-bottom: 4em; margin-top: 4em;}
.security_wrap .security_list > li:nth-child(4) .page_dot_list{ margin-top: 0em;}
.security_wrap.mTn .cir_inner{ margin-top: 0em;}

/*소닉월*/
.sub-tab-container .tab_imgbanner .banner_txt {padding: 0 2em;}
.tab-container .tab-header > .tab-btn {font-size: 1em;}

.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_top .pro_name {font-size: 2.5em;}
.sub-tab-content .content_inner .content_box .content_main .pro_info .pro_top .sub_txt {font-size: 1.3em;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .bg_con {padding: 1.5em;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .bg_con .sub_tit {font-size: 1.125em;}
.sub-tab-content .content_inner .content_box .char_container .inner_con .bg_con .en {font-size: 1.8em;}
.sub-tab-container .tab_imgbanner .banner_txt .tit {font-size: 2em;}

/* 아웃소싱컨설팅 */
.outsourcing_dig .itemListWrap > ul li { padding:1.5em 3em; } 

/*소프트웨어*/
.Logowrap .listCon li{ flex: 1 1 50%; max-width: 50%;}

/* 전국지사안내 */
.csCenter_box { flex-direction: column; margin-top: 0; } 
.csCenter_box .inner { padding: 4em 2em; } 
.csCenter_box .img_wrap { width: 100%; height: 10em; border-radius: 0 4em 0 0; } 

/* 제품소개 */
.product_section .section_pro .funList > li {width:100%;}
.productViewContainer .proImg.h1 {height:auto;}

/* 회사소개 */
.infoContainer .infoWrap .titCon > .tit{ font-size: 1.56rem;}
.imgTxtList{ flex-direction: column; flex-wrap: nowrap;}
.imgTxtList.w2 > li,.imgTxtList.w3 > li{ width: 100%;}

.infoContainer .infoWrap .titCon{ width: 100%;}
.aboutTit .tt{ font-size: 1.315rem;}

.greeting_wrapper .right > .txtTop > .sub_tit{ font-size: var(--font-size-lg-1);}

/* 찾아오시는길 */
.locationContainer .mapInfoWrap{ flex-direction: column; padding: 1.5rem;}
.locationContainer .mapInfoWrap .leftInfo{ width: 100%;}
.locationContainer .mapInfoWrap .leftInfo > .tit{ font-size: var(--font-size-lg-1);}
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li > .con{ font-size: var(--font-size-sm-1);}
.locationContainer .mapInfoWrap .rightInfo{ width: 100%;}

/* 제작설비 */ 
.eq_container .wideImg{ height: 14.5rem;}
.eq_container .cenSlogan br{display: none;}
.eq_container .eqList_container > li > .inner{ gap: 0;}

}


@media screen and (max-width:320px){
#contents .sub_page_menu .drop_menu .drop_tit{ min-width: 10em;}
#contents .tit_wrap .tit .t1{ font-size: var(--font-size-lg-1);}

.history-layout .left .title-wrap > h3{ font-size: 2.25em;}
.history-layout .left .img-wrap{ height: 17em;}

.locationContainer .mapInfoWrap .leftInfo > .tit{ font-size: var(--font-size-md-1);}
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li > .con > .titCon{ flex-direction: column;}
.locationContainer .mapInfoWrap .leftInfo > .contactInfo > li > .con > .xi{ font-size: 1.2rem;}
.locationContainer .mapInfoWrap .rightInfo .mapOpen > li > .in{ padding: 0.8rem;}
.locationContainer .mapInfoWrap .rightInfo .mapOpen > li > .in > .plus{ right: 0.5rem; bottom: 1.2rem; width: 1.2rem; height: 1.2rem;}
.locationContainer .mapInfoWrap .rightInfo .mapOpen > li > .in > .tt{ font-size: var(--font-size-sm);}

.eq_container .wideImg{ height: 9.5rem;}
.eq_container .eqList_container > li > .inner > .info > .titCon > .tit{ font-size: 1.7em;}
.eq_container .eqList_container > li > .inner > .imgCon{flex-direction: column; height: 31.5em;}
.eq_container .eqList_container > li > .inner > .imgCon > img{ width: 100%;}

}