@charset "utf-8";
/* *******************************************************
 * filename : layout_responsive.css
 * description : 전체 레이아웃 responsive CSS
 * date : 2019-01-03
******************************************************** */


/* ****************** 공통클래스 ********************** */
@media all and (max-width:1620px){
	.area-box{padding:30px 15px;}
}
@media all and (max-width:1220px){
	.area-wid, .area{padding:100px 50px;}
	.section {
		align-items: center;
		justify-content: center;
	}
	@media all and (max-width:800px) {
		html {
			font-size: 18px
		}

		.area-box {
			padding: 50px 15px;
		}

		.area-wid {
			padding: 20px;
		}

		.area {
			padding: 0;
		}
	}
}
@media all and (max-width:480px){
	html{font-size:13px}
    #contentInfoCon .content-tit, #fullpage .section .content-tit{font-size: 25px;}
    .serviceContent{padding-top: 100px;}
}
/* ****************** HEADER ********************** */
@media all and (max-width:1620px){
	/* -------- Header :: UTIL BOX -------- */
	/* Header :: 유저메뉴 */
	.user-menu-box li{margin-left:8px;}
	.user-menu-box li a span{display:none;}
	/* Header :: 언어선택 */
	.header-lang{margin-left:15px}

	#gnb > ul > li > a {
		padding: 0 35px;
		font-size: 20px;
	}
	#gnb > ul{
		margin-right:-70px;
	}
	/* -------- Header :: GNB(PC) -------- */
}
@media all and ( max-width: 1440px ){
	/* -------- Header :: GNB(PC) -------- */
	#header .logo a{
		width:240px;
	}
	#gnb > ul {
		width: 65%;
		margin-right: -150px;
	}
}
@media all and ( max-width: 1220px ){

	.mb-hide {
		display: none;
	}

	.pc-hide {
		display: block;
	}

	header.headerBg { background-color:#fff; }
	header.fixed-header { z-index:7; }
	.content-header-bg { margin-top:100px; }

	.headerBg #headerInnerWrap > #headerInner .logo *[fill="white"] {
		fill:#062F87;
	}

	.headerBg #headerInnerWrap .header-lang a:hover{color:#00ae41;}

	.headerBg .header-lang a,
	.headerBg .header-lang i { color:#333; }

	.headerBg #headerInnerWrap .header-lang a, #headerInnerWrap.on .header-lang i {
		font-weight: 500;
	}

	.headerBg #headerInnerWrap .sitemap-line-btn .line {
		background-color: #333;
	}

	.headerBg #headerInnerWrap.on #gnb > ul > li > a,
	.headerBg #headerInnerWrap.on .header-lang .lang-open-btn {
		color: #333;
	}

	.headerBg #headerInnerWrap #gnb > ul > li > a, #header.headerBg #gnb > ul > li > a {
		font-weight: 600;
	}

	.headerBg #header #headerInnerWrap .logo a svg .st2, #header.headerBg #headerInnerWrap .logo a svg .st2{
		fill:#000000;
	}

	.headerBg .header-find>svg * { stroke:#333; fill:#333; }
	.headerBg .header-find>span { color:#333; }

	.headerBg #headerInnerWrap .nav-open-btn .line { background-color:#333; }
	.headerBg #headerInnerWrap .nav-open-btn.active .line { background-color:#fff; }
	
	#header.headerBg #headerInnerWrap{
		border-bottom: 1px solid #cfcfcf;
		background-color: #fff;
	}



	#header, #headerInnerWrap, #headerInner{height:70px;}
	#header .logo a {
		width: 150px;
		margin-top:5px;
	}
	#header .logo a>svg { 
		width:150px;
	}
	#header .logo{padding:10px;}
		#header .logo img { /*height:15px;*/
			width: 80%;
			margin-top: -5px;
		}

    .header-util-box{padding-right:30px;}
    .header-lang{margin-top:22px;margin-right:20px;}
    .header-lang a{font-size:15px;}
    .header-lang:hover{margin-right:25px;}
    .header-lang:after{display:none;}
	/* Header :: 사이트맵, 네비게이션 버튼 */
	/*
	.headerBg .nav-open-btn .line{background-color:#333;}
	*/
	.headerBg .nav-open-btn.active .line {
		background-color: #fff;
	}

	/* Header :: GNB(Mobile) */
	#gnbM #navigation{margin-top:55px}	/* Header 높이값 */
	#gnbM #navigation > li > a {font-size:20px; padding:18px;}
	#gnbM #navigation > li .gnb-2dep > li > a{font-size:16px; padding:10px 18px;}
	
	.subNav {
		position: fixed;
		top: 70px;
		margin: 0;
		padding: 0;
		padding-left: 10px;
		z-index:5;
	}
	.subNav.on{
		top:70px;
	}
	.subNavText{
		padding:20px 20px 20px 15px;
		font-size:18px;
	}
	.subNavWrap ul > li{font-size:18px;}
	#headerInnerWrap{position:absolute;}
	#header .logo{padding-left:15px;}
	/* -------- Header :: UTIL BOX -------- */

	/* Header :: 사이트맵 버튼 */
	.sitemap-line-btn, .sitemap-custom-btn{display:none;}

	/* -------- Header :: GNB(Pc) -------- */
	#gnb{display:none;}
	.gnb-overlay-bg{display:none}

	/* -------- Header :: GNB(Mobile) -------- */
	.gnb-overlay-bg-m{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:101;}
	#gnbM {
		display: block;
		overflow-y: auto;
		position: fixed;
		top: -100%;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: #00479d;
		z-index: 999;
		transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-webkit-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-oz-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-ms-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		visibility: hidden;
	}
	#gnbM:after{
		position:absolute;
		bottom:20px;
		left:calc(50% - 75px);
		width:150px;
		height:50px;
		display:block;
		content:'';
		background-image:url(../images/common/logo_w.png);
	}
	#gnbM.open{
		top:0;
		visibility:visible;
	}

	/* User Menu Mobile */
	.user-menu-mobile{overflow:hidden; padding:35px 25px; margin-right:70px}
	.user-menu-mobile li{float:left; width:48%; margin-right:2%;}
	.user-menu-mobile li a{display:block; text-align:center; height:50px; line-height:50px; color:#fff; font-size:20px; background-color:#000;}
	.user-menu-mobile li a i{margin:-2px 5px 0 0; font-size:20px;}
	#gnbM #navigation{margin-top:90px;}
	/* GNB Mobile :: 1차 */
	#gnbM #navigation > li{border-bottom:1px solid rgba(255,255,255,0.2);}
	#gnbM #navigation > li:first-child{border-top:1px solid rgba(255,255,255,0.2);}
	#gnbM #navigation > li > a {position:relative; display:block; padding:25px; color:#fff; font-size:20px;  }
	#gnbM #navigation > li.active > a{color:#fff;}
	#gnbM #navigation > li.has-2dep > a{}
	#gnbM #navigation > li.has-2dep.active > a{}
	#gnbM #navigation > li .gnb-icon{position:absolute; top:50%; right:10px; margin-top:-14px;}
	#gnbM #navigation > li .gnb-icon i{font-size:24px;}
	/* GNB Mobile :: 2차 */
		#gnbM #navigation > li .gnb-2dep {
			display: none;
			padding: 15px 0;
			background-color: #01377a;
		}
	#gnbM #navigation > li .gnb-2dep > li{}
	#gnbM #navigation > li .gnb-2dep > li > a{display:block; color:#fff; font-size:18px; padding:10px 25px; }
	#gnbM #navigation > li .gnb-2dep > li.on > a{}
	/* GNB Mobile :: 3차 */
	#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep{display:none; padding:10px 20px; background-color:#aaa; box-shadow:inset 0px 3px 9px rgba(0, 0, 0, .3);}
	#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:13px; color:#fff;}
	#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;}
	
	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
	.nav-open-btn {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 9998;
		width: 70px;
		height: 70px;
		transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-webkit-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-oz-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-ms-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		background-size: 200% 200%;
		-webkit-animation: Gradient 15s ease infinite;
		-moz-animation: Gradient 15s ease infinite;
		animation: Gradient 15s ease infinite;
	}
	.nav-open-btn.active{background:none;}
	.nav-open-btn .line{
		display:block; width:20px; height:2px; background-color:#fff; margin: 3px auto;
		-webkit-transition: all 0.3s ease-in-out;
	  -o-transition: all 0.3s ease-in-out;
	  transition: all 0.3s ease-in-out;
	}
	.nav-open-btn.active .line{background-color:#fff;}
	.nav-open-btn.active .line:nth-child(2), .nav-open-btn.active .line:nth-child(4){opacity: 0;}
	.nav-open-btn.active .line:nth-child(1){
		 -webkit-transform: translateY(5px) rotate(45deg);
		  -ms-transform: translateY(5px) rotate(45deg);
		  -o-transform: translateY(5px) rotate(45deg);
		  transform: translateY(5px) rotate(45deg);
	}
	.nav-open-btn.active .line:nth-child(3){
		 -webkit-transform: translateY(-5px) rotate(-45deg);
		  -ms-transform: translateY(-5px) rotate(-45deg);
		  -o-transform: translateY(-5px) rotate(-45deg);
		  transform: translateY(-5px) rotate(-45deg);
	}
}
@media all and ( max-width: 800px ){
    
    video#vid{
           /*display: none;*/
    }
	/* User Menu Mobile */
	.user-menu-mobile{overflow:hidden; padding:22px 19px; margin-right:30px}
	.user-menu-mobile li a{height:40px; line-height:40px; font-size:14px}
    #subMenuCon{height:auto;}
    #sideNavWrap.fixed, #sideNavWrap{height:45px;}
    #sideNavWrap .navList li, .midNav li{width:auto;padding: 0 15px;font-size: 14px;font-weight:500;height:45px;line-height:45px;}
    .midNav li a{padding:0;height:100%;font-size: 14px;}
