@charset "utf-8";
/************************************************************************
 * filename     : common.css
 * description  : uvote common style CSS
 * date         : 2024.10.31
************************************************************************/

/*===== LAYOUT =====*/
body{
  color:#1F2330;
}
body.modal-open{
  overflow:hidden;
}
.wrapper{
  padding-bottom:30rem;
  position:relative;
}

/*===== HEADER =====*/
#header {
  height: var(--header-height);
  position: fixed;
  top: 0; left: 0; right:0;
  padding: 0 1.5rem;
  background-color: #fff;
  border-bottom:1px solid #f3f3f3;
  z-index: 9;
  transition: all .5s;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, .05);
}
#header.fixed-header{
  position: fixed;
  top: -130px; left: 0; right:0;
  animation: slide-down 0.7s;
  opacity: 0.9;
}
#header-in{
  max-width:1280px;
  margin:0 auto;
  padding:.8rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-toggle {
  font-size: 1.5rem;
  color: var(--dark-color);
  cursor: pointer;
}


/*===== MEDIA QUERIES : MOBILE (NAV) =====*/
@media screen and (max-width: 768px) {

  /*===== HEADER =====*/
  .nav {
    position: fixed;
    top: 0;
    left: -100%;
    background-color: var(--dark-color);
    color: var(--dark-color);
    width: 100%;
    height: 100vh;
    padding: 1rem 0;
    z-index: var(--z-fixed);
    -webkit-transition: .5s;
    transition: .5s;
  }
  .header-logo {
    display: block;
    padding-right: 50px;
  }
  .nav-top{
    flex-direction: column;
  }
  .nav-top .nav-list-util{
    padding: .8rem 0;
    margin: 1rem 0;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav-top .nav-list-util .nav-link {
    color: rgba(255, 255, 255, .65) !important;
  }
  .nav-top .nav-list-util .nav-link::after {
    content: '';
    background-color: rgba(255, 255, 255, .15) !important;
}

}

.header-logo{
  display: block;
  font-size:inherit;
}
.header-logo img{
  height:30px;
}
.nav-content {
  padding:0 1.5rem;
}
.nav-top {
  display:flex;
}
.nav-top .nav-list-util {
  flex:1;
}
.nav-top .nav-list-util .nav-link {
  font-size: .9rem;
  color: rgba(0, 0, 0, .65);
  margin-left: 1rem;
  position:relative;
}
.nav-top .nav-list-util .nav-link::after{
  content: '';
  width: 1px;
  height: 11px;
  background-color: rgba(0, 0, 0, .15);
  position: absolute;
  right: -11px;
  top: 4px;
}
.nav-top .nav-list-util .nav-link:last-child::after{
  display:none;
}
.nav-top .nav-list-util .nav-link:hover {
  color: #333;
  filter: brightness(.95);
}

.nav-bottom{
  display:flex;
}
.nav-bottom .nav-close{
  position: absolute;
  right: 1.5rem; top:1rem;
  font-size: 1.3rem;
  padding: .25rem;
  color: #4f5367;
  border-radius: 50%;
  cursor: pointer;
}
.nav-bottom .nav-close:hover{
  filter: brightness(1.5);
}
.nav-bottom .nav-menu {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}
.nav-bottom .nav-menu .nav-list .nav-item {
  margin: 1.5rem 0;
}
.nav-bottom .nav-menu .nav-list .nav-item .nav-link{
  color: #fff;
  white-space: nowrap;
}
.nav-bottom .nav-menu .nav-list .nav-item .nav-link:hover{
  color: #fff;
  filter: brightness(1.5);
}
.show {
  left: 0;
}
.nav-bottom .nav-menu .nav-list .nav-item .nav-link.active {
  color: #1d88fa;
}
.nav-bottom .nav-menu .nav-list .nav-item .nav-link:hover,
.nav-bottom .nav-menu .nav-list .nav-item .nav-link.active:hover{
  color:#1d88fa;
  filter: brightness(1.1);
}

/*===== FOOTER =====*/
#footer{
  padding:2rem 1.5rem;
  position:absolute;
  left:0; right:0; bottom:0;
  background-color: #66727E;
}
#footer #footer-in{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-direction: column;
}
#footer #footer-in .footer-logo{
  font-size: inherit;
  padding-bottom:15px;
}
#footer #footer-in .footer-logo img{
  height:25px;
}
#footer #footer-in .footer-link{
  padding:0 0 15px 0;
}
#footer #footer-in .footer-link ul{
  display:flex;
  padding:0 0 15px 0;
}
#footer #footer-in .footer-link ul li{
  position:relative;
  padding: 0 10px;
  line-height: 1.8;
}
#footer #footer-in .footer-link ul li:first-child {
  padding-left: 0;
}
#footer #footer-in .footer-link ul li::after {
  display: block;
  position: absolute;
  right: 0;
  top: 4px;
  content: "";
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, 0.15);
}
#footer #footer-in .footer-link ul li:last-child::after {
  display:none;
}
#footer #footer-in .footer-link ul li .btn-link-footer{
  display: block;
  font-size: 14px;
  color: #FFFFFF;
  border:0 none;
  background: none;
  cursor: pointer;
  font-size:1rem;
}
#footer #footer-in .footer-link ul li .btn-link-footer:hover,
#footer #footer-in .footer-link ul li .btn-link-footer:focus{
  filter: brightness(1.1);
}
#footer #footer-in .footer-sns{
  text-align:right;
  position:relative;
  display: flex;
  flex-wrap: wrap;
}
#footer #footer-in .footer-sns > a{
  position:relative; 
  margin:0 5px; 
  width: 35px; height: 35px; 
  background-color:#fff;
  border-radius:50%;
  cursor: pointer;
}
#footer #footer-in .footer-sns > a:after{
  content:'';
  position:absolute;
  top:4px; left:3px;
  width:80%; height:80%;
  background-repeat:no-repeat;
  background-position:50%;
}
#footer #footer-in .footer-sns > .insta:after{background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2366727e; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M12,8.8c-1.7,0-3.2,1.5-3.2,3.2s1.5,3.2,3.2,3.2,3.2-1.5,3.2-3.2-1.5-3.2-3.2-3.2Z'/%3E%3Cpath class='cls-1' d='M16.1,2.5h-8c-3.1,0-5.5,2.4-5.5,5.4v8c0,3.1,2.4,5.5,5.5,5.5h8c3,0,5.4-2.4,5.4-5.5V7.9c0-3-2.4-5.4-5.4-5.4ZM12,17c-2.8,0-4.9-2.2-4.9-4.9s2.2-5,4.9-5,4.9,2.2,4.9,4.9-2.2,5-4.9,5ZM17.1,8.1c-.6,0-1.1-.5-1.1-1.1s.5-1.1,1.1-1.1,1.1.5,1.1,1.1-.5,1.1-1.1,1.1Z'/%3E%3C/svg%3E");}
#footer #footer-in .footer-sns > .bl:after{background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2366727e; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M5.8,9.9c-.2,0-.5,0-.6.3-.2.2-.3.4-.3.6s0,.5.3.6c.2.2.4.3.6.3s.5,0,.6-.3c.2-.2.3-.4.3-.6s0-.5-.3-.6c-.2-.2-.4-.3-.6-.3Z'/%3E%3Cpath class='cls-1' d='M13.2,9.9c-.2,0-.5,0-.6.3-.2.2-.3.4-.3.6s0,.5.3.6c.2.2.4.3.6.3s.5,0,.6-.3c.2-.2.3-.4.3-.6s0-.5-.3-.6c-.2-.2-.4-.3-.6-.3Z'/%3E%3Cpath class='cls-1' d='M18.2,9.9c-.2,0-.5,0-.6.3-.2.2-.3.4-.3.6s0,.5.3.6c.2.2.4.3.6.3s.5,0,.6-.3c.2-.2.3-.4.3-.6s0-.5-.3-.6c-.2-.2-.4-.3-.6-.3Z'/%3E%3Cpath class='cls-1' d='M20.4,3.2H3.6c-1.3,0-2.4,1.1-2.4,2.4v9.7c0,1.3,1.1,2.4,2.4,2.4h6.6s1.3,3.5,1.7,3.5,1.9-3.5,1.9-3.5h6.7c1.3,0,2.4-1.1,2.4-2.4V5.6c0-1.3-1.1-2.4-2.4-2.4ZM7.5,12.2c-.3.4-.9.5-1.4.5s-.9-.1-1.1-.4h0v.3h-1.3v-5.6h1.3v2.1h0c.3-.3.8-.4,1.3-.4.5,0,.9.3,1.2.6.3.3.5.9.5,1.4s-.2,1-.5,1.4ZM10.2,12.7h-1.3v-3.5c0-.8-.6-.9-.6-.9v-1.4s1.8.1,1.9,2.3v3.4ZM15.3,11.6c-.1.3-.3.5-.5.7-.2.2-.4.3-.7.4-.3.1-.5.2-.8.2s-.6,0-.8-.2c-.3-.1-.5-.3-.7-.4-.2-.2-.4-.4-.5-.7-.1-.2-.2-.5-.2-.8s0-.5.2-.8c.1-.2.3-.5.5-.7.2-.2.4-.3.7-.4.3-.1.5-.2.8-.2s.6,0,.8.2c.3.1.5.3.7.4.2.2.4.4.5.7.1.3.2.5.2.8s0,.5-.2.8ZM20.4,12.1c0,1-.2,1.6-.6,2-.5.5-1.3.5-1.9.4v-1c.5,0,1.2-.3,1.2-1v-.3h0c-.3.4-.7.6-1.3.6s-1-.2-1.3-.6c-.3-.4-.5-.8-.5-1.5s.2-1.2.5-1.6c.3-.4.8-.6,1.4-.6s.8.1,1.1.4h0v-.3h1.3v3.4h0Z'/%3E%3C/svg%3E");}
#footer #footer-in .footer-sns > .ytb:after{background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_3' data-name='Layer 3' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2366727e; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M22.5,6.7c-.3-1-1-1.7-1.9-2-1.7-.5-8.6-.5-8.6-.5,0,0-6.9,0-8.6.5-.9.3-1.7,1-1.9,2-.5,1.7-.5,5.3-.5,5.3,0,0,0,3.6.5,5.3.3,1,1,1.7,1.9,2,1.7.5,8.6.5,8.6.5,0,0,6.9,0,8.6-.5.9-.3,1.7-1,1.9-2,.5-1.7.5-5.3.5-5.3,0,0,0-3.6-.5-5.3ZM9.8,15.3v-6.5l5.8,3.3-5.8,3.3Z'/%3E%3C/svg%3E");}
#footer #footer-in .footer-sns > .kakao:after{background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_4' data-name='Layer 4' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2366727e; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M12.5,4c-4.7,0-8.5,3.1-8.5,6.9s1.6,4.5,3.8,5.8l-.6,3.3,3.6-2.4c.5.1,1.1.1,1.6.1,4.7,0,8.5-3.1,8.5-6.9,0-3.7-3.7-6.8-8.4-6.8Z'/%3E%3C/svg%3E");}
#footer #footer-in .footer-info{
  padding:0 0 15px 0;
}
#footer #footer-in .footer-info ul li{
  position:relative;
  padding: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.8;
}
#footer #footer-in .footer-info ul li address{
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
#footer #footer-in .footer-copyright{
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}

