@charset "utf-8";
/*root*/
  :root{
    --bg:#F1F5F9;
    --bg-gray:#f7f7f7;
    --bg-dark:#3A3A3A;
    --color-primary:#1AB1FF;
    --color-primary-30:#E1F0FF;
    --color-secondary:#6B6EFF;
    --color-tertiary:#0AC5A5;
    --color-tertiary-30:#D8F2ED;
    --color-accent:#FF6060;
    --gradient-primary:linear-gradient(90deg, #6B6EFF, #3AA3FF);
    --gradient-secondary:linear-gradient(90deg, #1AB1FF, #0AC5A5);
    --title:#000;
    --text:#808C9C;
    --mute:#A8B2C1;
    --line:1px solid #D7DEE8;
    --boxshadow: 0 3px 10px rgb(224, 232, 241, 1);
    --radius: 1.5rem;
    --radius-lg: 2.5rem;
    --container: 1460px;
  }
/*base*/
.container{max-width:var(--container);margin:0 auto;position: relative; box-sizing: border-box;}
input[type="checkbox"]{width:15px;height:15px;}
input[type="radio"]{width:15px;height:15px;}
input[type="text"] {height: 46px;line-height: 46px;border: var(--line);font-size: 1.5rem;text-indent: 12px;font-family:inherit;border-radius: 8px;}
input[type="text"]:read-only {background:#e7e7e7;}
input[type="text"].price,
input[type="text"].right {text-align: right; padding-right:10px; margin:0 6px; box-sizing: border-box;}
input[type="password"]{height:48px;line-height:48px;border: var(--line); text-indent:12px; font-family:inherit;border-radius: 8px;}
input[type="date"] {width: 125px;height: 46px;line-height: 46px;border: var(--line);font-family:inherit;font-size: 1.5rem;padding: 5px;box-sizing: border-box;text-indent: 2px;background: #fff url('../images/cal_icon.png')no-repeat top 9px right 10px;border-radius: 8px;margin: 0 5px;}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {opacity:0; cursor:pointer;}
textarea{font-family:'Pretendard', sans-serif; font-size:1.6rem;width:100%;max-width:100%;min-height: 130px;border: var(--line);padding:10px;box-sizing:border-box;border-radius: 8px;}
select{width:180px;height: 46px;border: var(--line);font-size:1.5rem;padding:3px;border-radius: 8px;color: #878787}
select {
  background:url('../images/select_arrow.png') no-repeat top 18px right 14px #fff;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  text-indent: 7px;
}
select::-ms-expand { display: none; }
caption {font-size: 0;position: absolute;left: -99999px;}
.sticky {position: -webkit-sticky; position: sticky; top: 0;}
.sticky--desktop {display: none;}
.sticky:before, .sticky:after {content: ''; display: table;}
.clearfix { zoom: 1;}
.clearfix:before, .clearfix:after { content: ""; display: table;}
.clearfix:after { clear: both;}
img {max-width:100%;}
.weight-light {font-weight:300;}
.weight-bold {font-weight:700;}
.req {color:var(--red);}
.pc-img {display:block;;}
.mb-img {display:none;}
.flex {display:flex; gap:40px;}
.flex-column {flex-direction: column;}
.pc-block {display:block!important;}
.mb-block {display:none!important;}


/*margin*/
.mg-0 {margin:0px!important;}
.mg-b0 {margin-bottom:0px!important;}
.mg-b10 {margin-bottom:10px!important;}
.mg-b20 {margin-bottom:20px!important;}
.mg-b30 {margin-bottom:30px!important;}
.mg-b50 {margin-bottom:50px!important;}
.mg-b60 {margin-bottom:60px!important;}
.mg-b90 {margin-bottom:90px!important;}
.mg-b100 {margin-bottom:100px!important;}
.container .mg-b60:last-child, 
.container .mg-b90:last-child {margin-bottom:0;} 

/*width size*/
.wd-20 {width: 20%;}
.wd-30 {width:30%;}
.wd-40 {width:40%;}
.wd-50 {width:50%;}
.wd-60 {width:60%;}
.wd-70 {width:70%;}
.wd-80 {width: 80%;}
.wd-85 {width: 85%;}
.wd-100 {width:100%;}

/*tabmenu style*/
.tab-menu {background: var(--bg-gray);display: flex;border-radius: var(--radius);padding: 6px; height: 46px; overflow: hidden;}
.tab-menu > ul {display:flex; flex-wrap:wrap; width: calc(100% - 4.4rem);}
.tab-menu > ul > li a {font-size: 1.6rem;line-height: 4.6rem;padding: 0 25px;color: var(--text);position: relative;cursor: pointer;border-radius: 9px;margin-bottom: 7px;display: block;}
.tab-menu > ul > li a.on {display: flex;color: #fff;background: var(--color-primary);}
.tab-menu > ul > li a:hover {color:var(--color-primary);}
.tab-menu > ul > li a.on:hover {color:#fff;}
.tab-menu > ul > li a::after {content:'';display:block;width:1px;height:15px;background:#d7d7d7;position:absolute;top: 13px;right:0;}
.tab-menu > ul > li a.on::after {background:var(--color-primary);}
.tab-menu .more-btn {display: flex;width:4.4rem;height:4.4rem;background:#fff;border-radius:10px;box-shadow: 1px 1px 4px #dcdcdc;margin-left:auto;position: relative;gap: 6px;align-items: center;justify-content: center;}
.tab-menu .more-btn span {font-size:0;display:block;width:4px;height:4px;background:#747474;border-radius:50%;}
.tab-menu .more-btn:before {content:'';display:block;width:4px;height:4px;background: #747474;border-radius: 50%;}
.tab-menu .more-btn:after {content:'';display:block;width:4px;height:4px;background: #747474;border-radius: 50%;}
#search .tab-menu.on {height:auto;}
#search .tab-menu.on .more-btn:before,
#search .tab-menu.on .more-btn:after,
#search .tab-menu.on .more-btn span  {background:var(--color-primary);}

/* header*/
.sec-header {position: fixed;z-index:99;top:0;left:0;width:100%; background:#fff;}
.sec-header.active {box-shadow:0 0 8px 0 rgba(0,0,0,0.2);}
#header {width: 100%;max-width: var(--container);height: 85px;margin: 0 auto;display: flex;align-items: center;}
#header .logo {display:block;float:left;margin-right: 2%;width:15%;}
#header .nav-bar {width: 75%;display: flex;justify-content:center;}
.mobile-header {display:none;}
#header .nav-bar .depth1:after {clear: both;}
#header .nav-bar .depth1 > li {float: left;}
#header .nav-bar .depth1 > li.on > a:before { opacity: 1; }
#header .nav-bar .depth1 > li.on .depth2:before {opacity: 1;}
#header .nav-bar .depth1 > li > a {
    font-size: 2rem;
    line-height: 86px;
    letter-spacing:0;
    color:var(--title);
    margin: 0 35px;
    position: relative;
    font-weight: 500;
    display: block;
}
#header .nav-bar .depth1 > li > a:hover {color:var(--color-primary);}
#header .utill-menu {position:relative; width:10%; display:flex; justify-content: end; align-items: center; gap:10px;}
.language {position:relative}
.language > button {background:none;display:flex;}
.language > button > p {color:var(--text);}
.language > ul {display:none;min-width: 123px;position:absolute;top: 4.3rem; left:-60px;background:var(--color-secondary); border-radius:var(--radius);padding: 15px 12px 5px 12px;box-shadow: var(--boxshadow);}
.language.active > ul {display:block;}
.language.active > button > span {color:var(--color-secondary);}
.language > ul > li {display:block;}
.language > ul > li > a {display: block;width:100%;padding: 5px; color:#fff; border-bottom: 1px solid rgba(255,255,255,0.25); font-size: 1.3rem;text-align: center;box-sizing: border-box;}
.language > ul > li:last-child > a {border:0;}
.language > ul > li > a:hover {color:var(--color-primary);}  
.language > ul:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--color-secondary);
  clear: both;
  margin: -25px auto 5px;
}
.user-menu .depth2 {display:none;}
.user-menu > button {background:none;}
.user-menu > button > span {font-size:28px; margin-top:5px;}
.user-menu.active > .depth2 {
  display:block;
  min-width: 200px;
  position:absolute;
  top: 5rem;
  left:-35px;
  background:var(--color-secondary);
  border-radius:var(--radius);
  padding: 15px;
  box-shadow: var(--boxshadow);
}
.user-menu.active > .depth2:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-secondary);
    clear: both;
    margin: -25px auto 5px;
}
.user-menu .depth2 > strong {color:#fff; font-size:1.7rem; display:block; padding-bottom:8px; margin:10px 0; border-bottom:1px solid rgba(255,255,255,0.26);}
.user-menu.active > button > span {color:var(--color-secondary);}
.user-menu.active > .depth2 > ul > li > a {color:#fff;}
.user-menu.active > .depth2 > ul > li > a:hover {color:#6fdd7a;}  

/******************************************** intro ********************************************/
.intro {width:100%;  height:100vh; position: relative;  overflow:hidden; background:url('../images/intro_bg.png')no-repeat center; background-size: cover;}
.intro .slogan {width:100%; text-align: center;  margin-bottom:80px; color:#fff; padding-top:24rem;}
.intro .slogan > h1 {display: block; font-size:6.1rem; font-weight:600; line-height:1.2; text-shadow:0 3px 6px rgba(0,0,0,0.2); margin-bottom:20px;}
.intro .slogan > p {font-size:2.4rem; text-shadow:0 3px 6px rgba(0,0,0,0.2);}
.intro .btn-area {display:flex; justify-content: center; gap:40px;}
.intro .btn-area > a {display:flex; align-items: center; justify-content: center; line-height:70px; width:290px; border-radius:var(--radius); font-size:2rem; font-weight:500; color:#fff; box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.intro .btn-area > a > span {margin-left:8px;}
.intro .btn-area > a:hover {background:#fff;}
.intro .btn01 {background:#0055C5;}
.intro .btn02 {background:var(--color-tertiary);}
.intro .btn01:hover {box-shadow: inset 0 0 0 3px  var(--color-primary); color:var(--color-primary);}
.intro .btn02:hover {box-shadow: inset 0 0 0 3px  var(--color-tertiary); color:var(--color-tertiary);}
.intro .page-bottom {display:flex; gap:40px; position:absolute; bottom:50px; left:50px;}

/******************************************** MAIN ********************************************/


/******************************************** SUB ********************************************/
/*base*/


/*checkbox style*/
.chk-box {margin-right:8px;}
.chk-box input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.chk-box input[type="checkbox"] + label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #666;
	font-size: 1.4rem;
	margin: 0;
}

.chk-box input[type="checkbox"] + label:before {
	content: ' ';
	display: inline-block;
	width: 15px;
	height: 15px;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	border: 1px solid #a1a1a1;
	margin: 0 4px 2px 0;
	border-radius:3px;
  position:relative;
}
.chk-box input[type="checkbox"] + label:active:before,
.chk-box input[type="checkbox"]:checked + label:active:before { box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
.chk-box input[type="checkbox"]:checked + label:before {
	content: '';
	color: #ffffff;
	text-shadow: 1px 1px white;
	background: var(--color-secondary);
	border: 1px solid var(--color-secondary);
}
.chk-box input[type="checkbox"]:checked + label:after {
  content: '';
  display: block;
  width: 8px;
  height: 4px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: 7px;
  left: 4px;
  transform: rotate(135deg);
}
.chk-box input[type="checkbox"]:disabled + label:before,
.chk-box input[type="checkbox"]:disabled + label:active:before, 
.chk-box input[type="checkbox"]:disabled:checked + label:active:before {background:#e1e1e1!important;}

/*radio button style*/
.radio-btn {margin-right:8px;}
.radio-btn input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.radio-btn input[type="radio"] + label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #666;
	margin: 0;
}

.radio-btn input[type="radio"] + label:before {
	content: ' ';
	display: inline-block;
	width: 16px;
	height: 16px;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	border: 1px solid #a1a1a1;
	margin: 0 4px 3px 0;
	border-radius:50%;
}
.radio-btn input[type="radio"] + label:active:before,
.radio-btn input[type="radio"]:checked + label:active:before { box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}
.radio-btn input[type="radio"]:checked + label:before {
	content: '';
	color: #fff;
	text-shadow: 1px 1px white;
	background:#093488;
	border: 1px solid #093488;
}
.radio-btn input[type="radio"] + label:after {
	content: ' ';
	display: none;
	width: 16px;
	height: 16px;
	border-radius:50%;
	position:absolute;
	top: 2.5px;
	left: 0;
  background:#fff;
  box-shadow:inset 0 0 0 4px #093488;
  border: 1px solid #093488;
}
.radio-btn input[type="radio"]:checked + label:after {background:#fff;display: block;}
.radio-btn input[type="radio"]:checked + label {color:#093488;}
.radio-btn input[type="radio"]:disabled + label:before,
.radio-btn input[type="radio"]:disabled + label:active:before, 
.radio-btn input[type="radio"]:disabled:checked + label:active:before {background:#e1e1e1!important;}

/*file-upload*/
.file-upload {
  position:relative;
  background:#fff;
  display: flex;
  align-items: center;
  height: 46px;
  line-height: 46px;
  border: var(--line);
  font-size: 1.5rem;
  text-indent: 12px;
  font-family: inherit;
  border-radius: 8px;
}
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.file-btn {
  display: block;
  background: url('../images/file_icon.svg')no-repeat center;
  font-size:0;
  cursor: pointer;
  width: 42px;
  height: 45px;
  position:absolute;
  right:0;
}

.file-name {
  display: block;
  color: #666;
  width: calc(100% - 45px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  max-width:328px;
}

/*login*/
.login {height:100vh;background:url('../images/login_bg.png')no-repeat center;background-size: cover;position: relative;overflow: hidden;}
.login .container {position: absolute;left: 50%;top: 50%;width: 100%;transform: translate(-50%, -50%);}
.login-box {width: 40%;max-width:536px; height:715px; box-sizing: border-box;background: #fff;border-radius: var(--radius-lg);box-shadow: 0 3px 20px 0 rgba(0,0,0,0.22);padding: 54px;text-align: center;}
.login-box .title {display:block; margin-bottom:50px;}
.login-box .title strong {display: block;font-size:3.3rem;font-weight:700;color:#172C70;margin-bottom: 10px;} 
.login-box .title p {font-size:1.8rem; color:var(--text);} 
.login-form dl {display:block;margin-bottom: 25px;text-align: left;}
.login-form dl > dt {font-size:1.6rem; color:var(--title); display:block; margin-bottom:8px;}
.login-form dl > dd {display:block; width:100%;}
.login-form input {width:100%;height: 54px;box-sizing: border-box;border-radius:13px;border: 0;font-size: 16px;text-indent: 20px;background: #F7F7F7;}
.login-form input::placeholder {font-size:1.6rem; color:var(--text);}
.login-box .login-btn {
  display: flex;
  width: 100%;
  line-height: 54px;
  border-radius:13px;
  background: var(--gradient-primary);
  border:0;
  color: #fff;
  font-family: inherit;
  font-size: 1.9rem;
  font-weight: 500;
  margin-bottom:60px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-shadow:0 3px 10px rgb(0, 0, 0, 0.2);
}
.login-options {display:flex; margin-bottom:30px;}
.login-options .chk-box {margin-right:auto;}
.login-options .find-pw {margin-left:auto; color:var(--color-secondary);}
.login-options .find-pw:hover {text-decoration: underline!important;}
.chk-box input[type="checkbox"] + label {font-size:1.5rem;}
.login .logo {margin-bottom: 20px; display: flex; gap: 20px; justify-content: center;}

/********************************************  RESPONSIVE ********************************************/
@media (max-width: 1600px) {
  /******************************************** MAIN ********************************************/
  /*header*/
  #header .logo {padding-left:3%;}
  #header .utill-menu  {padding-right:3%;}
  .user-menu.active > .depth2 {left:auto; right:36px;}
  .user-menu.active > .depth2:before {margin:-25px 32px 12px 0; float:right;}
  .user-menu .depth2 > strong {margin-top:0;}

  /*footer*/

  /******************************************** SUB ********************************************/
  /*base*/

}

@media all and (max-width:1366px) {
  /******************************************** MAIN ********************************************/


  /******************************************** SUB ********************************************/
  /*login*/
  .login-box {margin-left:5%;}

}

@media all and (max-width:1024px) {
  .pc-block {display:none!important;}
  .mb-block {display:block!important;}

  /*width size*/
  .wd-30 {width:40%;}
  .wd-70 {width:60%;}

  /******************************************** intro ********************************************/
  .intro .slogan {width:90%; margin:0 auto 40px;}
  .intro .page-bottom {width:100%; justify-content: center;}
  

  /******************************************** MAIN ********************************************/

  /******************************************** SUB ********************************************/
  /*base*/

  /*login*/
  .login-box {width:90%; margin:0 auto;}

}

@media all and (max-width:900px) {
  .flex {flex-direction: column; gap:25px;}
  .flex > div {width:100%;}
  

  /******************************************** SUB ********************************************/

}

@media all and (max-width:640px) {
  /*root*/
  :root{
    --radius: 1rem;
    --radius-lg: 2rem;
  }
  /*base*/
  input[type="date"] {width:111px;}
  .file-input {margin-bottom:8px;}
  .file-input > span {width:calc(100% - 75px);}
  .pc-img {display:none;}
  .mb-img {display:block;}
  .pc-block {display:none!important;}
  .mb-block {display:block!important;}

  /*margin*/
  .mg-b10 {margin-bottom:5px!important;}
  .mg-b20 {margin-bottom:10px!important;}
  .mg-b30 {margin-bottom:15px!important;}
  .mg-b50 {margin-bottom:25px!important;}
  .mg-b60 {margin-bottom:30px!important;}
  .mg-b90 {margin-bottom:45px!important;}
  .mg-b100 {margin-bottom:50px!important;}

  /******************************************** intro ********************************************/
  .intro .slogan {padding-top:8rem;}
  .intro .slogan > h1 {font-size:3.5rem;}
  .intro .slogan > p {font-size:1.9rem;}
  .intro .btn-area {flex-direction: column; gap:15px; align-items: center;}
  .intro .btn-area > a {line-height:52px;}
  .intro .page-bottom {width:70%; left:50%; transform: translateX(-50%); gap:30px;}
  
  /******************************************** MAIN ********************************************/


  /******************************************** SUB ********************************************/
  /*base*/

  /*login*/
  .login .container {position: relative;left: auto; transform:translateY(-50%);}
  .login-box {height:auto;padding: 25px;}
  .login-box .title {margin-bottom: 20px;}
  .login-box .title strong {font-size: 2.5rem;margin-bottom:0;}
  .login-form input {height:44px; border-radius:8px;}
  .login-form dl {margin-bottom:20px;}
  .login-box .login-btn {margin-bottom: 28px;line-height: 48px; border-radius:8px;}
  .login .logo > img {height:30px;}
}

@media all and (max-height:568px) {
  .login {padding:10px 0 0 0;}
}