@charset "utf-8";

br.pc{display: block;}
br.mo{display: none;}

#mVisual{position: relative; height: 100vh; width: 100%; overflow: hidden; min-height: 640px;}
#mVisual::after{content: ''; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background-color: rgba(0,0,0,0.2);}
#mVisual .bg{position: absolute; width: 100%; height: 100%; z-index: -1; top: 0; left: 0;}
#mVisual .bg iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 120vw;}
#mVisual .inner{height: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
#mVisual .inner .txt{position: relative; z-index: 2; padding-bottom: 200px;}
#mVisual .inner .txt h3{font-size: 48px; color: #fff;}
#mVisual .inner .txt h3 span{color: #ffda36;}
#mVisual .inner .txt p{font-size: 20px; color: #fff; font-weight: 600; margin: 25px 0 40px; word-break: keep-all; line-height: 1.5em;}
#mVisual .inner .txt .scroll{font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: #fff;}
#mVisual .inner .txt .scroll span{font-family: 'SUIT', sans-serif;}

@media all and (max-width:1600px){
	#mVisual .bg iframe{width: 1920px; left: 10%; transform: translate(-20%, -50%);}
}
@media all and (max-width:1280px){
	#mVisual .inner .txt{padding-bottom: 180px;}
	#mVisual .inner .txt h3{font-size: 44px;}
	#mVisual .inner .txt p{font-size: 18px; margin: 20px 0 35px;}
	#mVisual .inner .txt .scroll{font-size: 15px;}
}
@media all and (max-width:976px){
	#mVisual{height: 85vh;}
	#mVisual .bg iframe{height: 200vw;}
	#mVisual .inner .txt{padding-bottom: 50px;}
}
@media all and (max-width:640px){
	#mVisual .inner .txt h3{font-size: 36px;}
	#mVisual .inner .txt p{font-size: 17px;}
	#mVisual .inner .txt .scroll{font-size: 14px;}
	br.mo{display: block;}
	br.pc{display: none;}
}