/*===== 이용안내 & 개인정보처리방침 =====*/
.terms-content .list-title,
.policy-content .list-title{
  margin-bottom: 1rem;
  padding: .5rem 1rem;
  background-color: #f3f4f5;
  font-size: 1.2rem;
  font-weight: 600;
  text-align:center;
}
dl.list-style-01{
  margin-bottom:1.2rem;
}
dl.list-style-01 dt{
  margin-bottom:.65rem;
  font-weight:600;
}
dl.list-style-01 dd{
  padding-left:1rem;
  margin-bottom:.65rem;
}
dl.list-style-01 dd ul{
  margin-top:.5rem;
}
dl.list-style-01 dd ul li{
  line-height:1.6;
  color:#666a77;
}
dl.list-style-01 .box-guide{
  margin-bottom:0;
  color:#666a77;
}


/*===== MEDIA QUERIES : DESKTOP =====*/
@media screen and (min-width: 768px) {

  /*===== HEADER =====*/
  #header-in{
    padding:1rem 0;
  }
  .header-logo, .header-toggle {
    display: none;
  }
  .nav {
    width: 100%;
  }
  .nav-content {
    justify-content: space-between;
    display:flex;
    flex-direction: column;
    padding:0;
  }

  .nav-top {
    padding-bottom: 1rem;
  }
  .nav-top .header-logo.desktop{
    display:block;
  }
  .nav-top .header-logo.desktop img{
    height:37px;
  }
  .nav-top .nav-list-util{
    text-align:right;
  }
  
  .nav-bottom .nav-close{
    display: none;
  }
  .nav-bottom .nav-menu{
    flex:1;
  }
  .nav-bottom .nav-menu .nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
  }
  .nav-bottom .nav-menu .nav-list .nav-item {
    margin: 0 .8rem;
  }
  .nav-bottom .nav-menu .nav-list .nav-item .nav-link {
    padding: .3rem .1rem;
    font-size: 1rem;
    color:#333;
  }
  .nav-bottom .nav-menu .nav-list .nav-item .nav-link.active{
    color:#1d88fa;
  }
  .nav-bottom .nav-menu .nav-list .nav-item .nav-link:hover,
  .nav-bottom .nav-menu .nav-list .nav-item .nav-link.active:hover{
    color:#1d88fa;
    filter: brightness(1.1);
  }


  /*===== FOOTER =====*/
  #footer{
    padding:2rem 1.5rem;
  }
  #footer #footer-in{
    max-width:1280px;
    display:flex;
    flex-direction: column;
  }
  #footer #footer-in .footer-logo{
    padding-bottom:25px;
  }
  #footer #footer-in .footer-logo img{
    height:35px;
  }
  #footer #footer-in .footer-link{
    display:flex;
    padding:0 0 10px 0;
  }
  #footer #footer-in .footer-link ul{
    display:flex;
    flex-grow: 1;
    padding:0 0 0 0;
  }
  #footer #footer-in .footer-link ul li{
    padding: 0 10px;
    line-height: 1.8;
  }
  #footer #footer-in .footer-link ul li:first-child {
    padding-left: 0;
  }
  #footer #footer-in .footer-link ul li a{
    font-size: 15px;
  }
  #footer #footer-in .footer-info ul{
    display:flex;
    flex-grow: 1;
    flex-wrap: wrap;
  }
  #footer #footer-in .footer-info ul li{
    padding: 0 10px;
    font-size: 15px;
    line-height: 1.8;
  }
  #footer #footer-in .footer-info ul li:first-child {
    padding-left: 0;
  }
  #footer #footer-in .footer-info ul li::after {
    display: block;
    position: absolute;
    right: 0;
    top: 7px;
    content: "";
    width: 1px;
    height: 13px;
    background: rgba(255, 255, 255, 0.15);
  }
  #footer #footer-in .footer-info ul li:last-child::after {
    display:none;
  }
  #footer #footer-in .footer-copyright{
    font-size: 15px;
  }


}

