@charset "utf-8"; 
 
/* MAIN VISUAL  ================================================================================== */
.main_container                     {padding:100px 0 0 0; background:#f7f8fa;}
.main_container h2                  {font-family: 'S-Core Dream'; font-weight:500; color:#2a2a2a; font-size:1.6em; letter-spacing:-1.5px; margin-bottom:25px;}
.main_container h2 .more a          {float:right; display:inline-block; width:42px; height:42px; line-height:38px; text-align:center; font-size:18px; border:2px solid #c6c6c6; background:#fff; color:#333; cursor:pointer; margin-top:-3px; vertical-align:top; border-radius:15px;}
.main_container h2 .more:hover a    {color:#fff; background:var(--color1); border-color:var(--color1);}
.main_container h2 .more:hover i    {transform: rotate(180deg); transition: all 0.2s;}

.mainTop                            {position:relative; display:grid; grid-template-columns:1fr 440px; margin:80px 0 60px;}
.mainVisual .bxslider               {visibility:hidden;}
.mainVisual                         {width:920px; height:310px; position:relative; top:0; left:0;}   
.mainVisual img                     {border-radius:30px;}
.mainVisual .arrow                  {position:absolute; width:100%; height:100%;}
.mainVisual .bx-arrow               {position:absolute; top:calc(50% - 35px); z-index:110; cursor:pointer; width:65px; height:65px; display:flex; align-items:center; background:#fff; border-radius:50%; text-align:center; box-shadow:0 0 15px 1px rgba(0,0,0,0.08);} 
.mainVisual .bx-arrow span          {position:absolute; top:0; bottom:0; margin:auto; content:''; display:block; border:solid #333; width:10px; height:10px; border-width:2px 0 0 2px; transform:rotate(-45deg);}
.mainVisual .bx-arrow:before        {content:''; display:block; height:2px; width:18px;  bottom:0; margin:auto; background:#333;}
.mainVisual #bx_prev                {left:-30px;}
.mainVisual #bx_prev span           {left:25px;}
.mainVisual #bx_next                {right:-25px;}
.mainVisual #bx_next span           {right:25px; border-width:0 2px 2px 0;}
.mainVisual .bx-arrow:hover         {background:rgba(0,0,0,0.6);}
.mainVisual .bx-arrow:hover span    {border-color:#fff;}
.mainVisual .bx-arrow:hover:before  {background:#fff;}

.mainLogin                      {position:relative; background:#fff; border-radius:30px; box-shadow:0 0 15px 1px rgba(0,0,0,0.08); overflow:hidden;}
.mainLogin .wrap                {padding:25px 40px;}
.mainLogin .tab                 {display:flex; margin-bottom:20px; border-bottom:1px solid #ddd;}
.mainLogin .tab button          {font-family: 'S-Core Dream'; color:#555;position:relative; flex:1; padding-bottom:10px;}
.mainLogin .tab button:hover, .mainLogin .tab .on   {font-weight:500; color:#013fb1;}
.mainLogin .tab .on:after       {content:''; display:block; width:100%; height:3px; border-radius:10px; background:#013fb1; position:absolute; left:0; bottom:0;}
.mainLogin .label               {display:grid; grid-template-columns:1fr 100px; gap:10px;}
.mainLogin input                {width:100%; font-size:0.95em; line-height:52px; padding:0 15px; border-color:#d2d2d2; border-radius:3px; margin-bottom:5px; font-size:0.95em;}
.mainLogin input:focus          {background:#fff; border-color:#333;}
.mainLogin .label button        {font-family: 'S-Core Dream'; background:#013fb1; color:#fff; border-radius:5px; letter-spacing:-1px;}
.mainLogin .label button:hover  {background:#333;}
.mainLogin .menu				{display:flex; gap:25px; justify-content:center; margin-top:10px;}
.mainLogin .menu a			    {font-family: 'S-Core Dream'; position:relative; color:#999; letter-spacing:-1px; font-size:0.85em;}
.mainLogin .menu a:after        {content:''; position:absolute; top:7px; right:-14px; width:1px; height:0.9em; background:#dfdfdf;}
.mainLogin .menu a:last-child:after	{display:none;}
.mainLogin .menu a.company      {color:#222;}
.mainLogin .menu a:hover        {color:#111; text-decoration:underline;}
.mainLogin .menu i              {margin-right:5px;}
.mainLogin .info                {font-family: 'S-Core Dream'; position:absolute; left:0; bottom:0; width:100%; padding:12px 10px; line-height:1.4; font-size:0.78em; background:#71788c; color:#fff; text-align:center;}
.mainLogin .info strong         {font-weight:500; margin:0 7px 0 3px;}
.mainLogin .info i              {font-size:17px; opacity:0.9;}
.mainLogin .wrapIN>i            {display:block; color:#ccc; font-size:5em; margin:20px 0 10px 0;}
.mainLogin .wrapIN .name        {font-size:0.8em; color:#797979;}
.mainLogin .wrapIN .name span   {background:#427ee2; border-radius:3px; color:#fff; padding:2px 7px;}
.mainLogin .wrapIN .name strong {font-size:23px; font-weight:700; color:#333; margin:0 5px;}
.mainLogin .wrapIN>p            {color:#797979; font-size:0.95em; margin:10px 0 15px 0; line-height:1.4;}
.mainLogin .wrapIN button       {font-family: 'S-Core Dream'; font-size:0.8em;}
.mainLogin .noti                 {text-align:center;}
.mainLogin .noti>p               {font-family: 'S-Core Dream'; margin:25px 0 15px 0; font-size:0.95em;}
.mainLogin .noti button          {font-family: 'S-Core Dream'; background:#013fb1; color:#fff; border-radius:5px; letter-spacing:-1px; width:60%; margin:0 auto; line-height:54px;}
.mainLogin .noti button:hover    {background:#333;}

.mainMid, .mainBtm              {position:relative; display: grid; grid-template-columns:repeat(2, 1fr); gap:40px; margin-bottom:60px;}
.mainMid>section, .mainMid .wrap>div   {    }
.mainMid .wrap                    {display: grid; grid-template-columns:repeat(2, 1fr);  gap:20px;}
.mainMid .wrap>div              {position:relative;background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 0 15px 1px rgba(0,0,0,0.05); height:210px;}
.mainQuick .wrap>div:after      {position:absolute; right:20px; top:18px; width:80px; height:80px; content:''; border-radius:50%; border:6px solid #92b000; background:url('../img/main/acc01.png') no-repeat center center #fff; background-size:60px;  z-index:1; }
.mainQuick .wrap>div:last-child:after   {border-color:#157e82; background-image:url('../img/main/acc02.png'); }
.mainQuick h3                   {font-family: 'S-Core Dream'; font-size:1.05em; line-height:58px; color:#fff; font-weight:500; background:#92b000; text-indent:30px; }
.mainQuick .wrap>div:last-child h3  {background:#157e82;}
.mainQuick ul                   {padding:20px 25px;  z-index:101; }
.mainQuick ul>li                {padding:2px 0 2px 12px;}
.mainQuick ul>li:before         {background:#157e82;}
.mainQuick ul>li>a              {font-family: 'S-Core Dream'; font-size:0.95em; }
.mainQuick ul>li:hover a        {text-decoration:underline;}
.mainQuick .student li:before   {background:#98b700;}
.mainProgram .item              {padding:25px 35px; transition:.4s;}
.mainProgram .item .tit         {font-family: 'S-Core Dream'; font-size:1.1em; letter-spacing:-1px; color:#333; font-weight:500; width:calc(100% - 50px); line-height:1.5; margin-bottom:15px; overflow:hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical; word-wrap:break-word; word-break:keep-all;}
.mainProgram .item .state       {font-family: 'S-Core Dream'; position:absolute; right:20px; top:25px; width:70px; height:30px; font-weight:400; line-height:28px; font-size:15px; letter-spacing:-.5px; background:#fff6ec; color:#f45117; text-align:center; border-radius:50px; border:1px solid #f45117;}
.mainProgram .item.closed .state   {background:#fff; border-color:#ccc; color:#777;}
.mainProgram .item p            {color:#797979; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}
.mainProgram .item p strong     {font-family: 'S-Core Dream'; color:var(--color1); font-size:0.9em; font-weight:500; margin-right:12px;}
.mainProgram .item .more        {width:42px; line-height:40px; background:#ccc; color:#111; display:inline-block; position:absolute; right:0; bottom:0; border-radius:10px 0 0 0; text-align:center;}
.mainProgram .item:hover        {transform:translateY(-8px); }
.mainProgram .item:hover .more      {background:var(--color1); color:#fff;}
.mainProgram .item:hover .more i    {transform: rotate(180deg); transition: all 0.2s;}

.mainCompany                    {position:relative; padding-bottom:100px;}
.mainCompany .item              {position:relative; margin:15px 10px; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 0 15px 1px rgba(0,0,0,0.05); height:200px;}
.mainCompany .item .tit         {font-family: 'S-Core Dream'; text-align:center; font-size:1.05em; background:#cbcfd7; color:#333; font-weight:500; padding:15px 10px; margin-bottom:25px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}
.mainCompany .item p            {color:#797979; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; margin:2px 30px; color:#414141;}
.mainCompany .item p strong     {font-family: 'S-Core Dream'; color:#777; font-size:0.9em; margin-right:15px; font-weight:400;}
.mainCompany .company_slickslider   {margin:-10px;}
.mainCompany .dots              {text-align:center;}
.mainCompany .dots li           {display:inline-block; margin:0 4px; cursor:pointer;}
.mainCompany .dots li span      {display:inline-block; content:''; width:12px; height:12px; border-radius:50%; background:#ccc; opacity:0.3; }
.mainCompany .dots li:hover span, .mainCompany .dots .slick-active span	{opacity:1; background:var(--color1);}
.mainCompany .control           {position:absolute; top:-3px; right:0;}
.mainCompany .control button    {position:relative; display:inline-block; width:42px; height:42px; line-height:36px; text-align:center; border:2px solid #c6c6c6; background:#fff; cursor:pointer; vertical-align:top; border-radius:15px;}
.mainCompany .control .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;}
.mainCompany .control .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;}
.mainCompany .control .pause        {line-height:36px;}
.mainCompany .control .pause:before {content:''; display:inline-block; width:3px; height:13px; background:#555; border-radius:2px;}
.mainCompany .control .pause:after  {content:''; display:inline-block; width:3px; height:13px; background:#555; border-radius:2px; margin-left:3px;}
.mainCompany .control .play         {line-height:37px; text-indent:2px;}
.mainCompany .control .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;}
.mainCompany .control button:hover				{border-color:var(--color1); background:var(--color1);}
.mainCompany .control button:hover:after, .mainCompany .control button:hover:before	{border-color:#fff;}
.mainCompany .control .pause:hover:after, .mainCompany .control .pause:hover:before	{background:#fff;}
.mainCompany .control .play:hover:after		{border-color:transparent transparent transparent #fff;}

.mainBtm h2                     {font-family: 'S-Core Dream'; font-weight:500; color:#2c2c2c; font-size:1.6em; letter-spacing:-1.5px; margin-bottom:25px;}

.mainBtm .notice                {flex:1;}
.mainBtm .video                 {flex:1;}

.mainBtm .video_wrap            {  position: relative; height: 85%; overflow: hidden; padding-bottom: 0; /* 16:9 비율에 맞게 조정 */  border:1px solid #eee;  margin-bottom:30px; border-radius:20px;   box-shadow:0 0 15px 1px rgba(0,0,0,0.05); } 
.mainBtm .video_wrap iframe     { position: absolute;  top: 0;    left: 0;    width: 100%;    height: 100%;  }



@media screen and (max-width:1400px) { 
    .main_container .web_size       {padding:0 40px;}
    .mainTop                        {display:block;}
    .mainTop:after                  {content:''; display:block; clear:both;}
    .mainVisual                     {float:left; width:67%; height:100%;}
    .mainLogin                      {float:right; width:30%;}
    .mainLogin .wrap                {padding:20px 25px;}
    .mainLogin .label               {display:block;}
    .mainLogin input                {line-height:46px;}
    .mainLogin .label button        {width:100%; line-height:46px;}
    .mainLogin .info                {position:relative; padding:10px;}
    .mainLogin .wrapIN              {padding:20px;}
    .mainLogin .wrapIN i            {margin:0 0 10px 0;}
    .mainQuick .wrap>div:after      {right:20px; top:15px;}
    .mainLogin .noti>p              {margin:20px 0;}
    .mainLogin .noti>p br           {display:none;}
    .mainLogin .noti button          {line-height:46px;}
}
@media screen and (max-width:1280px) { 
    .mainVisual                     {float:none; width:100%;}
    .mainVisual img                 {width:100%;}
    .mainLogin                      {float:none; width:100%; margin-top:20px;}
    .mainLogin .label, .mainMid .wrap   {display:grid;}
    .mainMid                        {gap:30px;}
    .mainBtm                        {gap:30px;}
    .mainQuick .wrap>div:after      {  right:15px; top:15px; width:70px; height:70px; border-width:5px; }
}
@media screen and (max-width:1024px) { 
	.main_container					{padding:60px 0 0 0;} 
    .main_container .web_size       {padding:0 20px;}
    .mainTop                        {margin:40px 0;}
    .mainVisual .bx-arrow           {top:calc(50% - 25px);}
    .mainVisual #bx_prev            {left:-15px;}
    .mainVisual #bx_next            {right:-15px;}
    .mainVisual #bx_prev span       {left:12px;}
    .mainVisual #bx_next span       {right:12px;}
    .mainVisual .bx-arrow:before    {width:15px;}
    .mainVisual .bx-arrow           {width:42px; height:42px;}
    .mainLogin .wrap                {padding:15px 20px;}
    .mainLogin .tab                 {margin-bottom:15px;}
    .mainLogin input                {line-height:36px;}
    .mainLogin input:last-child     {margin:0;}
    .mainLogin .label               {grid-template-columns:1fr 85px; gap:5px;}
    .mainLogin .wrapIN .name strong {font-size:20px;}
    .mainLogin .wrapIN>p            {margin:7px 0 12px 0;}
    .mainLogin .wrapIN>i            {font-size:4em;}
    .mainLogin .wrapIN button       {line-height:32px;}

    .main_container h2              {font-size:1.4em; margin-bottom:17px;}
    .main_container h2 .more a      {width:34px; height:34px; line-height:30px; font-size:15px; border-radius:8px;}
    .mainMid                        { grid-template-columns:repeat(1, 1fr);  margin-bottom:50px;}
 
    .mainMid .mainProgram .wrap     { }
    .mainMid .wrap>div              {height:auto;}
    .mainQuick h3                   {line-height:46px; text-indent:25px;}
    .mainQuick ul                   {padding:15px 12px;}
    .mainQuick ul>li                {padding:1px 0 1px 12px;}
    .mainQuick ul>li:before         {top:12px;}
    .mainQuick .wrap>div:after      {top:8px; right:10px; width:48px; height:48px; border-width:3px; background-size:45px;}
    .mainProgram .item              {padding:20px;}
    .mainProgram .item .state       {display:inline-block; position:relative; width:65px; left:0; top:0; right:auto; height:26px; line-height:24px; margin-right:5px; font-size:13px;}
    .mainProgram .item .tit         {margin-bottom:7px; font-size:1.05em; width:100%;}
    .mainProgram .item .more        {width:36px; line-height:36px;}
    .mainProgram .item:hover        {transform:none;}
    .mainBtm                           { grid-template-columns:repeat(1, 1fr); margin-bottom:50px;}
    .mainBtm .video                 {display:none;}
    .mainCompany                    {padding-bottom:40px;}
    .mainCompany .company_slickslider   {margin:-5px;}
    .mainCompany .item              {margin:10px 5px; height:auto; padding-bottom:20px;}
    .mainCompany .item .tit         {padding:12px 10px; margin-bottom:15px;}
    .mainCompany .item p            {margin:2px 20px;}
	.mainCompany .control			{top:0;}
	.mainCompany .control button    {width:34px; height:34px; line-height:28px; border-radius:8px;}
	.mainCompany .control .prev:after   {padding:3px;}
	.mainCompany .control .next:after   {padding:3px; margin:0 2px 0 0;}
	.mainCompany .control .pause        {line-height:30px;}
	.mainCompany .control .pause:after  {margin-left:2px; height:11px;}
	.mainCompany .control .pause:before {height:11px;}
	.mainCompany .control .play         {line-height:30px;}
	.mainCompany .control .play:after   {border-width:6px 0 6px 8px;}
    .mainCompany .dots li           {margin:0 3px;}
    .mainCompany .dots li span      {width:10px; height:10px;}
}

@media screen and (max-width:580px) { 
.mainMid .wrap                    {  grid-template-columns:repeat(1, 1fr); gap:10px; }
}


/* ****************** 메인 로그인 영역 제어 ********************** */
.main_login_com     {}
.main_login_stu     {display:none;}


/* ****************** 메인 로그인 영역 제어 ********************** */