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

/* VISUAL    ================================================================================== */
.main_container					{padding:150px 0 0 0; overflow:hidden;}

.mVisual .bxslider				{visibility:hidden;}

.mVisual						{position:relative; overflow:hidden;}
.mVisual li						{position:relative; height:600px; }	
.mVisual .item					{content:''; animation:imgScale 3s both;}

.mVisual .acc					{position:absolute; width:100%; top:28%; z-index:100; text-align:center; color:#fff; text-shadow:2px 2px 5px rgba(0,0,0,0.1); animation:slide-up 3s cubic-bezier(.5,.2,0,1) forwards;}
.mVisual .acc dt				{font-family: 'paybooc-Bold';  font-size:2.85em; line-height:1.2; }
.mVisual .acc dd				{font-size:1.25em; line-height:1.6; letter-spacing:-0.75px; margin-top:30px;	}

/* CONTENTS    ================================================================================== */
.mTit							{font-family: 'paybooc-Bold';  color:#000; font-size:1.9em; line-height:1; letter-spacing:0; margin-bottom:20px;}
.mTit span						{display:block; font-size:17px; color:#888; margin-top:20px; letter-spacing:-0.75px;}

.mBoard							{padding:100px 0; display:grid; grid-template-columns:repeat(2, 1fr); gap:0 60px;}
.mBoard>div						{position:relative; min-width:0;}

.proitem>ul						{margin:0 -10px;}
.proitem .item					{position:relative;margin:10px; border:1px solid #dfdfdf; box-shadow:5px 5px 0 0 #ededed; border-radius:20px; overflow:hidden; min-height:325px;}
.proitem dl						{padding:35px; background:#fff; }
.proitem dt span				{font-weight:500; color:#134a9a; letter-spacing:-1px;}
.proitem dt p					{font-family: 'paybooc-Bold';  font-size:1.15em; letter-spacing:0.5px; line-height:1.4; margin:15px 0 10px 0; color:#333; overflow:hidden; text-overflow:ellipsis;-o-text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical; word-wrap:break-word;}
.proitem dd						{display:grid; grid-template-columns:40px auto; font-size:0.95em;}
.proitem dd 					{color:#797979;}
.proitem dd:nth-child(2)		{font-size:0.95em; grid-template-columns:1fr; height:70px; overflow:hidden; text-overflow:ellipsis;-o-text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp: 3;-webkit-box-orient:vertical; word-wrap:break-word; margin:0 0 15px 0; line-height:1.4;}
.proitem dd img					{display:none;}
.proitem dd p					{display:inline-block;}
.proitem dd strong				{color:#333;}
.proitem .end dt span			{color:#999;}
.proitem .item .more			{text-align:center; color:#fff; position:absolute; right:0; bottom:0; width:55px; line-height:50px; background:#003494; border-radius:10px 0 0 0;}
.proitem .item .more i			{transition: all 0.3s;}
.proitem .item:hover			{border-color:#134a9a;}
.proitem .item:hover .more i	{transform:rotate(180deg);}

.proArrow						{position:absolute; top:0; right:10px;}
.proArrow p						{position:relative; display:inline-block; width:42px; height:42px; line-height:36px; text-align:center; border:2px solid #d5d5d5; background:#fff; cursor:pointer; vertical-align:top; border-radius:100%;}
.proArrow .prev:after			{content:''; display:inline-block; margin:0 0 0 3px; border:solid #555; border-width:0 0 3px 3px; padding:4px; transform:rotate(45deg); border-radius:2px;}
.proArrow .next:after			{content:''; display:inline-block; margin:0 3px 0 0; border:solid #555; border-width:3px 3px 0 0; padding:4px; transform:rotate(45deg); border-radius:2px;}
.proArrow .stop					{line-height:36px;}
.proArrow .stop:before			{content:''; display:inline-block; width:3px; height:13px; background:#555; border-radius:2px;}
.proArrow .stop:after			{content:''; display:inline-block; width:3px; height:13px; background:#555; border-radius:2px; margin-left:3px;}
.proArrow .play					{line-height:37px; text-indent:3px;}
.proArrow .play:after			{content:''; display:inline-block; width:0; height:0; border-style:solid; border-width:7px 0 7px 10px; border-color:transparent transparent transparent #555; border-radius:3px;}
.proArrow .more					{transition: all 0.2s;}
.proArrow .more:before			{position:absolute; top:13px; left:17px; content:''; display:inline-block; width:3px; height:13px; background:#555; border-radius:2px;}
.proArrow .more:after			{position:absolute; top:18px; left:12px; content:''; display:inline-block; width:13px; height:3px; background:#555; border-radius:2px;}
.proArrow p:hover				{border-color:#a71560; background:#a71560;}
.proArrow p:hover:after, .proArrow p:hover:before	{border-color:#fff;}
.proArrow .more:hover			{transform: rotate(180deg);}
.proArrow .stop:hover:after, .proArrow .stop:hover:before, .proArrow .more:hover:before, .proArrow .more:hover:after	{background:#fff;}
.proArrow .play:hover:after		{border-color:transparent transparent transparent #fff;}

.mBanner						{position:relative; background:#e6eef7; }
.mBanner:after					{content:''; position:absolute; right:0; top:0; width:50%; height:100%; background:#f8f9fa;}
.mBanner .web_size				{display:grid; grid-template-columns:repeat(2, 1fr); gap:0 120px;}
.mBanner dl						{position:relative; z-index:1; padding:60px 0;}
.mBanner dl:after				{content:''; display:block; position:absolute; right:-3%; bottom:0; width:290px; height:380px; background:url('../img/main/acc01.png') no-repeat center bottom;}
.mBanner dl:last-child:after	{right:-15%; background-image:url('../img/main/acc02.png');}
.mBanner dl dt					{color:#333; font-family: 'paybooc-Bold';  font-size:1.8em; letter-spacing:0; margin-bottom:40px;}
.mBanner dl dt span				{color:#023b93; font-size:16px; letter-spacing:1px; display:block; margin-bottom:20px; text-transform:uppercase; line-height:1;}
.mBanner dl dd					{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px 0; padding-right:180px;}
.mBanner dl dd p				{position:relative; padding-left:12px; letter-spacing:0; font-size:1.1em;}
.mBanner dl dd p a				{position:relative; font-family: 'paybooc-Medium';  color:#000; }
.mBanner dl dd p:before			{position:absolute; content:''; display:block; left:0; top:12px; width:4px; height:4px; background:#555; border-radius:100%;}
.mBanner dl dd p:first-child a, .mBanner dl dd p:hover a	{font-family: 'paybooc-Bold';  box-shadow: inset 0 -10px 0 #d5eafc;}

.mGallery						{padding:100px 0;}
.mGallery .mTit					{font-family: 'paybooc-Bold';  text-align:center; font-size:2.2em; margin-bottom:40px; letter-spacing:-0.5px;}


@media screen and (max-width:1400px) {
	.mBoard, .mGallery			{padding:100px 20px;}
	.mBanner dl					{padding:60px 20px;}
	.mBanner .web_size			{gap:0 60px;}
	.mBanner dl:last-child:after	{right:-8%;}
}

@media screen and (max-width:1200px) {
	.mBanner dl dd				{grid-template-columns:1fr;}
}

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

	.mVisual li					{height:420px;}
	.mVisual .acc				{padding:0 20px;}
	.mVisual .acc dt			{font-size:2.2em;}
	.mVisual .acc dd			{margin-top:15px; font-size:1.05em;}
	.mVisual .acc dd br			{display:none;}

	.mBoard						{padding:40px 20px; grid-template-columns:1fr; gap:40px 0;}
	.mTit						{font-size:1.5em;}
	.proitem .mTit				{margin-bottom:10px; text-align:center;}
	.proitem .item				{min-height:230px;}
	.proitem dl					{padding:25px;}
	.proitem dt span			{font-size:0.9em;}
	.proitem dt p				{font-size:1.05em; margin:7px 0 10px 0;}
	.proitem dd:nth-child(2)	{height:46px; -webkit-line-clamp:2; margin-bottom:10px;}
	.proitem .item .more		{width:40px; line-height:40px;}
	.proArrow					{position:relative; text-align:center; right:0;}
	.proArrow p					{width:36px; height:36px; line-height:28px;}
	.proArrow .prev:after		{padding:3px;}
	.proArrow .next:after		{padding:3px; margin:0 2px 0 0;}
	.proArrow .stop				{line-height:30px;}
	.proArrow .stop:after		{margin-left:2px; height:11px;}
	.proArrow .stop:before		{height:11px;}
	.proArrow .more:after		{top:15px; left:11px; width:11px;}
	.proArrow .more:before		{top:11px; left:15px; height:11px;}
	.proArrow .play				{line-height:27px;}
	.proArrow .play:after		{border-width:6px 0 6px 8px;}

	.mBanner dl					{padding:40px 20px;}
	.mBanner dl:first-child		{padding:40px 0 40px 40px;}
	.mBanner dl dt				{font-size:1.5em; margin-bottom:20px;}
	.mBanner dl dt span			{font-size:13px; margin-bottom:15px;}
	.mBanner dl dd				{gap:5px 0;}
	.mBanner dl dd p			{font-size:1em;}
	.mBanner dl:after			{right:-5%; height:300px; background-size:contain;}

	.mGallery					{padding:40px 20px;}
	.mGallery .mTit				{font-size:1.6em; margin-bottom:20px;}
	.mTit span					{font-size:15px; margin-top:12px;}

}

@media screen and (max-width:768px) {
	.mVisual li					{height:320px;}
	.mVisual .acc				{top:22%;}
	.mVisual .acc dt			{font-size:1.6em;}

	.mBanner .web_size			{grid-template-columns:1fr;}
	.mBanner dl					{padding:30px !important;}
	.mBanner dl:last-child		{background:#f8f9fa;}
	.mBanner:after				{display:none;}
	.mBanner dl:after			{height:240px;}
	.mBanner dl:last-child:after	{right:-12%;}
}