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

.res{ display:none}

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

#contents .sub_visual .sub_tab .gnb .dp2 > li > a .va {font-size: 1.125em;}

}
@media screen and (max-width:1280px){
.res.h1280{ display: block}
body{ font-size:15px}
.box2 {width: 94%;}

#header .top_wrap .etc_wrap{ margin-left:auto}
#header .top_wrap .gnb_wrap{ display:none}
#header .top_wrap .allBtn .btn{ padding:0 .5em}
#header .top_wrap .allBtn .btn .ico{ font-size:2.25em}
#header .top_wrap .allBtn .btn .ico:before{content:"\e91c"}

#header .top_wrap .gnb_wrap .gnb {gap: 3em;}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .tt {font-size: 1em;}


.mainNewsSlide .el .wrap_in .con .tt{ display:none}

.root_daum_roughmap {width: 100% !important;}

}

@media screen and (max-width:1200px){
  .vision_list .list_wrap {gap: 1em 0;}

  .table_form .wrap_in .con_wrap .label_wrap li {width: 25%;}
  .table_form .wrap_in .con_wrap .label_wrap li.w2 {width: 100%;}

}

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

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

#header .all_wrap .all_layer .all_inner > .wrap_bg {display: none;}

#footer .info_wrap {display: block;}
#footer .info {margin-top: 2em;}
#footer .cs_wrap {justify-content: flex-end; align-items: center;}

.visualSlide_wrap .visual_slogan .slogan{ font-size:.75em}
.visualSlide_wrap .visual_bottom{ width:100%; overflow:hidden}
.visualSlide_wrap .visual_bottom .img{ width:auto; max-width:none; height:5em; position:relative; left:50%; transform:translateX(-50%)}
.visualSlide_wrap .visual_bottom .control{ width:80%}
.wrap_hide[data-link='new']{ transform:translateY(-1em)}

.scroll .mainT { margin-top:0em;}

.inquiry_cate{ gap:.5em; justify-content:flex-start}
.inquiry_cate > li{ width:calc(33.33% - .3333em)}
.inquiry_cate > li .label .in{ padding:1.5em}

.story-tab {display: none;}
.story-list-wrap .list > li .txt-area .date {font-size: 1.5rem;}
.story-list-wrap .list > li .txt-area .content {font-size: 1rem;}
.story-list-wrap .list > li .img-area .imgfix {height: 25vw;}

