/* ========================================
   Sections CSS - 모든 섹션별 스타일
   원본소스에서 추출
======================================== */

/* ========================================
   MAIN VIDEO SECTION
======================================== */
.main_video { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
    background:#000;
}
.main_video .video-container { 
    position: relative; 
    width: 100%; 
    padding-bottom:56.25%; 
    overflow: hidden; 
}
.main_video .video-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border: 0; 
}
.main_video .pc_video { 
    display: block; 
}
.main_video .mobile_video { 
    display: none; 
}
.main_video .tx-positioner { 
    position: absolute; 
    top: 45%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
    text-align: center; 
    z-index: 9; 
}
.main_video .tx-wrapper { 
    display: inline-block; 
    transform-origin: center center;
}
.main_video .tx { 
    display: inline-block; 
    text-align: center; 
    color: #fff; 
    font-size: 0.9vw; 
    line-height:1.6vw; 
    font-weight: 100; 
    text-shadow: 1px 1px 10px rgba(0,0,0,0.7);
}
.main_video .tx p { 
    font-weight: 700; 
    font-size:3.1vw; 
    line-height:3.3vw; 
    padding-bottom:15px;
}
    
@media screen and (max-width: 1024px) { 
    .main_video .pc_video { display: none; } 
    .main_video .mobile_video { display: block; padding-bottom:177.78%; }
    .main_video .tx { font-size:3.3vw; line-height:4.5vw; font-weight: 100; width:90%; }
    .main_video .tx p { font-size:7vw; line-height:10vw; }
}


/* ========================================
   MBN2 - OUR VISION
======================================== */
.mbn2 { 
    width:100%; 
    position:relative; 
}
.mbn2 .tx { 
    position:absolute; 
    z-index:9;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap; 
    color:#fff; 
    font-size:18px; 
    font-weight:200; 
    line-height:22px; 
    text-align:center;
}
    
.mbn2 .tx .tx1 { 
    font-size:1.6vw; 
    font-weight:700; 
    line-height:2.7vw; 
    color:#00a5e4; 
    padding-top:3%;  
}
.mbn2 .tx .tx2 { 
    color:#fff; 
    font-size:4vw; 
    font-weight:700; 
    line-height:4.4vw; 
    font-style:italic; 
    padding-right:22vw
}
.mbn2 .tx .tx3 { 
    color:#fff; 
    font-size:4vw; 
    font-weight:700; 
    line-height:4.4vw; 
    font-style:italic; 
    padding-left:23vw
}
.mbn2 .tx .tx3 span { 
    font-size:3vw; 
    color:rgba(255,255,255,0.6); 
    padding-right:10px
}
.mbn2 .tx .tx4 { 
    color:#fff; 
    font-size:1.2vw; 
    font-weight:300; 
    line-height:1.5vw; 
    padding-top:5%; 
}
.mbn2 .tx .tx4 span { 
    font-weight:500
}
.mbn2 .tx .tx4_mo { 
    display:none
} 
.mbn2 .tx .tx5 { 
    font-size:1.6vw; 
    font-weight:700; 
    line-height:2vw; 
    padding-top:30%; 
    color:#00a5e4;  
}
.mbn2 .tx .tx6 { 
    color:#fff; 
    font-size:4vw; 
    font-weight:700; 
    line-height:4.4vw; 
}
.mbn2 .tx .tx7 { 
    color:#fff; 
    font-size:1.2vw; 
    font-weight:300; 
    line-height:1.5vw; 
    padding-top:3%; 
}

.mbn2 picture { 
    width:100%
}
.mbn2 img { 
    width: 100%; 
    display: block; 
}


@media screen and (max-width: 1024px) {
   .mbn2 .tx .tx1 { font-size:4.5vw; line-height:9vw; padding-top:10%; }
   .mbn2 .tx .tx2 { font-size:9vw; line-height:9vw; padding-right:33vw }
   .mbn2 .tx .tx3 { font-size:9vw; line-height:9vw; padding-left:33vw }
   .mbn2 .tx .tx3 span { font-size:6vw; line-height:6.2vw; padding-right:5px }
   .mbn2 .tx .tx4 { display:none }    
   .mbn2 .tx .tx4_mo { display:block; font-size:4vw; line-height:5vw; font-weight:200; padding-top:8%; letter-spacing:-0.5px }
   .mbn2 .tx .tx4_mo span { font-weight:500; display: block; padding-top:3%;}

   .mbn2 .tx .tx5 { font-size:4.5vw; line-height:9vw; padding-top:20%; }
   .mbn2 .tx .tx6 { font-size:9vw; line-height:9vw; }
   .mbn2 .tx .tx7 { font-size:4vw; line-height:5vw; font-weight:200; padding-top:3%;}
}    
    
.mbn2 .tx [data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(50px) !important;
  transform-origin: center center !important;
}
.mbn2 .tx [data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0) !important;
  transition-property: transform, opacity;
}


/* ========================================
   MBN3 - BUSINESS FIELD
======================================== */
.mbn3 {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    perspective: 1200px; 
}
    
