/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,500,900&display=swap&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700,&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR:300,500,,900&display=swap'); */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald:300,500,700&display=swap');

body {
	font-family:'Noto Sans';
	-webkit-text-size-adjust:none;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	word-break:break-all;
	letter-spacing:-0.6px;
}

a:link,
a:visited {
	text-decoration: none;
	color: #333;
}

a:hover,
a:focus {
	/*outline:none;*/
}

.noto {
	font-family: 'Noto Sans';
}
.noto_k {
	font-family: 'Noto Sans';
}

.noto_e {
	font-family:'Noto Sans';
}
.noto_se {
	font-family:'Noto Sans';
}
.noto_sk {
	/* font-family: 'Noto Serif KR', serif; */
	font-family: 'Noto Sans';
}
.sub_de_content_sub {
	font-family:'Noto Sans';
}
.sub_de_content_title {
	font-family:'Noto Sans';
}
.sub_de_write {
	font-family:'Noto Sans';
}
.big_title {
	font-family:'Noto Sans';
}
.big_content {
	font-family:'Noto Sans';
}
.main_pic_title {
	font-family:'Noto Sans';
}
.os_e {
	font-family: 'Oswald', sans-serif;
}
.only_pt {
	font-family: 'Noto Sans';
}
#vision .noto {
	font-weight:400;
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url('font/NotoSansKR-Thin.woff2') format('woff2'),
       url('font/NotoSansKR-Thin.woff') format('woff'),
       url('font/NotoSansKR-Thin.otf') format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url('font/NotoSansKR-Light.woff2') format('woff2'),
       url('font/NotoSansKR-Light.woff') format('woff'),
       url('font/NotoSansKR-Light.otf') format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url('font/NotoSansKR-Regular.woff2') format('woff2'),
        url('font/NotoSansKR-Regular.woff') format('woff'),
        url('font/NotoSansKR-Regular.otf') format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url('font/NotoSansKR-Medium.woff2') format('woff2'),
        url('font/NotoSansKR-Medium.woff') format('woff'),
        url('font/NotoSansKR-Medium.otf') format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url('font/NotoSansKR-Bold.woff2') format('woff2'),
        url('font/NotoSansKR-Bold.woff') format('woff'),
        url('font/NotoSansKR-Bold.otf') format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 900;
   src: url('font/NotoSansKR-Black.woff2') format('woff2'),
        url('font/NotoSansKR-Black.woff') format('woff'),
        url('font/NotoSansKR-Black.otf') format('opentype');
 }
 /*  */
 @font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 100;
   src: url('font/NotoSans-Thin.woff2') format('woff2'),
        url('font/NotoSans-Thin.woff') format('woff'),
        url('font/NotoSans-Thin.otf') format('opentype');
 }
 @font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 300;
   src: url('font/NotoSans-Light.woff2') format('woff2'),
        url('font/NotoSans-Light.woff') format('woff'),
        url('font/NotoSans-Light.otf') format('opentype');
 }
 @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: url('font/NotoSans-Regular.woff2') format('woff2'),
         url('font/NotoSans-Regular.woff') format('woff'),
         url('font/NotoSans-Regular.otf') format('opentype');
  }
 @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    src: url('font/NotoSans-Medium.woff2') format('woff2'),
         url('font/NotoSans-Medium.woff') format('woff'),
         url('font/NotoSans-Medium.otf') format('opentype');
  }
 @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    src: url('font/NotoSans-Bold.woff2') format('woff2'),
         url('font/NotoSans-Bold.woff') format('woff'),
         url('font/NotoSans-Bold.otf') format('opentype');
  }
 @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 900;
    src: url('font/NotoSans-Black.woff2') format('woff2'),
         url('font/NotoSans-Black.woff') format('woff'),
         url('font/NotoSans-Black.otf') format('opentype');
  }


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, a{;margin:0;  padding:0;  border:0; font-size:100%; vertical-align:baseline; background:transparent; -webkit-text-size-adjust:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; font-style: normal;}
html{ font-smoothing:antialiased; -ms-touch-action:auto;}
html,body, section{width:100%; }


