@charset "UTF-8";
/*-------------------------------------------------
title       : 메인 반응형
Author      : ㅈㅁㅈ
Create date : 2020-11-27
-------------------------------------------------*/
@media (max-width: 1150px) { 
	#visual .group1 p { max-height: 7.2rem; }
  .section2 .group { width: 69rem; height: 39rem; }
  .section2 .list { width: calc(100% - 71rem); margin-top: -1rem; }
  .section2 .list li { float: none; width: 100%; margin: 1rem 0 0; }
  .section3 { position: relative; margin-bottom: 5rem; }
  .section3::after { display: block; clear: both; height: 0; content: ''; }
  .section3 .group { width: calc(100% - 40rem); margin-right: -2rem; }
  .pool { float: none; width: 100%; height: auto; margin: 0; }
  .pool li { margin-top: 1rem; }
  .trend { clear: both; float: left; width: 100%; margin-top: 2rem; }
  .trend > a { float: left; width: calc(50% - 1rem); }
  .trend > a.type1 { margin-right: 1rem; }
  .trend > a.type2 { margin-left: 1rem; height: 24rem; margin-top: 0; }
  .trend::after { content: ''; clear: both; display: block; }
  .icons { clear: none;  margin: 1.5rem auto 2rem; }
  .icons li { float: left; width: 33.3333%; vertical-align: top; }
  .icons a::before { right: 1rem; } 
 }