.mbn3 .bnbox {
    width: 100%;
    aspect-ratio: 50 / 13; 
    border-radius: 4.5em 4.5em 0 0;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 30px 80px;
    box-sizing: border-box;
    color: #fff;
    overflow: visible;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
                filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform-origin: center bottom;
    will-change: transform, filter;
}

.mbn3 .bnbox .left {
    text-align: left; 
    z-index: 2;
}

.mbn3 .left .tx1 {
    display: inline-block;
    width: 7.3vw;
    min-width: 100px;
    background-color: #d0d1d4;
    color: #333;
    border-radius: 9999px;
    font-size: 1.6rem;
    padding: 0.7em 0 0.6em;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 0.8em;
    margin-top: 36%;  
}
    
#mbn3_bn3 .tx1 { 
    margin-top: 34%; 
}

.mbn3 .left .tx2 {
    color: #fff;
    font-size: 3vw;
    font-weight: 600;
    margin-bottom: 0.57em;
}

.mbn3 .left .tx3 {
    color: #fff;
    font-size: 0.85vw;
    line-height: 1.5;
    font-weight: 200;
}
    
.mbn3 .left .tx4 { 
    display: none;
}
.mbn3 .left .more { 
    display: none;
}

.mbn3 .bnbox .right {
    flex: 0 0 auto;
    height: 100%;
    box-sizing: border-box;
    z-index: 1;
    margin-left: auto;
}

.mbn3 .bnbox .right img {
    display: block;
    height: 100%;
}

#mbn3_bn1 {
    background-color: #5b5e68;
    z-index: 1;
    position: relative;
}
#mbn3_bn2 {
    background-color: #72747d;
    z-index: 2;
    position: relative;
    margin-top: -100px; 
}
#mbn3_bn3 {
    background-color: #8a8c93;
    z-index: 3;
    position: relative;
    margin-top: -100px; 
}

#mbn3_bn1::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4.5em;
    height: 4.5em;
    background-color: #5b5e68;
    border-radius: 0;
    z-index: 0;
}

#mbn3_bn2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4.5em;
    height: 4.5em;
    background-color: #72747d;
    border-radius: 0;
    z-index: 0;
}

.mbn3 .bnbox.reduced {
    transform: scale(0.92);
    filter: brightness(0.8);
}

@media (max-width: 1024px) {
    .mbn3 .bnbox {
      padding: 20px 20px 0;
      aspect-ratio: 50 / 28;  
      border-radius: 2em 2em 0 0;
      min-height: 200px;
      justify-content: flex-start;
    }
    #mbn3_bn1::after,
    #mbn3_bn2::after {
      bottom: -2em;
      height: 2em;
      border-radius: 0;
    }
    .mbn3 .bnbox .left .tx1 { 
      width: 25vw; 
      font-size: 1.2rem; 
      padding: 0.45em 0 0.4em; 
      font-weight: 500; 
      margin-bottom: 0.5em; 
      margin-top: 28%;  
    }
    #mbn3_bn3 .tx1 { margin-top: 26%; }
    .mbn3 .bnbox .left .tx2 { 
      font-size: 5.5vw; 
      margin-bottom: 0; 
    }
    .mbn3 .bnbox .left .tx3 { 
      display: none; 
    }
    .mbn3 .bnbox .left .tx4 { 
      display: block; 
      margin-top: 0px;
      font-size: 1.3rem; 
      color: #fff !important; 
    }
    .mbn3 .bnbox .left .more { 
      display: block; 
      margin-top: 18%;
      font-size: 1.2rem; 
      color: #fff; 
    }
    .mbn3 .bnbox .left .more span { 
      background: url(../imgs/arr20.png) no-repeat right 50%; 
      background-size: 0.52em auto; 
      padding-right: 1.6em; 
    }
    .mbn3 .bnbox .right {
      margin-left: auto;
    }
}


/* ========================================
   MBN4 - MAGAZINE
======================================== */
.mbn4 { 
    width:100%; 
    position:relative; 
    height:auto; 
    overflow:hidden; 
}

/* 배경 비디오 */
.bg-video {
  position: absolute;
  top: 0px !important;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
.bg-video iframe { 
    width: 100%; 
    height: 100%; 
}
.bg-video.mobile { 
    display: none; 
}
.bg-video.pc { 
    height: 56.25vw; 
}

@media screen and (max-width: 1024px) {
  .bg-video.pc { display: none; }
  .bg-video.mobile { display: block; height: 177.05vw; }
}  

.bg-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 2;
}

.mbn4_box { 
    width:100%; 
    overflow:hidden; 
    padding:0 0 8%; 
    z-index: 10; 
    position: relative; 
}

