@charset "UTF-8";
@import url(html5_reset.css);
@import url(font.css);

:root {
  --BodyColor: #f0ede5;
  --fff: #fff;
  --aaa: #aaa;
  --000: #000;
  --222: #222;
  --444: #444;
  --666: #666;
  --888: #888;
  --bg: #F7F4EF;
  --color_main: #003964;
  --color_sub: #EDDDC7;
  --pointcolor: #AE9D86;

  --color_sub4: #F2D9A0;
  --color_dark: #1b1b1c;
  --naverGreen: #35a340;
  --kakaoYellow: #fbe100;

  --point2color: #beb7ab;
  --pointcolor-rgb: 163, 138, 130;
  --color_sub2-rgba: rgba(59, 1, 11, .8);
  --pointfont: 'Cormorant Garamond';
}

.point_font {
  font-family: var(--pointfont), serif;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(100%);
  border: 0;
  white-space: nowrap;
}

.color_main {
  color: var(--color_main) !important;
}

.underLine {
  display: inline-block;
  position: relative;
  margin-bottom: .5em;

  &::before {
    content: '';
    width: 100%;
    border-bottom: .2rem solid currentColor;
    display: block;
    bottom: .6rem;
    position: absolute;
  }
}

.roundBorder {
  border: 1px solid var(--000);
  padding: 1rem 2rem;
  display: inline-block;
  font-size: 2.4rem;
  border-radius: 10rem;
  line-height: 1;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.video-container {
  width: 100%;
  /* 너비를 부모에 맞춤 */
  max-width: 1000px;
  /* (선택) 최대 너비 제한 */
  aspect-ratio: 16 / 9;

  /* 영상 비율 설정 */
  iframe {
    width: 100%;
    height: 100%;
  }
}


.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  font-family: 'Pretendard Variable';
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-y: scroll;
  margin: 0 auto;
  font-size: 62.5%;
  /* background: var(--BodyColor); */
  color: #595959;
  

  /* 웹킷 속성 (Chrome, Edge, Safari) */
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #343434;
  }

  &::-webkit-scrollbar-thumb {
    background: #6c6c6c;
    border-radius: 6px;
  }

  /* Scroll관련 */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: rgba(220, 220, 220, 0.3);
  }

  ::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    border-radius: 5px;
    background: var(--222);
    border: 1px solid transparent;
  }


}

body {
  overflow: hidden;
  letter-spacing: -0.04em;
  position: relative;
  font-size: 1.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.4;
}

img {
  max-width: 100%;
}

b {
  font-weight: 700;
}

li {
  /* list-style: none; */
}

.mobile {
  display: none !important;
}

.pc {
  display: ;
}

.box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


input[type="text"],
input[type="tel"],
input[type="password"],
textarea {
  padding: 5px 10px;
  border: 1px solid #d3d3d3;
  color: #666;
  /* height: 30px; */
  font-family: 'Noto Sans Korean', sans-serif;
  font-size: 16px;
  vertical-align: top;
}

select {
  padding: 5px 1px 5px 10px;
  border: 1px solid #d3d3d3;
  color: #666;
  height: 42px;
  vertical-align: top;
  min-width: 150px;
  background: #fff;
  position: relative;
  z-index: 1;
  /* background: none; */
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  appearance: none;
}

.select {
  text-align: center;
  font-size: 16px;
}

.select::after {
  content: "\E875";
  font-family: "icon_font";
  position: absolute;
  margin-left: -41px;
  background: #fff;
  line-height: 38px;
  width: 32px;
  margin-top: 2px;
  color: #bdbdbd;
  font-size: 12px;
  z-index: 1;
}

select::-ms-expand {
  /* for IE 11 */
  display: none;
}

input[type="tel"] {
  width: 20%;
  /* max-width: 150px; */
}

textarea {
  min-height: 76px;
}

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

input[type=checkbox]+label {
  /* padding-left: 25px; */
  position: relative;
  display: inline-flex;
  align-items: center;
}

input[type=checkbox]+label:before {}

/* unchecked icon */
input[type=checkbox]+label:before {
  font-family: "icon_font";
  /* top: 4px; */
  content: "\E8A1";
  margin-right: 5px;
  left: 0;
  font-size: 2rem;
  border: 0;
  margin-left: 0;
}

input[type=checkbox]:checked+label:before {
  content: "\E8A0";
  color: var(--color_main);
}

.filebox input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.filebox label {
  display: inline-block;
  padding: .5em .75em;
  color: #999;
  font-size: inherit;
  line-height: normal;
  vertical-align: middle;
  background-color: #fdfdfd;
  cursor: pointer;
  border: 1px solid #ebebeb;
  border-bottom-color: #e2e2e2;
  /* border-radius: .25em; */
}

/* named upload */
.filebox .upload-name {
  display: inline-block;
  font-family: inherit;
  line-height: normal;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #d3d3d3;
  border-bottom-color: #e2e2e2;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 2rem;
  border-radius: 0 1rem 1rem 0;
  padding: 1rem;
  border-left: 0;
}

.filebox.bs3-primary label {
  color: #fff;
  background-color: var(--color_main);
  border-color: var(--color_main);
  font-size: 1.6rem;
  padding: 1.25rem 2em;
  border-radius: 1rem 0 0 1rem;
}

/* checked icon */

button:active {
  outline: none;
  border: none;
}

hr {
  clear: both;
  float: none;
  /* border: 0; */
}

hr.border {
  border-top: 1px solid #ddd;
  margin: 60px 0;
}

/* float & align */
.left {
  float: left !important;
}

.right {
  float: right !important;
}

.left_align {
  text-align: justify !important;
}

.center {
  text-align: center !important;
}

.right_align {
  text-align: right !important;
}

.vertical_middle {
  vertical-align: middle;
}

.border_none {
  border: none !important;
}

/* CURSOR */
.cursor {
  cursor: pointer;
}

/* MARGIN */
.m_0 {
  margin: 0 !important;
}

.m_10 {
  margin: 10px !important;
}

.m_20 {
  margin: 20px !important;
}

.m_30 {
  margin: 30px !important;
}

.m_t_m60 {
  margin-top: -60px !important;
}

.m_t_0 {
  margin-top: 0 !important;
}

.m_t_10 {
  margin-top: 10px !important;
}

.m_t_20 {
  margin-top: 20px !important;
}

.m_t_30 {
  margin-top: 30px !important;
}

.m_t_40 {
  margin-top: 40px !important;
}

.m_t_50 {
  margin-top: 50px !important;
}

.m_t_60 {
  margin-top: 60px !important;
}

.m_t_80 {
  margin-top: 80px !important;
}

.m_r_0 {
  margin-right: 0 !important;
}

.m_r_10 {
  margin-right: 10px !important;
}

.m_r_20 {
  margin-right: 20px !important;
}

.m_r_30 {
  margin-right: 30px !important;
}

.m_b_0 {
  margin-bottom: 0 !important;
}

.m_b_10 {
  /* margin-bottom: 10px !important; */
}

.m_b_20 {
  margin-bottom: 20px !important;
}

.m_b_30 {
  margin-bottom: 30px !important;
}

.m_b_40 {
  margin-bottom: 40px !important;
}

.m_b_50 {
  margin-bottom: 50px !important;
}

.m_b_60 {
  margin-bottom: 60px !important;
}

.m_b_150 {
  margin-bottom: 150px !important;
}


.m_l_0 {
  margin-left: 0 !important;
}

.m_l_10 {
  margin-left: 10px !important;
}

.m_l_20 {
  margin-left: 20px !important;
}

.m_l_30 {
  margin-left: 30px !important;
}


/* PADDING */
.p_0 {
  padding: 0px !important;
}

.p_10 {
  padding: 10px !important;
}

.p_20 {
  padding: 20px !important;
}

.p_30 {
  padding: 30px !important;
}

.p_t_0 {
  padding-top: 0px !important;
}

.p_t_10 {
  padding-top: 10px !important;
}

.p_t_20 {
  padding-top: 20px !important;
}

.p_t_30 {
  padding-top: 30px !important;
}

.p_t_60 {
  padding-top: 60px !important;
}

.p_r_0 {
  padding-right: 0px !important;
}

.p_r_10 {
  padding-right: 10px !important;
}

.p_r_20 {
  padding-right: 20px !important;
}

.p_r_30 {
  padding-right: 30px !important;
}

.p_b_0 {
  padding-bottom: 0px !important;
}

.p_b_10 {
  padding-bottom: 10px !important;
}

.p_b_20 {
  padding-bottom: 20px !important;
}

.p_b_30 {
  padding-bottom: 30px !important;
}

.p_l_0 {
  padding-left: 0px !important;
}

.p_l_10 {
  padding-left: 10px !important;
}

.p_l_20 {
  padding-left: 20px !important;
}

.p_l_30 {
  padding-left: 30px !important;
}



/* font size +  weight + color */
.myeongjo {
  font-family: 'Nanum Myeongjo'
}

.notosan {
  font-family: 'Noto Sans KR', sans-serif;
}

.font_18 {
  font-size: 18px;
}

.font_20 {
  font-size: 20px;
}

.font_22 {
  font-size: 22px;
}

.font_24 {
  font-size: 24px;
}


.fontw_100 {
  font-weight: 100 !important;
}

.fontw_300 {
  font-weight: 300 !important;
}

.fontw_400 {
  font-weight: 400 !important;
}

.fontw_500 {
  font-weight: 500 !important;
}

.fontw_600 {
  font-weight: 600 !important;
}

.fontw_700 {
  font-weight: 700 !important;
}

.fontw_800 {
  font-weight: 800 !important;
}


.overflow {
  overflow: hidden;
}

.block {
  display: block;
}



/* 4. 모바일 (해상도 768px 이하) */
@media all and (max-width:768px) {
  html {
    font-size: 50%;
  }

  body {
    min-width: 320px;

  }

  .pc {
    display: none !important;
  }

  .mobile {
    display: block !important;
    overflow: hidden;
  }

  select {
    min-width: 120px;
  }

  textarea {
    min-height: 40px;
  }

  .select::after {
    line-height: 30px;
    font-size: .8em;
    margin-left: -36px;
    width: 36px;
  }

  .filebox.bs3-primary label {
    height: 14px;
    line-height: 1;
  }

  /* MARGIN */
  .m_10 {
    margin: 5px !important;
  }

  .m_20 {
    margin: 10px !important;
  }

  .m_30 {
    margin: 15px !important;
  }

  .m_t_m60 {
    margin-top: -30px !important;
  }

  .m_t_10 {
    margin-top: 5px !important;
  }

  .m_t_20 {
    margin-top: 10px !important;
  }

  .m_t_30 {
    margin-top: 15px !important;
  }

  .m_t_40 {
    margin-top: 20px !important;
  }

  .m_t_50 {
    margin-top: 25px !important;
  }

  .m_t_60 {
    margin-top: 30px !important;
  }

  .m_t_80 {
    margin-top: 40px !important;
  }

  .m_r_10 {
    margin-right: 5px !important;
  }

  .m_r_20 {
    margin-right: 10px !important;
  }

  .m_r_30 {
    margin-right: 15px !important;
  }

  .m_b_10 {
    margin-bottom: 5px !important;
  }

  .m_b_20 {
    margin-bottom: 10px !important;
  }

  .m_b_30 {
    margin-bottom: 15px !important;
  }

  .m_b_40 {
    margin-bottom: 20px !important;
  }

  .m_b_50 {
    margin-bottom: 25px !important;
  }

  .m_b_60 {
    margin-bottom: 30px !important;
  }

  .m_b_150 {
    margin-bottom: 50px !important;
  }

  .m_l_10 {
    margin-left: 5px !important;
  }

  .m_l_20 {
    margin-left: 10px !important;
  }

  .m_l_30 {
    margin-left: 15px !important;
  }


  /* PADDING */

  .p_10 {
    padding: 5px !important;
  }

  .p_20 {
    padding: 10px !important;
  }

  .p_30 {
    padding: 15px !important;
  }

  .p_t_10 {
    padding-top: 5px !important;
  }

  .p_t_20 {
    padding-top: 10px !important;
  }

  .p_t_30 {
    padding-top: 15px !important;
  }

  .p_t_60 {
    padding-top: 30px !important;
  }

  .p_r_10 {
    padding-right: 5px !important;
  }

  .p_r_20 {
    padding-right: 10px !important;
  }

  .p_r_30 {
    padding-right: 15px !important;
  }


  .p_b_10 {
    padding-bottom: 5px !important;
  }

  .p_b_20 {
    padding-bottom: 10px !important;
  }

  .p_b_30 {
    padding-bottom: 15px !important;
  }

  .p_l_10 {
    padding-left: 5px !important;
  }

  .p_l_20 {
    padding-left: 10px !important;
  }

  .p_l_30 {
    padding-left: 15px !important;
  }

  .font_18 {
    font-size: 12px;
  }

  .font_20 {
    font-size: 13px;
  }

  .font_22 {
    font-size: 14px;
  }

  .font_24 {
    font-size: 16px;
  }


}


