@charset "utf-8";

/* m_txt */
.m_txt{}
.m_txt h4{font-size: 22px; color: #0e6948; margin-bottom: 20px;}
.m_txt h3{font-size: 48px; color: #000; line-height: 1.3em; word-break: keep-all;}
.m_txt h3 span{}
.m_txt p{font-size: 20px; font-weight: 500; color: #444444; word-break: keep-all; line-height: 1.6em; word-break: keep-all;}
.m_txt h3 + p{margin-top: 40px;}
.m_txt a.btn{margin-top: 45px; display: inline-block; color: #0e6948; border: 1px solid #0e6948; position: relative; line-height: 56px; padding: 0 70px 0 50px; font-size: 17px; font-weight: 600; border-radius: 60px;}
.m_txt a.btn::after{content: '→'; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}

@media all and (max-width:1480px){
	.m_txt h4{font-size: 21px;}
	.m_txt h3{font-size: 46px;}
}
@media all and (max-width:1280px){
	.m_txt h4{font-size: 20px;}
	.m_txt h3{font-size: 42px;}
	.m_txt h3 + p{margin-top: 36px;}
	.m_txt p{font-size: 19px;}
	.m_txt a.btn{margin-top: 40px; line-height: 52px; padding: 0 65px 0 45px; font-size: 16px;}
	.m_txt a.btn::after{right: 26px;}
}
@media all and (max-width:1024px){
	.m_txt h4{font-size: 19px;}
	.m_txt h3{font-size: 38px;}
	.m_txt h3 + p{margin-top: 32px;}
	.m_txt p{font-size: 18px;}
}
@media all and (max-width:768px){
	.m_txt h4{font-size: 18px;}
	.m_txt h3{font-size: 34px;}
	.m_txt h3 + p{margin-top: 28px;}
	.m_txt p{font-size: 17px;}
	.m_txt a.btn{margin-top: 32px; line-height: 46px; padding: 0 60px 0 40px; font-size: 16px;}
	.m_txt a.btn::after{right: 24px;}
}
@media all and (max-width:500px){
	.m_txt h4{font-size: 17px;}
	.m_txt h3{font-size: 30px;}
	.m_txt h3 + p{margin-top: 24px;}
	.m_txt p{font-size: 16px;}
	.m_txt a.btn{margin-top: 27px; line-height: 44px; padding: 0 52px 0 36px; font-size: 15px;}
	.m_txt a.btn::after{right: 22px;}
}


/* mVisual */
#mVisual{width: 100%; height: 100vh;}
#mVisual .visual{width: 100%; height: 100%;}
#mVisual .visual > div{height: 100% !important;}
#mVisual .visual > div > div{height: 100% !important;}
#mVisual .visual .mv{position: relative; height: 100%;}
#mVisual .visual .mv .img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; width: 100%; height: 100%; overflow: hidden;}
#mVisual .visual .mv .img img{width: 100%; height: 100%; object-fit: cover;}
#mVisual .visual .mv.slick-current .img img{ animation: zoom-in 1.5s ease;}
#mVisual .visual .mv .inner{height: 100%; display: flex; flex-direction: column; justify-content: center;}
#mVisual .visual .mv .txt{margin-top: 100px;}
#mVisual .visual .mv .txt h3{font-size: 56px; font-weight: 700; color: #fff;}
#mVisual .visual .mv .txt h3 span{color: #69c927;}
#mVisual .visual .mv .txt p{font-size: 20px; font-weight: 500; color: #fff; margin-top: 35px; line-height: 1.7em;}
#mVisual .visual .mv .status{margin-top: 65px; display: flex; align-items: center; gap:20px;}
#mVisual .visual .mv .status .gague{position: relative; width: 250px; height: 2px; background-color: rgba(255,255,255,0.2);}
#mVisual .visual .mv .status .gague .bar{position: absolute; height: 2px; width: 20%; background-color: #69c927;}
#mVisual .visual .mv .status .play_btn{}
#mVisual .visual .mv .status .play_btn > div{display: none; cursor: pointer;}
#mVisual .visual .mv .status .play_btn > div.on{display: block;}
#mVisual .visual .mv .status .play_btn > div img{}
#mVisual .scroll{position: absolute; left: 50%; transform: translateX(-50%); bottom: 50px; color: #fff;}
#mVisual .scroll .gague{position: relative; height: 100px; width: 2px; background-color: rgba(255,255,255,0.3); margin: 0 auto; margin-bottom: 20px; overflow: hidden;}
#mVisual .scroll .gague .bar{background-color: #fff; height: 40px; width: 2px; position: absolute; top: -40px; left: 0; animation: scrollevent 1.25s ease infinite;}
#mVisual .scroll p{font-size: 15px; font-weight: 300; color: #fff;}

@keyframes scrollevent{
	0%{top: -40px;}
	100%{top: 140px;}
}

@keyframes zoom-in{
	0%{transform: scale(1.15);}
	100%{transform: scale(1);}
}

@media all and (max-width:1280px){
	#mVisual .visual .mv .txt h3{font-size: 48px;}
	#mVisual .visual .mv .txt p{margin-top: 30px; font-size: 19px; line-height: 1.6em;}
	#mVisual .visual .mv .status{margin-top: 60px;}
	#mVisual .visual .mv .status .gague{width: 220px;}
	#mVisual .scroll{bottom: 45px;}
	#mVisual .scroll .gague{height: 90px;}
	#mVisual .scroll .gague .bar{height: 38px;}
	@keyframes scrollevent{
		0%{top: -38px;}
		100%{top: 128px;}
	}
}
@media all and (max-width:1024px){
	#mVisual .visual .mv .txt{margin-top: 80px;}
	#mVisual .visual .mv .txt h3{font-size: 44px;}
	#mVisual .visual .mv .txt p{margin-top: 27px; font-size: 18px;}
	#mVisual .visual .mv .status{margin-top: 55px;}
	#mVisual .visual .mv .status .gague{width: 180px;}
	#mVisual .scroll{bottom: 42px;}
	#mVisual .scroll .gague{height: 80px; margin-bottom: 15px;}
	#mVisual .scroll .gague .bar{height: 35px;}
	@keyframes scrollevent{
		0%{top: -35px;}
		100%{top: 115px;}
	}
	#mVisual .scroll p{font-size: 14px;}
}
@media all and (max-width:768px){
	#mVisual .visual .mv .txt{margin-top: 40px;}
	#mVisual .visual .mv .txt h3{font-size: 40px;}
	#mVisual .visual .mv .txt p{margin-top: 24px; font-size: 17px; font-weight: 400;}
	#mVisual .visual .mv .status{margin-top: 50px;}
	#mVisual .visual .mv .status .gague{width: 150px;}
	#mVisual .scroll{bottom: 38px;}
	#mVisual .scroll .gague{height: 70px;}
	#mVisual .scroll .gague .bar{height: 32px;}
	@keyframes scrollevent{
		0%{top: -32px;}
		100%{top: 102px;}
	}
}
@media all and (max-width:500px){
	#mVisual .visual .mv .txt{margin-top: 0px;}
	#mVisual .visual .mv .txt h3{font-size: 36px;}
	#mVisual .visual .mv .txt p{margin-top: 21px; font-size: 16px;}
	#mVisual .visual .mv .status{margin-top: 45px;}
	#mVisual .visual .mv .status .gague{width: 130px;}
	#mVisual .scroll{bottom: 35px;}
	#mVisual .scroll .gague{height: 60px;}
	#mVisual .scroll .gague .bar{height: 28px;}
	@keyframes scrollevent{
		0%{top: -28px;}
		100%{top: 88px;}
	}
}

/* sec1 */
#sec1{max-width: 1920px; position: relative; margin: 0 auto;}
#sec1 .img{position: absolute; left: 0; bottom: 0;}
#sec1 .img::after{content: ''; width: 526px; height: 130px; background: url(/images/main/sec1_bg1.webp) no-repeat center center / contain; position: absolute; bottom: 0; right: -526px;}
#sec1 .img img{max-width: 100%;}
#sec1 .img p {
  font-size: 320px;
  font-family: 'Poppins', sans-serif;
  position: absolute;
  left: 100px;
  bottom: 20px;
  line-height: 1em;
  font-weight: 700;
  color: transparent;               
  -webkit-text-stroke: 1px #eee;    
  -webkit-text-fill-color: transparent;
	letter-spacing: -0.025em;
	transform: skew(-1.5deg) rotate(-0.1deg);
}
#sec1 .inner{}
#sec1 .inner .m_txt{width: 50%; margin-left: auto; padding-left: 210px; margin-top: 50px;}

@media all and (max-width:1820px){
	#sec1 .img img{max-width: 54vw; height: 80vh; object-fit: cover;}
	#sec1 .inner .m_txt{margin-top: 40px; padding-left: 10vw;}
	#sec1 .img p{font-size: 25vw; left: 3%;}
	#sec1 .img::after{width: 480px; height: 120px; right: -480px;}
}
@media all and (max-width:1480px){
	#sec1 .inner .m_txt h3 br{display: none;}
	#sec1 .img::after{width: 440px; height: 114px; right: -440px;}
}
@media all and (max-width:1024px){
	#sec1 .inner .m_txt p br{display: none;}
	#sec1 .img::after{width: 416px; height: 106px; right: -416px;}
}
@media all and (max-width:768px){
	#sec1{ height: auto !important;}
	#sec1 .fp-tableCell{vertical-align: top; height: auto !important;display: flex; flex-direction: column-reverse;}
	#sec1 .inner .m_txt{padding-left: 0; width: 100%; padding-top: 80px; margin-top: 0;}
	#sec1 .inner .m_txt h3 br{display: block;}
	#sec1 .img{position: relative; margin-top: 60px;}
	#sec1 .img img{max-width: 72vw; height: 70vw;}
	#sec1 .img::after{width: 56vw; height: 20vw; right: 3vw; background-position: bottom left; z-index: -1;}
}
@media all and (max-width:500px){
	#sec1 .img p{font-size: 23vw; bottom: 16px;}
	#sec1 .inner .m_txt{padding-top: 70px;}
}


/* sec2 */
#sec2{position: relative; max-width: 1920px; margin: 0 auto; overflow-x: hidden;}
#sec2 > div{overflow-x: hidden;}
#sec2 .bg{position: absolute; top: 0; left: 0; height: 100%;}
#sec2 .bg img{object-fit: contain; height: 100%;}
#sec2 .inner{display: flex; align-items: center;}
#sec2 .inner .m_txt{margin-top: 100px; width: 420px;}
#sec2 .inner .m_txt h4{color: #98db45;}
#sec2 .inner .m_txt h3{color: #fff;}
#sec2 .inner .m_txt a.btn{border-color: #fff; color: #fff;}
#sec2 .inner .r_cont{width: calc(100% - 420px); }
#sec2 .inner .r_cont .list{ width: 120%;}
#sec2 .inner .r_cont .list > div{padding: 50px 0px;}
#sec2 .inner .r_cont .list li{max-width: 420px; position: relative; margin-right: 20px; box-shadow: 0px 9px 32px rgba(0,0,0,.27);}
#sec2 .inner .r_cont .list li .img{}
#sec2 .inner .r_cont .list li .img img{max-width: 100%;}
#sec2 .inner .r_cont .list li .txt{position: absolute; width: 100%;}
#sec2 .inner .r_cont .list li .txt p{color: #fff; font-size: 24px; font-weight: 700; position: absolute; bottom: 40px; left: 0; z-index: 2; width: 100%; display: inline-flex; align-items: center; gap:12px;}
#sec2 .inner .r_cont .list li .txt p::before{content: ''; width: 25px; height: 4px; background-color: #0e6948; display: inline-block;}
#sec2 .inner .r_cont .arrows{position: absolute; top: 50%; transform: translateY(-50%); right: -5%; z-index: 3;animation: moveright 0.75s infinite;transition: .4s; }
#sec2 .inner .r_cont .arrows:hover{animation-play-state: paused;}
#sec2 .inner .r_cont .arrows .next{display: inline-flex; aspect-ratio:1 / 1; background-color: #0e6948; justify-content: center; align-items: center; color: #fff; font-size: 24px; font-weight: 600;  width: 60px; border-radius: 10px; opacity: 0.85; cursor: pointer; }
#sec2 .inner .r_cont .arrows .next:hover{opacity: 1;}

@keyframes moveright {
	0%{right: -5%;}
	50%{right: -6%;}
	100%{right: -5%;}
}


@media all and (max-width:1720px){
	#sec2 .inner .r_cont .arrows{right: 0%;}
	#sec2 .inner .r_cont .arrows .next{width: 56px; font-size: 22px;}
	@keyframes moveright {
		0%{right: 0%;}
		50%{right: -1%;}
		100%{right: 0%;}
	}
}
@media all and (max-width:1280px){
	#sec2 .inner .m_txt{margin-top: 70px; width: 360px;}
	#sec2 .inner .r_cont .list li{max-width: 400px;}
	#sec2 .inner .r_cont .list li .txt p{font-size: 22px;}
	#sec2 .inner .r_cont{width: calc(100% - 360px);}
}
@media all and (max-width:1024px){
	#sec2 .inner .m_txt{margin-top: 55px; width: 340px;}
	#sec2 .inner .r_cont .list li{max-width: 350px;}
	#sec2 .inner .r_cont .list li .txt p{bottom: 35px; font-size: 21px;}
	#sec2 .inner .r_cont{width: calc(100% - 340px);}
	#sec2 .inner .r_cont .arrows .next{width: 54px; font-size: 21px;}
}
@media all and (max-width:768px){
	#sec2{ height: auto !important; padding: 80px 0;}
	#sec2 .inner{flex-direction: column;}
	#sec2 .fp-tableCell{vertical-align: top; height: auto !important;display: flex; flex-direction: column-reverse;}
	#sec2 .inner .m_txt{width: 100%; margin-top: 0;}
	#sec2 .inner .m_txt h3 br:last-child{display: none;}
	#sec2 .inner .r_cont{width: 100%;}
	#sec2 .inner .r_cont .list > div{padding-bottom: 0; padding-top: 60px;}
	#sec2 .inner .r_cont .list li{max-width: 42vw; margin-right: 15px;}
	#sec2 .inner .r_cont .list li .txt p{bottom: 30px; font-size: 20px; gap:10px;}
	#sec2 .inner .r_cont .list li .txt p::before{width: 22px; height: 3px;}
	#sec2 .inner .r_cont .arrows .next{width: 52px; font-size: 20px;}
}
@media all and (max-width:500px){
	#sec2{padding: 70px 0;}
	#sec2 .inner .r_cont .list li{max-width: 48vw;}
	#sec2 .inner .r_cont .list li .txt p{bottom: 26px; font-size: 18px; gap:8px;}
	#sec2 .inner .r_cont .arrows .next{width: 48px; font-size: 18px;}
}


/* sec3 */
#sec3{background: url(/images/main/sec3_bg1.webp) no-repeat center center / cover;}
#sec3 .inner{text-align: center;}
#sec3 .inner .m_txt{}
#sec3 .inner .m_txt h4{}
#sec3 .inner .m_txt h3{}
#sec3 .inner .bg{border-top-right-radius: 120px; border-bottom-left-radius: 120px; overflow: hidden; max-width: 1400px; margin-left: auto; margin-right: auto; margin-top: 60px;}
#sec3 .inner .bg img{max-width: 100%;}
#sec3 .inner .list{display: flex; gap:0 80px; justify-content: center; margin-top: -30px;}
#sec3 .inner .list li{max-width: 300px; width: 100%;}
#sec3 .inner .list li .tit{background: linear-gradient(to right, #4d823e, #22473f, #247057); line-height: 60px; width: 100%; border-top-right-radius: 15px; color: #fff; font-size: 24px; font-weight: 700;}
#sec3 .inner .list li .txt{text-align: left; margin-top: 20px; padding-left: 10px;}
#sec3 .inner .list li .txt p{font-size: 18px; font-weight: 400; color: #000000; line-height: 1.7em;}

@media all and (max-width:1280px){
	#sec3 .inner .list{gap:0 3vw;}
	#sec3 .inner .list li .tit{font-size: 22px; line-height: 54px;}
	#sec3 .inner .list li .txt{padding-left: 0; margin-top: 13px;}
	#sec3 .inner .list li .txt p{font-size: 17px;}
	#sec3 .inner .bg{margin-top: 50px; border-top-right-radius:100px; border-bottom-left-radius:100px;}
	#sec3 .inner .bg img{height: 230px; object-fit: cover;}
}
@media all and (max-width:1024px){
	#sec3 .inner .list{gap:0 2.5vw;}
	#sec3 .inner .list li .tit{font-size: 21px; line-height: 50px;}
	#sec3 .inner .list li .txt{padding-left: 0; margin-top: 11px;}
	#sec3 .inner .list li .txt p{font-size: 17px;}
	#sec3 .inner .bg{margin-top: 45px; border-top-right-radius:90px; border-bottom-left-radius:90px;}
	#sec3 .inner .bg img{height: 210px; object-fit: cover;}
}
@media all and (max-width:768px){
	#sec3{ height: auto !important; padding: 80px 0;}
	#sec3 .fp-tableCell{vertical-align: top; height: auto !important;display: flex; flex-direction: column-reverse;}
	#sec3 .inner .list{flex-direction: column; gap:30px; margin-top: 30px;}
	#sec3 .inner .list li{max-width: 100%;}
	#sec3 .inner .list li .tit{font-size: 20px; line-height: 50px;}
	#sec3 .inner .list li .txt{padding-left: 0; margin-top: 11px;}
	#sec3 .inner .list li .txt p{font-size: 17px;}
	#sec3 .inner .bg{margin-top: 40px; border-top-right-radius:80px; border-bottom-left-radius:80px;}
	#sec3 .inner .bg img{height: 35vw; object-fit: cover;}
}
@media all and (max-width:500px){
	#sec3{padding: 70px 0;}
	#sec3 .inner .bg{margin-top: 35px; border-top-right-radius:10vw; border-bottom-left-radius:10vw;}
	#sec3 .inner .bg img{height: 33vw; object-fit: cover;}
	#sec3 .inner .list li .txt p{font-size: 16px;}
	#sec3 .inner .list li .tit{font-size: 19px; line-height: 46px;}
}


/* sec4 */
#sec4{background: url(/images/main/sec4_bg1.webp) no-repeat right top / 1012px;}
#sec4 .inner{}
#sec4 .inner .tit{display: flex; justify-content: space-between; align-items: flex-end;}
#sec4 .inner .tit .m_txt{}
#sec4 .inner .tit .m_txt a.btn{margin-top: 0;}
#sec4 .inner .list{display: flex; gap:28px; margin-top: 50px;}
#sec4 .inner .list .slick-arrow{font-family: 'Pretendard', sans-serif; background-color: #0e6948; border-radius: 10px; width: 60px; aspect-ratio: 1 / 1; height: auto; font-weight: 600; opacity: 0.85; transition: .4s;}
#sec4 .inner .list .slick-arrow:hover{opacity: 1;}
#sec4 .inner .list .slick-arrow::before{opacity: 1; font-size: 24px;}
#sec4 .inner .list .slick-prev{left: -1.5%;}
#sec4 .inner .list .slick-next{right: -1.5%;}
#sec4 .inner .list li{width: 100%; aspect-ratio: 1 / 1; position: relative; max-width: 379px; margin-right: 28px;}
#sec4 .inner .list li .img{}
#sec4 .inner .list li .img img{max-width: 100%;}
#sec4 .inner .list li p{background: linear-gradient(to right, #4d823e, #22473f, #247057); font-size: 20px; font-weight: 700; color: #fff; display: inline-block; position: absolute; bottom: 30px; padding: 12px 20px; border-top-right-radius: 10px;}

@media all and (max-width:1280px){
	#sec4{background-size: 70vw;}
	#sec4 .inner .list{gap:20px; margin-top: 45px;}
	#sec4 .inner .list li{max-width: 354px; margin-right: 25px;}
	#sec4 .inner .list li p{font-size: 19px; bottom: 25px; padding: 10px 18px;}
	#sec4 .inner .list .slick-arrow{width: 56px;}
	#sec4 .inner .list .slick-arrow::before{font-size: 21px;}
}
@media all and (max-width:1024px){
	#sec4 .inner .list{gap:15px; margin-top: 40px;}
	#sec4 .inner .list li{max-width: 340px; margin-right: 22px;}
	#sec4 .inner .list li p{font-size: 18px; bottom: 20px; padding: 9px 17px; white-space: nowrap;}
	#sec4 .inner .list .slick-arrow{width: 54px;}
	#sec4 .inner .list .slick-arrow::before{font-size: 21px;}
}
@media all and (max-width:768px){
	#sec4{background-size: 80vw;}
	#sec4{ height: auto !important; padding: 80px 0;}
	#sec4 .fp-tableCell{vertical-align: top; height: auto !important;display: flex; flex-direction: column-reverse;}
	#sec4 .inner .tit{flex-direction: column; align-items: flex-start; gap:30px;}
/*	#sec4 .inner .list{display: grid; grid-template-columns: repeat(2, 1fr);}*/
	#sec4 .inner .list li{max-width: 320px; margin-right: 20px;}
	#sec4 .inner .list li p{font-size: 17px; bottom: 16px; padding: 8px 15px; white-space: nowrap;}
	#sec4 .inner .list .slick-arrow{width: 52px;}
	#sec4 .inner .list .slick-arrow::before{font-size: 20px;}
}
@media all and (max-width:500px){
	#sec4{ height: auto !important; padding: 70px 0;}
	#sec4 .inner .list{gap:12px;}
	#sec4 .inner .list li{max-width:300px; margin-right: 16px;}
	#sec4 .inner .list li p{font-size: 16px; bottom: 14px; padding: 7px 14px; white-space: nowrap;}
	#sec4 .inner .list .slick-arrow{width: 48px;}
	#sec4 .inner .list .slick-arrow::before{font-size: 18px;}
}


/* sec5 */
#sec5{display: flex; flex-direction: column;}
#sec5 .top{height: 59%; position: relative;}
#sec5 .top .bg{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 100%; width: 100%;}
#sec5 .top .bg img{object-fit: cover; width: 100%; height: 100%;}
#sec5 .top .inner{display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 90px; height: 100%;}
#sec5 .top .inner .m_txt{width: 408px; padding-bottom: 20px;}
#sec5 .top .inner .m_txt h4{color: #fff;}
#sec5 .top .inner .m_txt h3{color: #fff;}
#sec5 .top .inner .m_txt ul.tab{display: flex; gap:25px; margin-top: 50px;}
#sec5 .top .inner .m_txt ul.tab li{color: #fff; opacity: 0.6; font-size: 20px; font-weight: 700; cursor: pointer;}
#sec5 .top .inner .m_txt ul.tab li.on{opacity: 1;}
#sec5 .top .inner .tabcontent{width: calc(100% - 408px); display: none;}
#sec5 .top .inner .tabcontent.on{display: block;}
#sec5 .top .inner .tabcontent .list{}
#sec5 .top .inner .tabcontent .list li{background-color: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.5); padding: 40px; margin-right: 28px; aspect-ratio:12 / 9; max-height: 292px;}
#sec5 .top .inner .tabcontent .list li a{color: #fff; display: flex; flex-direction: column; height: 100%;}
#sec5 .top .inner .tabcontent .list li a h4{font-size: 16px; margin-bottom: 25px;}
#sec5 .top .inner .tabcontent .list li a h3{font-size: 20px; margin-bottom: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1.3em;}
#sec5 .top .inner .tabcontent .list li a p{font-size: 17px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4em; word-break: keep-all;}
#sec5 .top .inner .tabcontent .list li a .date{font-size: 16px; font-weight: 500; margin-top: auto;}
#sec5 .bottom{height: 41%;}
#sec5 .bottom .inner{height: 100%; width: 100%;}
#sec5 .bottom .inner .list{display: flex; height: 100%; border-right: 1px solid #dddddd; border-left: 1px solid #dddddd;}
#sec5 .bottom .inner .list > div{padding-bottom: 1px;}
#sec5 .bottom .inner .list > div > div{padding-bottom: 1px;}
#sec5 .bottom .inner .list li{width: 100%; text-align: center; height: 100%; padding: 0 20px;}
#sec5 .bottom .inner .list li + li{border-left: 1px solid #dddddd;}
#sec5 .bottom .inner .list li a{display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%;}
#sec5 .bottom .inner .list li a .icon{margin-bottom: 30px;}
#sec5 .bottom .inner .list li a .icon img{max-width: 100%;}
#sec5 .bottom .inner .list li a .txt{}
#sec5 .bottom .inner .list li a .txt h3{font-size: 27px; color: #000; margin-bottom: 25px;}
#sec5 .bottom .inner .list li a .txt p{font-size: 18px; font-weight: 500; color: #666666; word-break: keep-all; line-height: 1.5em;}
#indexbottom{transform: scale(1) !important;}

@media all and (max-width:1280px){
	#sec5 .top .inner{padding-bottom: 75px;}
	#sec5 .top .inner .m_txt{width: 370px;}
	#sec5 .top .inner .m_txt ul.tab{gap:20px; margin-top: 45px;}
	#sec5 .top .inner .m_txt ul.tab li{font-size: 19px;}
	#sec5 .top .inner .tabcontent{width: calc(100% - 370px);}
	#sec5 .top .inner .tabcontent .list li{padding: 35px; margin-right: 22px;}
	#sec5 .top .inner .tabcontent .list li a h4{margin-bottom: 22px;}
	#sec5 .top .inner .tabcontent .list li a h3{font-size: 19px; margin-bottom: 17px;}
	#sec5 .bottom .inner .list li a .icon{margin-bottom: 25px;}
	#sec5 .bottom .inner .list li a .icon img{max-width: 54px;}
	#sec5 .bottom .inner .list li a .txt h3{font-size: 25px; margin-bottom: 22px;}
	#sec5 .bottom .inner .list li a .txt p{font-size: 17px;}
}
@media all and (max-width:1024px){
	#sec5 .top{height: 55%;}
	#sec5 .bottom{height: 45%;}
	#sec5 .top .inner{padding-bottom: 60px;}
	#sec5 .top .inner .m_txt{width: 320px;}
	#sec5 .top .inner .tabcontent{width: calc(100% - 320px);}
	#sec5 .top .inner .tabcontent .list li{padding: 30px; margin-right: 20px;}
	#sec5 .top .inner .tabcontent .list li a h4{margin-bottom: 20px;}
	#sec5 .top .inner .tabcontent .list li a h3{font-size: 19px; margin-bottom: 15px;}
	#sec5 .top .inner .m_txt ul.tab li{font-size: 18px;}
	#sec5 .bottom .inner .list li a .icon{margin-bottom: 22px;}
	#sec5 .bottom .inner .list li a .icon img{max-width: 50px;}
	#sec5 .bottom .inner .list li a .txt h3{font-size: 24px; margin-bottom: 20px;}
}

@media all and (max-width:768px){
	#sec5{ height: auto !important;}
	#sec5 .fp-tableCell{vertical-align: top; height: auto !important;display: flex; flex-direction: column;}
	#sec5 .top .inner{padding: 80px 0; flex-direction: column; align-items: flex-start;}
	#sec5 .top .inner .m_txt{padding-bottom: 0; margin-bottom: 40px; width: 100%;}
	#sec5 .top .inner .m_txt h3 br{display: none;}
	#sec5 .top .inner .m_txt ul.tab{gap:15px; margin-top: 35px;}
	#sec5 .top .inner .m_txt ul.tab li{font-size: 17px;}
	#sec5 .top .inner .tabcontent{width: 100%;}
	#sec5 .top .inner .tabcontent .list li{aspect-ratio: 12 / 8; max-height: 51vw; min-height: 220px;}
	#sec5 .top .inner .tabcontent .list li a h4{margin-bottom: 16px; font-size: 15px;}
	#sec5 .top .inner .tabcontent .list li a p{font-size: 16px;}
	#sec5 .top .inner .tabcontent .list li a .date{font-size: 15px;}
	#sec5 .bottom .inner .list{display: grid; grid-template-columns: repeat(2, 1fr);}
	#sec5 .bottom .inner .list li{padding: 50px 0;}
	#sec5 .bottom .inner .list li:nth-child(3),
	#sec5 .bottom .inner .list li:nth-child(4){border-top: 1px solid #ddd;}
	#sec5 .bottom .inner .list li a .txt h3{font-size: 22px; margin-bottom: 14px;}
	#sec5 .bottom .inner .list li a .txt p{font-size: 16px;}
	#sec5 .bottom .inner .list li a .icon{margin-bottom: 18px;}
	#sec5 .bottom .inner .list li a .icon img{max-width: 45px;}
	#indexbottom{display: none;}
}

@media all and (max-width:500px){
	#sec5 .top .inner{padding: 70px 0;}
	#sec5 .top .inner .tabcontent .list li a h3{font-size: 18px; margin-bottom: 13px;}
	#sec5 .bottom .inner .list li{padding: 40px 0;}
	#sec5 .bottom .inner .list li a .icon img{max-width: 40px;}
	#sec5 .bottom .inner .list li a .txt h3{font-size: 21px; margin-bottom: 10px;}
	
}

.section{transform: scale(0.9); transition: 1s;}
.section.active{transform: scale(1); transition: 1s;}

@media all and (max-width:768px){
	.section{transform: scale(1); transition: 1s;}
}