@charset "utf-8";

body, html {}

body{overflow-y:none;}

header	{z-index:99;position:fixed;top:0;left:0;right:0;width:100%;height:80px;border-bottom:1px solid #ddd;background:#fff;}
header .header{position:relative;width:100%;height:80px;margin:0 auto;max-width:1330px;}
header .logo a{z-index:3;font-size:0;position:absolute;top:5px;left:0px;width:167px;height:55px;background:url('../images/learning/common/logo.png') no-repeat center/contain;transition:all 0.3s ease-in-out}
header .top_util	{display:flex;z-index:3;font-size:0;position:absolute;top:10px;right:0px;font-family:'NanumGothic';font-weight:600;font-size:14px;color:#004eff;}
header .top_util a	{display:inline-block;padding:0 20px;line-height:46px;background:#004eff;border-radius:23px;color:#fff;}
header .top_util a ~a	{margin-left:6px;}
header .top_util a.my	{background:#fff;border:2px solid #004eff;line-height:42px;color:#004eff;}
header .top_util p	{margin-right:30px;position:relative;padding-left:55px;}
header .top_util p span	{position:relative;display:block;font-family:'NanumSquare';font-size:20px;color:#111;}
header .top_util p span:before	{content:'';position:absolute;left:-55px;top:0;width:46px;height:46px;background:url('../images/learning/common/ico_my.png') no-repeat;}
header .allMenu	{display:none;}

.gnbMenu{width:calc(100% - 240px);margin-left:240px;font-size:0;text-align:center;margin-top:7px;}
.gnbMenu .gnb{display:flex;}
.gnbMenu .gnb > li{font-size:25px;font-family:'NanumSquare';color:#666;font-weight:700;line-height:70px;}
.gnbMenu .gnb > li > a{display:block;transition:all 0.2s ease-in-out;padding:0 20px;}
.gnbMenu .gnb > li > a.active, .gnbMenu .gnb > li > a:hover{color:#004eff;}
.use_mobile	{display:none;}

header.fixed{position:fixed;height:80px;}

/* footer */
footer	{width:100%;background:#002271;padding-top:90px;}
footer .footer	{position:relative;max-width:1330px;margin:0 auto;display:flex;justify-content:space-between;border-top:1px solid #1a397f;padding:40px 0 90px 0;}
footer .footer:before	{content:'';position:absolute;left:0;top:-70px;width:166px;height:56px;background:url('../images/learning/common/logo_b.png') no-repeat 0 50%;}

footer .utilWrap	{display:flex;}
footer .utilWrap li ~ li	{padding-left:15px;}
footer .utilWrap li a	{display:block;font-size:15px;font-family:'NanumGothic';color:#fff;font-weight:400;}
footer .utilWrap li a.type1	{color:#fde200;}
footer .add	{margin-top:30px;display:block;font-weight:400;font-family:'NanumGothic';font-size:14px;color:#fff;line-height:30px;opacity:0.5;}
footer address	{margin-top:50px;display:block;font-weight:400;font-family:'NanumGothic';font-size:14px;color:#888;text-align:right;}
.footer > div > a	{display:block;font-weight:400;font-family:'NanumGothic';font-size:15px;color:#fff;text-align:right;line-height:30px;}
.footer > div > a.call {color:#aaa;}
.footer > div > a.call span {color:#fff;}
.footer > div > a span{position:relative;padding-left:25px;}
.footer > div > a span:before{content:'';position:absolute;left:0;top:-3px;width:20px;height:24px;}
.footer > div > a.mail span:before{background:url('../images/learning/common/ico_mail.png') no-repeat 50% 50%;}
.footer > div > a.call span:before{background:url('../images/learning/common/ico_call.png') no-repeat 50% 50%;}

@media (max-width: 1330px) {
	footer .footer	{max-width:100%;padding-left:20px;padding-right:20px;}
	header .logo a{left:20px;}
	header .top_util	{right:20px;}
	header .top_util p	{margin-right:20px;padding-left:50px;}
	header .top_util p span:before	{left:-50px;}
	header .header{max-width:100%;}
	.gnbMenu{max-width:calc(100% - 210px);margin-left:210px;}
	.gnbMenu .gnb > li{font-size:25px;}

}
/* for mobile */
@media (max-width: 900px) {
	header	{height:60px;}
	header.fixed .use_mobile .btn_menu:before,header.fixed .btn_menu:after{background:#111}
	.use_mobile{display:block;position:relative;z-index:999;}
	.use_mobile .btn_menu{display:block;position:absolute;top:20px;right:20px;width:24px;height:20px;font-size:0;}
	.use_mobile .btn_menu span,.use_mobile .btn_menu:before,.btn_menu:after{content:"";position:absolute;top:0;right:0;width:24px;height:2px;background:#111;border-radius:2px;transition:all 0.3s ease-in-out}
	.use_mobile .btn_menu:before	{width:18px;}
	.use_mobile .btn_menu:after{top:auto;bottom:0;width:15px;}
	.use_mobile .btn_menu span{top:0;bottom:0;margin:auto}
	.allMenu_open .use_mobile .btn_menu:before{background:#111;transform:rotate(45deg);width:24px;top:10px;}
	.allMenu_open .use_mobile .btn_menu:after{background:#111;transform:rotate(-45deg);width:24px;bottom:8px;}
	.allMenu_open .use_mobile .btn_menu span{display:none}
	.allMenu_open .header .box{right:0}
	.allMenu_open.fade:after{display:block;content:"";z-index:4;position:absolute;top:0;left:0;width:100%;height:100vh;background:rgba(00, 00, 0, .8) ! important;}
	header .logo a{top:0;width:120px;height:50px;background-size:100% auto;}
	header .top_util	{position:relative;top:0;right:0;height:60px;padding:0 50px 0 20px;align-items:center;justify-content:space-between;}
	header .top_util p 	{padding-left:40px;min-height:35px;margin-right:0;font-size:13px;font-weight:600;}
	header .top_util p span	{font-size:14px;font-family:'NanumGothic';letter-spacing:-1px;}
	header .top_util p span:before	{left:-40px;width:35px;height:35px;background-size:100% auto;}
	header .top_util a	{font-size:13px;line-height:35px;padding:0 10px;}
	header .top_util a.my	{line-height:31px;}
	header .top_util a ~a	{margin-left:2px;}
	.header .box{z-index:9;position:absolute;top:0;right:-900px;width:100%;height:100vh;background:#fff;transition:all 0.2s ease}
	.gnbMenu{padding:0;text-align:left;height:calc(100vh - 60px);overflow-y:auto;background:#004eff;width:100%;max-width:100%;margin-left:0;margin-top:0;}
	.gnbMenu .gnb	{display:block;padding-top:20px;}
	.gnbMenu .gnb > li	{text-align:center;line-height:60px;height:60px;padding:10px 0;}
	.gnbMenu .gnb > li > a	{color:#fff;display:inline-block;line-height:40px;padding:0 5px;}
	.gnbMenu .gnb > li > a.active	{color:#fce100;border-bottom:2px solid #fce100;}
	/* footer */
	footer	{padding:80px 20px 0 20px;}
	footer .footer	{border-top:1px solid #1a397f;padding:15px 0 50px 0;}
	footer .footer:before	{height:40px;background-size:auto 100%;top:-60px;}
	footer .footer	{display:block;}
	footer .add	{margin-bottom:20px;font-size:13px;line-height:25px;}
	footer .utilWrap li ~ li	{padding-left:10px;}
	footer .utilWrap li a	{font-size:13px;font-family:'NanumGothic';letter-spacing:-1px;}
	.footer > div > a	{text-align:left;font-size:14px;font-family:'NanumGothic';}
	.footer > div > a span	{padding-left:25px;}
	.footer > div > a.call {font-size:14px;font-family:'NanumGothic';}
	.footer > div > a span:before{width:18px;height:20px;background-size: auto 100% !important;}
	.footer > div > a.mail span:before{top:0;background-size: 100% auto !important}
	footer address	{text-align:left;font-size:13px;margin-top:20px;}

}

@media (max-width: 640px) {
	header .logo a{top:5px;width:100px;}
	.use_mobile .btn_menu	{top:20px;}
}
@media (max-width: 360px) {
	.use_mobile .btn_menu{right:10px;}
	header .logo a{left:10px;}
	header .top_util	{padding:0 38px 0 10px;}
	header .top_util p 	{padding-left:0px;}
	header .top_util p span:before	{display:none;}
	.gnbMenu .gnb > li	{line-height:60px;height:60px;}
	/* footer */
	footer	{padding:80px 10px 0 10px;}
	footer .utilWrap li ~ li	{padding-left:5px;}
	footer .utilWrap li a	{font-size:10px;letter-spacing:-1px;}
	footer .add	{font-size:12px;line-height:20px;}
	.footer > div > a	{font-size:12px;}
	.footer > div > a.call {font-size:11px;}
}
@media (max-width: 280px) {
	header .top_util p	{font-size:12px;letter-spacing:-1.5px;}
	header .top_util a	{font-size:10px;}
}