.flex {
  display: flex;




  &.center {
    justify-content: center;

  }

  &.align_center {
    align-items: center;
  }

  &.inline {
    flex-wrap: wrap;
  }
}



/* layer_pop */

.layer_pop {
  position: fixed;
  z-index: 310;
  display: none;
  top: 50%;
  left: 50%;
  /* width: 700px; */
  transform: translate(-50%, -50%);
  border-radius: 5rem;
  border: 8px solid var(--color_main);
  background: var(--fff);
  text-align: center;
  padding: 5rem;
}

.layer_pop>.dim_bg {
  display: block;
  top: 0;
  left: 0;
}

.layer_pop {
  h2 {
    font-size: 3.4rem;
    color: var(--color_main);
  }
}

#pop {
  position: absolute;
  width: 480px;
  left: 100px;
  top: 100px;
  z-index: 310;
  display: none;
}

#pop img {
  display: block;
  float: left;
  max-width: 480px;
}

#pop .cont {
  border: 5px solid #5290cd;
  overflow: hidden;
}

#pop .close {
  background: #5290cd;
  border: 5px solid #5290cd;
  border-top: 0;
  color: #fff;
  text-align: right;
  padding-right: 5px;
}

#pop .close label {
  cursor: pointer;
}

#pop .close #check input[type=checkbox]+label:before {
  border: 1px solid #fff;
  top: 5px;
}

#pop .close #check input[type=checkbox]:checked+label:before {
  color: #fff;
  top: 2px;
  border: 0
}

#pop .close #close span {
  border: 1px solid #717171;
  border-radius: 3px;
  padding: 3px;
  font-size: .7em;
  background: #fff;
  color: #777;
  cursor: pointer;
}

#pop .close #close {
  cursor: pointer;
}

#quick_reserve_bg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  display: none;
  cursor: pointer;
}

.dimBG {
  z-index: 100;
}

.dim_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  display: none;
  background: rgb(0, 0, 0);
  background: transparent\5;
  background: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);
  display: none;
  z-index: 100;
  cursor: pointer;
  top: 0;
}


/* layer_pop */



#new_pop {
  position: fixed;
  left: 0;
  top: 150px;
  z-index: 310;
  display: none;
  right: 0;
  text-align: center;
}

#new_pop img {
  max-width: 470px;
  max-height: 550px;
}

#new_pop .cont {
  overflow: hidden;
}

#new_pop .close {
  color: #fff;
  text-align: center;
  
  
  form{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
  }
}

#new_pop .close label {
  cursor: pointer;
}

#new_pop .close #check input[type=checkbox] {
  /* display: none; */
}

#new_pop .close #check input[type=checkbox]+label {
  /* padding-left: 30px; */
  /* position: relative; */
  /* display: inline-block; */
  /* text-align: justify; */
  margin-right: 10px;
}

#new_pop .close #check input[type=checkbox]+label:before {
  /* display: inline-block; */
  /* vertical-align: text-bottom; */
  /* content: ""; */
  /* margin-right: 8px; */
  /* line-height: 20px; */
  /* position: absolute; */
  /* left: 0; */
  /* border: 2px solid #fff; */
  /* width: 14px; */
  /* height: 14px; */
  /* vertical-align: middle; */
  /* top: 5px; */
}

#new_pop .close #check input[type=checkbox]:checked+label:before {
 
  content: "\E8A0";
  color: #fff;
  margin-right: 5px;
  left: 0;
  font-size: 24px;
  border: 0;
  margin-left: 0;
  top: 4px;
}

#new_pop .close #close {
  cursor: pointer;
}

#new_pop .close #close i {
  /* position: absolute; */
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  margin-top: 0px;
}

#new_pop .close #close i:hover {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  margin-top: 3px;
}

#popdim,
#sub_popdim {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  display: none;
  cursor: pointer;
  display: none;
}

.dim_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  display: none;
  background: rgb(0, 0, 0);
  background: transparent\5;
  background: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);
  display: none;
  z-index: 100;
  cursor: pointer;
  top: 0;
}

@media (max-width: 768px) {
  #new_pop {
    position: fixed;
    width: 300px;
    left: 50%;
    top: 50%;
    margin-top: 0;
    z-index: 310;
    display: none;
    transform: translate(-50%, -50%);
  }

  #new_pop .cont {
    overflow: inherit;
  }

  #new_pop .owl-nav {
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    font-size: 4em;
    font-family: 'Montserrat';
  }

  #new_pop .owl-carousel .owl-nav button.owl-prev {
    left: -30px;
    position: absolute;
    background: none;
  }

  #new_pop .owl-carousel .owl-nav button.owl-next {
    right: -30px;
    position: absolute;
    background: none;
  }

  #new_pop .owl-dots {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0
  }

  #new_pop .owl-carousel button.owl-dot {
    background: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100px;
    margin: 0 3px;
    opacity: .5;
  }

  #new_pop .owl-carousel button.active {
    opacity: 1;
  }

  #new_pop .close {
    /* padding-top: 10px; */
    /* padding-right: 14px; */
  }

  #new_pop .close #check input[type=checkbox]+label {
    padding-left: 25px;
    margin-right: 5px;
  }

  #new_pop .close #check input[type=checkbox]+label:before {
    /* border: 1px solid #fff; */
    /* width: 12px; */
    /* height: 12px; */
    /* top: 3px; */
  }

  #new_pop .close #check input[type=checkbox]:checked+label:before {
    font-size: 19px;
    top: 0px;
  }

  #new_pop .close #close i {
    margin-top: 1px;
  }

  #new_pop .close #close i:hover {
    margin-top: 2px;
  }
}

@media only screen and (max-width: 600px) {}


@media only screen and (max-width: 320px) {
  #new_pop .owl-carousel .owl-nav {
    display: none;
  }
}



