@charset "utf-8";
/************************************************************************
 * filename     : main.css
 * description  : uvote main style CSS
 * date         : 2024.09.09 JDW
************************************************************************/

/*===== LAYOUT =====*/
.wrapper.wrapper-main{
  padding-bottom: 25rem;
}

/*===== CONTENT =====*/
#content{
  padding:3.5rem 0 0;
}
#content-in{
  max-width:100%;
  margin:0 auto;
}
.main-content-in{
  margin:0 auto;
  padding:1.5rem 0;
  max-width:1280px;
}
.main-content-in.content-row{
  display:flex;
}
.main-content-in .content-header{
  padding:1.5rem 0;
  text-align:center;
}
.main-content-in .content-header .header-title{
  font-size:1.5rem;
  font-weight:700;
}
.main-content-in .content-header .header-guide{
  font-size:.9rem;
  padding:.5rem 0 0;
}
.main-content-in .content-header .header-guide .header-nav{
  padding:.5rem 0 0;
}
.main-content-in .content-body{
  /*padding:1.5rem 0;*/
  text-align:center;
}
.main-content-in .content-footer{
  padding:1.5rem 0;
  text-align:center;
}


/*===== BUTTON =====*/
.btn-go{
  padding: 1rem 2rem;
  background-color: #1D88FA;
  border: 1px solid #1D88FA;
  color: #fff;
  font-size: 1.2rem;
}

