@charset "utf-8";
/* mobile */
@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css);* {
    font-family: Pretendard,sans-serif
}

.title_box { display: flex; align-items: flex-start; margin-top: 80px; } 
.title_box .title { font-size: 50px; line-height: 70px; font-weight: 700; } 
.title_box .title strong {color: #1864cb; font-weight: 700;}
.title_box .s_txt { margin: 70px 0 0 auto; color: #666; font-size: 14px; line-height: 18px; font-weight: 300; } 
.ma_environment_wrap { background: #fff; width:100%; max-width:1280px; margin:50px auto 0; } 
.ma_environment { display: flex; margin-top: 26px; padding-bottom: 90px; } 
.ma_environment .datalist { flex: 1; } 
.ma_environment .datalist > li + li { margin-top: 16px; } 
.ma_environment .datalist .inbox { display: flex; align-items: center; padding: 28px 40px 28px 30px; border: 0.5px solid #e0e1e2; border-radius: 20px; background: #fff; box-shadow: 0px 3px 10px 0px rgba(104, 111, 115, 0.15); } 
.ma_environment .datalist .inbox img {height: 75px;border-radius: 10px;}
.ma_environment .datalist .inbox .ico { width: 75px; height: 75px; margin-right: 20px; border-radius: 10px; background-repeat: no-repeat; background-position: center; background-size: contain; } 
.ma_environment .datalist .inbox .tit { font-size: 24px; line-height: 31px; font-weight: 700; } 
.ma_environment .datalist .inbox .con { position: relative; margin-left: auto; text-align: right; } 
.ma_environment .datalist .inbox .con .txt { font-size: 35px; line-height: 49px; font-weight: 700; } 
.ma_environment .datalist .inbox .con .cnt { position: absolute; right: 0; top: 100%; margin-top: -2px; color: #ff5042; font-size: 12px; line-height: 16px; } 
.ma_environment .databox { flex: 1; position: relative; margin-left: 20px; border-radius: 20px; background-color: #FFF; background-size: cover; } 
.ma_environment .databox .leftbox { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 43px; left: 40px; } 
.ma_environment .databox .leftbox .tit { font-size: 24px; line-height: 31px; font-weight: 700; } 
.ma_environment .databox .leftbox .con .txt { font-size: 35px; line-height: 49px; font-weight: 700; } 
.ma_environment .databox .leftbox .con .cnt { margin-top: -2px; padding-right: 2px; color: #2ebab4; font-size: 12px; line-height: 16px; text-align: right; } 
.ma_environment .databox .rightbox { position: absolute; top: 42px; left: 237px; color: #393f44; font-size: 26px; line-height: 34px; font-weight: 700; } 
.ma_environment .databox .rightbox em { color: #2ebab4; }
.ma_environment .databox .visual-slider { max-width: 630px; height: 430px; margin: 0; }
.ma_environment .databox .visual-slider .slick-list { height: 100%; }
.ma_environment .databox .visual-slider .slick-list .slick-track { height: 100%; }
.ma_environment .databox .visual-slider .slick-list .slick-track div { height: 100%; }
.ma_environment .databox .slick-arrow { position: absolute; top: calc(50% + 15px); transform: translateY(-50%); width: 35px; height: 60px; font-size: 0; line-height: 0; z-index: 5; border: none; background-color: transparent; background-image: url("/img/eco/ico_sprite.png?v=0.3"); background-repeat: no-repeat; }
.ma_environment .databox .slick-next { right: 18px; background-position: -339px -240px; }
.ma_environment .databox .slick-prev { left: 20px; background-position: -278px -240px; }
.ma_environment .databox .slick-next:before,
.ma_environment .databox .slick-prev:before { display: none; }
.ma_environment .databox .slick-dots { display: flex; align-items: center; gap: 12px; position: absolute; right: 55px; bottom: -50px; height: 50px; z-index: 2; width: auto; }
.ma_environment .databox .slick-dots li { width: auto; height: auto; margin: 0; padding: 0; }
.ma_environment .databox .slick-dots button { all: unset; display: block; width: 12px; height: 12px; background: #d1d1d1; border-radius: 50%; font-size: 0; line-height: 0; text-indent: -9999px; cursor: pointer; }
.ma_environment .databox .slick-dots .slick-active button { background: #1c8be0; }
.ma_environment .databox img { display: block; border-radius: 30px; width: 100%; height: 100%; }
.ma_environment .databox .control { height: 50px; width: 100%; top: auto; bottom: 0; background: #fff; position: absolute; right: 0; }
.ma_environment .databox .control button { width: 14px; height: 14px; font-size: 0; position: absolute; line-height: 0; border: none; background-color: transparent; background-image: url("/img/eco/ico_sprite.png?v=0.3"); background-repeat: no-repeat; }
.ma_environment .databox .control button.ctr_btn { top: 18px; right: 30px; z-index: 3; }
.ma_environment .databox .control button.pause { background-position: -68px -8px; }
.ma_environment .databox .control button.play { background-position: -96px -8px; }
@media (max-width: 900px) {
  .ma_environment_wrap .inner_center{padding:0 20px;}
  .title_box{flex-wrap:wrap;}
  .title_box .title{font-size:24px; line-height:34px; margin:0; text-align:center; width:100%;}
  .title_box .s_txt{margin:10px 0 0 auto;}
  .ma_environment{flex-wrap:wrap;padding-bottom: 20px;}
  .ma_environment .datalist{flex:auto; width:100%;}
  .ma_environment .datalist .inbox{padding:15px 30px 15px 20px;}
  .ma_environment .datalist .inbox img {height: 65px;border-radius: 10px;}
  .ma_environment .datalist .inbox .ico{width:60px; height:60px;}
  .ma_environment .datalist .inbox .tit{font-size:16px; line-height:30px; margin:0;}
  .ma_environment .datalist .inbox .con .txt{font-size:24px; line-height:26px; margin:0;}
  .ma_environment .datalist .inbox .con .cnt{margin-top:5px;}
  .ma_environment .databox{flex:auto; width:100%; display:flex; justify-content:space-between; padding:20px 0px; margin-left:0;}
  .ma_environment .databox .slick-next { right: -10px; }
  .ma_environment .databox .slick-prev { left: -12px; }
  .ma_environment .databox .leftbox{position:static;}
  .ma_environment .databox .leftbox .tit{font-size:16px; line-height:28px; margin-bottom:10px;}
  .ma_environment .databox .leftbox .con .txt{font-size:24px; line-height:34px; margin-bottom:10px;}
  .ma_environment .databox .rightbox{font-size:16px; line-height:26px; position:static;}
  .ma_environment .databox .visual-slider { max-width: 100%;height: 100%;}
}