/* quick_menu */
.quick_menu {position:relative;top: 330px;right: 20px;/* width: 490px; */position:fixed;z-index: 5;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;/* margin-right: -818px; */}
.quick_menu > ul {float: left;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.quick_menu > ul > li{/* margin-bottom:10px; */}
.quick_menu > ul > li a {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;/* height: 100px; *//* border-radius: 100px; */overflow: hidden;}
.quick_menu > ul > li > a {padding: 0;/* color: #fff; */text-align: center;display:block;font-size: 13px;cursor: pointer;text-align: center;padding-left: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;width: 60px;}
.quick_menu > ul > li a::before{display: inline-block;font-size: 32px;font-family: 'icon_font';margin-top: 10px;margin-bottom: 5px;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;width: 60px;line-height: 60px;border-radius: 100px;color: var(--fff);}
.quick_menu > ul > li > a span {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;display: inline-block;font-weight: 500;/* position: absolute; *//* margin: 21px 10px; *//* width: 100px; */}

.quick_menu > ul > li:nth-child(1) a::before{content: '\E86B'; }
.quick_menu > ul > li:nth-child(3) a::before{content: '\E8C9';}
.quick_menu > ul > li:nth-child(2) a::before{content: '\E862'; }
.quick_menu > ul > li:nth-child(2) a::before{content: '\E85E'; }
.quick_menu > ul > li:nth-child(5) a::before{content: '\E8A7';}
.quick_menu > ul > li:nth-child(4) a::before{content: '\E846';}

.quick_menu > ul > li:nth-child(1) a:before{background: #5a6cd1;}
.quick_menu > ul > li:nth-child(3) a:before{background: #35a340 ;}
.quick_menu > ul > li:nth-child(2) a:before{background:#00a8de}
.quick_menu > ul > li:nth-child(2) a:before{background: #43bfda;}
.quick_menu > ul > li:nth-child(4) a:before{background: #fbe100;color: #3b010b;}
.quick_menu > ul > li:nth-child(5) a:before{background:#35a340 }

.quick_menu > div {width: 380px;float: right;border: 0;border-bottom: 1px solid #dadada;overflow: hidden;}

.quick_menu > ul > li:hover > a {/* width: 140px; *//* padding-left: 25px; *//* text-align: left; *//* margin-left: -80px; */}
.quick_menu > ul > li:hover > a span {opacity:1;}
.quick_menu > ul > li:hover a::before{}

.quick_menu.f_nav {top: 170px;/* margin-right: -900px; *//* right: 20px; */margin-right: 0;}
.quick_menu.open {margin-right: 0;}
.quick_menu.open > ul{opacity:0;}

.layerwrite{text-align:left;background: #fff;width: 560px;position: fixed;left: 50%;z-index: 300;margin-left: -280px;top: 140px;display: none;border: 1px solid #dadada;border-radius: 30px;overflow: hidden;padding: 50px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.layerwrite h2{font-size: 2.5em;font-weight: 400;margin-bottom: 20px;text-align: center;color: #00a8de;font-weight: 600;font-family: 'NanumSquare';}
.layerwrite h2 i {float: right;cursor: pointer;position: absolute;right: 20px;top: 20px;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;font-size: .7em;}
.layerwrite h2 i:hover{-webkit-transform: rotate(180deg);transform: rotate(180deg);}
/* .layerwrite h2 > em {position: absolute;display: inline-block;width: 20px;height: 20px;background:#ccad90;margin: -25px 0 0 -15px;}
.layerwrite h2 > em:before, .layerwrite h2 > em:after {content:'';width: 20px;height: 20px;background:#e0cebc;display: block;position: absolute;}
.layerwrite h2 > em:before{margin: 0px 0 0 23px;}
.layerwrite h2 > em:after {background:#ebded3;margin: 23px 0 0 23px;} */
.layerwrite .wraper p {margin:0;text-align: center;}
.layerwrite .wraper > iframe {width: 330px; height: 360px; }
.layerwrite .quick_counsel table {width: 100%;margin: 10px 0 20px;border-top: 1px solid #d3cfc8;}
.layerwrite .quick_counsel table th {border-bottom: 1px solid #cbcbcb;background: #f4f8fb;color: #606060;font-weight: 400;width: 100px;text-align: center;vertical-align:  middle;}
.layerwrite .quick_counsel table td {border-bottom: 1px solid #d5d5d5;padding: 0;background: #fff;}
.layerwrite .quick_counsel form input[type="text"] {border:0;font-size: 1em;padding: 10px 15px;width: 327px;}
.layerwrite .quick_counsel form   textarea {padding: 10px 15px;border:0;width: 327px;min-height: 112px;}
.layerwrite .quick_counsel form p {margin-bottom: 40px;}
.layerwrite .quick_counsel form p input[type=checkbox] + label:before{}
.layerwrite .quick_counsel form p input[type=checkbox]:checked + label:before{}
.layerwrite .quick_counsel form input[type="submit"] {width: auto;background: #00a8de;border: 0;color: #fff;font-size: 1.4em;padding: 10px 40px;cursor: pointer;border-radius: 40px;display: block;margin: 0 auto;}
.layerwrite img {display: block;}

.layerwrite .quick_counsel form input::placeholder ,
.layerwrite .quick_counsel form textarea::placeholder{color:#c5c5c5;}

.Counselagree_view {line-height:1em;color:#fff;background: #898989;padding:5px 10px;border-radius:4px;margin-left:10px;display:inline-block;}
.Counselagree_view:hover {color:#fff;}

@media screen and (max-width: 1600px) {
  .quick_menu {display:none;}
}



@media screen and (max-width: 767px) {
  .quick_menu {display: block;top: auto;bottom: 0px;width: 100%;left: 0;right: 0;z-index: 20;}
  .quick_menu.f_nav{top:auto}
  .quick_menu > ul{width:100%;}
  .quick_menu > ul > li{float:left;width:20%;margin: 0;}
  .quick_menu > ul > li:last-child{}
  .quick_menu > ul > li > a:before{border-radius: 0;/* border-right: 1px solid #ffffff; */width: 100%;height: auto;display: block;}
  .quick_menu > ul > li:nth-child(5) a{border:0}
  .quick_menu > ul > li > a span{margin: 0;position: sticky;opacity: 1;padding: 0;width: 100%;margin-bottom: 8px;font-size: 12px;display: none;}
  .quick_menu > ul > li a{
  width: auto;
}
  .quick_menu > ul > li a::before {margin-top: 10px;font-weight: 100;margin-bottom: 3px;line-height: 1.6;margin: 0;}
  .quick_menu > ul > li:hover > a{padding: 0;margin: 0;text-align: center;width: auto;}

  .layerwrite{width:90%;margin-left:-45%;padding: 50px 5% 30px;}
  .layerwrite h2{font-size:2em;margin-bottom: 10px;}
  .layerwrite h2 > em{width:15px;height:15px;margin: -20px 0 0 -10px;}
  .layerwrite h2 > em:before, .layerwrite h2 > em:after{width:15px;height:15px;margin: 18px 0 0 18px;}
  .layerwrite h2 > em:before{margin: 0px 0 0 18px;}
  .layerwrite .quick_counsel table th{width: 25%;}
  .layerwrite .quick_counsel form input[type="text"], .layerwrite .quick_counsel form textarea{width: 90%;padding: 10px 5%;}
  .Counselagree_view{margin-left: 5px;font-size: .9em;}
  .layerwrite .quick_counsel form p{margin-bottom:20px}
  .layerwrite .quick_counsel table{margin-top:0}
  .layerwrite .quick_counsel form input[type="submit"]{  font-size:1.2em;  padding: 10px 20px;  }
}

/* footer */
footer {

  .foot_board {
    .inwrap {
      max-width: 160rem;
      margin: 0 auto;
      padding-bottom: 10rem;
      padding-top: 8rem;
      
      >ul {
        display: flex;
        justify-content: space-between;
        gap: 5rem;
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

        >li {
          flex: 1;

          h3 {
            font-size: 3.8rem;
            color: var(--000);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 3px solid var(--000);
            padding: 1rem;

            span {
              display: flex;

              i {
                font-size: 2rem;
                color: var(--color_main);
              }
            }

            a {
              font-size: 2.4rem;
              color: var(--000);
            }
          }

          >ul {

            li {
              font-size: 2rem;
              line-height: 1.4;
              border-bottom: 1px solid var(--666);
              padding: 1rem;
              a{
               display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              }
            }
          }
        }
      }

    }
  }

  h2 {
    font-size: 5rem;
  }

  .contact {
    background: url(/html/images/footBG.jpg);
    padding: 10rem 0;
    background-size: cover;


    .inwrap {
      .title {
        * {
          color: var(--fff);
        }
        h2{
          
color: var(--color_sub);
        }
      }

      >ul {
        display: flex;
        max-width: 160rem;
        margin: 0 auto;
        gap: 5rem;
        justify-content: center;
        
        
        
        
        
        
        
        
         > li {
      &:nth-child(1){
        min-width: 50%;
        
        
        
        
        
        
        
        #footMap {
          width: 100%;
          height: 100%;
        }  
      }
      

      &:nth-child(2) {
        h2 {
          line-height: 1;
          margin-bottom: 3rem;
          font-family: "Cormorant Garamond", serif;
        }

        * {
          color: var(--fff);
          margin: 0;
        }
        i{         
          color: var(--color_sub4);
        }
        p{
          line-height:1.4;
        }

        >ul {
          display: flex;
          flex-direction: column;
          gap: 2rem;
          margin: 3rem 0;
          
          >li {
            > dt{
              font-size: 2.4rem;
              font-weight: 600;
              /* min-width: 12rem; */
              display: flex;
              gap: .3em;
              
              
              
              
              
              
              
              
              
              span{
                 text-align: justify;
                 text-justify: inter-word;
                 width: 9rem;
                 display: block;
                 height: 1em;
                 
                 
                 
                  &:after {
                        content: "";
                        display: inline-block;
                        width: 100%;
                      }
              }
             

            }
            display: flex;
            gap: 4rem;
            font-size: 2rem;
            align-items: flex-start;
            

            &:first-child {
              align-items: center;
            }

            p.small {
              font-size: 1.6rem;
              color: var(--color_sub3);
            }

            a {
              font-size: 3rem;
              font-weight: 600;
              color: var(--color_sub4);
            }

            >div {
              display: flex;
              gap: .5rem;
              flex-direction: column;
              
              

              >dl {
                display: flex;

                dt {
                  width: 9rem;
                }

                dd {
                  display: flex;
                  align-items: center;
                  gap: 1rem;

                  span {
                    font-size: 1.6rem;
                  }

                  em {
                    background: var(--color_sub4);
                    font-size: 1.6rem;
                    display: inline-block;
                    padding: .2rem 1rem;
                    color: var(--color_main);
                    border-radius: 2rem;
                  }
                }
              }

            }
          }

        }


      }

    }
      }


    }

  
  }

  .copy {
    background: var(--fff);
    .inwrap {
      margin: 0 auto;
      padding: 2rem 0;
      
      .copy_top{
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid var(--888);
        padding: 2rem 3rem;
        align-items: center;
       
        > ul{
          display:flex;
          gap: 1rem;
          align-items: center;
          
          
          
          
          
          

            li{
              position:relative;
              a{
                color:var(--000);
                font-size: 2rem;
                font-weight: 600;
                display: flex;
                align-items: center;
                
               &:after{
                 content:'';
                 display: block;
                 width: 1px;
                 height: 2rem;
                 background: var(--888);
                 margin-left: 2rem;
                 margin-right: 2rem;
               }
              }
              &:last-child{
                a{
                  &:after{
                    display:none;
                  }
                }
                }
            }
          & + ul{
            
            > li {
              a{
                padding:0;
                font-size:3rem;
                &:after{
                  display:none;
                }
              }
            }
            span {
              display:none;
            }
          }
        }
      }
      address {
        font-size: 1.5rem;
        line-height: 1.6;
        padding: 2rem 3rem 0rem 3rem;
        display: flex;
        justify-content: space-between;
        
        
        
        
        

        p {
          margin: 0;
          display: flex;
          align-items: center;
          
          span {
            display:inline-block;
            border-right: 1px solid var(--888);
            padding-right: 2rem;
            margin-right: 2rem;
            height: 1em;
          }
        }
        .downloatBtn{
          background: var(--color_main);
          display: block;
          color: var(--fff);
          display: flex;
          align-items: center;
          padding: 1rem 2rem;
          gap: 1rem;
          text-align: center;
          font-size: 1.6rem;
          line-height: 1.2;
          display: none;
          
          
          i{
            font-size: 2.4rem;
            color: var(--pointcolor);
          }
            &:before{
              margin:0;
            }
          }
        }

      }

      >div {
        .loginWrap {
          display: flex;
          justify-content: center;
          gap: 1rem;

          li {
            cursor: pointer;
          }
        }
      }
    }
  }


/* 모바일 (해상도 768px 이하) */
@media (max-width: 768px) {

  footer {
    padding: 0rem 0;
    
    .foot_board {
      .inwrap{
      padding:0 2rem;
      margin-top: 8rem;
      margin-bottom: 8rem;
      
        >ul{
          gap: 5rem;
          display: flex;
          flex-direction: column;
            >li{
              h3{
                font-size: 2.6rem;
                a{
                  font-size: 2rem;
                }
              }
              > ul{
                > li{
                 a{
                   display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                 }
                }
              }
              
        }
        }
      }
    }
    .contact{
      padding:5rem 2rem;
      .inwrap{
        > ul {
          flex-direction: column;
          >li{
            #footMap {
              height: 25rem !important;
            }
            &:nth-child(2){
              > ul{
                margin:0;
                gap: 4rem;
                text-align: center;
                
                
                > li {
                  gap: 2rem;
                  align-items: center;
                  display: flex;
                  flex-direction: column;
                }
              }
            }
          }
        }
      }
    }
      .copy {
      .inwrap {
        padding: 3rem 2rem 7rem 2rem;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        
         .copy_top{
           padding: 0 0 2rem;
           display: flex;
           flex-direction: column;
           gap: 2rem;
           width:100%;
           
           ul{
             li {
               a{
                  font-size: 1.6rem;
                 &:after{
                   margin-left: 1rem;
                   margin-right: 1rem;
                 }
               }
             }
           }
         }
          address{
            padding: 3rem 0rem 0;
            flex-direction: column;
            width: 100%;
            align-items: center;
            gap: 2.5rem;
            
            
            
            
            
            
            
            
            
            
            
            
            > div{
              flex-direction: column;
              align-items: center;
              text-align: center;
              display: flex;
            }
          }
        
      }
       
    }

  }

}

/*password*/
.password form {
  position: relative;
  z-index: 10;
  margin-top: 15px;
}

.password p {
  line-height: 1.5em;
  z-index: 2;
  color: #666;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.password input {
  max-width: 60%;
  z-index: 2;
  padding: 8px 10px;
}

.password a {
  vertical-align: middle;
  /* padding: 5px 15px; */
  margin: 0 5px;
  /* height: 25px; */
  display: inline-block;
  line-height: 24px;
}

.password i {
  position: absolute;
  font-size: 2rem;
  right: 2rem;
  top: 2rem;
  /* z-index: -1; */
  cursor: pointer;
}

.gallery_pass {
  line-height: 1.4em;
  max-width: 600px;
  background: #fff;
}

.gallery_pass h5 {
  color: var(--color1);
  margin-bottom: 1.5em;
  margin-top: 1.5em;
  font-size: 25px;
  font-weight: 400;
}

.gallery_pass p {
  font-size: 17px;
  margin-bottom: 24px;
}

.gallery_pass p>em {
  padding: 1px 6px;
  margin: 2px 0;
}

.gallery_pass p>input[type=text] {
  text-align: center;
}


@media (max-width: 768px) {
  .password {
    margin: 30px auto;
    padding: 10px;
    width: 80%;
  }

  .password a {
    height: auto;
  }

  .password input {
    height: 29px;
  }

  .gallery_pass h5 {
    font-size: 15px;
  }

  .gallery_pass h5 span {
    display: block;
  }

  .gallery_pass p {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .gallery_pass p>span {
    display: block;
  }
}


/*agree*/
.agree {
  line-height: 1.7em;
  max-width: 800px;
  margin: 0 auto;

}

.agree h4 {
  color: var(--000);
  font-size: 2.4rem;
  margin-bottom: 15px;
  margin-top: 2em;
  border-top: 1px solid #ddd;
  padding-top: 40px;
}
.agree p {
  font-size: 2rem;
}
.agree h5 {
  font-size: 1.1em;
  margin-top: 1.5em;
  margin-bottom: .3em;
}

.agree b {
  color: #333;
  font-weight: 500;
}

.agree ul {
  margin: 2rem 0;
  font-size: 2rem;
}

.agree ul li:before {
  content: '■';
  margin-right: 10px;
  font-size: .6em;
  vertical-align: middle;
  display: inline-block;
  margin-top: -6px;
}


.delay_2 {
  -webkit-transition-delay: 2s;
  /* Safari */
  transition-delay: 2s;
}

.delay_4 {
  -webkit-transition-delay: 4s;
  /* Safari */
  transition-delay: 4s;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


.bottom_fixed_box {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 20;
  background: var(--fff);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
  padding: 2.5rem 2rem 2rem;
  border: 1px solid #f0f0f0;
  max-width: 75rem;
  width: 100%;
  display: none;

  h2 {
    font-weight: 700;
    position: relative;
    margin-bottom: 1.5rem;

    i {
      cursor: pointer;
      font-size: .8em;
      position: absolute;
      right: 0;
      transition: all 0.4s;

      &:hover {
        transform: rotate(180deg);
      }
    }
  }

  form {
    display: flex;
    gap: 1.5rem;
    flex-direction: column;

    >div {
      display: flex;
      justify-content: space-between;
      gap: 1rem;

      .info_button {
        font-size: 11px;
        padding: 4px 12px;
        border: 1px solid rgb(224, 224, 224);
        background: rgb(255, 255, 255);
        border-radius: 12px;
        cursor: pointer;
        color: rgb(136, 136, 136);
        transition: 0.2s;
        /* flex-shrink: 0; */
      }

      input[type="text"],
      input[type="tel"] {
        line-height: 48px;
        border-radius: 1.4rem;
        border: 1px solid #e8e8e8;
        padding: 0 16px;
        font-size: 16px;
        background: #fcfcfc;
        -webkit-appearance: none;
        box-sizing: border-box;
        flex: 1;
        height: auto;
      }

      input[type="tel"] {
        max-width: 100%;
      }

      .bfb_frm_btn {
        border: none;
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
        background: var(--color_main);
        color: var(--color_sub4);
        border-radius: 14px;
        width: 15rem;
        height: 50px;
      }

    }
  }

  .personal_info {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    font-size: 11px;
    background: #f9f9f9;
    border-radius: 10px;
    box-sizing: border-box;

    >div {
      padding: 12px;
    }

    &.is_open {
      max-height: 100px;
      border: 1px solid #ccc;
      border-color: rgba(0, 0, 0, 0.1);
      overflow-y: auto;
      margin-top: 1.5rem;
    }
  }
}

/* 다시 열기 버튼 */
.bottom_fixed_button {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  background: var(--color_main);
  color: #fff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99998;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  border: none;
}

@media screen and (max-width: 768px) {
  .bottom_fixed_box {
    left: 1.5rem;
    right: 1.5rem;
    transform: translate(0%, 0);
    width: calc(100% - 3rem);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    form {
      >div {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        input[type="text"],
        input[type="tel"] {
          width: 100%;
        }

        &+div {
          display: flex;
          flex-direction: row;
          align-items: center;

          .info_button {}

          label {
            font-size: 14px;

            &:before {
              font-size: 3rem;
            }
          }
        }

        .bfb_frm_btn {
          width: 100%;
        }
      }
    }
  }

  .bottom_fixed_button {
    width: 40px;
    left: 15px;
    bottom: 45px;
    height: 40px;
  }
}


@keyframes color-effect {
  0% {
    color: #fff;
    background-color: #224187;
  }

  50% {
    color: #224187;
    background-color: #00f0ff;
  }
}

@keyframes color-effect2 {
  0% {
    color: #fff;
    background-color: #07003f;
  }

  50% {
    color: #07003f;
    background-color: #00c6d3;
  }
}




.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}


.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}


@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}



@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  50% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  50% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}


@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(30%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(30%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes bounceInDown {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {

  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}


@media screen and (max-width: 768px) {}


.desktop {
  display: block;
}

.mobile {
  display: none;
}

.modal_inner_form {
  position: relative;
}

.form_div1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 57px;
  flex-direction: column;

  h3 {
    margin-top: 1rem;
  }
}

.close_btn1_desktop {
  position: absolute;
  top: 24px;
  right: 26.57px;
  border: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.close_btn1_mobile {
  position: absolute;
  top: 14.54px;
  right: 13px;
  border: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.off,
.on {
  display: flex;
  justify-content: center;
  align-items: center;
}

.submit_alarm_span_red {
  color: #F82C2C;
}

.submit_alarm {
  position: absolute;
  width: 100%;
  max-width: 527px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  z-index: 700;
  background-color: white;
  font-weight: 600;
  box-sizing: border-box;
}

.submit_alarm> :first-child {
  height: 68px;
}

.submit_alarm> :first-child>div {
  height: 100%;
  position: relative;
}

.submit_alarm> :first-child>div>span {
  color: #1A1A1A;
  font-family: 'Pretendard';
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 2px;
}

#quick_reserve,
#quick_reserve_modal {
  font-family: "Pretendard";
}


/* scroll hidden */
#quick_reserve {
  background: var(--bg);
  display: none;
  position: fixed;
  right: 0;
  top: 0;
  width: 458px;
  height: 100vh;
  z-index: 300;
  box-sizing: border-box;
  overflow-y: auto;
}

#quick_reserve::-webkit-scrollbar {
  display: none;
}

#quick_reserve_modal {
  display: none;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(34, 34, 34, 0.55);
  z-index: 700;
  /* border: solid 2px #f5f5f5;  */
  box-sizing: border-box;
  overflow-y: auto;
}

#quick_reserve_modal> :first-child {
  position: relative;
  width: 100%;
  height: 100%;
}

.select_below_div {
  position: relative;
  width: 100%;
  height: 54px;
  border-radius: 3px;
}

.form_css {
  position: relative;
}

.form_css>div {
  padding: 0 31px;
}

.form_css> :first-child {
  margin: 35px 0 0
}

.form_css> :first-child> :first-child {
  width: 100%;
  padding-bottom: 27px;
}

.form_row {
  width: 100%;
  height: 66px;
  box-sizing: border-box;
  /* margin-bottom: 13px; */
}

/* .form_row2 {
  padding-bottom: 34px !important;
} */

.form_row:nth-child(2) {
  margin-bottom: 13px;
}

.form_row>div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  border: solid 1px #AFAFAF;
}

.form_row>div>div {
  color: #474747;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 103px;
  box-sizing: border-box;
  padding: 0 22px 0 21px;
  /* font-family: 'Noto Sans'; */
  font-size: 21px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.21px;
  border-right: 0.5px solid #AFAFAF;
}

.form_row>div input {
  height: 100%;
  border: none;
  padding: 0;
  color: #AAA;
  font-family: 'Noto Sans' !important;
  padding-left: 22px;
  /* font-size: 15px; */
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  box-sizing: border-box;
}

.form_row>div>input::placeholder {}

.tit {
  height: 64px;
  flex-shrink: 0;

  text-align: center;
  font-size: 55px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.55px;
}

.tit> :first-child,
.tit2>.type1 {
  color: var(--color_main);
}

.tit> :last-child,
.tit2>.type2 {
  color: var(--color_main);
}

.tit2> :first-child {
  color: #474747;
}

/* 달력 전반  */
.flatpickr-calendar {
  width: 100% !important;
  /* max-height: 344px !important; */
  min-width: 100%;
  line-height: 24px;
  /* 월 이동 버튼   */
  font-size: 1em;
}

.flatpickr-rContainer {
  width: 100%;
}

span.flatpickr-day.flatpickr-disabled {
  border-right-color: transparent;
}

/* 연도, 월 */
.flatpickr-months {
  font-family: 'Pretendard' !important;
  height: 31px;
  font-size: 0.8rem;
}

.flatpickr-monthDropdown-months {
  font-family: 'Pretendard' !important;
}

/* .flatpickr-months {
  height: 44px;
}

.flatpickr-months .flatpickr-month {
  height: 44px;
} */

.flatpickr-month {
  height: 100%;
}

/* 요일 태그 */
.flatpickr-weekdays {
  height: 25px !important;
}

.flatpickr-weekdaycontainer {
  display: flex;
  height: 100%;
  align-items: center;
}

/* 달력 하단 */
.dayContainer {
  /* min-height: 275px;
    max-height: 275px; */
  max-width: none;
  min-width: 100% !important;
  box-sizing: border-box;
}

.flatpickr-days {
  min-width: 100% !important;
  /* height: 275px; */
}

.flatpickr-day {
  height: 48px !important;
  line-height: 48px !important;
}

/* 희망 시간 */
#time-select {
  display: grid;
  grid-template-columns: repeat(4, 93.56px);
  grid-template-rows: repeat(auto-fit, 43.516px);
  grid-column-gap: 7.44px;
  grid-row-gap: 13.45px;
  font-family: 'Pretendard';
}

#time-select div {
  text-align: center;
  border-radius: 3.264px;
  padding: 13px 23.31px;
  color: #9F9F9F;
  background-color: #fff;
  cursor: pointer;
  border: solid 0.544px #9F9F9F;
  font-size: 15.231px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1.523px;
}

.submit_row {
  /* background: rgba(255, 255, 255, 0.75); */
}

.agree_tag {
  margin: 25px 0 27px 0;
}

#agree_tag_img {
  cursor: pointer;
}

.submit_btn {
  border: none;
  background: transparent;
  width: 100%;
  /* background: var(--color_sub); */
}

.submit_btn_div {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin: 2rem 0; */
  padding-bottom: 42px;
}

.submit_btn_div>.submit_btn>.submit_btn_img {
  width: 100%;
  line-height: 78px !important;
  width: 100%;
  background: var(--color_main);
  border: 0;
  color: var(--color_sub3);
  font-size: 3rem;
  border-radius: 100px;
  cursor: pointer;
  font-weight: 600;
}

/* .icon-close:before {
  scale: 160%;
  opacity: 0.3;
} */

#selected-date {
  width: 100%;
  border: 1px solid #ddd;
  font-size: 1rem;
  padding: 0.5rem;
}

#quick_reserve input::placeholder {
  /* font-size: 0.75rem; */
  font-weight: 400;
  color: var(--point2color);
}

.select_below_icon {
  position: absolute;
  top: 23px;
  right: 20px;
  z-index: 300;
}

.numInputWrapper {
  padding-left: 2ch;
}

.select_option {
  color: #692C00 !important;
  font-weight: 500;
}

.flatpickr-current-month {
  font-size: 200%;
}

.submit_alarm_span .title,
.submit_alarm_span .title span,
.guide_title span {
  color: #242424;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 29px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.58px;
}

.submit_alarm_span .title .tint,
.guide_title .tint {
  color: var(--color_main);
}

.submit_alarm_span span {
  text-align: center;
  font-family: 'Pretendard';
  color: #242424;
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: 26.541px;
  /* 139.689% */
  letter-spacing: -0.38px;
  font-weight: 600;

  .submit_alarm_span_tint {
    color: var(--color_main)
  }
}

.submit_alarm_span2 span,
.guide_sub_title span {
  color: #242424;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
  line-height: 26.541px;
  /* 139.689% */
  letter-spacing: -0.38px;
}

.submit_alarm_span2>div {
  height: 54px;
  text-align: center;
}

.submit_alarm_span {
  display: flex;
  justify-content: start;
  align-items: center;
}

.submit_alarm_span> :first-child {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 17px;
  color: #242424;
  gap: 18px;
}

.submit_alarm_span> :first-child>div:first-child {
  height: 35px;
}

.submit_alarm_span> :first-child>div:last-child {
  height: 54px;
}



.form_css>div>div>h4 {
  margin-bottom: 9px;
  height: 30px;
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.25px;
  font-family: 'S-Core Dream';
  color: var(--color_sub);
}

#procedure-select {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  /* padding: 0 0 0 17px;  */
  background-color: #FFF;
  color: #AAA;
  cursor: pointer;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  font-family: Pretendard !important;
  border: none;
  box-sizing: border-box;
}

.hope_div_text {
  margin-bottom: 26px;
}

.hope_div_text>div>h4 {
  font-family: 'S-Core Dream';
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.25px;
  margin-bottom: 11px;
  height: 30px;
  color: var(--color_sub);
}

.flatpickr-prev-month,
.flatpickr-next-month {
  padding-top: 7.480px !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 12px;
  height: 12px;
}

.qr_desktop {
  display: block;
}

.qr_mobile {
  display: none;
}

.qr_mobile_flex {
  display: none;
}

.all_check_icon {
  cursor: pointer;
  display: grid;
  grid-template-columns: 25.337px 1fr;
  align-items: center;
  margin-bottom: 6px;
  gap: 12px;
  height: 36px;
}

.all_check_icon>span {
  color: #AAA;
  font-family: 'Pretendard';
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.check_icon {
  cursor: pointer;
  display: grid;
  grid-template-columns: 25.337px 1fr;
  align-items: center;
  gap: 12px;
  height: 38px;
}

.check_icon>span {
  color: #AFAFAF;
  font-size: 15px;
  font-style: normal;
  font-weight: 300;
  line-height: 38px;
  /* 253.333% */
  letter-spacing: -0.15px;
  font-family: 'Pretendard';
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.check_icon>span>span:last-child {
  padding-right: 10px;
  text-decoration: underline;
}

#click_time_tag {
  display: none;
  padding: 30px 0 0px 0;
}

#click_time_tag> :first-child {
  width: fit-content;
  height: 31px;
  margin-bottom: 13px;
}

#click_time_tag> :first-child>span {
  font-family: 'Pretendard';
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.25px;
}

.flatpickr-monthDropdown-months,
.numInputWrapper {
  font-family: 'Pretendard';
  font-style: normal;
  line-height: normal;
}

.privacy_policy {
  /* padding: 0 26px; */
  /* display: none; */
  /* position: absolute; */
  /* bottom: 187.87px; */
  /* z-index: 301; */
}

.privacy_policy>div>div>img {
  border-radius: 10px;
}

.privacy_policy> :first-child {
  position: relative;
}

.privacy_policy {
  padding: 0 21px;
  display: none;
  position: fixed;
  top: 50px;
  z-index: 301;
  right: 478px;
  width: fit-content;
  background: var(--fff);
  border: 2px solid var(--color_dark);
  border-radius: 20px;
  text-align: center;
  padding: 30px;
  max-width: 500px;







  h4 {
    margin-bottom: 1em;
    color: var(--color_sub);
    font-size: 3rem;
  }

  h6 {
    color: var(--color_main);
    font-size: 2rem;
  }

  p {
    font-size: 1.8rem;
  }

  ul {
    font-size: 1.8rem;
  }

  hr {
    margin: 1.5em 0;
    border-top: 1px solid var(--point2color);
  }
}

.privacy_policy> :first-child {
  /* position: relative; */
  /* width: fit-content; */
}



.close_btn3 {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.submit_alarm_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 47px 23px 48px;
}

.close_btn2 {
  width: 100%;
  padding: 18px 0;
  background-color: var(--color_main);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  color: #FFF;
}

.close_btn2 span {
  color: #FFF;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 20.643px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.close_btn4 {
  display: none;
  position: absolute;
  top: 26px;
  right: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
}

#show_list {
  display: none;
  position: absolute;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 23.96px;
  background: #FFF;
  z-index: 300;
  padding: 0 17px 20.52px;
  width: 100%;
  left: 50%;
  bottom: 1px;
  transform: translate(-49.95%, 100%);
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #C4C4C4;
  border-top: 0;
}

#show_list div:first-child {
  width: 100%;
  padding-top: 17px;
  border-top: 1px solid #C4C4C4;
}

#show_list div>span {
  font-family: 'Noto Sans';
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
}