/* 모바일 중간메뉴 */
    .mb-midNav{ height:45px;overflow: hidden;transition: all 0.3s;}
    .mb-midNav ul{position: relative;z-index: 3;}
    .mb-midNav ul:before{
        content: "";display: block;clear: both;width: 10px;height: 10px;
        background-image: url(../images/icon/lang_arrow_gray.png);background-position: center center;
        background-repeat: no-repeat;
        position: absolute;top: 17px;right: 0;
        transition: all 0.3s; transform: rotate(-90deg);
    }
    .mb-midNav ul.on:before{transform: rotate(90deg);}
    .mb-midNav.on{height: auto;}
    .mb-midNav li{float: none;}
    .mb-midNav li:before{display: none;}

	.content-header-bg { height:550px; }
	.content-header-text { left:5%; }
	.content-header-text>h2 { font-size:50px; }
}

@media all and ( max-width: 480px ){
	#header .logo a {
		width: 120px;
	}
	#header .logo a>svg { 
		width:120px;
		margin-top:-10px;
	}
	#header, #headerInnerWrap, #headerInner {
		height: 55px;
	}
	.subNav{
		top:55px;
	}
	.subNav.on{
		top:55px;
	}
	.subNavText {
		padding: 15px 20px 15px 15px;
		font-size: 14px;
	}
	.subNavWrap ul > li {
		font-size: 14px;
	}
	.header-lang{
		margin-top:15px;
		margin-right:5px;
	}
	.nav-open-btn {
		width: 55px;
		height: 55px;
	}
}

