@charset "utf-8"; /** /* 서브 페이지 location으로 인해 +50 추가됨 */ #container.subContainer #content{/*padding-top: 169px;*/} /* common */ .subContainer #content h3 > small{ position: static;top: 0;left: 0;display: block;width: 100%;height: 100%;font-weight: 600;font-size: 13px;color: #fff;line-height: 13px;text-align: center;border-radius: 0;background:none; } /* / .common */ /* 스크롤 내릴 경우 gnb 축소 */ #container.subContainer #header.height .headerWrap:after {display:none;} .subContainer #header.height, .subContainer #header.height .gnbBox .menuArea { height:59px; transition: height .3s; } .subContainer #header.height .headerWrap > .innerBox {transition: height .3s;} .subContainer #container.on #header.height .headerWrap {height:582px;} .subContainer #header.height .gnbBox .menuArea h1 { margin-top:11px; width:180px;height:44px; } .subContainer #header.height .gnbBox .menuArea h1 a { width:136px;height:30px; } .subContainer #header.height .gnbBox .menuArea > ul { padding-top:13px; } .subContainer #header.height .gnbBox .menuArea > ul li > .gnbSubMenu, .subContainer #header.height .headerWrap > .innerBox .locationWrap { top:59px; transition: height .3s;} #container.subContainer #header.height .headerWrap .subMenuArea {top:1px;} .subContainer #header.height .gnbBox .menuArea > ul > li:hover > h2 > a {padding-bottom:14px;} .subContainer #header .headerWrap { position: relative; width: 100%; border-bottom: none; } .subContainer #header .headerWrap > .innerBox { margin: 0 auto; width: 1200px; transition: height .3s; } .subContainer #header .globalBox.hide { display: none; } .subContainer #header .globalBox { padding: 16px 0 0 0; display: block; height: 44px; } .subContainer .gnbBox .menuArea > ul > li > h2 > small.hide { display:none; } .subContainer .gnbBox .menuArea > ul > li > h2 > small { display:block; } /* / .스크롤 내릴 경우 gnb 축소 */ /* locationWrap */ .locationWrap { position: fixed;top:119px;right:0;left:0;width:100%;height: 50px; background:#fff;} .locationWrap:before { position: absolute;top:0;left:0;width:100%;height:0; border-top: solid 1px #ebebeb; content:''; } .subContainer.on .locationWrap:after { display:none; } .locationWrap:after { position: absolute;bottom: 0;left:0;width:100%;height:0px; border-bottom: solid 1px #ebebeb; content:''; } .locationWrap .innerBox { margin:0 auto; width: 1200px; } .locationWrap .innerBox .locationInnerBox {position: relative; float:left; height: 100%; } .locationWrap .innerBox .locationInnerBox:before { position: absolute;top:0;left:0;width:1px;height:50px; border-left: solid 1px #ebebeb; content:''; } .locationWrap .innerBox .locationInnerBox > ul { height: 50px; } .locationWrap .innerBox .locationInnerBox > ul > li { position: relative; float:left; width:210px; height: 100%;border-right:solid 1px #ebebeb; cursor: pointer; } .locationWrap .innerBox .locationInnerBox > ul > li:last-child a { color: #2081ed; } .locationWrap .innerBox .locationInnerBox > ul > li > h2 > a { padding: 0 14px; display: block; width:100%;height:100%; font-weight: 400; font-size: 15px; color:#626262; line-height: 50px; background: url('../images/bg/bg_locationCloseDown.gif') no-repeat 187px center; } .locationWrap .innerBox .locationInnerBox > ul > li > h2 > a:hover { color: #2081ed; } .locationWrap .innerBox .locationInnerBox > ul > li.on > h2 > a { background-image: url('../images/bg/bg_locationCloseUp.gif'); } .locationWrap .innerBox .locationInnerBox > ul > li:first-child { width:48px; } .locationWrap .innerBox .locationInnerBox > ul > li:first-child > h2 { width: 100%; height: 100%; } .locationWrap .innerBox .locationInnerBox > ul > li:first-child > h2 > a { position: relative; padding:0; text-align: center; } .locationWrap .innerBox .locationInnerBox > ul > li:first-child > h2 > a img { position: absolute; top:50%; left: 50%; margin:-10px 0 0 -9px; display:block; width: 20px; height: 18px; } .locationWrap .innerBox .locationInnerBox > ul > li > .menuList { display:none; position: absolute; top: 50px; left: 0; z-index: 1; width: 100%; height: auto; border: solid 1px #ebebeb; border-top: none; background: #fff;} .locationWrap .innerBox .locationInnerBox > ul > li.on > .menuList { display: block; } .locationWrap .innerBox .locationInnerBox > ul > li.on > .menuList > ul {padding:10px 0; } .locationWrap .innerBox .locationInnerBox > ul > li.on > .menuList > ul > li { width: 100%; } .locationWrap .innerBox .locationInnerBox > ul > li.on > .menuList ul > li > h2 > a {padding:0 14px; display: block; width:100%; height: 100%; font-weight: 400; color: #626262; font-size:15px; line-height: 32px; background: none;} .locationWrap .innerBox .locationInnerBox > ul > li.on > .menuList ul > li > h2 > a:hover { color: #2081ed; } /* / .locationWrap selectbox */ .directMenuInnerBox { float:right; border-right: solid 1px #ebebeb; } .directMenuInnerBox ul { overflow: hidden; } .directMenuInnerBox ul li { margin:0 20px 0 0 ; float:left; } .directMenuInnerBox ul li:hover { margin:0 20px 0 0 ; } .directMenuInnerBox ul li:hover a { border-bottom: solid 1px #1f397a; } .directMenuInnerBox ul li a { font-weight: 500; font-size: 14px; line-height: 50px; color:#303030; } .directMenuInnerBox ul li:hover a:hover, .directMenuInnerBox ul li a:hover { color:#1f397a; } /* 경영목표 */ .businessMission01 { height: 928px; background: url('../images/bg/bg_businessMission01.png') no-repeat center center; } .businessMission01 .innerBox { margin:0 auto; padding:41px 0; width: 1200px; height: 100%; } .businessMission01 .innerBox h3 { position:relative; font-weight: 600;font-size: 40px;line-height: 74px; color:#fff; text-align: center; } .businessMission01 .innerBox h3:after { position: absolute;bottom:0; left:50%; margin-left:-21px; width:42px; height: 1px; background:#717171; content:''; } .subContainer #content .businessMission01 h3 > small { height: 42px; } .businessMission01 .listBoxWrap { margin:80px 0 0 0; overflow:hidden; } .businessMission01 .txtList { margin: 0 0 114px 0; float:left; width: 33.3%;} .businessMission01 .txtList h4 { padding-top:79px; height: 106px; font-weight: 500; font-size: 22px; color:#fff; line-height: 26px; text-align: center; background: url('../images/bg/bg_businessList01.png') no-repeat center top; } .businessMission01 .innerBox .txtList:first-child h4 { padding-top:56px; font-weight: 200;font-size: 35px;color: #ebebeb; line-height: 50px; text-align: left; background: none;} .businessMission01 .innerBox .txtList:nth-child(3) h4 { background-image: url('../images/bg/bg_businessList02.png'); } .businessMission01 .innerBox .txtList:nth-child(4) h4 { background-image: url('../images/bg/bg_businessList03.png'); } .businessMission01 .innerBox .txtList:nth-child(5) h4 { background-image: url('../images/bg/bg_businessList04.png'); } .businessMission01 .innerBox .txtList:nth-child(6) h4 { background-image: url('../images/bg/bg_businessList05.png'); } .businessMission01 .txtList .txt { margin-top:18px; font-weight: 400;/*한단계 내림*/ color:#9a9a9a; font-size:15px; line-height: 26px; text-align: center; } .businessMission02 .innerBox { margin:0 auto; padding:100px 0; width: 1200px; } .businessMission02 .innerBox > h4 { font-weight: 200; font-size:40px; color:#181818; text-align: left; line-height: 50px; } .businessMission02 .innerBox .listBoxWrap{ padding-top:65px; text-align: center;} .businessMission02 .innerBox .listBoxWrap .txtList { position: relative; float:left; width: 341px; height:340px; vertical-align: middle; background: url('../images/bg/bg_businessMission02.png') no-repeat left top;} .businessMission02 .innerBox .listBoxWrap .txtList .innerList { height:170px; } .businessMission02 .innerBox .listBoxWrap .txtList .innerList h4 { padding:49px 10px 0 0; font-weight: 600; font-size:20px; color:#fff; text-align: center; line-height: 22px; } .businessMission02 .innerBox .listBoxWrap .txtList .innerList .txt { padding:6px 10px 0 0; font-weight: 400; font-size:15px; color:#fff; text-align: center; line-height: 20px; letter-spacing: -.5px; } .businessMission02 .innerBox .listBoxWrap .txtList .bottomBox { margin-top:-38px; overflow: hidden; } .businessMission02 .innerBox .listBoxWrap .txtList .bottomBox .innerList { margin-left: 15px; float:left; width:50%; } .businessMission02 .innerBox .listBoxWrap .txtList .bottomBox .innerList:last-child {margin-left: -30px;} .businessMission02 .innerBox .listBoxWrap .txtList .bottomBox .innerList h4 { padding:51px 0 0 0;} .businessMission02 .innerBox .listBoxWrap .txtList .bottomBox .innerList .txt { padding:6px 0 0 0; } .businessMission02 .innerBox .listBoxWrap .txtList .innerList:nth-child(3) { top:185px;left:205px;} .businessMission02 .innerBox .listBoxWrap .txtList:nth-child(2) { margin:0 87px 0 90px; background: url('../images/bg/bg_businessMission03.png') no-repeat center top; } .businessMission02 .innerBox .listBoxWrap .txtList:nth-child(2) .bottomBox .innerList h4 { padding:46px 0 0 0;} .businessMission02 .innerBox .listBoxWrap .txtList:nth-child(3) { background: url('../images/bg/bg_businessMission04.png') no-repeat right top } .businessMission02 .innerBox .listBoxWrap .txtList:nth-child(2) .bottomBox .innerList:last-child h4 { padding:49px 0 0 0;} .businessMission02 .innerBox .listBoxWrap .txtList:last-child .bottomBox .innerList:last-child h4 { padding:21px 0 0 0; } .amDim {display: none;position: absolute;width: 100%;background-color: rgba(0,0,0,.5);right: 0;top: 0;z-index: 98;} .main #container {margin-top: 0;} #total {position: fixed;left: 0;width: 100%;top: 0;z-index: 999999;transition:top .6s ease-in-out;-webkit-transition:top .6s ease-in-out;box-sizing:border-box} #total.load {top: 0;} #total .gnbWrap {position: relative;text-align: center;} #total h1 {z-index: 97;position: absolute;width: 240px;height: 63px;left: 60px;top: 18.5px;background-image: url(../images/main/logo.png);background-repeat: no-repeat;-webkit-background-size: cover; background-size: cover;text-indent: -9999px;} #total h1 a{display: block;height: 100%;} #total #gnb {font-size: 0;text-align: center;display: inline-block;vertical-align: top;} #total #gnb > li{display: block;text-align: center;float: left;} #total #gnb > li > a{display: block;line-height: 100px;color: #fff;padding: 0 27.5px;font-size: 18px;font-weight: 500;} #total #gnb > li > a > span {display: block;position: relative;} #total #gnb > li > a > span:after {display: none;bottom: 0;left: 0;content:'';width: 100%;height: 2px;position: absolute;background-color: #8dc63f;transform:scale(0);-webkit-transform:scale(0);transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;} #total #gnb > li.on > a > span:after {transform:scale(1);-webkit-transform:scale(1);} #total #gnb > li:hover > a > span:after {transform:scale(1);-webkit-transform:scale(1);} #total #gnb > li .depth2 {font-size: 0;display: none;padding: 10px 0;box-sizing:border-box;width: 100%;text-align: center} #total #gnb:hover > li .depth2 {display: block;} #total #gnb > li .depth2:after {clear: both;content:'';display: block;} #total #gnb > li .depth2 > li {text-align: center;display: block;} #total #gnb > li .depth2 > li > a{display: block;font-size: 15px;line-height: 38px;font-weight: 500;color: #fff;} #total #gnb > li .depth3 {padding-left:14px;} #total #gnb > li .depth3 > li > a{position: relative;font-size: 14px;padding-left: 10px;display: block;line-height: 30px;color: #fff;font-weight: 400;} #total #gnb > li .depth3 > li > a:before{content:'-';position: absolute;left: 0;top: 0;} #total #gnb > li .depth3 > li > a:hover {color: #8dc63f;} #total #gnb > li:hover .depth2 > li:hover > a{font-weight: 400;color: #8dc63f;} #total .btn_all_menu {z-index: 100;position: absolute;width: 100px;height: 100px;top: 0;right: 27px;} #total .btn_all_menu div {position: absolute;width: 33px;height: 25px;left: 50%;top: 50%;margin-left: -16.5px;margin-top: -12.5px;} #total .btn_all_menu span{position: absolute;right: 0;height: 3px;background-color: #000; transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;width: 100%;border-radius: 2px; } #total .btn_all_menu span.barTop{top: 0;} #total .btn_all_menu span.barMid{top: 11px;width: 70%;} #total .btn_all_menu span.barBot{top: 22px;} #total .btn_all_menu.on .barTop{width: 100%;transform:rotate(45deg);-webkit-transform:rotate(45deg);top:12px;} #total .btn_all_menu.on .barBot{width: 100%;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);top:12px;} #total .btn_all_menu.on .barMid {width: 0;} #total .gnbBtn {position: absolute;width: 100px;height: 100px;right: 0;top: 0;z-index: 999;} #total .gnbBtn .gtContact {position: absolute;width: 50%;left: 0;height: 100%;background-image: url(../images/main/icon_contact.png);background-repeat: no-repeat;background-position: center center;text-indent: -9999px;background-color: #367c2b;} #total .lang {position: absolute;width: 50%;height: 100%;right: 0;top: 0;} #total .lang a{display: block;} #total .lang a span{position: relative;display: block;line-height: 100px;font-family: 'Noto Sans Condensed';font-size: 12px;font-weight: bold;color: #fff;text-align: center;} .sub #total .lang a span {color: #000;} #total.fff .lang a span {color: #000;} #total.fff .lang > a span em {background-image: url(../images/main/lang_arrow.png);} #total .lang > a span em{display: block;position: absolute;left: 50%;bottom: 30%;margin-left: -3.5px;width: 7px;height: 5px;background-repeat: no-repeat;background-image: url(../images/main/lang_arrow_w.png);transition:transform .2s ease-in-out; -webkit-transition:transform .2s ease-in-out;} .sub #total .lang > a span em {background-image: url(../images/main/lang_arrow.png);} #total .lang > a.on span em {transform:rotate(180deg);-webkit-transform:rotate(180deg);} #total .lang ul{height: 0;overflow: hidden; transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out; } #total .lang > a.on + ul {height: auto;} #total.active {background-color: #fff;border-bottom: 1px solid #eaeaea;box-shadow:0 0 14px rgba(0,0,0,.4)} #total.active:after {content:'';position: absolute;width: 100%;height: 1px;background-color: #eaeaea;top: 100px;z-index: -1;} .sub #total:after {content:'';position: absolute;width: 100%;height: 1px;background-color: #eaeaea;top: 100px;z-index: -1;} #total.active h1 {background-image: url(../images/main/logo_c.png);} #total.ov {background-color: #fff;border-bottom: 1px solid #eaeaea;box-shadow:0 0 14px rgba(0,0,0,.4)} #total.ov:after {content:'';position: absolute;width: 100%;height: 1px;background-color: #eaeaea;top: 100px;z-index: -1;} #total.ov h1 {background-image: url(../images/main/logo_c.png);} #total.active #gnb > li > a{color: #000;} #total.active #gnb > li .depth2 > li > a {color: #7a7a7a;} #total.active #gnb > li .depth2 > li > a:hover {color: #e89224;font-weight: 700;} #total.active #gnb > li:hover > a{} #total.active .btn_all_menu span {background-color: #000;} #total.fff .btn_all_menu span {background-color: #000;} #total.ov #gnb > li > a{color: #000;} #total.ov #gnb > li .depth2 > li > a {color: #7a7a7a;} #total.ov #gnb > li .depth2 > li > a:hover {color: #e89224;font-weight: 700;} #total.ov #gnb > li:hover > a{} #total.ov .btn_all_menu span {background-color: #000;} #total.active .lang {border-color: #000;} #total.active .lang a span {color: #000;} #total.active .lang > a span em {background-image: url(../images/main/lang_arrow_c.png);} #total.active.fff .lang {border-color: #fff;} #total.active.fff .lang a span {color: #fff;} #total.active.fff .lang > a span em {background-image: url(../images/main/lang_arrow.png);} #total .lang ul li a span {line-height: 30px;} .sub #total .lang ul {background-color: #fff;} .allMenuWrap {z-index: 99;position: absolute;width: 70%;right: -100%;top: 0;box-sizing:border-box;background-color: #fff;transition:right .4s ease-in-out;-webkit-transition:right .4s ease-in-out;} .allMenuWrap.active {right: 0;} .allMenuWrap .allMenuWrap_inner {display: table;table-layout: fixed;height: 100%;width: 100%;} .allMenuWrap .allMenu_inner{display: table-cell;vertical-align: middle;height: 100%;padding: 0 4% 0 8%;overflow-y: auto;} .allMenu{} .allMenu {font-size: 0;text-align: center;} .allMenu > li {position: relative;vertical-align: top;color: #333;box-sizing:border-box;text-align: left;padding-left: 250px;margin-bottom: 60px;} .allMenu > li:last-child {margin-bottom: 0;} .allMenu > li:last-child {margin-right: 0;} .allMenu > li > p {display: none;font-size: 36px;line-height: 38px;font-weight: bold;} .allMenu > li > a {font-size: 40px;line-height: 49px;font-weight: 500;position: relative;left: 0;top: 0;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;} .allMenu > li > a:after {left: 0;content:'';position: absolute;width: 0;bottom: -6px;height: 2px;background-color: #e89224;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;} .allMenu > li:hover > a {color: #e89224;} .allMenu > li:hover > a:after {width: 100%;} .allMenu > li > a span {position: absolute;font-size: 14px;line-height: 14px;font-weight: bold;color: #8dc63f;left: 0;top: 0;} .allMenu .dep2 {} .allMenu .dep2 > li {display: inline-block;margin-right: 40px;} .allMenu .dep2 > li > a{font-size: 18px;line-height: 49px;color: #555;} .allMenu .dep2 > li > a:hover {color: #333;font-weight: 500;} .allMenu .dep3 {margin-top: 4px;} .allMenu .dep3 > li > a{font-size: 16px;line-height: 30px;font-weight: 300;color: #646464;} .allMenu .dep3 > li > a:before{content:'-';margin-right: 4px;} .allMenu > li a{color: #333;display: inline-block;vertical-align: top;}