.show_list_text.active {
  color: var(--color_main) !important;
  font-weight: 600 !important;
}

#select_text {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  width: 100%;
  padding: 0 0 0 17px;
  align-items: center;
  border: 0.697px solid #C4C4C4;
  font-family: 'Noto Sans';
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
}

.qr_modal_check_icon {
  width: 103.07px;
  height: 78px;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, 0);
}

.flatpickr-calendar.inline {
  border: 0.697px solid #C4C4C4;
  box-shadow: none;
  border-radius: 0;
}

.flatpickr-calendar:before,
.flatpickr-calendar:after {
  display: none !important;
}

/* 안내문구 */

#guide_modal {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(34, 34, 34, 0.55);
  z-index: 700;
  /* border: solid 2px #f5f5f5;  */
  box-sizing: border-box;
  overflow-y: auto;
}

#guide_modal>div {
  position: relative;
  width: 100%;
  height: 100%;
}

#guide_modal>div>div {
  position: absolute;
  width: 100%;
  max-width: 527px;
  padding: 29px 57px 23px 55px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  z-index: 700;
  background-color: white;
  font-weight: 600;
  box-sizing: border-box;
  box-shadow: 2.004px 2.004px 8.017px 0 rgba(0, 0, 0, 0.25);
}

.guide_title,
.guide_sub_title {
  display: flex;
  justify-content: center;
}

