@charset "utf-8";
/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

/* Pretendard 900 */
@font-face {
  font-family: 'Pretendard';
  font-weight: 900;
  font-display: swap;
  src: url('../font/Pretendard-Black.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../font/Pretendard-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../font/Pretendard-Black.woff2') format('woff2'), /* Super Modern Browsers */
      url('../font/Pretendard-Black.woff') format('woff'), /* Modern Browsers */
      url('../font/PretendardVariable.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../font/Pretendard-Black.svg#Pretendard') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-display: swap;
  src: url('../font/Pretendard-ExtraBold.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../font/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../font/Pretendard-ExtraBold.woff2') format('woff2'), /* Super Modern Browsers */
      url('../font/Pretendard-ExtraBold.woff') format('woff'), /* Modern Browsers */
      url('../font/PretendardVariable.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../font/Pretendard-ExtraBold.svg#Pretendard') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-display: swap;
  src: url('../font/Pretendard-Bold.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../font/Pretendard-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../font/Pretendard-Bold.woff2') format('woff2'), /* Super Modern Browsers */
      url('../font/Pretendard-Bold.woff') format('woff'), /* Modern Browsers */
      url('../font/PretendardVariable.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../font/Pretendard-Bold.svg#Pretendard') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-display: swap;
  src: url('../font/Pretendard-SemiBold.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../font/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../font/Pretendard-SemiBold.woff2') format('woff2'), /* Super Modern Browsers */
      url('../font/Pretendard-SemiBold.woff') format('woff'), /* Modern Browsers */
      url('../font/PretendardVariable.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../font/Pretendard-SemiBold.svg#Pretendard') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-display: swap;
  src: url('../font/Pretendard-Medium.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../font/Pretendard-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../font/Pretendard-Medium.woff2') format('woff2'), /* Super Modern Browsers */
      url('../font/Pretendard-Medium.woff') format('woff'), /* Modern Browsers */
      url('../font/PretendardVariable.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../font/Pretendard-Medium.svg#Pretendard') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-display: swap;
  src: url('../font/Pretendard-Regular.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../font/Pretendard-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../font/Pretendard-Regular.woff2') format('woff2'), /* Super Modern Browsers */
      url('../font/Pretendard-Regular.woff') format('woff'), /* Modern Browsers */
      url('../font/PretendardVariable.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../font/Pretendard-Regular.svg#Pretendard') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 300;
  font-display: swap;
  src: url('../font/Pretendard-Light.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../font/Pretendard-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../font/Pretendard-Light.woff2') format('woff2'), /* Super Modern Browsers */
      url('../font/Pretendard-Light.woff') format('woff'), /* Modern Browsers */
      url('../font/PretendardVariable.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../font/Pretendard-Light.svg#Pretendard') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 200;
  font-display: swap;
  src: url('../font/Pretendard-ExtraLight.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../font/Pretendard-ExtraLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../font/Pretendard-ExtraLight.woff2') format('woff2'), /* Super Modern Browsers */
      url('../font/Pretendard-ExtraLight.woff') format('woff'), /* Modern Browsers */
      url('../font/PretendardVariable.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../font/Pretendard-ExtraLight.svg#Pretendard') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 100;
  font-display: swap;
  src: url('../font/Pretendard-Thin.eot'); /* IE9 Compat Modes */
  src: local(''),
      url('../font/Pretendard-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../font/Pretendard-Thin.woff2') format('woff2'), /* Super Modern Browsers */
      url('../font/Pretendard-Thin.woff') format('woff'), /* Modern Browsers */
      url('../font/PretendardVariable.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../font/Pretendard-Thin.svg#Pretendard') format('svg'); /* Legacy iOS */
}

/*------------
reset
------------*/

* {font-family: 'Pretendard', sans-serif;}
*, ::after, ::before{box-sizing: border-box; scroll-behavior: smooth;}
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, p, span, i, input, select{
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	font-weight:300;
	font-family: 'Pretendard', sans-serif;
	/* font-family:-apple-system, BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','NanumGothic','나눔고딕','Dotum','돋움',sans-serif; */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body, html {
	height: 100%;
	padding:0;
	margin:0;
	font-size: 19px;
  line-height:27px;
  text-size-adjust : 100%;
}

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;
  width:100%
}

a, a:hover, a:active{
	text-decoration: none;
  color:#000;
}

b{
	font-weight:800;
}

i{
	font-size:1.1em
}

sup{
  vertical-align: super;
  font-size: 12px;
  font-weight:inherit;
}