button, input[type="submit"], input[type="button"]{
	cursor: pointer;
}

.over_hi {
	overflow: hidden;
}


@media (max-width: 767px) {
	.wrap {
		width: 98%;
		margin: 0 auto;
	}

	.header {
		position: fixed;
		width: 100%;
		z-index: 10;
		height: 59px;
		top: 0;
		transition-duration: 0.5s;
		overflow: hidden;
		background-color: #302166;
	}

	.menu {
		float: left;
		width: 41px;
		height: 59px;
		display: flex;
		align-items: center;
		padding-left: 10px;
	}


	/*
.c1 {
	position: absolute;
	top: 0;
	width: 100%;
}

.c2 {
	position: absolute;
	top: 10px;
	width: 100%;
}

.c3 {
	position: absolute;
	top: 20px;
	width: 100%;
}
*/
	.header_logo {
		float: left;
		position: absolute;
		left: 50%;
		height: 59px;
		display: flex;
		align-items: center;
		transform: translate(-50%, 0%);
		opacity: 0;
		width: 40%;
	}

	.logo {
		float: left;
		position: absolute;
		left: 50%;
		height: 59px;
		display: flex;
		align-items: center;
		transform: translate(-50%, 0%);
		opacity: 1;
		transition-duration: 0.5s;
		width: 40%;
	}

	.header_logo img,
	.logo img {
		width: 100%;
	}

	.logo img {
		position: absolute;
	}

	.logo img:nth-child(2) {
		opacity: 0;
	}

	.link {
		float: left;
		/* height: 59px; */
		/* display: flex; */
		/* align-items: center; */
		/* padding-right: 10px; */
		color: #000;
		display: none;
	}

	.link a {
		font-size: 12px;
		color: #fff;
		text-decoration: none;
		display: inline-block;
		margin: 0 3px;
	}

	.h_active {
		height: 100%;
		background-color: #fff;
		transition-duration: 0.5s;
	}

	.lo_active img:first-child {
		position: absolte;
		opacity: 0;
	}

	.lo_active img:nth-child(2) {
		position: absolte;
		opacity: 1;
	}

	.h_active .menu span {
		background-color: #000;
	}

	.h_active .link a {
		color: #000;
	}

	.menu {
		position: relative;
	}

	.menu div {
		position: absolute;
		top: 50%;
		margin-top: -22px;
	}

	.menu span {
		display: block;
		width: 25px;
		height: 2px;
		background-color: #fff;
		margin: 5px 0;
	}

	.menu span.m_m1 {
		margin-top: 13px;
	}

	.menu span.m_m3 {
		margin-top: -7px;
	}

	.header_content {
		height: 100%;
		opacity: 0;
		transition-duration: 0.5s;
		display: none;
	}

	.hc_active {
		opacity: 1;
		transition-duration: 0.5s;
		display: block;
	}

	.header_content .wrap {
		height: 100%;
		position: relative;
		top: 100px;
		transition-duration: 0.5s;
		width: 100%;
	}

	.hc_active .wrap {
		height: 100%;
		position: relative;
		top: 0px;
		transition-duration: 0.5s;
		width: 100%;
	}

	.header_con {
		float: left;
		padding: 3% 3%;
		border-right: 1px solid #e1e1e1;
		height: 180px;
		width: 45%;
	}

	.header_con:first-child,
	.header_con:nth-child(2) {
		border-bottom: 1px solid #e1e1e1;
	}

	.header_con:nth-child(2n) {
		padding-right: 0;
		border-right: 0;
	}

	.header_con .title {
		font-size: 14px;
		font-weight: 700;
		margin-bottom: 30px;
		cursor: pointer;
	}

	.header_con .content {
		font-size: 12px;
		line-height: 24px;
		cursor: pointer;
		overflow: hidden;
	}

	.header_con:nth-child(4) .content {
		width: 100%;
	}

	.header_con:nth-child(4) .content img {
		float: left;
		width: 25px;
	}

	.header_con:nth-child(4) .content span {
		float: left;
		position: relative;
		top: 3px;
		left: 5px;
	}

	.header_content > .wrap > .over_hi {
		width: 95%;
		margin: 0 auto;
	}
}

