@charset "utf-8";
/* SIR 지운아빠 */

/* 초기화 */
*{ box-sizing: border-box;}
html {overflow-y:scroll;overflow-x:hidden}
body {margin:0;padding:0; font-size:15px; letter-spacing:-0.5px; line-height:1.3; font-family: 'Pretendard', sans-serif, '돋움'; font-weight: 400; word-break: keep-all; word-wrap:break-word; /*overflow-x: hidden;*/}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 { font-size:1rem; line-height: 1;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ol, ul, li, dd, dl, dt{list-style:none; padding:0; margin:0;}
#hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999rem;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button {cursor:pointer}
input[type=checkbox], input[type=radio]{ margin:0;}
textarea, select { font-size:1rem}
select {margin:0}
p {margin:0;padding:0;word-break:keep-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1rem}
a:link, a:visited {color:#565656;text-decoration:none}
a:hover, a:focus, a:active {color:#000;text-decoration:none;}

/* 텍스트 크기 조절 */
#text_size {float:left;margin:0 0 0 10px;letter-spacing:-3px}
#text_size button {margin:0;padding:1px 2px;border:1px solid #c3c6ca;background:transparent;vertical-align:middle;cursor:pointer}
.ts_up {font-size:1.167em !important}
.ts_up2 {font-size:1.3em !important}
/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}
/* ie6 이미지 너비 지정 */
.img_fix {width:100%;height:auto}
/* 자바스크립트 alert 대안 */
#validation_check {margin:100px auto;width:500px}
#validation_check h1 {margin-bottom:20px;font-size:1.3em}
#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff}
/* 사이드뷰 */
.sv_wrap {display:inline-block;position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;border:1px solid #283646}
.sv_wrap .sv a {display:inline-block;margin:0;padding:3px;width:94px;border-bottom:1px solid #283646;background:#111;color:#fff !important}
.sv_wrap a:focus, .sv_wrap a:hover, .sv_wrap a:active {text-decoration:none}
.sv_on {display:block !important;position:absolute;top:10px;left:20px;width:auto;height:auto}
.sv_nojs .sv {display:block}
/* Mobile화면으로 */
#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}
/*메일인증*/
.rg_em{margin-top:5px}
.rg_em caption{padding:0;font-size:0;line-height:0;overflow:hidden}

/*************** 팝업레이어 ***************/
#hd_pop {z-index:1002;position:relative;margin:0 auto;width:970px;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;background:#fff; box-shadow:0 0 3px #333}
.hd_pops_con br{ display: none !important;}
.hd_pops_footer { padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff;font-size: 12px;}
@media screen and (max-width:1279px) {
  .hd_pops { top:140px !important; left:5% !important;}
  #hd_pops_2{ left:15% !important;}
  #hd_pops_3{ left:25% !important;}
  #hd_pops_4{ left:35% !important;}
  #hd_pops_5{ left:45% !important;}
  #hd_pops_6{ left:55% !important;}
  #hd_pops_7{ left:65% !important;}
  #hd_pops_8{ left:75% !important;}
  #hd_pops_9{ left:85% !important;}
  #hd_pops_10{ left:95% !important;}
}
@media screen and (max-width:1023px) {
  #hd_pop { width:50% !important;}
  #hd_pop img{ max-width:100%}
  .hd_pops { width:100% !important; top:0px !important; left:50% !important; transform: translateX(-50%) !important;}
  #hd_pops_2{ left:50% !important; transform: translateX(-50%) !important;}
  #hd_pops_3{ left:50% !important; transform: translateX(-50%) !important;}
  #hd_pops_4{ left:50% !important; transform: translateX(-50%) !important;}
  #hd_pops_5{ left:50% !important; transform: translateX(-50%) !important;}
  #hd_pops_6{ left:50% !important; transform: translateX(-50%) !important;}
  #hd_pops_7{ left:50% !important; transform: translateX(-50%) !important;}
  #hd_pops_8{ left:50% !important; transform: translateX(-50%) !important;}
  #hd_pops_9{ left:50% !important; transform: translateX(-50%) !important;}
  #hd_pops_10{ left:50% !important; transform: translateX(-50%) !important;}
  .hd_pops img{ width:100% !important; height:100% !important}
  .hd_pops_con {width: 100% !important;height: 100% !important;}
  .hd_pops_footer { width:100% !important; padding:5px 0;}
}
@media screen and (max-width:767px) {
  #hd_pop { width:100% !important;}
  .hd_pops_footer button { padding:3px 5px; font-size: 10px;}
}

/*************** 레이아웃 ***************/

/*헤더*/
#hd { width:100%; position:fixed; top: 0px; left: 0px; z-index:23 !important; background-color:#fff;}
.hd_zindex { z-index:999 !important}
#hd_h1 { position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_wrapper { zoom:1; width: 80%; margin: 0 auto; position: relative; display: flex; align-items: center;}
#hd #logo{ margin-right: 150px;}
#price{ position: absolute; top: 10px; right: 0px; text-align: center;}
#price p{ font-size: 14px; margin-top: 8px;}
@media screen and (max-width: 1023px) {
  #hd{ box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);}
  #hd_wrapper { width: 95%; padding: 10px 0;}
  #hd #logo{ width:130px; margin: 0;}
  #hd #logo img{ width: 100%;}
  #price{ top: 12px; right: 70px; }
  #price img{ width: 25px;}
  #price p{ font-size: 12px; margin-top: 5px;}
}
@media screen and (max-width: 767px) {
  #price{ right: 60px; }
}

/* 메인메뉴 */
#gnb h2 { display:none;}
#gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb .gnb_1dli {z-index:10;position:relative;display:inline-block;}
#gnb .gnb_1da { display:inline-block; padding:30px 25px; font-size:17px; font-weight: 400; color: #666; text-decoration:none; position:relative; z-index:5;}
#gnb .gnb_1da span{ display:none; /*width:0px; height:4px; position:absolute; left:50%; bottom:0px; background:#f9aa62; transform:translateX(-50%); transition:all 0s;*/}
#gnb .gnb_1dli:focus, #gnb .gnb_1dli:hover span{ width:80px; transition:all 0.5s;}
#gnb .gnb_1dli:focus, #gnb .gnb_1dli:hover { color:#111;}
#gnb .gnb_1dli{ position:relative;}
#gnb .gnb_1dli:nth-of-type(7){ display: none;}
/*2차메뉴*/
#gnb .gnb_2dul {display:none; position:absolute; top:82px; left:50%; transform:translateX(-50%); width:170px; padding:15px 25px !important; z-index: 23;
  border-radius: 8px; background-color: #444;}
#gnb .gnb_1dli:nth-of-type(2) .gnb_2dul, #gnb .gnb_1dli:nth-of-type(3) .gnb_2dul, #gnb .gnb_1dli:nth-of-type(4) .gnb_2dul{ display: none !important;}
/*2차메뉴*/
#gnb .gnb_2da {display:block; padding:5px 0px; text-decoration:none; color: #fff; font-size: 17px; font-weight: 500;}
/*1차메뉴hover*/
#gnb .gnb_1dli:focus .gnb_1da, 
#gnb .gnb_1dli:hover .gnb_1da, 
#gnb .gnb_1dli.hov .gnb_1da{ text-decoration:none; color:#65C8CD;}
/*2차메뉴hover*/
#gnb .gnb_2da:focus, #gnb .gnb_2da:hover{ color: #65C8CD;}
#gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em}
#gnb_empty a {text-decoration:underline}

/*상담 및 예약 메뉴 따로 시작*/
#gnb_re .gnb_1dli {z-index:10;position:relative;display:inline-block;}
#gnb_re .gnb_1da { display:inline-block; padding:30px 25px; font-size:17px; font-weight: 400; color: #666; text-decoration:none; position:relative; z-index:5;}
#gnb_re .gnb_1dli:focus, #gnb .gnb_1dli:hover { color:#111;}
#gnb_re .gnb_1dli{ position:relative;}
#gnb_re .gnb_2dul {display:none; position:absolute; top:82px; left:50%; transform:translateX(-50%); width:150px; padding:15px 25px !important; z-index: 23;
  border-radius: 8px; background-color: #444;}
#gnb_re .gnb_2da {display:block; padding:5px 0px; text-decoration:none; color: #fff; font-size: 17px; font-weight: 500;}
#gnb_re .gnb_1dli:focus .gnb_1da, 
#gnb_re .gnb_1dli:hover .gnb_1da, 
#gnb_re .gnb_1dli.hov .gnb_1da{ text-decoration:none; color:#65C8CD;}
#gnb_re .gnb_2da:focus, #gnb_re .gnb_2da:hover{ color: #65C8CD;}
/*상담 및 예약 메뉴 따로 끝*/


.mobile_open{ display: none;}
.mobile_close{ display: none;}
#mobile_menu{ display: none;}
@media screen and (max-width: 1023px) {
  #gnb { display: none;}
  #gnb_re{ display: none;}
  .mobile_open { display: block; width: 50px; height: 38px; padding: 10px 15px; position: fixed; right: 3%; top: 10px; z-index: 25; cursor: pointer; }
  .mobile_open span{ display:block; width:30px; height:2px; border-radius: 5px; background-color:#666; margin-bottom:7px;}
  .mobile_open.on span{ background-color: #222;}
  .mobile_close { display: block; width: 40px; height: 48px; position:absolute; top:-60px; right:6px; cursor: pointer; z-index: 26; background-color: #fff;}
  .mobile_close span{ display: block; width: 27px; height: 2px; background-color: #666;}
  .mobile_close span:first-child{ transform: rotate(45deg); margin-top: 25px;}
  .mobile_close span:last-child{ transform: rotate(-45deg); margin-top: -2px;}

  #mobile_menu { display: block; width: 100%; height: 100%; position: fixed; top: 68px; right: -100%; z-index: 101; background-color: #fff;
    box-shadow: inset 0 7px 10px rgba(0, 0, 0, 0.1);
    transition: All 0.6s ease;
    -webkit-transition: All 0.6s ease;
    -moz-transition: All 0.6s ease;
    -o-transition: All 0.6s ease;
  }
  #mobile_menu.open { right: 0px; }
  .page_cover.open { display: block; }

  /* #mobile_muenu 너비가 100%가 아닐때, 아래에 깔리는 배경 */
  .page_cover { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0); z-index: 25; display: none; }
  #mobile_menu .hash_scroll{ position:relative; height:100%; overflow-y:scroll;}
  #gnb2 li.mgnb_1dli a.mgnb_1da{ display:block; font-weight: 400; font-size:19px; padding: 15px 20px; cursor:pointer; color:#003333!important;
  border-bottom: 1px solid #ddd;}
  #gnb2 li.mgnb_1dli a.mgnb_1da.on{ background-color: #65C8CD; font-weight: 600; color: #fff !important;}
  #gnb2 li.mgnb_1dli a.selected{}		
  /*2차메뉴*/
  #gnb2 ul.mgnb_2dul{ display: none; text-align: left; padding: 0 20px; border-bottom: 1px solid #ddd;}
  #gnb2 li.mgnb_2dli a.mgnb_2da{ font-size:15px; line-height:1.2; color:#555; display:block; padding: 15px 0; border-bottom: 1px solid #ddd;}
  #gnb2 li.mgnb_2dli:last-child a.mgnb_2da{ border-bottom: 0;}

  /*상담 및 예약 메뉴 따로 시작*/
    #gnb2_re li.mgnb_1dli a.mgnb_1da{ display:block; font-weight: 400; font-size:19px; padding: 15px 20px; cursor:pointer; color:#003333!important;
    border-bottom: 1px solid #ddd;}
    #gnb2_re li.mgnb_1dli a.mgnb_1da.on{ background-color: #65C8CD; font-weight: 600; color: #fff !important;}
    #gnb2_re ul.mgnb_2dul{ display: none; text-align: left; padding: 0 20px; border-bottom: 1px solid #ddd;}
    #gnb2_re li.mgnb_2dli a.mgnb_2da{ font-size:15px; line-height:1.2; color:#555; display:block; padding: 15px 0; border-bottom: 1px solid #ddd;}
    #gnb2_re li.mgnb_2dli:last-child a.mgnb_2da{ border-bottom: 0;}
  /*상담 및 예약 메뉴 따로 끝*/
}
@media screen and (max-width: 767px) { 
  .mobile_open { top: 11px;}
  #mobile_menu .top_menu{ position: absolute; top: 30px; left:4%;}
  #mobile_menu .top_menu ul{ display: flex; justify-content: center; align-items: center;}
  #mobile_menu .top_menu li{ padding: 0 15px; position: relative;}
  #mobile_menu .top_menu li::before{ display: block; content: ""; width: 1px; height: 13px; background-color: #ddd; position: absolute; top: 4px; left: 0px;}
  #mobile_menu .top_menu li:nth-of-type(1)::before{ display: none;}
  #mobile_menu .top_menu a{ font-size: 14px; color: #999; letter-spacing: 0;}
  #mobile_menu .top_menu a:hover{ color: #333; font-weight: 500;}
}


/* 중간 레이아웃 */
#wrapper {z-index:5;margin:0 auto;width:100%; zoom:1; background-color: #fff;}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#aside {float:right;margin:0 0 0 -1px;width:210px;border-left:1px solid #dde4e9;background:#fff}
#container_index {position:relative;width:100%;height:auto !important;zoom:1; padding-top: 82px;}
#container { width:100%; height:auto !important; zoom:1; position:relative; padding-top: 82px;}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#scont_wrap{ width:100%; min-height:700px; position: relative;}
#scont_wrap2{ width:1200px; margin: 0 auto; padding: 60px 0 100px 0; min-height:700px; position: relative;}
#scont{ width:1200px; margin: 0 auto; padding: 60px 0 100px 0;}
#scont2{ width:1200px; margin: 0 auto; padding: 60px 0 100px 0;}

@media screen and (max-width: 1023px) {
  #container_index { padding-top: 68px;}
  #container { padding-top: 68px;}
  #scont_wrap{ min-height:500px;}
  #scont_wrap2{ padding: 60px 0 80px 0; min-height:500px;}
  #scont{ width:100%; padding: 60px 0 80px 0;}
  #scont2{ width:100%; padding: 60px 0 80px 0;}
  #sub_title{ margin-bottom:60px;}
  #sub_title .container_title { font-size:30px;}
}
@media screen and (max-width: 767px) {
  #scont_wrap{ width:100%; min-height: 400px;}
  #scont_wrap2{ width:100%; min-height: 400px;}
  #scont{ padding: 40px 0 60px 0;}
  #scont2{ padding: 40px 0 60px 0;}
  #sub_title{ margin-bottom:50px;}
  #sub_title .container_title { font-size:28px;}
}
	
/*푸터-카피라이터*/

#ft_wrap{ background-color:#373B3B; }
.ft_box{ width: 1400px; margin: 0 auto; padding: 80px 0; display: flex; flex-wrap: wrap;}
.ft_left{ width: 50%;}
.ft_right{ width: 50%; padding-left: 50px;}
.ft_left li{ margin-bottom: 70px;}
.ft_left li:nth-of-type(3){ margin: 0;}
.ft_box h3{ display: inline-block; font-size: 22px; font-weight: normal; font-weight: 500; color: #fff; width: 160px;}
.ft_box h3 > span{ display: inline-block; margin-right: 10px;}
.ft_left h1{ display: inline-block; font-size: 35px; font-weight: 800; color: #65C8CD;}
.ft_left h4{ display: inline-block; font-size: 22px; font-weight: normal; color: rgba(255,255,255, 0.7);}
.ft_left h4 strong{ color: #65C8CD; font-weight: normal;}
.ft_left h2{ display: inline-block; font-size: 25px; color: #fff;}
.ft_left dl{ margin-top: 20px;}
.ft_left dd{ display: inline-block; width: 300px; margin-right: 10px;}
.ft_left dd > a{ display: block; line-height: 80px; background-color: #222; text-align: center; font-size: 20px; color: rgba(255,255,255, 0.7);}
.ft_left dd > a:hover{ background-color: #444;}
.ft_right .time{ display: flex; flex-wrap: wrap;}
.ft_right .time dl{ display: flex; flex-wrap: wrap; font-size: 20px; color: #fff; margin-bottom: 10px;}
.ft_right .time dt{ width: 80px; font-weight: 500;}
.ft_right .time dd{ font-weight: 300; color: rgba(255,255,255, 0.7);}
.ft_right .time span{ font-size: 16px; color: #65C8CD;}
.ft_right .locat{ display: flex; flex-wrap: wrap; margin: 30px 0 15px 0;}
.ft_right .locat p{ font-size: 22px; font-weight: normal; color: #fff;}
.ft_right .map_box > a{ display: block; text-align: center; line-height: 80px; font-size: 25px; font-weight: 700; color: #fff; background-color: #65C8CD;}
.ft_right .map_box > a:hover{ background-color: #5a9ca0;}
@media screen and (max-width: 1023px) {
  #ft_wrap{ padding: 0 5%;}
  .ft_box{ width: 100%;}
  .ft_left{ width: 100%; margin-bottom: 30px;}
  .ft_right{ width: 100%; padding: 0;}
  .ft_left dd{ display: inline-block; width: 48%; margin-right: 1%;}
  .ft_left dd:nth-of-type(2){ margin-right: 0;}
}
@media screen and (max-width: 767px) { 
.ft_box{ padding: 30px 0;}
.ft_left li{ margin-bottom: 20px;}
.ft_box h3{ font-size: 16px; width: 100px;}
.ft_box h3 > span{ margin-right: 3px;}
.ft_box h3 > span > img{ width: 20px;}
.ft_left h1{ font-size: 22px;}
.ft_left h4{ font-size: 15px; line-height: 1.2; margin-top: 10px;}
.ft_left h2{ font-size: 16px;}
.ft_left dl{ margin-top: 10px;}
.ft_left dd > a{ line-height: 45px; font-size: 13px;}
.ft_left dd img{ width: 20px;}
.ft_right .time{ display: flex; flex-wrap: wrap;}
.ft_right .time h3{ margin-bottom: 10px;}
.ft_right .time dl{ font-size: 15px; margin-bottom: 6px;}
.ft_right .time dt{ width: 70px;}
.ft_right .time span{ font-size: 14px;}
.ft_right .locat{ margin: 20px 0 15px 0;}
.ft_right .locat p{ font-size: 16px;}
.ft_right .map_box > a{ line-height: 45px; font-size: 15px;}
}


#footer{ width:100%; height:auto; background-color:#373B3B; position: relative; border-top: 1px solid rgba(255,255,255,.2);}
#footer .footer_in{ width:1400px; height:auto; margin:0 auto; position: relative; padding: 50px 0 100px 0; display: flex;}
#footer .copy_logo{ margin-right: 100px;}
#footer address{ font-style: normal;}
#footer address p{ font-size: 18px; font-weight: 300; line-height: 1.7; color:rgba(255,255,255, 0.6);}
#footer address p span{ display:inline-block; margin-right:10px;}
#footer address p.co{ font-size:15px; font-weight: 400; color:rgba(255,255,255, 0.3); letter-spacing: 0; text-transform: uppercase;}
#footer .admin{ position: absolute; top: 60px; right: 0px;}
#footer .admin a{ display: block; font-size: 13px; color: #999; border-bottom: 1px solid #aaa; padding: 0 5px 0px 5px;}
#footer .admin a:hover{ color: #fff; border-color: #fff;}
@media screen and (max-width: 1023px) {
  #footer .footer_in{ width: 100%; flex-wrap: wrap; padding: 50px 5% 100px 5%;}
  #footer .copy_logo{ width: 50px; margin: 0 auto 20px auto;}
  #footer .copy_logo img{ width: 100%;}
  #footer address{ text-align: center;}
  #footer .admin{ display: none;}
}
@media screen and (max-width: 767px) { 
  #footer .footer_in{ width: 100%; flex-wrap: wrap; padding: 30px 2% 160px 2%;}
  #footer .copy_logo{ width: 30px; margin: 0 auto 10px auto;}
  #footer address p{ font-size: 13px; line-height: 1.5;}
  #footer address p.co{ font-size:12px;}
}


/* 퀵메뉴 */
.side-cs { width: 100px;  position: fixed; top: 50%; right: 20px; transform: translateY(-50%); z-index: 22;}
.qk ul{ background-color: #fff; border-radius: 50px; text-align: center; overflow: hidden;}
.qk li a{ display: block; width: 100px; cursor: pointer; padding: 10px 0;}
.qk li:nth-of-type(1) a{ padding: 20px 0 10px 0;}
.qk li p{ font-size: 13px; margin-top: 5px;}
.qk .go_top{ background-color: #65C8CD; padding: 20px 0;}
.qk .go_top img{ filter: invert(100%) sepia(4%) saturate(17%) hue-rotate(66deg) brightness(105%) contrast(104%);}
.quick_menu{ display: none;}
@media screen and (max-width: 1023px) {
  .side-cs { width: 80px; }
  .qk li a{ width: 80px;}
  .qk li img{ width: 35px;}
  .qk .go_top img{ width: auto;}
}
@media screen and (max-width: 767px) { 
  .side-cs { width: 38px; left: 3px; bottom: 10px;}
  .qk li{ margin: 5px 0;}
  .qk li a{ width: 38px; height: 38px; line-height: 38px; font-size: 10px;}
  .qk li img{ width: 18px;}
  .qk .go_top img{ width: 22px;}
  .side-cs{ display: none;}

    /*모바일 퀵메뉴*/
    .quick_menu { display: block; position: fixed; right: 66px;  bottom: 190px;}
    .quick_btn { position: fixed; right: 10px; bottom: 160px;}
    .heartbeat {
        -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
        animation: heartbeat 1.5s ease-in-out infinite both;
    }
    @-webkit-keyframes heartbeat {
        from {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
        10% {
            -webkit-transform: scale(0.91);
            transform: scale(0.91);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
        17% {
            -webkit-transform: scale(0.98);
            transform: scale(0.98);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
        33% {
            -webkit-transform: scale(0.87);
            transform: scale(0.87);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
        45% {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
    }
    @keyframes heartbeat {
        from {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
        10% {
            -webkit-transform: scale(0.91);
            transform: scale(0.91);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
        17% {
            -webkit-transform: scale(0.98);
            transform: scale(0.98);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
        33% {
            -webkit-transform: scale(0.87);
            transform: scale(0.87);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
        45% {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
    }
    .quick_box { position: absolute; left: 20px; top: 50%; transform: translateY(-50%) rotateY(90deg); display: flex; background-color: #fff; border-radius: 39px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); width: 0px; height: 38px; opacity: 0; align-items: center; justify-content: space-evenly; transition: all 0.5s;}
    .quick_box.open { opacity: 1; left: -130px; width: 120px; transform: translateY(-50%);}
    .quick_box img{ width: 25px;}
}

/*빠른상담신청*/
#consult_wrap{ width: 1400px; background-color: rgba(0,0,0,.8); position: fixed; left: 50%; transform: translateX(-50%); bottom: 0px; z-index: 21;}
.consult_box{ width: 100%; display: flex; justify-content: space-between; align-items: center;}
.clt_tit{ background-color: #000; padding: 0 20px;}
.clt_input input[type="text"]{ height: 45px; width: 180px; border-radius: 5px; padding: 0 15px; border: 0; margin-right: 8px; font-size: 15px; 
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2); outline: none;}
.clt_input select{ height: 45px; width: 250px; border-radius: 5px; padding: 0 15px; border: 0; margin-right: 10px; font-size: 15px; 
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2); outline: none;}
.clt_right{ display: flex; align-items: center;}
.clt_agree{ margin-right: 30px;}
.clt_agree input[type="checkbox"]{ width: 20px; height: 20px;}
.clt_agree .modal_btn { background-color: transparent; border: none; cursor: pointer; font-size: 15px; color: #fff; margin-left: 5px;}
.clt_btn button{ width: 250px; height: 80px; line-height: 80px; text-align: center; font-size: 23px; font-weight: 600; color: #fff; letter-spacing: -1px; background-color: #65C8CD; border: 0;}
@media screen and (max-width: 1023px) {
  #consult_wrap{ width: 100%; padding: 20px 3%;}
  .clt_tit{ display: none;}
  .clt_input input[type="text"]{ width: 120px; height: 35px; margin-right: 5px; font-size: 14px;}
  .clt_input select{ height: 35px; width: 150px; margin-right: 5px; font-size: 14px;}
  .clt_agree{ margin-right: 10px;}
  .clt_agree input[type="checkbox"]{ width: 15px; height: 15px;}
  .clt_agree .modal_btn { font-size: 12px;}
  .clt_btn button{ width: 100px; height: 35px; line-height: 35px; font-size: 14px; border-radius: 5px;}
}
@media screen and (max-width: 767px) { 
  #consult_wrap{ padding: 20px 5%;}
  .consult_box{ display: block;}
  .clt_tit p{ font-size: 12px;}
  .clt_tit h1{ font-size: 18px; margin-bottom: 10px;}
  .clt_input input[type="text"]{ width: 24%; margin-right: 1%; font-size: 13px; border-radius: 0px; padding: 0 7px;}
  .clt_input select{ width: 47%; margin-right: 0; font-size: 13px; border-radius: 0px; padding: 0 7px;}
  .clt_right{ margin-top: 10px; flex-wrap: wrap;}
  .clt_agree{ margin-right: 0px;}
  .clt_agree .modal_btn { font-size: 13px;}
  .clt_btn{ width: 100%; margin-top: 10px;}
  .clt_btn button{ width: 100%; border-radius: 0px;}
}

/*개인정보처리방침침 모달팝업*/
.modal { display: none; /*평소에는 보이지 않도록*/ position: fixed; top:0; left: 0; width: 100%; height: 100vh; overflow: hidden; background: rgba(0,0,0,0.6); z-index: 1100;}
.modal.on { display: block;}
.modal .modal_popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.3);
width: 600px; height: 600px;}
.modal .modal_popup h1{ font-size: 20px; font-weight: 600; padding: 15px 20px; border-bottom: 1px solid #ddd;}
.modal .modal_scroll{ overflow: hidden;}
.modal .modal_in{ font-size: 14px; color: #444; font-weight: 300; line-height: 1.4; padding: 20px 20px; height: 545px; overflow-y: scroll;}
.modal .modal_in h2{ font-size: 15px;font-weight: 600; color: #222; margin-bottom: 5px;}
.modal .modal_popup .close_btn { display: block; background-color:transparent; border: none; cursor: pointer; position: absolute; top: -45px; right: 0px;
width: 40px; height: 40px;}
.modal .modal_popup .close_btn span{ display: block; width: 35px; height: 2px; background-color: #fff; transform: rotate(-45deg); position: absolute; left: 0px; top: 19px;}
.modal .modal_popup .close_btn span:nth-of-type(2){ transform: rotate(45deg);}
@media screen and (max-width: 1023px) {
  .modal .modal_popup { width: 500px; height: 500px;}
  .modal .modal_popup h1{ font-size: 18px;}
  .modal .modal_in{ height: 445px;}
}
@media screen and (max-width: 767px) { 
  .modal .modal_popup { width: 90%; height: 400px;}
  .modal .modal_popup h1{ font-size: 16px; padding: 15px;}
  .modal .modal_in{ height: 345px; padding: 15px;}
}