.invest_con1 .list .con_box {display: block;}
.invest_con1 .list .con_box .xi {margin: 1em 0.5em;}
.invest_con1 .list .con_box .sec.s1 {width: 100%; margin-top: 1em; background: var(--siteC); color: #fff; border-radius: .8em;}
.invest_con1 .list .con_box .sec.s2 {width: 100%; margin-top: 1em; background: var(--siteC); color: #fff; border-radius: .8em;}

.invest_con1 .list .list_top {display: block;}
.invest_con1 .list .list_top .div-container {width: 100%;}

html.pop .popWrap.popPrivacy {max-width: 94vw;}

#captchaImg {width: 80%;}

}


@media screen and (max-width:882px){
.mainTop2.h2 .wrapIn{ flex-wrap: wrap; height: auto;}
.mainTop2 .wrapIn .visualCon.w2{ width: 100%;}
.mainTop2.h2 .wrapIn .visualCon .resize{ height: 0; padding-bottom: 56.52%;}
.mainTop2 .wrapIn .topCon2{ flex-direction: row;}
.mainTop2 .wrapIn .topCon2 .wrap2{}
.mainTop2 .wrapIn .topCon2 .wrap1{ width: 30%; height: auto;}

}


@media screen and (max-width:840px){
#footer{ margin-top:5em}
#contents .sub_visual {height:30vh;}
#contents .sub_visual .wrap_con{ height:30vh}
#contents .sub_visual .wrap_con .slogan_wrap{ font-size:.75em}
#contents .sub_visual .wrap_con .slogan_wrap .slogan .t2 br{ display:none}

.visualSlide_wrap.st1 .visualSlide .el{ height:calc(100vh - 60vw)}
.visualSlide_wrap .visual_slogan{ flex-direction:column; align-items:flex-start}
.visualSlide_wrap .paging{ flex-direction:row;}
.visualSlide_wrap .visual_slogan .slogan .t1{ font-size:3em; line-height:1.1}

.mainNewsSlide_wrap .control{ margin-top:.5em}

.mainT.st1{ margin-top:-3vw}

.main_tit{ font-size:.75em}

.main_cont{ margin-top:2em}
.main_cont.gap1{ gap:1em}
.main_cont .wrap_box.w2{ width:calc(50% - .5em)}
.main_cont .wrap_box{ padding:3em 1em}

.board_news_list.d1 > li{ width:calc(50% - .5em)}
.board_news_list.d2{ gap:3em}
.board_news_list.d2 > li{ width:100%}
.board_news_list.d1 > li.allMore{ width:100%}
.allMore .board_news .img_wrap .resize{ padding:2em}

.inquiry_cate > li{ width:calc(50% - .25em)}

.form_st.st1 > li.w1{ width:100%; padding-right:0}
.form_st.st1 > li.w1:nth-child(2n){ padding-left:0}
.form_lab .lab_tit{ width:8em; margin-right:1em}

.vision_list .list_wrap .list_con {width: calc(100% - 1em);}
.img_boxWrap .img_boxlist {justify-content: center; gap: 1em;}
.img_boxWrap .img_boxlist > li {flex: 1 1 26.3%; max-width: 26.3%;}

.esg-cont .esg-wrap .inner {display: block;}
.esg-cont .title-wrap {margin-bottom: 3em;}

.skill01_con1 {padding: 2em;}

.sub_tt.tit2 {font-size: 1.5em;}
.page-tt.s9 {font-size: 1em;}
.page-tt.s11 {font-size: 0.9em;}
.page-tt.s15 {font-size: 1em;}

.vision_list .list_wrap {display: block;}
.vision_list.st2 .list_wrap .list_con {margin: 1em auto;}
.vision_list .list_wrap .list_con .t4 {width: 70%; margin: 0 auto !important; font-size: 1em; text-align: center !important;}

.skill01_con1 .con1_list .list.w2 {width: calc(100% - 1em);}
.skill01_con1 .con1_list .list.w2 .page-tt.s11 {width: 70%; margin: 0 auto;}
.img_boxWrap .img_boxlist:before {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 label,
.board_search .search .grow,
.board_search .search .input_st,
.board_search .search .select,
.board_search .search .inp { width: 100%;} 
}

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

.visualSlide_wrap .visual_bottom .control { width:50%;}

.skill01_con1 .con_img {display: block;}
.skill01_con1 .con_img .left {width: 95%; margin-bottom: 1em;}
.skill01_con1 .con_img .right {width: 100%; text-align: center; background: #fff;}
.skill01_con2 .con2_list {display: block;}
.skill01_con2 .con2_list li {width: calc(100% - 0em); margin-bottom: 2em;}
.skill01_con5 .con5_list li {width: calc(100% - 0em);}
.skill01_con5 .con_img .img {width: 40%;}

.skill02_con2 {display: block;}
.skill02_con2 .left {width: 100%;}
.vision_list {width: 100% !important;}
.vision_list.st2 .list_wrap .list_con {background: unset;}
.skill02_con2 .right {width: 90%; margin-top: 2em;}
.skill02_con3 {display: block;}
.skill02_con3 .left {width: 100%;}
.skill02_con3 .right {width: 100%; margin-top: 1em;}

.carbon_wrap3 {display: block; overflow: hidden;}
.carbon_wrap3 .in_box.w1,
.carbon_wrap3 .in_box.w2 {width: 87%;}

.reverse-lay .list > li > dl {flex-wrap: wrap;}
.reverse-lay .list > li > dl > .txt-area {padding: 2em;}
.reverse-lay .list > li > dl > dd {flex: 1 1 100%;}

.skill01_con1 .con1_list {flex-wrap: wrap;}
.skill01_con1 .con1_list .list {width: calc(50% - 1em);}

.inner_t {display: block;}
.group .td.w1 {margin: 0 auto;}
.plus {margin: 1em auto;}

.vision_list .list_wrap .list_con {border-radius: 1em; margin-bottom: 1em;}
.vision_list .list_wrap .list_con.w1 {display: block; padding: 1em;}

.vision_list .list_wrap .list_con.w1 .circle_wrap {margin-bottom: 1em;}

.con_box .inn .con .con_img {display: block;}

.visualSlide_wrap .slogan .tLogo {height: 3.5em;}


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

#header .all_wrap .all_layer .all_inner > .wrap_in {padding: 14vh 2em 4em;}

.story-info .story-sec .sec-bg .bg-txt {padding: 4em 2em;}
.story-list-wrap .list > li {gap: 5em;}
.story-list-wrap .list > li .txt-area .dot { right: -2.5em;}

.membersN > li .wrap_in {display: block;}
.membersN > li .wrap_in .img_wrap {width: 100%; margin-left: unset;}
.membersN > li .wrap_in .con_wrap {width: 100%; padding: 0;}
.resize.ceo {padding-bottom: 42%;}

.div-container { width:100%; overflow:auto; /*white-space:no-wrap;*/}
.div-container .divCon1 {display: block; width: 780px;}
.div-container .divCon1 .table_st .fixL { position: unset;}

.skill01_con4 .con4_list li .con_datail {display: block;}
.skill01_con4 .con4_list li .con_datail .left {width: calc(100% - 1em);}
.skill01_con4 .con4_list li .con_datail .right {width: calc(100% - 1em); margin-top: 1em;}

.page-tt.s14 {font-size: 1.05em;}
.page-tt.s8 {font-size: 1em;}

.philosophy-wrap {margin-top: 12em;}
.philoCircle {top: 0; transform: translate(-50%, -77%);}
.philoCircle .circleIn::after {display: none;}
.philosophy-list {gap: 1em 0;}
.philosophy-list > li {flex: 0 1 calc(100% - 1.5em);}
.philosophy-list > li .circle-in {width: 100%; margin-left: unset;}
.philosophy-list > li:nth-child(2n + 1) .circle-in {flex-direction: unset; text-align: left; margin-left: 0%; margin-right: unset;}
.philosophy-list > li:nth-child(4) .circle-in {margin-left: unset;}
.philosophy-list > li:nth-child(6) .circle-in {margin-left: unset;}

.table_form .wrap_in .tit_wrap {width: 13em;}

/* project */
.projectList > li{ width: calc((100% - 1.5em) / 2)}

/* pulication */
.bookList > li .book{ gap:2em;}
.bookList > li .book .img_wrap{ width: 20%;}
.bookList > li .book .cont_wrap{ flex:1; flex-wrap: wrap; gap: 1em;}
.bookList > li .book .cont_wrap .txt{ flex: 0 0 100%}
.bookList > li .book .cont_wrap .link_btn{margin-left: auto;}

/* about stop */
.conLay .inner{ gap: 2em;}
.conLay .txt_wrap{ }
.conLay.layL .txt_wrap,
.conLay.layR .txt_wrap{ padding : 0;}
.conLay .img_wrap{ width: 100%;}
.conLay .img_wrap .img{ padding-bottom: 15em;}
.conLay.layR .img_wrap{ order:1;}

}

@media screen and (max-width:600px){
.mainTop2 .wrapIn .topCon2{ flex-wrap: wrap;}
.mainTop2 .wrapIn .topCon2 .wrap2{width: 100%;}
.mainTop2 .wrapIn .topCon2 .wrap1{width: 100%;}
.mainTop2 .wrapIn .topCon2 .support{ gap: 1em;}

}

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

.visualSlide_wrap .visual_bottom .control { width:60%;}

.investor_bot {display: block;}
.investor_bot li {width: 100%;}
.investor_bot li .img {text-align: center;}
.skill02_con2 .right .detail_bx .page-tt.s11 {text-align: left;}
.investor_bot li.arrow {margin: 0 auto 2em;}
.investor_bot li.arrow p {padding-bottom: unset;}

.esg-cont .vision-wrap .vision-list > li {display: block; border-radius: 1em;}
.esg-cont .vision-wrap .vision-list > li .icon-wrap {margin: 0 auto;}
.esg-cont .vision-wrap .vision-list > li .txt-wrap {width: 95%; margin: 1em auto 0;}
.esg-cont .vision-wrap .vision-list > li .txt-wrap .tit {text-align: center; font-size: 1em;}

.img_boxWrap .img_boxlist > li {flex: 1 1 41.3%; max-width: 41.3%;}

.skill02_con1 .con1_list li {display: block; text-align: center; border-radius: 1em;}
.skill02_con1 .con1_list li .icon_wrap {margin: 0 auto 1em;}

.legal_sys .sysT::after {width: 50%;}
.sub_tt.tit {font-size: 1.25em;}
.sub_tt.tit2 {font-size: 1.25em;}

.group .tt {font-size: 1em;}

.con_section {margin: 15em auto;}

.page_tit > .t9 {font-size: 2.25em;}
.page_tit > .t6 {font-size: 1.8em;}
.con_box .inn .t1 {font-size: 1.125em;}

.map-Con .list > li {flex: unset; width: 48%;}

.vision_list .list_wrap .list_con {display: block;}
.vision_list .list_wrap .list_con .t3 {width: 90%; margin: 1em auto 0;}
.patent_flex {display: block; text-align: center;}
.patent_flex .patent {width: 100%;}
.patent_flex .tit_box {width: 100%; margin-top: 1em;}

.carbon_wrap3 .legal_sys .sysT {width: 100%;}
.carbon_wrap3 .legal_sys .sysB .in {display: block;}
.carbon_wrap3 .group.w4 {width: 100%; margin-bottom: 1em;}
.carbon_wrap3 .group:before {display: none;}

.table_form .wrap_in .tit_wrap {width: 11em;}
.table_form .wrap_in .tit1 {font-size: 1em;}

#contents .sub_visual .sub_tab .gnb .dp2 > li {flex: 1 1 25%; max-width: 25%;}

/* project */
.projectList > li{width: 100%;}

/* pulication */
.bookList > li .book{ gap: 1em;}
.bookList > li .book .img_wrap{ width: 25%;}
.bookList > li .book .cont_wrap{ flex:0 0 100%;}


}

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

.ps3 {margin-top: 2em !important;}

.main_cont .wrap_box.w2 {width: calc(100% - 0.5em); margin-bottom: 1em;}

.board_viewT.news .vTit { font-size:1.8em;}
.board_viewF { display:block;}
.board_viewF .wrap_tit { margin-bottom:1em;}

.story-info {padding: 0;}
.story-info .story-sec .sec-bg .bg-txt {padding: 2em;}
.story-info .story-sec .sec-bg .bg-txt .year {font-size: 1.5rem;}
.story-info .story-sec .sec-bg .bg-txt .txt {font-size: 1em;margin-top: 0.75rem;}
.story-list-wrap .list > li {flex-wrap: wrap;gap: 1.5em;margin-bottom: 4em;}
.story-list-wrap .list > li .txt-area {text-align: left;padding-left: 4em;}
.story-list-wrap .list > li .txt-area,
.story-list-wrap .list > li .img-area {flex: 1 1 100%;}
.story-list-wrap .list > li .txt-area .content {font-size: 0.875rem;}
.story-list-wrap .list > li .txt-area .dot { right: auto;left: 0;top: 0.75em;width: 6px;height: 6px;}
.story-list-wrap .list > li .img-area {padding-left: 4em;}
.story-list-wrap .list > li .img-area .imgfix {height: 45vw;}
.story-sec .line {left: 2em;}

.skill01_con3 .con3_list {display: block;}
.skill01_con3 .con3_list li {width: calc(100% - 1em); margin-bottom: 2em;}
.skill01_con3 .con3_list li:last-child {margin-bottom: unset;}
.skill01_con3 .con3_list li .img .page-tt {font-size: 1.125em;}

.skill01_con4 .con_top {display: block;}
.skill01_con4 .con_top .left {width: calc(100% - 0em);}
.skill01_con4 .con_top .right {width: calc(100% - 0em); margin-top: 1em;}

.skill01_con1 {padding: 3em 1em;}

.vision_list .list_wrap .list_con .t4 {font-size: 0.9em;} 
.skill01_con1 .con1_list .list {width: calc(100% - 1em);}

.sub_tt.tit2 {font-size: 1.25em;}
.group .td {font-size: 1.125em;}

.skill02_con2 .right {width: 85%;}

.sub_tt.tit {font-size: 1.05em;}

.reverse-lay .list > li > dl > .img-area {height: 18rem;}
.page-tt.s6 {font-size: 1.5em;}

.carbon_wrap3 .in_box.w1,
.carbon_wrap3 .in_box.w2 {width: 82%;}

.page_con {padding: 4em 0;}

.main_about .wrapIn .t1 {font-size: 2em;}
.visualSlide_wrap .slogan .tLogo {height: 3em;}
.vision_list .list_wrap .list_con.w1 {width: calc(96% - 1em);}

.skill01_con2 .con2_list2 {display: block;}
.skill01_con2 .con2_list2 li {width: 100%;}

.invest_con1 .list .con_box .sec .inn {flex-wrap: wrap;}
.skill01_con1 .con_img .left {width: 90%;}

.con_box .inn .con .t1 {font-size: 1.25em;}
.vision_list .list_wrap .list_con {width: calc(96% - 1em);}

.table_form .wrap_in {display: block;}
.table_form .wrap_in .tit_wrap {width: 100%; padding: 0;}
}

@media screen and (max-width:450px){
  .table_form .wrap_in .con_wrap .w2 {width: 7.4em;}
}

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

.form_lab .lab_con .grow {min-width: 18em;}

#footer .menu { display:block;}
#footer .menu .point { margin-bottom:.5em; text-align:center;}

.img_boxWrap .img_boxlist > li {flex: 1 1 56%; max-width: 56%;}

}

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


#contents .sub_visual .wrap_con .slogan_wrap .slogan .t1 { font-size: 2.8em;}
#contents .sub_visual .wrap_con .slogan_wrap .slogan .t2 { font-size:1.2em;}

.reverse-lay .list > li > dl > .img-area {height: 15rem;}
.reverse-lay .list > li > dl > .txt-area {padding: 2em 1em;}

.page-tt.s6 {font-size: 1.4em;}
.label_st span {font-size: 0.96em;}

}

@media all and (orientation:landscape){

}