@media all and (min-width: 768px) and (max-width: 1064px) {
	.wrap {
		width: 98%;
		margin: 0 auto;
	}

	.header {
		position: fixed;
		width: 100%;
		z-index: 10;
		height: 80px;
		top: 0;
		transition-duration: 0.5s;
		overflow: hidden;
		background-color: #302166;
	}

	.menu {
		float: left;
		width: 41px;
		height: 80px;
		display: flex;
		align-items: center;
		padding-left: 20px;
	}
	.header_content {
		height: 100%;
		opacity: 0;
		transition-duration: 0.5s;
		display: none;
	}
.hc_active {
		opacity: 1;
		transition-duration: 0.5s;
		display: block;
	}

	/*
.c1 {
	position: absolute;
	top: 0;
	width: 100%;
}

.c2 {
	position: absolute;
	top: 10px;
	width: 100%;
}

.c3 {
	position: absolute;
	top: 20px;
	width: 100%;
}
*/
	.header_logo {
		float: left;
		transform: translate(-50%, 0%);
		position: absolute;
		left: 50%;
		height: 80px;
		display: flex;
		align-items: center;
		opacity: 0;
	}

	.logo {
		float: left;
		transform: translate(-50%, 0%);
		position: absolute;
		left: 50%;
		height: 80px;
		display: flex;
		align-items: center;
		opacity: 1;
		transition-duration: 0.5s;
	}

	.logo img {
		position: absolute;
		left: -100px;
	}

	.logo img:nth-child(2) {
		opacity: 0;
	}

	.link {
		float: right;
		height: 80px;
		display: flex;
		align-items: center;
		padding-right: 20px;
		color: #fff;
	}

	.link a {
		color: #fff;
		text-decoration: none;
		display: inline-block;
		margin: 0 3px;
	}

	.h_active {
		height: 100%;
		background-color: #fff;
		transition-duration: 0.5s;
	}

	.lo_active img:first-child {
		position: absolte;
		opacity: 0;
	}

	.lo_active img:nth-child(2) {
		position: absolte;
		opacity: 1;
	}

	.h_active .menu span {
		background-color: #000;
	}

	.h_active .link a {
		color: #000;
	}

	.menu {
		position: relative;
	}

	.menu div {
		position: absolute;
		top: 50%;
		margin-top: -22px;
	}

	.menu span {
		display: block;
		width: 30px;
		height: 3px;
		background-color: #fff;
		margin: 7px 0;
	}

	.menu span.m_m1 {
		margin-top: 10px;
	}

	.menu span.m_m3 {
		margin-top: -10px;
	}

	.header_content {
		height: 100%;
		opacity: 0;
		transition-duration: 0.5s;
	}

	.hc_active {
		opacity: 1;
		transition-duration: 0.5s;
	}

	.header_content .wrap {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: 100px;
		transition-duration: 0.5s;
		width: 100%;
	}

	.hc_active .wrap {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: 0px;
		transition-duration: 0.5s;
		width: 100%;
	}

	.header_con {
    float: left;
    padding: 0px 2.4%;
    border-right: 1px solid #e1e1e1;
    height: 255px;
    width: 25%;
		margin-bottom: 5%
	}
	.header_con:nth-child(4) {
		padding-right: 0;
		border-right: 0;
	}

	.header_con .title {
		font-size: 25px;
		font-weight: 700;
		margin-bottom: 30px;
		cursor: pointer;
	}

	.header_con .content {
		font-size: 18px;
		line-height: 50px;
		cursor: pointer;
		overflow: hidden;
	}

	.header_con:nth-child(4) .content {
		width: 100%;
	}

	.header_con:nth-child(4) .content img {
		float: left;
		width: 25px;
	}

	.header_con:nth-child(4) .content span {
		float: left;
		position: relative;
		top: -10px;
		left: 5px;
	}

	.header_content > .wrap > .over_hi {
		width: 95%;
		margin: 0 auto;
	}
}