/*===== floating btn : help menu =====*/
.nav-floating{
  right: 0;
  bottom: 0;
  position: fixed;
  transition: all, 1s;
  z-index: 9;
}
.floating-help.floating-smoke{}
.floating-help .floating-in {
  height: 3.2em;
  width: 3.2em;
  border-radius: 50%;
  position: fixed;
  bottom : 2em;
  right: 2em;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: visibility 400ms;
  animation: 400ms cubic-bezier(0.36, 0, 0, 1) 0s 1 normal both running jBcSpD;
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.15) 0px 8px 30px;
}
.floating-help .floating-in i{
  font-size: 1.6em;
  color: #fff;
}
.floating-help .floating-main {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: all, 0.2s;
  z-index: 8;
  background: #1d88fa;
  background: linear-gradient(rgb(29 187 250) 0%, rgb(30, 136, 250) 100%);
}
.floating-help .floating-in:hover .floating-main{
  filter:brightness(1.1);
}
.floating-help .float-opt {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  opacity: 0;
  transition: all, 0.2s;
  z-index: 7;
  transform: translate(0%, 0%);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.15) 0px 8px 30px;
}
.floating-help .float-opt:hover{
  filter:brightness(1.1);
}
.floating-help .opt-inquire{
  background: #1d88fa;
  background: linear-gradient(rgb(29 187 250) 0%, rgb(30, 136, 250) 100%);
}
.floating-help .opt-tel{
  background: #1d88fa;
  background: linear-gradient(rgb(29 187 250) 0%, rgb(30, 136, 250) 100%);
}
.floating-help .float-opt a{
  line-height:1;
}
.floating-help.float-open {
  /*background-image: linear-gradient(to top, #222, transparent);*/
}
.floating-help.float-open .floating-main{
  transform: rotate(45deg);
  opacity: 1;
  background: rgba(0, 0, 0, .5);
}
.floating-help.float-open .float-opt {
  opacity: 1;
}
.floating-help.float-open .opt-inquire {
  /*transform: translate(0%, -130%);*/
  transform: translate(-130%, 0%);
}
.floating-help.float-open .opt-tel {
  transform: translate(-250%, 0%);
  /*transform: translate(0%, -250%);*/
}