#guide_modal .guide_title {
  margin-bottom: 11px;
}

#guide_modal .send_call_div {
  padding: 14px 33px 14px 39px;
  background-color: #F6F6F6;
  border-radius: 5px;
  margin: 16px 0 19px;
}

#guide_modal .send_call_div>div {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#guide_modal .send_call_div>div>div:first-child {
  padding-right: 29px;
  border-right: 1px solid #BEBEBE;
}

#guide_modal .send_call_div>div>div {
  display: flex;
  align-items: center;
}

#guide_modal .send_call_div>div>div>span {
  color: #727272;
  text-align: center;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 26.541px;
  /* 132.705% */
  letter-spacing: -0.4px;
}

#guide_modal .send_call_div>div>div>img {
  width: 23px;
  margin-left: 17px;
  cursor: pointer;
}

.guide_modal_btn_div {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.guide_modal_btn_div>button {
  width: 204px;
  padding: 18px 0;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #CDCDCD;
  cursor: pointer;
}

.guide_modal_btn_div>button>span {
  text-align: center;
  font-family: Pretendard;
  color: #000;
  font-size: 20.643px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.guide_modal_btn_div>.send_submit_btn {
  background-color: var(--color_main);
}

.guide_modal_btn_div>.send_submit_btn>span {
  color: #fff;
  font-weight: 800;
}

@media screen and (max-width: 768px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .qr_modal_check_icon {
    width: 55.17px;
    height: 41.75px;
  }

  .submit_alarm {
    position: absolute;
    width: 100%;
    max-width: 265px;
    box-sizing: border-box;
    border-radius: 7px;
    z-index: 700;
    background-color: #FFF;
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.25);
  }

  .submit_alarm> :first-child {
    height: 36px;
  }

  .submit_alarm> :first-child>div>span {
    font-size: 15px;
    letter-spacing: 1.5px;
  }

  #quick_reserve {
    width: 100%;
  }

  #quick_reserve_modal {
    padding: 0 20px;
    height: 100vh;
  }

  .select_below_div {
    position: relative;
    width: 100%;
    height: 37.658px;
  }

  .form_css> :first-child {
    margin: 18.41px 0 0
  }

  .form_css> :first-child> :first-child {
    padding-bottom: 14.83px;
  }


  .select_below_icon {
    top: 0.5rem;
    font-size: 0.75rem;
  }

  .flatpickr-prev-month {
    padding-top: 5px !important;
  }

  .flatpickr-current-month {

    font-size: 12px !important;
  }

  .flatpickr-next-month {
    padding-top: 5px !important;
  }

  .flatpickr-months .flatpickr-prev-month svg,
  .flatpickr-months .flatpickr-next-month svg {
    width: 10px !important;
    height: 10px !important;
  }

  .tit {
    font-size: 38.355px;
    height: 44.632px;
    flex-shrink: 0;
    letter-spacing: -0.4px;
  }

  .form_css>div {
    padding: 0 21.84px 0 22px;
  }

  .form_css>div>div>h4 {
    height: 21px;
    font-size: 17.434px;
    letter-spacing: -0.14px;
    margin-bottom: 6.2px;
  }

  #procedure-select {
    font-size: 11px;
    /* padding: 0 0 0 11px;  */
  }

  .select_below_icon {
    top: 15px;
    right: 12px;
    width: 12px;
  }

  .hope_div_text {
    margin-bottom: 15.09px;
  }

  .hope_div_text>div>h4 {
    font-size: 17.434px;
    letter-spacing: -0.174px;
    margin-bottom: 7.59px;
    height: 21px;
  }

  /* 달력 전반  */
  .flatpickr-calendar {
    max-height: 217px !important;
    line-height: 24px;
    /* 월 이동 버튼   */
    font-size: 10px !important;
  }

  .flatpickr-days {
    width: 100% !important;
    /* height: 170px; */
  }

  .flatpickr-day {
    height: 29px !important;
    line-height: 29px !important;
  }

  .flatpickr-months {
    height: 23px;
  }

  .flatpickr-months .flatpickr-month {
    height: 23px;
  }




  /* 요일 태그 */
  .flatpickr-weekdays {
    height: 20px !important;
  }

  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    padding-top: 7px;
  }

  .flatpickr-months .flatpickr-prev-month svg,
  .flatpickr-months .flatpickr-next-month svg {
    width: 12px;
    height: 12px;
  }

  .agree_tag {
    margin: 13.58px 0 9.71px;
  }

  .qr_desktop {
    display: none;
  }

  .qr_mobile {
    display: block;
  }

  .qr_mobile_flex {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .all_check_icon {
    grid-template-columns: 24.52px 1fr;
    margin-bottom: 4.29px;
    gap: 8.37px;
    height: 25px;
  }

  .check_icon {
    grid-template-columns: 24.52px 1fr;
    gap: 8.37px;
    height: 27px;
  }

  .all_check_icon>span {
    font-size: 20.921px;
  }

  .check_icon>span {
    font-size: 11.25px;
    line-height: 28.5px;
    /* 253.333% */
    letter-spacing: -0.112px;
  }

  .check_icon>span>span:last-child {
    padding-right: 7.36px;
  }

  .submit_row {
    background: transparent;
    margin-top: 14.58px;
  }

  .form_row {
    height: 46.026px;
  }

  .form_row:nth-child(2) {
    margin-bottom: 6.07px;
  }

  .form_row:nth-child(3) {
    margin-top: 6.07px;
    margin-bottom: 9px;
  }

  /* .form_row > div {
    grid-template-columns: 1fr; 
    align-items: center; 
    width: 100%; 
    background: #F9F9F9;
    border: 0.5px solid #AAA;
    border-radius: 3px;
  } */

  .form_row>div input {
    padding-left: 15.34px;
    font-size: 11px;
  }

  .form_row>div>input::placeholder {
    font-size: 11px;
  }

  .form_row>div>div {
    width: 71.83px;
    padding: 0 15.18px 0 14.64px;
    font-size: 14.645px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.146px;
    border-right: 0.349px solid #AFAFAF;
  }

  .privacy_policy>div>div>img {
    border-radius: 6.936px;
  }

  .submit_btn {
    padding: 0;
  }

  .submit_btn_div {
    padding-bottom: 25.91px;
  }

  .submit_btn_div>.submit_btn>.submit_btn_img {
    width: 100%;
    height: auto !important;
  }

  #click_time_tag {
    display: none;
    padding-top: 14.83px;
    padding-bottom: 0;
  }

  #click_time_tag> :first-child {
    height: 21.63px;
    margin-bottom: 9.37px;
  }

  #click_time_tag> :first-child>span {
    font-size: 17.444px;
    letter-spacing: -0.174px;
  }

  #time-select {
    display: grid;
    grid-template-columns: repeat(10, 62.171px);
    grid-template-rows: repeat(auto-fit, 32.034px);
    grid-column-gap: 7.84px;
    grid-row-gap: 5.97px;
  }

  #time-select div {
    border-radius: 3px;
    padding: 9px 16.17px 10.03px 16px;
    border: solid 0.544px #9F9F9F;
    font-size: 10px;
    letter-spacing: 0.5px;
  }

  .privacy_policy {
    padding: 0;
    justify-content: center;
    align-items: center;
    bottom: 117.87px;
    width: 100%;
  }

  .close_btn3 {
    top: 19.43px;
    right: 19.68px;
  }

  .close_btn2 {
    padding: 9.05px 0 9.62px 0;
    border-radius: 25.142px;
  }

  .close_btn2 span {
    font-size: 10.38px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }

  .close_btn4 {
    display: none;
  }

  .submit_alarm_span> :first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
    gap: 8.89px;
  }

  .submit_alarm_span> :first-child>div:first-child {
    height: 21px;
  }

  .submit_alarm_span> :first-child>div:last-child {
    height: 34px;
  }

  .submit_alarm_span span,
  .submit_alarm_span2 span {
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
  }

  .submit_alarm_span2>div {
    height: 34px;
  }

  /* .submit_alarm_span2 span {
    line-height: 132%;
    letter-spacing: -0.3px;
  } */

  .submit_alarm_span .title,
  .submit_alarm_span .title span,
  .guide_title span {
    font-size: 18px;
    letter-spacing: -0.36px;
  }

  .submit_alarm_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 23.77px 13.44px 24px;
  }

  #show_list {
    gap: 16.45px;
    padding: 0 11.85px 14.06px;
    transform: translate(-50.15%, 100%);
    bottom: 2px;
  }

  #show_list div:first-child {
    width: 100%;
    padding-top: 11.85px;
    border-top: 1px solid #C4C4C4;
  }

  #show_list div>span {
    font-family: Pretendard;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
  }

  #select_text {
    font-size: 13.939px;
    line-height: 9.758px;
    padding: 0 0 0 11.85px;
  }

  /* 안내 문구 */

  #guide_modal>div>div {
    max-width: 265px;
    padding: 19.77px 26px 16.27px 26px;
    border-radius: 10.057px;
    box-shadow: 1.008px 1.008px 4.031px 0 rgba(0, 0, 0, 0.25);
  }

  #guide_modal .guide_title {
    margin-bottom: 6.89px;
  }

  #guide_modal .send_call_div {
    padding: 13.49px 18.55px 12.37px 17.55px;
    background-color: #F6F6F6;
    border-radius: 5px;
    margin: 4.82px 0 9.58px;
  }

  #guide_modal .send_call_div>div {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  #guide_modal .send_call_div>div>div:first-child {
    padding-right: 12px;
    border-right: 1px solid #BEBEBE;
  }

  #guide_modal .send_call_div>div>div {
    display: flex;
    align-items: center;
  }

  #guide_modal .send_call_div>div>div>span {
    font-size: 11.5px;
    font-weight: 400;
    line-height: 13.302px;
    /* 115.674% */
    letter-spacing: -0.23px;
  }

  #guide_modal .send_call_div>div>div>img {
    width: 15.904px;
    margin-left: 6.55px;
    cursor: pointer;
  }

  .guide_modal_btn_div>button {
    width: 103px;
    padding: 11px 0 9.73px;
    border-radius: 5.028px;
    border: 0.503px solid #CDCDCD;
  }

  .guide_modal_btn_div>button>span {
    font-size: 11px;
  }

  .guide_sub_title span {
    font-size: 9.554px;
    font-style: normal;
    font-weight: 500;
    line-height: 13.346px;
    /* 139.689% */
    letter-spacing: -0.191px;
  }

  @media screen and (max-width: 430px) {
    #time-select {
      display: grid;
      grid-template-columns: repeat(5, 62.171px);
      grid-template-rows: repeat(auto-fit, 32.034px);
      grid-column-gap: 7.84px;
      grid-row-gap: 5.97px;
    }
  }

  @media screen and (max-width: 375px) {
    #time-select {
      display: grid;
      grid-template-columns: repeat(4, 62.171px);
      grid-template-rows: repeat(auto-fit, 32.034px);
      grid-column-gap: 7.84px;
      grid-row-gap: 5.97px;
    }
  }
}