/* ****************** FOOTER ********************** */
@media all and (max-width:800px){
	#footer{padding:50px 0; text-align:center;}
	#footerTop{margin-bottom:15px;}
	/* Footer :: 푸터로고 */
	.foot-logo{float:none; display:block; padding-right:0; margin-bottom:15px;}
	/* Footer :: 푸터메뉴 */
	.foot-menu{float:none; display:inline-block;}
	.foot-menu li a{font-size:18px;}
	/* Footer :: 왼쪽정보 */
	.footer-left-con,.footer-right-con{float:none; }
	/* Footer :: 하단정보 */
	.family-address span{margin:0 7px;}
	.family-address p{font-size:16px; line-height:28px;}
	.copyright{font-size:14px;}
	/* Footer :: 오른쪽 */
	.footer-right-con{display:none;}
	.foot-logo-m{display:block; margin-bottom:35px;}
	.foot-logo-m img{height:35px}
}
@media all and (max-width:480px){
	#footer{padding:35px 0;}
	/* Footer :: 푸터로고 */
	.foot-logo img{height:14px;}
	/* Footer :: 푸터메뉴 */
    .foot-menu li{margin-left: 15px;}
	.foot-menu li a{font-size:12px;}
	/* Footer :: 하단정보 */
	.family-address p{font-size:12px; line-height:20px;}
	.family-address a{display:block;}
	.family-address .footer-caution-txt{font-size:11px; word-break:keep-all}
	.copyright{font-size:11px; padding-top:0}
	.foot-logo-m{margin-bottom:17px;}
	.foot-logo-m img{height:25px}
	
}