strong{
	font-weight:800
}

table caption, .hidden{
  position: absolute;
  z-index:-1;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(1px, 1px, 1px, 1px);
  /*clip-path:inset(50%);*/
  overflow: hidden;
}

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border: 0;
}

/*
img {
   image-rendering: -webkit-optimize-contrast;
}
*/



/*------------------------
input
------------------------*/

input{
  appearance: none;
  border:0;
	border:1px solid #dde2e6;
	height:44px;
	padding-left:8px;
	font-weight:normal;
	background:#fff;
  padding:0px 10px;
  font-size:15px;
  display:inline-block;
  vertical-align:middle;
}

input::placeholder{color:#c2c7ce; font-weight:300; opacity: 1}
input[readonly] {background:#f1f3f8; color:#5d5d5d}
input:focus {outline:none;}
input:focus {border:1px solid #0073eb}
input[type=button]{padding:0}
input[type="checkbox"][disabled], input[type="checkbox"][readonly]{
  background:#edf6fc;
  color:#5d5d5d
}
/*캘린더, 인원*/
.cal-input{
    width:140px;
    background: #fff url(../images/cal_icon.png) no-repeat;
    background-position:92% center;
    background-size:17px;
    cursor: pointer;
}



/*------------------------
select
------------------------*/

select {
   appearance: none;
   background-image:url(../images/select_arrow.png);
   background-repeat: no-repeat;
   background-position:92% center;
   height:44px;
   width:100px;
   padding: 0px 20px 0 10px;
   border: 1px solid #dde2e6;
   font-size:15px;
   display:inline-block;
   vertical-align:middle;
}

select::-ms-expand {
    display: none;
}

select[readonly] {background:#f5f5f5; color:#5d5d5d}
select:focus {outline:none;}
select:focus {border:1px solid #0073eb}



/*------------------------
check box
------------------------*/

.ckdbox {
	position: relative;
	display:inline;
}

.ckdbox input[type="checkbox"] {
  display: none;
}

.ckdbox input[type="checkbox"] + label {
	cursor: pointer;
	display:inline-block;
  vertical-align:middle;
}

.ckdbox input[type="checkbox"] + label:before {
	 content: ' ';
	 display: inline-block;
	 vertical-align:middle;
   width: 15px;
   height: 15px;
   text-align: center;
   border: 1px solid #bfc3c7;
   background: #fff;
   border-radius:2px;
   margin-top:-2px
	}

.ckdbox input[type="checkbox"]:checked + label:before {
	 background:#0073eb url(../images/ico_ckd.png) no-repeat center center;
   background-size:9px;
	 border: 1px solid #0073eb;
   border-radius:2px;
	 width: 15px;
   height: 15px;
}



/*------------------------
filebox
------------------------*/

.filebox{
  display:inline-block;
  vertical-align:middle;
}

.filebox input{
  width:calc(100% - 100px)
}

.filebox input[type="file"] {
  position: absolute;
  z-index:-1;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(1px, 1px, 1px, 1px);
  /*clip-path:inset(50%);*/
  overflow: hidden;
  border: 0;
}

.filebox label {
   display: inline-block;
   vertical-align: middle;
   background-color: #fff;
   border: 1px solid #dde2e6;
   width:85px;
   line-height: 41px;
   border-radius:5px;
   cursor: pointer;
   text-align:center;
   font-size:15px;
   color:#5d5d5d;
   box-shadow: -2px 2px 4px rgb(0 0 0 / 6%);
} /* named upload */

.filebox .upload-name {
   display: inline-block;
   line-height: normal;
   vertical-align: middle;
   background-color: #edf6fc;
   border: 1px solid #edf6fc;
   appearance: none;
 }



 /*------------------------
 radio
 ------------------------*/

 .i-radio {
  position: relative;
  height: 16px;
  line-height: 16px;
  cursor: pointer;
  display: inline-block;
  padding-left:20px
 }

 .i-radio input {
  position: absolute;
  z-index:-1;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(1px, 1px, 1px, 1px);
  /*clip-path:inset(50%);*/
  overflow: hidden;
 	opacity:0;
 }

 .i-radio .ico {
 	position:absolute;
 	left:0px;
 	top:0px;
 	width:16px;
 	height:16px;
 	/*background:url(../images/ico_radio_before.png) no-repeat 0 0;*/
  background:#fff;
  border:1px solid #bfc3c7;
  border-radius:15px
 }

 .i-radio input:checked + .ico {
 	background-position:0 -40px;
 	/*background:url(../images/ico_radio_after.png) no-repeat 0 0;*/
  background:#fff;
  border:5px solid #0073eb;
  border-radius:15px
 }



/*------------------------
기타
------------------------*/
::selection {
    background:#0073eb;
    color: #fff;
    text-shadow: none;
}

a:focus,
input:focus,
button:focus,
textarea:focus,
select:focus {
  outline : 1px dashed #999 !important;
}


textarea{
  border: 1px solid #dde2e6;
  padding:20px;
}



/*** etc ***/
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt50{margin-top:50px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}


#wrap{
   width:100%;
   margin:auto;
   position:relative;
   background: #000;
   color:#fff
}

#container{
   position: relative;
   width: 100%;
}

.content{
  width:100%;
  padding:0
}

.login #container, .login .content{
  height:100%;
}



/*** header ***/
#header{
  width:100%;
  /*max-width:1680px;*/
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index:2;
}

#header.active{
  /*backdrop-filter: saturate(200%) blur(15px);*/
  background: rgba(0, 0, 0, .7);
  transition-duration: 0.5s;
  transition-timing-function: ease;
}

