@charset "utf-8"; 

/* VISUAL  ================================================================================== */
.main_container						{position:relative; overflow:hidden;}

.main_container .section			{display:flex; align-items:center; width:100%; height:100vh; transition: 0.3s;}

.mainVisual .bxslider				{visibility:hidden;}
.mainVisual .mvideo_box				{position:relative; width:100%; aspect-ratio:16/9; padding:0; margin:0;}
.mainVisual							{position:relative; top:0; left:0; overflow:hidden; }  
.mainVisual .item 					{width:100%; height:100vh;}
.mainVisual .bg 					{overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; filter: brightness(0.85); animation:imgScale 3s both; } 
.mainVisual dl						{position:absolute; text-align:center; width:100%; top:38%; z-index:100; color:#fff; animation:slide-up 2s cubic-bezier(.5,.2,0,1) forwards;} 
.mainVisual dl dt					{font-size:3.2em; font-weight:700; text-shadow:2px 2px 5px rgba(0,0,0,0.3); line-height:1.2; letter-spacing:-3px;}
.mainVisual dl dt em				{font-family: 'paybooc-Bold'; font-size:18px; display:block; letter-spacing:3px; margin-bottom:20px;}
.mainVisual dl dd					{font-size:1.35em; line-height:1.6; margin-top:35px; opacity:0.9; letter-spacing:-0.75px;}

.mainIntro							{position:relative; background:#f3f4f9; }
.mainIntro .web_size				{width:100%; display:grid; grid-template-columns:repeat(2, 1fr); align-items:center; gap:40px;}
.mainIntro .tit						{position:relative; z-index:1;}
.mainIntro .tit dt					{position:relative; font-size:2.8em; color:#111; letter-spacing:-2.75px; line-height:1.1; font-weight:200; display:inline-block;}
.mainIntro .tit dt:before			{position:absolute; top:5px; left:-35px; content:''; width:8px; height:100%; border-radius:5px; background:var(--color1);}
.mainIntro .tit dt strong			{font-weight:700; display:block;}
.mainIntro .tit dd					{color:#666; font-size:1.25em; line-height:1.5; margin-top:25px;}
.mainIntro .tit .more				{margin-top:40px;}
.mainIntro .tit .more a				{display:inline-block; background:#013378; color:#fff; width:150px; line-height:57px; font-weight:500; text-align:Center; font-size:18px;}
.mainIntro .tit .more i				{margin-left:8px; font-size:15px;}
.mainIntro .tit .more:hover	a		{background:var(--gra1);}
.mainIntro .tit .more:hover i		{transform:rotate(180deg); transition: .3s;}
.mainIntro .bn 						{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px 30px;}
.mainIntro .bn li a					{position:relative; display:grid; align-items:center; overflow:hidden;}
.mainIntro .bn dl					{position:absolute; width:100%; text-align:Center; color:#fff; z-index:2; padding:0 20px;}
.mainIntro .bn dl dt				{font-size:1.6em; font-weight:700; line-height:1.2;}
.mainIntro .bn dl dd				{font-family :'pretendard'; letter-spacing:1px; font-size:0.95em; opacity:0.9; margin-top:10px;}
.mainIntro .bn figure				{position:Relative; overflow:hidden;}
.mainIntro .bn figure img			{transition:all 0.4s ease; width:100%;}
.mainIntro .bn li:hover				{overflow:hidden; box-shadow:0 0 20px 1px rgba(0,0,0,0.2);}
.mainIntro .bn li:hover	.more		{display:block; transition:all 0.4s ease;}
.mainIntro .bn li:hover figure img	{transform: scale(1.1);}
.mainIntro .bn li p					{width:60px; line-height:60px; color:#fff; background:var(--color1); text-align:Center; font-size:20px; position:absolute; right:0; bottom:8px;}
.mainIntro .bn li p i				{transform:rotate(-45deg);}
.mainIntro .bn li:hover p 			{background:rgba(16,77,152,.7); width:100%; height:100%; bottom:0;}
.mainIntro .bn li:hover p i			{display:none;}
.mainIntro .web_size:after			{content:''; position:absolute; right:-30%; height:120%; width:100%; background:url('../img/main/acc_symbol.png') no-repeat right center;}

.mainBoard							{position:relative; background:#f3f4f9;}
.mainTab							{display:flex; justify-content:space-between; align-items:end; margin-bottom:45px;}
.mainTab .tit						{position:relative; font-family :'pretendard'; color:#333; font-size:2.75em; text-indent:30px; float:left; line-height:1; text-transform:uppercase; font-weight:700;}
.mainTab .tit:before				{position:absolute; top:5px; left:0; content:''; width:8px; height:85%; border-radius:5px; background:var(--color1);}
.mainTab .more a					{font-family :'pretendard'; position:relative; font-weight:600; font-size:0.95em; letter-spacing:0.5px; color:#104d98; z-index:1;}
.mainTab .more i					{transform:rotate(-45deg); margin-left:10px; transition:all 0.3s ease;}
.mainTab .more a:before				{content:''; position:absolute; top:-18px; right:-20px; background:#e9eaef; width:55px; height:55px; border-radius:100%; transition:all 0.3s ease; z-index:-1;}
.mainTab .more a:hover:before		{background:var(--color1) !important;}
.mainTab .more:hover i				{color:#fff; margin-left:25px; transform:none;}

.mainBoard .bn						{display:grid; grid-template-columns:repeat(8, 1fr); text-align:center; margin-top:40px;}
.mainBoard .bn li					{position:relative; background:url('../img/main/acc_bn01.png') no-repeat center 23px; background-size:72px;}
.mainBoard .bn li:after				{content:''; position:absolute; top:0; right:0; bottom:0; width:7px; height:7px; border-radius:100%; margin:auto; background:#dfe1e4;}
.mainBoard .bn li:nth-child(2)		{background-image:url('../img/main/acc_bn02.png');}
.mainBoard .bn li:nth-child(3)		{background-image:url('../img/main/acc_bn03.png');}
.mainBoard .bn li:nth-child(4)		{background-image:url('../img/main/acc_bn04.png');}
.mainBoard .bn li:nth-child(5)		{background-image:url('../img/main/acc_bn05.png');}
.mainBoard .bn li:nth-child(6)		{background-image:url('../img/main/acc_bn06.png');}
.mainBoard .bn li:nth-child(7)		{background-image:url('../img/main/acc_bn07.png');}
.mainBoard .bn li:last-child		{background-image:url('../img/main/acc_bn08.png');}
.mainBoard .bn li:last-child:after	{display:none;}
.mainBoard .bn li:hover  			{animation:bounce 1s ease-out; -webkit-animation:bounce 1s ease-out;}
.mainBoard .bn li a					{font-size:1.2em; color:#333; padding-top:110px; display:block; font-weight:500;}

.mainPhoto							{position:relative;}

.scroll_nav							{position:fixed; top:50%; right:20px; transform:translateY(-50%); z-index:9999;}
.scroll_nav .dot					{display:grid; justify-content:center; gap:23px; margin-bottom:50px;}
.scroll_nav .dot li					{content:''; display:block; position:relative; width:9px; height:9px; background:#fff; border-radius:50%; box-shadow:0 0 15px 1px rgba(0,0,0,.08); transition:all 0.3s ease; cursor:pointer;}
.scroll_nav .dot .on:after			{position:absolute; top:-9px; left:-9px; content:''; display:block; width:26px; height:26px; border:1px solid #fff; opacity:0.8; border-radius:50%;}
.scroll_nav>p						{font-family :'pretendard'; position:relative; color:#fff; font-weight:500; transform:rotate(270deg); letter-spacing:.5px; font-size:0.95em;}
.scroll_nav:before					{content:''; position:absolute; right:28px; bottom:-38px; border:solid #fff; border-width:0 2px 2px 0; padding:4px; transform:rotate(45deg);}
.scroll_nav:after					{content:''; position:absolute; right:28px; bottom:-45px; border:solid #fff; border-width:0 2px 2px 0; padding:4px; transform:rotate(45deg);}
.scroll_nav.inverse .dot li			{background:rgb(0,0,0,0.2); box-shadow:none;}
.scroll_nav.inverse .dot .on			{background:var(--color1);}
.scroll_nav.inverse .dot .on:after		{border-color:var(--color1);}
.scroll_nav.inverse>p					{color:#333;}
.scroll_nav.inverse:before, .scroll_nav.inverse:after	{border-color:#888;}


@media screen and (max-width:1400px) {
	.mainIntro, .mainBoard, .mainPhoto	{padding:0 40px;}
	.mainPhoto .web_size			{width:calc(100% - 40px);}
}

@media screen and (max-width:1200px) {
	.mainIntro .web_size			{display:grid; justify-content:center; text-align:center;}
	.mainIntro .web_size:after		{right:-20%;}

	.mainIntro .web_size			{grid-template-columns:1fr;}
	.mainIntro .tit dt strong		{display:inline-block;}
	.mainIntro .bn					{justify-content:center; width:75%; margin:0 auto;}
	.mainBoard .bn li a				{font-size:1.1em}
	
}

@media screen and (max-width:1024px) {
	.main_container					{padding:60px 0 0 0;}
	.mainVisual dl					{padding:0 20px;}
	.mainVisual dl dt				{font-size:2.4em;}
	.mainVisual dl dt em			{font-size:14px; margin-bottom:15px;}
	.mainVisual dl dd				{font-size:1.05em; margin-top:20px;}

	.mainIntro						{padding:60px 20px;}
	.mainIntro .web_size			{gap:20px;}
	.mainIntro .tit dt				{font-size:1.8em; line-height:1.2; padding-left:17px;}
	.mainIntro .tit dt:before		{left:0; width:6px; height:85%;}
	.mainIntro .tit dd				{font-size:1em; margin-top:10px; text-align:left;}
	.mainIntro .tit dd br			{display:none;}
	.mainIntro .tit .more			{margin-top:20px;}
	.mainIntro .tit .more a			{width:120px; line-height:46px; font-size:15px;}
	.mainIntro .web_size:after		{background-size:400px; right:0; height:100%; background-position:center 50%;}
	.mainIntro .bn					{gap:15px; width:100%;}
	.mainIntro .bn dl dt			{font-size:1.2em;}
	.mainIntro .bn dl dt br			{display:none;}
	.mainIntro .bn dl dd			{margin-top:5px; font-size:0.85em; line-height:1.2;}
	.mainIntro .bn li p				{width:42px; line-height:42px;}

	.mainBoard						{padding:60px 20px;}
	.mainBoard .bn					{grid-template-columns:repeat(4, 1fr); margin:0;}
	.mainBoard .bn li				{background-size:45px;}
	.mainBoard .bn li a				{padding-top:75px; font-size:1em;}
	.mainBoard .bn li:nth-child(4):after	{display:none;}

	.mainTab						{margin-bottom:20px;}
	.mainTab .tit					{font-size:2em; text-indent:17px;}
	.mainTab .tit:before			{top:3px; width:6px;}
	.mainTab .more a				{font-size:0.85em;}
	.mainTab .more a:before			{width:32px; height:32px; top:-7px; right:-10px;}

	.mainPhoto						{padding:60px 20px;}

}

@media screen and (max-width:768px) { 
	.main_container .section		{display:block; height:100%;}

	.mainVisual .item				{height:420px !important; padding:0;}
	.mainVisual dl					{top:25%; transform:translateY(-50%);}
	.mainVisual dl dt				{font-size:1.8em;}
	.mainVisual dl dt em			{font-size:12px; margin-bottom:10px;}
	.mainVisual dl dd br			{display:none;}

	.mainIntro .bn					{display:grid; gap:10px; grid-template-columns:1fr; width:100%;}
	.mainIntro .bn figure			{aspect-ratio:5/2;}
	.mainIntro .bn li p				{bottom:0;}

	.mainPhoto .web_size			{width:100%;}

	.mainTab						{display:grid; justify-content:center; gap:10px; text-align:center;}
	.mainBoard .bn					{grid-template-columns:repeat(3, 1fr);}
	.mainBoard .bn li:nth-child(3):after, .mainBoard .bn li:nth-child(6):after	{display:none;}
	.mainBoard .bn li:nth-child(4):after	{display:block;}

	.scroll_nav						{display:none;}
}