/*===== 메인 배너 =====*/
#main-content-slide{
  position: relative;
}
.slick-dots{
  display:none !important;
}
.slide-nav{
  position: absolute;
  left:0; bottom:10%; right:0;
  z-index: 9;
}
.slide-nav .slide-nav-in{
  max-width:1280px;
  padding:0 2rem;
  margin:0 auto;
  text-align: center;
}
.slide-nav .slide-nav-in .pagingInfo{
  display: inline-block;
  text-align: center;
  padding-left: 5px;
  letter-spacing: 5px;
  font-size:.85rem;
  vertical-align: 2px;
}
.slide-nav .slide-nav-in .slick-arrow{
  cursor: pointer;
}
.main-banner{
  min-height:550px;
  display: flex;
  position:relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.main-banner .main-banner-in{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 1rem;
  max-width: 1280px;
  margin:0 auto;
}
.main-banner-txt{
  padding: 3rem 1rem;
  text-align: center;
  display:flex;
  align-items: center;
  justify-content: center;
  flex:1;
}
.main-banner-txt .banner-title{
  padding-bottom:1rem;
  font-size:1rem;
  font-weight:600;
  color:#333;
}
.main-banner-txt .banner-title .label-new{
  display:inline-block;
  padding:.15rem .45rem;
  border-radius: .85rem;
  font-size:.85rem;
  font-size:500;
  background-color: #ffffff;
  color:#333;
  vertical-align: 2px;
  margin-right:.35rem;
}
.main-banner-txt dt{
  padding-bottom:1rem;
  font-size:2rem;
  font-weight:800;
  line-height:1;
  color:#333;
  word-break: keep-all;
}
.main-banner-txt dt span{
  font-size:inherit;
  font-weight:inherit;
}
.main-banner-txt dd{
  font-size:.85rem;
  color:#333333;
  word-break: keep-all;
}
.main-banner-txt dd span{
  font-size:inherit;
  color:inherit;
}
.main-banner-txt .banner-btn{
  margin-top:1rem;
}
.main-banner-txt .banner-btn .btn{
  padding:.5rem 1rem;
  border:1px solid #333;
  color:#333;
  font-size:.8rem;
  margin-right:5px;
  border-radius: 0;
  line-height:1;
}
.main-banner-txt .banner-btn .btn:last-child{
  margin-right:0;
}
.main-banner-txt .banner-btn .btn:hover,
.main-banner-txt .banner-btn .btn:focus{
  border:1px solid #111;
  color:#111;
}
.main-banner-txt .banner-btn .btn i{
  margin-right:5px;
  font-size:.95rem;
  vertical-align: -2px;
}
.main-banner-img.mobile-view{
  display:block;
}

/* 메인 배너 : 배너 1 */
.main-banner.main-banner-01{
  background-color:#FFEED7;
}
.main-banner.main-banner-01 dt{
  color:#FF8800;
}

/* 메인 배너 : 배너 2 */
.main-banner.main-banner-02{
  background-color:#F8F8FF;
}
.main-banner.main-banner-02 dt{
  color: rgb(24, 95, 243);
  color: linear-gradient(90deg, rgba(64, 179, 245,1) 0%, rgba(24, 95, 243,1) 100%);
}

/* 메인 배너 : 배너 3 */
.main-banner.main-banner-03{
  background-color:#FCE8F5;
}
.main-banner.main-banner-03 dt{
  color:#83309D;
}

/* 메인 배너 : 배너 4 */
.main-banner.main-banner-04{
  background-color:#D9E6FF;
}
.main-banner.main-banner-04 dt{
  color:#1D6BFF;
}

/* 메인 배너 : 배너 5 */
.main-banner.main-banner-05{
  background-color:#E8E8FC;
}
.main-banner.main-banner-05 dt{
  color:#6C4AFF;
}

/* 메인 배너 : 배너 6 */
.main-banner.main-banner-06{
  background-color:#698FEE;
}
.main-banner.main-banner-06 .banner-title{
  color:#ffffff;
}
.main-banner.main-banner-06 .banner-title .label-new{
  background-color: #FFB4E9;
  color:#698FEE;
}
.main-banner.main-banner-06 dt{
  color:#ffffff;
}
.main-banner.main-banner-06 dd{
  color:#ffffff;
}
.main-banner.main-banner-06 .banner-btn .btn{
  border:1px solid #4169CC;
  background-color: #4169CC;
  color:#ffffff;
}

/*===== 주요기능 =====*/
.vote-function{
  display:flex;
  flex-wrap: wrap;
}
.item-function{
  flex:1 1 33.33333%;
  text-align:center;
  padding:.65rem;
}
.item-function .item-img{
  text-align:center;
  padding-bottom:10px;
}
.item-function .item-img img{
  text-align:center;
  width:50px;
}
.item-function .item-text{
  text-align:center;
  font-size:.85rem;
}

/*===== 보안소개 =====*/
.vote-security{
  display:flex;
  flex-direction: column;
  padding:2rem 1rem;
  background: rgb(99,115,203);
  background: linear-gradient(90deg, rgba(99,115,203,1) 0%, rgba(28,44,132,1) 100%);
  align-items: center;
}
.vote-security .security-text{
  flex:1;
}
.vote-security .security-text dl dt,
.vote-security .security-text dl dd{
  text-align:center;
  color:#fff;
}
.vote-security .security-text dl dt{
  font-weight:700;
  font-size:1.5rem;
  padding-bottom:1rem;
}
.vote-security .security-text dl dd{
  font-size:1rem;
  line-height:1.8;
}
.vote-security .security-text dl dd .security-user-ip{
  font-weight:600;
  color:#FB6B79;
}
.vote-security .security-text .security-certificate{
  position:relative;
  margin-top:1.2rem;
  display:inline-block;
  padding:.65rem 1.2rem .65rem 2.6rem;
  line-height:1.4;
  text-align:center;
  color:#fff;
  font-size:.85rem;
  border:1px solid #fff;
  border-radius: 1.5rem;
  white-space: nowrap;
}
.vote-security .security-text .security-certificate::before{
  background: url('/images/main/icon-certificate.svg') no-repeat center / 25px 25px;
  content:'';
  width:25px; height:25px;
  position:absolute;
  top:6px; left:15px;
  display:inline-block;
  color:#fff;
}
.vote-security .security-img{
  margin-top:2rem;
  text-align: center;
}
.vote-security .security-img img{
  max-width:230px;
}

/*===== 진행방식 =====*/
.vote-progress{
  display:flex;
  flex-wrap: wrap;
}
.item-progress{
  flex:1 1 100%;
  text-align:center;
  padding:1.5rem 1.5rem;
}
.item-progress .item-in{
  display:flex;
  flex-direction: column;
  position:relative;
  height:100%;
  border:1px solid #F0F0F0;
  background-color: #fff;
  box-shadow: 0 0 25px rgba(0,0,0,.15);
  border-radius: .85rem;
}
.item-progress .item-in::after{
  position: absolute;
  content: "";
  border-left: 8px dotted #ccc;
  height: 100%;
  top: 100%; left: 50%;
}
.item-progress:last-child .item-in::after{
  content: none;
}
.item-progress .item-in .item-step{
  padding:1.5rem 1.5rem 1rem;
  text-align:center;
}
.item-progress .item-in .item-step .label-step{
  display:inline-block;
  padding:.3rem .65rem;
  background-color: #1D88FA;
  color:#fff;
  font-size:.8rem;
  font-weight:600;
  border-radius:1rem;
  white-space: nowrap;
}
.item-progress .item-in .item-img{
  text-align: center;
  margin:0 auto;
  width:90px; height: 90px;
  border-radius: 50%;
  overflow:hidden;
  background-color: #F4F9FC;
}
.item-progress .item-in .item-img img{
  width:60px; height: 60px;
  text-align: center;
  margin:20px auto;
}
.item-progress .item-in .item-text{
  padding:.85rem 1.2rem 1.2rem;
}
.item-progress .item-in .item-text dt{
  padding-bottom:.5rem;
  font-size:1.2rem;
  font-weight:700;
}
.item-progress .item-in .item-text dd{
  font-size:.85rem;
}

/*===== 다양한 투표 샘플 =====*/
#main-content-sample{
  background-color: #F4F9FC;
}
.vote-sample{
  display:flex;
  flex-wrap: wrap;
}
.item-sample{
  flex:1 1 100%;
  text-align:center;
  padding:1.5rem 1.5rem;
}
.item-sample .item-in{
  border:1px solid #F0F0F0;
  background-color: #fff;
  box-shadow: 0 0 25px rgba(0,0,0,.15);
  border-radius: .85rem;
}
.item-sample .item-in .sample-box .box-body{
  position: relative;
  width: 100%;
  height: 550px;
  padding-top: 100%;
}
.item-sample .item-in .sample-box .box-body iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.item-sample .item-in .sample-box .box-footer{
  padding:.85rem 0;
}
.item-sample .item-in .sample-box .box-footer .btn-more{
  font-size:1rem;
  color:#1D88FA;
}
.item-sample .item-in .sample-box .box-footer .btn-more:hover{
  font-size:1rem;
  color:#1D88FA;
}
.item-sample .item-in .sample-box .box-footer .btn-more::after{
  padding-left:5px;
  font-family: xeicon !important;
  content: "\e907";
  font-size:1rem;
  color:#1D88FA;
  line-height:1;
}

