@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2020-11-25
******************************************************** */

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1560px ){
	.main-visual-txt-con .inner-box{max-width: none; margin: 0 130px 0 100px; width: calc(100% - 230px); padding: 0;}
	.main-scroll-icon .area-main{max-width: none; margin: 0 100px; padding: 0;}
	.main-visual-txt-con .txt-box{width: 75%;}
}
@media all and ( max-width: 1366px ){
	.main-visual-txt-con .inner-box{margin: 0 130px 0 30px; width: calc(100% - 160px);}
	.main-scroll-icon .area-main{margin: 0 30px;}
}
@media all and ( max-width: 1220px ){
	.main-visual-txt-con .txt-box{width: 85%;}
	/* 메인 비주얼 :: 로딩circle */
	.visual-circle-box{right:15px;}
	.main-visual-txt-con .txt-box .txt01 {font-size: 64px;}
}
@media all and ( max-width: 1024px ){
	.main-visual-txt-con .inner-box{margin: 0 15px; width: calc(100% - 30px);}
	.main-scroll-icon .area-main{margin: 0 15px;}
	.main-visual-txt-con .txt-box{width: 100%;}
	/* 메인 비주얼 :: 로딩circle */
	.visual-circle-box{visibility: hidden; opacity: 0;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con .txt-box .txt01 {font-size: 46px;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{margin-top: 80px;}
	.main-scroll-icon .scroll-bg:before{width: 60px; height: 60px;}
	.main-scroll-icon .scroll-bg .txt span{width: 80px; height: 10px; top: 10px; left: -10px; font-size: 9px;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1520px ){
	.main-tit-box .area-main {max-width: none; width: calc(100% - 140px); margin-left: 110px; padding-right: 30px; padding: 0;}
}
@media all and ( max-width: 1220px ){
	.main-tit-box .area-main {width: calc(100% - 60px); margin-left: 0; padding: 0 30px;}
	.main-tit-box .area-main:before{top: -21px; left: 22px; -webkit-transform: rotate(90deg); transform: rotate(90deg);}
	.main-tit-box .main-tit-num{top: -75px; left: 30px;}
	#mainAboutCon .main-tit-box .main-tit,
	#mainNewsCon .main-tit-box .main-tit,
	#mainGlobalCon .main-tit-box .main-tit{font-size: 60px;}
	.main-tit-box .main-tit{display: block; font-size: 72px;}
	.main-tit-box .main-sub-tit01{margin-top: 15px; font-size: 17px; margin-left: 0; display: block;}
	#mainNewsCon .main-tit-box .main-sub-tit01{margin-left: 0; display: block; margin-top: 15px;}
	.main-tit-box .main-sub-tit02{margin-top:25px; font-size: 32px;}
}
@media all and ( max-width: 1024px ){
	.main-tit-box .area-main {width: calc(100% - 30px); padding: 0 15px;}
	.main-tit-box .area-main:before{left: 12px;}
	.main-tit-box .main-tit-num{left: 20px;}
	.main-tit-box .pc-br {display: block;}
}
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .area-main:before{top: -16px; left: 15px; width: 25px;}
	.main-tit-box .main-tit-num{top: -55px; left: 15px; font-size: 16px;}
	.main-tit-box .main-tit{font-size:63px; letter-spacing: -0.75px;}
	#mainAboutCon .main-tit-box .main-tit,
	#mainNewsCon .main-tit-box .main-tit,
	#mainGlobalCon .main-tit-box .main-tit{font-size: 48px;}
	.main-tit-box .main-sub-tit01{margin-top: 5px; font-size:13px; letter-spacing: -0.6px;}
	#mainNewsCon .main-tit-box .main-sub-tit01{font-size: 13px; margin-top: 15px;}
	.main-tit-box .main-sub-tit02{margin-top:15px; font-size:24px;}
	.main-tit-box .pc-br {display: none;}
	.main-tit-box .main-tit img{margin-left: 15px; top: -6px; height: 44px;}
}
@media all and ( max-width: 480px ){
	.main-tit-box .main-tit img{display: block; margin-left: 0; top: -2px; margin-bottom: 5px;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(Business) -------- */
@media all and (max-width:1530px){
	.main-business-inner{max-width: 790px;}
	/* active */
	.swiper-slide-active.main-business-item{width: 960px !important;}
}
@media all and (max-width:1366px){
	.main-business-inner{max-width: 690px;}
	.main-business-item {width: 210px !important;}
	.main-business-img{padding-top: 400px;}
	.main-business-txt-inner{padding: 0 200px 0 65px;}
	/* active */
	.swiper-slide-active.main-business-item{width: 860px !important;}
	.swiper-slide-active.main-business-item .main-business-inner{padding-left: 65px;}
	/* 슬라이드 컨트롤 버튼 */
	.main-business-control{left: 690px;}
}
@media all and (max-width:1220px){
	.main-business-con .area-box{padding-left: 60px;}
	.main-business-item {width: 190px !important;}
	.main-business-inner{max-width: 590px;}
	.main-business-img{padding-top: 340px;}
	/* active */
	.swiper-slide-active.main-business-item{width: 760px !important;}
	/* 슬라이드 컨트롤 버튼 */
	.main-business-control{left: 590px;}
}
@media all and (max-width:1024px){
	.main-business-con{margin-top: 60px;}
	.main-business-con .area-box{padding: 0 10%;}
	.main-business-item {width: 100% !important;}
	.main-business-inner{padding-top: 0; max-width: none;}
	.main-business-img{padding-top: 60.75%;}
	.main-business-txt{position: static;}
	.main-business-txt-inner{padding: 0 200px 0 0;}
	/* active */
	.swiper-slide-active.main-business-item{width: 100% !important;}
	.swiper-slide-active.main-business-item .main-business-inner{padding-left: 0; padding-bottom: 0;}
	/* 슬라이드 컨트롤 버튼 */
	.main-business-control{left: auto; right: 0;}
	/* animate */
	.main-business-item:not(.swiper-slide-active) .main-business-inner,
	.main-business-item.swiper-slide-active .main-business-inner{transform: translateY(50px);}
	.main-business-con.aos-animate .main-business-item:not(.swiper-slide-active) .main-business-inner,
	.main-business-con.aos-animate .swiper-slide-active.main-business-item .main-business-inner{transform: translateY(0);}
}
@media all and (max-width:800px){
	#mainBusinessCon{padding: 115px 0 72px;}
	.clip-object01{display: none;}
	#mainBusinessCon .main-tit-box .pc-br {display: block;}
	.main-business-con{margin-top: 30px;}
	.main-business-img .name{left: 20px; right: 20px; bottom: 15px; font-size: 16px;}
	.main-business-txt{height: 100px;}
	.main-business-txt-inner{padding: 0; flex-direction: column; align-items:flex-start; justify-content: center;}
	.main-business-txt-inner .name{padding-right: 125px; margin-right: 0; font-size: 25px;}
	.main-business-txt-inner .category{margin-top: 3px; font-size: 15px;}
	/* 슬라이드 컨트롤 버튼 */
	.main-business-control{width: 50px; height: 50px; bottom: 80px;}
	.main-business-control button img{height: 4px;}
	/* animate */
	.main-business-control.aos-animate:before{top: 7px; right: -7px;}
	.main-business-control.aos-animate .main-business-prev{top: 14px; left: -40px;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(About UNID) -------- */
@media all and (max-width:1530px){
	.main-about-top .right {right: 30px;}
	.move-object02{left: -120px;}
}
@media all and (max-width:1366px){
	.main-about-top .right {transform: scale(0.9); transform-origin: right;}
}
@media all and ( max-width: 1220px ){
	.main-about-top .right {transform: scale(0.8); transform-origin: right;}
	.main-about-top .left li img {height: 120px;}
}
@media all and ( max-width: 1024px ){
	.main-about-wrapper {margin-top: 80px;}
	.main-about-top .right {position: relative; margin: 0 auto; bottom: auto; right: auto; transform: scale(1.0);}
	.main-about-top .left{margin-top: 60px;}
	.main-about-top .left li{text-align: left;}
	.main-about-top .left li + li{margin-left: 0; text-align: right;}
	.main-about-top .left li img{max-width: 95%; height: auto; display: inline-block;}

	.main-about-bottom{margin-top: 85px; padding-bottom: 195px;}
	.clip-object02{top: auto; bottom: 50px; left: 50%; margin-left: -960px; width: 1920px; height: 750px; clip:rect(0,0,750px,0);}
	.main-about-bottom .right{width: 100%; float: none; padding-left: 0; text-align: center;}
	.main-about-bottom .right .tit{display: inline-block; padding-left: 0;}
	.main-about-bottom .right .tit:before{margin-right: 10px; position: static; display: inline-block;}
}
@media all and ( max-width: 800px ){
	#mainAboutCon{padding-top: 75px}
	.move-object02{display: none;}
	.move-object03{display: block; position: absolute; width: 224px; right: 0; top: -50px;}

	.main-about-wrapper{margin-top: 50px;}
	.main-about-top .right{width: 500px; height: 511px;}
	.main-about-top .right .item{width:285px;}
	.main-about-top .right .item:nth-child(1){left: 90px;}
	.main-about-top .right .item:nth-child(3){top: 160px;}
	.main-about-top .right .item span{height: 271px;}
	.main-about-top .right .item span:before{font-size: 17px;}
	.main-about-top .right .item:nth-child(1) span:before{top: 30px; right: 35px;}
	.main-about-top .right .item:nth-child(2) span:before{bottom: 30px; left: 35px;}
	.main-about-top .right .item:nth-child(3) span:before{bottom: 30px; right: 50px;}
	.main-about-top .right .item span img{filter: drop-shadow(9px 9px 16px rgba(0,0,0,0.14));}
	.main-about-top .right .vision-btn{bottom: 25px; right: 70px;}
	.main-about-top .right .vision-btn:before{margin-top: -7px; right: -25px;}
	.main-about-top .left{margin-top: 30px; position: relative; z-index: 1;}
	.main-about-top .left li + li{margin-top: 10px;}

	.main-about-bottom{margin-top: 40px; padding-bottom: 115px;}
	.clip-object02{top: auto; bottom: 35px;}
	.main-about-bottom .right .tit{font-size: 23px;}
	.main-about-bottom .right .tit:before{font-size: 22px;}
	.main-about-bottom .right .value{margin-top: 20px; font-size: 55px;}
	.main-about-ir{margin-top: 20px;}
	.main-about-ir dl + dl{margin-left: 30px;}
	.main-about-ir dt, .main-about-ir dd{line-height: 24px;}
	.main-about-ir dt{font-size: 13px;}
	.main-about-ir dd{margin-left: 13px; font-size: 17px;}
	.main-about-ir dd i{margin-right: 3px; font-size: 17px;}
	.main-about-ir dd span{margin-left: 12px; font-size: 17px;}
	.main-about-ir .ir-btn{margin-left: 15px; width: 20px;}
	.main-about-ir .ir-btn i{font-size: 13px;}
}
@media all and ( max-width: 640px ){
	.main-about-top .right{width: 320px; height: 325px;}
	.main-about-top .right .item{width: 180px;}
	.main-about-top .right .item:nth-child(1){left: 90px;}
	.main-about-top .right .item:nth-child(3){top: 120px;}
	.main-about-top .right .item span{height: 171px;}
	.main-about-top .right .item span:before{font-size: 17px;}
	.main-about-top .right .item:nth-child(1) span:before{top: 30px; right: 35px;}
	.main-about-top .right .item:nth-child(2) span:before{bottom: 30px; left: 35px;}
	.main-about-top .right .item:nth-child(3) span:before{bottom: 30px; right: 50px;}
	.main-about-top .right .item span img{filter: drop-shadow(9px 9px 16px rgba(0,0,0,0.14));}
	.main-about-top .right .vision-btn{bottom: 5px; right: 50px; font-size: 12px;}
	.main-about-top .right .vision-btn:before{margin-top: -7px; right: -25px;}
}
@media all and ( max-width: 480px ){
	.main-about-ir dd,
	.main-about-ir dd i,
	.main-about-ir dd span{font-size: 15px;}
	.main-about-ir dl + dl {margin-left: 20px;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Global Network) -------- */
@media all and ( max-width: 1510px ){
	#mainGlobalCon .main-tit-box{top: 16.14%;}
	
	.global-map-con{height: 0; padding-top: 64.53%;}
	.global-map-con .bg{left: 0; margin-left: 0; width: 100%; height: 100%;}

	.nation-circle {transform: scale(0.9);}
	.nation-circle.cir01{margin-left: -37.5%; margin-top: -4.69%;}
	.nation-circle.cir02{margin-left: -22.3%; margin-top: 2.5%;}
	.nation-circle.cir03{margin-left: -10.9%; margin-top: 5.5%;}
	.nation-circle.cir04{margin-left: -10.7%; margin-top: 11%;}
	.nation-circle.cir05{margin-left: -8.7%; margin-top: 1.7%;}
	.nation-circle.cir06{margin-left: -7.2%; margin-top: 0.2%;}
	.nation-circle.cir07{margin-left: -6.5%; margin-top: 3.7%;}
	.nation-circle.cir08{margin-left: -1.5%; margin-top: -3.8%;}
	.nation-circle.cir09{margin-left: 26.2%; margin-top: -1.3%;}
	.nation-circle.cir10{margin-left: 30.5%; margin-top: 11.5%;}
	.nation-circle.cir11{margin-left: -11%; margin-top: -1.2%;}
	.nation-circle.cir12{margin-left: -8.9%; margin-top: -1.9%;}
	.nation-circle.cir13{margin-left: -7%; margin-top: -1.5%;}
	.nation-circle.cir14{margin-left: -5.6%; margin-top: -4.3%;}
	.nation-circle p{top:-25px;}
}
@media all and ( max-width: 1220px ){
	.nation-circle {transform: scale(0.8);}
}
@media all and ( max-width: 1024px ){
	.nation-circle {transform: scale(0.7);}
}
@media all and ( max-width: 800px ){
	#mainGlobalCon .main-tit-box {top: 18.14%;}
	#mainGlobalCon .main-tit-box .main-tit-num {left: 17px;}
	.main-map-list{margin-top: 0;}
	.main-map-list li + li{margin-left: 15px;}
	.main-map-list li .cir{width: 10px; height: 10px;}
	.main-map-list li .txt{margin-left: 5px; font-size: 14px;}
	.global-map-con{display: none;}
	.global-map-con-m{display: block; padding: 200px 0 30px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d4eddd+0,f2dfdc+100 */
	background: rgb(212,237,221); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(212,237,221,1) 0%, rgba(242,223,220,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(212,237,221,1) 0%,rgba(242,223,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(212,237,221,1) 0%,rgba(242,223,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4eddd', endColorstr='#f2dfdc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
	.global-map-con-m img{width: 100%; height: auto;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(채용정보,홍보영상) -------- */
@media all and ( max-width: 1220px ){
	.main-recruit-inner{padding: 0 30px;}
	.main-recruit-txt{padding-right: 145px;}
	.main-recruit-txt .tit{font-size: 31px;}
	.main-recruit-txt .txt{margin-top: 25px; font-size: 17px;}
	.main-recruit-link .link{font-size: 17px;}
	.main-recruit-link .link + .link{margin-top: 20px;}
}
@media all and ( max-width: 1024px ){
	.main-recruit-item{float: none; width: 100%;}
	.main-recruit-inner{max-width: none; padding: 0 6%;}
}
@media all and ( max-width: 800px ){
	.main-recruit-item{height: 215px; background-position: 80% 50%;}
	#mainRecruitCon .main-recruit-item:first-child{background-position: 40% 50%;}
	.main-recruit-inner{padding: 0 10%;}
	.main-recruit-txt{width: 100%; padding-right: 180px;}
	#mainRecruitCon .main-recruit-item:first-child .main-recruit-txt{padding-right: 110px;}
	.main-recruit-txt .tit{font-size: 26px;}
	.main-recruit-txt .txt{margin-top: 20px; font-size: 14px;}
	.main-recruit-link{right: -15px;}
	.main-recruit-link .link{width: 110px; font-size: 13px;}
	.main-recruit-link .link + .link{margin-top: 15px;}
	.main-recruit-link .btn +.btn{margin-top: 10px;}
	.main-recruit-link .btn .cir{width: 35px; height: 35px;}
	.main-recruit-link .btn .cir:before{font-size: 16px; line-height: 35px;}
	.main-recruit-link .btn p{margin-left: 5px; font-size: 14px;}
	.main-recruit-link .btn p span{font-size: 12px; margin-top: 10px;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(채용정보,홍보영상) -------- */
@media all and ( max-width: 1220px ){
	/* active */
	.swiper-slide.main-news-item,
	.swiper-slide-active.main-news-item{width: calc(45% - 30px);}
}
@media all and ( max-width: 1024px ){
	.main-news-con{margin-top: 95px;}
	.main-news-container.swiper-container:before{display: none;}
	/* active */
	.swiper-slide.main-news-item,
	.swiper-slide-active.main-news-item{width: calc(45% - 30px);}
	.swiper-slide-active.main-news-item a{background-color: #ffc90a;}
}
@media all and ( max-width: 800px ){
	#mainNewsCon{padding: 115px 0 60px; min-height: auto;}
	#mainNewsCon:before{height: 190px;}
	.main-news-con {margin-top: 35px;}
	
	.main-news-container.swiper-container{overflow: hidden;}
	.swiper-slide.main-news-item,
	.swiper-slide-active.main-news-item{width: calc(50% - 5px);}

	.main-news-item a{height: 310px; height: 430px; padding: 40px 15px 25px;}
	.main-news-item a:before,
	.txt-item a:after{display: none;}
	.main-news-item a .new-bnr{top: -2px; right: 3px; width: 50px; height: 30px; font-size: 11px; line-height: 30px;}
	.main-news-item a .new-bnr:before{width: 50px; height: 30px;}
	.main-news-top{position: relative; padding-right: 90px;}
	.main-news-top .date{width: 45px; text-align: center;}
	.main-news-top .date span{font-size: 12px;}
	.main-news-top .date b{margin-top: 5px; font-size: 23px;}
	.main-news-top .category{top: 15px; font-size: 12px; padding: 0 2px 7px;}
	.main-news-bottom{margin-top: 25px;}
	.img-item .main-news-bottom{margin-top: 20px;}
	.main-news-bottom .tit{font-size: 16px;}
	.main-news-bottom .txt{margin-top: 15px; font-size: 12px; line-height: 1.9; height: 3.8em; -webkit-line-clamp: 2;}
	.main-news-bottom .img{margin-bottom: 10px; padding-top: 120px; padding-top: 78.08%;}
}
@media all and ( max-width: 640px ){
	.main-news-item a{height: 380px;}
}
@media all and ( max-width: 540px ){
	.main-news-item a{height: 340px;}
}
@media all and ( max-width: 480px ){
	.swiper-slide.main-news-item,
	.swiper-slide-active.main-news-item{width: calc(100% - 5px); width: 100%;}
	.main-news-item a{height: 450px;}
}