@charset "utf-8"; 
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@800&display=swap');

/* VISUAL    ================================================================================== */
.main_container						{padding:140px 0 0 0;transition:all 0.3s ease; }  
.main_visual							{position:relative; text-align:center;overflow:hidden; background:url('../img/main/main_bg.jpg') no-repeat center 0 #8bc6ee; background-size:cover;}
.main_visual .item					{position:relative; text-align:center;width:100%;   }	
.main_visual .item li				{width:100%; max-height:700px;background:#ddd;}
.main_visual .item li	img		{  object-fit:cover; }
 


/* MAIN_CONT    ================================================================================== */
 
.cont01								{position:relative; padding:50px 0 90px 0; overflow:hidden;} 
.cont01 ul							{position:relative;padding:0 100px;display:grid; grid-template-columns: repeat(4, 1fr); gap:0; } 
.cont01 ul li						{position:relative; text-align:center; color:#003c97;letter-spacing:-1.5px;font-size:1.1em;font-weight:500;line-height:1.2; border-left:1px dashed #7bb5e1; }
.cont01 ul li img				{display:block; margin:auto;padding:0 0 15px 0;width:90px;transition:all 0.3s ease;}   
.cont01 ul li:hover img				{transform: scale(1.05);}
.cont01 ul a:first-child li	{border-left:0;}
 
@media screen and (max-width:1024px) { 
.cont01								{padding:40px 0 60px 0;  }
.cont01 ul							{ padding:0;}
.cont01 ul li img				{ width:70px;padding:0 0 10px 0;}     
.cont01 ul li						{ letter-spacing:-1.5px;font-size:1em;   }
}
@media screen and (max-width:820px) { 
.cont01 ul li img				{ width:60px;padding:0 0 8px 0;}     
.cont01 ul li						{ letter-spacing:-1.5px;font-size:1em;   }
}
@media screen and (max-width:560px) { 
.cont01								{padding:30px 0 50px 0;  }  
.cont01 ul li img				{ width:50px; }     
.cont01 ul li						{font-size:0.9em;font-weight:300;  }
}


.cont02								{position:relative; padding:0 0 60px 0;  }
.cont02 .subject					{position:relative; text-align:center; font-size:2.5em;color:#003c97; line-height:1.2em;  font-weight:700; letter-spacing:-2px;padding:0 0 20px 0;}
.cont02 ul							{position:relative; }
.cont02 ul a						{position:relative;padding:30px 0;}
.cont02 ul li						{position:relative;  border:2px solid #6fb2de; background:#6fb2de;  box-shadow: 0 0 5px 0 rgba(0,0,0,0.15); margin:0px 20px; }
.cont02 ul li .tag				{position:absolute; top:-5px; left:18px;width:40px;line-height:45px;font-size:0.95em;letter-spacing:-1px;background:#003c97; color:#fff; text-align:center;z-index:1;}

.cont02 ul li .cate1				{ background:#003c97;  }
.cont02 ul li .cate1:after			{content:''; position:absolute; top:44px;left:0;width:0px;height:0px; border-left: 21px solid #003c97;  border-top: 0 solid transparent;  border-bottom: 12px solid transparent; }
.cont02 ul li .cate1:before		{content:''; position:absolute; top:44px;left:19px;width:0px;height:0px; border-right: 21px solid #003c97;  border-top: 0 solid transparent;  border-bottom: 12px solid transparent; } 
.cont02 ul li .cate2				{ background:#f47606;  }
.cont02 ul li .cate2:after		{content:''; position:absolute; top:44px;left:0;width:0px;height:0px; border-left: 21px solid #f47606;  border-top: 0 solid transparent;  border-bottom: 12px solid transparent; }
.cont02 ul li .cate2:before		{content:''; position:absolute; top:44px;left:19px;width:0px;height:0px; border-right: 21px solid #f47606;  border-top: 0 solid transparent;  border-bottom: 12px solid transparent; } 
.cont02 ul li .cate3				{ background:#b046c1;  }
.cont02 ul li .cate3:after		{content:''; position:absolute; top:44px;left:0;width:0px;height:0px; border-left: 21px solid #b046c1;  border-top: 0 solid transparent;  border-bottom: 12px solid transparent; }
.cont02 ul li .cate3:before		{content:''; position:absolute; top:44px;left:19px;width:0px;height:0px; border-right: 21px solid #b046c1;  border-top: 0 solid transparent;  border-bottom: 12px solid transparent; }  

  .cont02 li	{transition:all 0.3s ease;}
.cont02 ul li .img				{display:block; text-align:center; height:330px;background:#fff;  overflow:hidden; } 
.cont02 ul li .img img		{ width:100%;height:100%; object-fit:cover;  }
.cont02 ul li:hover  			{transform: scale(1.05);box-shadow: 0 0 18px 0 rgba(0,0,0,0.25); }
.cont02 ul li .box				{position:relative;text-align:left;padding:20px ;  } 
.cont02 ul li .tit					{position:relative;padding:0 0 8px 0;font-size:1.25em; letter-spacing:-1.5px; color:#fff;font-weight:500;  overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;} 
.cont02 ul li .txt					{position:relative; font-size:1em;line-height:1.3;min-height:45px; letter-spacing:-1px; color:#fff;} 
  
.cont02 .arrow							{position:absolute; top:calc(50% - 30px); width:100%; z-index:1;}
.cont02 .arrow p						{position:absolute; width:60px; height:60px;  border:1px solid #ddd;background:rgb(255,255,255,0.6); cursor:pointer;box-sizing:border-box; } 
.cont02 .arrow p:hover					{border:1px solid #bbb; }	
.cont02 .arrow span						{display:inline-block; border:solid #ccc; border-width:0px 2px 2px 0; padding:8px; }
.cont02 .arrow p:hover	 span			{ border-color:  #999; }
.cont02 .arrow .prev					{left:-100px; }
.cont02 .arrow .prev span				{transform: rotate(135deg); margin:20px 0 0 25px;}
.cont02 .arrow .next					{right:-100px; }
.cont02 .arrow .next span				{transform: rotate(-45deg); margin:20px 0 0 18px;}


@media screen and (max-width:1600px) { 
.cont02 .arrow .prev					{left:-20px; }
.cont02 .arrow .next					{right:-20px; }
}
@media screen and (max-width:1400px) { 
.cont02								{padding:0 20px 80px 20px;  }  
.cont02 ul li						{margin:0px 10px;} 
.cont02 ul li .box				{padding:20px ; } 
.cont02 ul li .tit					{ font-size:1.3em; } 
.cont02 ul li .txt					{padding:0 0 5px 0;font-size:1em;} 


.cont02 .arrow							{position:absolute; top:-65px;  right:20px;}
.cont02 .arrow p						{position:absolute; width:40px; height:40px;  border:1px solid #ddd; cursor:pointer;box-sizing:border-box; }  
.cont02 .arrow span						{display:inline-block; border:solid #ccc; border-width:0px 2px 2px 0; padding:5px; } 
.cont02 .arrow .prev					{left:calc(100% - 85px); }
.cont02 .arrow .prev span				{ margin:14px 0 0 16px;}
.cont02 .arrow .next					{right:0; }
.cont02 .arrow .next span				{margin:14px 0 0 12px;}

} 
@media screen and (max-width:1200px) {  
.cont02 ul li .tit					{ font-size:1.2em;padding:0 0 5px 0; } 
}
 
@media screen and (max-width:1024px) {  
.cont02 .subject					{font-size:2.1em;padding:0 0 30px 0;}
.cont02 ul li .box				{padding:20px ;  }  

.cont02 .arrow p						{width:36px; height:36px;  }  
.cont02 .arrow .prev					{left:calc(100% - 78px); }
.cont02 .arrow .prev span				{ margin:12px 0 0 14px;} 
.cont02 .arrow .next span				{margin:12px 0 0 10px;}

}

@media screen and (max-width:680px) {    
.cont02 .subject					{font-size:1.9em;padding:0 0 10px 0; }
.cont02 ul li:hover  			{transform: scale(1);box-shadow: 0 0 18px 0 rgba(0,0,0,0.25); }
.cont02 .arrow							{position:absolute; top:-46px;  right:10px;}
}


 
.cont03								{position:relative; padding:65px 0 40px 0; overflow:hidden;background:#edf4f8;  }
.cont03 .subject					{position:relative; text-align:center; font-size:2.5em;color:#003c97; line-height:1.2em;  font-weight:700; letter-spacing:-2px;padding:0 0 40px 0;}
.cont03 ul							{position:relative;display: grid; grid-template-columns: repeat(2, 1fr); gap:50px; }
.cont03 ul li						{position:relative;     }
.cont03 ul li .img				{position:relative;  border:6px solid #004797; cursor:default; }
.cont03 ul li .img img		{filter: grayscale(100%); width:100%;}
.cont03 ul li:hover .img img		{filter: grayscale(0); }
.cont03 ul li .box				{position:relative;text-align:left;padding:30px 10px ;  } 
.cont03 ul li .tit					{position:relative;padding:0 0 15px 0;font-size:1.6em; letter-spacing:-1.5px; color:#003c97;font-weight:600;} 
.cont03 ul li .txt					{position:relative;padding:0 0 35px 0;font-size:1.05em; letter-spacing:-1px; color:#003c97; line-height:1.5; } 
.cont03 ul li .btn				{position:relative;display:inline-block; font-size:0.95em;letter-spacing:0;background:#003c97;color:#fff;font-weight:500;line-height:45px;padding:0 50px 0 30px; border-radius:50px;}	
.cont03 ul li .btn:after		{content:''; position:absolute; top:18px;right:20px; width:0px;height:0px;border-top:5px solid transparent;border-bottom:5px solid  transparent;border-left:5px solid #fff;}

@media screen and (max-width:1400px) { 
.cont03								{padding:60px 20px 40px 20px;  }  
.cont03 ul							{ gap:40px; }
.cont03 ul li .tit					{ font-size:1.5em; }  
.cont03 ul li .txt					{font-size:1em;} 
} 
@media screen and (max-width:1024px) { 
.cont03								{padding:50px 20px 40px 20px;  }  
.cont03 .subject					{font-size:2.1em;padding:0 0 30px 0;}
.cont03 ul							{ gap:30px; }
.cont03 ul li .tit					{ font-size:1.4em; }  
.cont03 ul li .txt					{font-size:1em;} 
} 
@media screen and (max-width:820px) { 
.cont03								{padding:40px 30px 30px 30px;  }  
.cont03 ul							{ grid-template-columns: repeat(1, 1fr);  } 
} 
@media screen and (max-width:520px) {     
.cont03 .subject					{font-size:1.9em; }
}
 
@media screen and (max-width:600px) { 
.cont03								{padding:40px 20px 30px 20px;  }  
.cont03 .subject					{  font-size:2em;padding:0 0 30px 0;} 
.cont03 ul li .img				{ border:4px solid #004797; }
.cont03 ul li .box				{padding:20px 5px ;  } 
.cont03 ul li .tit					{ font-size:1.3em;padding:0 0 10px 0; }  
.cont03 ul li .txt					{font-size:0.9em;padding:0 0 20px 0;line-height:1.4;} 
.cont03 ul li .btn				{  font-size:0.85em; font-weight:500;line-height:35px;padding:0 35px 0 20px; border-radius:50px;}	
.cont03 ul li .btn:after		{top:12px;right:15px;  }
} 
 



.cont04								{position:relative; padding:60px 0 80px 0; overflow:hidden; display:flex; flex-flow:wrap; justify-content: space-between; } 
.cont04 .item01					{position:relative;width:calc(100% - 520px);}
.cont04 .item02					{position:relative;width:450px;}
 
@media screen and (max-width:1400px) { 
.cont04								{padding:60px 20px  ; }
} 
@media screen and (max-width:1024px) { 
.cont04 .item01					{ width:100%;padding:0 0 40px 0;}
.cont04 .item02					{ width:100%;}
} 

@media screen and (max-width:820px) { 
.cont04								{padding:50px 30px;  }  
}
 
 




 
.famsite							{position:relative; padding:35px 0;}
.famsite ul							{width:calc(100% - 60px); margin:0 auto; text-align:center}
.famsite ul li						{display:inline-block; margin:0 1px;line-height:60px;}
.famsite ul li img					{max-width:180px;}
.famsite .arrow p					{position:absolute; top:30%; width:30px; height:30px; cursor:pointer;}
.famsite .arrow span				{display:inline-block; border:solid #aaa; border-width:0 3px 3px 0;  padding:5px; margin:10px 0 0 10px;}
.famsite .arrow span:hover			{border-color:#555;}
.famsite .prev						{left:0; transform: rotate(135deg);}
.famsite .next						{right:0; transform: rotate(-45deg);}
.famsite .slick-list				{padding:0;}


@media screen and (max-width:1440px) {
		.famsite .prev					{left:10px;}
		.famsite .next					{right:10px;}
}

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

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

@media screen and (max-width:1024px) {
	.main_container					{padding:60px 0 0 0;}
 
 
}

@media screen and (max-width:820px) {
 

 
}

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

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

@media all and (max-width:520px) {
 
}