@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/** 초기화 **/
/* html, body { height: 100%; color: #333; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; word-break: keep-all; }
html, body, div, p, span, a, img, h1, h2, h3, h4, h5, label, input, button, textarea, header, footer, section, nav, ul, li, dl, dt, dd { margin: 0; padding: 0; border: 0; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; } */
.intro-page { height: 100%; color: #333; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; word-break: keep-all; }

.intro-page button { margin: 0; padding: 0; border: 0; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; }
.intro-page h2 { font-size: 56px; line-height: 1.2em; }
.intro-page h3 { font-size: 36px; }
.intro-page h4 { font-size: 24px; }

.intro-page a { color: #333; text-decoration: none; cursor: pointer; }
.intro-page a:link { color: #333; text-decoration: none; }
.intro-page a:visited { color: #333; text-decoration: none; }
.intro-page a:active { color: #333; text-decoration: none; }
.intro-page a:hover { color: #645cff; text-decoration: none; }

.intro-page ol, ul, li { list-style: none; }
.intro-page button { cursor: pointer; }

.intro-page .ul_h:after { display: block; clear: both; content: ''; }
.intro-page .ul_h > li { float: left; }

.intro-page .bg_span { display: inline-block; padding: 3px; background: #645cff; color: #fff; }
.intro-page .big_txt { font-size: 46px; }
.intro-page .txt_desc { font-size: 0.8em; }
.intro-page .essential { color: #f24b4b; }
.intro-page .color { color: #645cff; }
.intro-page .gray { color: #acacac; }

/** 레이아웃 **/
.intro-page .wrapper { width: 100%; height: 100%; }

.intro-page #header { position: fixed; top: 0; width: 100%; height: 85px; z-index: 10; }
.intro-page #footer { width: 100%; background: #f7f7f7; border-top: 1px solid #e7e7e7; }

.intro-page .content { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; }
.intro-page section { padding: 100px 0; }
.intro-page section h2 { margin-bottom: 80px; text-align: center; }

.intro-page #header:after { display: block; clear: both; content: ''; }
.intro-page #header .logo { width: 200px; height: 33px; margin: 20px 80px 0 0; background: url('../images/intro/logo_white.png') no-repeat; float: left; }
.intro-page #header .gnb_list { float: right; margin: 0 15px; line-height: 85px; font-weight: 300; }
.intro-page #header .gnb_list a { color: #fff; }
.intro-page #header .gnb_list div { color: #fff; }
.intro-page #header .btn_wrap { float: right; line-height: 40px; margin-top:20px;}
.intro-page #header .login_btn { min-width: 120px; height: 42px; border: 2px solid #fff; border-radius: 21px; background: transparent; color: #fff; font-weight: 500; }
.intro-page #header .menu_btn { display: none; }

.intro-page #header:hover, #header.roll { border-bottom: 1px solid #ececec; background: #fff; }
.intro-page #header:hover .logo, #header.roll .logo { background: url('../images/intro/logo.png') no-repeat; }
.intro-page #header:hover .gnb_list a, .intro-page #header:hover .gnb_list div, #header.roll .gnb_list a { color: #333; }
.intro-page #header:hover .gnb_list a:hover, .intro-page #header:hover .gnb_list div:hover, #header.roll .gnb_list a:hover { color: #645cff; font-weight: 600; }
.intro-page #header:hover .login_btn, #header.roll .login_btn { border: 0; background: #645cff; color: #fff; }

.intro-page #visual { height: 100%; padding: 0; background: url('../images/intro/bg.png') no-repeat 50% 50%;  }
.intro-page #visual .content { padding: 120px 0; }
.intro-page #visual .content:after { display: block; clear: both; content: ''; }
.intro-page #visual .visual_img, #visual .visual_text { float: right; }
.intro-page #visual .visual_text { position: absolute; top: 36%; height: 50px; color: #fff; }
.intro-page #visual .visual_text br { display: none; }
.intro-page #visual .visual_text p { font-size: 30px; font-weight: 400; }
.intro-page #visual .visual_text .btn1 { min-width: 240px; height: 60px; margin-top: 85px; border-radius: 30px; background: #fff; color: #645cff; font-size: 20px; font-weight: 700; }
.intro-page #visual .visual_img { width: 703px; height: 473px; background: url('../images/intro/visual_img.png') no-repeat; }

.intro-page #introduction { text-align: center; font-size: 20px; }
.intro-page #introduction .intro_icon_wrap { width: 1000px; margin: 100px auto 0 auto; }
.intro-page .intro_icon_wrap ul:after { display: block; clear: both; content: ''; }
.intro-page .intro_icon_wrap ul li { width: 33.3%; margin-bottom: 60px; float: left; }
.intro-page .intro_icon_wrap ul li p { margin-top: 5px; }

.intro-page #function { background: #f7f7f7; }

.intro-page .func_list { font-size: 20px; }
.intro-page .func_list h3 { line-height: 50px; font-weight: 600; }
.intro-page .func_list > li h3:before { display: inline-block; width: 50px; height: 50px; margin-right: 10px; border-radius: 20px; background: #645cff; color: #fff; text-align: center; font-size: 24px; font-weight: 600; }
.intro-page .func_list > li:nth-child(1) h3:before { content: '1';}
.intro-page .func_list > li:nth-child(2) h3:before { content: '2';}
.intro-page .func_list > li:nth-child(3) h3:before { content: '3';}
.intro-page .func_list > li:nth-child(4) h3:before { content: '4';}
.intro-page .func_list > li:nth-child(5) h3:before { content: '5';}
.intro-page .func_list > li:nth-child(6) h3:before { content: '6';}

.intro-page .func_list > li > dl > dd { margin: 40px 0; }
.intro-page .func_list > li > dl > dd:after { display: block; clear: both; content: ''; }
.intro-page .func_list > li dd > img { margin: 0 50px; }
.intro-page .func_list > li dd > img, .func_list > li dd > .func_desc { float: left; }
.intro-page .func_list > li:nth-of-type(2n) dd > img { float: right; }

.intro-page .func_desc { margin: 30px 0 0 50px; }
.intro-page .func_desc li { margin: 20px 0; }
.intro-page .func_desc li:before { display: inline-block; width: 18px; height: 14px; margin-right: 10px; background: url('../images/intro/check.png') no-repeat; content: ''; }

.intro-page .func_desc .txt_desc { display: block; margin-left: 30px; color: #b0b0b0 }

.intro-page .row { width: 1000px; margin: 0 auto; }
.intro-page .row:after { display: block; clear: both; content: ''; }

.intro-page #charge .row > div { padding: 30px 40px; border-radius: 15px; -webkit-box-shadow: 0px 0px 24px 5px rgba(0,0,0,0.05); box-shadow: 0px 0px 24px 5px rgba(0,0,0,0.05); }
.intro-page #charge .box1 { width: 55%; height: 300px; float: left; }
.intro-page #charge .box2 { width: 42%; height: 300px; float: right; background: #f2f2f2; }

.intro-page #charge .row > div h4 { margin-bottom: 30px; font-weight: 600; }
.intro-page #charge .row ul li { margin-bottom: 10px; }

.intro-page #inquiry .inquire_form > div { width: 49%; margin-bottom: 30px; float: left; }
.intro-page #inquiry .inquire_form > div:nth-of-type(2n) { width: 49%; float: right; }
.intro-page #inquiry .inquire_form > div.full { width: 100%; clear: both; }

.intro-page #inquiry .inquire_form label { display: block; margin-bottom: 5px; }
.intro-page #inquiry .inquire_form input[type="text"] { width: 100%; height: 52px; padding: 0 8px; border: 1px solid #ddd; }
.intro-page #inquiry .inquire_form textarea { width: 100%; padding: 8px; border: 1px solid #ddd; }
.intro-page #inquiry .btnWrap { text-align: center; }
.intro-page #inquiry .btnWrap button { min-width: 240px; height: 60px; background: #645cff; color: #fff; font-size: 16px; }

.intro-page #tel { padding: 80px 0; background: #f1f2fe; text-align: center; }
.intro-page #tel p { font-size: 20px; }
.intro-page #tel h2 { margin: 0; }

.intro-page #footer { padding: 50px 0; color: #999; }
.intro-page #footer .ul_h li:after { display: inline-block; width: 1px; height: 10px; margin: 0 10px; background: #dbdbdb; content: ''; }
.intro-page #footer .ul_h.info li:nth-child(1) { float: none; }
.intro-page #footer .ul_h.info li:nth-child(1):after,
.intro-page #footer .ul_h li:last-child:after { display: none; }
.intro-page #footer .ul_h.policy { font-size: 0.9em; }
.intro-page #footer p { margin-bottom: 20px; }
.intro-page #footer a { color: #999; }

@media ( max-width: 435px ) {
  .intro-page #header .gnb_list { display: none; }
}

@media ( max-width: 1200px ) {
  .intro-page .ul_h > li { clear: both; }
  .intro-page .content { width: 95%; }

  
  .intro-page #header .menu_btn { display: inline-block; position: relative; top: 16px; width: 42px; height: 42px; background: transparent; }
  .intro-page .st0 { fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; }
  .intro-page #header:hover .st0, #header.roll .st0 { stroke: #645cff; }

  .intro-page #visual .visual_img { filter: blur(8px); -webkit-filter: blur(8px); }
  .intro-page #visual .visual_text { width: 100%; text-align: center; text-shadow: 0px 0px 8px rgba(0,0,0,0.53); }
  .intro-page #visual .visual_text br { display: block; }
  .intro-page #visual .visual_text .btn1 { margin-top: 0; }

  .intro-page #introduction { font-size: 18px; }
  .intro-page #introduction .intro_icon_wrap { width: 100%; }
  .intro-page #introduction .intro_icon_wrap ul li { width: 50%; }

  .intro-page #function img { width: 100%; }
  .intro-page .func_list > li > dl > dd { margin-top: 10px; }
  .intro-page .func_list > li dd > img { margin: 0; }

  .intro-page .func_desc { margin-top: 0; }

  .intro-page .row { width: 100%; }

  .intro-page #footer .ul_h > li { clear: inherit; }
}

@media ( max-width: 720px ) {
  .intro-page section { padding: 60px 0; }
  .intro-page h2 { font-size: 44px; }
  .intro-page h3 { font-size: 30px; }

  .intro-page .big_txt { font-size: 36px; }

  .intro-page #header .logo { width: 150px; height: 24px; margin: 28px 20px 0 0; background-size: cover; }
  .intro-page #header:hover .logo, #header.roll .logo { background-size: cover;  }

  .intro-page #visual .visual_text p { font-size: 24px; }

  .intro-page #introduction { font-size: 16px; }
  .intro-page #introduction .intro_icon_wrap ul li { width: 100%; }

  .intro-page .func_list { font-size: 18px; }
  .intro-page .func_desc { margin-left: 0; }

  .intro-page #charge .box1 { width: 100%; height: auto; margin-bottom: 30px; }
  .intro-page #charge .box2 { width: 100%; height: auto; }

  .intro-page #footer { font-size: 14px; }
}

/* Begion of 로그인> 공지사항 팝업 관련 */

/* 팝업 Layer */
#szPopup_layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  /*background-color: rgba(0, 0, 0, 0.4);*/
}

/*팝업 박스*/
.szPopup_box {
  position: absolute;
  top: 0;
  max-width: 500px;
  width: 90%;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.35);
  z-index:1;
}

/*컨텐츠 영역*/
.szPopup_box .szPopup_cont {
  padding: 0px;
  width: 100%;
  line-height: 1.4rem;
  font-size: 14px;
  word-break: break-word;
}

.szPopup_box .szPopup_cont img {
  width: 100%;
}

.szPopup_box .szPopup_cont h2 {
  padding: 15px 0;
  color: #333;
  margin: 0;
}

.szPopup_box .szPopup_cont p {
  border-top: 1px solid #666;
  padding-top: 30px;
}

/*버튼영역*/
.szPopup_box .szPopup_btn {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 70px;
  background: #5d5d5d;
  word-break: break-word;
}

.szPopup_box .szPopup_btn a {
  position: relative;
  display: table-cell;
  height: 70px;
  color: #fff;
  font-size: 17px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  background: #102c5c;
}

.szPopup_box .szPopup_btn a:before {
  content: '';
  display: block;
  position: absolute;
  top: 26px;
  right: 29px;
  width: 1px;
  height: 21px;
  background: #fff;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.szPopup_box .szPopup_btn a:after {
  content: '';
  display: block;
  position: absolute;
  top: 26px;
  right: 29px;
  width: 1px;
  height: 21px;
  background: #fff;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.szPopup_box .szPopup_btn a.close_day {
  background: #5d5d5d;
}

.szPopup_box .szPopup_btn a.close_day:before,
.szPopup_box .szPopup_btn a.close_day:after {
  display: none;
}

/*오버레이 뒷배경*/
.szPopup_overlay {
  position: fixed;
  top: 0px;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 720px) {
  .szPopup_box {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    top:50px;
    transform: translate(-50%, 0);
  }
}
/* End of 로그인> 공지사항 팝업 관련 */