@media all and (min-width: 1065px) {
	.wrap {
		width: 1200px;
		margin: 0 auto;
	}

	.header {
		position: fixed;
		width: 100%;
		z-index: 10;
		height: 80px;
		top: 0;
		transition-duration: 0.5s;
		overflow: hidden;
		background-color: #302166;
	}

	.menu {
		float: left;
		width: 41px;
		height: 80px;
		display: flex;
		align-items: center;
		padding-left: 20px;
	}


	/*
.c1 {
	position: absolute;
	top: 0;
	width: 100%;
}

.c2 {
	position: absolute;
	top: 10px;
	width: 100%;
}

.c3 {
	position: absolute;
	top: 20px;
	width: 100%;
}
*/
	.header_logo {
		float: left;
		transform: translate(-50%, 0%);
		position: absolute;
		left: 50%;
		height: 80px;
		display: flex;
		align-items: center;
		opacity: 0;
	}

	.logo {
		float: left;
		transform: translate(-50%, 0%);
		position: absolute;
		left: 50%;
		height: 80px;
		display: flex;
		align-items: center;
		opacity: 1;
		transition-duration: 0.5s;
	}

	.logo img {
		position: absolute;
		left: -100px;
	}

	.logo img:nth-child(2) {
		opacity: 0;
	}

	.link {
		float: right;
		height: 80px;
		display: flex;
		align-items: center;
		padding-right: 20px;
		color: #fff;
	}

	.link a {
		color: #fff;
		text-decoration: none;
		display: inline-block;
		margin: 0 3px;
	}

	.h_active {
		height: 100%;
		background-color: #fff;
		transition-duration: 0.5s;
	}

	.lo_active img:first-child {
		position: absolte;
		opacity: 0;
	}

	.lo_active img:nth-child(2) {
		position: absolte;
		opacity: 1;
	}

	.h_active .menu span {
		background-color: #000;
	}

	.h_active .link a {
		color: #000;
	}

	.menu {
		position: relative;
	}

	.menu div {
		position: absolute;
		top: 50%;
		margin-top: -22px;
	}

	.menu span {
		display: block;
		width: 30px;
		height: 3px;
		background-color: #fff;
		margin: 7px 0;
	}

	.menu span.m_m1 {
		margin-top: 10px;
	}

	.menu span.m_m3 {
		margin-top: -10px;
	}

	.header_content {
		height: 100%;
		opacity: 0;
		transition-duration: 0.5s;
	}

	.hc_active {
		opacity: 1;
		transition-duration: 0.5s;
	}

	.header_content .wrap {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: 100px;
		transition-duration: 0.5s;
	}

	.hc_active .wrap {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: -60px;
		transition-duration: 0.5s;
	}

	.header_con {
		/*float: left;*/
		padding: 0 57px;
		border-right: 1px solid #e1e1e1;
		height:300px;
		width:25%;
	}

	.header_con:last-child {
		padding-right: 0;
		border-right: 0;
	}

	.header_con .title {
		font-size: 25px;
		font-weight: 700;
		margin-bottom: 30px;
		cursor: pointer;
	}

	.header_con .content {
		font-size: 18px;
		line-height: 50px;
		cursor: pointer;
		overflow: hidden;
	}

	.header_con:nth-child(4) .content {
		width: 100%;
	}

	.header_con:nth-child(4) .content img {
		float: left;
		width: 25px;
	}

	.header_con:nth-child(4) .content span {
		float: left;
		position: relative;
		top: -13px;
		left: 5px;
	}

	.header_content > .wrap > .over_hi {
		width: 80%;
		margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
	}

}
