@charset "utf-8";
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

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;font-size: 100%;font:inherit;vertical-align: baseline;background: transparent; box-sizing: border-box;}

a:link { text-decoration: none; }
a:hover{ text-decoration: none; }
a:visited { text-decoration: none;}
a:active { text-decoration: none;}

body {line-height: 1; background: #fff; color: #000;}
ol,ul { list-style:none; }
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary { display: block;}
nav ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; color:#555}
ins { background-color: #ff9; color: #000; text-decoration: none;}
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help;}
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0;}
/*caption { text-indent:-9999em; font-size:0; line-height:0;}*/
caption {width: 100%; height: 1px; color: transparent; overflow: hidden; position: relative;}
input, select { vertical-align: middle; font-family: inherit;}
button{ border: 0; padding: 0; margin: 0; background: transparent; }
input, textarea, select, button {font-family: inherit;}
table{font-size:inherit;}
pre,code,kbd,samp,tt{font-family:monospace; font-size:108%;line-height:100%;}
.content legend {overflow:hidden;visibility:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}



/* Default Document Style */
html {font-size:62.5%; height: 100%;}
body {  
  margin: 0;
  padding: 0;
  border: none; 
  color:#fff;
  font-size: 1.6rem;
  font-style: normal;       
  background: transparent;
  height: 100%;
  width: 100%;    
  line-height: 1.5;
  letter-spacing: -0.5px;
  font-weight: 400;
  font-family: 'Pretendard', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', sans-serif;
  transform-origin:center center;
	word-break: keep-all;
}


