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

.res{ display:none;}

@media screen and (max-width:1400px){
.res.w1400{ display: block}

.visualSlide .el{ height:auto; padding-bottom:40%}
.visualSlide_control { position:relative; justify-content:center}

/* 회사소개 > 윤리경영 */
.pg_tit.dep1 > .t2 br{display: none;}

.viewTopN .wrapImg {width: 45%;}
}
@media screen and (max-width:1280px){
.res.w1280{ display: block}
body{ letter-spacing:.05em; font-size:14px}

.allOn #headerN{ padding-right:0}
.allOn #headerN:before{ display:none}
.allOn #headerN .top_wrap .wrapIn{ gap:1em}

/* .cateSlide1 .el{ width:60vmin} */
/* .cateSlide2 .el{ width:42vmin} */

.cateSlide1 .el{ width:50%;}
.cateSlide2 .el{ width:50%;}

.mainBoardW{ flex-direction:column}
.mainBoardW .boardGroup{ width:100%; height:auto}
.mainQuick .linkW{ flex-wrap:wrap; gap:1em}
.mainQuick .linkW .st.tit{ display:none}
.mainQuick .linkW .st{ width:calc(10% - .9em)}

#contentsN .sub_top_wrap .sub_tit .t1 {font-size: 4vmin;}
#contentsN .sub_top_wrap .sub_tit:after {height: 3.5vmin; margin: 2vmin auto 0 auto;}
#contentsN .sub_top_wrap .sub_tab .gnb {margin-top: 1.5vmin;}

.login_wrap .login.row{ flex-direction:column}
.labelWrapN.d1 > label,
.labelWrapN.d2 > label{ width:calc(50% - .5em)}

.viewTopN {gap: 10vmin;}
.viewTopN .wrapCon .viewTitN .t1 {font-size: 3.5vmin;}

.map_wrap .cnt_con .map_box .c_info {padding: 6.5em 4.25em 6.5em 2.25em;}
.map_wrap .cnt_con .map_box .c_info .info_box .tit {font-size: 1.8em;}
.map_wrap .cnt_con .map_box .c_info .info_box .txt {font-size: 1.25em;}

}
@media screen and (max-width:1024px){
:root{
--headerH1 : 5em;
--headerH3 : 3.5em;
}

.res.w1024{ display: block}

#headerN .top_wrap{ position:relative; z-index:1}
#headerN .top_wrap .etc_wrap{ position:fixed; width:100%; bottom:0; left:0; z-index:1000; background:#fff; box-shadow:0 -1em 1em rgba(0,0,0,.1)}
#headerN .top_wrap .etc_wrap .btnW{ align-items:center}
#headerN .top_wrap .etc_wrap .btnW > *{ flex:1}
#headerN .top_wrap .etc_wrap .btnW .goTop .xi{ font-size:2em}
#headerN .top_wrap .etc_wrap .btnW .memW{ display:flex; justify-content:center}
#headerN .top_wrap .etc_wrap .btnW .memW .listW{ top:auto; bottom:100%; border-radius:1em 1em 0 0; box-shadow:0 -1em 1em rgba(0,0,0,.1); width:100%; min-width:8em; left:0; transform:translateX(0)}
#headerN .top_wrap .etc_wrap .btnW .memW .listW:before{ display:none}
#headerN .top_wrap .etc_wrap .btnW .memW .listW .list > li{ font-size:1.225em}
#headerN .top_wrap .etc_wrap .btnW .memW .listW .list > li > a{ padding:.5em 0}
#headerN .top_wrap .etc_wrap .btnW .btnInc{ height:4.5em; width:100%; padding:.5em 0}
#headerN .top_wrap .etc_wrap .btnW .btnInc .tt{ display:block}
#headerN .top_wrap .wrapIn{ gap:2vw}
#headerN .top_wrap .logo{ margin-left:5em; margin-right:auto; margin-top:.25em}
#headerN .top_wrap .logo img{ height:2.25em}
#headerN .top_wrap .gnb_wrap{ flex:0 0 auto; order:-1}
#headerN .menu_wrap .gnb > li{ max-width:none}
/*
#headerN .allmenu_wrap{ position:absolute; left:0; top:0; width:100%; border-top:none}
#headerN .allmenu_wrap .allBtn{ font-size:1.25em}
#headerN .allmenu_wrap .wrapIn{ height:var(--headerH1)}
#headerN .allmenu_wrap .menu_wrap{ display:none}
*/
/* #headerN .allmenu_wrap .allBtn{ position: fixed; left:0; top:.2em; transform:translate(4vw, .75em); z-index:1} */
#headerN .allmenu_wrap .allBtn{ position: fixed; left:0; top:var(--headerH2); transform:translate(4vw, .75em); z-index:1}
.tBannerOff #headerN .allmenu_wrap .allBtn{ position: fixed; left:0; top:.2em; transform:translate(4vw, .75em); z-index:1}
#headerN .allmenu_wrap .allBtn .xi{ font-size:1.625em}
#headerN .all_wrap .all{ max-height:calc(100vh - var(--headerH1) - var(--headerH2)); width:100%; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; scrollbar-color:transparent; top:var(--headerH1); z-index:1; margin-top:.063em}
#headerN .all_wrap .all{ max-height: 87% !important; top: calc(var(--headerH1) + 42px) !important; margin-top: 0 !important;}
.tBannerOff #headerN allmenu_wrap .allBtn{ top:0}
.tBannerOff #headerN .all_wrap .all{ max-height:calc(100vh - var(--headerH1))}
#headerN .all_wrap .all > *{ max-width:none; width:100%}
#headerN .all_wrap .all .gnb{ flex-direction:column}
#headerN .all_wrap .all .gnb > li{ border:none; border-bottom:1px solid #ddd; display:flex}
#headerN .all_wrap .all .gnb > li:first-child{ border-left:none}
#headerN .all_wrap .all .gnb > li:last-child{ border-right:none}
#headerN .all_wrap .all .gnb > li .dp1{ width:8em;}
#headerN .all_wrap .all .gnb > li .dp2{ flex:1; min-width:0; margin-top:-.5em}
#headerN .all_wrap .all .gnb > li .dp2 > li > a .va{ font-size:1.125em}

#headerN .top_wrap .search_wrap.left{ display:none}
#headerN .top_wrap .search_wrap.right{ display:flex}
#headerN .top_wrap .search_wrap.right.on .search{ max-width:none; right:-3vw}
#headerN .top_wrap .search_wrap.right.on .search .inp{ font-size:1.125em}

.allOn2 #headerN{ position:fixed}
.allOn2 #headerN .top_wrap .search_wrap{ visibility:hidden}

#footerN .partnerSlide .el{ width:20vmin}
#footerN .siteWrap{ padding:1em 0 8em 0}
#footerN .siteWrap .wrapF{ flex-direction:column; align-items:flex-start}
#footerN .cs_wrap{ order:-1; width:100%; box-sizing:border-box; padding:0 0 1em 0; position:relative}
#footerN .cs_wrap:before{ content:""; position:absolute; left:50%; width:100vw; bottom:0; transform:translateX(-50%); height:1px; background:rgba(255,255,255,.1)}
#footerN .cs{ flex-direction:row; width:100%; align-items:center; flex-wrap:wrap}
#footerN .cs .tt{ margin-left:auto}
#footerN .cs .tit,
#footerN .cs .tt br{ display:none}
#footerN .logo_wrap{ flex-direction:column}

#contentsN .sub_top_wrap.st1{ height:auto; padding:4em 0}
#contentsN .sub_top_wrap .sub_tab .gnb > li.on{ width:100%}
#contentsN .sub_top_wrap .sub_tab .gnb > li.on .dp2{ flex-wrap:wrap; gap:2em; justify-content:center}
#contentsN .sub_top_wrap .sub_tab .gnb > li.on .dp2 > li{}

.d1 #contentsN .sub_top_wrap .wrapF{ flex-direction:column; gap:1em}
.d1 #contentsN .sub_top_wrap .sub_tit:after{ display:none}

.stickyT,
.scroll .stickyT{ top:calc(var(--headerH1) + var(--headerH2) + var(--headerH3))}
.tBannerOff .stickyT,
.scroll.tBannerOff .stickyT{ top:calc(var(--headerH1) + var(--headerH3))}

#contentsN .subPageTit.st1 .wrapF{ align-items:flex-start}
#contentsN .subLnbWrap .wrapF{ flex-direction:column; gap:1em}
#contentsN .subLnbWrap .subLnbW{ width:100%; border-bottom:1px solid #ddd; position:relative; top:0}
#contentsN .subLnbWrap .subLnbW .gnb > li.on .dp2{ flex-wrap:wrap; flex-direction:row; font-size:1.125em}
#contentsN .subLnbWrap .subLnbW .gnb > li.on .dp2 > li{ width:50%}
#contentsN .subLnbWrap .subLnbW .gnb > li.on .dp2 > li:before{ display:none}
.myIncWrap .infoW{ width:100%; flex-direction:row}
.myIncWrap .stateW{ width:100%;}
#contentsN .subLnbWrap .subDocW{ flex:0 0 auto; width:100%}

.searchN{ flex-direction:column}
.searchN .leftW{ width:100%; position:relative; top:0 !important}
.searchN .listW{}
.searchN .resultW{ padding:0 0 1em 0}

.mainQuick .linkW .st{ width:calc(20% - .8em)}

.cateSlideW .cateSlideIn {margin: 1vmin;}

.prodNW .item{ width:calc(33.33% - 2vmin)}
.viewTopN{ flex-direction:column; gap: 5vmin;}
.viewTopN .wrapImg{ width:100%; display:flex; gap:4vmin}
.viewTopN .wrapImg .prodN_img{ flex:1 1 0%; min-width:0}
.viewTopN .wrapImg .thumb{ flex-direction:column; width:15%; margin-top:0}
.viewTopN .wrapImg .thumb > li{ width:100%}

.flexTableN{ font-size:1.188em; border:none}
.flexTableN .flexTableN{ font-size:1em}
.flexTableN:not(.rFix) .tr{ flex-direction:column}
.flexTableN:not(.rFix) .tr .cell{ min-height:inherit; max-width:100%; text-align:left !important; justify-content:flex-start; align-items:flex-start}
.flexTableN:not(.rFix) .tr .cell.th{ flex:1; border:none; padding:0; padding-top:.75em}
.flexTableN:not(.rFix) .tr .cell.wBlank,
.flexTableN:not(.rFix) .tr .cell.wBlank2{ display:none}
.flexTableN:not(.rFix) .tr .cell.wCheck{ flex:0 0 auto}
.flexTableN .cell.wFormTit{ flex-basis:9em}

.flexTableN.thSt1 .thead{ display:none}
.flexTableN.thSt1 .tr{ flex-direction:row; flex-wrap:wrap; align-items:center; border:1px solid #ddd; border-radius:1em; position:relative; padding:4vmin; gap:4vmin 2vmin; margin-bottom:3vmin}
.flexTableN.thSt1 .tr:hover{ background:none}
.flexTableN.thSt1 .cell{ flex:0 0 auto; padding:0 !important; border:none; }
.flexTableN.thSt1 .cell.wProdNo{}
.flexTableN.thSt1 .cell.wProdTit{ width:100%}
.flexTableN.thSt1 .cell.wPrice{ margin-right:auto}
.flexTableN.thSt1 .cell.wCon{ flex:1 1 0%; min-width:0; padding:1vmin 1vmin 3vmin 1vmin !important}
.flexTableN.thSt1 .cell.wDate .tt1{ font-size:.875em; color:#999}
.flexTableN.thSt1 .cell.rDel{ position:absolute; right:0; top:0; margin:1vmin}
.flexTableN.thSt1 .cell.rQTY{ order:100}
.flexTableN.thSt1 .cell.rBtn{ order:101; margin-left:auto}
.flexTableN.thSt1 .cell.rPrice{ order:101; margin-left:auto; margin-right:0}
.flexTableN.thSt1 .cell.rHide{ display:none}
.flexTableN.thSt1 .cell.r100{ flex:0 0 auto; width:100%}
.flexTableN.thSt1 .cell.rFirst{order:-10}
.flexTableN.thSt1 .cell.rlast{order:1000}
.flexTableN.thSt1 .cell.rML{ margin-left:auto}
.flexTableN.thSt1 .cell[data-tit]{ flex-direction:row; gap:1em; align-items:center; text-align:center}
.flexTableN.thSt1 .cell[data-tit] > *{ flex:1; min-width:0;}
.flexTableN.thSt1 .cell[data-tit]:before{ content:attr(data-tit); font-size:.875em; font-weight:700; color:#999; min-width:4em; text-align:right}
.flexTableN.thSt1 .tableShow{ border:none}
.flexTableN.thSt1 .tableShow.on .tr{ border-color:var(--siteC)}
.flexTableN.thSt1 .tableShow.on .tr .cell{ border:none}
.flexTableN.thSt1 .tableShow.on:not(.c0) .showRow{ background:#e1ebfe; border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0}
.flexTableN.thSt1 .tableShow.on .hide .tr{ border-top-left-radius:0; border-top-right-radius:0; padding:0; border-top:none}

.flexTableN.res4{ border-top:1px solid #ddd}
.flexTableN.res4 .tr{ flex-direction:row}
.flexTableN.res4 .cell{ padding:1em .5em}

.prodN_st.st2,
.prodN_st.st2 .img_wrap {width: 100%;}

.tableSummary{ flex-wrap:wrap}
.prodFilterW{ flex-direction:column}
.prodN_total{ flex-direction:column; align-items:flex-end; gap:0}
.prodN_total .inFlex{ min-width:25vmin; text-align:right; justify-content:flex-end}
.prodN_total .icoSt.s1{ font-size:.5em; margin:.5em }

.prodN_st.st2{ flex-wrap:wrap}
.prodN_st.st2 .spec_wrap{ width:100%; box-sizing:border-box; padding:1vmin}
.prodN_st .spec_wrap .wrap_list > li{ width:100%}
.prodN_st .spec_wrap .wrap_list > li .tit{ width:24vmin}
.prodN_st.res1 .con_wrap{ flex:0 0 auto; width:100%; padding:0}
.prodN_st.res1 .con_wrap .inFlex{ flex-wrap:wrap}
.prodN_st.res1 .con_wrap .groupSt{ width:100%}
.prodN_st.res1 .con_wrap .mgL{ margin-left:0; width:100%}
.prodN_st.res1 .con_wrap .qtyBtn{ margin-right:auto}

.prodN_tit .t1{ font-size:1.063em}

.inpFlex{ width:100%}
.inpFlex .w1{ width:100%}
.inpFlex .fix,
.inpFlex .fix2{ width:auto; flex:1 1 0%; min-width:0}
.label_calendar { width:12em}

.icoSt,
.icoSt.s1{ font-size:1em}
.qtyBtn{ font-size:1.125em}

.r100{ width:100% !important}
.rOD1{ order:-1}
.rGrow{ flex:1; min-width:0}
.rAuto{ width:auto !important}

.viewCompareN .wrapCon{ flex-direction:column}
.viewCompareN .wrapCon .btnW{ flex-direction:row; width:100%}
.viewCompareN .wrapCon .btnW .st{ flex:1; font-size:1.125em}
.boardScroll_wrap.stN{ height:70vh; overflow-y:auto; overflow-x:auto}
.board_table.view1.stN{ min-width:70em}
.board_table.view1.stN th{ background:#fff !important; color:#111; font-weight:700}
.board_table.view1.stN th:after{ content:""; position:absolute; right:0; top:0; width:1px; height:100%; background:#ddd}
.board_table.view1.stN .cmp_table_head th{ background:#f5f5f5 !important}
.board_table.view1.stN .w_form_tit{ width:8em}
.board_table.view1.stN th,
.board_table.view1.stN td{ padding:.5em}

.com_company .com_infoW{ flex-direction:column}
.com_company .com_infoW .infoC,
.com_company .com_infoW .gm_img{ width:100%}
.com_ideology .ideology_list{ gap:1em 0}
.com_ideology .ideology_list > li{ max-width:50%; flex-basis:50%}
.com_ideology .ideology_list > li .in{ box-sizing:border-box; height:100%}
.com_brand .list_box .list{ gap:1em}
.com_brand .list_box .list .inner{ width:100%}
.com_brand .list_box .list .inner .img{ width:100%; display:flex; align-items:center; gap:4vmin; padding:4vmin}
.com_brand .list_box .list .inner .img > .logo_con{ margin:0; width:30%; display:flex; justify-content:center;}
.com_brand .list_box .list .inner .img > .logo_con > img{ height:5vmin; width:auto; object-fit:contain; max-width:80%; max-height:80%}
.com_brand .list_box .list .inner .txt{ border:none; margin:0; border-left:1px solid #ddd; padding:1vmin; padding-left:4vmin; flex:1 1 0%; min-width:0}
.human_div{ flex-direction:column}
.human_div .img_con{ width:100%;}
.human_div .infoW{ width:100%; order:-1}
.human_div .infoW .iconW > .icon_list{ flex-direction:column}
.human_div .infoW .iconW > .icon_list > li{ display:flex; align-items:center; width:100%; gap:8vmin}
.human_div .infoW .iconW > .icon_list > li .tArea{ flex:1; min-width:0; text-align:left}
.hu_field .field_con > .con{ flex-direction:column; gap:5vmin}
.hu_field .field_con > .con .img_con,
.hu_field .field_con > .con .txtArea{ width:100%}
.welfare_wrap .welfare_list > li{ flex-basis:50%; max-width:50%}

.re-circle-wrap .list > li{ width:50%;}
.re-circle-wrap .list > li:after{ content:""; display:block; padding-bottom:100% }
.re-circle-wrap .list > li .cir-in{ position:absolute; left:0; top:0; width:100%; height:100%}
.re-circle-wrap .list > li .cir-in .icon{ width:auto; height:30%}
.re-circle-wrap .list > li .cir-in .icon > img{ height:100%}
.re-circle-wrap .list > li .cir-txt .mt5{ display:none}
.map_wrap .cnt_con .map_box{ flex-direction:column}
.map_wrap .cnt_con .map_box .c_map,
.map_wrap .cnt_con .map_box .c_info{ flex:0 0 auto; width:100%}
.map_wrap .cnt_con .map_box .c_map{ height:30vh}
.map_wrap .cnt_con .map_box .c_info{ padding:0}
.map_wrap .cnt_con .map_box .c_info .info_box{ padding:4vmin;}
.map_wrap .cnt_con .map_box .c_info .info_box .tit{ font-size:4vmin}
.map_wrap .cnt_con .map_box .c_info .info_box .txt{ font-size:3vmin; padding-left:0}
.map_wrap .cnt_con .map_box .c_info .info_box .txt > .xi{ display:none}
.map_wrap .cnt_con .map_box .c_info .link_btn{ position:relative; width:100%; padding:4vmin; margin-top:2vmin}
.map_wrap .cnt_con .map_box .c_info .link_btn .tit_wrap > span{ display:inline; font-size:3vmin}
.map_wrap .cnt_con .map_box .c_info .link_btn .ibox{ border:none; top:50%; width:auto; left:auto; right:2em; transform:translateY(-50%)}

.prodFilterW .wrap_grow {width: 100%;}

.aLine:after{ display:none}

.prodNW.d6 .item,
.prodNW.d7 .item,
.prodNW.d8 .item,
.prodNW.d9 .item{ width:calc(25% - 1.5vmin)}
/* .inpW6 {width: 100% !important;} */


}

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

.labelWrapN.d2 > label{ width:100%}
.labelWrapN.d3 > label{ width:calc(50% - .5em)}

.prodNW .item,
.prodNW.d4 .item{ width:calc(50% - 1.5vmin)}
.prodNW.d3 .item{ width:100%}
.prodNW.d6 .item,
.prodNW.d7 .item,
.prodNW.d8 .item,
.prodNW.d9 .item{ width:calc(33.33% - 1.3333vmin)}

#footerN .partnerWrap .wrapTit{display: none;}

.board_cate_wrap .input_st.btn {flex: 1 20%;}

.wordSt {flex: 1 49%;}

html.pop .popWrap .popTit {padding: 1em 1em 1em 1em;}
html.pop .popWrap .popIn {padding: 0 1em 2em 1em;}

.com_brand .list_box .list .inner .img > .logo_con > img {height: 7vmin;}

}
@media screen and (max-width:650px){
.PHONE { display:block;}

.wordSt {flex: 1 48%;}

.div-container { width:100%; overflow:auto; /*white-space:no-wrap;*/}
.div-container .divCon1 {display: block; width: 650px;}
.div-container .divCon1 .table_st .fixL { position: unset;}
}
@media screen and (max-width:560px){
#contentsN .sub_nav_control .list > li:not(.home):before {width: 1.5em;}
#contentsN .sub_nav_control .list > li .navBtn .tt {font-size: .86em;}
}
@media screen and (max-width:500px){
.cateSlide1 .el{ width:100%;}
.cateSlide2 .el{ width:100%;}

#contentsN .sub_top_wrap.st1 {padding: 3.5em 0;}
#contentsN .sub_top_wrap .sub_tab .gnb > li.on .dp2 {gap: 1.5em 1em;}
#contentsN .sub_top_wrap .sub_tab .gnb > li.on .dp2 > li {flex: 1 29.3%; text-align: center;}
.dp1_guide #contentsN .sub_top_wrap .sub_tab .gnb > li.on .dp2 > li {flex: 1 48%;}

.d1 #contentsN .sub_top_wrap {padding: 4vmin 0;}
.dp1_order #contentsN .sub_top_wrap .sub_tab .gnb > li.on .dp2 > li {flex: 1 20%;}

.prodN_tit .t1 {font-size: .96em;}
.prodN_st .img_wrap {padding: .5em;}
.prodN_st .con_wrap {padding: .5em;}

.tableSummary .mgL {width: 100%;}
.input_stN.s1.wMin {min-width: unset; width: 100%;}

.label_select,
.board_search_wrap .input_st[type=text],
.board_search_wrap .input_st {width:100%!important; margin-left: unset;}
.board_search_wrap .input_st {margin-bottom: .5em;}

/* member */
.login_wrap .login {padding: 2em;}
.login_tab {flex-wrap: wrap;}
.login_tab > li {width: 100%; max-width: 100%;}

.flexTableN .cell {padding: .5em 0em;}
.label_stN.s1 {font-size: .9em;}
.agreeBox .wrapIn {font-size: .75em;}

.viewTopN .wrapCon .viewTitN {padding: 2vmin 0;}
.viewConW .viewConTit .t1 {font-size: 1.4em;}
}

@media screen and (max-width:425px){
#footerN .cs .tt{margin-right: auto; margin-left: 0;}
/* #footerN .partnerSlide .el .img .resize img{max-width: 100%; max-height: 100%;} */
#footerN .partnerSlide .el{ width: 36.2vmin;}
#footerN .partnerSlide .el .img .resize img{ max-width: 66%; max-height: 66%;}

.wordSt {flex: 1 45%;}
}

@media screen and (max-width:380px){
body{ font-size:11px;}



}

@media all and (orientation:landscape){

}