.m_tit{display: flex; align-items: center; margin-bottom: 55px; gap:0 42px;}
.m_tit h3{font-size: 40px; font-weight: 700; color: #222; min-width: 350px; line-height: 1.4em;}
.m_tit h3 span{color: #314e9c;}
.m_tit p{font-size: 18px; font-weight: 500; color: #666666; word-break: keep-all; line-height: 1.5em;}
.m_tit .arrow_box{display: flex; gap:0 20px;}
.m_tit .arrow_box > div{cursor: pointer;}
.m_tit .arrow_box > div img{}

@media all and (max-width:1280px){
	.m_tit{margin-bottom: 50px;}
	.m_tit h3{font-size: 36px; min-width: 290px;}
}
@media all and (max-width:976px){
	.m_tit{margin-bottom: 40px;}
	.m_tit h3{font-size: 32px;}
	.m_tit p{font-size: 17px;}
	.m_tit .arrow_box{gap:0 15px;}
	.m_tit .arrow_box > div img{max-width: 60px;}
}
@media all and (max-width:640px){
	.m_tit{margin-bottom: 35px; flex-direction: column; align-items: flex-start;}
	.m_tit h3{font-size: 28px;}
	.m_tit p{font-size: 16px; margin-top: 20px;}
	.m_tit .arrow_box{display: none;}
}

.sec{padding: 120px 0;}
.sec.sec1{}
.sec.sec1 .m_tit{justify-content: space-between;}
.sec.sec1 .cont_box{}
.sec.sec1 .cont_box .box{position: relative; padding: 60px 50px; max-width: 563px; height: 580px; margin-right: 28px; border-radius: 10px; width: 100%;}
.sec.sec1 .cont_box .box.b1{background-image: url(/images/main/sec1_bg1.webp);}
.sec.sec1 .cont_box .box.b2{background-image: url(/images/main/sec1_bg2.webp);}
.sec.sec1 .cont_box .box.b3{background-image: url(/images/main/sec1_bg3.webp);}
.sec.sec1 .cont_box .box.b4{background-image: url(/images/main/sec1_bg4.webp);}
.sec.sec1 .cont_box .box.b5{background-image: url(/images/main/sec1_bg5.webp);}
.sec.sec1 .cont_box .box .txt{}
.sec.sec1 .cont_box .box .txt h4{font-size: 18px; font-weight: 500; color: #333333;}
.sec.sec1 .cont_box .box .txt h3{font-size: 32px; color: #000000; margin: 15px 0 12px; line-height: 1.3em;}
.sec.sec1 .cont_box .box .txt p{font-size: 18px; font-weight: 500; color: #fff; padding: 8px; display: inline-block;}
.sec.sec1 .cont_box .box.b1 .txt p{background-color: #234295;}
.sec.sec1 .cont_box .box.b2 .txt p{background-color: #238e95;}
.sec.sec1 .cont_box .box.b3 .txt p{background-color: #6340a2;}
.sec.sec1 .cont_box .box.b4 .txt p{background-color: #c6467c;}
.sec.sec1 .cont_box .box.b5 .txt p{}
.sec.sec1 .cont_box .box a.more{position: absolute; right: 50px; bottom: 50px;}
.sec.sec1 .cont_box .box a.more img{}

@media all and (max-width:1280px){
	.sec{padding: 110px 0;}
	.sec.sec1 .cont_box .box{max-width: 480px; height: 540px; padding: 50px 40px;}
	.sec.sec1 .cont_box .box .txt h4{font-size: 17px;}
	.sec.sec1 .cont_box .box .txt h3{font-size: 28px;}
	.sec.sec1 .cont_box .box .txt p{font-size: 17px;}
	.sec.sec1 .cont_box .box a.more{right: 40px; bottom: 40px;}
	.sec.sec1 .cont_box .box a.more img{max-width: 66px;}
}
@media all and (max-width:976px){
	.sec{padding: 90px 0;}
	.sec.sec1 .cont_box .box{max-width: 440px; height: 500px; padding: 45px 35px; margin-right: 25px;}
	.sec.sec1 .cont_box .box .txt h4{font-size: 16px;}
	.sec.sec1 .cont_box .box .txt h3{font-size: 26px; margin-top: 12px; margin-bottom: 10px;}
	.sec.sec1 .cont_box .box .txt p{font-size: 16px;}
	.sec.sec1 .cont_box .box a.more{right: 35px; bottom: 35px;}
	.sec.sec1 .cont_box .box a.more img{max-width: 58px;}
}
@media all and (max-width:640px){
	.sec{padding: 70px 0;}
	.sec.sec1 .cont_box .box{max-width: 80vw; height: 110vw; max-height: 460px; padding: 30px 25px; margin-right: 20px;}
	.sec.sec1 .cont_box .box .txt h4{font-size: 15px;}
	.sec.sec1 .cont_box .box .txt h3{font-size: 23px;}
	.sec.sec1 .cont_box .box .txt p{font-size: 15px;}
	.sec.sec1 .cont_box .box a.more{right: 30px; bottom: 30px;}
	.sec.sec1 .cont_box .box a.more img{max-width: 52px;}
}

.sec.sec2{background-color: #f0f4f9;}
.sec.sec2 .cont{}
.sec.sec2 .cont .box{margin: 0 20px; position: relative;}
.sec.sec2 .cont .box.new{}
.sec.sec2 .cont .box.new::after{content: 'NEW'; font-family: 'Montserrat', sans-serif; color: #fff; background-color: #e6212a; line-height: 26px; width: 66px; text-align: center; position: absolute; top: 15px; left: 15px; font-size: 15px; font-weight: 700; border-radius: 4px;}
.sec.sec2 .cont .box .img{}
.sec.sec2 .cont .box .img img{max-width: 100%;}
.sec.sec2 .cont .box p{font-size: 18px; font-weight: 600; color: #222222; text-align: center; margin-top: 18px;}
.sec.sec2 .gage{background-color: #ececec; height: 6px; width: 100%; margin-top: 70px; position: relative;}
.sec.sec2 .gage .bar{position: absolute; height: 100%; background: linear-gradient(to right, #234395, #01bffa); left: 0; top: 0; transition: .4s;}

@media all and (max-width:1280px){
	
}
@media all and (max-width:976px){
	.sec.sec2 .cont .box{margin: 0 15px;}
	.sec.sec2 .cont .box .img img{max-width: 360px;}
	.sec.sec2 .cont .box p{font-size: 17px; margin-top: 16px;}
	.sec.sec2 .cont .box.new::after{line-height: 24px; width: 56px; font-size: 14px; top: 10px; left: 10px;}
	.sec.sec2 .gage{margin-top: 50px; height: 5px;} 
}
@media all and (max-width:640px){
	.sec.sec2 .cont .box{margin: 0 12px;}
	.sec.sec2 .cont .box .img img{max-width: 320px;}
	.sec.sec2 .cont .box p{font-size: 16px; margin-top: 13px;}
}


.sec.sec3{padding-bottom: 0;}
.sec.sec3 .cont{display: flex; gap:0 35px;}
.sec.sec3 .cont .box{padding: 60px 55px; border-radius: 10px; width: 100%; flex:1 1 auto; max-width: 510px;}
.sec.sec3 .cont .box.box1{background-color: #e5edf5;}
.sec.sec3 .cont .box.box2{background-color: #e5f3f5;}
.sec.sec3 .cont .box.box3{background-color: #e5f5ed;}
.sec.sec3 .cont .box .tit{display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px;}
.sec.sec3 .cont .box .tit h3{font-size: 32px; font-weight: 700; color: #000;}
.sec.sec3 .cont .box .tit a{font-size: 16px; color: #666666; text-decoration: underline; text-underline-position: under;}
.sec.sec3 .cont .box .board_box{}
.sec.sec3 .cont .box .board_box.b1{}
.sec.sec3 .cont .box .board_box.b1 .board{padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dashed #ced5dc; }
.sec.sec3 .cont .box .board_box.b1 .board:last-child{border-bottom: 0; margin-bottom: 0; padding-bottom: 0;}
.sec.sec3 .cont .box .board_box.b1 .board a{}
.sec.sec3 .cont .box .board_box.b1 .board a h3{font-size: 22px; font-weight: 500; color: #222222; margin-bottom: 10px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sec.sec3 .cont .box .board_box.b1 .board a p{font-size: 18px; color: #666666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 20px;}
.sec.sec3 .cont .box .board_box.b1 .board a .date{font-size: 16px; color: #999999;}
.sec.sec3 .cont .box .board_box.b2{}
.sec.sec3 .cont .box .board_box.b2 .board{ padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px dashed #ced5dc;}
.sec.sec3 .cont .box .board_box.b2 .board:last-child{margin-bottom: 0;}
.sec.sec3 .cont .box .board_box.b2 .board a{}
.sec.sec3 .cont .box .board_box.b2 .board a h3{font-size: 22px; color: #222222; font-weight: 500;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

@media all and (max-width:1600px){
	.sec.sec3 .cont .box{max-width: 33.3333%; padding: 50px 45px;}
	.sec.sec3 .cont .box .tit{margin-bottom: 40px;}
	.sec.sec3 .cont .box .tit h3{font-size: 28px;}
	.sec.sec3 .cont .box .board_box.b1 .board a h3{font-size: 20px;}
	.sec.sec3 .cont .box .board_box.b2 .board a h3{font-size: 20px;}
	.sec.sec3 .cont .box .board_box.b1 .board a p{font-size: 17px; margin-bottom: 15px;}
}
@media all and (max-width:1280px){
	.sec.sec3 .cont{gap:0 25px;}
	.sec.sec3 .cont .box{padding: 40px 35px;}
	.sec.sec3 .cont .box .tit h3{font-size: 25px;}
	.sec.sec3 .cont .box .board_box.b1 .board{padding-bottom: 12px; margin-bottom: 12px;}
	.sec.sec3 .cont .box .board_box.b1 .board a h3{font-size: 18px; margin-bottom: 8px;}
	.sec.sec3 .cont .box .board_box.b1 .board a p{font-size: 16px;}
	.sec.sec3 .cont .box .board_box.b2 .board{margin-bottom: 24px; padding-bottom: 16px;}
	.sec.sec3 .cont .box .board_box.b2 .board a h3{font-size: 18px;}
}
@media all and (max-width:976px){
	.sec.sec3 .cont{flex-direction: column;}
	.sec.sec3 .cont .box{width: 100%; max-width: 100%;}
	.sec.sec3 .cont .box + .box{margin-top: 20px;}
	.sec.sec3 .cont .box .tit{margin-bottom: 30px;}
}
@media all and (max-width:640px){
	.sec.sec3 .cont .box .tit h3{font-size: 22px;}
	.sec.sec3 .cont .box .tit a{font-size: 15px;}
	.sec.sec3 .cont .box .board_box.b1 .board a h3{font-size: 17px;}
	.sec.sec3 .cont .box .board_box.b1 .board a p{font-size: 15px; margin-bottom: 12px;}
	.sec.sec3 .cont .box .board_box.b1 .board a .date{font-size: 15px;}
	.sec.sec3 .cont .box .board_box.b2 .board{margin-bottom: 16px; padding-bottom: 16px;}
	.sec.sec3 .cont .box .board_box.b2 .board a h3{font-size: 17px;}
}


.sec.sec4{padding: 100px 0;}
.sec.sec4 .inner{display: flex; gap:0 34px;}
.sec.sec4 .inner .box{width: 100%;  border-radius: 15px;padding: 60px 50px; cursor: pointer;}
.sec.sec4 .inner .box.b1{background: #acdcf5 url(/images/main/sec4_img1.webp) no-repeat bottom right 66px;}
.sec.sec4 .inner .box.b2{background: #fbf5b5 url(/images/main/sec4_img2.webp) no-repeat center right 66px;}
.sec.sec4 .inner .box .txt{}
.sec.sec4 .inner .box .txt h3{font-size: 32px; color: #000000; line-height: 1.3em;}
.sec.sec4 .inner .box .txt h3 span{color: #234295;}
.sec.sec4 .inner .box .txt p{font-size: 18px; font-weight: 500; color: #666666; margin-top: 30px;}
.sec.sec4 .inner .box .txt p span{font-family: 'SUIT', sans-serif;}

@media all and (max-width:1600px){
	.sec.sec4 .inner .box{padding: 60px 40px;}
	.sec.sec4 .inner .box.b1{background-position: bottom right 5%;}
	.sec.sec4 .inner .box.b2{background-position: center right 5%;}
}
@media all and (max-width:1280px){
	.sec.sec4{padding: 90px 0;}
	.sec.sec4 .inner .box{padding: 50px 40px;}
	.sec.sec4 .inner .box.b1{background-size:auto 70%;}
	.sec.sec4 .inner .box.b2{background-size:auto 70%;}
	.sec.sec4 .inner .box .txt h3{font-size: 27px;}
	.sec.sec4 .inner .box .txt p{font-size: 17px;}
}
@media all and (max-width:976px){
	.sec.sec4{padding: 80px 0;}
	.sec.sec4 .inner{flex-direction: column; gap:30px;}
}
@media all and (max-width:640px){
	.sec.sec4{padding: 70px 0;}
	.sec.sec4 .inner{gap:20px;}
	.sec.sec4 .inner .box{padding: 35px 30px; border-radius: 12px;}
	.sec.sec4 .inner .box .txt h3{font-size: 22px;}
	.sec.sec4 .inner .box .txt p{font-size: 16px; margin-top: 20px;}
}
@media all and (max-width:480px){
	.sec.sec4 .inner .box.b1{background-size:auto 50%;}
	.sec.sec4 .inner .box.b2{background-size:auto 50%;}
}


.sec.sec5{height: 460px; display: flex; justify-content: center; align-items: center; width: 100%; background: url(/images/main/sec5_bg.webp) no-repeat center center / cover; padding: 0;}
.sec.sec5 .txt{text-align: center;}
.sec.sec5 .txt h3{font-size: 40px; color: #fff; line-height: 1.3em;}
.sec.sec5 .txt h3 span{color: #ffda36;}
.sec.sec5 .txt a{background-color: #234295; color: #fff; font-size: 20px; font-weight: 700; display: inline-block; line-height: 60px; padding: 0 22px; border-radius: 5px; margin-top: 35px;}

@media all and (max-width:1280px){
	.sec.sec5{height: 420px;}
	.sec.sec5 .txt h3{font-size: 36px;}
	.sec.sec5 .txt a{margin-top: 30px; font-size: 18px; line-height: 56px;}
}
@media all and (max-width:976px){
	.sec.sec5{height: 380px;}
	.sec.sec5 .txt h3{font-size: 33px;}
	.sec.sec5 .txt a{margin-top: 25px; font-size: 17px; line-height: 52px;}
}
@media all and (max-width:640px){
	.sec.sec5{height: 320px;}
	.sec.sec5 .txt{padding: 0 4%;}
	.sec.sec5 .txt h3{font-size: 28px;}
	.sec.sec5 .txt a{margin-top: 20px; font-size: 16px; line-height: 50px;}
}