@charset "utf-8";

/* All */
header, footer, nav, section, article, aside, figure, figcaption, embed, iframe {display:block;}
body, table, input, textarea, select, button {font-size:12px;}
a img {border:0;}

/* reset style */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, font, img, ins, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead, tr, th, td
{margin:0; padding:0; border:0; font-style:normal; line-height:1;}

*, *:before, *:after {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
* {word-wrap:break-word; word-break:break-all;}

html, body {height:100%;}
/* html {overflow-y:hidden;} */
body {margin:0; padding:0; scroll 0 0 transparent; font-family:'RobotoR','NotoKrR',sans-serif; font-size:12px; color:#606060;}

table				{border-collapse:collapse; border:0; padding:0;}
td,th				{vertical-align:middle; font-size:12px; font-family:'RobotoR','NotoKrR',sans-serif;}
dd,dt,ol,dl,ul,li	{list-style:none; margin:0; padding:0;}
button, label		{padding:0; border:none; vertical-align:middle; font-family:'RobotoM','NotoKrM',sans-serif; outline:none; cursor:pointer;}
legend,caption		{display:none; height:0; width:0; font-size:0;}
blockquote, q		{quotes:none;}
ins					{text-decoration:none;}
del					{text-decoration:line-through;}
hr					{display:block; -webkit-margin-before:0.5em; -webkit-margin-after:0.5em; -webkit-margin-start:auto; -webkit-margin-end:auto;}
img, fieldset		{border:0 none; vertical-align:middle;}
img					{max-width:100%;}
a					{outline:none; select-dummy:expression(this.hideFocus=true); cursor:pointer;}
select				{display:inline-block; vertical-align:middle; margin:0; padding:0; width:100%; height:100%; font-family:'RobotoR','NotoKrR',sans-serif; font-size:15px; color:#333; border:none; background-color:#fff;}
textarea			{display:block; margin:0; padding:8px 0; width:100%; font-family:'RobotoM','NotoKrM',sans-serif; font-size:15px; color:#000; border:none; resize:none;}
input, textarea		{outline:none;}

input[type="text"], input[type="tel"], input[type="password"], input[type="email"], input[type="number"] {
	padding:0;
	width:100%;
	height:40px;
	font-family:'RobotoM','NotoKrM',sans-serif;
	font-size:15px;
	color:#000;
	border:none;
	background-color:#fff;
	vertical-align:middle;
}
input[type="radio"], input[type="checkbox"] {
	vertical-align:middle;
	margin:0;
	padding:0;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}


input::-webkit-input-placeholder	{font-family:'RobotoR','NotoKrR',sans-serif; color:#ddd;}
input:-ms-input-placeholder			{font-family:'RobotoR','NotoKrR',sans-serif; color:#ddd;}
input::-moz-placeholder				{font-family:'RobotoR','NotoKrR',sans-serif; color:#ddd;}
input:-moz-placeholder				{font-family:'RobotoR','NotoKrR',sans-serif; color:#ddd;}

textarea::-webkit-input-placeholder	{font-family:'RobotoR','NotoKrR',sans-serif; color:#ddd;}
textarea:-ms-input-placeholder		{font-family:'RobotoR','NotoKrR',sans-serif; color:#ddd;}
textarea::-moz-placeholder			{font-family:'RobotoR','NotoKrR',sans-serif; color:#ddd;}
textarea:-moz-placeholder			{font-family:'RobotoR','NotoKrR',sans-serif; color:#ddd;}


input								{-webkit-appearance:none; appearance:none;}
input,textarea, button, select		{border-radius:0; -webkit-border-radius:0;}

input[readonly]						{background-color:#f0f0f0;}

/* 스크롤바 */ /* Custom scrollbars are not supported in Firefox or in Edge, prior version 79. */
/* ::-webkit-scrollbar {width: 10px; height:10px;}		/* width, height */
/* ::-webkit-scrollbar {width: 8px; height:8px;}		/* width, height */
/* ::-webkit-scrollbar-track {background: #fafafa;}		/* Track */
/* ::-webkit-scrollbar-thumb {background: #d3d6de; border-radius: 15px;}		/* Handle */
/* ::-webkit-scrollbar-thumb {background: #e5e5e5; border-radius: 15px;}		/* Handle */
/* ::-webkit-scrollbar-thumb:hover {background: #9b9da3;}			/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {background: #d3d6de;}		/* Handle on hover */


/* Link style */
a:link					{color:#000; text-decoration:none;}
a:visited				{color:#000; text-decoration:none;}
a:hover					{color:#000; text-decoration:none;}
a:active				{color:#000; text-decoration:none;}
a:focus					{color:#000; text-decoration:none;}
a.self					{text-decoration:none;}


/* etc define */
.underline {text-decoration:underline;}
.lineThrough {text-decoration:line-through; color:#8a8a8a;}
.font-default {color:#333; font-weight:normal;}
.bold {font-weight:bold;}
.line {border-bottom:1px solid #d3d3d3;}
.floatLeft {display:inline; float:left;}
.floatRight {display:inline; float:right;}
.clearBoth {clear:both;}
.alignMiddle {vertical-align:middle !important;}
.alignTop {vertical-align:top !important;}
.alignBottom {vertical-align:bottom !important;}
.alignLeft {text-align:left !important;}
.alignCenter {text-align:center !important;}
.alignRight {text-align:right !important;}
.borderTop {border-top:1px solid #eee;}
.borderBottom {border-bottom:1px solid #dfdfdf;}
.borderRight {border-right:1px solid #e8e8e8;}
.txtspace {letter-spacing:-1px;}
.displayInline-block {display:inline-block;}
.displayBlock {display:block;}
.displayNone {display:None !important;}
.borderNone {border:none !important;}
.overflowHidden {overflow:hidden;}


/* Background Color */
.background-gray									{background-color:#f2f2f2;}


/* Selectbox Style */
.select												{position:relative; padding-right:30px; width:100%; height:40px; background-color:#fff; cursor:pointer; transition:all .3s;}
.select:before,
.select:after										{content:""; position:absolute; top:50%; right:15px; margin-top:-1px; width:2px; height:8px; background-color:#222;}
.select:before										{margin-right:-1px; transform:rotate(-45deg) translateY(-50%);}
.select:after										{transform:rotate(45deg) translateY(-50%);}
.select label										{display:block; font-family:'RobotoM','NotoKrM',sans-serif; font-size:15px; color:#000; line-height:40px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.select ul											{position:absolute; top:100%; left:0; z-index:10; width:100%; max-height:202px; overflow-y:auto; border:1px solid #eee; background-color:#fff; border-radius:2px; box-shadow:0 0 20px 0 rgba(0,0,0,.2);}
.select ul.hide										{display:none;}
.select ul.show										{display:block;}
.select ul li										{display:flex; align-items:center; padding-left:10px; height:40px; font-family:'RobotoM','NotoKrM',sans-serif; font-size:14px; color:#151515; cursor:pointer;}
.select ul li:hover									{background-color:#eee;}
.select.txt-right									{display:flex; justify-content:flex-end;}
.select.calendar									{border-bottom:1px solid #e5e5e5; margin-bottom:10px;}
.select.calendar:before						{content:none;}					
.select.calendar:after							{width:20px; height:20px; top:50%; right:0; transform:translateY(-50%); background:transparent url('/web/images/icon/i_calendar_md.png') no-repeat center; background-size:100% auto;}
.select.off label									{color:#ccc;}
.select.off:before,
.select.off:after										{background-color:#ccc;}

.select_box												{padding-right:0;}
.select_box > label								{position:absolute; top:0; left:0;}
.select_box > .selectBox					{width:100%; height:40px; padding-left:5px; opacity:0; }


/* Checkbox Image */
.wrap-checkbox										{position:relative;}
.wrap-checkbox > input								{position:absolute; top:50%; left:0; z-index:0; opacity:0; width:20px; height:20px; transform:translateY(-50%);}
.wrap-checkbox > label								{position:relative; padding-left:25px; font-family:'NotoKrM'; color:#999;}
.wrap-checkbox > label:before						{content:""; position:absolute; top:50%; left:0; z-index:1; width:20px; height:20px; background:url('/web/images/icon/i_checkbox.png') no-repeat; transform:translateY(-50%);}
.wrap-checkbox > input:checked+label:before			{background-position:left bottom;}
.wrap-checkbox > input:checked+label				{color:#000;}
.wrap-checkbox.maximum								{width:30px; height:30px;}
.wrap-checkbox.maximum > input						{width:100%; height:100%;}
.wrap-checkbox.maximum > label						{display:block; padding-left:0; width:100%; height:100%;}
.wrap-checkbox.maximum > label:before				{width:30px; height:30px; background-image:url('/web/images/icon/i_checkbox_max.png');}
.wrap-checkbox.noLabelTxt							{width:20px; margin:0 auto;}
.wrap-checkbox.noLabelTxt > label				{padding-left:20px;}
.wrap-checkbox.maximum.noLabelTxt							{width:30px; margin:0 auto;}
.wrap-checkbox.maximum.noLabelTxt > label				{padding-left:30px;}


/* Radio Image */
.wrap-radio											{position:relative;}
.wrap-radio > input									{position:absolute; top:50%; left:0; z-index:0; opacity:0; width:20px; height:20px; transform:translateY(-50%);}
.wrap-radio > label									{position:relative; padding-left:25px; font-family:'NotoKrM'; color:#999;}
.wrap-radio > label:before							{content:""; position:absolute; top:50%; left:0; z-index:1; width:20px; height:20px; background:url('/web/images/icon/i_radio.png') no-repeat; transform:translateY(-50%);}
.wrap-radio > input:checked+label:before			{background-position:left bottom;}
.wrap-radio > input:checked+label					{color:#000;}
.wrap-radio.maximum									{width:30px; height:30px;}
.wrap-radio.maximum > input							{width:100%; height:100%;}
.wrap-radio.maximum > label							{display:block; padding-left:0; width:100%; height:100%;}
.wrap-radio.maximum > label:before					{width:30px; height:30px; background-image:url('/web/images/icon/i_radio_max.png');}

.wrap-checkbox.isBtnType > label,
.wrap-radio.isBtnType > label									{background-color:#f1f2f5; padding:9px 16px; font-size:12px; border-radius:6px; white-space:nowrap;}
.wrap-checkbox.isBtnType > label:before,
.wrap-radio.isBtnType > label:before					{display:none;}
.wrap-checkbox.isBtnType > input:checked+label,
.wrap-radio.isBtnType > input:checked+label			{background-color:#039be6; color:#fff;}	


/* Layout Selector */
.wrap												{width:100%; /* min-width:1920px; height:100%; */}
.lessonbook:before									{content:""; position:absolute; top:25px; left:25px; z-index:1; width:130px; height:18px; background:url('/web/images/icon/lb_logo.png') no-repeat;}
.container											{flex:1 1 auto; display:flex; flex-direction:column;}
.contents											{flex:1 1 auto; display:flex;}
.list-wrap											{flex:1 1 0; overflow-x:hidden; overflow-y:auto;}


/* Footer */
.footerFixed										{position:fixed; bottom:0; left:0; right:0; z-index:1; display:flex; flex-direction:column;}
footer												{flex:0 0 40px; display:flex; justify-content:center; align-items:center; color:#bbb; border-top:1px solid #e5e5e5;}


/* Section */
section												{/* display:flex; flex-direction:column; */}
.variable											{position:relative; flex:1 1 auto; min-width:900px; overflow:hidden;}
.invariable											{display:none; flex:0 0 400px; border-width:0 0 0 1px; border-style:solid; border-color:#e5e5e5;}
.invariable.on										{display:flex;}


/* Header */
header												{position:relative; padding:0 80px; height:85px; background-color:#004098; z-index:1000;}
header .inner-header						{display:flex; align-items:center; justify-content:space-between; height:85px;}
header .title										{width:135px; height:32px; /* background:url('../../images/logo/top_logo.png') no-repeat center; background-size:100% auto; */ transition:all .2s; display:flex; align-items:center;}
header .main-menu									{display:flex; flex-wrap:nowrap; margin-left:auto;}
header .main-menu > button					{font-family:"NotoKrM"; background-color:transparent; font-size:20px; color:#fff; height:40px; width:120px;}					
header .main-menu > button > span								{position:relative; transition:all .2s; white-space:nowrap;}
header .main-menu > button.on > span:before					{content:""; position:absolute; bottom:-1px; width:100%; height:2px; background-color:#fff;}
header .main-menu > button + button						{margin-left:10%;}

header .hambugerBtn					{display:none; padding:20px; margin-right:-20px; cursor:pointer; margin-left:auto;}
header .hambugerBtn > a			{display:block; width:18px; height:16px; border-width:2px 0 2px 0; border-style:solid; border-color:#fff; position:relative; text-indent:-9999px;}
header .hambugerBtn > a:after					{content:""; position:absolute; left:0; top:50%; margin-top:-1px; width:100%; height:2px; background-color:#fff;}
header .hambugerBtn.on > a				{border-color:transparent;}
header .hambugerBtn.on > a:before,
header .hambugerBtn.on > a:after					{content:""; position:absolute; top:50%; left:50%; height:2px; width:22px; background-color:#fff;}
header .hambugerBtn.on > a:before				{transform:translate(-50%, -50%) rotate(45deg);}
header .hambugerBtn.on > a:after				{transform:translate(-50%, -50%) rotate(-45deg); margin-top:inherit;}


/* ful-navi */
.ful-navi							{position:fixed; top:63px; left:0; width:100%; height:calc(100% - 63px); background-color:#151B28; display:none; z-index:999;}
.ful-navi ul					{padding:20px 30px;}
.ful-navi ul li					{}
.ful-navi ul li > a			{color:#fff; font-size:26px; display:block; padding:20px 0;}


/* 메인 */
.main-banner									{background-color:#004098; padding:0;}
.main-banner .inner-main-banner					{display:flex; justify-content:space-between;}
.main-banner .inner-main-banner > p				{flex:0 0 656px; padding-bottom:63px; position:relative;}
.main-banner .inner-main-banner > p:before					{content:""; position:absolute; top:0; right:0; width:533px; height:100%; background-color:#3971e7; z-index:0;}
.main-banner .inner-main-banner > p > img					{z-index:1; position:relative;}
.main-banner .inner-main-banner .banner-txts				{display:flex; align-items:center;}
.main-banner .inner-main-banner .banner-txts > dl						{margin-left:80px; font-size:18px; color:#B1CCFB;}
.main-banner .inner-main-banner .banner-txts > dl dt				{color:#fff; font-family:"NotoKrB"; font-size:48px; line-height:1.4; transition:all .2s;}
.main-banner .inner-main-banner .banner-txts > dl dd				{margin:30px 0;  transition:all .2s;}
.main-banner .inner-main-banner .banner-txts > dl dd:first-of-type					{line-height:1.6;}
.main-banner .inner-main-banner .banner-txts > dl dd > p			{width:316px; margin-top:80px;}
.main-banner .inner-main-banner .banner-txts > dl dd.downloadBtn						{margin-top:60px;}
.main-banner .inner-main-banner .banner-txts > dl dd.downloadBtn > em				{color:#fff; font-size:14px; margin-bottom:30px; display:block;}
.main-banner .inner-main-banner .banner-txts > dl dd.downloadBtn a					{width:136px; display:inline-block; margin-right:37px;}
.main-banner .inner-main-banner .banner-txts button				{background-color:#3971E7; width:151px; height:46px; color:#fff; font-family:"NotoKrM"; font-size:15px; border-radius:6px;}
.main-banner .inner-main-banner .banner-txts > p						{}
.main-banner .inner-main-banner .banner-txts a							{color:#fff;}
.main-banner .inner-main-banner .banner-txts a.linkArrow		{font-size:16px; position:relative; padding-inline:0 30px;}
.main-banner .inner-main-banner .banner-txts a.linkArrow:after				{content:"\279C"; position:absolute; right:0; top:50%; transform:translateY(-50%); aspect-ratio:1 / 1; width:22px; height:22px; border:1px solid rgba(255,255,255,.6); border-radius:50%; text-align:center; align-content:center; font-size:14px;}

.img375,
.img768							{display:none;}

.img375 > p:nth-child(even),
.img768 > p:nth-child(even),
.img1440 > p:nth-child(even)					{background-color:#151B28;}
.img1440 > p > img										{max-width:1440px; margin:0 auto; display:block;}
.img768 > p > img										{max-width:768px; margin:0 auto; display:block;}
.img375 > p > img										{max-width:375px; margin:0 auto; display:block;}


/*
@media screen and (max-width: 1440px) {
	.img375,
	.img768							{display:none;}
}
*/

/* @media screen and (min-width:376px) and (max-width: 768px) { */
@media screen and (min-width:769px) and (max-width: 1439px) {
	.wrap											{padding-top:63px;}
	header										{padding:0 20px; height:63px; position:fixed; top:0; left:0; width:100%;}
	header .inner-header							{height:63px;}
	header .title										{width:111px;}
	header .main-menu				{display:flex;}
	header .hambugerBtn					{display:none;}
	header .main-menu > button										{width:auto; padding:0 25px;}
	header .main-menu > button + button						{margin-left:0;}

	.main-banner .inner-main-banner					{/* flex-direction:column-reverse; justify-content:flex-end; */}
	.main-banner .inner-main-banner > *				{width:100%; flex:1 1 0;}
	.main-banner .inner-main-banner > p				{flex:1 1 0; /* padding-bottom:0; */ margin-left:60px;}
	.main-banner .inner-main-banner > p:before								{display:none;}
	.main-banner .inner-main-banner .banner-txts							{margin-top:57px; margin-bottom:39px;}
	.main-banner .inner-main-banner .banner-txts > dl					{margin-left:50px;}
	.main-banner .inner-main-banner .banner-txts > dl dt			{font-size:48px;}

	.img1440,
	.img375							{display:none;}
	.img768							{display:block;}

	.ful-navi.on							{display:block;}
}

@media screen and (width:768px) {
	.wrap											{padding-top:63px;}
	header										{padding:0 20px; height:63px; position:fixed; top:0; left:0; width:100%;}
	header .inner-header							{height:63px;}
	header .title										{width:111px;}
	header .main-menu				{display:none;}
	header .hambugerBtn					{display:block;}
	header .main-menu > button + button						{margin-left:0;}

	.main-banner .inner-main-banner					{flex-direction:column-reverse; align-items:flex-start;}
	.main-banner .inner-main-banner > p				{flex:inherit; margin-left:20%; padding-bottom:0; transition:all .2s;}
	.main-banner .inner-main-banner > p:before								{display:none;}
	.main-banner .inner-main-banner .banner-txts							{margin-top:35px; margin-bottom:18px;}
	.main-banner .inner-main-banner .banner-txts > dl					{margin:0 18px;}
	.main-banner .inner-main-banner .banner-txts > dl dt			{font-size:36px; line-height:1.3;}
	.main-banner .inner-main-banner .banner-txts > dl dd			{line-height:1.3;}

	.main-banner .inner-main-banner .banner-txts > dl dd.downloadBtn > div > a								{margin-right:23px;}
	.main-banner .inner-main-banner .banner-txts > dl dd.downloadBtn > div > a:last-child				{margin-right:0;}

	.img1440,
	.img375							{display:none;}
	.img768							{display:block;}

	.ful-navi.on							{display:block;}
}

@media screen and (min-width:376px) and (max-width: 767px) {
	.wrap											{padding-top:63px;}
	header										{padding:0 20px; height:63px; position:fixed; top:0; left:0; width:100%;}
	header .inner-header							{height:63px;}
	header .title										{width:111px;}
	header .main-menu				{display:none;}
	header .hambugerBtn					{display:block;}
	header .main-menu > button + button						{margin-left:0;}

	.main-banner .inner-main-banner					{flex-direction:column-reverse; align-items:flex-start;}
	.main-banner .inner-main-banner > p				{flex:inherit; margin-left:20%; padding-bottom:0; transition:all .2s;}
	.main-banner .inner-main-banner > p:before								{display:none;}
	.main-banner .inner-main-banner .banner-txts							{margin-top:35px; margin-bottom:18px;}
	.main-banner .inner-main-banner .banner-txts > dl					{margin:0 18px;}
	.main-banner .inner-main-banner .banner-txts > dl dt			{font-size:36px; line-height:1.3;}
	.main-banner .inner-main-banner .banner-txts > dl dd			{line-height:1.3;}
	/* .main-banner .inner-main-banner .banner-txts > dl dd > p			{width:auto; margin:0 20px;} */

	.main-banner .inner-main-banner .banner-txts > dl dd.downloadBtn > div > a								{margin-right:23px;}
	.main-banner .inner-main-banner .banner-txts > dl dd.downloadBtn > div > a:last-child				{margin-right:0;}

	.img1440,
	.img768							{display:none;}
	.img375							{display:block;}

	.ful-navi.on							{display:block;}
}

/* @media screen and (max-width: 375px) { */
@media screen and (max-width: 375px) {
	.wrap											{padding-top:63px;}
	header										{padding:0 20px; height:63px; position:fixed; top:0; left:0; width:100%;}
	header .inner-header							{height:63px;}
	header .title										{width:111px;}
	header .main-menu				{display:none;}
	header .hambugerBtn					{display:block;}
	header .main-menu > button + button						{margin-left:0;}

	.main-banner .inner-main-banner					{flex-direction:column-reverse;}
	.main-banner .inner-main-banner > p				{flex:1 1 0; padding-bottom:0; margin-left:10%;}
	.main-banner .inner-main-banner > p:before								{display:none;}
	.main-banner .inner-main-banner .banner-txts							{margin-top:35px; margin-bottom:18px;}
	.main-banner .inner-main-banner .banner-txts > dl					{margin:0 18px;}
	.main-banner .inner-main-banner .banner-txts > dl dt			{font-size:36px; line-height:1.3;}
	.main-banner .inner-main-banner .banner-txts > dl dd			{line-height:1.3;}
	/* .main-banner .inner-main-banner .banner-txts > dl dd > p			{width:auto; margin:0 20px;} */

	.main-banner .inner-main-banner .banner-txts > dl dd.downloadBtn > div						{text-align:center;}
	.main-banner .inner-main-banner .banner-txts > dl dd.downloadBtn > div > a								{margin-right:23px;}
	.main-banner .inner-main-banner .banner-txts > dl dd.downloadBtn > div > a:last-child				{margin-right:0;}

	.main-banner .inner-main-banner .banner-txts button				{width:100%;}

	.img1440,
	.img768							{display:none;}
	.img375							{display:block;}

	.ful-navi.on							{display:block;}
}