/*===== floating btn : top scroll =====*/
.scroll-top-button{
  position: fixed;
  right: 40px;
  bottom: 148px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  height: 3.2em;
  width: 3.2em;
  background: rgba(0, 0, 0, .5);
}
.scroll-top-button:before {
  font-family: xeicon !important;
  font-style: normal;
  content: "\e915";
  font-size: 24px;
  font-weight: 400;
  display: inline-block;
  vertical-align: top;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  background-color: #06060f;
  color: #99a9b5;
}
.scroll-top-button.visible {
  right: 82px;
  opacity: .5;
  visibility: visible;
}

/*===== MEDIA QUERIES : WIDE DESKTOP =====*/
@media screen and (min-width: 992px) {

  
  /*===== HEADER =====*/
  #header-in{
    padding:1.5rem 0;
  }
  .nav-bottom .nav-menu .nav-list .nav-item {
    margin: 0 1rem;
  }
  .nav-bottom .nav-menu .nav-list .nav-item .nav-link {
    padding: .5rem .1rem;
    font-size: 1.2rem;
  }

  /*===== FOOTER =====*/
  #footer{
    padding:2rem 1.5rem;
  }
  #footer #footer-in .footer-logo{
    padding-bottom:25px;
  }
  #footer #footer-in .footer-link{
    display:flex;
    padding:0 0 15px 0;
  }
  #footer #footer-in .footer-link ul li{
    padding: 0 15px;
    line-height: 1.8;
  }
  #footer #footer-in .footer-link ul li a{
    font-size: 16px;
  }
  #footer #footer-in .footer-info ul li{
    padding: 0 15px;
    font-size: 15px;
    line-height: 1.8;
  }
  #footer #footer-in .footer-info ul li::after {
    display: block;
    position: absolute;
    right: 0;
    top: 7px;
    content: "";
    width: 1px;
    height: 13px;
    background: rgba(255, 255, 255, 0.15);
  }
  #footer #footer-in .footer-copyright{
    font-size: 15px;
  }


}

/*===== MEDIA QUERIES : MOBILE =====*/
@media screen and (max-width: 767px) {


}

/*===== MEDIA QUERIES : MINI MOBILE =====*/
@media only screen and (max-width:480px){


}