.auth-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 300;
}

.auth-overlay.is-visible {
  display: block;
}

.auth-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
  width: calc(100% - 60px);
  max-width: 420px;
  z-index: 300;
}

.auth-modal.is-open {
  display: block;
}

.auth-modal__content {
  padding: 40px 36px 36px;
  position: relative;
}

.auth-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #8f8f8f;
  cursor: pointer;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -ms-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}

.auth-modal__close:hover,
.auth-modal__close:focus {
  color: #333;
}

.auth-modal h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--color_main);
  margin: 0 0 12px;
}

.auth-modal__description {
  font-size: 15px;
  color: #666;
  margin: 0 0 10px;
  line-height: 1.6;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: -6px;
}

.auth-form input {
  border: 0;
  border-bottom: 1px solid #d9d9d9;
  border-radius: 0;
  padding: 5px 0 12px 0;
  font-size: 15px;
  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
  -moz-transition: border-color 0.2s, box-shadow 0.2s;
  -ms-transition: border-color 0.2s, box-shadow 0.2s;
  -o-transition: border-color 0.2s, box-shadow 0.2s;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 10px;





  &::placeholder {
    color: #ccc;
  }

  &[type='tel'] {
    width: auto;
    max-width: 100%;
  }
}

.auth-form input:focus {
  border-color: var(--color_main);
  /* box-shadow: 0 0 0 3px rgba(23, 168, 168, 0.2); */
  outline: none;
  background: #fff;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  /* 원하는 배경색으로 변경 */
  background: #fff;
}

.auth-form input:checked {
  background-color: var(--color_sub);
}

.auth-form__message {
  font-size: 14px;
  line-height: 1.6;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f1f8f8;
  color: #0f6d6d;
  margin-top: 10px;
}

.auth-form__message.is-error {
  background: none;
  color: #d93025;
  padding: 0;
}

.auth-form__message.is-success {
  background: #e9f9f4;
  color: #0c6e4f;
}

.auth-form__message[hidden] {
  display: none;
}

.auth-form__options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.auth-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #555;
  cursor: pointer;
}

.auth-form__checkbox input {
  width: 18px;
  height: 18px;
  display: block;
  padding: 0;
  border: 1px solid #d9d9d9;
  border-radius: 100px;
  margin: 0;
}

.auth-form__checkbox a {
  color: var(--color_main);
  text-decoration: underline;
}

.auth-form__link {
  font-size: 13px;

  &:hover {
    color: var(--color_sub);
  }
}

.auth-form__submit {
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color_sub), var(--color_main));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 18px;
  cursor: pointer;
  /* box-shadow: 0 12px 24px rgba(23, 168, 168, 0.25); */
  -webkit-transition: transform 0.2s, box-shadow 0.2s;
  -moz-transition: transform 0.2s, box-shadow 0.2s;
  -ms-transition: transform 0.2s, box-shadow 0.2s;
  -o-transition: transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
}

.auth-form__submit:hover,
.auth-form__submit:focus {
  /* transform: translateY(-1px); */
  /* box-shadow: 0 18px 30px rgba(23, 168, 168, 0.3); */
}

.auth-modal__footer {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.auth-form__switch {
  background: none;
  border: 0;
  color: var(--color_sub);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  /* text-decoration: underline; */
  padding: 0;
}

.auth-form__switch:hover,
.auth-form__switch:focus {
  color: var(--color_sub);
}

.auth-form__support a {
  font-size: 13px;
  color: #666;
  text-decoration: underline;
}

.auth-form__support a:hover,
.auth-form__support a:focus {
  color: var(--color_sub);
}

.is-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .auth-modal__content {
    padding: 20px 15px;

    .auth-form {
      gap: 6px;
    }

    .auth-modal__footer {
      margin-top: 10px;
    }
  }

  .auth-modal__description {
    font-size: 13px;
    margin-bottom: 15px
  }

  .auth-form label {
    font-size: 13px;
  }

}


/* 260409 */

