@charset "UTF-8";
/*-------------------------------------------------
title       : 메인 반응형
Author      : ㅈㅁㅈ
Create date : 2020-11-27
-------------------------------------------------*/
@media (max-width: 1451px) { 
.icons {margin-bottom: 4.5rem;}	
.icons > * {margin-bottom: 2rem;}

}
@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: ''; }
.pool { float: none; width: 100%; margin: 0; }
.section3 .group,
.section3 .group.first {width: calc(33.33% - 2rem);}
.section3 .quick_link {display: flex; flex-flow: row wrap; width: calc(100% + 2rem); height: 100%; margin-left: 0;}
.section3 .quick_link > li {width: calc(33.33% - 2rem); height: auto; margin: 0 1rem;}
.section3 .quick_link > li + li {margin-top: 0;}
.section3 .quick_link > li a {padding: 2rem 1rem;}
.icons > li {width: 20%; padding: 0;}
}

@media (max-width: 1024px) {
.layerPopup-area {position: absolute; top: 0; left: 0; width: 100%; padding: 1rem; z-index: 100;overflow: hidden; } 	
.layerPopup-area [id^="layerPopup"] {position: relative; top: inherit !important; left: inherit !important; height: auto !important; max-width:100%; margin-bottom: 2rem;}

#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 .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 {flex-direction: column; margin: 0 -.5rem; } 
.section3 .group {display: flex; flex-flow: row wrap; width: 100% !important; margin: 0;}
.section3 .box {width: calc(50% - 1rem);  margin: .5rem;}
.pool li strong {display: block;height: auto;text-overflow: ellipsis;white-space: nowrap; -webkit-line-clamp: 1;overflow: hidden;}

.section3 .quick_link {width: 100%; margin-top: 0.5rem;}
.section3 .quick_link > li {width: calc(33.33% - 1rem); margin: 0 0.5rem;}
}
 
@media (max-width: 768px) { 
#visual { padding: 0; 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 .txt { 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 {transform: translateX(-1rem); }
.section1 .latest1 .group3 .label a {transform: translateX(-2.5rem); }
.section2 { margin-bottom: 3.5rem; padding: 3rem 0 0; text-align: center; }
.section2 .subject {margin-left: 0; text-align: left;}
.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;  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; text-align: left;}
.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; }
.icons {justify-content: flex-start;}
.icons > li {width: 50%; text-align: left;}
 }

@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: flex; float: right; width: calc(100% - 15rem); max-height: inherit; height: 9rem; margin-bottom: 2rem; 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 .group {margin-bottom: 1rem;}
.section3 .box {display: block; width: 100%; margin: 0; }
.section3 .esg {height: 28rem;}
.section3 .popup {height: 32.5rem;}

.popupzone-slider > li {width: 100%;}
.section3 .esg a img {position: relative;}
.section3 .group > * + * { margin-top: 1rem; }
.section3 .item .desc { height: auto; }
.popup { float: none; width: 100%; }
.popup img { width: 100%; }
	
.trend {width: 100%;  margin: 0;}
.trend > a {float: none; width: 100%; margin: 0 0 1rem !important; }
}

@media (max-width: 485px) {
.section2 .group::after, .section2 .group::before { top: 7rem; } 
.section3 .quick_link > li {width: 100%; margin: 0.5rem 0; }
.icons li {width: 100%;}
}

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