/*===== 이용요금 =====*/
.vote-pay{
  display:flex;
  flex-wrap: wrap;
}
.item-pay{
  flex:1 1 100%;
  text-align:left;
  padding:1rem 1rem;
}
.item-pay .item-in{
  display:flex;
  flex-direction: column;
  height:100%;
  border:1px solid #F0F0F0;
  background-color: #fff;
  box-shadow: 0 0 25px rgba(0,0,0,.15);
  border-radius: .85rem;
}
.item-pay .item-in .item-header{
  padding:1rem 1rem;
  border-top-left-radius: .85rem;
  border-top-right-radius: .85rem;
  border-bottom:1px solid #efefef;
}
.item-pay .item-in .item-header .header-type{
  padding-bottom:1.5rem;
  text-align: center;
}
.item-pay .item-in .item-header .header-type .label{
  display:inline-block;
  padding:.45rem .85rem;
  border:2px solid #1D88FA;
  color:#1D88FA;
  text-align: center;
  font-size:.85rem;
  font-weight:600;
  border-radius:1.5rem;
}
.item-pay .item-in .item-header .header-title{
  font-size: .85rem;
  font-weight:600;
  text-align: center;
  color:#1D88FA;
}
.item-pay .item-in .item-header .header-guide{
  padding-bottom:.65rem;
  font-size: 1.6rem;
  font-weight: 700;
}
.item-pay .item-in .item-header .header-guide .guide-price{
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}
.item-pay .item-in .item-header .header-guide .guide-price .price-unit{
  padding-left:.2rem;
  font-size: .85rem;
}
.item-pay .item-in .item-header .header-guide-sub{
  font-size: .85rem;
  color:#999;
  text-align: center;
}
.item-pay .item-in .item-body{
  padding:1rem 1rem;
}
.item-pay .item-in .item-body ul{
  display:flex;
  flex-wrap: wrap;
}
.item-pay .item-in .item-body ul li{
  line-height:1.6;
  padding:0 0 0 1.5rem;
  position: relative;
  font-size:.85rem;
  flex:1 1 50%;
}
.item-pay .item-in .item-body ul li::before{
  font-family: xeicon !important;
  content:"\e929";
  position:absolute;
  left:0; top:2px;
  color:#1D88FA;
  font-size: 22px;
  line-height:1;
}
.item-pay .item-in .item-footer{
  margin-top:auto;
  padding:0 1rem 1rem;
  text-align:center;
}
.item-pay .item-in .item-footer .btn{
  width:100%;
  padding:.65rem 1rem;
  background-color: #1D88FA;
  border:1px solid #1D88FA;
  color:#fff;
  font-size:1rem;
}

/* type 01 */
.item-pay:nth-child(1) .item-in .item-header{
  border-top:5px solid #1D88FA;
}
.item-pay:nth-child(1) .item-in .item-header .header-type .label{
  border:2px solid #1D88FA;
  color:#1D88FA;
}
.item-pay:nth-child(1) .item-in .item-header .header-title{
  color:#1D88FA;
}
.item-pay:nth-child(1) .item-in .item-body ul li::before{
  color:#1D88FA;
}
.item-pay:nth-child(1) .item-in .item-footer .btn{
  background-color: #1D88FA;
  border:1px solid #1D88FA;
}

/* type 02 */
.item-pay:nth-child(2) .item-in .item-header{
  border-top:5px solid #0FD4DC;
}
.item-pay:nth-child(2) .item-in .item-header .header-type .label{
  border:2px solid #0FD4DC;
  color:#0FD4DC;
}
.item-pay:nth-child(2) .item-in .item-header .header-title{
  color:#0FD4DC;
}
.item-pay:nth-child(2) .item-in .item-body ul li::before{
  color:#0FD4DC;
}
.item-pay:nth-child(2) .item-in .item-footer .btn{
  background-color: #0FD4DC;
  border:1px solid #0FD4DC;
}

