@charset "utf-8";
/* CSS Document */
::-moz-selection {
  color: white;
  background-color: #132e8b;
  -webkit-text-stroke: initial;
}
::selection {
  color: white;
  background-color: #132e8b;
  -webkit-text-stroke: initial;
}

html { font-size: 62.5%; } /* 브라우저기본 16px 1rem 62.5%(10px) 환산 */
@media (max-width: 1279px) {
	html { font-size: 56.25%; }
}
@media (max-width: 719px) {
	html { font-size: 50%; }
}

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
*{margin:0; padding:0;box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: collapse;
  font: inherit;
}
article, aside, details,
figcaption, figure, footer,
header, hgroup, menu,
nav, section {
  display: block;
}
body{
    line-height: 1;
    overflow-x: hidden;
    font-family: 'Noto Sans KR', sans-serif; 
    font-size:12px; 
    color:#222222;
  -webkit-text-size-adjust: none; /* 모바일에서 text 사이즈 변동 없게 */
	-webkit-font-smoothing: subpixel-antialiased; /* antialiased or subpixel-antialiased 웹킷 브라우저 웹폰트 선명하게 처리 */
	font-variant-ligatures: none; /* fi수정 */
	word-break: keep-all;
}
ol, ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a{
    color:#222222; 
    text-decoration:none;
    display: inline-block;
}
textarea:focus,
input:focus {
  outline: none;
}
img{
    -o-object-fit: cover;
     object-fit: cover;
    border:none; 
    display: block;
    max-width: 100%;
    width: auto;
  line-height: 0; font-size: 0;
  -ms-interpolation-mode: bicubic;
}
input {
  caret-color: black;
}

textarea {
  caret-color: black;
}
button {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
}


::-webkit-scrollbar {
  width: 3px;
  background: transparent;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
  background: transparent; /* 트랙 배경 투명 */
}

::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  border-radius: 5px;
  background: var(--pri1);
  border: 2px solid transparent;
}

::-moz-selection {
  color: white;
  background-color: var(--pri1);
}

::selection {
  color: white;
  background-color: var(--pri1);
}

div, span, p, ul, ol, li, dd, dt, dl,
h1, h2, h3, h4, h5, h6, a {
  word-break: keep-all;
  caret-color: transparent;
}



/* 다크 모드 무시 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light !important;
    background-color: white !important;
    color: black !important;
  }
}
@keyframes title {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tit_mini {
  0% {
    letter-spacing: 0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: auto;
    opacity: 1;
  }
}
@keyframes focus {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes cycleM {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(1.5rem) scale(0.95);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes scroll {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(-50%, 1.4rem);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bigger {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}
@keyframes bounce {
  to {
    transform: translateX(2rem);
    opacity: 0;
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes slideRight {
  0% {
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes reveal-line {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
[data-aos=reveal-line] {
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

[data-aos=reveal-line].aos-animate {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

[data-aos=title] {
  opacity: 0;
}

[data-aos=title].aos-animate {
  animation: title 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

[data-aos=fade-in] {
  filter: blur(50px);
}

[data-aos=fade-in].aos-animate {
  filter: blur(0);
}


/* 폰트셋팅*/
em,address {font-style: normal;}

.en {
  font-family: var(--NotoSerif);
}