header {
  position: fixed;
  width: 100%;
  z-index: 90;
  text-align: center;
  transition: all 0.3s;
  /* max-width: 1920px; */
  overflow: hidden;


  >.inwrap {
    margin: 0 auto;
    transition: all 0.3s;
    position: relative;
    padding-top: 30px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);



    &:hover {
      background: var(--bg);

      &:before {
        /* border-bottom: 1px solid #eee; */
        /* height: 107px; */
        background: #fff;
      }

      #logo {
        opacity: 1;
      }

      #logo_w {
        /* opacity: 0; */
      }

      h1>a,
      h1>a:hover {
        color: #444;
      }
    }

    &:before {
      content: '';
      width: 100%;
      height: 78px;
      display: block;
      position: absolute;
      top: 0;
      transition: all 0.3s;
    }

    &:after {
      content: '';
      width: 100%;
      position: absolute;
      left: 0;
      top: 78px;
    }
  }

  .logo {
    transition: all 0.3s;
    position: absolute;
    font-size: 1.5em;
    left: 30px;
    z-index: 1;
    text-align: left;
    margin-top: 2.4rem;





    img {
      position: absolute;
    }

    >a {
      display: block;
      width: 200px;
      position: absolute;
      z-index: 1;
      height: 30px;
    }
  }

  #logo {
    opacity: 0;
  }

  #logo_w {
    opacity: 1;
  }

  nav {
    position: relative;

    &:after {
      font-family: 'icon_font';
      position: absolute;
      right: 50px;
      bottom: 10px;
      font-size: 15em;
      opacity: .1;
      z-index: 0;
      color: #fff;
      animation: rotate_360 5s linear infinite;
      transform-origin: 50% 50%;
    }

    .lnb {
      transition: all 0.3s;
      display: inline-block;

      >li {
        font-size: 20px;
        font-weight: 800;
        transition: all 0.3s;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        min-width: 150px;

        &:hover>a {
          /* color: #4d5fc3; */
        }

        >a {
          font-weight: 500;
          font-size: 18px;
          padding: 30px 30px;
          display: block;
          color: #fff;
          line-height: 1em;
          position: relative;

          &:after {
            content: '\E83E';
            font-family: 'icon_font';
            transition: all 0.3s;
            font-size: 12px;
            position: absolute;
            opacity: 0;
            margin-top: -12px;
            color: #e82491;
            animation: rotate_360 2s linear infinite;
            transform-origin: 50% 50%;
          }
        }

        >ul {
          display: none;
          width: 100%;
          position: relative;
          z-index: 11;
          padding: 20px 0 30px;
          border-left: 1px solid rgba(237, 239, 241, .1);

          >li {
            font-size: 16px;
            font-family: 'Noto Sans KR', sans-serif;

            &:hover>a {
              color: #444;
            }

            >a {
              color: #888;
              padding: 6px;
              display: block;
              font-weight: 400;
              vertical-align: middle;
              position: relative;
              font-size: 16px;
              transition: all 0.3s;

              &:after {
                content: '\E83E';
                font-family: 'icon_font';
                transition: all 0.3s;
                font-size: 12px;
                position: absolute;
                opacity: 0;
                margin-top: -7px;
                color: #fff;
              }
            }

            >ul {
              display: none;
              position: absolute;
              background: #fff;
              border-left: 1px solid #eee;
              border-right: 1px solid #eee;
              left: 50%;
              margin-top: -38px;
              margin-left: 110px;

              >li {
                border-bottom: 1px solid #eee;
                padding: 7px 20px;

                >a {
                  font-size: 16px;
                  font-weight: 400;
                  display: block;
                }

                >a:before {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }
  }

  .top_call {
    position: absolute;
    right: 20px;
    top: 54px;
    transition: all 0.3s;
    width: 151px;
    letter-spacing: 0;
    text-align: right;
    display: block;

    .tel {
      font-family: 'Barlow';
      font-weight: 600;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 100px;
      padding: 5px 20px;
    }

    a {
      position: absolute;
      transition: all 0.3s;
    }

    .active {
      opacity: 1;
    }

    >div {
      position: absolute;
      transition: all 0.3s;
    }

    >div.add {
      font-size: 20px;
      line-height: 2;
      margin-top: 0;
      font-weight: 600;
      text-align: center;
      width: 100%;
    }
  }

  &.f_nav,
  &:hover {
    >.inwrap {
      margin: 0;
      padding: 0;

      &:before {
        /* border-bottom: 1px solid #eee; */
        /* height: 77px; */
        background: var(--color_main);
      }

      .top_call {
        top: 23px;



        .tel {
          /* color: #444; */
          /* border-color: #444; */
        }
      }

      nav {
        .lnb {
          >li {
            >a {
              /* color:#444; */
            }

            &:hover {
              >a {
                /* color: var(--color_main); */
              }
            }
          }
        }
      }

    }

    #logo {
      /* opacity: 1; */
    }

    #logo_w {
      /* opacity: 0; */
    }
  }

  &.open {
    .lnb {
      float: none;
      text-align: center;
      width: 100%;
      max-width: 1400px;
      margin: 80px auto;
      position: relative;
      z-index: 101;

      >li {
        display: block;
        width: 200px;

        >a {
          margin-left: 0;
        }
      }
    }
  }
}

.sub_lnb {
  left: 0;
  transition: all 0.3s;

  &.fix {
    top: 64px;
  }
}

@media (max-width: 768px) {
  header {
    height: 57px;
    text-align: center;
    min-width: 320px;
    z-index: 100;
    border-bottom: 1px solid #ddd;
    top: 0;
    background: #fff;

    >.inwrap {
      margin: 0 15px;
      position: relative;
      background: #fff;
      padding-top: 0;
      height: 100%;
      
      
      
      
      
      

      &:before {
        display: none;
      }
    }

    &.f_nav,
    &:hover {
      >.inwrap {
        margin: 0 15px;
        background: none;

        .top_call {
          top: 50%;
        }

        nav {
          .lnb {
            >li {
              &:hover {
                >a {
                  /* color:var(--color_main); */
                }
              }
            }
          }
        }
      }
    }

    .logo {
      position: static;
      float: none;
      height: 100%;
      margin: 0;
      /* width: 100%; */
      text-align: center;
      
      
      
      
      
      
      
      
      
      
      
      

      >a {
        width: 150px;
        /* display: inline-block; */
        /* margin-left: -150px; */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: auto;
      }

      img {
        /* max-width: 150px; */
        /* margin-top: -3px; */
        /* width: 150px; */
        position: relative;
      }

      #logo_w {
        display: none;
      }

      #logo {
        opacity: 1;
        display: block;
      }
    }

    .text {
      display: none;
    }

    >.header {
      padding: 15px 10px 6px;
      border-bottom: 0;
    }

    .top_call {
      top: 50%;
      width: auto;
      right: 0;
      /* top: 0px; */
      width: 38px;
      height: 38px;
      transform: translate(0%, -50%);
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      






      .tel {
        border: 0;
        padding: 0;
      }
    }

    .tel a {
      /* top: 1px; */
      background: var(--color_main);
      color: #fff;
      border-radius: 100px;
      /* right: 11px; */
      width: 38px;
      height: 38px;
      margin: 0;
      line-height: 38px;
      font-weight: 100;
      text-align: center;
      font-size: 2em;
      position: inherit;
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

      &:before {
        content: '\E897';
        vertical-align: text-bottom;
        font-family: 'icon_font';
      }
    }

    .menu_wrap {
      position: absolute;
      left: 0;
      top: 17px;
      height: 30px;
      
      
      
      
      
      
      
      
      
      

      #menu_but {
        margin-top: 20px;
        
        
        
        span {
          width: 25px;
          height: 3px;
          display: block;
          background: var(--pointcolor);
          margin-top: 10px;
        }

        &:before,
        &:after {
          content: '';
          width: 25px;
          height: 3px;
          display: block;
          background: var(--color_main);
          position: absolute;
          transition: all 0.3s;
        }

        &:before {
          /* margin-top: -10px; */
        }

        &:after {
          margin-top: 7px;
          background: var(--color_main);
        }
      }
    }

    &.open {
      .menu_wrap #menu_but {
        span {
          display: none;
        }

        &:before {
          margin-top: 10px;
          transform: rotate(45deg);
        }

        &:after {
          margin-top: 10px;
          transform: rotate(-45deg);
        }
      }

      nav {
        position: fixed;
        min-height: 100%;
        width: 100%;
        z-index: 1001;
        display: block;
        top: 57px;
        bottom: 0;
        left: 0;
        background: #fff;
        overflow: auto;

        &:before {
          content: '';
          display: block;
          position: fixed;
          height: 2px;
          background: #444;
          left: 15px;
          right: 15px;
          z-index: 1000;
        }
      }

      .lnb {
        width: auto;
        background: #fff;
        margin: 0 15px;
        border-bottom: 2px solid #666;
        overflow-y: auto;

        >li {
          width: 100%;
        }
      }
    }

    nav {
      display: none;

      .lnb {
        display: block;

        &:before {
          display: none;
        }

        >li {
          display: block;
          padding: 0;
          text-align: left;
          width: auto;
          border-bottom: .5px solid #ccc;
          font-size: 16px;

          >a {
            font-size: 16px;
            padding: 15px;
            color: var(--444);
          }

          &.has-sub>a::after {
            content: "\E868";
            font-family: "icon_font";
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            position: absolute;
            right: 15px;
            color: #666;
            left: auto;
            font-size: 1em;
            margin: 0;
            width: 20px;
            text-align: center;
            animation: none;
            opacity: 1;
          }

          &.has-sub.active {
            background: var(--bg);

            >a {
              background: var(--color_main);
              color: var(--color_sub);
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              

              &:after {
                content: "";
                border: 0;
                line-height: 0;
                right: 18px;
                width: 15px;
                display: block;
                height: 1.5px;
                background: var(--color_sub3);
                margin-top: -10px;
              }
            }
          }

          >ul {
            padding: 0 15px;
            box-sizing: border-box;
            margin: 0 !important;
            width: 100%;

            >li {
              display: block;
              float: none;
              margin-top: 0;
              border-top: 1px solid #fff;

              &:after {
                display: none !important;
              }

              >a {
                display: block;
                padding: 8px 0;
                width: auto;
                color: #444;

                >span {
                  float: right;
                  margin-right: 3px;

                  &:after {
                    content: '\E835';
                    font-family: 'icon_font';
                    float: right;
                    margin-top: 5px;
                  }
                }
              }

              &.active>a>span:after {
                content: '\E876';
              }

              >ul {
                position: relative;
                margin-left: 0;
                left: 0;
                margin-top: 0;
                background: #fff;
                margin-bottom: 15px;

                >li {
                  padding: 5px 10px;
                  border-top: 1px solid #fff;

                  &:last-child {
                    border: 0;
                  }
                }
              }
            }
          }
        }
      }
    }

    &.f_nav {
      margin-top: 0;
    }
  }
}



/* ==================================================================
    Animation 및 효과 설정부분
===================================================================== */

/* ========== Aos (fade) ========== */
[data-aos=fade-up2] {
  transform: translate3d(0, 30px, 0);
}

[data-aos=fade-down2] {
  transform: translate3d(0, -30px, 0);
}

[data-aos=fade-right2] {
  transform: translate3d(-30px, 0, 0);
}

[data-aos=fade-left2] {
  transform: translate3d(30px, 0, 0);
}

[data-aos=fade-up-right2] {
  transform: translate3d(-30px, 30px, 0);
}

[data-aos=fade-up-left2] {
  transform: translate3d(30px, 30px, 0);
}

[data-aos=fade-down-right2] {
  transform: translate3d(-30px, -30px, 0);
}

[data-aos=fade-down-left2] {
  transform: translate3d(30px, -30px, 0);
}

[data-aos=fade-in] {
  transform: translate3d(0, 0, 0);
}

/* ========== Aos (zoom) ========== */
[data-aos*="bg-zoom-out"] {
  transform: scale(1.1)
}

[data-aos*="bg-zoom-out"].aos-animate {
  transform: scale(1);
}

[data-aos*="bg-zoom-in"] {
  transform: scale(1)
}

[data-aos*="bg-zoom-in"].aos-animate {
  transform: scale(1.1);
}

