@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; float: right; width: calc(100% - 5rem); padding: 1.5rem 0 0 1rem; -webkit-column-count: 3; column-count: 3; -webkit-column-gap: 3rem; column-gap: 3rem; }
  .icons li { float: left; width: 33.3333%; vertical-align: top; }
  .icons li:first-child { width: 33.3333%; }
  .icons a::before { right: 1rem; } }

@media (max-width: 1024px) { #visual .group1 i { top: 4rem; width: 18rem; height: 25rem; }
  #visual .group1 .desc { padding: 4rem 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; }
  .section3 .group { margin-top: -1rem; display: block; width: 100%; margin-top: 0; display: inline-block; margin-top: 0; width: calc(100% - 42rem); margin-right: 0; }
  .section3 .group > * { display: block; clear: none; float: none; width: 100%; margin: 0; }
  .section3 .group > * + * { margin-top: 1rem; }
  .section3 .group .item { height: auto !important; padding: 4rem; }
  .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 { position: absolute; left: 0; top: 50rem; width: 41.8rem; height: 28rem; }
  .trend > a { width: 100%; height: 15rem !important; padding: 2rem 0 0 2rem; }
  .trend > a.type1 { margin-right: 0; }
  .trend > a.type2 { margin-left: 0; margin-top: 1rem; }
  .trend span { left: auto; right: 2rem; }
  .icons { padding: 12rem 0 0 0; }
  .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: 2.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 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 .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 { width: 100%; padding: 2rem; line-height: 1.5; }
  #contents .search .item strong { display: block; float: none; width: 100%; margin-bottom: 1rem; }
  #contents .search .item span { display: block; overflow: hidden; position: static; width: 100%; -webkit-transform: translate(0); transform: translate(0); line-height: 1.5; white-space: normal; }
  #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; display: inline-block; width: calc(100% + 1rem); margin-top: 1rem; padding-left: 0; }
  .section3 .group > * { clear: none; float: left; width: calc(50% - 1rem); margin: 1rem 1rem 0 0; }
  .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; }
  .trend { height: auto; left: auto; bottom: auto; right: 0; top: 0; width: calc(100% - 44rem); margin-top: 0; }
  .trend > a { height: 19.9rem !important; }
  .icons { float: none; width: 100%; padding: 3rem 0 0; text-align: center; } }

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

@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 .group { margin-top: -1rem; display: block; width: 100%; margin-top: 0; margin-top: 2rem; }
  .section3 .group > * { display: block; clear: none; 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 { position: static; width: 100%; margin-top: 1rem; }
  .icons { text-align: left; }
  .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; } }