@charset "UTF-8";





/*! mobile 버전 - css */


@media (max-width: 1023px) {


.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset,28%) !important;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color));}


  .reset-y {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  }
  .reset-y.staggered {
    transform: translateY(0);
    opacity: 1;
  }
  .reset-scale {
    transform: scale(0);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  }
  .reset-scale.staggered {
    transform: scale(1);
    opacity: 1;
  }

 .max-1920.renew {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
  .max-1920.renew .renew-area {
  margin-top:0px;
    padding-bottom: 40px;
    padding-bottom: 100px;

  }
  .max-1920.renew .renew-top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-size: 2rem;
    padding-top: 60px;
    padding-top: 6rem;
    padding-bottom: 21px;
    padding-bottom: 2.1rem;
    font-weight: 700;
  }
  .max-1920.renew .sub-swiper {

    position: relative;

    transform: translate(0%, 0);
    z-index: 30;
    background: #2F3136;
    width: 329px;
    width: 32.9rem;
    height: 240px;
    height: 24rem;
    padding: 24px 30px;
    padding: 2.4rem 3rem;
    border-radius:0px;
	color:#fff;
  }



  .max-1920.renew .sub-swiper { position: relative;  z-index: 3;  width:100%;margin:0 auto;   height:200px;  background: #2F3136;  border-radius: 0px 0px 0px 0px;  padding: 20px 20px;	color:#fff;  }

  .max-1920.renew .sub-swiper  dl.renew_txtbox{margin-top:0px;padding:0px 0 0 0px; width:100%; height:200px;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.btn_arr{text-align:right;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.btn_arr img{position:absolute;bottom:-20px; right:0px;width:37px; margin:0; text-align:right;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dt{font-size:15px; color:#fff; line-height:1.5;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.tit{padding-bottom:10px; font-size:20px; color:#ffff; line-height:1.5; font-weight:500; letter-spacing:-0.05em;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.txt{font-size:15px; color:#fff; padding-top:10px; line-height:1.5; padding-right:40px;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.txt span.pc_cut{display:inline;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.tit span.txt_bg{background:url('/file/img/s_img/txt_bg.gif') repeat-x 0 bottom;}




  .max-1920.renew .sub-swiper .swiper-wrapper {  height: calc(100% - 40px);  }
  .max-1920.renew .sub-swiper .swiper-controler-renew-area {  position: relative; width: 100%;  height: 48px; height: 4.8rem; display: flex; align-items: center;  justify-content: center; }
  .max-1920.renew .sub-swiper .swiper-controler-renew-area .swiper-pagination .swiper-pagination-bullet { width: 6px; width: 0.6rem;  height: 6px; height: 0.6rem;  opacity: 1;  }
  .max-1920.renew .sub-swiper .swiper-controler-renew-area .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet { margin-left: 9px;   margin-left: 0.9rem; }
  .max-1920.renew .sub-swiper .swiper-controler-renew-area .swiper-button-prev, .max-1920.renew .sub-swiper .swiper-controler-renew-area .swiper-button-next { opacity: 1; }
  .max-1920.renew .renew-sub-box .sub-tit { font-size: 18px;  font-size: 1.8rem;  font-weight: 700;   line-height: 1.4;  }




.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset,50%);
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}


  .max-1920.renew .renew-sub-box .sub-txt {
    display: block;
    margin-top: 15px;
    margin-top: 1.5rem;
    font-size: 13px;
    font-size: 1.3rem;
    color: #666;
    line-height: 1.7;
  }
  .max-1920.renew .pc-only {
    display: block;
  }
  .max-1920.renew img {
    width: 100%;
  }
  .swiper-pagination-bullet {
    width: 6px;
    width: 0.6rem;
    height: 6px;
    height: 0.6rem;
    background-color: #e5e5e5;
  }
  .swiper-pagination-bullet-active {
    width: 6px;
    width: 0.6rem;
    height: 6px;
    height: 0.6rem;
    background-color: #da291c;
  }
 
  .link-box {
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.5);
    width: 343px;
    width: 34.3rem;
    height: 284px;
    height: 28.4rem;
  }
  .link-box .link-list {
    padding: 36px 22px;
    padding: 3.6rem 2.2rem;
  }
  .link-box .link-list li {
    display: inline-block;
  }
  .link-box .link-list li a {
    font-size: 14px;
    font-size: 1.4rem;
  }
  .link-box .link-list li a .txt {
    margin-left: 12px;
    margin-left: 1.2rem;
  }
  .link-box .link-list li:nth-of-type(1) a {
    display: flex;
    align-items: center;
  }
  .link-box .link-list li:nth-of-type(1) .link-img {
    width: 64px;
    width: 6.4rem;
    height: 64px;
    height: 6.4rem;
    background: url(../images/main/link_info1_mo.png) no-repeat;
    background-size: 100% 100%;
  }
  .link-box .link-list li:nth-of-type(2) {
    margin-left: 28px;
    margin-left: 2.8rem;
  }
  .link-box .link-list li:nth-of-type(2) a {
    display: flex;
    align-items: center;
  }
  .link-box .link-list li:nth-of-type(2) .link-img {
    width: 64px;
    width: 6.4rem;
    height: 64px;
    height: 6.4rem;
    background: url(../images/main/link_info2_mo.png) no-repeat;
    background-size: 100% 100%;
  }
  .link-box .link-list li:nth-of-type(3) {
    margin-top: 25px;
    margin-top: 2.5rem;
    position: relative;
  }
  .link-box .link-list li:nth-of-type(3) a {
    display: flex;
    flex-direction: column;
  }
  .link-box .link-list li:nth-of-type(3) a .txt {
    margin-top: 8px;
    margin-top: 0.8rem;
    margin-left: 0;
  }
  .link-box .link-list li:nth-of-type(3) a .txt:after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 0;
    width: 31px;
    width: 3.1rem;
    height: 13px;
    height: 1.3rem;
    background: url(../images/main/ico_right_btn.png) no-repeat;
    background-size: 31px 13px;
    background-size: 3.1rem 1.3rem;
  }
  .link-box .link-list li:nth-of-type(3) .link-img {
    width: 295px;
    width: 29.5rem;
    height: 105px;
    height: 10.5rem;
    background: url(../images/main/link_info3_mo.png) no-repeat;
    background-size: 100% 100%;
  }
  .max-1920.product {
    position: relative;
    overflow: hidden;
  }
  .max-1920.product .product-cont {
    padding-bottom: 60px;
    padding-bottom: 6rem;
  }
  .max-1920.product .figure-bg {
    z-index: -1;
    position: absolute;
    right: -10px;
    right: -1rem;
    top: -43px;
    top: -4.3rem;
    width: 268px;
    width: 26.8rem;
    height: 381px;
    height: 38.1rem;
    background: url(../images/main/bg_green_mo.png) no-repeat;
    background-size: 100%;
    transform: translate(100px, -100px);
    transform: translate(10rem, -10rem);
  }
  .max-1920.product .figure-bg.mo {
    display: block;
  }
  .max-1920.product .figure-bg.pc {
    display: none;
  }
  .max-1920.product .pr-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    margin-top: 6rem;
  }
  .max-1920.product .pr-top span {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    font-size: 2rem;
    width: 62%;
  }
  .max-1920.product .pr-cont-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-top: 1rem;
  }
  .max-1920.product .pr-cont-box .pr-cont1 {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-top: 1.5rem;
  }
  .max-1920.product .pr-cont-box .pr-cont1 .pr-title1 {
    text-align: center;
    margin-top: 19px;
    margin-top: 1.9rem;
    font-size: 30px;
    font-size: 3rem;
    font-weight: 700;
  }
  .max-1920.product .pr-cont-box .pr-cont1 .pr-title2 {
    text-align: center;
    color: #666;
    margin-top: 10px;
    margin-top: 1rem;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.8;
  }
  .max-1920.product .pr-cont-box .pr-cont2 {
    order: 1;
    display: flex;
  }
  .max-1920.product .pr-cont-box .pr-cont2 img {
    width: 100%;
  }
  .max-1920.product .pr-cont-box .pr-link {
    display: none;
  }
  .max-1920.product .swiper-controler-renew-area {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-size: 2rem;
  }
  .max-1920.product .swiper-controler-renew-area [class*=swiper-button] {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin-top: 0;
    width: 40px;
    width: 4rem;
    height: 40px;
    height: 4rem;
    border: 1px solid #e5e5e5;
    border-radius: 48px;
    border-radius: 4.8rem;
    background-size: 8px 16px;
    background-size: 0.8rem 1.6rem;
    opacity: 1;
  }
  .max-1920.product .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {
    background-image: url(../images/main/ico_renew_swiper_btn_prev.png);
  }
  .max-1920.product .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {
    background-image: url(../images/main/ico_renew_swiper_btn_next.png) !important;
	background-size:60px; 

  }
  .max-1920.product .swiper-controler-renew-area .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: auto;
    right: auto;
    bottom: 0;
    width: auto;
    color: #666;
    margin: 0 32px;
    margin: 0 3.2rem;
    font-size: 12px;
    font-size: 1.2rem;
  }
  .max-1920.product .swiper-controler-renew-area .swiper-pagination span {
    font-family: "Roboto";
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: 700;
  }
  .max-1920.product .swiper-controler-renew-area .swiper-pagination .swiper-pagination-current {
    margin-right: 5px;
    margin-right: 0.5rem;
    margin-top: 2px;
    margin-top: 0.21rem;
    color: #da291c;
    font-weight: 700;
  }
  .max-1920.product .swiper-controler-renew-area .swiper-pagination .swiper-pagination-total {
    color: #666;
    margin-left: 5px;
    margin-left: 0.5rem;
    margin-top: 2px;
    margin-top: 0.21rem;
  }
  .max-1920.product .swiper-controler-renew-area .play-puase-btn {
    width: 8px;
    width: 0.8rem;
    height: 12px;
    height: 1.2rem;
    background: url(../images/main/ico_pause_btn_mo.png) no-repeat;
    margin-left: 16px;
    margin-left: 1.6rem;
  }
  .max-1920.product .swiper-controler-renew-area .play-puase-btn.stop {
    width: 8px;
    width: 0.8rem;
    height: 10px;
    height: 1rem;
    background: url(../images/main/ico_play_btn_mo.png) no-repeat;
    margin-left: 16px;
    margin-left: 1.6rem;
  }
  .max-1920.news {
    background: #f7f7f7;
  }
  .max-1920.news .news-top {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 60px;
    padding-top: 6rem;
  }
  .max-1920.news .news-top span {
    font-size: 20px;
    font-size: 2rem;
    font-weight: 700;
  }
  .max-1920.news .news-top a span {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-top: 24px;
    padding-top: 2.4rem;
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: 400;
  }
  .max-1920.news .news-top a span:after {
    content: "";
    display: inline-block;
    position: absolute;
    right: -10px;
    right: -1rem;
    width: 5px;
    width: 0.5rem;
    height: 10px;
    height: 1rem;
    background: url(../images/main/ico_btn_link_mo.png) no-repeat;
    background-size: 5px 10px;
    background-size: 0.5rem 1rem;
  }
  .max-1920.news .news-swiper {
    padding-top: 24px;
    padding-top: 2.4rem;
    padding-bottom: 60px;
    padding-bottom: 6rem;
    margin-left: 13px;
    margin-left: 1.3rem;
    position: relative;
  }
  .max-1920.news .news-swiper .news-cont-box {
    padding-bottom: 30px;
    padding-bottom: 3rem;
  }
  .max-1920.news .news-swiper .swiper-controler-renew-area {
    width: 100%;
    height: 48px;
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-size: 2rem;
  }
  .max-1920.news .news-swiper .swiper-controler-renew-area [class*=swiper-button] {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin-top: 0;
    width: 40px;
    width: 4rem;
    height: 40px;
    height: 4rem;
    border: 1px solid #e5e5e5;
    border-radius: 48px;
    border-radius: 4.8rem;
    background-size: 8px 16px;
    background-size: 0.8rem 1.6rem;
    opacity: 1;
  }
  .max-1920.news .news-swiper .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {
    background-color: #fff;
    background-image: url(../images/main/ico_renew_swiper_btn_prev.png);
  }
  .max-1920.news .news-swiper .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {
    background-color: #fff;
    background-image: url(../images/main/ico_renew_swiper_btn_next.png);
  }
  .max-1920.news .news-swiper .swiper-controler-renew-area .swiper-pagination {
    position: relative;
    left: auto;
    right: auto;
    bottom: 0;
    margin: 0 32px;
    margin: 0 3.2rem;
  }
  .max-1920.news .news-swiper .swiper-controler-renew-area .swiper-pagination .swiper-pagination-bullet {
    width: 6px;
    width: 0.6rem;
    height: 6px;
    height: 0.6rem;
    background: #e5e5e5;
    opacity: 1;
  }
  .max-1920.news .news-swiper .swiper-controler-renew-area .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-left: 16px;
    margin-left: 1.6rem;
  }
  .max-1920.news .news-swiper .swiper-controler-renew-area .swiper-pagination .swiper-pagination-bullet-active {
    background: #DA291C;
  }
  .max-1920.news .news-cont {
    display: flex;
    flex-direction: column;
  }
  .max-1920.news .news-cont .news-imgwrap {
    overflow: hidden;
  }
  .max-1920.news .news-cont .news-imgwrap img {
    transition: transform ease-in-out 0.5s;
  }
  .max-1920.news .news-cont .news-imgwrap:hover img {
    transform: scale(1.05);
  }
  .max-1920.news .news-tit {
    font-weight: 700;
    font-size: 16px;
    font-size: 1.6rem;
    margin-top: 16px;
    margin-top: 1.6rem;
  }
  .max-1920.news .date {
    display: inline-block;
    color: #666;
    font-size: 12px;
    font-size: 1.2rem;
    margin-top: 6px;
    margin-top: 0.6rem;
  }
  .max-1920.news .news-imgwrap img {
    width: 100%;
  }
  .esg-cont-wrap .esg-top {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 60px;
    padding-top: 6rem;
  }
  .esg-cont-wrap .esg-top span {
    display: block;
    width: 255px;
    width: 25.5rem;
    font-size: 20px;
    font-size: 2rem;
    font-weight: 700;
  }
  .esg-cont-box {
    margin: 30px 16px 0;
    margin: 3rem 1.6rem 0;
  }
  .esg-cont-box li.esg-cont:last-child {
    margin-right: 0;
  }
  .esg-cont-box li.esg-cont .img1 {
    position: relative;
    height: 290px;
    background: url(../images/main/esg_img1.jpg) no-repeat;
    background-size: 100% auto;
  }
  .esg-cont-box li.esg-cont .img2 {
    position: relative;
    height: 290px;
    background: url(../images/main/esg_img2.jpg) no-repeat;
    background-size: 100% auto;
  }
  .esg-cont-box li.esg-cont .img3 {
    position: relative;
    height: 290px;
    background: url(../images/main/esg_img3.jpg) no-repeat;
    background-size: 100% auto;
  }
  .esg-cont-box li.esg-cont .esg-cont-area {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 188px;
    top: 18.8rem;
    left: 14px;
    left: 1.4rem;
  }
  .esg-cont-box li.esg-cont .txt1 {
    font-size: 20px;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
  }
  .esg-cont-box li.esg-cont .txt2 {
    color: #fff;
    font-size: 13px;
    font-size: 1.3rem;
    margin-top: 7px;
    margin-top: 0.7rem;
  }
  .esg-cont-box li.esg-cont .txt3 {
    color: #fff;
    font-size: 13px;
    font-size: 1.3rem;
  }
  .esg-cont-box li.esg-cont .esg-link {
    display: none;
  }

  .top-btn {
    outline: none;
    display: none;
    opacity: 0;
    width: 46px;
    width: 4.6rem;
    height: 46px;
    height: 4.6rem;
    border-radius: 100%;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
    background: #E5E5E5 url(../images/common/ico_top_btn_black_mo.png) center no-repeat;
    background-size: 18px 20px;
    background-size: 1.8rem 2rem;
    box-sizing: border-box;
    transition: 0.3s;
    position: fixed;
    right: 16px;
    right: 1.6rem;
    bottom: 16px;
    bottom: 1.6rem;
    z-index: 90;
  }
  #footer {
    margin-top: 80px;
    margin-top: 8rem;
  }
  

  body.openLayer-mode {
    overflow: hidden;
  }
  .brand301-container #content .snacks-section.gum.max-1920 .photo-sec .item {
    z-index: 99;
  }

} /* end */




