@charset "UTF-8";

/* main-top */
.main-banner{width: 100%;height: 100vh;background: no-repeat 50% / cover;position: relative;}
.main-banner .img-wrap { width: 100%; height: 100%; position: relative;} 
.main-banner .img-wrap::after{content: ''; position: absolute; top: 0; left: 0; width: calc(100% + 15%); height: 100%; background: no-repeat left / cover; background-image: url(../../images/user/main/banner-bg.png);}
.main-banner .img-wrap img{width: 100%;height: 100%;object-fit: cover;min-height: 100vh;}
.main-banner .banner-txt.inner {position: absolute; top: 235px; line-height: 1.5;} 
.main-banner .banner-txt__top { font-size: 30px; display: flex; color: #313133; } 
.main-banner .banner-txt__top::after { content: ''; width: 45px; height: 45px; background: no-repeat 50% / cover; background-image: url(../../images/ico/ico-plant_b.svg); margin-top: -5px;} 
.main-banner .banner-txt__bottom{font-size: 60px;}
.main-banner .banner-txt__bottom > * {font-size: inherit;}
.main-banner .detail-btn{margin-top: 35px;}
.main-banner__btnWrap {position: absolute;max-width: calc(1280px + 80px);padding: 0 40px;width: 100%;margin: 0 auto;left: 50%;transform: translate(-50%, -50%);top: 600px;z-index: 1;} 
.main-banner__btn {display: flex;align-items: center;width: 100%;padding-left: 3px;}
.main-banner__btn .swiper-pagination {position: static;font-size: 20px;font-weight: 500;display: flex;width: 80px;}
.main-banner__btn .swiper-pagination span { color: #999999; font-weight: 500; } 
.main-banner__btn .swiper-pagination .swiper-pagination-current { color: #292929; margin-right: 5px; font-weight: 700; } 
.main-banner__btn .swiper-pagination .swiper-pagination-total { margin-left: 5px; } 
.main-banner__btn .swiper-pagination .swiper-pagination-current::before {content: '';width: 0;height: 2px;background: #000;position: absolute;top: 50%;left: 120px;transform: translateY(-50%);z-index: 1;}
.main-banner__btn .swiper-pagination .swiper-pagination-current::after {content: '';width: 50px;height: 1px;background: #D3D3D3;position: absolute;top: 50%;left: 120px;transform: translateY(-50%);}
.main-banner__btn .play-btn {min-width: 20px;height: 20px;background: no-repeat 50% / cover;background-image: url(../../images/ico/main-banner-pause.svg);position: relative;z-index: 11;}
.main-banner__btn .play-btn.pause { background-image: url(../../images/ico/main-banner-play.svg); }
.main-banner__btn .swiper-pagination .swiper-pagination-current.timeBox::before { animation: aniPrgressbar 1.5s ease-in-out 1s; animation-fill-mode: forwards; }
@keyframes aniPrgressbar {
    from { width: 0; }
    to { width: 50px; }
}


/* notice */
.main-board .board-notice{position: absolute;bottom: 45px;left: 50%;transform: translateX(-50%);max-width: calc(1690px + 80px);width: 100%;padding: 0 40px;z-index: 1;}
.main-board .board-notice .inner{background-color: rgba(255,255,255,0.7);backdrop-filter: blur(15px);border-radius: 5px;overflow: hidden;padding: 22px 50px;height: 80px;max-width: 100%;}
.main-board .board-notice .swiper-container{width: 100%;height: 100%;padding-right: 130px;}
.main-board .board-notice .pic_li_lt{display: flex;align-items: center;height: 100%;}
.main-board .board-notice .pic_li_lt .lat_tit__txt{font-size: 20px; color: var(--color-main-green); display: flex; margin-right: 17px;}
.main-board .board-notice .pic_li_lt .lat_tit__txt:after{content: ''; width: 1px; height: 20px; background: #989898; margin-left: 17px;}
.main-board .board-notice .lt_date{line-height: 1;color: #9599A6;font-size: 20px;}
.board-notice .pic_li_tit{color: #292929;padding-right: 20px;font-size: 20px;font-weight: 500;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: calc(100% - 100px);}
.latest-notice__ul > li{height: 26px;display: flex; align-items: center; justify-content: space-between;}
.board-notice .swiper-control { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; } 
.board-notice .swiper-control .btn { width: 34px; height: 34px; background: #fff; border: 1px solid #e4e4e4; border-radius: 5px; } 
.board-notice .swiper-control .btn i { width: 30px; height: 30px; background: no-repeat 50% / cover; background-image: url(../../images/ico/ico-slide__down.svg); } 
.board-notice .swiper-control .btn.slide-btn__next i{transform: rotate(180deg);}
.board-notice .swiper-control .btn:not(:last-child){margin-right: 10px;}


/* main-section */
.main-section{margin-top: 80px;overflow: hidden;}
.main-section .lat_subTitle{display: flex; align-items: center; font-size: 18px; font-weight: 400; margin-bottom: 8px;}
.main-section .lat_subTitle::after{content: ''; width: 12px; height: 3px; background: no-repeat 50% / cover; margin-left: 10px;}
.main-section .lat_subTitle.color-blue{color: var(--color-main-blue);}
.main-section .lat_subTitle.color-green{color: var(--color-main-green);}
.main-section .lat_subTitle.color-blue::after{background-image: url(../../images/ico/ico-title_blue.svg);}
.main-section .lat_subTitle.color-green::after{background-image: url(../../images/ico/ico-title_green.svg);}
.main-section .lat_tit__txt{font-size: 49px; color: #292929;}
.main-section .lat_title__bottom{font-size: 20px; font-weight: 500; color: #757575; margin-top: 20px;}
.main-section .lat_title{display: flex;justify-content: space-between;align-items: center;}
.main-section .lat_title .lt_more{width: 95px; height: 60px; background: no-repeat 50% / cover; background-image: url(../../images/ico/ico-detail_blue.svg); transition: .4s;}
.main-section .lat_title .lt_more:hover{transform: translate(10px, 0);}
.main-section.section-activity .thumb-box{margin-top: 40px; margin-right: -13px;}


/* section-prShare */
.prShare-slide.swiper-container {padding: 7px 3px;margin-top: 33px;}

.animated-title {font-size: 160px;font-weight:300;position: relative;width: 100%;max-width:100%;height: auto;overflow-x: hidden;overflow-y: hidden; color: #9599A6;opacity: 0.08;font-weight: 900;margin-top: 20px;}
.animated-title .track {white-space: nowrap;will-change: transform;animation: marquee 15s linear infinite;}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* section-work */
.main-section.section-work{position: relative; margin-top: 40px;}
.main-section.section-work::after{content: ''; position: absolute; bottom: -90px; right: 42px; width: 314px; height: 305px; background: no-repeat 50% / cover; background-image: url(../../images/user/main/work-plant.svg);}
.main-section.section-work .lat_subTitle {justify-content: center;}
.main-section.section-work .lat_title{justify-content: center;}
.board-work__cont{margin-top: 40px;}
.work-slide__thumb{display: flex; max-width: 565px;}
.work-slide__thumb .num-title{display: none; margin-left: 5px;}
.work-slide__thumb > ul{justify-content: center; margin: 0 20px;}
.work-slide__thumb > ul > li:not(:last-child){margin-right: 20px;}
.work-slide__thumb .swiper-slide-thumb-active .work-slide__num{background-color: #1D8760; color: #fff;}
.work-slide__thumb .swiper-slide-thumb-active .num-title{display: block;}
.work-slide__num{padding: 8px 14px; display: flex; align-items: center; border-radius: 50px; font-size: 16px; font-weight: 600; color: #B4B4B4; cursor: pointer;}
.work-slide__thumb .swiper-slide {min-width: 45px; width: auto;}
.work-slide__thumb .btn{width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E4E4E4; flex: none;}
.work-slide__thumb .btn i{width: 30px; height: 30px; background-image: url(../../images/ico/ico-slide_prev.svg);}
.work-slide__thumb .btn.swiper-next i{transform: rotate(180deg);}
.work-slide__cont{display: flex;align-items: center;justify-content: space-between;margin-top: 40px;padding-bottom: 55px;}
.work-slide__img {position: relative;padding-right: 70px;} 
.work-slide__img .img-wrap { position: relative; width: 540px; height: 540px; border-radius: 50%; } 
.work-slide__img .img-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } 
.work-slide__img .img-wrap::after { content: ''; position: absolute; top: 17px; right: 29px; width: 100%; height: 100%; border: 1px solid var(--color-main-green); border-radius: inherit; z-index: -1; } 
.work-slide__img .img-side {position: absolute;right: 0;top: 27px;width: 143px;height: 143px;background: #E7F5F0;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;} 
.work-slide__cont .l {flex: none;}
.work-slide__tit{display: flex;align-items: flex-start;padding-bottom: 24px;position: relative;width: 456px;margin-left: -12px;}
.work-slide__tit h2::before{content: ''; width: 87px; height: 87px; background: no-repeat 50% / cover; background-image: url(../../images/ico/ico-plant_b2.svg);}
.work-slide__tit h2{display: flex;align-items: center;font-size: 60px;color: var(--color-main-green);white-space: nowrap;}
.work-slide__tit p{font-size: 20px;color: var(--color-main-green);margin-left: 10px;margin-top: 18px;white-space: nowrap;}
.work-slide__tit::before,
.work-slide__tit::after{content: ''; position: absolute; bottom: 0;}
.work-slide__tit::before{height: 1px;width: 439px;background: var(--color-main-green);}
.work-slide__tit::after{bottom: -2px; right: 0; width: 5px; height: 5px; border-radius: 50%; background-color: var(--color-main-green);}
.work-slide__txt { margin-top: 30px; } 
.work-slide__txt .tit { font-size: 28px; line-height: 1.5; color: #444444; } 
.work-slide__txt .cont { margin-top: 30px; font-size: 16px; font-weight: 500; color: #757575; line-height: 2; } 
.work-slide__txt .detail-btn {  margin-top: 50px;} 


/* section-activity */
.main-section.section-activity {background-color: rgba(31,70,159,0.02);position: relative;padding-top: 55px;padding-bottom: 133px;margin-top: 0;} 
.main-section.section-activity::before, .main-section.section-activity::after {content: '';position: absolute;background: no-repeat 50% / cover;z-index: -1;} 
.main-section.section-activity::before { top: -118px; left: -100px; width: 332px; height: 332px; background-image: url(../../images/user/main/circle-small.svg);} 
.main-section.section-activity::after { bottom: 64px; right: -200px; width: 456px; height: 456px; background-image: url(../../images/user/main/circle-big.svg);} 
.activity-slide .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--color-main-blue);}
.activity-slide.swiper-horizontal>.swiper-pagination-progressbar, 
.activity-slide .swiper-pagination-progressbar.swiper-pagination-horizontal{position: static; margin-top: 40px; background: #e4e4e4;}
.section-activity .lt_info{margin-top: 20px;}
.section-activity .lt_info .lt_date{color: #9599A6;}
.section-activity .lt_info .pic_li_tit{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 14px; font-size: 18px; font-weight: 700;}
.section-activity .thumb-box ul > li:not(:last-child){margin-right: 20px;}



@media screen and (max-width: 1320px) {
  .main-section{margin-top: 75px;}
  .main-section .lat_title .lt_more{width: 79px;height: 50px;}

  /* main-banner */
  .main-banner{height: max(1024px, 100vh);}
  .main-banner .banner-txt.inner{top: 192px;}
  .main-banner__btnWrap{top: 559px;}
  .main-banner .img-wrap::after{background-image: url(../../images/user/main/banner-bg_pad.png);}

  .main-board .board-notice .swiper-container {padding-right: 100px;}
  .prShare-slide .swiper-pagination{position: static; margin-top: 20px;}
  .prShare-slide .swiper-pagination-bullet{width: 10px; height: 10px; background: #e4e4e4; opacity: 1;}
  .prShare-slide .swiper-pagination-bullet-active{background: var(--color-main-blue);}
  .main-section.section-prShare .thumb-box {margin-right: -40px;}
  .animated-title {margin: 0;}

  .main-section.section-work{padding-bottom: 150px;}
  .main-section.section-work::after{bottom: -72px; right: auto; left: 50%; transform: translateX(-50%); width: 267px; height: 259px;}
  .work-slide__cont{flex-direction: column-reverse;margin-top: 30px;padding-bottom: 0;}
  .work-slide__cont .l{width: 100%;margin-top: 76px;}
  .work-slide__img .img-side {z-index: 1;}
  .work-slide__tit {justify-content: center;margin: 0 auto;}
  .work-slide__txt {text-align: center;}
  .work-slide__txt .detail-btn {margin-left: auto; margin-right: auto;}

  .main-section.section-activity{padding-top: 94px; padding-bottom: 85px;}
  .main-section.section-activity::before { left: auto; top: -73px; right: -53px; transform: rotate(45deg); width: 248px; height: 248px; } 
  .main-section.section-activity::after { right: auto; bottom: 0; left: -200px; width: 387px; height: 387px; transform: rotate(81deg); } 
}

@media screen and (max-width: 767px) {
  .main-section .lat_subTitle { font-size: 14px; } 
  .main-section .lat_tit__txt { font-size: 34px; } 
  .main-section .lat_title__bottom {font-size: 14px;word-break: keep-all;line-height: 1.5;} 
  .main-section .lat_title .lt_more { width: 64px; height: 40px; } 


  /* main-banner */
  .main-banner{height: max(800px, 100vh);}
  .main-banner .img-wrap::after{background-image: url(../../images/user/main/banner-bg_m.png);width: calc(100% + 324px);}
  .main-banner .banner-txt.inner{top: 160px;}
  .main-banner .banner-txt__top{font-size: 20px;}
  .main-banner .banner-txt__bottom{font-size: 34px;}
  .main-banner .banner-txt__top::after{width: 34px; height: 34px;}
  .main-banner .detail-btn{margin-top: 30px;}
  .main-banner__btnWrap{padding: 0 20px;}
  .main-banner__btnWrap { bottom: auto; top: 50%; transform: translate(-50%, -50%); } 
  .main-banner__btn .swiper-pagination { width: 54px; font-size: 14px; } 
  .main-banner__btn .swiper-pagination .swiper-pagination-current::before { left: 90px; } 

  /* board-notice */
  .main-board .board-notice { padding: 0 20px; } 
  .main-board .board-notice .pic_li_lt { flex-direction: column; align-items: baseline; } 
  .main-board .board-notice .inner {height: 140px;padding: 24px 20px;} 
  .main-board .board-notice .pic_li_lt .lat_tit__txt { margin-right: 0; font-size: 16px;} 
  .main-board .board-notice .pic_li_lt .lat_tit__txt:after { display: none; } 
  .main-board .board-notice .swiper-container {padding: 0;} 
  .main-board .latest-notice__ul > li {display: block;} 
  .main-board .board-notice .lt_info { margin-top: 20px; } 
  .main-board .board-notice .lat_title { margin-bottom: 12px; } 
  .main-board .board-notice .pic_li_tit { font-size: 14px; width: 100%; } 
  .main-board .board-notice .lt_date { font-size: 14px; } 
  .main-board .board-notice .swiper-control { top: auto; transform: none; bottom: 0; } 

  /* section-prShare */
  .main-section.section-prShare .thumb-box { margin-top: 30px; margin-right: 0; } 
  .prShare-slide.swiper-container {max-width: 320px;margin-top: 23px;} 
  .prShare-slide .thumb-box ul > li:not(:last-child) { margin-right: 10px; } 
  .animated-title {font-size: 120px;}

  .main-section.section-work {padding-bottom: 100px;}
  .work-slide__thumb { max-width: max-content; align-items: center; } 
  .work-slide__thumb .swiper-slide { display: none; } 
  .work-slide__thumb .swiper-slide.swiper-slide-thumb-active { display: block; margin: 0 20px; } 
  .work-slide__thumb > ul > li:not(:last-child) { margin-right: 0; } 
  .work-slide__thumb .btn { width: 25px; height: 25px; } 
  .work-slide__thumb .btn i { width: 19px; height: 19px; } 
  .board-work__cont { margin-top: 30px; } 
  .work-slide__cont .r { width: 100%; } 
  .work-slide__img{width: 100%;padding-right: 20px;padding-left: 20px;max-width: 320px;margin: 0 auto;}
  .work-slide__img .img-wrap {width: calc(100% - 10px);height: 0;padding-bottom: calc(100% - 10px);} 
  .work-slide__img .img-wrap img { position: absolute; top: 0; left: 0; } 
  .work-slide__img .img-wrap::after { top: 8px; right: 18px; } 
  .work-slide__img .img-side { width: 72px; height: 72px; top: 13px; } 
  .work-slide__img .img-side img { width: 65%; height: 65%; } 
  .work-slide__tit{width: 100%; padding-bottom: 5px;}
  .work-slide__tit::before {width: calc(100% - 25px);}
  .work-slide__tit h2{font-size: 30px;}
  .work-slide__tit h2::before{width: 54px; height: 54px;}
  .work-slide__tit p{font-size: 14px;margin-top: 13px;margin-left: 5px;}
  .work-slide__txt{margin-top: 26px;}
  .work-slide__txt .tit{font-size: 18px;}
  .work-slide__txt .cont{font-size: 14px;}
  .work-slide__txt .detail-btn{margin-top: 30px;}
  .main-section.section-work::after{width: 125px; height: 121px; bottom: -32px;}

  .main-section.section-activity::before { width: 160px; height: 160px; top: -39px;}
  .main-section.section-activity::after { width: 329px; height: 329px; left: -170px; } 
  .main-section.section-activity .thumb-box{margin-top: 30px; margin-right: -20px;}
  .section-activity .lt_info .lt_date{font-size: 14px;}
  .section-activity .lt_info .pic_li_tit{font-size: 16px;}
  .animated-title .track{animation: marquee 5s linear infinite;}

}