@charset "utf-8";

/* m_txt */
.m_txt{}
.m_txt h4{font-size: 24px; color: #093d83;}
.m_txt h3{color: #000000; font-size: 48px; word-break:keep-all; }
.m_txt h4 + h3{margin-top: 40px;}
.m_txt p{font-weight: 400; color: #444; line-height: 1.8em; font-size: 18px; letter-spacing: -0.05em; word-break: keep-all;}
.m_txt h3 + p{margin-top: 35px;}

@media all and (max-width:1280px){
	.m_txt h4{font-size: 22px;}
	.m_txt h3{font-size: 44px;}
	.m_txt h4 + h3{margin-top: 35px;}
	.m_txt h3 + p{margin-top: 32px;}
}
@media all and (max-width:1024px){
	.m_txt h4{font-size: 21px;}
	.m_txt h3{font-size: 40px;}
	.m_txt h4 + h3{margin-top: 30px;}
	.m_txt p{font-size: 17px; line-height: 1.7em;}
	.m_txt h3 + p{margin-top: 27px;}
}
@media all and (max-width:768px){
	.m_txt h4{font-size: 20px;}
	.m_txt h3{font-size: 36px;}
	.m_txt h4 + h3{margin-top: 25px;}
	.m_txt h3 + p{margin-top: 22px;}
}
@media all and (max-width:500px){
	.m_txt h4{font-size: 19px;}
	.m_txt h3{font-size: 32px;}
	.m_txt h4 + h3{margin-top: 22px;}
	.m_txt h3 + p{margin-top: 17px;}
}

a.more{color: #000; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap:12px;}
a.more span.circle{font-weight: 500; display: inline-flex; justify-content: center; align-items: center; width: 38px; height: 38px; border-radius: 100%; border: 1px solid #dfdfdf;}
a.more2{display: inline-flex; justify-content: center; align-items: center; width: 64px; height: 64px; border-radius: 100%; border: 1px solid #ddd; color: #fff; font-size: 22px; font-weight: 500; transition: .4s;}
a.more2:hover{background-color: #fff; color: #000;}

@media all and (max-width:1280px){
	a.more{font-size: 15px; gap:10px;}
	a.more span.circle{width: 36px; height: 36px;}
	a.more2{width: 60px; height: 60px; font-size: 21px;}
}
@media all and (max-width:1024px){}
@media all and (max-width:768px){
	a.more{font-size: 14px; gap:8px;}
	a.more span.circle{width: 34px; height: 34px;}
	a.more2{width: 56px; height: 56px; font-size: 20px;}
}
@media all and (max-width:500px){
	a.more2{width: 52px; height: 52px; font-size: 19px;}
}

/* scroll_box */
.scroll_box{position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);}
.scroll_box .gague{width: 2px; height: 60px; background-color: rgba(255,255,255,0.2); position: relative; margin: 0 auto; overflow: hidden;}
.scroll_box .gague .bar{width: 2px; height: 25px; background-color: #fff; position: absolute; top: 0; animation: scrollbars 1s infinite linear;}
.scroll_box p{font-size: 14px; font-weight: 500; color: #fff; margin-top: 16px;}

@keyframes scrollbars {
	0%{top: -50px;}
	100%{top: 75px;}
}

@media all and (max-width:1280px){
	.scroll_box{bottom: 55px;}
	.scroll_box p{font-size: 13px; margin-top: 13px;}
}
@media all and (max-width:1024px){
	.scroll_box{bottom: 50px;}
}
@media all and (max-width:768px){
	.scroll_box{bottom: 46px;}
	.scroll_box p{font-size: 12px; margin-top: 10px; font-weight: 400;}
}
@media all and (max-width:500px){
	.scroll_box{bottom: 42px;}
	.scroll_box p{font-weight: 300;}
}

/* mVisual */
#mVisual{height: 100dvh; width: 100%; overflow: hidden; min-height: 560px;}
#mVisual .visual{width: 100%; height: 100%;}
#mVisual .visual > div{height: 100%;}
#mVisual .visual > div > div{height: 100%;}
#mVisual .visual .mv{width: 100%; height: 100%; position: relative;}
#mVisual .visual .mv.mv1{}
#mVisual .visual .mv .img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: -1;}
#mVisual .visual .mv .video{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: -1; background-color: #000;}
#mVisual .visual .mv .video video{width: 100%; height: 100%; object-fit: cover; opacity: 0.7;}
#mVisual .visual .mv .img img{width: 100%; height: 100%; object-fit: cover;}
#mVisual .visual .mv.slick-current .img img{animation: imgzoom 1.5s forwards;}
#mVisual .visual .mv .txt{color: #fff; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center;}
#mVisual .visual .mv .txt h4{font-size: 23px; font-weight: 600;}
#mVisual .visual .mv .txt h3{font-size: 64px; margin-top: 32px; word-break: keep-all;}

@keyframes imgzoom{
	0%{transform: scale(1.1);}
	100%{transform: scale(1)}
}

@media all and (max-width:1280px){
	#mVisual .visual .mv .txt h4{font-size: 21px;}
	#mVisual .visual .mv .txt h3{font-size: 56px; margin-top: 25px;}
}
@media all and (max-width:1024px){
	#mVisual .visual .mv .txt h4{font-size: 20px;}
	#mVisual .visual .mv .txt h3{font-size: 52px; margin-top: 23px;}
}
@media all and (max-width:768px){
/*	#mVisual{height: 70vh;}*/
	#mVisual .visual .mv .txt h4{font-size: 19px;}
	#mVisual .visual .mv .txt h3{font-size: 46px; margin-top: 21px;}
}
@media all and (max-width:500px){
	#mVisual .visual .mv .txt h4{font-size: 18px;}
	#mVisual .visual .mv .txt h3{font-size: 40px; margin-top: 19px;}
}


/* sec1 */
#sec1{}
#sec1 .inner{padding-top: 140px;}
#sec1 .inner .m_txt{margin-bottom: 70px;}
#sec1 .w-inner{ padding-bottom: 140px;}
#sec1 .w-inner .list{display: flex; justify-content: space-between; gap:28px;}
#sec1 .w-inner .list li{width: 100%; max-width: 350px; margin-right: 27.5px;}
#sec1 .w-inner .list li .img{border-radius: 20px; overflow: hidden;}
#sec1 .w-inner .list li .img img{max-width: 100%;}
#sec1 .w-inner .list li .txt{margin-top: 25px;}
#sec1 .w-inner .list li .txt h3{font-size: 30px; color: #000;}
#sec1 .w-inner .list li .txt p{font-size: 18px; color: #666666; word-break: keep-all; line-height: 1.6em; letter-spacing: -0.05em; font-weight: 300; margin-top: 15px; height: 4.8em;}
#sec1 .w-inner .list li .txt a{margin-top: 30px;}

@media all and (max-width:1860px){
	#sec1 .w-inner .list li{max-width: 330px;}
}
@media all and (max-width:1280px){
	#sec1{}
	#sec1 .inner{padding-top: 120px;}
	#sec1 .w-inner{ padding-bottom: 120px;}
	#sec1 .inner .m_txt{margin-bottom: 60px;}
	#sec1 .w-inner .list li{max-width: 320px; margin-right: 24px;}
	#sec1 .w-inner .list li .txt{margin-top: 23px;}
	#sec1 .w-inner .list li .txt h3{font-size: 27px;}
	#sec1 .w-inner .list li .txt p{font-size: 17px; margin-top: 12px;}
	#sec1 .w-inner .list li .txt a{margin-top: 27px;}
}
@media all and (max-width:1024px){
	#sec1 .inner{padding-top: 100px;}
	#sec1 .w-inner{ padding-bottom: 100px;}
	#sec1 .inner .m_txt{margin-bottom: 55px;}
	#sec1 .w-inner .list li{max-width: 300px; margin-right: 22px;}
	#sec1 .w-inner .list li .txt{margin-top: 21px;}
	#sec1 .w-inner .list li .txt h3{font-size: 25px;}
	#sec1 .w-inner .list li .txt a{margin-top: 25px;}
}
@media all and (max-width:768px){
	#sec1 .inner{padding-top: 90px;}
	#sec1 .w-inner{ padding-bottom: 90px;}
	#sec1 .inner .m_txt{margin-bottom: 50px;}
	#sec1 .w-inner .list li{max-width: 39vw; margin-right: 20px;}
	#sec1 .w-inner .list li .txt{margin-top: 19px;}
	#sec1 .w-inner .list li .txt h3{font-size: 23px;}
	#sec1 .w-inner .list li .txt p{font-size: 16px; margin-top: 10px;}
	#sec1 .w-inner .list li .txt a{margin-top: 23px;}
	#sec1 .w-inner .list li .img{border-radius: 15px;}
}
@media all and (max-width:500px){
	#sec1 .inner{padding-top: 80px;}
	#sec1 .w-inner{ padding-bottom: 80px;}
	#sec1 .inner .m_txt{margin-bottom: 45px;}
	#sec1 .w-inner .list li{max-width: 66vw; margin-right: 15px;}
	#sec1 .w-inner .list li .txt{margin-top: 16px;}
	#sec1 .w-inner .list li .txt h3{font-size: 21px;}
	#sec1 .w-inner .list li .txt a{margin-top: 21px;}
}


/* sec2 */
#sec2{position: relative; width: 100%; height: 100vh; overflow: hidden; min-height: 560px;}
#sec2 .img{position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
#sec2 .img img{width: 100%; height: 100%; object-fit: cover;}
#sec2.aos-animate .img img{animation: imgzoom 1.5s forwards;}
#sec2 .inner{height: 100%;}
#sec2 .inner .m_txt{color: #fff; position: absolute; width: 100%; top: 25%;}
#sec2 .inner .m_txt h4{color: #fff;}
#sec2 .inner .m_txt h3{color: #fff;}
#sec2 .inner .m_txt p{color: #fff;}
#sec2 .inner .m_txt a{color: #fff; margin-top: 55px;}

@media all and (max-width:1280px){
	#sec2 .inner .m_txt{top: 23%;}
}
@media all and (max-width:1024px){}
@media all and (max-width:768px){
	#sec2{height: calc(100vh - 64px);}
	#sec2 .inner .m_txt{top: 21%;}
	#sec2 .inner .m_txt p br{display: none;}
	#sec2 .inner .m_txt p br{display: none;}
}
@media all and (max-width:500px){}


/* sec3 */
#sec3{ overflow-x: hidden; }
#sec3 .bg{padding: 180px 0 900px; background: url(/images/main/sec3_bg.webp) no-repeat center bottom / cover;}
#sec3 .inner{display: flex; align-items: center; }
#sec3 .inner .l_cont{width: 520px;}
#sec3 .inner .l_cont .m_txt{}
#sec3 .inner .r_cont{width: calc(100% - 520px);}
#sec3 .inner .r_cont .list{width: 150%;}
#sec3 .inner .r_cont .list li{position: relative; width: 460px; margin-right: 28px; border-radius: 20px; overflow: hidden; transition: .2s;}
#sec3 .inner .r_cont .list li:hover{transform: scale(0.95);}
#sec3 .inner .r_cont .list li .img{aspect-ratio: 9 / 12.52173913; position: relative;}
#sec3 .inner .r_cont .list li .img img{width: 100%; height: 100%; object-fit: cover; transition: .4s;}
#sec3 .inner .r_cont .list li:hover .img img{transform: scale(1.1);}
#sec3 .inner .r_cont .list li .txt{position: absolute; padding: 60px 50px; width: 100%; height: 100%; top: 0; left: 0;}
#sec3 .inner .r_cont .list li .txt h3{font-size: 36px; color: #fff; line-height: 1.3em; letter-spacing: -0.05em;}
#sec3 .inner .r_cont .list li .more2{position: absolute; bottom: 60px; left: 50px;}

@media all and (max-width:1280px){
	#sec3 .bg{padding: 160px 0 800px}
	#sec3 .inner .l_cont{width: 470px;}
	#sec3 .inner .r_cont{width: calc(100% - 470px);}
	#sec3 .inner .r_cont .list li{width: 420px; margin-right: 24px;}
	#sec3 .inner .r_cont .list li .txt{padding: 50px 40px;}
	#sec3 .inner .r_cont .list li .txt h3{font-size: 32px;}
	#sec3 .inner .r_cont .list li .more2{bottom: 50px; left: 40px;}
}
@media all and (max-width:1024px){
	#sec3 .bg{padding: 140px 0 680px}
	#sec3 .inner .l_cont{width: 400px;}
	#sec3 .inner .r_cont{width: calc(100% - 400px);}
	#sec3 .inner .r_cont .list li{width: 370px; margin-right: 20px;}
	#sec3 .inner .r_cont .list li .img{aspect-ratio:8 / 11;}
	#sec3 .inner .r_cont .list li .txt{padding: 45px 35px;}
	#sec3 .inner .r_cont .list li .txt h3{font-size: 28px;}
	#sec3 .inner .r_cont .list li .more2{bottom: 45px; left: 35px;}
}
@media all and (max-width:768px){
	#sec3 .bg{padding: 120px 0 540px}
	#sec3 .inner{flex-direction: column;}
	#sec3 .inner .l_cont{width: 100%;}
	#sec3 .inner .l_cont .m_txt h3 br{display: none;}
	#sec3 .inner .r_cont{width: 100%; margin-top: 50px;}
	#sec3 .inner .r_cont .list li{width: 44vw; margin-right: 20px; border-radius: 15px;}
	#sec3 .inner .r_cont .list li .img{aspect-ratio: 10 / 15; max-height: 430px; width: 100%;}
	#sec3 .inner .r_cont .list li .img img{width: 100%; height: 100%; object-fit: cover;}
	#sec3 .inner .r_cont .list li .txt{padding: 35px 25px;}
	#sec3 .inner .r_cont .list li .txt h3{font-size: 25px; word-break: keep-all;}
	#sec3 .inner .r_cont .list li .txt h3 br{display: none;}
	#sec3 .inner .r_cont .list li .more2{bottom: 30px; left: 25px;}
}
@media all and (max-width:500px){
	#sec3 .bg{padding: 100px 0 320px}
	#sec3 .inner .r_cont .list li{width: 56vw; margin-right: 15px;}
	#sec3 .inner .r_cont .list li .txt{padding: 30px 20px;}
	#sec3 .inner .r_cont .list li .txt h3{font-size: 23px;}
}


/* sec4 */
#sec4{ background: url(/images/main/sec4_bg.webp) no-repeat top center / cover; margin-top: -1px;}
#sec4 .inner{padding: 100px 0 200px;}
#sec4 .inner .m_txt{color: #fff; text-align: center;}
#sec4 .inner .m_txt h3{color: #fff;}
#sec4 .inner .m_txt p{color: #fff;}
#sec4 .inner .boxs{gap:30px; display: flex; justify-content: space-between; margin-top: 80px; align-items: stretch;}
#sec4 .inner .boxs > div{width: 50%;}
#sec4 .inner .boxs > div .title{display: flex; align-items: center; gap:16px; margin-bottom: 22px;}
#sec4 .inner .boxs > div .title h3{font-size: 24px; color: #fff;}
#sec4 .inner .boxs > div .title a{font-size: 16px; font-weight: 600; color: #aaaaaa;}
#sec4 .inner .boxs > .l_cont{display: flex; flex-direction: column;}
#sec4 .inner .boxs > .l_cont .box{background-color: #f5f6f8; padding: 40px 60px; flex:1; border-radius: 10px; overflow: hidden;}
#sec4 .inner .boxs > .l_cont .box .list{border-top: 1px solid #000000;}
#sec4 .inner .boxs > .l_cont .box .list li{border-bottom: 1px solid #dcdddf;}
#sec4 .inner .boxs > .l_cont .box .list li a{display: flex; justify-content: space-between; align-items: center; padding: 22px 0;}
#sec4 .inner .boxs > .l_cont .box .list li a .tit{width: 75%; font-size: 17px; font-weight: 600; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#sec4 .inner .boxs > .l_cont .box .list li a .date{width: 25%; text-align: right; font-size: 14px; color: #666666;}
#sec4 .inner .boxs > .r_cont{display: flex; flex-direction: column;}
#sec4 .inner .boxs > .r_cont .box{cursor: pointer; position: relative; display: flex; flex-direction: column; flex: 1; border-radius: 20px; overflow: hidden;}
#sec4 .inner .boxs > .r_cont .box .img{position: relative; flex:1; width:100%; height: auto;}
#sec4 .inner .boxs > .r_cont .box .img img{width: 100%; height: 100%; object-fit: cover;}
#sec4 .inner .boxs > .r_cont .box .txt{position: absolute; width: 100%; padding: 0 60px; display: flex; flex-direction: column; justify-content: center; height: 100%; gap:45px;}
#sec4 .inner .boxs > .r_cont .box .txt h3{color: #fff; font-size: 40px;}

@media all and (max-width:1280px){
	#sec4 .inner{padding: 90px 0 180px}
	#sec4 .inner .boxs{margin-top: 75px;}
	#sec4 .inner .boxs > div .title h3{font-size: 22px;}
	#sec4 .inner .boxs > .l_cont .box{padding: 35px 50px;}
	#sec4 .inner .boxs > .l_cont .box .list li a{padding: 20px 0;}
	#sec4 .inner .boxs > .r_cont .box .txt{padding: 0 50px;}
	#sec4 .inner .boxs > .r_cont .box .txt h3{font-size: 36px;}
}
@media all and (max-width:1024px){
	#sec4 .inner{padding: 85px 0 160px}
	#sec4 .inner .boxs{margin-top: 70px;}
	#sec4 .inner .boxs > .l_cont .box .list li a .tit{font-size: 16px;}
	#sec4 .inner .boxs > div .title h3{font-size: 21px;}
	#sec4 .inner .boxs > div .title a{font-size: 15px;}
	#sec4 .inner .boxs > .r_cont .box .txt h3{font-size: 32px;}
}
@media all and (max-width:768px){
	#sec4 .inner{padding: 80px 0 140px}
	#sec4 .inner .boxs{margin-top: 65px; flex-direction: column; gap:50px;}
	#sec4 .inner .boxs > div{width: 100%;}
	#sec4 .inner .boxs > div .title h3{font-size: 20px;}
	#sec4 .inner .boxs > .l_cont .box{padding: 30px 45px;}
	#sec4 .inner .boxs > .l_cont .box .list li a{padding: 18px 0;}
	#sec4 .inner .boxs > .r_cont .box{border-radius: 15px;}
	#sec4 .inner .boxs > .r_cont .box .img{aspect-ratio:16 / 10;}
	#sec4 .inner .boxs > .r_cont .box .txt h3{font-size: 29px;}
}
@media all and (max-width:500px){
	#sec4 .inner{padding: 70px 0 120px}
	#sec4 .inner .boxs{margin-top: 60px;}
	#sec4 .inner .boxs > div .title h3{font-size: 19px;}
}