/* type 03 */
.item-pay:nth-child(3) .item-in .item-header{
  border-top:5px solid #F65D94;
}
.item-pay:nth-child(3) .item-in .item-header .header-type .label{
  border:2px solid #F65D94;
  color:#F65D94;
}
.item-pay:nth-child(3) .item-in .item-header .header-title{
  color:#F65D94;
}
.item-pay:nth-child(3) .item-in .item-body ul li::before{
  color:#F65D94;
}
.item-pay:nth-child(3) .item-in .item-footer .btn{
  background-color: #F65D94;
  border:1px solid #F65D94;
}

/* type 04 */
.item-pay:nth-child(4) .item-in .item-header{
  border-top:5px solid #b385ff;
}
.item-pay:nth-child(4) .item-in .item-header .header-type .label{
  border:2px solid #b385ff;
  color:#b385ff;
}
.item-pay:nth-child(4) .item-in .item-header .header-title{
  color:#b385ff;
}
.item-pay:nth-child(4) .item-in .item-body ul li::before{
  color:#b385ff;
}
.item-pay:nth-child(4) .item-in .item-footer .btn{
  background-color: #b385ff;
  border:1px solid #b385ff;
}

/*===== 현장총회 =====*/
#main-content-onsite{
  padding: 2rem 0;
  background-color: #F4F9FC;
}
#main-content-onsite .main-content-in{
  padding: 0 2rem;
}
#main-content-onsite .content-header{
  text-align:left;
}
#main-content-onsite .header-guide .header-nav .btn-slide{
  display:inline-block;
  border:1px solid #cfcfcf;
  text-align: center;
  width:35px; height:35px;
  padding:.45rem;
  border-radius: 50%;
  cursor: pointer;
}
#main-content-onsite .header-guide .header-nav .btn-slide i{
  color:#cfcfcf;
  font-size:1rem;
  line-height: 1;
}
#main-content-onsite .header-guide .header-nav .btn-slide:hover{
  border:1px solid #1D88FA;
}
#main-content-onsite .header-guide .header-nav .btn-slide:hover i{
  color:#1D88FA;
}
.vote-onsite .slide-list-onsite{
  margin:0 -.5rem;
}
.vote-onsite .slide-list-onsite .item-slide{
  padding:0 .5rem;
}
.vote-onsite .slide-list-onsite .item-slide a{
  display:inline-block;
}
.vote-onsite .slide-list-onsite .item-slide .slide-img{
  position:relative;
  border:1px solid #E7E7E7;
  margin-bottom:1rem;
  text-align:center;
  overflow:hidden;
}
.vote-onsite .slide-list-onsite .item-slide .slide-img img{
  width:auto;
  height:100%;
}
.vote-onsite .slide-list-onsite .item-slide .slide-img::before{
  font-family: xeicon !important;
  font-size:1.5rem;
  content:"\ea3e";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color:#fff;
  background-color:rgba(0, 0, 0, 0.6);
  width:35px; height:35px;
  border-radius: 50%;
}
.vote-onsite .slide-list-onsite .item-slide .slide-title{
  margin-bottom:.15rem;
  font-size:.85rem;
  font-weight:600;
  overflow: hidden;
  max-height: 40px;
  line-height: 20px;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vote-onsite .slide-list-onsite .item-slide a:hover .slide-title{
  color:#1D88FA;
}
.vote-onsite .slide-list-onsite .item-slide .slide-subtitle{
  font-size:.75rem;
  color:#A0A0A0;
}


/*===== 고객사 =====*/
#main-content-client{
  padding: 2rem 0;
}
#main-content-client .main-content-in{
  padding: 0 2rem;
}
#main-content-client .content-header{
  text-align:left;
}
#main-content-client .header-guide .header-nav .btn-slide{
  display:inline-block;
  border:1px solid #cfcfcf;
  text-align: center;
  width:35px; height:35px;
  padding:.45rem;
  border-radius: 50%;
  cursor: pointer;
}
#main-content-client .header-guide .header-nav .btn-slide i{
  color:#cfcfcf;
  font-size:1rem;
  line-height: 1;
}
#main-content-client .header-guide .header-nav .btn-slide:hover{
  border:1px solid #1D88FA;
}
#main-content-client .header-guide .header-nav .btn-slide:hover i{
  color:#1D88FA;
}
.vote-client .slide-list-client{
  margin:0 -.5rem;
}
.vote-client .slide-list-client .item-slide{
  padding:0 .5rem;
}
.vote-client .slide-list-client .item-slide a{
  display:inline-block;
}
.vote-client .slide-list-client .item-slide .slide-img{
  border:1px solid #E7E7E7;
  margin-bottom:1rem;
  text-align:center;
  overflow:hidden;
  padding:.5rem;
}
.vote-client .slide-list-client .item-slide .slide-img img{
  width:auto;
  height:100%;
}
.vote-client .slide-list-client .item-slide .slide-title{
  margin-bottom:.15rem;
  font-size:.85rem;
  font-weight:600;
  overflow: hidden;
  max-height: 40px;
  line-height: 20px;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vote-client .slide-list-client .item-slide .slide-subtitle{
  font-size:.75rem;
  color:#A0A0A0;
}


/*===== 진행중 전자투표 & 고객센터 =====*/
#main-content-etc{
  background-color:#F4F9FC;
  padding-bottom:2rem;
}
#main-content-etc .content-row{
  flex-direction: column;
}
#main-content-etc .content-row .content-col{
  padding: 1.2rem 1.2rem;
}
#main-content-etc .content-row .content-col#main-content-evoting,
#main-content-etc .content-row .content-col#main-content-customer{
  flex:1 1 100%;
  min-width:0;
}
#main-content-etc .content-col .col-in{
  height:100%;
}
#main-content-etc .content-col .col-in .content-header{
  text-align:left;
  display:flex;
  padding: 1rem 0;
}
#main-content-etc .content-col .col-in .content-header .header-title{
  flex:1;
}
#main-content-etc .content-col .col-in .content-header .btn{
  border:0 none;
  color:#cfcfcf;
  padding:.5rem 0 .5rem 1rem;
}
#main-content-etc .content-col .col-in .content-header .btn:hover{
  color:#1D88FA;
}
#main-content-etc .content-col .col-in .content-header .btn::after{
  font-family: xeicon !important;
  content:"\e907";
  padding-left:5px;
}
#main-content-etc .content-col .col-in .content-body{
  padding:1.5rem;
  border:1px solid #F0F0F0;
  background-color: #fff;
  box-shadow: 0 0 25px rgba(0,0,0,.15);
  border-radius: .85rem;
}