.mbn4 .tit {
  width:100%; 
  text-align:center; 
  z-index:10; 
  position:relative;
  font-weight:700;
  font-size:1.7vw;
  line-height:1.8vw;
  color:#00a5e4;
  padding-top:26vw;  
}
.mbn4 .tit p {
  font-weight:700;
  font-size:4.15vw;
  line-height:4.5vw;
  color:#fff;
  text-transform:uppercase;
}
.mbn4 .tx {
  width:100%; 
  text-align:center; 
  z-index:10; 
  position:relative;
  color:#fff;
  font-size:1.2vw;
  font-weight:300;
  line-height:1.6vw;
  padding-top:1.6vw; 
  padding-bottom:5vw;  
}

@media (max-width:1024px){
  .mbn4_box { padding:0 0 20%; }  
  .mbn4 .tit {
    font-weight: 600;
    font-size: 4.5vw;
    line-height: 4.5vw;
  }
  .mbn4 .tit p {
    font-weight: 600;
    font-size: 8.8vw;
    line-height: 8.8vw;
    padding: 1.8% 0 3%;
  }
  .mbn4 .tx {
    font-size: 3.7vw;
    font-weight: 300;
    line-height: 5.2vw;
    padding: 0 0 12vw;
  }
}

.mbn4_sld {
  position:relative;
  width:100%;
  perspective:1500px;
  perspective-origin:center;
}

.mbn4_itm {
  position:absolute;
  left:50%;
  background:#666;
  border-radius:18px;
  overflow:hidden;
  transition:transform .8s ease;
  transform-style:preserve-3d;
}

.mbn4_itm.active {
  position: relative;
  overflow: visible;
  background: transparent;
}
    
.mbn4_itm .inner-wrap {
    position: relative;
    width: 100%; 
    padding:1px; 
    box-sizing:border-box;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    z-index: 1;
} 

.mbn4_itm.active .gradient-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    padding-top: 150%;
    transform: translate(-50%, -50%);
    background: conic-gradient(#ffeccd, #00a5e4, #ffeccd);
    animation: gradientSpin 5s linear infinite;
    z-index: -1;
}