/* ========== Aos (reveal) ========== */
[data-aos="reveal-line"] {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

[data-aos="reveal-line"].aos-animate {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

[data-aos="reveal-line-revers"] {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%)
}

[data-aos="reveal-line-revers"].aos-animate {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

[data-aos="reveal-line-half"] {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

[data-aos="reveal-line-half"].aos-animate {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

[data-aos="reveal-line-half-revers"] {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

[data-aos="reveal-line-half-revers"].aos-animate {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}

[data-aos="reveal-top"] {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}

[data-aos="reveal-top"].aos-animate {
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}

[data-aos="reveal-bottom"] {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

[data-aos="reveal-bottom"].aos-animate {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

[data-aos="reveal-circle"] {
  clip-path: circle(0% at 50% 50%);
}

[data-aos="reveal-circle"].aos-animate {
  clip-path: circle(100% at 50% 50%);
}

[data-aos="reveal-open"] {
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%)
}

[data-aos="reveal-open"].aos-animate {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}


/* ========== Aos (animation 효과로 설정) ========== */
[data-aos="title"] {
  opacity: 0;
}

[data-aos="title"].aos-animate {
  animation: title 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

[data-aos="tit_mini"] {
  opacity: 0;
}

[data-aos="tit_mini"].aos-animate {
  animation: tit_mini 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

[data-aos="focus"] {
  opacity: 0;
}

[data-aos="focus"].aos-animate {
  animation: focus 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

[data-aos="radius"] {
  border-radius: 10rem;
  opacity: 0;
}

[data-aos="radius"].aos-animate {
  border-radius: 0 0 0 0;
  animation: focus 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ========== Animation ========== */
@keyframes title {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

@keyframes tit_mini {
  0% {
    letter-spacing: 0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    letter-spacing: 0;
    opacity: 1;
  }
}

@keyframes focus {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes cycleM {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(1.5rem) scale(0.95)
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes scroll {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  80% {
    transform: translate(-50%, 1.4rem);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes bigger {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(5);
    opacity: 0;
  }
}

@keyframes bounce {
  to {
    transform: translateX(2rem);
    opacity: 0;
  }
}




@keyframes rolling1 {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-100%);
  }

  50.01% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes rolling2 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200%);
  }
}

.rolling-list.original {
  animation: rolling1 50s linear infinite;
}

.rolling-list.clone {
  animation: rolling2 50s linear infinite;
}

@media(max-width:768px) {
  .rolling-txt .rolling-list .list img {
    width: 18px;
  }
}


.map_marker {
  text-align: center;
  width: 180px;
  height: 35px;
  background: #fff;
  position: relative;

  p {
    padding: .5rem 1rem;
    margin: 0;
    position: absolute;
    border-radius: .6rem;
    border: 2px solid var(--color_main);
    CORNER-SHAPE: SUPERELLIPSE(0.5);
    background: #ffffff;
    left: 0;
    right: 0;
    left: -3px;
    right: -3px;
    top: -3px;
    bottom: -3px;
    font-weight: 600;
    font-size: 2.2rem;
    line-height: normal !important;
    
    
    

    &:after {
      content: '';
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 20px solid var(--color_main);
      position: absolute;
      margin-top: 33px;
      left: 50%;
      margin-left: -10px;
    }
  }
}

@media (max-width: 768px) {
  .map_marker {
    width: 150px;
    height: 30px;

    p {
      /* font-size: 3rem; */
      /* line-height: 4.5rem; */





      &:after {
        margin-top: 29px;
      }
    }
  }
}

/* ========== title ========== */
.title {
  text-align: center;
  margin-bottom: 8rem;

  img,
  i {
    margin-bottom: 2rem;
    font-size: 4.6rem;
    display: inline-block;
  }

  h2 {
    font-weight: 700;
    font-size: 6rem;
    color: var(--color_main);
    span{
      color:var(--000);
    }

  }

  h4 {
    font-size: 3rem;
    color: var(--000);
  }

  p {
    font-size: 2rem;
    color: var(--000);
  }


}

/* 타블렛 (해상도 120rem 이하) */
@media (max-width: 120rem) {}

/* 모바일 (해상도 768px 이하) */
@media (max-width: 768px) {
  .title {
    margin-bottom: 5rem;
    
    
    
    
  img, 
    i{
    font-size: 3rem;
    width: 24px;
    margin-bottom: 1rem;
  }
    h4{
      font-size: 2.4rem;
    }
    h2 {
      font-size: 3.6rem;
    }

  }
}




/* ==================================================================
    layout
===================================================================== */

.wrap {
  >section.line {
    /* max-width: 150rem; */
    margin: 0 auto;
    padding: 15rem 0;
    width: calc(100% - 10rem);
    margin: 0 auto;
    border-right: 1px solid rgba(var(--pointcolor-rgb), 0.2);
    border-left: 1px solid rgba(var(--pointcolor-rgb), 0.2);

    >.inwrap {
      max-width: 150rem;
      margin: 0 auto;

      &.full {
        max-width: 100%;
      }
    }
  }

  /* 타블렛 (해상도 120rem 이하) */
  @media (max-width: 120rem) {}

  /* 모바일 (해상도 768px 이하) */
  @media (max-width: 768px) {

    >section.line {
      padding: 8rem 0;
      width: calc(90%);
    }

  }
}



/* ========== sub_visual_title ========== */
.sub_visual_title {
  overflow: hidden;

  >div {
    background: url(images/visual.jpg) no-repeat center;
    text-align: center;
    background-size: cover;
    height: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    h1 {
      font-size: 6rem;
      color: var(--fff);
      margin-bottom: 1rem;
    }
    .sub_nav {
      position: absolute;
      bottom: 7rem;
      > ul {
        display: flex;
        gap: 1rem;
        
        
        
        
        
        
        
        
            
        > li {
        a{
          font-size: 2rem;
          background: var(--fff);
          padding: 1rem 3rem;
          display: inline-block;
          border-radius: 10rem;
          font-weight: 500;
          display: block;
          
          
          
          
          
          
          &.active{
            background: var(--color_main);
            color:var(--fff);
          }
        }
          &:first-child{
            a{
            border:0;  
            }
            
          }
      }
      }
    
      
    }

  }
}

/* 타블렛 (해상도 120rem 이하) */
@media (max-width: 120rem) {}

/* 모바일 (해상도 768px 이하) */
@media (max-width: 768px) {
  .sub_visual_title {
    margin-top: 57px;
    >div {
      height: 20rem;
      gap: 1rem;
       
      h1 {
        font-size: 4rem;
        margin-bottom: 4rem;
      }
      .sub_nav {
        overflow-x: auto;
        bottom: 2rem;
        width: 100%;
        padding: 0;
        
        > ul{
            width: max-content;
            padding: 0 1rem;
            display: flex;
            justify-content: center;
            
            
          > li{
          a{
            font-size: 1.8rem;
            padding: 0.5rem 2rem;
            }
          }
          &.three{
            display:flex;
            justify-content: center;
            width: calc(100% - 2rem);
          }
        }
        
      }
    }

  }
}

.horiz-line {
  width: 100%;
  height: 1px;
  background: rgba(var(--pointcolor-rgb), 0.2);
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
}

/* ==================================================================
    서브 공통 스타일
===================================================================== */

.wrap {
  >section {
    >.inwrap {
      max-width: 130rem;
      padding: 10rem 0;
      margin: 0 auto;
    }
  }
}

/* 타블렛 (해상도 120rem 이하) */
@media (max-width: 120rem) {}

/* 모바일 (해상도 768px 이하) */
@media (max-width: 768px) {
  .wrap {
    >section {
      padding: 8rem 0 8rem 0;
      > .inwrap{
        padding: 0 2rem;
      }
    }
  }
}


.layerwrite{text-align:left;background: #fff;width: 560px;position: fixed;left: 50%;z-index: 300;margin-left: -280px;top: 140px;display: none;border: 1px solid #dadada;border-radius: 30px;overflow: hidden;padding: 50px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.layerwrite h2{font-size: 2.5em;font-weight: 400;margin-bottom: 20px;text-align: center;color: var(--color_main);font-weight: 600;font-family: 'NanumSquare';}
.layerwrite h2 i {float: right;cursor: pointer;position: absolute;right: 20px;top: 20px;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;font-size: .7em;}
.layerwrite h2 i:hover{-webkit-transform: rotate(180deg);transform: rotate(180deg);}
/* .layerwrite h2 > em {position: absolute;display: inline-block;width: 20px;height: 20px;background:#ccad90;margin: -25px 0 0 -15px;}
.layerwrite h2 > em:before, .layerwrite h2 > em:after {content:'';width: 20px;height: 20px;background:#e0cebc;display: block;position: absolute;}
.layerwrite h2 > em:before{margin: 0px 0 0 23px;}
.layerwrite h2 > em:after {background:#ebded3;margin: 23px 0 0 23px;} */
.layerwrite .wraper p {/* margin:0; */text-align: center;}
.layerwrite .wraper > iframe {width: 330px; height: 360px; }
.layerwrite .quick_counsel table {width: 100%;margin: 10px 0 20px;border-top: 1px solid #d3cfc8;}
.layerwrite .quick_counsel table th {border-bottom: 1px solid #cbcbcb;background: #f4f8fb;color: #606060;font-weight: 400;width: 100px;text-align: center;vertical-align:  middle;}
.layerwrite .quick_counsel table td {border-bottom: 1px solid #d5d5d5;padding: 0;background: #fff;}
.layerwrite .quick_counsel form input[type="text"] {border:0;font-size: 1em;padding: 10px 15px;width: 327px;}
.layerwrite .quick_counsel form   textarea {padding: 10px 15px;border:0;width: 327px;min-height: 112px;}
.layerwrite .quick_counsel form p {margin-bottom: 40px;}
.layerwrite .quick_counsel form p input[type=checkbox] + label:before{}
.layerwrite .quick_counsel form p input[type=checkbox]:checked + label:before{}
.layerwrite .quick_counsel form input[type="submit"] {width: auto;background: var(--color_main);border: 0;color: #fff;font-size: 1.4em;padding: 10px 40px;cursor: pointer;border-radius: 40px;display: block;margin: 0 auto;}
.layerwrite img {display: block;}

.layerwrite .quick_counsel form input::placeholder ,
.layerwrite .quick_counsel form textarea::placeholder{color:#c5c5c5;}

.Counselagree_view {line-height:1em;color:#fff;background: #898989;padding:5px 10px;border-radius:4px;margin-left:10px;display:inline-block;}
.Counselagree_view:hover {color:#fff;}

@media screen and (max-width: 1600px) {
  .quick_menu {display:none;}
}



@media screen and (max-width: 767px) {
  .quick_menu {display: block;top: auto;bottom: 0px;width: 100%;left: 0;right: 0;z-index: 20;}
  .quick_menu.f_nav{top:auto}
  .quick_menu > ul{width:100%;}
  .quick_menu > ul > li{float:left;width:20%;margin: 0;}
  .quick_menu > ul > li:last-child{}
  .quick_menu > ul > li > a:before{border-radius: 0;/* border-right: 1px solid #ffffff; */width: 100%;height: auto;display: block;}
  .quick_menu > ul > li:nth-child(5) a{/* border:0; */}
  .quick_menu > ul > li > a span{margin: 0;position: sticky;opacity: 1;padding: 0;width: 100%;margin-bottom: 8px;font-size: 12px;display: none;}
  .quick_menu > ul > li a{
  width: auto;
}
  .quick_menu > ul > li a::before {margin-top: 10px;font-weight: 100;margin-bottom: 3px;line-height: 1.6;margin: 0;}
  .quick_menu > ul > li:hover > a{padding: 0;margin: 0;text-align: center;width: auto;}

  .layerwrite{width:90%;margin-left:-45%;padding: 50px 5% 30px;}
  .layerwrite h2{font-size:2em;margin-bottom: 10px;}
  .layerwrite h2 > em{width:15px;height:15px;margin: -20px 0 0 -10px;}
  .layerwrite h2 > em:before, .layerwrite h2 > em:after{width:15px;height:15px;margin: 18px 0 0 18px;}
  .layerwrite h2 > em:before{margin: 0px 0 0 18px;}
  .layerwrite .quick_counsel table th{width: 25%;}
  .layerwrite .quick_counsel form input[type="text"], .layerwrite .quick_counsel form textarea{width: 90%;padding: 10px 5%;}
  .Counselagree_view{margin-left: 5px;font-size: .9em;}
  .layerwrite .quick_counsel form p{margin-bottom:20px}
  .layerwrite .quick_counsel table{margin-top:0}
  .layerwrite .quick_counsel form input[type="submit"]{  font-size:1.2em;  padding: 10px 20px;  }
}