* {box-sizing: border-box; margin:0; padding:0;}
img {vertical-align:top; border:0; margin:0; padding:0; max-width: 100%;}
span, a, strong, i, em {display: inline-block}
table {width: 100%; }
strong {font-weight: 500; color:#000;}

/* skipToContent */
#skipToContent a {position:absolute;top:0px;left:0px;z-index:9999;width:100%;height:1px;margin-top:-1px;display:block;background-color:#3875c1;font-size:14px;font-weight:500;color:#fff;line-height:1;text-align:center;overflow:hidden;}
#skipToContent a:focus,
#skipToContent a:active {margin-top:0px;height:auto;padding:10px 0px;}

/*---------- Input ----------*/
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"] { width: 100%; height: 42px; line-height: 42px; line-height: normal; padding:0 15px; vertical-align: middle; box-sizing: border-box; border:0; outline: none; background: #eee;}
input:read-only { border-color:#ccc }


/* Placeholder */
::placeholder { color: #999; opacity:1;}

/* Textarea */
textarea {padding:15px; border: 1px solid #ddd; background: #f4f4f4; height:300px; width: 100%; outline: none; }
textarea.sm {height: 100px;}


/* Select */
select {position: relative; appearance: none; cursor: pointer; width:100%; min-width: 100px; height:42px; padding:0 40px 0 15px; border:0; background:#eee url(img/ico-select.png) no-repeat; background-position: calc(100% - 15px) 50%; vertical-align: middle; color:#000; outline: none;}
select option {color:#000; }
select::-ms-expand {display:none;}


/* Checkbox */
.check-set input[type="checkbox"] {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);}
.check-set input[type="checkbox"] + label {margin-right:20px; cursor: pointer; font-weight: 400; display:flex; gap:10px; align-items: center; font-size: 1.5rem;}
.check-set input[type="checkbox"]:last-of-type + label {margin-right: 0;}
.check-set input[type="checkbox"] + label:before {content: ''; display:block; width:20px; height:20px; vertical-align:middle; background:url(img/check-radio.png)no-repeat 0px 0; cursor:pointer; }
.check-set input[type="checkbox"]:checked + label {color:#000; }
.check-set input[type="checkbox"]:checked + label:before {background:url(img/check-radio.png) -20px 0 no-repeat;}
.check-set input[type="checkbox"] + label span {width: calc(100% - 30px)}
//.check-set input[type="checkbox"]:focus + label:before {border:1px solid #000;}
.check-set.grid label {margin-bottom: 10px;}
.check-set a {text-decoration: underline; color:#666}


/*---------- Button ----------*/
button {cursor: pointer; vertical-align: middle; }
.btn {padding:0 20px; margin:0; background: #000; color:#fff; height: 55px; line-height: 55px; font-size: 1.8rem;  width: 100%; text-align: center; font-weight: 800; vertical-align: middle;}
.btn-b {font-size: 1.5rem; margin:0 2px; padding:0 20px; background:#fff; border:1px solid #000; color:#000; height: 55px; line-height: 55px;  min-width:90px; text-align: center; border-radius:5px; font-weight: 800; vertical-align: middle; transition: all .3s ease;}
.btn-m {padding:0 20px; margin:0 2px; background: #6c7176; color:#fff; height: 45px; line-height: 45px;  min-width: 100px; text-align: center; border-radius: 5px; font-weight: 800; vertical-align: middle;}
.btn-b:hover {background: #000; color:#fff;}
.btn-xs-b {font-size: 1.2rem; margin:0 2px; padding:0 10px; background: #fff; border:1px solid #333; color:#333; height: 28px; line-height:26px;  min-width: 60px; text-align: center; border-radius: 2px; font-weight: 700; vertical-align: middle;}
.btn-s {padding:0 10px; margin:0 2px; background: #333; color:#fff; min-width: 70px; height: 45px; line-height: 45px; text-align: center; border-radius: 2px; vertical-align: middle;}
.btn-xs {padding:0px 10px; margin:0 2px; background: #fff; color:#333; border:1px solid #333; min-width: 50px; height: 28px; line-height: 27px; text-align: center; border-radius: 2px; font-size: 1.2rem; font-weight: 800;}
.btn-arr {padding:0 20px; margin:0 2px; background: #fff; height: 65px; line-height: 65px;  min-width: 120px; text-align: center; border-radius: 5px; vertical-align: middle; border:1px solid #ddd; font-size: 2rem; }


/* Upload */
.upload_set { display: flex; justify-content: space-between; position: relative; align-items: center; width: 100%}
input.upload_text { width:80%; display: none;}
.upload_btn_wrap input.input_file { position:absolute; top:0%; right:0; width: 100%;  height: 100%; cursor:pointer; opacity:0;}
.upload_btn_wrap input.input_file:focus + label {background: #999; color:#fff;}
.upload_btn_wrap { overflow:hidden; position:relative; float:left; width:145px; height:42px; }
.upload_btn_wrap label {width:100px; height:42px; line-height: 42px; background: #999; color:#fff; vertical-align: top; display: block; text-align: center;  }
.upload_set .btn-delete {width: 20px; height: 20px; background: #999 url(img/ico-delete.svg)no-repeat 50% 50%;  position: absolute; top:12px; right: 135px; border-radius: 100px; background-size: 10px;}
.upload_list {display: flex; align-items: center; gap:5px;}
.upload_list li {display: flex; align-items: center; position: relative;}
.upload_list li:last-of-type {margin-bottom: 0;}
.upload_list li a {color:#000; margin-left: 10px; flex-shrink: 0;}
.upload_list li a:hover {text-decoration: underline;}
.upload_list li .img {width:70px; height: 45px; position: relative; border:1px solid #ccc; border-radius: 2px; }
.upload_list li .img img {position: absolute; top:0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.upload_list li .img .btn-delete-ico {position: absolute; top:2px; right: 2px; margin:0; width:12px; height: 12px; background:#fff url(img/ico-close-b.png) no-repeat 50% 50%; background-size: contain;}
.upload-img {display: flex; align-items: center; gap:10px;}
.upload-img .img {width:70px; height: 50px; position: relative; border:1px solid #ccc; border-radius: 2px; }
.upload-docu {display: flex; align-items: center; gap:0px;}


/* Text Color */
.txt-color-black {color: #000 !important;}
.txt-color-dgray {color: #222 !important;}
.txt-color-gray {color: #bbb !important;}
.txt-color-ltgray {color:#838383 !important;}
.txt-color-red {color: #e60012 !important;}
.txt-color-yellow {color: #f7ae00 !important;}
.txt-color-cyan {color: #00b1f0 !important;}
.txt-color-blue {color: #005b9e !important;}
.txt-color-navy {color: #063c6d !important;}
.txt-color-skyblue {color: #378ee0 !important;}
.txt-color-cobalt {color: #053868 !important;}
.txt-color-white {color: #fff !important;}
.txt-color-aqua {color: #01b4bb !important;}
.txt-color-green {color: #7ec356 !important;}
.txt-color-orange {color: #f04e30 !important;}

/* bg Color */
.bg-black {background-color: #000 !important;}
.bg-cyan {background-color: #01b3bb !important;}
.bg-blue {background-color: #0066cc !important; }
.bg-lt-blue {background-color: #496877 !important; }
.bg-sky {background-color: #99ccff !important; color:#333 !important;}
.bg-whgrey {background-color: #f5f5f5 !important;}
.bg-white {background-color: #fff !important; color:#005b9e !important;}
.bg-grey {background-color: #888888 !important;}
.bg-dk-grey {background-color: #555 !important;}
.bg-yellow {background-color: #ffcc00 !important;}
.bg-green {background-color: #abdc15 !important;}
.bg-red {background-color: #ff0033 !important;}
.bg-orange {background-color: #ff9900 !important;}

/* float */
.f-left {float: left;}
.f-right {float: right;}
.f-none {float: none !important;}
.clearfix {clear:both !important;}
.clear:after {clear:both;display:block;content:'';}

/* Text Style */
.txt-hidden {text-indent: -9999em; font-size:0; color: transparent;}
.txt-cnt {text-align:center !important;}
.txt-left {text-align:left !important;}
.txt-right {text-align:right !important;}

/* hidden */
.hidden, legend { visibility: hidden; overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0; margin:0; padding:0; background:none}

/*view*/
.pc-view {display: block !important;}
.mo-view {display: none !important;}

/*icon*/
i {display: inline-block; vertical-align: middle; background-size: contain !important;}

/*border*/
.bo-0 {border:0 !important;}

/*spacing*/
.p-0 {padding:0 !important;}
.pt-0 {padding-top:0 !important;}
.pt-20 {padding-top:20px !important;}
.pt-30 {padding-top:30px !important;}
.pt-40 {padding-top:40px !important;}
.pb-0 {padding-bottom:0 !important;}
.ph-20 {padding:20px 0 !important;}
.pw-20 {padding:0 20px !important;}

.m-0 {margin:0 !important;}
.mt-0 {margin-top:0 !important;}
.mt-10 {margin-top:10px !important;}
.mt-20 {margin-top:20px !important;}
.mt-30 {margin-top:30px !important;}
.mb-0 {margin-bottom:0 !important;}
.mb-10 {margin-bottom:10px !important;}
.mb-20 {margin-bottom:20px !important;}
.mb-30 {margin-bottom:30px !important;}
.mb-40 {margin-bottom:40px !important;}
.mb-50 {margin-bottom:50px !important;}
.mh-20 {margin:20px 0 !important;}
.mw-20 {margin:0 20px !important;}


/* form */
.flex {display: flex; gap:4%; flex-wrap: wrap; width: 100%;}
.jc-between {justify-content: space-between}
.jc-start {justify-content: flex-start}
.al-top {align-items: self-start}
.al-cnt {align-items: center}

.col {flex-grow: 1 }
.col1 {width:13.333%;}
.col2 {width:29.3%;}
.col3 {width:48%;}
.col4 {width:64.333%;}
.col5 {width:80.666%;}
.col6 {width:100%;}

.ico-require {vertical-align: middle; display: inline-block; margin-left: 5px;}
.ico-require:before {content: '*'; display: block; font-weight: 800; color:#ff0000; }
.fm-msg {font-size: 1.3rem; width: 100%; font-weight: 400; color:#666;}
.fm-err-msg {font-size: 1.3rem; width: 100%; font-weight: 600; color:#e34343; display: none; margin:2px 0;}
.s-txt {font-size: 1.5rem; }

.fm-section {margin-bottom: 10px;}
.fm-section .fm-tit {  position: relative; margin-bottom: 3px; display: flex; gap:7px; align-items: center; flex-wrap: wrap;}
.fm-section .fm-txt {margin-bottom: 10px; min-height: 40px; display: flex; align-items: center; gap:10px; flex-wrap: wrap;}
.fm-section .fm-txt .txt {border-bottom: 2px solid #ccc; display: flex; align-items: center; min-height: 30px; width: 100%; padding:0 12px 10px 12px; line-height: 1.6; word-break: break-all;}
.fm-section .input-num {position: relative; width: 100%;}
.fm-section .input-num input[type="text"] { padding-right: 40px; text-align: right;}
.fm-section .input-num span {position: absolute; top:50%; right: 10px; transform: translateY(-50%)}

/*---------- Popup ----------*/
.popup-wrap { display: none; position: fixed; z-index: 9; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); color:#000;}
.popup-wrap .close-btn {position: absolute; top: 18px; right:20px; cursor: pointer; background: url('img/ico-close-b.png') no-repeat 50% 50%; width:30px;height:30px; background-size: 15px; text-indent: -9999px; z-index: 2}
.popup-wrap .popup-inner { background-color: #fefefe; position: absolute; top:0; left: 50%;  text-align: left; width: 95%; max-width: 750px; margin:5vh auto; transform: translateX(-50%);  border:1px solid #000; }


.popup-wrap .popup-top {background: #fff; position: relative; padding:20px;}
.popup-wrap .popup-top .popup-tit {font-size: 2rem; color:#000; font-weight: 800;}
.popup-wrap .focus-return { position: absolute; top:0; left: -999999px; opacity: 0;}
.popup-wrap .popup-con {padding:20px; line-height: 1.4}
.popup-wrap .popup-con .txt-box {margin:10px 0; font-weight: 600;}
.popup-wrap .popup-con .txt1 {margin-bottom: 15px; padding-left: 12px; position: relative; font-size: 1.5rem; }
.popup-wrap .popup-con .txt1:before {content:'*'; display: block; position: absolute; top:0; left: 0; color:#e73a33; font-size: 1.5rem; font-weight: 700;}
.popup-wrap .video-box {position: relative; padding-top: 56.4%;}
.popup-wrap .video-box iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
.popup-wrap .popup-alarm {padding-top:60px;}
.popup-wrap .popup-alarm p {text-align: center; margin-bottom: 10px;}
.popup-wrap .popup-alarm p:last-of-type {margin-bottom: 0;}

body {background: #171717;}
.wrap .content {height:100vh; max-width: 1200px; margin:0 auto; padding:30px 20px; display: flex; align-items: center; justify-content: space-between}
.wrap .content .txt-box {width: 48%; text-align: center}
.wrap .content .txt-box h1 {font-size: 4.5rem; font-weight: 600; margin:30px 0 10px 0;}
.wrap .content .txt-box p {font-size: 2.3rem; margin-bottom: 100px;}
.wrap .content .form {width: 43%; background: #fff; padding:5%; color:#000;}

.notice {background: #000;}
.notice .inner {max-width: 1200px; margin:0 auto; padding:50px 20px;}
.notice .inner h2 {font-size: 1.8rem; margin-bottom: 15px;}
.notice .inner ul li {font-size: 1.4rem; margin-bottom: 5px; color:#999;}

@media all and (max-width:1200px) {
    .wrap .content {padding:5%; height: auto;}
    .notice .inner {padding:40px 5%}
    .wrap .content .form {padding:25px; width: 47%}
    .wrap .content .txt-box h1 {font-size: 4rem;}
    .wrap .content .txt-box p {font-size: 2rem;}
}
@media all and (max-width:900px) {
    .wrap .content {display: block;}
    .wrap .content .txt-box {width:100%; margin-bottom: 30px;}
    .wrap .content .txt-box img:first-of-type {width:30%}
    .wrap .content .txt-box img:last-of-type {width:10%}
    .wrap .content .form {width:100%}
     .wrap .content .txt-box h1 {font-size: 4rem; margin:20px 0 10px 0}
    .wrap .content .txt-box p {font-size: 2rem; margin-bottom: 30px}
    
}
@media all and (max-width:600px) {
    .wrap .content .txt-box {margin-bottom: 20px;}
    .wrap .content .txt-box img:first-of-type {width:40%}
    .wrap .content .txt-box img:last-of-type {width:15%}
     .wrap .content .txt-box h1 {font-size: 3.3rem; margin:20px 0 10px 0}
    .wrap .content .txt-box p {font-size: 1.7rem; margin-bottom: 30px}
    .wrap .content .form {padding:15px;}
    
}

/*클로즈팝업*/
body {overflow: hidden}
.close-popup {position: fixed; top:0; left: 0; width:100%; height: 100%; z-index: 9; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; color:#fff; font-size: 3rem; text-align: center;}
.btn-submit {pointer-events: none;}

@media all and (max-width:600px) {
    .close-popup {font-size: 5vw;}
    
}