.mbn4_itm.active .gradient-glow {
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    background: conic-gradient(#ffeccd, #00a5e4, #ffeccd, #00a5e4, #ffeccd);
    background-size: 100% 100%;
    filter: blur(10px);
    opacity: 0.3;
    border-radius: inherit;
    animation: glowColorSpin 5s linear infinite;
    z-index: 0;
}

@keyframes glowColorSpin {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes gradientSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.mbn4_itm,
.mbn4_itm * { 
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.mbn4_itm .inner-wrap,
.mbn4_itm .mbn4_inner {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 18px;
    background-position: center;
    background-size: cover;
}

.mbn4_arw {
  display:none; 
}
.mbn4_arr {
  background:none;
  border:none;
  cursor:pointer;
}
.mbn4_arr img {
  width:100%;
  height:auto;
}

@media screen and (min-width:1025px) {
  .mbn4_sld { height:calc(30vw * 330/288); }
  .mbn4_itm {
    top:50%;
    transform:translate(-50%,-50%);
    width:30vw;
    aspect-ratio:288/330;
  }
  .mbn4_arr { width:30px; height:30px; }
}

@media screen and (max-width:1024px) {
  .mbn4_sld { height:calc(60vw * 330/288); }
  .mbn4_itm {
    top:0;
    transform:translateX(-50%);
    width:60vw;
    aspect-ratio:288/330;
    border-radius:10px;  
  }
    
  .mbn4_itm .inner-wrap,
  .mbn4_itm .mbn4_inner { 
      border-radius:10px;  
  }
    
  .mbn4_inner { 
      background-size:contain; 
  }
  .mbn4_arw { 
      gap:20px; 
      padding-top:2.5%; 
  }
  .mbn4_arr { 
      width:18px; 
      height:18px; 
  }
}

.mbn4_txt { 
    position: absolute; 
    width:100%; 
    bottom:0; 
    z-index: 5; 
    color: #fff; 
}
.mbn4_txt p { 
    display:inline-block; 
    background:rgba(255,255,255,0.4); 
    font-size:14px; 
    height:30px; 
    line-height:30px; 
    border-radius:15px; 
    padding:0 30px; 
    font-weight:200; 
    margin-left:1vw; 
}    
.mbn4_txt .tx01_pc { 
    width:80%; 
    margin-left:2vw; 
    padding:0.8vw 0 1.2vw;
}   
.mbn4_txt .tx01_pc span { 
    font-size:1.5vw !important; 
    color:#fff !important; 
    line-height:1.7vw; 
    font-weight:700;
}    
.mbn4_txt .tx01_mo { 
    display:none;
}
.mbn4_txt .tx02 { 
    font-size:0.8vw; 
    line-height:1.2vw; 
    font-weight:200; 
    margin-left:2vw; 
    width:70%; 
}    
.mbn4_txt .btn-more { 
    width:100%; 
    text-align:right; 
    padding:0.5vw 0 1.0vw; 
}
.mbn4_txt .btn-more a { 
    color:#fff; 
    font-size:14px; 
    font-weight:200; 
}      
.mbn4_txt .btn-more a span { 
    padding:0 1.1vw 0 1vw; 
    font-weight:300; 
}  
    
@media screen and (max-width:1024px) {
    .mbn4_txt p { 
        font-size:12px; 
        line-height:18px; 
        height:18px; 
        border-radius:15px; 
        padding:0 14px; 
        font-weight:300; 
        margin-left:3vw; 
    } 
    .mbn4_txt .tx01_pc { 
        display:none;
    }
    .mbn4_txt .tx01_mo { 
        display:block; 
        margin-left:4.8vw; 
        padding:2vw 0 2vw;
    }      
    .mbn4_txt .tx01_mp span { 
        font-size:4.5vw !important; 
        line-height:5vw; 
    }   
    .mbn4_txt .tx02 { 
        display:none; 
    }    
    .mbn4_txt .btn-more { 
        padding:1vw 0 2vw; 
    }
    .mbn4_txt .btn-more a { 
        font-size:11px; 
    }      
    .mbn4_txt .btn-more a span { 
        padding:0 3vw 0 2vw; 
    }  
}


/* ========================================
   MBN5 - CASE STUDIES
======================================== */
.mbn5,
.mbn5 *, 
.mbn5 *::before, 
.mbn5 *::after { 
    box-sizing: border-box;
}

.mbn5 {
  position: relative;
  width: 100%;
  background: url('../imgs/mbn5_bg_pc.jpg') no-repeat center top fixed;
  background-size: cover; 
  padding-bottom:100px;
}

@media (max-width: 1024px) {
  .mbn5 {
    background: url('../imgs/mbn5_bg_mo.jpg') no-repeat center bottom fixed;
    background-size: cover;
    padding-bottom:50px;
  }
}

.mbn5 .tit {
  position: sticky;
  top: 0;
  z-index: 3; 
  width: auto; 
  max-width: 50%;
  padding: 10% 0 500px 80px;
  box-sizing: border-box;
  color: #fff;
  height: auto;     
  min-height: auto;   
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
  align-items: flex-start;
  font-size: 1.2vw;
  font-weight: 300;
  line-height: 1.6vw;
  pointer-events: auto;
}

.mbn5 .tit p {
  display: block;  
  font-weight: 700;
  font-size: 1.7vw;
  line-height: 1.8vw;
  color: #00a5e4;
}
.mbn5 .tit .tx {
  font-weight: 700;
  font-size: 4.15vw;
  line-height: 4.5vw;
  color: #fff; 
  padding-bottom: 1.6vw;
  text-transform: uppercase;
}
.mbn5 .tit a {
  margin-top: 12%; 
  display: inline-block; 
  filter: alpha(opacity=60); 
  opacity: 0.6; 
  color: #fff; 
  font-weight: 100; 
  font-size: 14px; 
  line-height: 1vw; 
  background: url(../imgs/arr07.png) no-repeat 0 bottom; 
  background-size: 100% auto; 
  padding: 0 1.8vw 0.08vw 3.2vw;
}
.mbn5 .tit a:hover { 
    color:#fff; 
    opacity:1;
}

@media (min-width: 1025px) {
  .mbn5 .tit .tx br { 
      display:none;
  }
}

@media (max-width: 1024px) {
  .mbn5 .tit {
    position: relative;
    padding: 15% 0 0 4%;  
    font-size: 3.7vw;
    font-weight: 300;
    line-height: 5.2vw;
  }
  .mbn5 .tit p {
    font-weight: 600;
    font-size: 4.5vw;
    line-height: 4.5vw;
  }
  .mbn5 .tit .tx {
    font-weight:600;
    font-size: 8.8vw;
    line-height: 9.4vw;
    padding-top: 1vw;
  }
  .mbn5 .tit a {
    margin-top: 12%; 
    font-weight: 100; 
    font-size: 3vw; 
    line-height: 2vw; 
    background: url(../imgs/arr07mo.png) no-repeat 0 bottom; 
    background-size: 100% auto; 
    padding: 0 5vw 1vw 0vw;
  }
  .mbn5 .tit span { 
      display:none;
  }
}

.mbn5 .case-con {
  width: 50%;
  margin: -45% 0 0 50%;
  padding-right:80px;
  box-sizing:border-box;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  pointer-events: auto; 
}

@media (max-width: 1024px) {
  .mbn5 .case-con {
    width:95%; 
    margin: -20% 4% 0 1%;
    padding-right:0px;
  }
}

.mbn5 .left-column {
  width: 50%;
  padding-left: 1rem;
  padding-top: 30%;
}

.mbn5 .right-column {
  width: 50%;
  padding-left: 1rem;
}

.mbn5 .thumbnails-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 0;
}

.mbn5 .thumbnail-item {
  margin: 0;
}

.mbn5 .thumbnail-item .thumb {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}

.mbn5 .thumbnail-item .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

.mbn5 .thumbnail-item .caption {
  margin: 12px 0 0;
  text-align: center;
  height:80px; 
}
.mbn5 .thumbnail-item .caption span { 
    color:#fff !important; 
    font-size: 1.6rem !important;
    font-weight: 200;
}

@media (max-width: 1024px) {
  .mbn5 .thumbnail-item {
    margin: 1rem 0;
  }
  .mbn5 .left-column {
    padding-top: 33%;
  }
  .mbn5 .left-column,
  .mbn5 .right-column {
    padding-left: 0.7rem;
  }
  .mbn5 .thumbnail-item .caption {
    margin: 12px 0 0;
    text-align: center;
    height:40px; 
  }
  .mbn5 .thumbnail-item .caption span { 
    color:#fff !important; 
    font-size: 1.6rem !important;
    font-weight: 300;
  }
  .mbn5 .thumbnail-item .thumb img {
    border-radius: 10px;
  }
}

/* 롤오버 효과 */
.thumbnail-item {
  position: relative;
  overflow: visible;
  border-radius: 20px;
}

.thumbnail-item .thumb {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  border-radius: inherit;
  overflow: visible;
  z-index: 0;
}

.thumbnail-item .thumb img {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  z-index: 3;
}

.thumbnail-item .thumb::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 20px;
  background: linear-gradient(
      to bottom right, 
      rgba(20,166,226,0.9) 0%,
      rgba(158,200,216,0.9) 40%,
      rgba(244,229,200,0.9) 100%
    );
  filter: blur(6px);
  opacity: 0;
  z-index: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.thumbnail-item .thumb::after {
  content: "";
  position: absolute;
  top: -1px; 
  left: -1px; 
  right: -1px; 
  bottom: -1px;
  border-radius: 21px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #14a6e2, #f4e5c8);
  background-origin: border-box;
  background-clip: border-box;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.thumbnail-item:hover .thumb::before {
  opacity: 0.5;
}

.thumbnail-item:hover .thumb::after {
  opacity: 1;
}

@media (max-width: 1024px) {
  .thumbnail-item,
  .thumbnail-item .thumb,
  .thumbnail-item .thumb img {
    border-radius: 10px;
  }

  .thumbnail-item .thumb::after {
    border-radius: 11px;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
  }
}

.thumbnail-item a,
.thumbnail-item .thumb {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}


/* ========================================
   MBN6 - NEWS
======================================== */
.mbn6 {
  display: block;
  margin: 0;
  padding: 200px 0;
}
.mbn6 .tit {
  text-align: center;
  font-weight: 700;
  font-size: 1.7vw;
  line-height: 1.8vw;
  color: #00a5e4;
  letter-spacing: -0.5px;
}
.mbn6 .tit p {
  font-weight: 700;
  font-size: 4.15vw;
  line-height: 4.5vw;
  color: #fff;
  text-transform: uppercase;
}
.mbn6 .tx {
  text-align: center;
  color: #fff;
  font-size: 1.2vw;
  font-weight: 300;
  line-height: 1.6vw;
  padding: 1.6% 0 1.8%;
}

.mbn6 ul {
  display: block;
  padding: 0;
  margin: 0;
}
.mbn6 ul li.prdItem {
  text-align: left;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 10px;
}
.mbn6 ul li.prdItem .itemLay {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}
.mbn6 ul li.prdItem .itemLay .thumbnail {
  width: 100%;
  padding-top: 74.77%;
  overflow: hidden;
  position: relative;
}
.mbn6 ul li.prdItem .itemLay .thumbnail img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-user-drag: none;
  user-drag: none;
}
.mbn6 ul li.prdItem .itemLay .subject {
  padding-top: 4%;
  text-align: left;
}
.mbn6 ul li.prdItem .itemLay .subject a {
  font-size: 0.8vw;
  line-height: 1.0vw;
  color: #fff;
  font-weight: 500;
}

.mbn6 .bxSliderBestBanner {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 3.2%;
}
.mbn6 .bxSliderPrev,
.mbn6 .bxSliderNext {
  position: absolute;
  top: 0%;
  z-index: 9;
  cursor: pointer;
}
.mbn6 .bxSliderPrev {
  right: 80px;
}
.mbn6 .bxSliderNext {
  right: 182px;
}
.mbn6 .bx-next-img,
.mbn6 .bx-prev-img {
  width: 30px;
}
.mbn6 .bxSliderBestBanner .more {
  position: absolute;
  top: 0%;
  right: 131px;
}

@media (min-width:1025px){
  .mbn6 ul li.prdItem {
    width: 25%;
    padding: 0 10px;
  }
  .mbn6 .bxSliderNext:hover .bx-next-img {
    content: url('../imgs/arr13on.png');
  }
  .mbn6 .bxSliderPrev:hover .bx-prev-img {
    content: url('../imgs/arr14on.png');
  }
}

@media (max-width:1024px){
  .mbn6 {
    padding: 20% 0 15%;
  }
  .mbn6 .tit {
    font-weight: 600;
    font-size: 4.5vw;
    line-height: 4.5vw;
    padding-top: 6%;
  }
  .mbn6 .tit p {
    font-weight: 600;
    font-size: 8.8vw;
    line-height: 8.8vw;
    padding: 1.8% 0 3%;
  }
  .mbn6 .tx {
    font-size: 3.7vw;
    font-weight: 300;
    line-height: 5.2vw;
    padding: 0 0 12%;
  }
  .mbn6 ul li.prdItem {
    width: 66.66%;
    padding: 0 10px;
  }
  .mbn6 ul li.prdItem .itemLay .subject {
    padding-top: 5%;
    text-align: center;
    overflow: hidden;
    height: 3.7vw;
  }
  .mbn6 ul li.prdItem .itemLay .subject a {
    font-size: 3.7vw;
    line-height: 3.7vw;
    font-weight: 500;
  }
  .mbn6 .bxSliderBestBanner {
    padding: 0 0 10%;
    box-sizing: border-box;
  }
  .mbn6 .bx-wrapper {
    margin: 0 auto !important;
  }
  .mbn6 .bx-viewport {
    overflow: visible !important;
  }
  .mbn6 .bxSliderPrev,
  .mbn6 .bxSliderNext {
    position: absolute;
    top: 91%;
    z-index: 9;
    cursor: pointer;
    width: 17px;
  }
  .mbn6 .bxSliderPrev {
    left: 50%;
    margin-left: 10px;
  }
  .mbn6 .bxSliderNext {
    right: 50%;
    margin-right: 10px;
  }
  .mbn6 .bx-next-img {
    width: 17px;
  }
  .mbn6 .bx-prev-img {
    width: 17px;
  }
  .mbn6 .bxSliderBestBanner .more {
    display: none;
  }
}


/* ========================================
   MBN7 - ESG 경영
======================================== */
.mbn7 {
  width:100%;
  position: relative;
}
.mbn7 img {
  width:100%;
  display:block;
}

.mbn7 .centered-text {
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  transform: translate(-50%, -50%);
  text-align:center;
}

.mbn7 .centered-text p {
  font-size:1.6vw;
  font-weight:700;
  line-height:1.8vw;
  color:#00a5e4;
}
.mbn7 .centered-text .tt {
  color:#fff;
  font-size:74px;
  font-weight:700;
  line-height:80px;
  padding-bottom:28px;
}
.mbn7 .centered-text .tt span {
  display:block;
  font-size:58px;
  font-weight:600;
}
.mbn7 .centered-text .tx {
  color:#fff;
  font-size:1.2vw;
  font-weight:300;
  line-height:1.5vw;
  padding-top:3%;
}

@media screen and (max-width: 1024px) {
  .mbn7 .centered-text p {
    font-size:4.5vw;
    line-height:6vw;
  }
  .mbn7 .centered-text .tt {
    font-size:9.2vw;
    line-height:9vw;
    font-weight:600;
  }
  .mbn7 .centered-text .tt span {
    font-size:6.8vw;
    font-weight:500;
  }
  .mbn7 .centered-text .tx {
    display:block;
    width:90%;
    margin:0 auto;
    font-size:3.3vw;
    line-height:5vw;
    font-weight:200;
    padding-top:0;
    letter-spacing:-0.5px;
  }
  .mbn7 .centered-text .tx br {
    display:none;
  }
}

.mbn7 .centered-text [data-aos="fade-down"] {
  opacity: 0;
  transform: translateY(-50px) !important;
  transform-origin: center center !important;
}
.mbn7 .centered-text [data-aos="fade-down"].aos-animate {
  opacity: 1;
  transform: translateY(0) !important;
  transition-property: transform, opacity;
}


/* ========================================
   MBN8 - PARTNERS
======================================== */
.mbn8 { 
    position: relative; 
    padding: 100px 0; 
    --img-height: 45px; 
    --half-gap: 8px; 
}

@media (max-width: 1024px) { 
    .mbn8 { 
        --img-height: 25px; 
        --half-gap: 6px; 
    } 
}

.mbn8 .tit { 
    text-align: center; 
    font-weight: 700; 
    font-size: 1.7vw; 
    line-height: 1.8vw; 
    color: #00a5e4; 
    letter-spacing: -0.5px; 
}
.mbn8 .tit p { 
    font-weight: 700; 
    font-size: 4.15vw; 
    line-height: 4.5vw; 
    color: #fff; 
    text-transform: uppercase; 
}
.mbn8 .tx { 
    text-align: center; 
    color: #fff; 
    font-size: 1.2vw; 
    font-weight: 300; 
    line-height: 1.6vw; 
    padding: 1.6% 0 5%; 
}
.mbn8 .client { 
    overflow: hidden; 
    position: relative; 
}
.mbn8 .client::before, 
.mbn8 .client::after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 30%; 
    pointer-events: none; 
    z-index:2; 
}
.mbn8 .client::before { 
    left: 0; 
    background: linear-gradient(to right, rgba(20,24,39,1), rgba(20,24,39,0)); 
}
.mbn8 .client::after { 
    right: 0; 
    background: linear-gradient(to left, rgba(20,24,39,1), rgba(20,24,39,0)); 
}
.mbn8 .client-row { 
    overflow: hidden; 
    margin-bottom: 16px; 
}
.mbn8 .client-row:last-child { 
    margin-bottom: 0; 
}
.mbn8 .client-track { 
    display: flex; 
    font-size: 0; 
}
.mbn8 .client-group { 
    display: flex; 
}
.mbn8 .client-group span { 
    width: 280px; 
    height: 120px; 
    background: rgba(255,255,255,0.2); 
    text-align: center; 
    position: relative; 
    margin: 0 var(--half-gap); 
}
.mbn8 .client-group img { 
    display: block; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    height: var(--img-height); 
}

@media (max-width: 1024px) { 
    .mbn8 { 
        padding: 0% 0 12%; 
    } 
    .mbn8 .tit { 
        font-weight: 600; 
        font-size: 4.5vw; 
        line-height: 4.5vw; 
        padding-top: 6%; 
    } 
    .mbn8 .tit p { 
        font-weight: 600; 
        font-size: 8.8vw; 
        line-height: 8.8vw; 
        padding: 1.8% 0 3%; 
    } 
    .mbn8 .tx { 
        font-size: 3.7vw; 
        font-weight: 300; 
        line-height: 5.2vw; 
        padding: 0 0 12%; 
    } 
    .mbn8 .client-row { 
        margin-bottom: 12px; 
    } 
    .mbn8 .client-group span { 
        width: 110px; 
        height: 47px; 
    } 
}


/* ========================================
   NEWSLETTER
======================================== */
.newsletter { 
    width:100%; 
    position:relative; 
}
.newsletter .box { 
    position:absolute; 
    top:0; 
    width:100%; 
    height:100%; 
    display:flex; 
    align-items:center; 
}
.newsletter picture { 
    width:100%;
}
.newsletter img { 
    width:100%; 
    display:block;
}

.newsletter .stay {
  width:46%; 
  background:#1B1B1B; 
  margin-left:8%; 
  padding:4% 6%;
}
.newsletter .stay .tx1 { 
    font-weight:700; 
    font-size:1.7vw; 
    line-height:1.8vw; 
    color:#00a5e4;
}
.newsletter .stay .tx1 p { 
    font-weight:700; 
    font-size:4.15vw; 
    line-height:4.5vw; 
    color:#fff; 
    text-transform:uppercase; 
    padding:0 0 5%;
}
.newsletter .stay textarea {
  width:100%; 
  height:50px; 
  border:0; 
  outline:none; 
  background:#fff; 
  color:#b4b4b4; 
  font-size:14px; 
  font-weight:200; 
  line-height:18px; 
  padding:16px; 
  box-sizing:border-box;
}
.newsletter .stay .newlbt { 
    display:block; 
    width:100%; 
    height:50px; 
    text-align:center; 
    background:#00a5e4; 
    line-height:50px; 
    color:#fff; 
    font-size:14px; 
    font-weight:200; 
    cursor:pointer;
}
.newsletter .stay .tx2 { 
    font-size:14px; 
    color:#fff; 
    font-weight:100; 
    line-height:20px; 
    padding-top:20px;
}
.newsletter .stay .tx2 .mo { 
    display:none;
}

.newsletter .get {
  width:32%; 
  background:#0c0c0c; 
  margin-left:4%; 
  padding:3% 3%;
}
.newsletter .get .tx1 { 
    font-weight:700; 
    font-size:1.7vw; 
    line-height:1.8vw; 
    color:#00a5e4; 
    padding-bottom:2%;
}
.newsletter .get .tx1 p { 
    font-weight:700; 
    font-size:4.15vw; 
    line-height:4.5vw; 
    color:#fff; 
    text-transform:uppercase;
}
.newsletter .get .tx2 { 
    font-size:14px; 
    color:#fff; 
    font-weight:100; 
    line-height:20px; 
    padding-bottom:5%;
}
.newsletter .get .tx2 span { 
    color:#b4b4b4;
}
.newsletter .get ul { 
    width:100%; 
    display:flex; 
    align-items:center; 
    padding:2% 0 1%;
}
.newsletter .get ul .tt { 
    width:20%;
}
.newsletter .get ul .tt span { 
    display:block; 
    width:100%; 
    height:30px; 
    background:#00a5e4; 
    color:#fff; 
    text-align:center; 
    line-height:30px; 
    font-weight:200; 
    font-size:14px;
}
.newsletter .get ul .tx { 
    width:80%; 
    padding-left:3%; 
    font-size:12px; 
    font-weight:100; 
    color:#fff;
}

.newsletter_line { 
    width:100%; 
    background:#4c4c4c; 
    height:1px;
}

@media screen and (max-width: 1024px) {
  .newsletter .box {
    display:block; 
    position:relative;
  }
  .newsletter .stay {
    width:88%; 
    margin:0 0 0 6%; 
    padding:16% 6% 8%; 
    background:#000;
  }
  .newsletter .stay .tx1 { 
      font-size:4.5vw; 
      line-height:4.5vw;
  }
  .newsletter .stay .tx1 p { 
      font-size:8.8vw; 
      line-height:8.8vw;
  }
  .newsletter .stay textarea {
    font-size:12px; 
    height:45px; 
    padding:14px;
  }
  .newsletter .stay .newlbt { 
      height:45px; 
      line-height:45px; 
      font-size:12px;
  }
  .newsletter .stay .tx2 { 
      font-size:12px; 
      line-height:16px;
  }
  .newsletter .stay .tx2 .pc { 
      display:none;
  }
  .newsletter .stay .tx2 .mo { 
      display:block;
  }
  
  .newsletter .get {
    width:88%; 
    margin:0 0 0 6%; 
    padding:8% 6% 16%; 
    background:#000;
  }
  .newsletter .get .tx1 { 
      font-size:4.5vw; 
      line-height:4.5vw;
  }
  .newsletter .get .tx1 p { 
      font-size:8.8vw; 
      line-height:8.8vw; 
      padding:2% 0 4%;
  }
  .newsletter .get .tx2 { 
      font-size:12px; 
      padding-bottom:8%;
  }
  .newsletter .get .tx2 br { 
      display:none;
  }
  .newsletter .get ul { 
      padding:4% 0 2%;
  }
  .newsletter .get ul .tt span { 
      height:26px; 
      line-height:26px; 
      font-size:11px;
  }
  .newsletter .get ul .tx { 
      font-size:11px;
  }
}

/* ==================== mbn6 News Swiper ==================== */
.mbn6 {
  display: block;
  margin: 0;
  padding: 200px 0;
}
.mbn6 .tit {
  text-align: center;
  font-weight: 700;
  font-size: 1.7vw;
  line-height: 1.8vw;
  color: #00a5e4;
  letter-spacing: -0.5px;
}
.mbn6 .tit p {
  font-weight: 700;
  font-size: 4.15vw;
  line-height: 4.5vw;
  color: #fff;
  text-transform: uppercase;
}
.mbn6 .tx {
  text-align: center;
  color: #fff;
  font-size: 1.2vw;
  font-weight: 300;
  line-height: 1.6vw;
  padding: 1.6% 0 1.8%;
}

.mbn6 .news-swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 3.2%;
}