/*===== 진행중 전자투표 =====*/
#main-content-evoting .vote-evoting ul li{
  border-bottom:1px solid #E7E7E7;
}
#main-content-evoting .vote-evoting ul li:last-child{
  border-bottom:0 none;
}
#main-content-evoting .vote-evoting ul li a{
  display:flex;
  padding:1rem 0;
}
#main-content-evoting .vote-evoting ul li a:hover div{
  color:#1D88FA;
}
#main-content-evoting .vote-evoting ul li a .evoting-title,
#main-content-evoting .vote-evoting ul li a .evoting-date{
  display:block;
  font-size:.85rem;
}
#main-content-evoting .vote-evoting ul li a .evoting-title{
  flex:1;
  padding-right:1rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  text-align: left;
}
#main-content-evoting .vote-evoting ul li a .evoting-date{
  color:#7C7C7C;
}
#main-content-evoting .vote-evoting ul li{
  border-bottom:1px solid #E7E7E7;
}


/*===== 고객센터 =====*/
.vote-customer .customer-tel{
  border-bottom:1px solid #E7E7E7;
  padding-bottom:1.2rem;
  margin-bottom:1.2rem;
}
.vote-customer .customer-tel dl dt,
.vote-customer .customer-tel dl dd{
  text-align:left;
}
.vote-customer .customer-tel dl dd{
  font-size:2rem;
  font-weight:700;
  color:#F65D94;
  white-space: nowrap;
}
.vote-customer .customer-etc dl{
  display:flex;
}
.vote-customer .customer-etc dl dt,
.vote-customer .customer-etc dl dd{
  line-height:2;
  font-size:.85rem;
}
.vote-customer .customer-etc dl dt{
  padding-right:1rem;
  text-align:left;
  color:#7C7C7C;
}
.vote-customer .customer-etc dl dd{
  flex:1;
  text-align:left;
}
.vote-customer .customer-etc dl dd strong{
  font-weight:700;
  font-size:.85rem;
}

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

  /*===== LAYOUT =====*/
  .wrapper.wrapper-main{
    padding-bottom: 17rem;
  }
    
  /*===== CONTENT =====*/
  #content{
    padding:6.5rem 0 0;
  }
  .main-content-in{
    padding:2rem 0;
  }
  .main-content-in .content-header{
    padding:2rem 0;
  }
  .main-content-in .content-header .header-title{
    font-size:1.8rem;
  }
  .main-content-in .content-header .header-guide{
    font-size:1rem;
    padding:.5rem 0 0;
  }
  .main-content-in .content-header .header-guide .header-nav{
    padding:0;
  }
  .main-content-in .content-body{
    /*padding:2rem 0;*/
  }
  .main-content-in .content-footer{
    padding:2rem 0;
  }

  /*===== 메인 배너 =====*/
  .slide-nav{
    position: absolute;
    left:0; bottom:20%; right:0;
    z-index: 9;
  }
  .slide-nav .slide-nav-in{
    max-width:1280px;
    padding:0 1rem;
    text-align: left;
  }
  .slide-nav .slide-nav-in .pagingInfo{
    font-size:1rem;
  }
  .main-banner{
    min-height:500px;
  }
  .main-banner .main-banner-in{
    display: flex;
    flex-direction:row;
  }
  .main-banner-txt{
    margin-bottom:10rem;
    padding:0;
    text-align:left;
    justify-content: flex-start;
  }
  .main-banner-txt .banner-title{
    font-size:1.3rem;
  }
  .main-banner-txt dt{
    padding-bottom:1rem;
    font-size:2.5rem;
  }
  .main-banner-txt dd{
    font-size:1rem;
  }
  .main-banner-txt dd span{
    display:block;
  }
  .main-banner-txt .banner-btn{
    margin-top:1.5rem;
  }
  .main-banner-txt .banner-btn .btn{
    padding:.65rem 1.2rem;
    font-size:.95rem;
  }
  .main-banner-txt .banner-btn .btn i{
    font-size:1rem;
  }

  .main-banner-img.mobile-view{
    display:none;
  }
  /* 메인 배너 : 배너 1 */
  .main-banner.main-banner-01{
    background-image: url('/images/main/main-banner-01.jpg');
  }

  /* 메인 배너 : 배너 2 */
  .main-banner.main-banner-02{
    background-image: url('/images/main/main-banner-02.jpg');
  }

  /* 메인 배너 : 배너 3 */
  .main-banner.main-banner-03{
    background-image: url('/images/main/main-banner-03.jpg');
  }

  /* 메인 배너 : 배너 4 */
  .main-banner.main-banner-04{
    background-image: url('/images/main/main-banner-04.jpg');
  }

  /* 메인 배너 : 배너 5 */
  .main-banner.main-banner-05{
    background-image: url('/images/main/main-banner-05.jpg');
  }

  /* 메인 배너 : 배너 6 */
  .main-banner.main-banner-06{
    background-image: url('/images/main/main-banner-06.jpg');
  }

  /*===== 주요기능 =====*/
  .item-function{
    flex:1 1 25%;
    padding:.85rem;
  }
  .item-function .item-img img{
    width:60px;
  }
  .item-function .item-text{
    font-size:1rem;
  }
  

  /*===== 보안소개 =====*/
  .vote-security{
    flex-direction: unset;
    padding:1.5rem 3rem;
    align-items: center;
  }
  .vote-security .security-text dl dt,
  .vote-security .security-text dl dd{
    text-align:left;
  }
  .vote-security .security-text dl dt{
    font-size:2rem;
    padding-bottom:1rem;
  }
  .vote-security .security-text dl dd{
    font-size:1.1rem;
    line-height:1.8;
  }
  .vote-security .security-text .security-certificate{
    margin-top:1.5rem;
    padding:.65rem 1.5rem .65rem 3.2rem;
    font-size:1rem;
    border-radius: 1.5rem;
  }
  .vote-security .security-text .security-certificate::before{
    background: url('/images/main/icon-certificate.svg') no-repeat center / 30px 30px;
    content:'';
    width:30px; height:30px;
    position:absolute;
    top:6px; left:15px;
  }
  .vote-security .security-img{
    margin-top:0;
  }
  .vote-security .security-img img{
    max-width:250px;
  }

  /*===== 진행방식 =====*/
  .item-progress{
    flex:1 1 33.333333%;
    padding:1.2rem 1.2rem;
  }
  .item-progress .item-in::after{
    position: absolute;
    content: "";
    border-bottom:8px dotted #ccc;
    border-left:0 none;
    width: 100%; height:auto;
    top: 50%; left: 100%;
  }
  .item-progress .item-in .item-step{
    padding:2.5rem 1.5rem 1rem;
  }
  .item-progress .item-in .item-step .label-step{
    padding:.35rem .85rem;
    font-size:.85rem;
  }
  .item-progress .item-in .item-img{
    width:100px; height:100px;
  }
  .item-progress .item-in .item-img img{
    width:70px; height:70px;
    margin:20px auto;
  }
  .item-progress .item-in .item-text{
    padding:1rem 1.5rem 2.5rem;
  }
  .item-progress .item-in .item-text dt{
    padding-bottom:1rem;
    font-size:1.3rem;
  }
  .item-progress .item-in .item-text dd{
    font-size:.9rem;
  }

  /*===== 다양한 투표 샘플 =====*/
  .item-sample{
    flex:1 1 50%;
    padding:1.2rem 1.2rem;
  }
  .item-sample .item-in .sample-box .box-body{
    padding-top: 130%;
  }

  /*===== 이용요금 =====*/
  .item-pay{
    flex:1 1 33.33333%;
    padding:1.2rem 1.2rem;
  }
  .item-pay .item-in .item-header{
    padding:1.5rem 1.5rem;
  }
  .item-pay .item-in .item-header .header-title{
    font-size: 1rem;
  }
  .item-pay .item-in .item-header .header-guide{
    padding-bottom:.85rem;
    font-size: 1.8rem;
  }
  .item-pay .item-in .item-header .header-guide .guide-price{
    font-size: 1.8rem;
  }
  .item-pay .item-in .item-header .header-guide .guide-price .price-unit{
    padding-left:.25rem;
    font-size: .7rem;
  }
  .item-pay .item-in .item-header .header-guide-sub{
    font-size: .8rem;
  }

  .item-pay .item-in .item-body{
    padding:1.5rem 1.5rem;
  }
  .item-pay .item-in .item-body ul li{
    line-height:1.8;
    font-size:.9rem;
    flex:1 1 100%;
  }
  .item-pay .item-in .item-footer .btn{
    padding:.75rem 1rem;
    font-size:1rem;
  }

  /*===== 현장총회 =====*/
  #main-content-onsite{
    padding:1.2rem 0;
  }
  #main-content-onsite .main-content-in{
    padding: 0 1.2rem;
  }
  #main-content-onsite .content-header{
    text-align:left;
  }
  #main-content-onsite .header-guide{
  }
  #main-content-onsite .header-guide::after{
    content:'';
    display:block;
    clear:both;
  }
  #main-content-onsite .header-guide .header-nav{
    float:right;
    margin-top:-10px;
  }
  #main-content-onsite .header-guide .header-nav .btn-slide{
    width:40px; height:40px;
    padding:.5rem;
  }
  #main-content-onsite .header-guide .header-nav .btn-slide i{
    font-size:1.2rem;
    line-height: 1.2;
  }
  .vote-onsite .slide-list-onsite .item-slide .slide-title{
    margin-bottom:.2rem;
    font-size:1rem;
  }
  .vote-onsite .slide-list-onsite .item-slide .slide-subtitle{
    font-size:.85rem;
  }

  /*===== 고객사 =====*/
  #main-content-client{
    padding:1.2rem 0;
  }
  #main-content-client .main-content-in{
    padding: 0 1.2rem;
  }
  #main-content-client .content-header{
    text-align:left;
  }
  #main-content-client .header-guide{
  }
  #main-content-client .header-guide::after{
    content:'';
    display:block;
    clear:both;
  }
  #main-content-client .header-guide .header-nav{
    float:right;
    margin-top:-10px;
  }
  #main-content-client .header-guide .header-nav .btn-slide{
    width:40px; height:40px;
    padding:.5rem;
  }
  #main-content-client .header-guide .header-nav .btn-slide i{
    font-size:1.2rem;
    line-height: 1.2;
  }
  .vote-client .slide-list-client .item-slide .slide-title{
    margin-bottom:.2rem;
    font-size:1rem;
  }
  .vote-client .slide-list-client .item-slide .slide-subtitle{
    font-size:.85rem;
  }
  

  /*===== 진행중 전자투표 & 고객센터 =====*/
  #main-content-etc .content-row{
    flex-direction: row;
  }
  #main-content-etc .content-row .content-col{
    padding: 1.2rem 1.2rem;
  }
  #main-content-etc .content-col .col-in .content-body{
    padding:1.8rem;
    height:280px;
  }

  /*===== 진행중 전자투표 =====*/
  #main-content-etc .content-row .content-col#main-content-evoting{
    flex:1 1 60%;
  }
  #main-content-evoting .vote-evoting ul li a .evoting-title,
  #main-content-evoting .vote-evoting ul li a .evoting-date{
    font-size:1rem;
  }

  /*===== 고객센터 =====*/
  #main-content-etc .content-row .content-col#main-content-customer{
    flex:1 1 350px;
  }
  .vote-customer .customer-tel dl dd{
    font-size:1.8rem;
  }
  .vote-customer .customer-etc dl dt,
  .vote-customer .customer-etc dl dd{
    font-size:.9rem;
  }
  .vote-customer .customer-etc dl dd strong{
    font-size:.9rem;
  }


}

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

  /*===== LAYOUT =====*/
  .wrapper.wrapper-main{
    padding-bottom: 17rem;
  }

  /*===== CONTENT =====*/
  #content{
    padding:8rem 0 0;
  }
  .main-content-in{
    padding:2.5rem 0;
  }
  .main-content-in .content-header{
    padding:2.5rem 0;
  }
  .main-content-in .content-header .header-title{
    font-size:2.2rem;
  }
  .main-content-in .content-header .header-guide{
    font-size:1.1rem;
  }
  .main-content-in .content-body{
    /*padding:2.5rem 0;*/
  }
  .main-content-in .content-footer{
    padding:2.5rem 0;
  }

  /*===== 메인 배너 =====*/
  .slide-nav{
    bottom:20%;
  }
  .slide-nav .slide-nav-in{
    max-width:1280px;
    padding:0 1rem;
  }
  .main-banner{
    min-height:600px;
  }
  .main-banner-txt{
    margin-bottom:10rem;
  }
  .main-banner-txt .banner-title{
    font-size:1.5rem;
  }
  .main-banner-txt dt{
    padding-bottom:1.5rem;
    font-size:3rem;
  }
  .main-banner-txt dd{
    font-size:1.2rem;
  }
  .main-banner-txt .banner-btn{
    margin-top:2rem;
  }
  .main-banner-txt .banner-btn .btn{
    padding:.85rem 1.2rem;
    font-size:1rem;
  }
  .main-banner-txt .banner-btn .btn i{
    font-size:1.2rem;
  }

  /*===== 주요기능 =====*/
  .item-function{
    flex:1 1 16.666666%;
    padding:1rem;
  }
  .item-function .item-img img{
    width:65px;
  }
  .item-function .item-text{
    font-size:1rem;
  }

  /*===== 보안소개 =====*/
  .vote-security{
    flex-direction: unset;
    padding:1.5rem 6rem;
    align-items: center;
  }
  .vote-security .security-text dl dt,
  .vote-security .security-text dl dd{
    text-align:left;
  }
  .vote-security .security-text dl dt{
    font-size:2.2rem;
    padding-bottom:1rem;
  }
  .vote-security .security-text dl dd{
    font-size:1.2rem;
    line-height:1.8;
  }
  .vote-security .security-text .security-certificate{
    margin-top:1.5rem;
    padding:.65rem 1.5rem .65rem 3.2rem;
    font-size:1rem;
    border-radius: 1.5rem;
  }
  .vote-security .security-text .security-certificate::before{
    background: url('/images/main/icon-certificate.svg') no-repeat center / 30px 30px;
    content:'';
    width:30px; height:30px;
    position:absolute;
    top:6px; left:15px;
  }
  .vote-security .security-img img{
    max-width:300px;
  }

  /*===== 진행방식 =====*/
  .item-progress{
    flex:1 1 33.333333%;
    padding:2rem 2rem;
  }
  .item-progress .item-in .item-step{
    padding:3.5rem 1.5rem 2rem;
  }
  .item-progress .item-in .item-step .label-step{
    padding:.35rem .85rem;
    font-size:1rem;
  }
  .item-progress .item-in .item-img{
    width:120px; height: 120px;
  }
  .item-progress .item-in .item-img img{
    width:80px; height: 80px;
    margin:20px auto;
  }
  .item-progress .item-in .item-text{
    padding:2rem 1.5rem 3.5rem;
  }
  .item-progress .item-in .item-text dt{
    padding-bottom:1rem;
    font-size:1.4rem;
  }
  .item-progress .item-in .item-text dd{
    font-size:1rem;
  }

  /*===== 다양한 투표 샘플 =====*/
  .item-sample{
    flex:1 1 33.333333%;
    padding:2rem 2rem;
  }

  /*===== 이용요금 =====*/
  .item-pay{
    flex:1 1 25%;
    padding:1.5rem 1.5rem;
  }
  .item-pay .item-in .item-header{
    padding:1.5rem 1.5rem;
  }
  .item-pay .item-in .item-header .header-title{
    font-size: 1.2rem;
  }
  .item-pay .item-in .item-header .header-guide{
    padding-bottom:1rem;
    font-size: 2rem;
  }
  .item-pay .item-in .item-header .header-guide .guide-price{
    font-size: 2rem;
  }
  .item-pay .item-in .item-header .header-guide .guide-price .price-unit{
    padding-left:.25rem;
    font-size: .9rem;
  }
  .item-pay .item-in .item-header .header-guide-sub{
    font-size: .9rem;
  }

  .item-pay .item-in .item-body{
    padding:1.5rem 1.5rem;
  }
  .item-pay .item-in .item-body ul{
    display:block;
  }
  .item-pay .item-in .item-body ul li{
    line-height:2;
    font-size:.85rem;
    flex:1 1 50%;
  }
  .item-pay .item-in .item-footer .btn{
    padding:.85rem 1rem;
    font-size:1.2rem;
  }

  /*===== 현장총회 =====*/
  #main-content-onsite{
    padding:2rem 0;
  }
  #main-content-onsite .main-content-in{
    padding: 0 2rem;
  }

  /*===== 고객사 =====*/
  #main-content-client{
    padding:2rem 0;
  }
  #main-content-client .main-content-in{
    padding: 0 2rem;
  }

  /*===== 진행중 전자투표 & 고객센터 =====*/
  #main-content-etc .content-row .content-col{
    padding:1.5rem 1.5rem;
  }
  #main-content-etc .content-col .col-in .content-body{
    padding:2rem;
    height:280px;
  }

  /*===== 진행중 전자투표 =====*/
  #main-content-etc .content-row .content-col#main-content-evoting{
    flex:1 1 60%;
  }

  /*===== 고객센터 =====*/
  #main-content-etc .content-row .content-col#main-content-customer{
    flex:1 1 350px;
  }
  .vote-customer .customer-tel dl dd{
    font-size:2rem;
  }
  .vote-customer .customer-etc dl dt,
  .vote-customer .customer-etc dl dd{
    font-size:1rem;
  }
  .vote-customer .customer-etc dl dd strong{
    font-size:1rem;
  }


}

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


}

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

  /*===== 이용요금 =====*/
  .item-pay .item-in .item-body ul li{
    line-height:1.8;
    font-size:.9rem;
    flex:1 1 100%;
  }

}