/* ****************** SUB LAYOUT ********************** */
@media all and ( min-width: 1920px ){
	/*  SUB LAYOUT :: 비주얼 */
	#visual .visual-img-con{background-size:cover !important;}
	
}
@media all and ( max-width: 1440px ){
	/*  SUB LAYOUT :: 비주얼 */
	#visual .visual-txt-con, .area > aside, .area > article, 
	#footerInner, ul.area, .area-wid {
		max-width: 1000px;
	}
	.visual-img-box {
		width: 350px;
		height: 350px;
		top: calc(50% - 145px);
		right: 145px;
	}
	.visual-img-con:after,
	.ceo-photo {
		width: 300px;
		height: 300px;
		margin: 0 auto;
	}
	#visual .visual-tit{
		font-size:45px;
	}
}
@media all and (max-width:1220px){
	#sideNavWrap, #contentInfoCon, #topMenu, ul.area{
		padding: 0;
	}
	#recruitList, #footerInner {
		padding: 20px;
	}
	#visual {
		height: 500px;
	}
	/*  SUB LAYOUT :: 비주얼 */
	#visual .visual-img-con{opacity:0.96;filter:Alpha(opacity=96);background-size:cover !important;}
	#visual .visual-txt-con{text-align:center;padding: 50px 0;}
	.visual-img-box span {
		background-image: url(../images/content/building_m.jpg);
	}
	.welfare-con .visual-img-box span {
		background-image: url(../images/content/recruit_m.jpg);
	}
	.news-con .visual-img-box span {
		background-image: url(../images/content/news_m.jpg);
	}
	.businessCon1 .visual-img-box span {
		background-image: url(../images/content/renew_m.jpg);
	}
	.businessCon2 .visual-img-box span {
		background-image: url(../images/content/smartgrid_m.jpg);
	}
	.businessCon3 .visual-img-box span {
		background-image: url(../images/content/engineering_m.jpg);
	}
	.businessCon4 .visual-img-box span {
		background-image: url(../images/content/high_m.jpg);
	}
	.rndCon .visual-img-box span {
		background-image: url(../images/content/r&d_m.jpg);
	}
	.InvestCon .visual-img-box span {
		background-image: url(../images/content/invest_m.jpg);
	}
	/*  SUB LAYOUT :: 서브메뉴(스타일2) */
	#topMenu .sub-link-btn{display:none;}
	/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
    .content, .content-en {padding: 30px 0;}
	.content.org-sec{padding:0;}
	#visual .visual-txt-con {
		display: block;
		position: absolute;
		bottom: 0;
		left: 3%;
		height: auto;
		text-align: left;
	}
	.visual-img-box {
		width: 100%;
		height: 500px;
		top: 0;
		right: 0;
		border-radius: 0;
	}
	.visual-img-box span{
		background-size:100%;
	}
	.visual-img-box span:after {
		content: '';
		clear: both;
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.4);
	}
	#visual .visual-tit {
		font-size: 35px;
		margin: 0;
		color: #fff;
	}

	#visual .visual-sub-txt {
		margin-top: 15px;
		font-size: 16px;
		color: #fff;
	}
	.visual-img-con:after {
		width: 150px;
		height: 150px;
		top: 80px;
		left: 30px;
	}
	#contentInfoCon {
		margin: 0 auto;
		padding: 50px 0px 10px 0px;
	}
	.serviceContent #contentInfoCon {
		padding-left: 20px;
	}
}

