@charset "utf-8";

body							{background-color:#212e41}

.introduceBox					{overflow:hidden; position:absolute; left:50%; top:0px; transform:translateX(-50%); width:100%; min-width:350px; max-width:800px; min-height:100%; padding-top:40px; text-align:center; background-color:#FFF; box-shadow:0 10px 20px rgb(0 0 0 / 39%), 0 6px 6px rgb(0 0 0 / 43%);}
.introduceBox H1				{display:flex; align-items:center; justify-content:center;}

@media screen and (max-width:500px) {
	i.gcms_logo					{width:35px; height:35px;}
}

.introduceWrap									{line-height:1.4; word-break:keep-all; padding-bottom:50px;}
.introduceWrap > section						{display:flex; justify-content:center; align-items:center; padding:8% 8%; margin:40px auto;}
.introduceWrap > section h3						{font-family:GongGothic; color:var(--mygray500); font-size:var(--FS24); font-weight:500; margin-bottom:4%; letter-spacing:var(--LS12);}
.introduceWrap > section > .section-text,
.introduceWrap > section > .section-image		{width:50%;}

.introduceWrap > section > .section-text p		{font-size:var(--FS15); color:var(--mygray); margin:15px 0 0; line-height:1.6}
.introduceWrap > section strong					{font-weight:700;}
.introduceWrap > section > .section-image > img	{width:100%; max-width:330px; border-radius:12px; overflow:hidden;}

.introduceWrap > section.sectionLeft .section-text	{padding-right:5%}
.introduceWrap > section.sectionRight .section-text	{padding-left:5%}


@media screen and (max-width:980px){
	.introduceWrap > section					{flex-wrap:wrap; text-align:center; padding:4% 4%;}
	.introduceWrap > section h3					{font-size:var(--FS22);}
	.introduceWrap > section > .section-text,
	.introduceWrap > section > .section-image	{width:100%;}
	.introduceWrap > section > .section-text	{margin-top:5%; padding:0px !important;}

	.sectionLeft 			{flex-direction:column-reverse;}
}


/* Top Visual */
.introduces_videoWrap		{overflow:hidden; position:relative; height:350px;}
.introduces_videoWrap:after	{position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.4); content:''; transition:height 0.5s ease-in-out;}
.introduces_videoWrap video	{position:absolute; top:50%; left:50%; width:100%; height:auto; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}
.video_titArea				{display:flex; justify-content:center; align-items:center; position:relative; font-family:celmonHG; width:100%; height:100%; font-weight:200; z-index:1; font-size:var(--FS36); line-height:1.5; color:#fff;}

@media screen and (max-width:980px) {
    .video_titArea			{font-size:var(--FS30);} 
}
@media screen and (max-width:580px) {
    .video_titArea			{font-size:var(--FS24);} 
}


/* Last Section */
.lastSection			{flex-direction:column; position:relative; height:400px; background:url(../img/introduce/lastsectionBG.jpg) no-repeat; background-size:cover; text-align:center; color:#fff;}
.lastSection:after		{position:absolute; top:0; left:0; width:100%; content: ''; height:100%; background-color:rgba(0,0,0,0.75); z-index:0;}
.lastSection h2			{font-size:var(--FS32); margin:25px 0 36px; font-weight:500; color:#fff; text-align:center; line-height:1.3; z-index:1;}
.lastSection p			{font-size:var(--FS22); z-index:1;}
.lastSection a			{font-size:var(--FS18); background-color:var(--IDTcolor); border-radius:50px; font-weight:600; padding:10px 38px; color:#fff; z-index:1;}
	
@media screen and (max-width:980px){
	.lastSection		{height:300px;}
	.lastSection h2		{font-size:24px;}
	.lastSection p		{font-size:16px;}
}