#header.deactive{
  background-color: transparent;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}

#gnb{
  height:90px;
  padding:33px 100px;
  margin:auto;
}

#gnb .logo{
  float:left;
  width:200px;
  height:20px;
  margin-top:0px
}

#gnb .logo a{
  width:100%;
  height:100%;
  display:block;
  background-image: url(../images/logo_w.png);
  background-repeat: no-repeat;
  background-size:100px;
}
/*
#header.active #gnb .logo a{
  background-image: url(../images/logo.png);
}
*/
#gnb .logo img{
  height:20px
}

#gnb .logo a{
  display: block;
}

#gnb .menu{
  float:right;
  width: calc(100% - 280px);
}

#gnb .menu > ul > li{
  float:left;
  margin-right:7%
}

#gnb .menu > ul > li:last-child{
  margin:0
}

 #gnb .menu > ul > li > a{
  font-size:19px;
  display: block;
  position:relative;
  transition: color 0.3s;
  color:#fff;
  line-height:normal;
}

#gnb .menu > ul > li > a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -32px;
  width: 100%;
  height: 3px;
  background: #fff;
  opacity: 0;
  transform: translateY(5px);
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none;
}

#gnb .menu > ul > li.on > a{
  font-weight:bold;
}

#gnb .menu > ul > li.on > a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -34px;
  width: 100%;
  height: 3px;
  background: #fff;
  opacity: 1;
}

#gnb .menu > ul > li > a:hover:before, #gnb .menu > ul > li > a:focus:before {
  opacity: 0;
  transform: translateY(-2px);
}

#gnb .menu > ul > li > a:hover:after, #gnb .menu > ul > li > a:focus:after {
  opacity: 1;
  transform: translateY(0px);
}

#gnb .menu > ul > li > a:hover{
  font-weight:bold;
}

#gnb .nav-btn, #gnb .nav-copy, #gnb .close-btn {
  display:none
}





#scroll-top{
   position: fixed;
   right: 25px;
   bottom: 25px;
   z-index: 999;
   display:inline-block;
   width:57px;
   height:57px;
   line-height:57px;
   border-radius:5px;
   text-align:center;
   font-size:12px;
   background:#d6e1e9;
}




/*** footer ***/
#footer{
  width:100%;
  display:inline-table;
  z-index:100;
  background:#000;
  /*background: linear-gradient(-170deg, #15284d, #07132b);*/
  padding:55px 100px;
}

#footer .logo{
  float:left;
  width:175px;
  margin-right:80px;
  opacity:0.4
}

#footer .logo img{
  height:20px
}

#footer .text{
  font-size:18px;
  line-height:25px;
  font-weight:400;
  float:left;
  width:calc(100% - 300px);
  color:rgba(255,255,255,.7);
}

#footer .text span{
  display: block;
  font-size:13px;
  font-weight:300;
  margin-top:5px
}

#footer i{
  font-size:15px;
  margin-right:10px;
  padding-left:20px
}

#footer i.phone{
  background: url(../images/phone_icon.png) no-repeat center left;
  background-size:15px;
}

#footer i.mail{
  background: url(../images/sms_icon.png) no-repeat center left;
  background-size:17px;
  padding-left:24px
}




/*** login ***/
.login .content{
   padding:0;
   height:100%
}

.login-form{
   height:100%
}

