@charset "utf-8";

/*------------ pc ------------*/
@media only screen and (min-width: 960px) {
.web		{display:block !important;}
.mobile		{display:none}
.tablet		{display:none}

	#main					{padding-top:91px;}

	#main_content			{width:100%; position:relative; z-index:2;}
	#main_content:after		{position:absolute; content:''; bottom:-50px; right:0px; width:430px; height:279px; z-index:-1; background: url('/_img/web_en/pc/main/main_f_bg.png') no-repeat 50% 50%;}

/* section1 */	
	.section1						{background: linear-gradient(to right, #d4e6fa, #deeff9); overflow:hidden;}
	
	.section1 .top_wrap				{position:relative; width:100%;  padding:50px; max-width:1400px; margin:0 auto; overflow:hidden;}
	.section1 .top_wrap::before		{position:absolute; bottom:-51px; left:123px; content: ''; width:178px; height:193px; display:block; background:url('/_img/web_en/pc/main/character01.png') no-repeat 50% 50%; animation: slide-in 1000ms;}
	.section1 .top_wrap::after		{position:absolute; bottom:0px; right:120px; content: ''; width:113px; height:103px; display:block; background:url('/_img/web_en/pc/main/character02.png') no-repeat 50% 50%; z-index:1;}

	.top_wrap .txt_box				{position:relative; width:600px; text-align:center; margin:0 auto; z-index:1;}
	.top_wrap .txt_box::after		{position:absolute; top:-42px; right:-378px; content: ''; width:781px; height:261px; display:block; background:url('/_img/web_en/pc/main/character03.png') no-repeat 50% 50%; z-index:-1; animation: fade-in 3500ms;}
	.top_wrap .txt_box	p.m_tit		{font:500 34px/45px "Poppins", sans-serif; color:#06214b; padding-bottom:20px;}
	.top_wrap .txt_box	p.m_stxt	{font:300 17px/21px "Poppins", sans-serif; color:#667794;}

/* section2 */	
	/* 퀵메뉴 */	
	.section2				{width:100%; border-bottom:1px solid #ddd; padding:25px 50px 15px;}
	.section2 ul.quick		{max-width:1400px; margin:0 auto; padding: 0 50px; display: flex; justify-content: space-around; min-height:139px;}
	.section2 ul.quick li					{width:12.5%; text-align:center; word-break:keep-all;}
	.section2 ul.quick li a					{display:inline-block; font:500 16px/19px "Poppins", sans-serif; color:#333;  padding:60px 10px 0; transition:all .2s; }
	.section2 ul.quick li a:hover,
	.section2 ul.quick li a:focus			{color:#079ee2}

	.section2 ul.quick li:first-child a		{background:url('/_img/web_en/pc/main/top_icon01.png') no-repeat center top;}
	.section2 ul.quick li:nth-child(2) a	{background:url('/_img/web_en/pc/main/top_icon02.png') no-repeat center top;}
	.section2 ul.quick li:nth-child(3) a	{background:url('/_img/web_en/pc/main/top_icon03.png') no-repeat center top;}
	.section2 ul.quick li:nth-child(4) a	{background:url('/_img/web_en/pc/main/top_icon04.png') no-repeat center top;}
	.section2 ul.quick li:nth-child(5) a	{background:url('/_img/web_en/pc/main/top_icon05.png') no-repeat center top;}
	.section2 ul.quick li:nth-child(6) a	{background:url('/_img/web_en/pc/main/top_icon06.png') no-repeat center top;}
	.section2 ul.quick li:nth-child(7) a	{background:url('/_img/web_en/pc/main/top_icon07.png') no-repeat center top;}
	.section2 ul.quick li:nth-child(8) a	{background:url('/_img/web_en/pc/main/top_icon08.png') no-repeat center top;}

	.section2 ul.quick li:first-child a:hover,
	.section2 ul.quick li:first-child a:focus	{background:url('/_img/web_en/pc/main/top_icon01_on.png') no-repeat center top; margin-top:-10px}
	.section2 ul.quick li:nth-child(2) a:hover,
	.section2 ul.quick li:nth-child(2) a:focus	{background:url('/_img/web_en/pc/main/top_icon02_on.png') no-repeat center top; margin-top:-10px}
	.section2 ul.quick li:nth-child(3) a:hover,
	.section2 ul.quick li:nth-child(3) a:focus	{background:url('/_img/web_en/pc/main/top_icon03_on.png') no-repeat center top; margin-top:-10px}
	.section2 ul.quick li:nth-child(4) a:hover,
	.section2 ul.quick li:nth-child(4) a:focus	{background:url('/_img/web_en/pc/main/top_icon04_on.png') no-repeat center top; margin-top:-10px}
	.section2 ul.quick li:nth-child(5) a:hover,
	.section2 ul.quick li:nth-child(5) a:focus	{background:url('/_img/web_en/pc/main/top_icon05_on.png') no-repeat center top; margin-top:-10px}
	.section2 ul.quick li:nth-child(6) a:hover,
	.section2 ul.quick li:nth-child(6) a:focus	{background:url('/_img/web_en/pc/main/top_icon06_on.png') no-repeat center top; margin-top:-10px}
	.section2 ul.quick li:nth-child(7) a:hover,
	.section2 ul.quick li:nth-child(7) a:focus	{background:url('/_img/web_en/pc/main/top_icon07_on.png') no-repeat center top; margin-top:-10px}
	.section2 ul.quick li:nth-child(8) a:hover,
	.section2 ul.quick li:nth-child(8) a:focus	{background:url('/_img/web_en/pc/main/top_icon08_on.png') no-repeat center top; margin-top:-10px}


/* section3 */
	.section3					{position:relative; display:flex; padding:60px 50px 70px; margin:0 auto; max-width:1400px;}
	.section3 p.tit				{font:600 25px/25px "Poppins", sans-serif; color:#000;overflow: hidden;}
	.section3 p.tit.s			{margin:10px 0 0 10px;}

	/* sns */
	.section3 .left									{width:60%;}
	.section3 .left	.main_sns						{display: flex; align-items: center;justify-content: space-between; margin: 0 10px 15px;}
	.section3 .left	.main_sns p.sns_btn				{}
	.section3 .left	.main_sns p.sns_btn a			{display:inline-block; border:1px solid #ccc; width:43px; height:43px; margin-right:5px; border-radius:50px; font-size:0px; vertical-align:middle;}
	.section3 .left	.main_sns p.sns_btn a.face		{background:url('/_img/web_en/pc/main/m_face.png')no-repeat 50% 50%;}
	.section3 .left	.main_sns p.sns_btn a.yout		{background:url('/_img/web_en/pc/main/m_yout.png')no-repeat 50% 50%;}
	.section3 .left	.main_sns p.sns_btn a.blog		{background:url('/_img/web_en/pc/main/m_blog.png')no-repeat 55% 50%;}
	.section3 .left	.main_sns p.sns_btn a.inst		{background:url('/_img/web_en/pc/main/m_inst.png')no-repeat 55% 50%;}
	.section3 .left	.main_sns p.sns_btn a.face:hover,
	.section3 .left	.main_sns p.sns_btn a.face:focus	{background:url('/_img/web_en/pc/main/m_face_on.png')no-repeat 50% 50%; border:1px solid #4867aa;}
	.section3 .left	.main_sns p.sns_btn a.yout:hover,
	.section3 .left	.main_sns p.sns_btn a.yout:focus	{background:url('/_img/web_en/pc/main/m_yout_on.png')no-repeat 50% 50%; border:1px solid #ff0000}
	.section3 .left	.main_sns p.sns_btn a.blog:hover,
	.section3 .left	.main_sns p.sns_btn a.blog:focus	{background:url('/_img/web_en/pc/main/m_blog_on.png')no-repeat 55% 50%; border:1px solid #00c73c}
	.section3 .left	.main_sns p.sns_btn a.inst:hover,
	.section3 .left	.main_sns p.sns_btn a.inst:focus	{background:url('/_img/web_en/pc/main/m_inst_on.png')no-repeat 55% 50%; border:1px solid #e62b85}

	.section3 .left ul.sns							{display:flex;}
	.section3 .left ul.sns li						{width:33%; margin-right:2%;}
	.section3 .left ul.sns li:last-child			{margin:0;}
	.section3 .left ul.sns li a						{display:block; overflow:hidden; border-radius:5px; position:relative; transition:all .2s;}
	.section3 .left ul.sns li a:hover:after,
	.section3 .left ul.sns li a:focus:after			{content:""; position:absolute; top:-1px; left:-1px; z-index:2; width:calc(100% - 6px); height:calc(100% - 6px);}
	.section3 .left ul.sns li a:hover p.txt,	
	.section3 .left ul.sns li a:focus p.txt		{text-decoration:underline;}

	.section3 .left ul.sns li.face a:hover:after,
	.section3 .left ul.sns li.face a:focus:after	{border:4px solid #003365;}
	.section3 .left ul.sns li.yout a:hover:after,
	.section3 .left ul.sns li.yout a:focus:after	{border:4px solid #ff0000;}
	.section3 .left ul.sns li.blog a:hover:after,
	.section3 .left ul.sns li.blog a:focus:after	{border:4px solid #00c73c;}
	.section3 .left ul.sns li.inst a:hover:after,
	.section3 .left ul.sns li.inst a:focus:after	{border:4px solid #e62b85;}

	.section3 .left ul.sns li a .img 				{position:relative;  background:#f2f2f2;}
	.section3 .left ul.sns li a .img span			{display:inline-block; position:absolute; width:32px; height:32px; right:12px; top:12px; border-radius:50%; font-size:0;}
	.section3 .left ul.sns li a .img span.face		{background:url('/_img/web_en/pc/comn/face.png') no-repeat 50% 50%/100%;}
	.section3 .left ul.sns li a .img span.yout		{background:url('/_img/web_en/pc/comn/yout.png') no-repeat 50% 50%/100%;}
	.section3 .left ul.sns li a .img span.blog		{background:url('/_img/web_en/pc/comn/blog.png') no-repeat 50% 50%/100%;}
	.section3 .left ul.sns li a .img span.inst		{background:url('/_img/web_en/pc/comn/inst.png') no-repeat 50% 50%/100%;}
	
	.section3 .left ul.sns li a .txt				{margin:10px 10px 20px 10px; font:400 16px/21px "Poppins", sans-serif; color:#666; height:45px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}

	/* 시스템교육안내 */
 	.section3 .right					{width:40%; padding-left:35px;}
	.section3 .right ul.sys				{width:100%; margin-top:25px;}
	.section3 .right ul.sys li			{float:left; border-bottom: 1px solid #ddd; width: calc(50% - 26px); padding:20px 10px 9px; min-height:96px;}
	.section3 .right ul.sys li:not(:nth-child(2n))	{margin-right:50px;}
	.section3 .right ul.sys li:nth-child(2)			{display:flex; align-items:center;}	
	.section3 .right ul.sys li a					{display:block; position:relative;font:500 19px/23px "Poppins", sans-serif; color:#333; transition:all .2s; padding: 10px 0px; width: 100%;}
	.section3 .right ul.sys li:first-child a	{background:url('/_img/web_en/pc/main/sys_icon01.png') no-repeat center right 0px;}
	.section3 .right ul.sys li:nth-child(2) a	{background:url('/_img/web_en/pc/main/sys_icon02.png') no-repeat center right 0px; padding:15px 0;}
	.section3 .right ul.sys li:nth-child(3) a	{background:url('/_img/web_en/pc/main/sys_icon03.png') no-repeat center right 0px;}

	.section3 .right ul.sys li a:hover,
	.section3 .right ul.sys li a:focus				{color:#079ddc;}
	.section3 .right ul.sys li:first-child a:hover,
	.section3 .right ul.sys li:first-child a:focus	{background:url('/_img/web_en/pc/main/sys_icon01.png') no-repeat center right 20px;}
	.section3 .right ul.sys li:nth-child(2) a:hover,
	.section3 .right ul.sys li:nth-child(2) a:focus	{background:url('/_img/web_en/pc/main/sys_icon02.png') no-repeat center right 15px;}
	.section3 .right ul.sys li:nth-child(3) a:hover,
	.section3 .right ul.sys li:nth-child(3) a:focus	{background:url('/_img/web_en/pc/main/sys_icon03.png') no-repeat center right 20px;}



/* 비주얼 움직임 */

  @keyframes slide-in {
    from {transform: translatey(32%);}
    to {transform: translateX(0%);}
  }

  @keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
  }


}




@media only screen and (min-width: 959px) and (max-width: 1450px) {

	#main_content:after		{display:none;}	

}


@media only screen and (min-width: 959px) and (max-width: 1300px) {

/* section3 */
	.section3							{display:flex; padding:30px 50px 70px; margin:0 auto; max-width:1400px; flex-direction: column;}
	/* sns */
	.section3 .left									{width:100%;}

	/* 시스템교육안내 */
 	.section3 .right					{width:100%; padding-left:0px; padding-top:20px;}
	.section3 .right ul.sys				{width:100%; margin-top:5px;}
	.section3 .right ul.sys li			{float:left; border-bottom: 1px solid #ddd; width: calc(33.3% - 28px); padding:20px 10px 9px;}
	.section3 .right ul.sys li:not(:nth-child(2n))	{margin-right:0px;}
	.section3 .right ul.sys li:not(:nth-child(3n))	{margin-right:42px;}
	.section3 .right ul.sys li:nth-child(2) a:hover,
	.section3 .right ul.sys li:nth-child(2) a:focus	{background:url('/_img/web_en/pc/main/sys_icon02.png') no-repeat center right 20px;}

}


@media only screen and (min-width: 959px) and (max-width: 1190px) {

	.section1 .top_wrap::before		{bottom:-56px; left:50px; background:url('/_img/web_en/pc/main/character01.png') no-repeat 50% 50%/160px;  transition:all .2s;}

	.section2						{padding:25px 0;}
	.section2 ul.quick				{padding: 0;}	
	.section2 ul.quick li a			{font-size:15px;}
}

/*------------ ta ------------*/
@media only screen and (min-width: 640px) and (max-width: 959px) {
.tablet		{display:block !important;}
.mobile		{display:none}
.web		{display:none}

	#main					{padding-top:91px;}
	#main_content	{width:100%; position:relative; z-index:2;}
	
/* section1 */	
	.section1						{background: linear-gradient(to right, #d4e6fa, #deeff9); overflow:hidden;}
	
	.section1 .top_wrap				{position:relative; width:100%;  padding:40px 30px; max-width:1400px; margin:0 auto; overflow:hidden;}
	.section1 .top_wrap::before		{position:absolute; bottom:-61px; left:0px; content: ''; width:178px; height:193px; display:block; background:url('/_img/web_en/mo/main/character01.png') no-repeat 50% 50%/140px; animation: slide-in 1000ms; transition: all .2s;}
	.section1 .top_wrap::after		{position:absolute; bottom:-8px; right:28px; content: ''; width:113px; height:103px; display:block; background:url('/_img/web_en/mo/main/character02.png') no-repeat 50% 50%/95px; z-index:1;}

	.top_wrap .txt_box				{position:relative; width:530px; text-align:center; margin:0 auto; z-index:1;}
	.top_wrap .txt_box::after		{position:absolute; top:-68px; right:-287px; content: ''; width:781px; height:261px; display:block; background:url('/_img/web_en/pc/main/character03.png') no-repeat 50% 50%/550px; z-index:-1; animation: fade-in 3500ms;}
	.top_wrap .txt_box	p.m_tit		{font:500 34px/45px "Poppins", sans-serif; color:#06214b; padding-bottom:20px;}
	.top_wrap .txt_box	p.m_stxt	{font:300 17px/21px "Poppins", sans-serif; color:#667794;}

/* section2 */	
	.section2				{width:100%; border-bottom:1px solid #ddd; padding:25px 30px;}
	.section2 ul.quick		{display: flex; flex-wrap: wrap;}
	.section2 ul.quick li					{width:25%; text-align:center; word-break:keep-all; min-height: 120px;}
	.section2 ul.quick li a					{display:inline-block; font:500 16px/19px "Poppins", sans-serif; color:#333;  padding:60px 10px 0; transition:all .2s;}
	.section2 ul.quick li a:hover,
	.section2 ul.quick li a:focus			{color:#079ee2}

	.section2 ul.quick li:nth-child(n+5)	{margin-top:20px;}

	.section2 ul.quick li:first-child a		{background:url('/_img/web_en/mo/main/top_icon01.png') no-repeat center top / 54px;}
	.section2 ul.quick li:nth-child(2) a	{background:url('/_img/web_en/mo/main/top_icon02.png') no-repeat center top / 54px;}
	.section2 ul.quick li:nth-child(3) a	{background:url('/_img/web_en/mo/main/top_icon03.png') no-repeat center top / 54px;}
	.section2 ul.quick li:nth-child(4) a	{background:url('/_img/web_en/mo/main/top_icon04.png') no-repeat center top / 54px;}
	.section2 ul.quick li:nth-child(5) a	{background:url('/_img/web_en/mo/main/top_icon05.png') no-repeat center top / 54px;}
	.section2 ul.quick li:nth-child(6) a	{background:url('/_img/web_en/mo/main/top_icon06.png') no-repeat center top / 54px;}
	.section2 ul.quick li:nth-child(7) a	{background:url('/_img/web_en/mo/main/top_icon07.png') no-repeat center top / 54px;}
	.section2 ul.quick li:nth-child(8) a	{background:url('/_img/web_en/mo/main/top_icon08.png') no-repeat center top / 54px;}

	.section2 ul.quick li:first-child a:hover,
	.section2 ul.quick li:first-child a:focus	{background:url('/_img/web_en/mo/main/top_icon01_on.png') no-repeat center top / 54px; margin-top:-10px}
	.section2 ul.quick li:nth-child(2) a:hover,
	.section2 ul.quick li:nth-child(2) a:focus	{background:url('/_img/web_en/mo/main/top_icon02_on.png') no-repeat center top / 54px; margin-top:-10px}
	.section2 ul.quick li:nth-child(3) a:hover,
	.section2 ul.quick li:nth-child(3) a:focus	{background:url('/_img/web_en/mo/main/top_icon03_on.png') no-repeat center top / 54px; margin-top:-10px}
	.section2 ul.quick li:nth-child(4) a:hover,
	.section2 ul.quick li:nth-child(4) a:focus	{background:url('/_img/web_en/mo/main/top_icon04_on.png') no-repeat center top / 54px; margin-top:-10px}
	.section2 ul.quick li:nth-child(5) a:hover,
	.section2 ul.quick li:nth-child(5) a:focus	{background:url('/_img/web_en/mo/main/top_icon05_on.png') no-repeat center top / 54px; margin-top:-10px}
	.section2 ul.quick li:nth-child(6) a:hover,
	.section2 ul.quick li:nth-child(6) a:focus	{background:url('/_img/web_en/mo/main/top_icon06_on.png') no-repeat center top / 54px; margin-top:-10px}
	.section2 ul.quick li:nth-child(7) a:hover,
	.section2 ul.quick li:nth-child(7) a:focus	{background:url('/_img/web_en/mo/main/top_icon07_on.png') no-repeat center top / 54px; margin-top:-10px}
	.section2 ul.quick li:nth-child(8) a:hover,
	.section2 ul.quick li:nth-child(8) a:focus	{background:url('/_img/web_en/mo/main/top_icon08_on.png') no-repeat center top / 54px; margin-top:-10px}

/* section3 */
	.section3					{display:flex; flex-direction: column; padding:30px 30px 70px;}
	.section3 p.tit				{font:600 25px/25px "Poppins", sans-serif; color:#000;overflow: hidden;}
	.section3 p.tit.s			{margin:10px 0 0 10px;}

	/* sns */
	.section3 .left									{width:100%;}
	.section3 .left	.main_sns						{display: flex; align-items: center;justify-content: space-between; margin: 0 10px 15px;}
	.section3 .left	.main_sns p.sns_btn				{}
	.section3 .left	.main_sns p.sns_btn a			{display:inline-block; border:1px solid #ccc; width:43px; height:43px; margin-right:5px; border-radius:50px; font-size:0px; vertical-align:middle;}
	.section3 .left	.main_sns p.sns_btn a.face		{background:url('/_img/web_en/mo/main/m_face.png')no-repeat 50% 50% / 11px;}
	.section3 .left	.main_sns p.sns_btn a.yout		{background:url('/_img/web_en/mo/main/m_yout.png')no-repeat 50% 50% / 24px;}
	.section3 .left	.main_sns p.sns_btn a.blog		{background:url('/_img/web_en/mo/main/m_blog.png')no-repeat 55% 50% / 16px;}
	.section3 .left	.main_sns p.sns_btn a.inst		{background:url('/_img/web_en/mo/main/m_inst.png')no-repeat 55% 50% / 22px;}
	.section3 .left	.main_sns p.sns_btn a.face:hover,
	.section3 .left	.main_sns p.sns_btn a.face:focus	{background:url('/_img/web_en/mo/main/m_face_on.png')no-repeat 50% 50% / 11px; border:1px solid #4867aa;}
	.section3 .left	.main_sns p.sns_btn a.yout:hover,
	.section3 .left	.main_sns p.sns_btn a.yout:focus	{background:url('/_img/web_en/mo/main/m_yout_on.png')no-repeat 50% 50% / 24px; border:1px solid #ff0000}
	.section3 .left	.main_sns p.sns_btn a.blog:hover,
	.section3 .left	.main_sns p.sns_btn a.blog:focus	{background:url('/_img/web_en/mo/main/m_blog_on.png')no-repeat 55% 50% / 16px; border:1px solid #00c73c}
	.section3 .left	.main_sns p.sns_btn a.inst:hover,
	.section3 .left	.main_sns p.sns_btn a.inst:focus	{background:url('/_img/web_en/mo/main/m_inst_on.png')no-repeat 55% 50% / 22px; border:1px solid #e62b85}

	.section3 .left ul.sns							{display:flex;}
	.section3 .left ul.sns li						{width:33%; margin-right:2%;}
	.section3 .left ul.sns li:last-child			{margin:0;}
	.section3 .left ul.sns li a						{display:block; overflow:hidden; border-radius:5px; position:relative; transition:all .2s;}
	.section3 .left ul.sns li a:hover:after,
	.section3 .left ul.sns li a:focus:after			{content:""; position:absolute; top:-1px; left:-1px; z-index:2; width:calc(100% - 6px); height:calc(100% - 6px);}
	.section3 .left ul.sns li a:hover p.txt,	
	.section3 .left ul.sns li a:focus p.txt		{text-decoration:underline;}

	.section3 .left ul.sns li.face a:hover:after,
	.section3 .left ul.sns li.face a:focus:after	{border:4px solid #003365;}
	.section3 .left ul.sns li.yout a:hover:after,
	.section3 .left ul.sns li.yout a:focus:after	{border:4px solid #ff0000;}
	.section3 .left ul.sns li.blog a:hover:after,
	.section3 .left ul.sns li.blog a:focus:after	{border:4px solid #00c73c;}
	.section3 .left ul.sns li.inst a:hover:after,
	.section3 .left ul.sns li.inst a:focus:after	{border:4px solid #e62b85;}
	

	.section3 .left ul.sns li a .img 				{position:relative; background: #f2f2f2;}
	.section3 .left ul.sns li a .img span			{display:inline-block; position:absolute; width:32px; height:32px; right:12px; top:12px; border-radius:50%; font-size:0;}
	.section3 .left ul.sns li a .img span.face		{background:url('/_img/web_en/mo/comn/face.png') no-repeat 50% 50%/100%;}
	.section3 .left ul.sns li a .img span.yout		{background:url('/_img/web_en/mo/comn/yout.png') no-repeat 50% 50%/100%;}
	.section3 .left ul.sns li a .img span.inst		{background:url('/_img/web_en/mo/comn/inst.png') no-repeat 50% 50%/100%;}
	.section3 .left ul.sns li a .img span.inst		{background:url('/_img/web_en/mo/comn/inst.png') no-repeat 50% 50%/100%;}
	
	.section3 .left ul.sns li a .txt				{margin:10px 10px 20px 10px; font:400 16px/21px "Poppins", "Noto Sans KR", sans-serif; color:#666; height:45px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}

	/* 시스템교육안내 */
 	.section3 .right					{width:100%; padding-top:40px;}
	.section3 .right ul.sys				{width:100%; margin-top:5px;}
	.section3 .right ul.sys li			{float:left; border-bottom: 1px solid #ddd; width: calc(33.3% - 28px); padding:20px 10px 9px; min-height:96px;}
	.section3 .right ul.sys li:not(:nth-child(3n))	{margin-right:42px;}
	.section3 .right ul.sys li:nth-child(2)			{display:flex; align-items:center;}
	.section3 .right ul.sys li a					{display:block; position:relative;font:500 19px/25px "Poppins","Noto Sans KR", sans-serif; color:#333; transition:all .2s; padding: 10px 0px; width:100%;}
	.section3 .right ul.sys li:first-child a	{background:url('/_img/web_en/mo/main/sys_icon01.png') no-repeat center right 0px / 62px;}
	.section3 .right ul.sys li:nth-child(2) a	{background:url('/_img/web_en/mo/main/sys_icon02.png') no-repeat center right 0px / 68px; padding:15px 0;}
	.section3 .right ul.sys li:nth-child(3) a	{background:url('/_img/web_en/mo/main/sys_icon03.png') no-repeat center right 0px / 47px;}

	.section3 .right ul.sys li a:hover,
	.section3 .right ul.sys li a:focus				{color:#079ddc;}
	.section3 .right ul.sys li:first-child a:hover,
	.section3 .right ul.sys li:first-child a:focus	{background:url('/_img/web_en/mo/main/sys_icon01.png') no-repeat center right 20px / 62px;}
	.section3 .right ul.sys li:nth-child(2) a:hover,
	.section3 .right ul.sys li:nth-child(2) a:focus	{background:url('/_img/web_en/mo/main/sys_icon02.png') no-repeat center right 20px / 68px;}
	.section3 .right ul.sys li:nth-child(3) a:hover,
	.section3 .right ul.sys li:nth-child(3) a:focus	{background:url('/_img/web_en/mo/main/sys_icon03.png') no-repeat center right 20px / 47px;}



/* 비주얼 움직임 */

  @keyframes slide-in {
    from {transform: translatey(32%);}
    to {transform: translateX(0%);}
  }

  @keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
  }

}



@media only screen and (min-width: 640px) and (max-width: 710px) {

	.section2 ul.quick li:nth-child(n+5)	{min-height: 140px;}

}



/*------------ mo ------------*/
@media only screen and (max-width: 639px) {	

.mobile		{display:block !important;}
.tablet		{display:none}
.web		{display:none}


	#main			{padding-top:51px;}
	#main_content	{width:100%; position:relative; z-index:2;}

/* section1 */	
	.section1						{background: linear-gradient(to right, #d4e6fa, #deeff9); overflow:hidden;}
	
	.section1 .top_wrap				{position:relative; width:100%;  padding:20px 20px 20px 110px; overflow:hidden;}
	.section1 .top_wrap::before		{position:absolute; bottom:-72px; left:-24px; content: ''; width:178px; height:193px; display:block; background:url('/_img/web_en/mo/main/character01.png') no-repeat 50% 50%/100px; animation: slide-in 1000ms; transition: all .2s;}

	.top_wrap .txt_box				{position:relative; width:100%; margin:0 auto; z-index:1;}
	.top_wrap .txt_box::after		{position:absolute; top:-68px; right:-147px; content: ''; width:781px; height:261px; display:block; background:url('/_img/web_en/pc/main/character03.png') no-repeat 50% 50%/550px; z-index:-1; animation: fade-in 3500ms;}
	.top_wrap .txt_box	p.m_tit		{font:500 21px/28px "Poppins", sans-serif; color:#06214b; text-align:right;}
	.top_wrap .txt_box	p.m_tit	span	{display:block;}
	.top_wrap .txt_box	p.m_stxt	{display:none;}



/* section2 */	
	.section2				{width:100%; padding:25px 15px; border-bottom: 1px solid #ddd;}
	.section2 ul.quick		{display: flex; flex-wrap: wrap;}
	.section2 ul.quick li					{width:33.3%; text-align:center; word-break:keep-all;}
	.section2 ul.quick li a					{display:inline-block; font:500 14px/20px "Poppins", "Noto Sans KR", sans-serif; color:#666;  padding:52px 10px 0; transition:all .2s;}
	.section2 ul.quick li a:hover,
	.section2 ul.quick li a:focus			{color:#079ee2}

	.section2 ul.quick li:nth-child(n+4)	{margin-top:20px;}

	.section2 ul.quick li:first-child a		{background:url('/_img/web_en/mo/main/top_icon01.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(2) a	{background:url('/_img/web_en/mo/main/top_icon02.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(3) a	{background:url('/_img/web_en/mo/main/top_icon03.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(4) a	{background:url('/_img/web_en/mo/main/top_icon04.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(5) a	{background:url('/_img/web_en/mo/main/top_icon05.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(6) a	{background:url('/_img/web_en/mo/main/top_icon06.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(7) a	{background:url('/_img/web_en/mo/main/top_icon07.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(8) a	{background:url('/_img/web_en/mo/main/top_icon08.png') no-repeat center top / 50px;}

	.section2 ul.quick li:first-child a:hover,
	.section2 ul.quick li:first-child a:focus	{background:url('/_img/web_en/mo/main/top_icon01_on.png') no-repeat center top / 50px;
	
	}
	.section2 ul.quick li:nth-child(2) a:hover,
	.section2 ul.quick li:nth-child(2) a:focus	{background:url('/_img/web_en/mo/main/top_icon02_on.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(3) a:hover,
	.section2 ul.quick li:nth-child(3) a:focus	{background:url('/_img/web_en/mo/main/top_icon03_on.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(4) a:hover,
	.section2 ul.quick li:nth-child(4) a:focus	{background:url('/_img/web_en/mo/main/top_icon04_on.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(5) a:hover,
	.section2 ul.quick li:nth-child(5) a:focus	{background:url('/_img/web_en/mo/main/top_icon05_on.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(6) a:hover,
	.section2 ul.quick li:nth-child(6) a:focus	{background:url('/_img/web_en/mo/main/top_icon06_on.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(7) a:hover,
	.section2 ul.quick li:nth-child(7) a:focus	{background:url('/_img/web_en/mo/main/top_icon07_on.png') no-repeat center top / 50px;}
	.section2 ul.quick li:nth-child(8) a:hover,
	.section2 ul.quick li:nth-child(8) a:focus	{background:url('/_img/web_en/mo/main/top_icon08_on.png') no-repeat center top / 50px;}



/* section3 */
	.section3					{display:flex; padding:15px 15px 35px; flex-direction: column;}
	.section3 p.tit				{font:600 20px/25px "Poppins", sans-serif; color:#000;overflow: hidden;}
	.section3 p.tit.s			{margin:10px 0 0 10px;}

	/* sns */
	.section3 .left									{width:100%; order:1}
	.section3 .left	.main_sns						{display: flex; align-items: center;justify-content: space-between; margin: 0 10px 10px;}
	.section3 .left	.main_sns p.sns_btn				{}
	.section3 .left	.main_sns p.sns_btn a			{display:inline-block; border:1px solid #ccc; width:37px; height:37px; margin-right:5px; border-radius:50px; font-size:0px; vertical-align:middle;}
	.section3 .left	.main_sns p.sns_btn a.face		{background:url('/_img/web_en/mo/main/m_face.png')no-repeat 50% 50% / 11px;}
	.section3 .left	.main_sns p.sns_btn a.yout		{background:url('/_img/web_en/mo/main/m_yout.png')no-repeat 50% 50% / 24px;}
	.section3 .left	.main_sns p.sns_btn a.blog		{background:url('/_img/web_en/mo/main/m_blog.png')no-repeat 55% 50% / 16px;}
	.section3 .left	.main_sns p.sns_btn a.inst		{background:url('/_img/web_en/mo/main/m_inst.png')no-repeat 55% 50% / 22px;}
	.section3 .left	.main_sns p.sns_btn a.face:hover,
	.section3 .left	.main_sns p.sns_btn a.face:focus	{background:url('/_img/web_en/mo/main/m_face_on.png')no-repeat 50% 50% / 11px; border:1px solid #4867aa;}
	.section3 .left	.main_sns p.sns_btn a.yout:hover,
	.section3 .left	.main_sns p.sns_btn a.yout:focus	{background:url('/_img/web_en/mo/main/m_yout_on.png')no-repeat 50% 50% / 24px; border:1px solid #ff0000}
	.section3 .left	.main_sns p.sns_btn a.blog:hover,
	.section3 .left	.main_sns p.sns_btn a.blog:focus	{background:url('/_img/web_en/mo/main/m_blog_on.png')no-repeat 55% 50% / 16px; border:1px solid #00c73c}
	.section3 .left	.main_sns p.sns_btn a.inst:hover,
	.section3 .left	.main_sns p.sns_btn a.inst:focus	{background:url('/_img/web_en/mo/main/m_inst_on.png')no-repeat 55% 50% / 22px; border:1px solid #e62b85}

	.section3 .left ul.sns							{display:flex;}
	.section3 .left ul.sns li						{width:49%; margin-right:1%;}
	.section3 .left ul.sns li:nth-child(n+3)		{display:none;}
	.section3 .left ul.sns li:nth-child(2n)			{margin:0;}
	.section3 .left ul.sns li a						{display:block; overflow:hidden; border-radius:5px; position:relative; transition:all .2s;}
	.section3 .left ul.sns li a:hover:after,
	.section3 .left ul.sns li a:focus:after			{content:""; position:absolute; top:-1px; left:-1px; z-index:2; width:calc(100% - 6px); height:calc(100% - 6px);}
	.section3 .left ul.sns li a:hover p.txt,	
	.section3 .left ul.sns li a:focus p.txt		{text-decoration:underline;}

	.section3 .left ul.sns li.face a:hover:after,
	.section3 .left ul.sns li.face a:focus:after	{border:4px solid #003365;}
	.section3 .left ul.sns li.yout a:hover:after,
	.section3 .left ul.sns li.yout a:focus:after	{border:4px solid #ff0000;}
	.section3 .left ul.sns li.blog a:hover:after,
	.section3 .left ul.sns li.blog a:focus:after	{border:4px solid #00c73c;}
	.section3 .left ul.sns li.inst a:hover:after,
	.section3 .left ul.sns li.inst a:focus:after	{border:4px solid #e62b85;}

	.section3 .left ul.sns li a .img 				{position:relative; background: #f2f2f2;}
	.section3 .left ul.sns li a .img span			{display:inline-block; position:absolute; width:32px; height:32px; right:8px; top:8px; border-radius:50%; font-size:0;}
	.section3 .left ul.sns li a .img span.face		{background:url('/_img/web_en/mo/comn/face.png') no-repeat 50% 50%/100%;}
	.section3 .left ul.sns li a .img span.yout		{background:url('/_img/web_en/mo/comn/yout.png') no-repeat 50% 50%/100%;}
	.section3 .left ul.sns li a .img span.blog		{background:url('/_img/web_en/mo/comn/blog.png') no-repeat 50% 50%/100%;}
	.section3 .left ul.sns li a .img span.inst		{background:url('/_img/web_en/mo/comn/inst.png') no-repeat 50% 50%/100%;}
	
	.section3 .left ul.sns li a .txt				{margin:5px 5px 10px 5px; font:400 15px/20px "Poppins", sans-serif; color:#666; height:40px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}

	/* 시스템교육안내 */
 	.section3 .right					{width:100%; /* padding-top:20px; */margin-bottom: 35px;}
	.section3 .right ul.sys				{width:100%;}
	.section3 .right ul.sys li			{float:left; border-bottom: 1px solid #ddd; width:100%; padding:7px 7px 7px 11px;}
	.section3 .right ul.sys li a				{display:block; position:relative;font:500 17px/22px "Poppins", sans-serif; color:#333; transition:all .2s; padding: 15px 0px;}
	.section3 .right ul.sys li:first-child a	{background:url('/_img/web_en/mo/main/sys_icon01.png') no-repeat center right 9px / 55px;}
	.section3 .right ul.sys li:nth-child(2) a	{background:url('/_img/web_en/mo/main/sys_icon02.png') no-repeat center right 9px / 55px;}
	.section3 .right ul.sys li:nth-child(3) a	{background:url('/_img/web_en/mo/main/sys_icon03.png') no-repeat center right 17px / 37px;}

	.section3 .right ul.sys li a:hover,
	.section3 .right ul.sys li a:focus				{color:#079ddc;}
	.section3 .right ul.sys li:first-child a:hover,
	.section3 .right ul.sys li:first-child a:focus	{background:url('/_img/web_en/mo/main/sys_icon01.png') no-repeat center right 9px / 55px;}
	.section3 .right ul.sys li:nth-child(2) a:hover,
	.section3 .right ul.sys li:nth-child(2) a:focus	{background:url('/_img/web_en/mo/main/sys_icon02.png') no-repeat center right 9px / 55px;}
	.section3 .right ul.sys li:nth-child(3) a:hover,
	.section3 .right ul.sys li:nth-child(3) a:focus	{background:url('/_img/web_en/mo/main/sys_icon03.png') no-repeat center right 17px / 37px;}



/* 비주얼 움직임 */

  @keyframes slide-in {
    from {transform: translatey(32%);}
    to {transform: translateX(0%);}
  }

  @keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
  }

}