@charset "utf-8";
@import url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

:root,::after,::before {
  --main-color: #18b7cd;
  --dark-color:#0ba4ba;
  --bg-color:#39a8b8;
  --gradient-color: linear-gradient(180deg, rgba(0,0,0,1) 70%, rgba(9,72,80,1) 100%);
  --gradient-color2: linear-gradient(45deg,#198db2,#1caac1);
  --import-color: #ff7800;
  --import-dark-color: #f56800;
  --box-color: #00657b;	
}
/* reset */
html, body {
	height: 100%;
}
body {
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: -.03em;
	font-weight: 600;
	font-family: 'NanumSquareNeo', "Apple SD Gothic Neo", "Microsoft YaHei UI", "Malgun Gothic", sans-serif;
	min-width: 1024px;
	color: #000;
	background-color: #eee;
}
table, th, td, input, select, button, textarea, pre {
	font: inherit;
	color: inherit;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: 800;
}
ol, ul {
	list-style: none;
}
img, fieldset {
	border: 0;
}
img {
	vertical-align: middle;
	/* height: 100%; */
}
a {
	color: #000;
	text-decoration: none;
}
label {
	cursor: pointer;
}
input, button {
	border: 0;
	border-radius: 0;
	background: none;
   
}
button { cursor: pointer;}
textarea {
	resize: none;
}
input, button, select, textarea {
	vertical-align: middle;
}
address, caption, cite, code, dfn, em, var {
	font-style: normal;
}
hr {
	clear: both;
	display: none;
}
blockquote, q {
	quotes: none;
}
abbr, acronym {
	border: 0;
}
legend, caption {
	visibility: hidden;
	overflow: hidden;
	line-height: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	text-indent: -99999px;
	font-size: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
	display: block;
}
.hidden {
	position: absolute;
	visibility: hidden;
	overflow: hidden;
	height: 0;
	line-height: 0;
	width: 0;
	margin: 0;
	padding: 0;
	font: 0/0 Arial;
}


/* layout */
.wrapper { width: 100%;height: 100%;margin: 0 auto}
.lang_wrap {background-image: url("../images/bg_lang.jpg"), url("../images/bg_lang2.jpg"); background-repeat: no-repeat, no-repeat; background-position: 0 0, 0 0;background-size: 100% auto, 100% 100%;}
.main {background-color: #fff;/* padding-left: 50px; */display: flex;}
.sub {background-color: #000;background: var(--gradient-color);padding: 30px;position: relative;}
.content {
    height: calc( 100% - 85px );
}
.actions {position:absolute;right: 30px;bottom: 30px;}


/******************************************************
	lang_wrap
******************************************************/
.lang_wrap { display: flex; align-items: center; justify-content: center; text-align: center}
.lang_wrap .cont { display: block}
.lang_wrap .cont >h1 {width: 180px;height: 160px; margin: 0 auto; background: url("../images/ci_main_col.svg") no-repeat 0 0;background-size: 100% auto;}
.lang_wrap .cont >h2 {font-size: 4.5em;line-height: 1.5;font-weight: 800;letter-spacing: -0.07em;}
.lang_wrap .cont >p {font-size: 1.8em;line-height: 1.5;font-weight: 700;letter-spacing: -0.07em;}
.lang_wrap .cont > .bt {display: flex; align-items: center; justify-content: center;gap:20px; margin: 90px 15px 20px;}
.lang_wrap .cont > .bt a { display: inline-block; font-size: 1.15em; font-weight: 800; position: relative;transition: 0.3s ease, right 0.5s ease 0.9s, opacity 0.5s ease 0.9s;}
.lang_wrap .cont > .bt a:hover {transform:translateY(-7px)}
.lang_wrap .cont > .bt span { display: block;  padding: 20px 0 0}
.lang_wrap .cont > .bt img { display: block; border-radius: 10px; box-shadow: 2px 2px 8px rgba(0,0,0,0.3);max-width: 100%;}


@media screen and (max-width:1024px) {
	body {font-size: 16px;min-width: inherit; width: 100%}
	.lang_wrap .cont >h1 {width: 150px;height: 150px;}
	.lang_wrap .cont >h2 {font-size: 2.5em;}
	.lang_wrap .cont >p {font-size: 1.2em;}
	.lang_wrap .cont > .bt {margin-top: 70px;}	
}
@media screen and (max-width:768px) { 
	.lang_wrap {background: url("../images/bg_lang2.jpg")repeat-y 0 0;background-size: auto, auto;}
	.lang_wrap .cont > .bt {margin-top: 50px;gap: 10px;}	
	.lang_wrap .cont > .bt a {font-size: 1em;}
}
@media screen and (max-width:640px) {
	.lang_wrap .cont >h1 {width: 120px;height: 120px;}
	.lang_wrap .cont >h2 {font-size: 1.8em;}
	.lang_wrap .cont >p {font-size: 1em;}
	
}
@media screen and (max-width:350px) {

	

}