@media all and (max-width:800px){
	/*  SUB LAYOUT :: 비주얼 */
	#visual, .visual-img-box{height:400px;}
	#visual .visual-sub-txt br {
		display: block;
	}
	/*  SUB LAYOUT :: 이전페이지,다음페이지 버튼 */
	.sub-page-controls-btn .sub-page-name{
		display:none
	}
	#subMenuCon{
		display:none;
	}
	/*  SUB LAYOUT :: 서브메뉴(스타일2) */
	#subMenuCon:before{bottom:-1px;}

	/*  SUB LAYOUT :: 상단정보 (공통) */
	#contentInfoCon .content-tit{font-size:35px}
	#visual .visual-tit{
		font-size:30px;
	}
	#visual .visual-sub-txt{letter-spacing:-1px;opacity:1;font-weight:400;}
	.content-tit p, .content-info-style02 > p, .content-tit-txt {
		font-size: 16px;
	}
}
@media all and (max-width:480px){
	
	/*  SUB LAYOUT :: 비주얼 */
	.visual-img-box span {
		background-size: 190%;
	}
	/*  SUB LAYOUT :: 이전페이지,다음페이지 버튼 */
	.sub-page-controls-btn {
		width: 30px;
		height: 30px;
		line-height: 28px;
		margin-top: -15px;
	}
	/*  SUB LAYOUT :: 서브메뉴(스타일2) */
	#topMenu{height:40px; padding-left:40px;}
	#topMenu .location-to-home-btn{width:40px; height:40px; }
	#topMenu .location-to-home-btn i{font-size:18px; line-height:40px;}
	#topMenu .menu-location > .cur-location{height:40px; padding-left:10px;}
	#topMenu .menu-location > .cur-location span{line-height:40px; font-size:13px;}
	#topMenu .menu-location .location-menu-con{top:40px;}
	#topMenu .menu-location .location-menu-con li a{font-size:13px;}
	/*  SUB LAYOUT :: 상단정보 (공통) */
	#contentInfoCon .content-tit strong{font-size:25px;}
    .content-tit span{font-size:13px;}
    .popup .modal-title {
        font-size: 1rem;
    }
    .popup .card-text{
        font-size:0.9rem;
    }
}

/* ****************** MODAL LAYERPOPUP ********************** */
@media all and ( max-width: 800px ){
	/* modal layer content */
	.footer-modal-content h1{height:46px; line-height:46px; font-size:18px; text-align:left; padding:0 15px}
	.modal-close-btn i{font-size:24px}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}
	/* 사이트맵  */
	.sitemap-wrapper{padding:15px}
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 600px;
    }
}


/* 추가 */
@media (min-width: 1221px) {

	header { position:absolute; }

	#headerInnerWrap.on {
		height: 500px;
		background-color: #fff;
		border-bottom: 1px solid #e2e2e2;
	}

	#header #headerInnerWrap.on > #headerInner .logo *[fill="white"] {
		fill:#062F87;
	}

	#headerInnerWrap.on .header-lang a:hover{color:#00ae41;}

	.on .header-lang a,
	.on .header-lang i { color:#333; }

	#headerInnerWrap.on .header-lang a, #headerInnerWrap.on .header-lang i {
		font-weight: 500;
	}

	#headerInnerWrap.on .sitemap-line-btn .line {
		background-color: #333;
	}

	#headerInnerWrap.on #gnb > ul > li > a,
	#headerInnerWrap.on .header-lang .lang-open-btn {
		color: #333;
	}

	#headerInnerWrap.on #gnb > ul > li > a, #header.headerBg #gnb > ul > li > a {
		font-weight: 600;
	}

	#header #headerInnerWrap.on .logo a svg .st2, #header.headerBg #headerInnerWrap .logo a svg .st2{
		fill:#000000;
	}

	.on .header-find>svg * { stroke:#333; fill:#333; }
	.on .header-find>span { color:#333; }

	.content-header-bg { margin-bottom:100px; }
}