@media (max-width: 1024px) { 
#visual .group1 i { top: 4rem; width: 18rem; height: 25rem; }
#visual .group1 .title  {left: 20rem;}
#visual .group1 .desc { padding: 4.5rem 2rem 5rem 8rem; }
#visual .group2 { padding: 5rem 0; }
#visual .group2 .slick-arrow { left: 2rem; }
#visual .group2 .slick-arrow.slick-next { right: 2rem; }
#visual .group2 .world .cont .map { width: 30rem; height: 15rem; }
.section1 .latest { width: calc(50% - 1.5rem); margin: 0; }
.section2 .group { width: 46rem; height: 26rem; }
.section2 .group .desc { position: relative; bottom: -2.0rem; right: auto; left: 0; z-index: 1; padding-right: 0; color: #151515; }
.section2 .group .desc span { position: inherit; display: inline-block; margin-top: 0.8rem; }
.section2 .list { width: calc(100% - 48rem); text-align: left; }
.section2 .list li { height: 10.75rem; padding-left: 12rem; }
.section2 .list .desc { margin-left: 10rem; }
.section2 .list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section2 .list i { left: 0; width: 20rem; height: 10.75rem; }
.section3 { position: relative; flex-direction: column;}
.section3 .first {display: flex; display: -webkit-flex; flex-flow: row wrap; width: calc(100% + 1rem); margin: 0 -0.5rem 2rem;}
.section3 .esg,
.section3 .popup {width: calc(50% - 1rem);  height: 26.7rem; margin: 0 .5rem;}

.section3 .group {width: calc(100% + 1rem); margin: 0 -0.5rem 2rem; padding-left: 0; }
.section3 .group > * { display: block; width: calc(50% - 1rem); margin: 0 .5rem; }
.section3 .group > * + * { margin-top: 1rem; }
.section3 .group .item { height: auto !important; padding: 4rem; }
.section3 .group .item.item1 {margin-top: 0;}
.section3 .group .item i { width: 12rem; height: 12rem; overflow: hidden; text-align: right; }
.section3 .group .item p { overflow: hidden; width: calc(100% - 20rem); min-width: 14rem; height: 4.5rem; margin: 1.5rem 0 1rem; }
.section3 .group .item img { max-height: inherit; }
.pool li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend { float: none; width: calc(100% + 1rem);  margin: 0 -0.5rem; overflow: hidden;}
.trend > a {height: 15rem !important; margin: 0 .5rem !important; padding: 2rem 0 0 2rem; overflow: hidden;}

.trend span { left: auto; right: 2rem; }

.icons li { margin-bottom: 1rem; }
.icons a { height: 6.5rem; }
.icons a.type2 span { font-size: 2.0rem; }
.icons i { width: 6.5rem; height: 6.5rem; line-height: 6.5rem; } 
 }

@media (max-width: 768px) { 
	#visual { padding: 0; background: -webkit-gradient(linear, left top, right top, color-stop(60%, #262056), color-stop(60%, #373263)); background: linear-gradient(to right, #262056 60%, #373263 60%); }
  #visual .group1 { display: block; width: 100%; height: auto; max-width: inherit; padding: 5rem 0 3.5rem; }
  #visual .group1 .control { position: absolute; left: calc(50% + 12rem); top: 25rem; }
  #visual .group1 .item { padding-left: 0; }
  #visual .group1 .desc { height: auto; padding: 4.8rem 2rem 0; background: none; text-align: center; }
  #visual .group1 .desc::after {display: none;}
  #visual .group1 i { display: block; position: static; margin: 0 auto; }
  #visual .group1 p { display: none; }
  #visual .group1 .slick-dots { left: calc(50% - 7.5rem); top: 26rem; bottom: auto; width: 25rem; /*transform: rotate(-90deg);*/ }
  #visual .group2 { display: block; width: 100%; max-width: inherit; height: auto; margin: 0; padding-bottom: 8.5rem; background-color: #1D1841; }
  #visual .group2 .list { width: 40rem; max-width: calc(100% - 4rem); margin-left: auto !important; margin-right: auto !important; position: relative; }
  #visual .group1 .title {left: 3rem;}
  #visual .group2 h2 { left: 0; top: 0; }
  #visual .group2 .world .cont .map { width: 48rem; height: 23rem; }
  #visual .group2 .world .cont .tag { bottom: 7rem; }
  #visual .group2 .world .cont .tag a { margin: 0; }
  #contents .search { height: auto; margin-bottom: 0; }
  #contents .search .item {flex-direction: column; float: none; width: 100%; padding: 2rem; line-height: 1.5; }
  #contents .search .item .subject {margin-bottom: 1rem; }
  #contents .search .item .desc {width: 100%; margin: 0 -1rem; line-height: 1.5;}
  #contents .search .form { display: none; }
  .section1 { padding-bottom: 2rem; }
  .section1 .latest { float: none; width: 100%; margin-bottom: 2rem; }
  .section1 .latest1 .group2 .label a { -webkit-transform: translateX(-1rem); transform: translateX(-1rem); }
  .section1 .latest1 .group3 .label a { -webkit-transform: translateX(-2.5rem); transform: translateX(-2.5rem); }
  .section2 { margin-bottom: 3.5rem; padding: 3rem 0 0; text-align: center; }
  .section2 .group { display: inline-block; float: none; width: 100%; height: auto; margin-bottom: 2rem; }
  .section2 .group::after { width: 3.5rem; height: 3.5rem; top: 12.9rem; }
  .section2 .group::before { font-size: 3.5rem; top: 12.9rem; }
  .section2 .group img { position: relative; top: auto; left: auto; right: auto; bottom: auto; -webkit-transform: translate(0, 0); transform: translate(0, 0); max-width: 100%; min-height: 0; }
  .section2 .group .desc { position: relative; bottom: -2.0rem; right: auto; left: 0; z-index: 1; padding-right: 0; color: #151515; }
  .section2 .group .desc span { position: inherit; display: inline-block; margin-top: 0.8rem; }
  .section2 .list { float: none; width: 100%; margin-top: 2.5rem; }
  .section2 .more { display: block; position: static; margin: 3.5rem auto; }
  .section3 .group {margin-top: 1rem;}
  .section3 .group > * { clear: none; float: left; }
  .section3 .group > *:nth-child(3n + 1) { clear: none; }
  .section3 .group > *:nth-child(2n + 1) { clear: both; }
  .section3 .group .item i { max-width: calc(100% - 25rem); }
  .section3 .group .item.item1 i { bottom: 3rem; }

  .icons {/* text-align: center; */} 
 }

@media (max-width: 640px) {
	.section2 .group::after, .section2 .group::before { top: 10rem; } 
	.section3 .esg a img { position: absolute;  top: 50%;  left: 0;  transform: translateY(-50%);}
}

@media (max-width: 580px) { 
	.section1 .latest .label a { font-size: 2.5rem; }
	.section1 .latest .group2 .label a { left: 11.5rem; }
	.section1 .latest .group3 .label a { left: 23rem; }
	.section1 .latest .group5 .label a { left: 13rem; }
	.section1 .latest .group6 .label a { left: 23rem; }
	.latest2 .item2 .list li a .img { float: left; width: 13rem; height: 9rem; }
	.latest2 .item2 .list li a .desc { display: block; padding: 0; }
	.latest2 .item2 .list li a .title { display: -webkit-box; display: -ms-flexbox; display: flex; float: right; width: calc(100% - 15rem); max-height: inherit; height: 9rem; margin-bottom: 2rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: keep-all; }
	.latest2 .item2 .list li a .txt { clear: both; margin: 0 0 0.5rem; }
	
	.section2 .group::after { width: 3.5rem; height: 3.5rem; top: 8.9rem; }
	.section2 .group::before { font-size: 3.5rem; top: 8.9rem; }
	.section2 .group .desc strong { font-size: 1.8rem; }
	
	.section3 .esg, .section3 .popup {width: 100%; margin: 0 0 1rem;}
	.popupzone-slider > li {width: 100%;}
	.section3 .esg a img {position: relative;}
	.section3 .group {width: 100%; margin: 0 0 1rem;}
	.section3 .group > * { display: block; float: none; width: 100%; margin: 0; }
	.section3 .group > * + * { margin-top: 1rem; }
	.section3 .group .item p { height: auto; }
	.popup { float: none; width: 100%; }
	.popup img { width: 100%; }
	.pool li strong { white-space: normal; }
	
	.trend {width: 100%;  margin: 0;}
	.trend > a {float: none; width: 100%; margin: 0 0 1rem !important; }
	.icons li { float: left; width: 50%;}
	.icons li:first-child { width: 50%; } 
}

@media (max-width: 450px) {
	.section2 .group::after, .section2 .group::before { top: 7rem; } 
}

@media (max-width: 375px) { 
	.section2 .group::after, .section2 .group::before { top: 7rem; } 
}