:root {
  /*gray*/
  --gray1: #FAFAFA;
  --gray2: #F2F2F2;
  --gray3: #ECECEC;
  --gray4: #F0F0F0;
  --gray5: #CFCFCF;
  --gray6: #BEBEBE;
  --gray7: #B7B7B7;
  --gray8: #ABABAB;
  --gray9: #A1A1A1;
  --gray10: #5E5E5E;
  /*black*/
  --black: #000;
  --black-a95: rgba(0, 0, 0, 0.95);
  --black-a90: rgba(0, 0, 0, 0.90);
  --black-a85: rgba(0, 0, 0, 0.85);
  --black-a80: rgba(0, 0, 0, 0.80);
  --black-a75: rgba(0, 0, 0, 0.75);
  --black-a70: rgba(0, 0, 0, 0.70);
  --black-a65: rgba(0, 0, 0, 0.65);
  --black-a60: rgba(0, 0, 0, 0.60);
  --black-a55: rgba(0, 0, 0, 0.55);
  --black-a50: rgba(0, 0, 0, 0.50);
  --black-a45: rgba(0, 0, 0, 0.45);
  --black-a40: rgba(0, 0, 0, 0.40);
  --black-a35: rgba(0, 0, 0, 0.35);
  --black-a30: rgba(0, 0, 0, 0.30);
  --black-a25: rgba(0, 0, 0, 0.25);
  --black-a20: rgba(0, 0, 0, 0.20);
  --black-a15: rgba(0, 0, 0, 0.15);
  --black-a10: rgba(0, 0, 0, 0.10);
  --black-a5: rgba(0, 0, 0, 0.05);
  /*white*/
  --white: #fff;
  --white-a95: rgba(255, 255, 255, 0.95);
  --white-a90: rgba(255, 255, 255, 0.90);
  --white-a85: rgba(255, 255, 255, 0.85);
  --white-a80: rgba(255, 255, 255, 0.80);
  --white-a75: rgba(255, 255, 255, 0.75);
  --white-a70: rgba(255, 255, 255, 0.70);
  --white-a65: rgba(255, 255, 255, 0.65);
  --white-a60: rgba(255, 255, 255, 0.60);
  --white-a55: rgba(255, 255, 255, 0.55);
  --white-a50: rgba(255, 255, 255, 0.50);
  --white-a45: rgba(255, 255, 255, 0.45);
  --white-a40: rgba(255, 255, 255, 0.40);
  --white-a35: rgba(255, 255, 255, 0.35);
  --white-a30: rgba(255, 255, 255, 0.30);
  --white-a25: rgba(255, 255, 255, 0.25);
  --white-a20: rgba(255, 255, 255, 0.20);
  --white-a15: rgba(255, 255, 255, 0.15);
  --white-a10: rgba(255, 255, 255, 0.10);
  --white-a5: rgba(255, 255, 255, 0.05);
  /*pri 1*/
  --pri1: #435F89;
  --pri1-1: ;
  --pri1-2: ;
  --pri1-3: ;
  --pri1-4: ;
  --pri1-5: ;
  --pri1-6: ;
  --pri1-7: ;
  --pri1-8: ;
  --pri1-9: ;
  --pri1-10: ;
  /*pri 2*/
  --pri2: #00929E;
  --pri2-1: ;
  --pri2-2: ;
  --pri2-3: ;
  --pri2-4: ;
  --pri2-5: ;
  --pri2-6: ;
  --pri2-7: ;
  --pri2-8: ;
  --pri2-9: ;
  --pri2-10: ;
  /*pri 3*/
  --pri3: ;
  --pri3-1: ;
  --pri3-2: ;
  --pri3-3: ;
  --pri3-4: ;
  --pri3-5: ;
  --pri3-6: ;
  --pri3-7: ;
  --pri3-8: ;
  --pri3-9: ;
  --pri3-10: ;
  /*pri 4*/
  --pri4: ;
  --pri4-1: ;
  --pri4-2: ;
  --pri4-3: ;
  --pri4-4: ;
  --pri4-5: ;
  --pri4-6: ;
  --pri4-7: ;
  --pri4-8: ;
  --pri4-9: ;
  --pri4-10: ;
  /*pri 5*/
  --pri5: ;
  --pri5-1: ;
  --pri5-2: ;
  --pri5-3: ;
  --pri5-4: ;
  --pri5-5: ;
  --pri5-6: ;
  --pri5-7: ;
  --pri5-8: ;
  --pri5-9: ;
  --pri5-10: ;
  /*sub*/
  --sub1: #FBFDFE;
  --sub1-1: #EFF3F9;
  --sub1-2: #DCDFE2;
  --sub1-3: #92A4C0;
  --sub1-4: #596981;
  --sub1-5: ;
  --sub1-6: ;
  --sub1-7: ;
  --sub1-8: ;
  --sub1-9: ;
  --sub1-10: ;
  /*sub*/
  --sub2: #F8FDFA;
  --sub2-1: #EEF8F2;
  --sub2-2: #9EACA4;
  --sub2-3: #6A8978;
  --sub2-4: #516C5C;
  --sub2-5: #0E4122;
  --sub2-6: ;
  --sub2-7: ;
  --sub2-8: ;
  --sub2-9: ;
  --sub2-10: ;
  /*sub*/
  --sub3: ;
  --sub3-1: ;
  --sub3-2: ;
  --sub3-3: ;
  --sub3-4: ;
  --sub3-5: ;
  --sub3-6: ;
  --sub3-7: ;
  --sub3-8: ;
  --sub3-9: ;
  --sub3-10: ;
  /*second*/
  --second1: ;
  --second2: ;
  --second3: ;
  --second4: ;
  --second5: ;
  --second6: ;
  --second7: ;
  --second8: ;
  --second9: ;
  --second10: ;
  --second11: ;
  /*sns*/
  --kakao: #ffbb00;
  --naver: #58D30C;
  --daum: #618FFC;
  --youtube: #FD0532;
}

