@charset "utf-8";

/* Main Visual */

.m_visual{width:100%; margin:0 auto; position:relative;  z-index:100; padding-top:130px;}
.m_visual .visual{height:836px; position:relative; text-align:center; background:#f9f9f9;}
.m_visual .visual01{
/*background:url('../../../img/202402/main/m_visual01.jpg') center no-repeat; background-size:cover;*/
}
.m_visual video.pc_visual{width:100%; height:100%; object-fit:cover;}
/*.m_visual .visual01::before{content:''; display:block; width:661px; height:824px; background:url('../../../img/202401/main/m_visual_man.png') center no-repeat; background-size:cover; position:absolute; bottom:-46px; right:14%;}*/
.m_visual .visual01::before{content:''; display:block; width:100%; height:836px; background:rgba(0,0,0,0.5); position:absolute; left:50%; top:0; transform:translateX(-50%);}
.m_visual .layout{max-width:1000px !important;}
.m_visual .txt{color: #fff; position: absolute; left: 50%; top: 207px; text-align: left; transform: translateX(-60%);}
.m_visual .txt .tit{font-size:45px; font-weight:700;}
.m_visual .txt .tit small{display:block; border-bottom:1px solid #fff;  width:fit-content; margin-bottom:30px; font-size:20px;}
.m_visual .txt .s_tit{font-size:19px; margin:35px 0 30px; line-height:30px;}

.mb_visual{display:none;}


/*main common-------------------------------------------------------------------------------------------------------------------------------------*/
#main h2{font-family: 'Paperlogy'; position:relative; color:#003056; font-size:38px; font-weight:700; margin:0 0 30px; width:fit-content;}
#main h2 img{margin-left:10px; height:38px;}
#main h2 span{position:relative; margin-right:7px;}
#main h2 span::before{width:41px; height:38px; content:''; display:block; background:#fff url('../../../img/202504/main/h2_han.png') center no-repeat; position:absolute; right:-8px; top:1px;}
#main .m2 h2 span::before{background-color:#f4f9e9;}
#main .layout{max-width:1280px;}

.m1 a,.m2 a,.m3 a,.m4 a{display:block; height:100%;}

#main .txt > span{font-family: 'Paperlogy'; font-weight:700; font-size:20px; display:block; width:fit-content;}
#main .txt p{word-break:keep-all; line-height:22px;}
#main .txt p strong{color:#72a700;}
#main .txt p span.name{font-weight:600; display:inline-block; margin-top:5px; font-size:16px;}
#main .title{display:flex; flex-wrap:wrap; justify-content:space-between;}
#main .title .s_tit{padding-top:26px; color:#494949; font-size:15px;}
#main .img_wrap{margin:0; display:block; border-radius:0;}


.m1{padding:80px 0 60px;}
.m1 h2 span{color:#0bb274;}
.m1 .box_wr{gap:2%;}
.m1 .box{flex:1; position:relative;}

.m1 .txt{padding:26px 0px; position:relative; transition:0.8s;}
.m1 .txt::before{display:block; content:''; background:#0bb274; width:0; height:100%; position:absolute; left:0; top:0; transition:1s;}
.m1 .txt > span{border-bottom:2px solid #222; margin:0 0 14px; transition:0.8s;}
.m1 .box:hover .txt::before{width:100%;}
.m1 .box:hover .txt{padding:26px 20px; color:#fff;}
.m1 .box:hover .txt p strong{color:#ecffc2 !important;}
.m1 .box:hover .txt span{border-color:#fff;}


.m2{background:#f4f9e9; padding:80px 0;}
.m2 h2 span{color:#8fc31f;}
.m2 .box{position:relative; width:49%; margin-bottom:2%;}
.m2 .box:nth-child(odd){margin-right:2%;}
.m2 .box::before{content:''; display:block; position:absolute; right:0; top:0; width:100%; transition:2s; height:100%; background:linear-gradient(130deg, rgba(61, 22, 7, 0) 0%, rgb(61,22,7,0.08) 50%, rgb(39,22,15,0.6) 100%); z-index:1;}
.m2 .txt{position:absolute; right:30px; bottom:30px; color:#fff; display:flex; flex-wrap:wrap; justify-content:right; z-index:2; transition:1s;}
.m2 .txt > span{border-radius:14px; border:1px solid #fff; padding:5px 10px; margin-bottom:15px;}
.m2 .txt p{text-align:right; width:100%; text-shadow:2px 2px 3px rgba(0,0,0,0.34);}
.m2 .box:hover::before{width:0;}
.m2 .box2 .txt,.m2 .box4 .txt{right:unset; left:30px; justify-content:left;}
.m2 .box2 .txt p,.m2 .box4 .txt p{text-align:left;}
.m2 .box2::before,.m2 .box4::before{background:linear-gradient(219deg, rgba(61, 22, 7, 0) 0%, rgb(61,22,7,0.08) 50%, rgb(39,22,15,0.6) 100%); right:unset; left:0;}
.m2 .txt p strong{color:#d8ff85 !important;}


.m_wr{padding:80px 0; text-align:center;}
.m_wr .box{width:48%; margin-bottom:4%; position:relative;}
.m_wr .box:nth-child(odd){margin-right:4%;}
.m_wr .txt{padding:10px 10px; text-align:center; transition:0.1s; position:absolute; left:0; bottom:0; width:100%;}
.m_wr .txt span{margin:0 auto 12px;}
.m_wr .img_wrap{display:block; overflow:hidden;}
.m_wr .img_wrap img{transition:2s;}
.m_wr .box:hover .img_wrap img{transform:scale(1.1);}
#main .m_wr .title .s_tit{padding-top:62px;}

.m3{width:50%; padding-right:40px;}
.m3 h2 span{color:#007cda;}
.m3 .txt{background:rgba(255,255,255,0.52); backdrop-filter:blur(2px);}
.m3 .box:hover .txt{background:#007cda; color:#fff;}
.m3 .txt p strong{color:#3f5d00 !important;}
.m3 .box:hover p strong{color:#d8ff85 !important;}

.m4{width:50%; padding-left:40px;}
.m4 h2 span{color:#00bfe4;}
.m4 .txt{background:rgba(255,255,255,0.62); backdrop-filter:blur(2px);}
.m4 .box:hover .txt{background:#00bfe4; color:#fff;}
.m4 .event_box{position:relative;}
.m4 .event_box .event_link{opacity:0; position:absolute; transition:0.1s; left:50%; transform:translateX(-50%); top:43px; text-align:center;}
.m4 .event_box .event_link a{display:block; width:fit-content; margin:0 auto 14px; min-width:100px; padding:5px 10px; border-radius:5px; background:#00bee3; color:#fff; transition:0.1s; box-shadow:2px 2px 6px rgba(51,51,51,0.4);}
.m4 .event_box .event_link a:last-child{margin:0 auto;}
.m4 .event_box .event_link a:hover{background:#a8cf52; color:#fff;}
.m4 .event_box:hover .event_link{opacity:1;}
.m4 .box p strong{color:#3f5d00 !important;}
.m4 .box:hover p strong{color:#d8ff85 !important;}







/* ----------------------------------------- Media Query ----------------------------------------- */

@media only screen and (max-width : 1400px) {
}




@media only screen and (max-width : 1280px) {
	.m_visual{padding-top:100px;}

	.m_wr{padding:80px 20px;}
}



@media only screen and (max-width : 1000px) {
	#main .layout{padding:0 25px;}
	#main .m_wr{padding:80px 25px;}

 	.m_visual .visual{height:500px;}
	.m_visual .visual .txt{top:82px;}
	.m_visual .visual .txt p.tit{font-size:30px; line-height:38px;}
	.m_visual .visual .txt p.s_tit{font-size:14px; line-height:21px; margin:16px 0 40px;}

	#main h2{font-size:33px;}
	#main h2 img{height:35px;}
	#main h2 span{margin-right:5px;}
	#main h2 span::before{width:40px; height:34px; background-size:34px; right:-10px;}
	#main .txt span{font-size:14px !important;}
	#main .txt p{line-height:20px;}
	#main .title .s_tit{font-size:14px; padding-top:0; width:100%; text-align:right; margin-bottom:20px;}
	#main .m_wr .title .s_tit{padding-top:0;}

	.m3{width:100%; padding-right:0; border-right:none; margin-bottom:40px;}
	.m4{width:100%; padding-left:0;}
}




@media only screen and (max-width : 800px) {
	.m_visual{padding-top:84px;}

	.m1{padding:80px 0 40px;}

	.m2{padding:40px 0;}
	.m2 .box{width:100%; margin-bottom:7%; height:250px;}
	.m2 .box:nth-child(odd){margin-right:0;}
	.m2 .box span.img_wrap{height:100%;}
	.m2 .box span.img_wrap img{width:100%; height:100%; object-fit:cover;}

	.m_wr{padding:40px 20px;}
	.m_wr .txt{padding:20px 5px; position:unset;}
	#main .m_wr .title .s_tit{}
}




@media only screen and (max-width : 700px) {
	.m_visual .visual{height:500px;}
	.mb_visual{width:100%; object-fit:cover;}
	.m_visual .visual .txt p.s_tit span{display:contents; word-break:keep-all;}
	.m_visual .txt .tit small{font-size:14px;}
	.m_visual .visual .txt{left:5%; top:50%; transform:translateY(-50%); padding:20px 30px 30px; word-break:keep-all;}
	.m_visual .visual .txt p.tit{font-size:20px; line-height:29px;}
	.m_visual .visual .txt p.s_tit{font-size:14px; line-height:24px; margin:15px 0 30px;}
	.m_visual .btn-more{padding:7px 33px 7px 12px;}
	.m_visual .btn-more span{font-size:13px;}
}




@media only screen and (max-width : 600px) {
	.m1 .box_wr{gap:0;}
	.m1 .box{flex:unset; width:49%; margin-bottom:5%;}
	.m1 .box:nth-child(odd){margin-right:2%;}
	.m1 .txt{padding:12px 0;}
}



@media only screen and (max-width : 400px) {
}