.login-form .l-form{
   position:relative;
   width:45%;
   height: 100%;
   background:url(../images/login_background.png) no-repeat left top
}

.login-form .title{
   padding-left:14%;
   padding-top:25%;
}

.login-form .title .logo{
   margin-bottom:60px
}

.login-form .title h2{
   color:#fff;
   font-size:55px;
   line-height:65px
}

.login-form .box{
  overflow: hidden;
	width:55%;
  height:100%;
	padding:200px 10%;
  background:#fff;
  position:absolute;
  right:0;
  top:0
}

.login-form .b-tit{
  text-align:center;
  font-size:33px;
  font-weight:bold;
  margin-bottom:20px;
}

.login-form .b-tit span{
  display:block;
  font-size:17px;
  margin-top:20px
}

.login-form .box .login-input{
	padding:20px 0px;
	text-align:left
}

.login-form .box .login-input ul{
	margin-bottom:10px
}

.login-form .box .login-input li {
   position:relative;
}

.login-form .box .login-input li > label{
   font-size:20px;
   font-weight:bold;
   position:absolute;
   left:0;
   top:35px;
}

.login-form .box .login-input li > input{
   height:90px;
   line-height:90px;
   padding-left:110px;
   width:100%;
   font-size:20px;
   font-weight:300;
   color:#5d5d5d;
   border:0;
   border-bottom:1px solid #dfe6ec
}

.login-form .box .login-btn a{
	display:block;
	background: linear-gradient(0deg, #07132b, #15284d);
	color:#fff;
  font-size:22px;
  font-weight:600;
  height:74px;
  line-height:74px;
  text-align:center;
  width:100%;
}


@media screen and (max-width:1479px){
  #gnb .menu{width: calc(100% - 240px);}
  #gnb .menu > ul > li{margin-right:5%}
}

@media screen and (max-width:1279px){
  #gnb{padding: 33px 50px;}
  #gnb .menu{width: calc(100% - 200px);}
  #gnb .menu > ul > li{margin-right:4%}
  #gnb .menu > ul > li > a{font-size:17px}
  .login-form .title{padding-left: 10%; padding-top: 20%;}
}

@media screen and (max-width:1099px){
  #gnb{height:70px; padding:0 20px}
  #gnb .logo{margin-top:25px}
  #gnb #nav{display: block; position: fixed; top:0; right: -100%; width:100%; height: 100%; z-index: 900; overflow-y:auto; backdrop-filter: saturate(200%) blur(15px); background: rgba(0, 0, 0, .7); padding:70px 40px 50px 40px}
  #gnb .nav-btn{display:inline-block; vertical-align:middle; background: url(../images/menu_icon_w.png) no-repeat center center; background-size:25px; width:25px; height:25px; position: absolute; right:20px; top:20px}
  #gnb .close-btn{display:inline-block; position:absolute; z-index: 1; right:20px; top:20px; width:20px; height:20px; text-align:center; background:url(../images/close_b.png); background-size:20px; width:20px; height:20px}
  #gnb .language{margin:0; position:absolute; right:75px; top:82px}
  #gnb .language .item-list{top:30px}
  #gnb .language > a{font-size:16px}
  /*#gnb .menu > ul{float:none; width:100%; padding:35px 30px; background:#fff; border-radius:15px}*/
  #gnb .menu > ul > li{float:none; width:100%; margin:0 0 40px 0}
  #gnb .menu > ul > li:last-child{margin:0}
  #gnb .menu > ul > li > a{font-size:24px; font-weight:500; background-repeat: no-repeat; background-position: center left; background-size:23px;}
  #gnb .menu > ul > li.on > a{color:#3a74f8}
  #gnb .menu > ul > li > a::after, #gnb .menu > ul > li.on > a::after{content:none}
  #gnb .nav-copy{display:block; margin-bottom:50px}
  #gnb .nav-copy .scopy{font-size:15px; color:#fff}

  #footer{padding:40px 20px; text-align:center;}
  #footer .logo{float:none; margin:0 auto 20px;}
  #footer .text{float:none; width:100%}
  #footer i{font-size:13px}

  .login-form .l-form{display:none}
  .login-form .box{float:none; width:100%}
  .login-form .box .login-btn a{height:65px; line-height:65px}
  .login-form .box .login-input li > label{font-size:18px}
  .login-form .box .login-input li > input{height:80px; line-height:80px; font-size:18px}
  .login-form .box .login-btn a{height:60px; line-height:60px; font-size:18px}
}