/*! pc 버전 - css */








@media (min-width: 1024px) {
 





  .reset-y {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  }
  .reset-y.staggered {
    transform: translateY(0);
    opacity: 1;
  }
  .reset-scale {
    transform: scale(0);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  }
  .reset-scale.staggered {
    transform: scale(1);
    opacity: 1;
  }
  
  .max-1920.renew {
    overflow: hidden;
   	margin-top:180px; margin-bottom:100px;
  }
  .max-1920.renew .renew-area {
    overflow: hidden;
  }
  .max-1920.renew .renew-swiper-container {
    margin: 0 auto;
    width: 1240px;
    width: 90rem;
    width: 900px;
  }
  .max-1920.renew .renew-top {
    font-size: 50px;
    font-size: 5rem;
    font-weight: 700;
    padding-top: 110px;
    padding-top: 11rem;
    padding-bottom: 80px;
    padding-bottom: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .max-1920.renew .renew-slider {
    position: relative;
  }
  .max-1920.renew .renew-cont-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .max-1920.renew .renew-cont-box img {
    width: 100%;
	max-width:900px;
	margin:0 auto;
    display: block;
  }
  .max-1920.renew .renew-swiper {
    padding-bottom: 220px;
    padding-bottom: 120px;
    overflow: visible;

  }




  .max-1920.renew .renew-swiper .swiper-slide-active { opacity:1;width:100%; max-width:900px; margin:0 auto;}
  .max-1920.renew .renew-swiper .swiper-slide-next {opacity:0.5;width:100%; max-width:900px; margin:0 auto; }
  .max-1920.renew .renew-swiper .swiper-slide-prev {  opacity:0.5;width:100%; max-width:900px; margin:0 auto;  }


/*중앙 텍스트박스*/


  .max-1920.renew .sub-swiper {
    position: absolute;
    top:42%;
    left: 23%;
    z-index: 3;
    width:460px;

    height: 340px;

    background: #2F3136;
    border-radius: 0px 0px 0px 0px;
    padding: 20px 20px;

	color:#fff;
  }

  .max-1920.renew .sub-swiper  dl.renew_txtbox{/*position:fixed; */margin-top:40px;padding:0px 0 0 20px; width:460px; height:320px;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.btn_arr{text-align:right;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.btn_arr img{position:absolute;bottom:80px; right:80px;width:37px; margin:0; text-align:right;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dt{font-size:16px; color:#fff; line-height:1.5;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.tit{padding-bottom:10px; font-size:28px; color:#ffff; line-height:1.5; font-weight:500; letter-spacing:-0.05em;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.txt{font-size:16px; color:#fff; padding-top:40px; line-height:1.5; font-weight:300;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.txt span.pc_cut{display:block;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.tit span.txt_bg{background:url('/file/img/s_img/txt_bg.gif') repeat-x 0 bottom;}





  .max-1920.renew .sub-tit {
    font-size:24px;
    font-weight: 700;
	color:#fff;
  }
  .max-1920.renew .sub-txt {
    display: block;
    margin-top: 22px;
    margin-top: 2.2rem;
    font-size: 18px;

    width: 500px;
    width: 50rem;
    color: #fff;
  }
  .max-1920.renew .pc-only {
    display: block;
  }
  .max-1920.renew .sub-swiper .sub-txt {
    line-height: 26px;
    line-height: 2.6rem;
  }
  .max-1920.renew .sub-swiper .swiper-wrapper {
    height: calc(100% - 0px);
  }

/*추가
  .max-1920 .swiper-backface-hidden .swiper-slide {
    margin-right:99px !important;
    margin-left:99px !important;
	}

*/





/*버튼*/
  .max-1920.renew .swiper-controler-renew-area {
    position: absolute;
    width: 100%;
    height: 60px;
    height: 6.0rem;
    display: flex;
    align-items: center;
top:40%;
z-index:99999;

  }
  .max-1920.renew .swiper-controler-renew-area [class*=swiper-button] {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin-top: 0;
    width: 60px;
    height: 60px;

   /* border: 1px solid #e5e5e5;*/
    border-radius: 0;
    border-radius: 0;

    opacity: 1;
  }

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





  .max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {
    background-image: url(/file/img/s_img/arrow_prev.png)  !important;
	background-size:60px  !important;
	padding:0  !important; margin:0  !important;
	left:18%  !important;
  }
  .max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {
  position:absolute;
    background-image: url(/file/img/s_img/arrow_next.png) !important;
		background-size:60px  !important;
	padding:0  !important; margin:0  !important; 
	right:18%  !important; 

  }
  .max-1920.renew .swiper-controler-renew-area [class*=swiper-button] .swiper-button-disabled {
    pointer-events: all;
    cursor: pointer;
  }
  .max-1920.renew .swiper-controler-renew-area .swiper-pagination {
    position: relative;
    left: auto;
    right: auto;
    bottom: 0;
  }

/*
  .max-1920.renew .swiper-controler-renew-area .swiper-pagination span{display:none;}

*/

  .max-1920.renew .swiper-controler-renew-area .swiper-pagination .swiper-pagination-bullet {
    width: 0px;
    width: 0;
    height:0px;
    height: 0rem;
    opacity: 1;
	display:none;
  }
  .max-1920.renew .swiper-controler-renew-area .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-left:0px;
    margin-left: 0rem;
	display:none;
  }
  .max-1920.renew .swiper-pagination-bullet {
    width: 0px;
    width: 0rem;
    height: 0px;
    height: 0rem;
    background-color: #e5e5e5;
		display:none;
  }
  .max-1920.renew .swiper-pagination-bullet-active {
    width: 6px;
    width: 0.6rem;
    height: 6px;
    height: 0.6rem;
    background-color: #da291c;
  }
 
  .max-1920.product {
    padding-bottom: 164px;
    padding-bottom: 16.4rem;
    overflow: hidden;
  }
  .max-1920.product .product-wrapper {
    width: 1240px;
    width: 124rem;
    margin: 0 auto;
    margin-top: 150px;
    margin-top: 15rem;
  }
 
  .figure-bg {
    z-index: -1;
    position: absolute;
    right: -100px;
    right: -10rem;
    top: -415px;
    top: -41.5rem;
    width: 1077px;
    width: 107.7rem;
    height: 1334px;
    height: 133.4rem;
    background: url(../images/main/bg_green.png) no-repeat;
    background-size: 100%;
    transform: translate(900px, -900px);
    transform: translate(90rem, -90rem);
  }
  .figure-bg.pc {
    display: block;
  }
  .figure-bg.mo {
    display: none;
  }
  
  @-webkit-keyframes effect {
    0% {
      transform: translate(0, 100%);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
  @keyframes effect {
    0% {
      transform: translate(0, 100%);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
  .esg-cont-wrap {
    margin: 0 48px;
    margin: 0 4.8rem;
    transform: translate3d(0, 0, 0);
  }
  .esg-top {
    padding-top: 172px;
    padding-top: 17.2rem;
  }
  .esg-top span {
    display: flex;
    justify-content: center;
    font-size: 50px;
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  .esg-cont-box {
    margin-top: 80px;
    margin-top: 8rem;
  }
  .esg-cont-box ul {
    padding-bottom: 194px;
    padding-bottom: 19.4rem;
  }
  .esg-cont-box li {
    overflow: hidden;
    cursor: pointer;
  }
  .esg-cont-box li .txt2, .esg-cont-box li .txt3 {
    opacity: 0;
  }
  .esg-cont-box li .esg-link {
    opacity: 0;
  }
  .esg-cont-box li:hover [class*=img] {
    transform: scale(1.05);
  }
  .esg-cont-box li:hover .txt2, .esg-cont-box li:hover .txt3 {
    -webkit-animation: effect 0.7s ease-in-out;
            animation: effect 0.7s ease-in-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  .esg-cont-box li:hover .esg-link {
    -webkit-animation: effect 0.7s ease-in-out;
            animation: effect 0.7s ease-in-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  .esg-cont-box li [class*=img] {
    overflow: hidden;
    position: relative;
    height: 0;
    padding-top: 95.39%;
    transition: transform ease-in-out 0.5s;
  }
  .esg-cont-box li .img1 {
    background: url(../images/main/esg_img1.jpg) no-repeat;
    background-size: 100% auto;
  }
  .esg-cont-box li .img2 {
    background: url(../images/main/esg_img2.jpg) no-repeat;
    background-size: 100% auto;
  }
  .esg-cont-box li .img3 {
    background: url(../images/main/esg_img3.jpg) no-repeat;
    background-size: 100% auto;
  }
  .esg-cont-box li .esg-cont-area {
    display: block;
    position: absolute;
    bottom: 21%;
    left: 0;
    margin-left: 5%;
    color: #fff;
  }
  .esg-cont-box li .esg-cont-area span, .esg-cont-box li .esg-cont-area a {
    display: block;
  }
  .esg-cont-box li .esg-cont-area .txt1 {
    font-size: 40px;
    font-size: 4rem;
    font-weight: 700;
  }
  .esg-cont-box li .esg-cont-area .txt2 {
    font-size: 20px;
    font-size: 2rem;
    margin-top: 24px;
    margin-top: 2.4rem;
  }
  .esg-cont-box li .esg-cont-area .txt3 {
    font-size: 20px;
    font-size: 2rem;
  }
  .esg-cont-box li .esg-link {
    position: absolute;
    left: 0;
    bottom: 7.3%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    width: 145px;
    width: 14.5rem;
    height: 48px;
    height: 4.8rem;
    font-size: 16px;
    font-size: 1.6rem;
    border: 1px solid #fff;
    border-radius: 25px;
    color: #fff;
    padding: 15px 24px;
    padding: 1.5rem 2.4rem;
    margin-top: 40px;
    margin-top: 4rem;
  }
  .esg-cont-box li .esg-link:after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 25px;
    right: 2.5rem;
    width: 6px;
    width: 0.6rem;
    height: 12px;
    height: 1.2rem;
    background: url(../images/main/ico_link_white.png) no-repeat;
    background-size: 6px 12px;
    background-size: 0.6rem 1.2rem;
  }
  /* 공통 */
  .top-btn {
    outline: none;
    display: none;
    opacity: 0;
    width: 60px;
    width: 6rem;
    height: 60px;
    height: 6rem;
    border-radius: 100%;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
    background: #E5E5E5 url(../images/common/ico_top_btn_black.png) center no-repeat;
    box-sizing: border-box;
    transition: 0.3s;
    position: fixed;
    right: 48px;
    right: 4.8rem;
    bottom: 30px;
    bottom: 3rem;
    z-index: 90;
    border: none;
  }


}/*# sourceMappingURL=main_20220701.css.map */






  
/* 2022.01.27. 스크롤 이벤트 추가 */
.scroll_elem{ opacity: 0; transition : 0.7s ease; transform: translate(0, 50px);}
.scroll_up{transform: translate(0, 0px); opacity: 1;}













/*! mobile 버전 - css */
@media (max-width:1680px) {



.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {background-size:60px  !important; left:12%  !important;  }
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {background-size:60px  !important; right:12%  !important;   }

.max-1920.renew .sub-swiper {  top:40%;  left: 20%;}




  } /* end */



/*! mobile 버전 - css */
@media (max-width:1600px) {

.max-1920.renew {
    overflow: hidden;
    margin-top: 120px;
	margin-bottom:40px;
}

.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {background-size:60px;left:12%;  }
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {background-size:60px  !important;	right:12%  !important;   }
.max-1920.renew .sub-swiper {  top: 40%;  left:18%;}






  } /* end 



/*! mobile 버전 - css */
@media (max-width:1500px) {

.max-1920.renew {
    overflow: hidden;
    margin-top:120px;
}
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {background-size:50px  !important; left:10%  !important;  }
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {background-size:50px  !important;	right:10%  !important;   }
.max-1920.renew .sub-swiper {  top: 40%;  left:16%;}


  } /* end */






/*! mobile 버전 - css */
@media (max-width:1420px) {

.max-1920.renew { overflow: hidden; margin-top:140px;}
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {background-size:50px;left:6%;  }
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {background-size:50px  !important;	right:6%  !important;   }
.max-1920.renew .sub-swiper {  top: 40%;  left:12%;}






  } /* end */


@media (max-width:1340px) {
.max-1920.renew .swiper-controler-renew-area {  top: 35%;}
.max-1920.renew .renew-swiper .swiper-slide-active {opacity: 1; width: 100%;  max-width: 800px;  margin: 0 auto;}
.max-1920.renew .renew-swiper .swiper-slide-next {opacity:0.5;width:100%; max-width:800px; margin:0 auto; }
.max-1920.renew .renew-swiper .swiper-slide-prev { opacity:0.5;width:100%; max-width:800px; margin:0 auto;  }
.max-1920.renew .renew-swiper-container { margin: 0 auto;  width: 800px;}

.max-1920.renew { overflow: hidden; margin-top: 100px;    padding-bottom: 0px;  margin-bottom:0px;}
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {background-size:50px !important; left:8%  !important;  }
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {background-size:50px  !important;	right:8%  !important;   }
.max-1920.renew .sub-swiper {  top: 37%;  left:10%;}
.max-1920.renew .renew-cont-box img { width: 100%; max-width: 800px; margin: 0 auto; display: block;}
.max-1920.renew .sub-swiper {position: absolute; top: 40%;  left:15%;  z-index: 3;  width: 400px; height: 296px; background: #2F3136;  border-radius: 0px 0px 0px 0px; padding: 20px 20px; color: #fff;}

  .max-1920.renew .sub-swiper  dl.renew_txtbox dt{font-size:15px; }
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.tit{padding-bottom:10px; font-size:22px;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.txt{font-size:15px; color:#fff; padding-top:20px; max-width:360px;}
.max-1920.renew .sub-swiper dl.renew_txtbox { margin-top: 20px;  padding: 0px 0 0 0px;    width: 400px;  height:260px;}

.max-1920.renew .sub-swiper dl.renew_txtbox dd.btn_arr img { position: absolute; bottom:50px; right: 50px; width: 37px; margin: 0; text-align: right;}


  } /* end */



@media (max-width:1199px) {

.max-1920.renew .renew-swiper .swiper-slide-active {opacity: 1; width: 100%;  max-width:700px;  margin: 0 auto;}
.max-1920.renew .renew-swiper .swiper-slide-next {opacity:0.5;width:100%; max-width:700px; margin:0 auto; }
.max-1920.renew .renew-swiper .swiper-slide-prev { opacity:0.5;width:100%; max-width:700px; margin:0 auto;  }
.max-1920.renew .renew-swiper-container { margin: 0 auto;  width: 700px;}
  .max-1920.renew .swiper-controler-renew-area .swiper-pagination {display:none;}


.max-1920.renew {  overflow: hidden;  margin-top: 100px; margin-bottom:20px;}


.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {background-size:40px   !important;left:8% !important; width:40px; height:40px;  }
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {background-size:40px  !important;	right:8%  !important; width:40px; height:40px;  }
.max-1920.renew .sub-swiper {  top: 37%;  left:10%;}
.max-1920.renew .renew-cont-box img {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: block;
}
.max-1920.renew .sub-swiper {
    position: absolute;
    top: 40%;
    left:16%;
    z-index: 3;
    width: 400px;
    height: 280px;
    background: #2F3136;
    border-radius: 0px 0px 0px 0px;
    padding: 30px 20px 20px 20px;
    color: #fff;}

  .max-1920.renew .sub-swiper  dl.renew_txtbox dt{font-size:15px; }
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.tit{padding-bottom:10px; font-size:22px;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.txt{font-size:15px; color:#fff; padding-top:40px;}


  } /* end */






@media (max-width:1080px) {

.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev { left: 4% !important;}

.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-next { right: 4% !important;}

.max-1920.renew .sub-swiper { left: 12%;}


  } /* end */





@media (max-width:1023px) {

.max-1920.renew .sub-swiper {  left:8%;}
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {background-size:40px   !important;left:8% !important; width:40px; height:40px;  background-image: url(/file/img/s_img/arrow_prev.png)  !important; }
.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {background-size:40px  !important;	right:8%  !important; width:40px; height:40px;     background-image: url(/file/img/s_img/arrow_next.png) !important; }



  } /* end */



@media (max-width:991px) {

.max-1920.renew .swiper-controler-renew-area {  top: auto;}
.max-1920.renew .renew-area {margin-top: 0px; padding-bottom: 80px;}
.max-1920.renew .swiper-controler-renew-area .swiper-pagination {display:block; bottom:60px;}
.max-1920.renew { margin-top: 80px;}


  .max-1920.renew .sub-swiper { position: relative;  z-index: 3; left:auto; width:100%; max-width:800px; margin:0 auto;   height:200px;  background: #2F3136;  border-radius: 0px 0px 0px 0px;  padding: 20px 20px;	color:#fff;  }

  .max-1920.renew .sub-swiper  dl.renew_txtbox{/*position:fixed; */margin-top:0px;padding:0px 0 0 0px; width:100%; height:200px;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.btn_arr{text-align:right;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.btn_arr img{position:absolute;bottom:-20px; right:0px;width:37px; margin:0; text-align:right;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dt{font-size:15px; }
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.tit{padding-bottom:10px; font-size:18px; }
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.txt{font-size:15px; padding-top:10px; padding-right:0;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.txt span.pc_cut{display:inline;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.tit span.txt_bg{background:url('/file/img/s_img/txt_bg.gif') repeat-x 0 bottom;}



.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-prev {
background-image:none !important; background-size:40px;padding:0; margin:0;left:2%;	top:24% !important;  }

.max-1920.renew .swiper-controler-renew-area [class*=swiper-button].swiper-button-next {
background-image:none !important; background-size:40px;padding:0; margin:0;right:2%; top:24% !important;  }

.swiper-controler-renew-area{position: absolute; text-align: center; -webkit-transition: .3s opacity;  -o-transition: .3s opacity;  transition: .3s opacity;  -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0);  z-index: 10; text-align:center;
width:100%; margin:0 auto;	bottom:40px;	}

.swiper-pagination {  position: relative !important;  width:100px; margin:0 auto;}
.swiper-pagination-bullet {  width: 8px;  height: 8px;  display: inline-block; border-radius: 100%;  background: #fff !important; opacity: .2; margin:0 5px;}




  }/* end*/



@media (max-width:768px) {
.max-1920.renew .sub-swiper dl.renew_txtbox {  margin-top: 0px;  padding: 0px 0 0 0px;  width: 100%;  height: 180px;}
.max-1920.renew { margin-top:60px;   margin-bottom: 0px;}
  .max-1920.renew .sub-swiper  dl.renew_txtbox dd.tit{padding-bottom:10px; font-size:16px; }
.max-1920.renew .sub-swiper dl.renew_txtbox dd.txt { font-size: 14px; line-height:1.3;  padding-top: 10px;  padding-right: 0;  font-weight: 300;}
.swiper-controler-renew-area { bottom:40px;}
.max-1920.renew .sub-swiper { padding: 20px 10px;  color: #fff;}

.max-1920.renew .renew-area { margin-top: 0px; padding-bottom: 60px;}
.max-1920.renew .swiper-controler-renew-area .swiper-pagination { bottom: 40px;}

  }/* end*/