:root {
  --NotoSerif: "Noto Serif KR",serif;
  --preten: "Pretendard Variable", sans-serif;
}

/* 텍스트정렬*/
html, body {
  font-size: 16px;
}

h1 {
  font-family: var(--preten);
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 300;
  line-height: 130%; /* 6.75rem */
  letter-spacing: -0.115rem;
}
@media screen and (max-width: 767px) {
  h1 {
    font-size: 3rem;
    line-height: 3.4rem;
  }
}
@media (width <= 320px) {
  h1 {
    font-size: 2.2rem;
  }
}

h2 {
  font-family: var(--preten);
  font-size: 3.75rem;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 5.625rem */
  letter-spacing: -0.09rem;
}
@media screen and (max-width: 767px) {
  h2 {
    font-size: 2.25rem;
    line-height: 3.2rem;
  }
}
@media (width <= 320px) {
  h2 {
    font-size: 2rem;
  }
}

h3 {
  font-family: var(--preten);
  font-size: 3rem;
  font-style: normal;
  font-weight: 300;
  line-height: 150%; /* 4.5rem */
  letter-spacing: -0.075rem;
}
@media screen and (max-width: 767px) {
  h3 {
    font-size: 2.1rem;
    line-height: 3rem;
  }
}
@media (width <= 320px) {
  h3 {
    font-size: 1.7rem;
  }
}

h4 {
  font-family: var(--preten);
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 3.375rem */
  letter-spacing: -0.06rem;
}
@media screen and (max-width: 767px) {
  h4 {
    font-size: 1.9rem;
    line-height: 2.5rem;
  }
}
@media (width <= 320px) {
  h4 {
    font-size: 1.3rem;
  }
}

h5 {
  font-family: var(--preten);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 125%; /* 1.875rem */
  letter-spacing: -0.06563rem;
}
@media screen and (max-width: 767px) {
  h5 {
    font-size: 1.7rem;
    line-height: 2.5rem;
  }
}
@media (width <= 320px) {
  h5 {
    font-size: 1.125rem;
  }
}

h6 {
  font-family: var(--preten);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 125%; /* 1.5625rem */
  letter-spacing: -0.0525rem;
}
@media (width <= 320px) {
  h6 {
    font-size: 1rem;
  }
}


#accessibility { position: relative; z-index: 9999; }
#accessibility a { position: absolute; top: -200px; left: 0; width: 160px; border: 1px solid #1a99a7; background-color: #333; text-align: center; font-size: 1.3rem; line-height: 2.6rem; color: #fff; }
#accessibility a:focus, #accessibility a:active { top: 0; background-color: #1a99a7; }


/* call class */
.displaynone { display: none !important; }
.displaypc, .displaymobile { display: none; }
.displaypc.active, .displaymobile.active { display: block; }
.fixo-dimmed { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; background: rgba(0,0,0,.4); cursor: pointer; visibility: hidden; opacity: 0; transition: all .3s; }
@media (max-width: 1279px) {
	.br-max { display: block; }
}
@media (max-width: 719px) {
	.br-min { display: block; }
}
#content {
	overflow: hidden;
}
u {
	text-decoration: none;
	background-image: linear-gradient(#132e8b, #132e8b);
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 1px 1px;
}
.pcolor { color: #132e8b !important; }

.mwidth {
	width: 100%; max-width: 1340px;
	padding: 0 20px; margin: auto;
	box-sizing: border-box;
}
.mwidth2 {
	width: 100%; max-width: 1540px;
  padding: 0 20px; margin: auto;
}
@media (max-width: 719px) {
	.mwidth, .mwidth2 {
		padding: 0 10px;
	}
}