.mbn6 .prdItem {
  text-align: left;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 10px;
}

.mbn6 .prdItem .itemLay {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.mbn6 .prdItem .itemLay .thumbnail {
  width: 100%;
  padding-top: 74.77%;
  overflow: hidden;
  position: relative;
}

.mbn6 .prdItem .itemLay .thumbnail img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-user-drag: none;
  user-drag: none;
}

.mbn6 .prdItem .itemLay .subject {
  padding-top: 4%;
  text-align: left;
}

.mbn6 .prdItem .itemLay .subject a {
    font-size: 0.8vw;
    line-height: 1.0vw;
    color: #fff;
    font-weight: 500;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mbn6 .swiper-button-prev,
.mbn6 .swiper-button-next {
  position: absolute;
  top: 0%;
  z-index: 9;
  cursor: pointer;
  width: 30px;
  height: 30px;
}

.mbn6 .swiper-button-prev {
  right: 80px;
}

.mbn6 .swiper-button-next {
  right: 182px;
}

.mbn6 .swiper-button-prev img,
.mbn6 .swiper-button-next img {
  width: 30px;
}

.mbn6 .swiper-button-prev::after,
.mbn6 .swiper-button-next::after {
  display: none;
}

@media (min-width:1025px) {
  .mbn6 .swiper-button-next:hover img {
    content: url('../imgs/arr13on.png');
  }
  .mbn6 .swiper-button-prev:hover img {
    content: url('../imgs/arr14on.png');
  }
}

@media (max-width:1024px) {
  .mbn6 {
    padding: 20% 0 15%;
  }
  .mbn6 .tit {
    font-weight: 600;
    font-size: 4.5vw;
    line-height: 4.5vw;
    padding-top: 6%;
  }
  .mbn6 .tit p {
    font-weight: 600;
    font-size: 8.8vw;
    line-height: 8.8vw;
    padding: 1.8% 0 3%;
  }
  .mbn6 .tx {
    font-size: 3.7vw;
    font-weight: 300;
    line-height: 5.2vw;
    padding: 0 0 12%;
  }
  
  .mbn6 .prdItem .itemLay .subject {
    padding-top: 5%;
    text-align: center;
    overflow: hidden;
  }
  .mbn6 .prdItem .itemLay .subject a {
    font-size: 3.7vw;
    line-height: 3.7vw;
    font-weight: 500;
  }
  
  .mbn6 .news-swiper {
    padding: 0 0 10%;
    box-sizing: border-box;
  }
  
  .mbn6 .swiper-button-prev,
  .mbn6 .swiper-button-next {
    position: absolute;
    top: auto;
    bottom: 0;
    z-index: 9;
    cursor: pointer;
    width: 17px;
    height: 17px;
  }
  .mbn6 .swiper-button-prev {
    left: 50%;
    right: auto;
    margin-left: 10px;
  }
  .mbn6 .swiper-button-next {
    right: 50%;
    margin-right: 10px;
  }
  .mbn6 .swiper-button-prev img,
  .mbn6 .swiper-button-next img {
    width: 17px;
  }
}