@charset "utf-8";

@font-face {
	font-family: 'Pretendard-ExtraLight';
	src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard-Regular';
	src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard-SemiBold';
	src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard-Bold';
	src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard-Black';
	src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
}
@font-face {
	font-family: 'Grandpa_sharing';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_05@1.0/Grandpa_sharing.woff') format('woff');
}

*{
	margin: 0;
	padding: 0;
}

body{
	font-family: 'Pretendard-Regular',sans-serif;
	font-size: 14px;
	color:#000000;
	background-color: #ffffff;
}


body,ul,dl,ol,li,dt{margin:0; padding:0; list-style-type:none;}
a{ text-decoration:none; color:hsl(0, 0%, 0%);}
.moveUrl{ cursor: pointer;}
.openUrl{ cursor: pointer;}
.notScroll {overflow: hidden;width: 100%;height: 100vh;touch-action:none;}
input[type=text],input[type=email],input[type=file],select{font-family: 'Pretendard-Regular',sans-serif; width:100%; height: 60px; line-height: 60px; border: solid 1px #e1e1e1; outline: none; padding: 0 10px 0 10px; font-size: 16px; vertical-align: middle; color: #000;}
input::placeholder{ color: #999;}
textarea{ border: solid 1px #e1e1e1; width:100%; padding: 15px; height: 150px; resize: none; font-family: 'Pretendard-Regular',sans-serif; font-size: 15px; line-height: 20px;}

.fend{clear:both;}
img{ vertical-align:top; border:0;}

.top_wrap .box{ position:fixed; top:0; left: 0; width:100%; height: 80px; color: #fff; background-color: rgba(255,255,255,0); line-height: 80px; z-index: 1000;}
.top_wrap .box .inbox{ position: relative; width:1200px; margin: 0 auto;}
.top_wrap .box .logo{ position: absolute; top:0; left: 0;}
.top_wrap .box .logo .w{ position: absolute; top:0; left: 0; width:219px; height: 80px; background: url(../images/logo_w.png) no-repeat;}
.top_wrap .box .logo .b{ position: absolute; top:0; left: 0; width:219px; height: 80px; background: url(../images/logo_b.png) no-repeat; opacity: 0;}
.top_wrap .box .btn_menu{ display: none;}
.top_wrap .box .menu{ position: absolute; top:0; right: 0; width:600px;}
.top_wrap .box .menu .in{ display: inline-table; width:100%; table-layout: fixed; text-align: center;}
.top_wrap .box .menu .in ul{ position: relative; display:table-cell; line-height: 20px; height: 80px; vertical-align: middle; font-size: 18px; font-family: 'Pretendard-Bold',sans-serif; cursor: pointer;}
.top_wrap .box .menu .in ul::before{ content: ''; position: absolute; bottom: 20px; left: 50%; width:0; height: 1px; background-color: #fff; opacity: 0.7;}
.top_wrap .box .menu .in ul.on{ color: #00bcff;}
.top_wrap .box .menu .in ul.on::before{ background-color: #00bcff;}
.top_wrap .box .menu .in ul:hover::before{ animation:top_over 0.3s ease-out forwards;}
.top_wrap .box.on{ animation:top_ani 1s ease-out forwards; color: #000; box-shadow:0 3px 3px rgba(0, 0, 0, .1);}
.top_wrap .box.on .logo .w{ opacity: 0;}
.top_wrap .box.on .logo .b{ opacity: 1;}
@keyframes top_ani {
	0%{  background-color: rgba(255,255,255,0);}
	100%{  background-color: rgba(255,255,255,1);}
}
@keyframes top_over {
	0%{ width:0; left: 50%;}
	100%{ width:calc(100% - 40px); left: 20px;}
}

@media(max-width:720px) {
	.top_wrap .box{ position:fixed; top:0; left: 0; width:100%; height: 60px; color: #fff; background-color: rgba(255,255,255,0); line-height: 80px; z-index: 1000;}
	.top_wrap .box .inbox{ position: relative; width:100%; margin: 0 auto;}
	.top_wrap .box .logo{ position: absolute; top:0; left: 10px;}
	.top_wrap .box .logo .w{ position: absolute; top:0; left: 0; width:164px; height: 60px; background: url(../images/logo_w.png) no-repeat; background-size: contain;}
	.top_wrap .box .logo .b{ position: absolute; top:0; left: 0; width:164px; height: 60px; background: url(../images/logo_b.png) no-repeat; background-size: contain; opacity: 0;}
	.top_wrap .box .btn_menu{ display: block; position: absolute; top:0; right: 0; width:60px; height: 60px; text-align: center;}
	.top_wrap .box .btn_menu i{ font-size: 20px; line-height: 60px;}
	.top_wrap .box .btn_menu.close{ z-index: 1100; color: #000; display: none;}
	.top_wrap .box .menu{ position: absolute; top:0; right: 0; width:100%; background-color: #fff; border-radius: 0 0 15px 15px; padding: 30px 0 15px 0; color: #000; box-shadow:0 3px 3px rgba(0, 0, 0, .1); display: none; z-index: 1000;}
	.top_wrap .box .menu .in{ display: inline-table; width:100%; table-layout: fixed; text-align: center;}
	.top_wrap .box .menu .in ul{ position: relative; display:block; line-height: 40px; height: 40px; vertical-align: middle; font-size: 18px; border-bottom: dashed 1px #e1e1e1; font-family: 'Pretendard-Bold',sans-serif; cursor: pointer;}
	.top_wrap .box .menu .in ul:last-child{ border-bottom: 0;}
	.top_wrap .box .menu .in ul::before{ content: ''; position: absolute; bottom: 20px; left: 50%; width:0; height: 1px; background-color: #fff; opacity: 0.7; display: none;}
	.top_wrap .box .menu .in ul.on{ color: #00bcff;}
	.top_wrap .box .menu .in ul.on::before{ background-color: #00bcff;}
	.top_wrap .box .menu .in ul:hover::before{ animation:top_over 0.3s ease-out forwards;}
	.top_wrap .box.on{ animation:top_ani 1s ease-out forwards; color: #000; box-shadow:0 3px 3px rgba(0, 0, 0, .1);}
	.top_wrap .box.on .logo .w{ opacity: 0;}
	.top_wrap .box.on .logo .b{ opacity: 1;}
	@keyframes top_ani {
		0%{  background-color: rgba(255,255,255,0);}
		100%{  background-color: rgba(255,255,255,1);}
	}
	@keyframes top_over {
		0%{ width:0; left: 50%;}
		100%{ width:calc(100% - 40px); left: 20px;}
	}
}


.mousewheel{ position: fixed; bottom: 10px; left: calc(50% - 55px); z-index: 2000;}
#mouse_body { border-style: solid; border-width: 1px; border-color: #fff; border-radius: 32px; height: 30px; width: 16px; margin: 0 auto;}
#mouse_wheel { border-style: solid; border-width: 2px; border-color: #fff; border-radius: 8px; background-color: #fff; position: relative; height: 2px; width: 2px; margin: 0 auto;  animation: wheel_animation 1s linear infinite;}
.mousewheel .txt{ font-size: 11px; letter-spacing: 2px; margin-top: 4px; color: #fff;}
.mousewheel.on #mouse_body{ border-color: #888;}
.mousewheel.on #mouse_wheel{ border-color: #888; background-color: #888;}
.mousewheel.on .txt{ color: #888;}

.cg{font-family: 'Pretendard-ExtraLight',sans-serif; position: absolute; bottom: 10px; right: 10px; color: #fff; z-index: 1000;}

@keyframes wheel_animation {
	0% { opacity: 0; top: 2px;}
	50% { opacity: 1; top: 50%;}
	100% { opacity: 0; top: 20px;}
}
@keyframes first_mousewheel {
	0% { opacity: 0;}
	35% { opacity: 0;}
	45% { opacity: 1;}
	100% { opacity: 1;}
}



.section.sec1{ background-color: #061432;}
.section.sec1 .line{ position: fixed; top:calc(50% - 18px); left: 50%; width:0; height: 1px; background-color: #fff; z-index: 130;}
.section.sec1 .txt1{ opacity: 0; position: absolute; top:calc(50% - 100px); left: 0; width:100%; text-align: center; color: #fff; font-family: 'Pretendard-Black',sans-serif; font-size: 56px; line-height: 60px; text-shadow:1px 1px 1px rgba(0, 0, 0, .3);   letter-spacing: -1px; z-index: 130;}
.section.sec1 .txt1 div{ display: inline-table;}
.section.sec1 .txt2{ opacity: 0; position: absolute; top:calc(50% + 5px); left: 0; width:100%; text-align: center; color: #fff; font-family: 'Pretendard-ExtraLight',sans-serif; font-size: 40px; line-height: 46px; text-shadow:1px 1px 1px rgba(0, 0, 0, .3); letter-spacing: -2px; z-index: 130;}
.section.sec1 .txt2 div{ display: inline-table;}
.section.sec1 .txt2 span{font-family: 'Pretendard-Bold',sans-serif;}
.section.sec1 .logo{ position: absolute; top:calc(50% - 260px); left:calc(50% - 414px); opacity: 0.1; z-index: 120;}
.section.sec1 .mask{ position: absolute; top:0; left: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.3); z-index: 110;}
.section.sec1 .mv{ position:fixed; top:0; left:0; width:100%; height:100%; overflow: hidden; z-index:100;}
.section.sec1 .mv video{ width:100%; height: 100%; object-fit: cover;}

.section.sec1 .line{animation:ani01_01 3s ease-out forwards;}
@keyframes ani01_01 {
	0% { left: 50%; width: 0;}
	30% { left: calc(50% - 450px); width: 900px; opacity: 1;}
	60% { left: calc(50% - 450px); width: 900px; opacity: 0;}
	100% { left: calc(50% - 450px); width: 900px; opacity: 0;}
}
.section.sec1 .txt1{animation:ani01_02 3s forwards;}
@keyframes ani01_02 {
	0% { top: calc(50% - 70px); opacity: 0;}
	25% { top: calc(50% - 70px); opacity: 0;}
	50% { top: calc(50% - 100px); opacity: 1;}
	100% { top: calc(50% - 100px); opacity: 1;}
}
.section.sec1 .txt2{animation:ani01_03 3s forwards;}
@keyframes ani01_03 {
	0% { top: calc(50% - 25px); opacity: 0;}
	25% { top: calc(50% - 25px); opacity: 0;}
	50% { top: calc(50% + 5px); opacity: 1;}
	100% { top: calc(50% + 5px); opacity: 1;}
}

@media(max-width:720px) {
	.mousewheel{ display: none;}
	.section.sec1 .line{ position: absolute; top:calc(50% - 18px); left: 50%; width:0; height: 1px; background-color: #fff; z-index: 130;}
	.section.sec1 .txt1{ opacity: 0; position: absolute; top:calc(50% - 100px); left: 0; width:100%; text-align: center; color: #fff; font-family: 'Pretendard-Black',sans-serif; font-size: 28px; line-height: 30px; text-shadow:1px 1px 1px rgba(0, 0, 0, .3);   letter-spacing: -1px; z-index: 130;}
	.section.sec1 .txt1 div{ display: block;}
	.section.sec1 .txt2{ opacity: 0; position: absolute; top:calc(50% + 5px); left: 0; width:100%; text-align: center; color: #fff; font-family: 'Pretendard-ExtraLight',sans-serif; font-size: 24px; line-height: 28px; text-shadow:1px 1px 1px rgba(0, 0, 0, .3); letter-spacing: -2px; z-index: 130;}
	.section.sec1 .txt2 div{ display: inline-table;}
	.section.sec1 .txt2 span{font-family: 'Pretendard-Bold',sans-serif;}
	.section.sec1 .logo{ display: none;}
	.section.sec1 .mask{ position: absolute; top:0; left: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.3); z-index: 110;}
	.section.sec1 .mv{ position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; z-index:100;}

	.section.sec1 .line{animation:ani01_01 3s ease-out forwards;}
	@keyframes ani01_01 {
		0% { left: 50%; width: 0;}
		30% { left: 5%; width: 90%; opacity: 1;}
		60% { left: 5%; width: 90%; opacity: 0.3;}
		100% { left: 5%; width: 90%; opacity: 0.3;}
	}
	.section.sec1 .txt1{animation:ani01_02 3s forwards;}
	@keyframes ani01_02 {
		0% { top: calc(50% - 70px); opacity: 0;}
		25% { top: calc(50% - 70px); opacity: 0;}
		50% { top: calc(50% - 100px); opacity: 1;}
		100% { top: calc(50% - 100px); opacity: 1;}
	}
	.section.sec1 .txt2{animation:ani01_03 3s forwards;}
	@keyframes ani01_03 {
		0% { top: calc(50% - 25px); opacity: 0;}
		25% { top: calc(50% - 25px); opacity: 0;}
		50% { top: calc(50% + 5px); opacity: 1;}
		100% { top: calc(50% + 5px); opacity: 1;}
	}
}

.section.sec2{ text-align: center;}
.section .title{ font-family: 'Pretendard-Black',sans-serif; font-size: 32px; line-height: 34px;}
.section .title_en{ font-family: 'Pretendard-Black',sans-serif; font-size: 22px; line-height: 24px; color: #1bb1e7;}
.section .title_info{ padding: 20px 0 60px 0; font-size: 17px; line-height: 20px; color: #888;}
.section.sec2 .bg{ position: absolute; bottom: 0; right:0; z-index: 1;}
.section.sec2 .cont{ position: relative; width:1200px; height: 406px; margin: 0 auto; z-index: 5;}
.section.sec2 .cont ul{ float: left; position: relative; width:300px; height: 406px; color: #fff; overflow: hidden;}
.section.sec2 .cont ul .tit{ position: absolute; top:180px; left: 0; width:100%; z-index: 20;}
.section.sec2 .cont ul .tit .tit_en{font-family: 'Pretendard-Black',sans-serif; font-size: 30px; line-height: 32px; text-shadow:0 0 3px rgba(0, 0, 0, .2);}
.section.sec2 .cont ul .tit .tit_kr{ font-size: 18px; text-shadow:0 0 3px rgba(0, 0, 0, .2);}
.section.sec2 .cont ul .tit_info{ position: absolute; top:50%; left: 0; width:100%; font-family: 'Pretendard-SemiBold',sans-serif; color: #4dd0ff; font-size: 18px; letter-spacing: -1px; z-index: 20; opacity: 0;}
.section.sec2 .cont ul .mask{ position: absolute; top:0; left: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 10; opacity: 0;}
.section.sec2 .cont ul .more{ position: absolute; top:calc(50% + 120px); left: 0; width:100%; font-size: 14px; z-index: 20; cursor: pointer; opacity: 0; display: none;}
.section.sec2 .cont ul .more i{ margin-left: 5px;}
.section.sec2 .cont ul .over_info{ position: absolute; top:100%; left: 0; width:calc(100% - 30px); padding: 0 15px 0 15px; height: 100%; background-color: #22419b; z-index: 50;}
.section.sec2 .cont ul .over_info .txt1{ font-size: 24px; padding: 30px 0 0 0; font-family: 'Pretendard-SemiBold',sans-serif;}
.section.sec2 .cont ul .over_info .txt2{ font-size: 16px; padding: 15px 0 0 0; font-family: 'Pretendard-ExtraLight',sans-serif; opacity: 0.7;}
.section.sec2 .cont ul .over_info .info{ padding: 20px 0 0 0; line-height: 18px;}
.section.sec2 .cont ul .over_info .info dl:nth-child(1){}
.section.sec2 .cont ul .over_info .info dl:nth-child(2){ font-family: 'Pretendard-ExtraLight',sans-serif; opacity: 0.6;}
.section.sec2 .cont ul .over_info .close{ position: absolute; bottom: 15px; left:calc(50% - 15px); width:30px; line-height: 30px; cursor: pointer;}
.section.sec2 .cont ul .over_info .close i{ line-height: 30px; font-size: 24px;}
.section.sec2 .cont ul:hover .mask{animation:ani02_01 1s ease-out forwards;}
@keyframes ani02_01 {
	0% { opacity: 0;}
	50% { opacity: 1;}
	100% { opacity: 1;}
}
.section.sec2 .cont ul:hover .tit{animation:ani02_02 1s ease-out forwards;}
@keyframes ani02_02 {
	0% { top:180px;}
	60% { top:80px;}
	100% { top:80px;}
}
.section.sec2 .cont ul:hover .tit_info{animation:ani02_03 1s ease-out forwards;}
@keyframes ani02_03 {
	0% { top:40%; opacity: 0;}
	60% { top:50%; opacity: 1;}
	100% { top:50%; opacity: 1;}
}
.section.sec2 .cont ul:hover .more{animation:ani02_04 1s ease-out forwards; display: block;}
@keyframes ani02_04 {
	0% { top:calc(50% + 140px); opacity: 0;}
	100% { top:calc(50% + 120px); opacity: 1;}
}
.section.sec2 .cont ul .over_info.on{ animation:ani02_05 0.5s ease-out forwards;}
@keyframes ani02_05 {
	0% { top:100%;}
	100% { top:0;}
}

.section.sec3{ text-align: center;}
.section.sec3 .cont_mo{ display: none;}

.section.sec4{ text-align: center;}
.partner{ position: relative; width:1200px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.partner ul{ width:230px; height: 96px; border: solid 1px #eee; margin: 0 0 10px 10px; cursor: pointer;}
.partner ul:hover{ border: solid 1px #20409a;}
.partner ul:nth-child(5n+1){ margin: 0 0 10px 0;}
.partner ul.more{ border: solid 1px #20409a; background-color: #20409a; color: #fff; line-height: 96px; font-size: 16px;}
.partner ul.more i{ margin-left: 5px;}

.section.sec5{ text-align: center;}

.contact_map{ position: relative; width:1200px; margin: 0 auto; padding: 30px 0 0 0;}
.contact_map .btn_box{ text-align: right; padding: 20px 0 0 0;}
.contact_map .btn_box ul{ display: inline-table; height:40px; line-height: 40px; border-radius: 40px; width:160px; text-align: center; margin-left: 10px; cursor: pointer;}
.contact_map .btn_box ul.google{ border: solid 1px #1c79c7; color: #1c79c7;}
.contact_map .btn_box ul.google:hover{ background-color: #1c79c7; color: #fff;}
.contact_map .btn_box ul.kakao{ border: solid 1px #543114; color: #543114;}
.contact_map .btn_box ul.kakao:hover{ background-color: #543114; color: #ffe400;}
.contact_map .btn_box ul.naver{ border: solid 1px #00ae04; color: #00ae04;}
.contact_map .btn_box ul.naver:hover{ background-color: #00ae04; color: #fff;}
.contact_map .info{ display: inline-table; width: 100%; margin: 20px 0 0 0; text-align: left;}
.contact_map .info ul{ display: inline-table; margin-left: 50px;}
.contact_map .info ul.addr{ width:790px; margin-left: 0;}
.contact_map .info ul li{ display:table-cell; height: 50px; vertical-align: middle;}
.contact_map .info ul li:nth-child(1){ position: relative; font-size: 18px; font-family: 'Pretendard-SemiBold',sans-serif; padding:0 15px 0 0;}
.contact_map .info ul.addr li:nth-child(1){ width:80px;}
.contact_map .info ul li:nth-child(1)::before{ content:''; position: absolute; top:10px; right: 0; width:1px; height: calc(100% - 20px); background-color: #e1e1e1;}
.contact_map .info ul li:nth-child(2){ padding: 0 0 0 15px;}

@media(max-width:720px) {
	.section.sec2{ text-align: center;}
	.section .title{ font-family: 'Pretendard-Black',sans-serif; font-size: 26px; line-height: 28px; padding: 70px 0 0 0;}
	.section .title_en{ font-family: 'Pretendard-Black',sans-serif; font-size: 18px; line-height: 20px; color: #1bb1e7;}
	.section .title_info{ padding: 20px 20px 60px 20px; font-size: 15px; line-height: 18px; color: #888;}
	.section.sec2 .bg{ position: absolute; bottom: 0; right:0; z-index: 1; display: none;}
	.section.sec2 .cont{ position: relative; width:300px; height: auto; margin: 0 auto; z-index: 5;}
	.section.sec2 .cont ul{ float:none; position: relative; width:300px; height: 406px; margin-bottom: 20px; color: #fff; overflow: hidden;}

	.section.sec3 .cont_mo{ display: block;}
	.section.sec3 .cont_mo img{ width:100%;}
	.section.sec3 .cont_pc{ display: none;}
	.section.sec3 img{ width:100%;}

	.partner{ position: relative; width:calc(100% - 30px); margin-left: 15px; display: flex; flex-wrap: wrap;}
	.partner ul{ width:calc(33.3333333333333% - 10px); height: auto; border: solid 1px #eee; margin: 0 0 10px 10px; cursor: pointer;}
	.partner ul img{ width:100%;}
	.partner ul:hover{ border: solid 1px #20409a;}
	.partner ul:nth-child(5n+1){ margin: 0 0 10px 10px;}
	.partner ul:nth-child(3n+1){ margin: 0 0 10px 0;}
	.partner ul.more{ border: solid 1px #20409a; background-color: #20409a; color: #fff; line-height: 40px; font-size: 14px;}
	.partner ul.more i{ margin-left: 5px;}

	.contact_map{ position: relative; width:calc(100% - 30px); margin: 0 auto; padding: 30px 0 0 0;}
	.contact_map .btn_box{ text-align: right; padding: 20px 0 0 0;}
	.contact_map .btn_box ul{ display: inline-table; height:40px; line-height: 40px; border-radius: 40px; width:calc(100% - 2px); text-align: center; margin-left: 0; margin-bottom: 10px; cursor: pointer;}
	.contact_map .btn_box ul.google{ border: solid 1px #1c79c7; color: #1c79c7;}
	.contact_map .btn_box ul.google:hover{ background-color: #1c79c7; color: #fff;}
	.contact_map .btn_box ul.kakao{ border: solid 1px #543114; color: #543114;}
	.contact_map .btn_box ul.kakao:hover{ background-color: #543114; color: #ffe400;}
	.contact_map .btn_box ul.naver{ border: solid 1px #00ae04; color: #00ae04;}
	.contact_map .btn_box ul.naver:hover{ background-color: #00ae04; color: #fff;}
	.contact_map .info{ display: block; width: 100%; margin: 20px 0 0 0; text-align: left;}
	.contact_map .info ul{ display: block; margin-left: 0; margin-bottom: 15px;}
	.contact_map .info ul.addr{ width:100%; margin-left: 0;}
	.contact_map .info ul li{ display:block; height: auto; vertical-align: middle;}
	.contact_map .info ul li:nth-child(1){ position: relative; font-size: 16px; font-family: 'Pretendard-SemiBold',sans-serif; padding:0 0 0 0;}
	.contact_map .info ul.addr li:nth-child(1){ width:auto;}
	.contact_map .info ul li:nth-child(1)::before{ content:''; position: absolute; top:10px; right: 0; width:1px; height: calc(100% - 20px); background-color: #e1e1e1;}
	.contact_map .info ul li:nth-child(2){ padding: 0 0 0 0; color: #888;}
}

.footer{ position: relative; padding: 50px 0 50px 0; color: #888; background-color: #f3f6f9;}
.footer .inbox{ position: relative; width:1200px; margin: 0 auto;}
.footer .txt div{ display: inline-table; margin-right: 20px;}
.footer .cname{ color: #222; font-family: 'Pretendard-Bold',sans-serif; padding: 0 0 15px 0; font-size: 15px;}
.footer .txt{ line-height: 18px;}
.footer .ct{ color: #bbb; font-family: 'Pretendard-ExtraLight',sans-serif; padding: 10px 0 0 0;}
.footer .logo{ position: absolute; top:calc(50% - 12px); right: 50px;}
.footer_blank{ height: 50px; background-color: #f3f6f9;}

@media(max-width:720px) {
	.footer{ position: relative; padding: 50px 0 50px 0; color: #888; background-color: #f3f6f9;}
	.footer .inbox{ position: relative; width:calc(100% - 30px); margin-left: 15px;}
	.footer .txt div{ display: inline-table; margin-right: 20px;}
	.footer .cname{ color: #222; font-family: 'Pretendard-Bold',sans-serif; padding: 0 0 15px 0; font-size: 15px;}
	.footer .txt{ line-height: 18px;}
	.footer .ct{ color: #bbb; font-family: 'Pretendard-ExtraLight',sans-serif; padding: 10px 0 0 0;}
	.footer .logo{ position: absolute; top:calc(50% - 12px); right: 50px; display: none;}
	.footer_blank{ height: 0; background-color: #f3f6f9;}
}

.sub_top{ position: relative; overflow: hidden;}
.sub_top .bg.about{ position: absolute; top:0; left: 0; width:100%; height: 100%; background: url(../images/sub_top_about.jpg) no-repeat center center; background-size: cover; z-index: 10;}
.sub_top .bg.recruit{ position: absolute; top:0; left: 0; width:100%; height: 100%; background: url(../images/sub_top_recruit.jpg) no-repeat center center; background-size: cover; z-index: 10;}
.sub_top .bg.product{ position: absolute; top:0; left: 0; width:100%; height: 100%; background: url(../images/sub_top_product.jpg) no-repeat center center; background-size: cover; z-index: 10;}
.sub_top .bg.partnertop{ position: absolute; top:0; left: 0; width:100%; height: 100%; background: url(../images/sub_top_partner.jpg) no-repeat center center; background-size: cover; z-index: 10;}
.sub_top .bg.contact{ position: absolute; top:0; left: 0; width:100%; height: 100%; background: url(../images/sub_top_contact.jpg) no-repeat center center; background-size: cover; z-index: 10;}
.sub_top .title{ position: absolute; top:60%; left:50%; transform: translate(-50%, -50%); z-index: 20; color: #fff; text-align: center; font-size: 50px; font-family: 'Pretendard-ExtraLight',sans-serif; letter-spacing: -2px; opacity: 0;}
.sub_top .title span{font-family: 'Pretendard-Bold',sans-serif;}
.sub_top .title div{ display: inline-table; margin-left: 10px;}
.sub_top .title{ animation:sub_top 1s ease-out forwards;}
.sub_title{ position: relative; text-align: center; padding: 80px 0 80px 0; font-size: 36px; font-family: 'Pretendard-Bold',sans-serif; letter-spacing: -2px;}
.sub_title .en{ font-size: 24px; letter-spacing: 0; color: #20409a;}
.sub_title .kr{ font-size: 22px; letter-spacing: 0; color: #20409a; font-family: 'Pretendard-ExtraLight',sans-serif; padding: 5px 0 0 0;}
.sub_title .en div{ display: inline-table; margin-left: 6px;}
.sub_title .kr div{ display: inline-table; margin-left: 6px;}
.sub_title::before{ content: ''; position: absolute; bottom:60px; left: calc(50% - 25px); width:50px; height: 2px; background-color: #444;}
.sub_title.white{ position: relative; text-align: center; padding: 80px 0 80px 0; font-size: 36px; font-family: 'Pretendard-Bold',sans-serif; letter-spacing: -2px; color: #fff;}
.sub_title.white .en{ font-size: 24px; letter-spacing: 0; color: rgba(255,255,255,0.6);}
.sub_title.white .kr{ font-size: 22px; letter-spacing: 0; color: rgba(255,255,255,0.6); font-family: 'Pretendard-ExtraLight',sans-serif; padding: 5px 0 0 0;}
.sub_title.white::before{ content: ''; position: absolute; bottom:60px; left: calc(50% - 25px); width:50px; height: 2px; background-color: #fff;}
@keyframes sub_top {
	0% { top:60%; opacity: 0;}
	100% { top:50%; opacity: 1;}
}
@media(max-width:720px) {
	.sub_top .title{ position: absolute; top:60%; left:50%; transform: translate(-50%, -50%); width:100%; z-index: 20; color: #fff; text-align: center; font-size: 30px; font-family: 'Pretendard-ExtraLight',sans-serif; letter-spacing: -1px; opacity: 0;}
	.sub_top .title span{font-family: 'Pretendard-Bold',sans-serif;}
	.sub_top .title div{ display: block; margin-left: 0;}
	.sub_title{ position: relative; text-align: center; padding: 50px 0 50px 0; font-size: 24px; font-family: 'Pretendard-Bold',sans-serif; letter-spacing: -1px;}
	.sub_title .en{ font-size: 18px; letter-spacing: 0; color: #20409a;}
	.sub_title .kr{ font-size: 18px; letter-spacing: 0; color: #20409a; font-family: 'Pretendard-ExtraLight',sans-serif;}
	.sub_title .en div{ display: block; margin-left: 0;}
	.sub_title .kr div{ display: block; margin-left: 0;}
	.sub_title::before{ content: ''; position: absolute; bottom:30px; left: calc(50% - 25px); width:50px; height: 2px; background-color: #444;}
	.sub_title.white{ position: relative; text-align: center; padding: 50px 0 50px 0; font-size: 24px; font-family: 'Pretendard-Bold',sans-serif; letter-spacing: -1px; color: #fff;}
	.sub_title.white .en{ font-size: 18px; letter-spacing: 0; color: rgba(255,255,255,0.6);}
	.sub_title.white .kr{ font-size: 18px; letter-spacing: 0; color: rgba(255,255,255,0.6);}
	.sub_title.white::before{ content: ''; position: absolute; bottom:30px; left: calc(50% - 25px); width:50px; height: 2px; background-color: #fff;}
}

.about_02{ width:1200px; margin: 0 auto; text-align: center; padding-bottom: 50px;}
.about_02 ul:nth-child(1){ padding: 0 0 50px 0; font-size: 18px; line-height: 26px;}
.about_02 ul:nth-child(1) li div{ display: inline-table; margin-left: 5px;}
.about_02 .img{ border: solid 1px #e2e8f0; border-radius: 15px; overflow: hidden; padding: 30px 100px 0 100px;}
.about_02 .img img{ width:100%;}

.about_03{ position: relative; width:1200px; margin: 0 auto; text-align: center; padding-bottom: 50px;}
.about_03 ul li:nth-child(1){ font-size: 20px; font-family: 'Pretendard-Bold',sans-serif; letter-spacing:-1px; color: #20409a; padding: 0 0 15px 0;}
.about_03 .b01{ position: absolute; top:0; left: 0;}
.about_03 .b02{ position: absolute; bottom:50px; left: 0;}
.about_03 .b03{ margin-left: 600px;}

.about_04{ position: relative; width:1200px; margin: 0 auto; padding-bottom: 80px;}
.about_04 .txt{ text-align: center; font-size: 20px; font-family: 'Pretendard-ExtraLight',sans-serif; letter-spacing: -1px; padding: 0 0 70px 0;}
.about_04 .txt div{ display: inline-table; margin-left: 5px;}
.about_04 .txt span{ font-family: 'Pretendard-Black',sans-serif; color: #20409a;}
.about_04 .list{ position: relative; min-height: 300px;}
.about_04 .list .ceo{ position: absolute; top:0; left: 0; width:300px;}
.about_04 .list .ceo ul li:nth-child(1){ width:220px; height: 50px; line-height: 50px; border-radius: 50px; font-size: 18px; background-color: #20409a; color: #fff; text-align: center; font-family: 'Pretendard-ExtraLight',sans-serif;}
.about_04 .list .ceo ul li:nth-child(1) div{ position: relative; display: inline-table; font-family: 'Pretendard-Bold',sans-serif; margin-left: 8px; padding-left: 10px;}
.about_04 .list .ceo ul li:nth-child(1) div::before{ content: ''; position: absolute; top:18px; left: 0; width:1px; height: calc(100% - 36px); background-color: rgba(255,255,255,0.5);}
.about_04 .list .ceo ul li:nth-child(2){ padding: 15px 0 0 0;}
.about_04 .list .ceo ul li:nth-child(2) dl{ position: relative; margin-top: 15px; font-size: 15px; padding: 0 0 0 15px;}
.about_04 .list .ceo ul li:nth-child(2) dl::before{ content:''; position: absolute; width:5px; height: 5px; left: 0; top:calc(50% - 2px); border-radius: 5px; background-color: #ccc;}
.about_04 .list .manager{ margin-left: 240px;}
.about_04 .list .manager ul{ float: left; width:calc(25% - 30px); margin-left: 30px; margin-bottom: 30px;}
.about_04 .list .manager ul li:nth-child(1){; height: 48px; line-height: 48px; border-radius: 50px; font-size: 16px; background-color: #ffffff; border: solid 1px #e1e1e1; color: #000; text-align: center; font-family: 'Pretendard-ExtraLight',sans-serif;}
.about_04 .list .manager ul li:nth-child(1) div{ position: relative; display: inline-table; font-family: 'Pretendard-Bold',sans-serif; margin-left: 8px; padding-left: 10px;}
.about_04 .list .manager ul li:nth-child(1) div::before{ content: ''; position: absolute; top:18px; left: 0; width:1px; height: calc(100% - 36px); background-color: rgba(0,0,0,0.2);}
.about_04 .list .manager ul li:nth-child(2){ padding: 10px 0 0 0;}
.about_04 .list .manager ul li:nth-child(2) dl{ position: relative; margin-top: 4px; font-size: 15px; padding: 0 0 0 15px; color: #888; letter-spacing: -1px;}
.about_04 .list .manager ul li:nth-child(2) dl::before{ content:''; position: absolute; width:5px; height: 5px; left: 0; top:calc(50% - 2px); border-radius: 5px; background-color: #ccc;}


@media(max-width:720px) {

	.about_02{ width:calc(100% - 30px); margin: 0 auto; text-align: center; padding-bottom: 20px;}
	.about_02 ul:nth-child(1){ padding: 0 0 30px 0; font-size: 15px; line-height: 18px;}
	.about_02 ul:nth-child(1) li{ margin-bottom: 15px;}
	.about_02 ul:nth-child(1) li div{ display: block; margin-left: 0;}
	.about_02 .img{ border: solid 1px #e2e8f0; border-radius: 15px; overflow: hidden; padding: 30px 0 0 0;}
	.about_02 .img img{ width:100%;}

	.about_03{ position: relative; width:calc(100% - 30px); margin: 0 auto; text-align: center; padding-bottom: 50px;}
	.about_03 ul li:nth-child(1){ font-size: 20px; font-family: 'Pretendard-Bold',sans-serif; letter-spacing:-1px; color: #20409a; padding: 0 0 15px 0;}
	.about_03 ul{ margin:10px 0 30px 0;}
	.about_03 img{ width:100%;}
	.about_03 .b01{ position: relative; top:0; left: 0;}
	.about_03 .b02{ position: relative; bottom:0; left: 0;}
	.about_03 .b03{ margin-left: 0;}

	.about_04{ position: relative; width:calc(100% - 30px); margin: 0 auto; padding-bottom: 50px;}
	.about_04 .txt{ text-align: center; font-size: 18px; line-height: 24px; font-family: 'Pretendard-ExtraLight',sans-serif; letter-spacing: -1px; padding: 0 0 50px 0;}
	.about_04 .txt div{ display: block; margin-left: 5px;}
	.about_04 .txt span{ font-family: 'Pretendard-Black',sans-serif; color: #20409a;}
	.about_04 .list{ position: relative; min-height: 300px;}
	.about_04 .list .ceo{ position: relative; top:0; left: 0; width:calc(100% - 60px); margin: 0 auto; margin-bottom: 40px;}
	.about_04 .list .ceo ul li:nth-child(1){ width:100%; height: 50px; line-height: 50px; border-radius: 50px; font-size: 18px; background-color: #20409a; color: #fff; text-align: center; font-family: 'Pretendard-ExtraLight',sans-serif;}
	.about_04 .list .ceo ul li:nth-child(1) div{ position: relative; display: inline-table; font-family: 'Pretendard-Bold',sans-serif; margin-left: 8px; padding-left: 10px;}
	.about_04 .list .ceo ul li:nth-child(1) div::before{ content: ''; position: absolute; top:18px; left: 0; width:1px; height: calc(100% - 36px); background-color: rgba(255,255,255,0.5);}
	.about_04 .list .ceo ul li:nth-child(2){ padding: 15px 0 0 30px;}
	.about_04 .list .ceo ul li:nth-child(2) dl{ position: relative; margin-top: 15px; font-size: 15px; padding: 0 0 0 15px;}
	.about_04 .list .ceo ul li:nth-child(2) dl::before{ content:''; position: absolute; width:5px; height: 5px; left: 0; top:calc(50% - 2px); border-radius: 5px; background-color: #ccc;}
	.about_04 .list .manager{ margin-left: 0;}
	.about_04 .list .manager ul{ float: left; width:calc(50% - 8px); margin-left: 16px; margin-bottom: 30px;}
	.about_04 .list .manager ul:nth-child(2n+1){ margin-left: 0;}
	.about_04 .list .manager ul li:nth-child(1){; height: 38px; line-height: 38px; border-radius: 50px; font-size: 14px; background-color: #ffffff; border: solid 1px #e1e1e1; color: #000; text-align: center; font-family: 'Pretendard-ExtraLight',sans-serif;}
	.about_04 .list .manager ul li:nth-child(1) div{ position: relative; display: inline-table; font-family: 'Pretendard-Bold',sans-serif; margin-left: 8px; padding-left: 10px;}
	.about_04 .list .manager ul li:nth-child(1) div::before{ content: ''; position: absolute; top:18px; left: 0; width:1px; height: calc(100% - 36px); background-color: rgba(0,0,0,0.2);}
	.about_04 .list .manager ul li:nth-child(2){ padding: 10px 0 0 0;}
	.about_04 .list .manager ul li:nth-child(2) dl{ position: relative; margin-top: 4px; font-size: 13px; padding: 0 0 0 15px; color: #888; letter-spacing: -1px;}
	.about_04 .list .manager ul li:nth-child(2) dl::before{ content:''; position: absolute; width:5px; height: 5px; left: 0; top:calc(50% - 2px); border-radius: 5px; background-color: #ccc;}
}

.recruit_01{ position: relative; width:1200px; margin: 0 auto; padding: 0 0 80px 0;}
.recruit_01 ul{ float: left; width:calc(25% - 13px); margin-left: 14px; min-height:320px;  text-align: center; background-color: #0f2b7a; color: #fff; padding: 30px 0 50px 0;}
.recruit_01 ul:nth-child(1){ margin-left: 0;}
.recruit_01 ul:nth-child(even){ background-color: #31488b;}
.recruit_01 ul .ico img{ height: 40px;}
.recruit_01 ul .tit{font-family: 'Pretendard-Bold',sans-serif; font-size: 26px; letter-spacing: -1px; padding: 10px 0 20px 0;}
.recruit_01 ul .txt{ display: inline-table; text-align: left; font-size: 16px; opacity: 0.8;}
.recruit_01 ul .txt dl{ margin-top: 10px;}

.recruit_02{ height: 622px; background: url(../images/recruit/bg_recruit.jpg) center center; background-size: cover;}
.recruit_02 .txt{ font-size: 20px; color: #fff; text-align: center; font-family: 'Pretendard-ExtraLight',sans-serif; letter-spacing: -1px;}
.recruit_02 .txt div{ display: inline-table; margin-left: 5px;}
.recruit_02 .cont{ position: relative; width:1132px; margin: 70px auto 0;}
.recruit_02 .cont ul{ position: absolute; top:0; left: 0; width:200px; height: 200px; text-align: center; color: #fff;}
.recruit_02 .cont ul::before{ content: ''; position: absolute; top:0; left: 0; width:100%; height: 100%; border-radius: 100%; border: solid 2px #fff; z-index: 20;}
.recruit_02 .cont ul::after{ content: ''; position: absolute; top:0; left: 30px; width:100%; height: 100%; border-radius: 100%; background-color: #0f2b7a; z-index: 10; opacity: 0.7;}
.recruit_02 .cont ul:nth-child(even)::before{ border: solid 1px rgba(255,255,255,0.6);}
.recruit_02 .cont ul li{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 50;}
.recruit_02 .cont ul li dl:nth-child(1){ font-size: 26px; font-family: 'Pretendard-Bold',sans-serif;}
.recruit_02 .cont ul li dl:nth-child(2){ font-size: 18px; font-family: 'Pretendard-ExtraLight',sans-serif;}
.recruit_02 .cont ul:nth-child(2){ left: 180px;}
.recruit_02 .cont ul:nth-child(3){ left: 360px;}
.recruit_02 .cont ul:nth-child(4){ left: 540px;}
.recruit_02 .cont ul:nth-child(5){ left: 720px;}
.recruit_02 .cont ul:nth-child(6){ left: 900px;}

.recruit_03{ width:1200px; margin: 0 auto;}
.recruit_03 ul{ position: relative; float: left; width:calc(25% - 17px); height:198px; border: solid 1px #e1e1e1; margin: 0 0 20px 20px; box-shadow:1px 1px 10px rgba(0, 0, 0, .05);  }
.recruit_03 ul:nth-child(4n+1){ margin: 0 0 20px 0;}
.recruit_03 ul .tit{ position: absolute; bottom: 20px; right: 20px; font-size: 24px; font-family: 'Pretendard-Bold',sans-serif; letter-spacing: -1px;}
.recruit_03 ul .txt{ padding: 25px 0 0 20px; font-size: 18px; line-height: 22px; letter-spacing: -1px; color: #888;}
.recruit_03 ul .img{ position: absolute; bottom: 20px; left: 20px;}

.recruit_04{ width:1200px; margin: 0 auto;}
.recruit_04 ul{ position:relative; float: left; width:calc(25% - 45px); margin-left: 60px; text-align: center;}
.recruit_04 ul:nth-child(1){ margin-left: 0;}
.recruit_04 ul li:nth-child(1){ position: relative; width:200px; height: 200px; border-radius: 200px; background-color: #0f2b7a; margin: 0 auto;}
.recruit_04 ul li:nth-child(1)::before{ content: ''; position: absolute; top:calc(50% - 20px); left: -80px; width:40px; height: 40px; background: url(../images/recruit/ico_arw.png) no-repeat;}
.recruit_04 ul:nth-child(1) li:nth-child(1)::before{ display: none;}
.recruit_04 ul li:nth-child(1) img{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.recruit_04 ul li:nth-child(2){ font-size: 24px; font-family: 'Pretendard-Bold',sans-serif; letter-spacing: -1px; padding: 20px 0 10px 0;}
.recruit_04 ul li:nth-child(3){ font-size: 16px; color: #888; line-height: 20px;}

.recruit_form{ padding: 80px 0 80px 0;}

@media(max-width:720px) {
	.recruit_01{ position: relative; width:calc(100% - 30px); margin: 0 auto; padding: 0 0 30px 0;}
	.recruit_01 ul{ float:none; width:100%; margin-left: 0; min-height:auto;  text-align: center; background-color: #0f2b7a; color: #fff; padding: 30px 0 50px 0;}
	.recruit_01 ul:nth-child(1){ margin-left: 0;}
	.recruit_01 ul:nth-child(2){ background-color: #31488b;}
	.recruit_01 ul .ico img{ height: 40px;}
	.recruit_01 ul .tit{font-family: 'Pretendard-Bold',sans-serif; font-size: 22px; letter-spacing: -1px; padding: 10px 0 20px 0;}
	.recruit_01 ul .txt{ display: inline-table; text-align: left; font-size: 16px; opacity: 0.8;}
	.recruit_01 ul .txt dl{ margin-top: 10px;}

	.recruit_02{ height: auto; background: url(../images/recruit/bg_recruit.jpg) center center; background-size: cover; text-align: center; padding-bottom: 50px;}
	.recruit_02 .txt{ font-size: 16px; color: #fff; text-align: center; font-family: 'Pretendard-ExtraLight',sans-serif; letter-spacing: -1px;}
	.recruit_02 .txt div{ display: inline-table; margin-left: 5px;}
	.recruit_02 .cont{ position: relative; display: inline-table; width:302px; margin: 50px auto 0;}
	.recruit_02 .cont ul{ float: left; position: relative; top:0; left: 0; width:130px; height: 130px; text-align: center; color: #fff; margin: 0 0 15px 15px;}
	.recruit_02 .cont ul::before{ content: ''; position: absolute; top:0; left: 0; width:100%; height: 100%; border-radius: 100%; border: solid 1px #fff; z-index: 20;}
	.recruit_02 .cont ul::after{ content: ''; position: absolute; top:0; left: 20px; width:100%; height: 100%; border-radius: 100%; background-color: #0f2b7a; z-index: 10; opacity: 0.7;}
	.recruit_02 .cont ul:nth-child(even)::before{ border: solid 1px rgba(255,255,255,1);}
	.recruit_02 .cont ul li{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 50;}
	.recruit_02 .cont ul li dl:nth-child(1){ font-size: 18px; font-family: 'Pretendard-Bold',sans-serif;}
	.recruit_02 .cont ul li dl:nth-child(2){ font-size: 12px; font-family: 'Pretendard-ExtraLight',sans-serif;}
	.recruit_02 .cont ul:nth-child(2){ left: 0;}
	.recruit_02 .cont ul:nth-child(3){ left: 0;}
	.recruit_02 .cont ul:nth-child(4){ left: 0;}
	.recruit_02 .cont ul:nth-child(5){ left: 0;}
	.recruit_02 .cont ul:nth-child(6){ left: 0;}

	.recruit_03{ width:calc(100% - 30px); margin: 0 auto;}
	.recruit_03 ul{ position: relative; float: left; width:calc(50% - 10px); height:140px; border: solid 1px #e1e1e1; margin: 0 0 15px 15px; box-shadow:1px 1px 10px rgba(0, 0, 0, .05);  }
	.recruit_03 ul:nth-child(2n+1){ margin: 0 0 15px 0;}
	.recruit_03 ul .tit{ position: absolute; bottom: 10px; right: 10px; font-size: 17px; font-family: 'Pretendard-Bold',sans-serif; letter-spacing: -1px;}
	.recruit_03 ul .txt{ padding: 15px 0 0 10px; font-size: 14px; line-height: 16px; letter-spacing: 0; color: #888;}
	.recruit_03 ul .img{ position: absolute; bottom: 10px; left: 10px;}
	.recruit_03 ul .img img{ width:30px;}

	.recruit_04{ width:100%; margin: 0 auto;}
	.recruit_04 ul{ position:relative; float:none; width:100%; margin-left: 0; text-align: center; margin-bottom: 60px;}
	.recruit_04 ul:nth-child(1){ margin-left: 0;}
	.recruit_04 ul li:nth-child(1){ position: relative; width:120px; height: 120px; border-radius: 120px; background-color: #0f2b7a; margin: 0 auto;}
	.recruit_04 ul li:nth-child(1)::before{ content: ''; position: absolute; top:-50px; left: calc(50% - 20px); width:40px; height: 40px; background: url(../images/recruit/ico_arw.png) no-repeat; transform: rotate(90deg);}
	.recruit_04 ul:nth-child(1) li:nth-child(1)::before{ display: none;}
	.recruit_04 ul li:nth-child(1) img{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:50px;}
	.recruit_04 ul li:nth-child(2){ font-size: 18px; font-family: 'Pretendard-Bold',sans-serif; letter-spacing: -1px; padding: 20px 0 10px 0;}
	.recruit_04 ul li:nth-child(3){ font-size: 14px; color: #888; line-height: 20px;}
}

.contactus{ padding: 0 0 80px 0;}
.contact_form{ width:1200px; margin: 0 auto; background-color: #f9f9f9; border-radius: 15px; padding: 50px 0 50px 0;}
.contact_form .tit{ font-size: 24px; font-family: 'Pretendard-Bold',sans-serif; text-align: center;}
.contact_form .txt{ font-size: 16px; color: #888; text-align: center; padding: 10px 0 30px 0;}
.contact_form .form{ width:600px; margin: 0 auto;}
.contact_form .form ul{ display: inline-table; width:100%; margin-bottom: 15px;}
.contact_form .form ul li{ display: table-cell; vertical-align: middle;}
.contact_form .form ul li:nth-child(1){ width:80px; font-size: 18px; font-family: 'Pretendard-Bold',sans-serif;}
.contact_form .form ul input[type=checkbox]{ width:20px; height: 20px; border: solid 1px #e1e1e1; vertical-align: middle; margin: 0 5px 2px 0;}
.contact_form .form ul.agree{ text-align: center; padding:  30px 0 30px 0; font-size: 16px;}
.contact_form .form ul.agree span{ color: #999; margin-left: 10px; text-decoration: underline; cursor: pointer;}
.contact_form .form .btn_confirm{ height: 60px; line-height: 60px; font-size: 18px; background-color: #20409a; color: #fff; text-align: center; cursor: pointer;}

@media(max-width:720px) {
	.contactus{ padding: 0 0 50px 0;}
	.contact_form{ width:100%; margin: 0 auto; background-color: #f9f9f9; border-radius: 15px; padding: 50px 0 30px 0;}
	.contact_form .tit{ font-size: 20px; font-family: 'Pretendard-Bold',sans-serif; text-align: center;}
	.contact_form .txt{ font-size: 14px; color: #888; text-align: center; padding: 10px 0 30px 0;}
	.contact_form .form{ width:calc(100% - 30px); margin: 0 auto;}
	.contact_form .form ul{ display: inline-table; width:100%; margin-bottom: 10px;}
	.contact_form .form ul input[type=text]{ height: 46px; line-height: 46px; font-size: 14px;}
	.contact_form .form ul input[type=email]{ height: 46px; line-height: 46px; font-size: 14px;}
	.contact_form .form ul input[type=file]{ height: 46px; line-height: 46px; font-size: 14px;}
	.contact_form .form ul textarea{ font-size: 14px;}
	.contact_form .form ul select{ height: 46px; line-height: 46px; font-size: 14px;}
	.contact_form .form ul li{ display: table-cell; vertical-align: middle;}
	.contact_form .form ul li:nth-child(1){ width:60px; font-size: 14px;}
	.contact_form .form ul.agree{ text-align: center; padding:  30px 0 30px 0; font-size: 14px;}
	.contact_form .form .btn_confirm{ height: 50px; line-height: 50px; font-size: 16px; background-color: #20409a; color: #fff; text-align: center; cursor: pointer;}
}

.loading{ position: fixed; top:0; left: 0; width:100%; height: 100%; background-color: rgba(255,255,255,0.7); z-index: 2000; display: none;}
.loading .inbox{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:300px; height: 300px;}

.about_tab{ width:1200px; margin: 50px auto 0;}
.about_tab ul{ float: left; width:calc(16.666666666% - 8.4px); margin-left: 10px; margin-bottom: 10px; height: 50px; line-height: 50px; text-align: center; background-color: #f5f5f5; color: #7d869e; font-size: 16px; letter-spacing: -1px; cursor: pointer;}
.about_tab ul:nth-child(1){ margin-left: 0;}
.about_tab ul:hover{ background-color: #20409a; color: #fff;}
.about_tab ul.on{ background-color: #20409a; color: #fff;}

.about_cont .cont.c1{ width:1200px; margin: 0 auto; padding: 0 0 80px 0;}
.about_cont .vision_box{ position: relative; height: 581px; background: url(../images/bg_about_vision.png) center center; background-size: cover;}
.about_cont .vision_box .txt{ padding: 150px 0 0 100px;}
.about_cont .vision_box .txt .txt1{ font-size: 100px; font-family: 'Pretendard-Bold',sans-serif; color: #20409a; letter-spacing: -2px;}
.about_cont .vision_box .txt .txt2{ font-size: 20px; color: #888; padding: 20px 0 0 10px;}
.about_cont .vision_box .txt .txt2 span{ color: #000; font-family: 'Pretendard-Bold',sans-serif;}
.about_cont .vision_box .info_box{ position: absolute; top:180px; right: 80px; width:500px;}
.about_cont .vision_box .info_box .tit{ font-size: 20px; font-family: 'Pretendard-Bold',sans-serif; padding:  0 0 15px 0;}
.about_cont .vision_box .info_box .box{ border-top: solid 1px #e1e1e1;}
.about_cont .vision_box .info_box .box ul{ float: left; width:50%; border-bottom: solid 1px #e1e1e1; display: inline-table;}
.about_cont .vision_box .info_box .box ul li{ display: table-cell; padding:20px 5px 20px 5px;}
.about_cont .vision_box .info_box .box ul li:nth-child(1){ width:80px; background-color: #f5f5f5; text-align: center;}
.about_cont .vision_box .info_box .box ul li:nth-child(2){ text-align: left; color: #888; padding-left: 10px;}
.about_cont .vision_box .info_box .box ul:nth-child(5){ width:100%;}

.about_cont .cont.c2{ width:1200px; margin: 0 auto; padding: 0 0 80px 0;}
.about_cont .ceo{ position: relative; min-height: 600px; background: url(../images/bg_about_ceo.png) no-repeat bottom center;}
.about_cont .ceo .txt{ padding: 30px 0 0 0; font-size: 16px; line-height: 20px;}
.about_cont .ceo .txt .tit{font-size: 20px; font-family: 'Pretendard-Bold',sans-serif; padding: 0 0 40px 0;}
.about_cont .ceo .txt .name{ padding: 50px 0 0 0; font-family: 'Pretendard-Bold',sans-serif; }
.about_cont .ceo .txt .name span{ font-family: 'Grandpa_sharing', sans-serif; margin-left: 15px; font-size: 40px; letter-spacing: 5px;}
.about_cont .ceo .profile{ position: absolute; top:50px; right: 50px;}
.about_cont .ceo .profile ul li:nth-child(1){ width:220px; height: 50px; line-height: 50px; border-radius: 50px; font-size: 16px; background-color: #20409a; color: #fff; text-align: center; font-family: 'Pretendard-ExtraLight',sans-serif;}
.about_cont .ceo .profile ul li:nth-child(1) div{ position: relative; display: inline-table; font-family: 'Pretendard-Bold',sans-serif; margin-left: 8px; padding-left: 10px;}
.about_cont .ceo .profile ul li:nth-child(1) div::before{ content: ''; position: absolute; top:18px; left: 0; width:1px; height: calc(100% - 36px); background-color: rgba(255,255,255,0.5);}
.about_cont .ceo .profile ul li:nth-child(2){ padding: 15px 0 0 0;}
.about_cont .ceo .profile ul li:nth-child(2) dl{ position: relative; margin-top: 15px; font-size: 15px; padding: 0 0 0 15px;}
.about_cont .ceo .profile ul li:nth-child(2) dl::before{ content:''; position: absolute; width:5px; height: 5px; left: 0; top:calc(50% - 2px); border-radius: 5px; background-color: #ccc;}

.about_cont .history{ position: relative; width:1200px; margin: 0 auto 80px; background-color: #ffffff;}
.about_cont .history .line{ position: absolute; top:0; left: 50%; width:1px; height: 100%; background-color: #e1e1e1;}
.about_cont .history ul{ position: relative; margin:0 0 0 30px; padding: 10px 0 15px 0; display: inline-table; width:calc(100% - 60px); background-color: #ffffff; border-radius: 15px;}
.about_cont .history ul .one{ position: absolute; top:20px; left: calc(50% - 10px); width:11px; height: 11px; border-radius: 20px; border: solid 5px #20409a; background-color: #fff; z-index: 10;}
.about_cont .history ul .year{ position: absolute; top:12px; right: calc(50% + 30px); font-size: 30px; font-family: 'Pretendard-Bold',sans-serif; color: #20409a; text-align: right; letter-spacing: -2px;}
.about_cont .history ul .list{ padding: 0 0 0 calc(50% + 30px);}
.about_cont .history ul .list dl{ position: relative; margin: 10px 0 0 0; font-size: 17px;}
.about_cont .history ul .list dl .month{ position: absolute; top:0; left: 0; color: #888; font-family: 'Pretendard-Bold',sans-serif;}
.about_cont .history ul .list dl .txt{ padding: 0 0 0 50px;}
.about_cont .history ul .list dl .txt .blue{ color: #20409a; font-family: 'Pretendard-Bold',sans-serif}
.about_cont .history ul .list dl .txt .ex{ color: #999; font-size: 14px;}
.about_cont .history ul:nth-child(even) .year{ position: absolute; top:12px; left: calc(50% + 30px); font-size: 30px; font-family: 'Pretendard-Bold',sans-serif; color: #20409a; text-align: right; letter-spacing: -2px;}
.about_cont .history ul:nth-child(even) .list{ padding: 0 0 0 30px; text-align: right; width:calc(50% - 60px)}
.about_cont .history ul:nth-child(even) .list dl .month{ position: absolute; top:0; right: 0; color: #888; font-family: 'Pretendard-Bold',sans-serif;}
.about_cont .history ul:nth-child(even) .list dl .txt{ padding: 0 50px 0 0;}
.about_cont .history ul:hover{ background-color: #f8f8f8;}

.cert_wrap{ padding: 0 0 80px 0;}
.cert_wrap .inbox{ position: relative; width:1200px; margin: 0 auto; }
.cert_wrap .inbox .cert.b01{ position:relative; margin-left: 50px; width:324px;}
.cert_wrap .inbox .cert.b02{ position:absolute; top:0; right: 50px;}
.cert_wrap .inbox .cert.b01 .txt{ position: absolute; top:50px; left: calc(100% - 15px); width:600px; color: #888; font-size: 16px; padding: 0 0 0 60px;}
.cert_wrap .inbox .cert.b01 .txt::before{content: ''; position: absolute; top:10px; left: 0; width:45px; height: 1px; background-color: #20409a;}
.cert_wrap .inbox .cert.b01 .txt ul:nth-child(1){ font-size: 22px; font-family: 'Pretendard-Bold',sans-serif; color: #20409a; padding: 0 0 5px 0;}
.cert_wrap .inbox .cert.b02 .txt{ position: absolute; bottom:50px; right: calc(100% - 15px); width:600px; color: #888; font-size: 16px; padding: 0 60px 0 0; text-align: right;}
.cert_wrap .inbox .cert.b02 .txt::before{content: ''; position: absolute; top:10px; right: 0; width:45px; height: 1px; background-color: #20409a;}
.cert_wrap .inbox .cert.b02 .txt ul:nth-child(1){ font-size: 22px; font-family: 'Pretendard-Bold',sans-serif; color: #20409a; padding: 0 0 5px 0;}

.partner_wrap{ padding: 0 0 80px 0;}
.cont.c6{ padding: 0 0 80px 0;}

@media(max-width:720px) {
	.about_tab{ width:calc(100% - 30px); margin: 20px auto 0;}
	.about_tab ul{ float: left; width:calc(33.3333333% - 6px); margin-left: 9px; margin-bottom: 10px; height: 40px; line-height: 40px; text-align: center; background-color: #f5f5f5; color: #7d869e; font-size: 15px; letter-spacing: -1px; cursor: pointer;}
	.about_tab ul:nth-child(3n+1){ margin-left: 0;}

	.about_cont .cont.c1{ width:100%; margin: 0 auto; padding: 0 0 50px 0;}
	.about_cont .vision_box{ position: relative; height: auto; background: url(../images/bg_about_vision.png) center center; background-size: cover;}
	.about_cont .vision_box .txt{ padding: 50px 0 50px 0; text-align: center;}
	.about_cont .vision_box .txt .txt1{ font-size: 40px; font-family: 'Pretendard-Bold',sans-serif; color: #20409a; letter-spacing: -2px;}
	.about_cont .vision_box .txt .txt2{ font-size: 16px; color: #888; padding: 20px 0 0 10px;}
	.about_cont .vision_box .txt .txt2 span{ color: #000; font-family: 'Pretendard-Bold',sans-serif;}
	.about_cont .vision_box .info_box{ position: relative; top:0; right: 0; width:100%;}
	.about_cont .vision_box .info_box .tit{ font-size: 20px; font-family: 'Pretendard-Bold',sans-serif; padding:  0 0 15px 0; text-align: center;}
	.about_cont .vision_box .info_box .box{ border-top: solid 1px #e1e1e1;}
	.about_cont .vision_box .info_box .box ul{ float: left; width:50%; border-bottom: solid 1px #e1e1e1; display: inline-table; font-size: 13px;}
	.about_cont .vision_box .info_box .box ul li{ display: table-cell; padding:20px 5px 20px 5px;}
	.about_cont .vision_box .info_box .box ul li:nth-child(1){ width:60px; background-color: #f5f5f5; text-align: center;}
	.about_cont .vision_box .info_box .box ul li:nth-child(2){ text-align: left; color: #888; padding-left: 10px;}
	.about_cont .vision_box .info_box .box ul:nth-child(5){ width:100%;}

	.about_cont .cont.c2{ width:100%; margin: 0 auto; padding: 0 0 0 0;}
	.about_cont .ceo{ position: relative; min-height: 600px; padding-bottom: 100px; background: url(../images/bg_about_ceo.png) no-repeat bottom center;}
	.about_cont .ceo .txt{ padding: 0 15px 0 15px; font-size: 14px; line-height: 18px;}
	.about_cont .ceo .txt .tit{font-size: 18px; font-family: 'Pretendard-Bold',sans-serif; padding: 0 0 30px 0;}
	.about_cont .ceo .txt .name{ padding: 30px 0 0 0; font-family: 'Pretendard-Bold',sans-serif; text-align: right;}
	.about_cont .ceo .txt .name span{ font-family: 'Grandpa_sharing', sans-serif; margin-left: 15px; font-size: 30px; letter-spacing: 5px;}
	.about_cont .ceo .profile{ position:relative; top:0; right: 0; width:220px; margin: 50px auto 0;}
	.about_cont .ceo .profile ul li:nth-child(1){ width:220px; height: 50px; line-height: 50px; border-radius: 50px; font-size: 16px; background-color: #20409a; color: #fff; text-align: center; font-family: 'Pretendard-ExtraLight',sans-serif;}
	.about_cont .ceo .profile ul li:nth-child(1) div{ position: relative; display: inline-table; font-family: 'Pretendard-Bold',sans-serif; margin-left: 8px; padding-left: 10px;}
	.about_cont .ceo .profile ul li:nth-child(1) div::before{ content: ''; position: absolute; top:18px; left: 0; width:1px; height: calc(100% - 36px); background-color: rgba(255,255,255,0.5);}
	.about_cont .ceo .profile ul li:nth-child(2){ padding: 15px 0 0 0;}
	.about_cont .ceo .profile ul li:nth-child(2) dl{ position: relative; margin-top: 15px; font-size: 15px; padding: 0 0 0 15px;}
	.about_cont .ceo .profile ul li:nth-child(2) dl::before{ content:''; position: absolute; width:5px; height: 5px; left: 0; top:calc(50% - 2px); border-radius: 5px; background-color: #ccc;}

	.about_cont .history{ position: relative; width:100%; margin: 0 auto 50px; background-color: #ffffff;}
	.about_cont .history .line{ position: absolute; top:0; left: 22px; width:1px; height: 100%; background-color: #e1e1e1;}
	.about_cont .history ul{ position: relative; margin:0 0 0 0; padding: 10px 0 15px 0; display: inline-table; width:calc(100%); background-color: #ffffff; border-radius: 15px;}
	.about_cont .history ul .one{ position: absolute; top:10px; left: 12px; width:11px; height: 11px; border-radius: 20px; border: solid 5px #20409a; background-color: #fff; z-index: 10;}
	.about_cont .history ul .year{ position: absolute; top:7px; right: auto; left: 40px; font-size: 22px; font-family: 'Pretendard-Bold',sans-serif; color: #20409a; text-align: right; letter-spacing: -1px;}
	.about_cont .history ul .list{ padding: 20px 0 0 40px;}
	.about_cont .history ul .list dl{ position: relative; margin: 10px 0 0 0; font-size: 14px;}
	.about_cont .history ul .list dl .month{ position: absolute; top:0; left: 0; color: #888; font-family: 'Pretendard-Bold',sans-serif;}
	.about_cont .history ul .list dl .txt{ padding: 0 0 0 40px;}
	.about_cont .history ul .list dl .txt .blue{ color: #20409a; font-family: 'Pretendard-Bold',sans-serif}
	.about_cont .history ul .list dl .txt .ex{ color: #999; font-size: 14px;}
	.about_cont .history ul:nth-child(even) .year{ position: absolute; top:7px; right: auto; left: 40px; font-size: 22px; font-family: 'Pretendard-Bold',sans-serif; color: #20409a; text-align: right; letter-spacing: -1px;}
	.about_cont .history ul:nth-child(even) .list{ padding: 20px 0 0 40px; text-align: left; width:auto;}
	.about_cont .history ul:nth-child(even) .list dl .month{ position: absolute; top:0; left: 0; color: #888; font-family: 'Pretendard-Bold',sans-serif;}
	.about_cont .history ul:nth-child(even) .list dl .txt{ padding: 0 0 0 40px;}
	.about_cont .history ul:hover{ background-color: #f8f8f8;}

	.cert_wrap{ padding: 0 0 50px 0;}
	.cert_wrap .inbox{ position: relative; width:calc(100% - 30px); margin: 0 auto; }
	.cert_wrap .inbox .cert.b01{ position:relative; margin-left: 0; width:calc(50% - 8px);}
	.cert_wrap .inbox .cert.b02{ position:absolute; top:0; right: 0; width:calc(50% - 8px);}
	.cert_wrap .inbox .cert img{ width:100%;}
	.cert_wrap .inbox .cert.b01 .txt{ position: relative; top:0; left: 0; width:auto; color: #888; font-size: 13px; padding: 10px 0 0 0; margin-top: 10px; text-align: center;}
	.cert_wrap .inbox .cert.b01 .txt::before{ display: none;}
	.cert_wrap .inbox .cert.b01 .txt ul:nth-child(1){ font-size: 16px; font-family: 'Pretendard-Bold',sans-serif; color: #20409a; padding: 0 0 5px 0;}
	.cert_wrap .inbox .cert.b02 .txt{ position: relative; bottom:0; right: 0; width:auto; color: #888; font-size: 13px; padding: 10px 0 0 0; margin-top: 10px; text-align: center;}
	.cert_wrap .inbox .cert.b02 .txt::before{ display: none;}
	.cert_wrap .inbox .cert.b02 .txt ul:nth-child(1){ font-size: 16px; font-family: 'Pretendard-Bold',sans-serif; color: #20409a; padding: 0 0 5px 0;}

	.partner_wrap{ padding: 0 0 50px 0;}
	.cont.c6{ padding: 0 0 50px 0;}
}

.business_blank{ height: 80px;}
.business_tab{ width:1200px; margin:0 auto;}
.business_tab ul{ float: left; width:calc(25% - 7.5px); margin-left: 10px; margin-bottom: 10px; height: 50px; line-height: 50px; text-align: center; background-color: #f5f5f5; color: #7d869e; font-size: 16px; letter-spacing: -1px; cursor: pointer;}
.business_tab ul:nth-child(1){ margin-left: 0;}
.business_tab ul:hover{ background-color: #20409a; color: #fff;}
.business_tab ul.on{ background-color: #20409a; color: #fff;}
.business{ width:1200px; margin: 0 auto; padding: 0 0 80px 0;}
.business .cont .txt{ font-size: 18px; line-height: 22px; text-align: center; padding: 0 0 50px 0; color: #888;}
.business .cont .txt div{ display: inline-table; margin-left: 6px;}
.business .cont .img{ margin: 30px 0 0 0;}
.business .cont .img .mo{ display: none;}

.temp_pre{ width:1200px; margin: 0 auto 80px; height: 400px; line-height: 400px; border-radius: 15px; background-color: #f9f9f9; font-size: 20px; color: #ccc; text-align: center;}

@media(max-width:720px) {
	.business_blank{ height: 70px;}
	.business_tab{ width:calc(100% - 30px); margin: 20px auto 0;}
	.business_tab ul{ float: left; width:calc(50% - 5px); margin-left: 10px; margin-bottom: 10px; height: 40px; line-height: 40px; text-align: center; background-color: #f5f5f5; color: #7d869e; font-size: 15px; letter-spacing: -1px; cursor: pointer;}
	.business_tab ul:nth-child(2n+1){ margin-left: 0;}
	.business{ width:calc(100% - 15px); margin: 0 auto; padding: 0 0 50px 0;}
	.business .cont .txt{ font-size: 16px; line-height: 18px; text-align: center; padding: 0 0 30px 0; color: #888;}
	.business .cont .txt div{ display: inline-table; margin-left: 6px;}
	.business .cont .img .pc{ display: none;}
	.business .cont .img .mo{ display: block;}
	.business .cont .img .mo img{ width:100%;}

	.temp_pre{ width:calc(100% - 30px); margin: 0 auto 50px; height: 400px; line-height: 400px; border-radius: 10px; background-color: #f9f9f9; font-size: 18px; color: #ccc; text-align: center;}
}

.subTab{ display: flex; overflow-x: auto; border-bottom: solid 1px #e1e1e1;}
.subTab::-webkit-scrollbar {
	display: none; /* 웹킷 기반 브라우저에서 스크롤바 숨기기 */
}
.subTab ul{ position: relative; flex-grow: 1; height: 80px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #888; cursor: pointer; flex-shrink: 0; padding: 0 16px 0 16px;}
.subTab ul.on::before{ content: ''; position: absolute; bottom: -1px; left: 0; width:100%; height: 3px; background-color: #000;}
.subTab ul.on{ color: #000; font-weight: 700;}
.cont_title{ border-bottom: solid 1px #e1e1e1; font-size: 36px; font-weight: 700; color: #000; line-height: 60px; padding: 80px 0 20px 0;}
.colspanBox{}
.colspanBox ul{ display: flex; margin: 40px 0 0 0;}
.colspanBox ul li:nth-child(1){ width:280px; flex-shrink: 0; font-size: 20px; font-weight: 600;}
.colspanBox ul li:nth-child(2){ font-size: 18px; line-height: 24px;}
.colspanBox ul li:nth-child(2) dl{ position: relative; margin-bottom: 6px; padding: 0 0 0 16px; color: #222;}
.colspanBox ul li:nth-child(2) dl::before{ content: ''; position: absolute; top:8px; left: 0; width:6px; height: 6px; border-radius: 6px; background-color: #222;}

@media(max-width:720px) {
	.subTab ul{ position: relative; flex-grow: 1; height: 50px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #888; cursor: pointer; flex-shrink: 0; padding: 0 16px 0 16px;}
	.cont_title{ border-bottom: solid 1px #e1e1e1; font-size: 24px; font-weight: 700; color: #000; line-height: 36px; padding: 40px 0 10px 0;}
	.colspanBox ul{ display: block; margin: 24px 0 0 0;}
	.colspanBox ul li:nth-child(1){ width:100%; flex-shrink: 0; font-size: 18px; font-weight: 600;}
	.colspanBox ul li:nth-child(2){ font-size: 14px; line-height: 24px; padding: 8px 0 0 0;}
	.colspanBox ul li:nth-child(2) dl{ position: relative; margin-bottom: 6px; padding: 0 0 0 12px; color: #222;}
	.colspanBox ul li:nth-child(2) dl::before{ content: ''; position: absolute; top:10px; left: 0; width:4px; height: 4px; border-radius: 4px; background-color: #222;}
}

/*cha*/
.colspanBox .content {
	color: #222;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
}

.colspanBox .content2 {
	display: flex;
	flex-direction: column;
	gap: 40px;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.4px;
	margin-top: 40px;
	margin-bottom: 100px;
}

@media screen and (max-width: 720px) {
	.colspanBox .content {
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
	}
	.colspanBox .content2 {
		font-size: 18px;
		font-weight: 600;
		line-height: 22px;
		letter-spacing: -0.36px;
		margin-bottom: 80px;
	}
	.colspanBox .img .mo {
		display: block;
	}
	.colspanBox .img .mo img {
		width: 100%;
	}
	.colspanBox .img .mo.scroll-img {
		overflow-x: auto;
		white-space: nowrap;
		width: 100%;
	}
	.colspanBox .img .mo.scroll-img img {
		width: auto;
		height: 279px;
		display: inline-block;
	}
	.colspanBox .img .mo.scroll-img::-webkit-scrollbar {
		display: none;
	}
	.img-line {
		padding-bottom: 30px;
		border-bottom: solid 1px #DDD;
	}
}

/*lmj*/
@media screen and (min-width: 720px) {
	.soft .mo {
		display: none;
	}
}
.textGabia{text-align: left;
	margin-top: 40px;
	margin-bottom: 40px;
	color : #222222;
	font-size: 18px;  }
@media(max-width:720px) {
	.soft .pc {
		display: none;
	}
}