@charset "utf-8";
/**************************************************

	Global.css

**************************************************/
/**************************************************
	Public
**************************************************/
:root {
  --point-color: #137546;
}
html {
  min-width: 1280px;
}
body:not(#user) {
  padding-top: 65px !important;
}

/* Table */
.table1 {
  width: 100%;
}
.table1 tr > * {
  padding: 10px;
  border: 1px solid #ddd;
}
.table1 thead th {
  background: #f7f7f7;
}
.table1 tbody th {
  background: #f7f7f7;
}

.table2 {
  width: 100%;
}
.table2 tr > * {
  padding: 30px;
  border-top: 1px solid #ddd;
  text-align: left;
  font-size: 16px;
}
.table2 tr:first-child > * {
  border-top: 2px solid #222;
}
.table2 tfoot tr:first-child > * {
  border-top: 1px solid #ddd;
}
.table2 th {
  color: #333333;
  font-weight: 300;
}
.table2 td strong {
  font-size: 20px;
  color: #333333;
  font-weight: 200;
}
.table2 td span {
  font-size: 15px;
  color: #888888;
  font-weight: 200;
}
.table2 .pay-t1 {
  font-family: "paybooc-Light";
  font-weight: 600;
  font-size: 20px;
  color: #111;
}
.table2 .pay-t2 strong {
  font-family: "paybooc-Light";
  font-weight: 600;
  font-size: 30px;
  color: #111;
}
.table2 .pay-t2 strong span {
  font-size: 18px;
  color: #444444;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 10px;
}
.table2 table {
  width: 100%;
  margin: -5px 0;
}
.table2 table tr > * {
  padding: 5px 0;
  border-top: 0;
}
.table2 table tr:first-child > *,
.table2 table tfoot tr:first-child > * {
  border-top: 0;
}

.table3 {
  width: 100%;
}
.table3 tr > * {
  text-align: left;
  line-height: 35px;
}
.table3 tfoot tr:first-child > * {
  border-top: 1px solid #ddd;
}
.table3 tbody tr:first-child > * {
  padding-top: 45px;
}
.table3 tbody tr:last-child > * {
  padding-bottom: 45px;
}
.table3 th {
  font-size: 16px;
  font-weight: normal;
}
.table3 td {
  font-size: 20px;
  color: #333333;
  font-weight: 300;
}

/* Tab */
.tab1 {
  margin-bottom: 40px;
}
.tab1 > li {
  display: inline-block;
  background: #f7f7f7;
}
.tab1 > li a {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0 40px;
  border: 1px solid #f7f7f7;
}
.tab1 > li.active a {
  background: #fff;
  color: #000;
  border-color: #333;
}
.tab2 {
  margin-bottom: 70px;
  text-align: center;
}
.tab2 > li {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  margin: 0 40px;
}
.tab2 > li a {
  display: block;
  font-size: 20px;
  color: #999999;
  letter-spacing: -0.05em;
  padding: 12px 0;
  border-bottom: 2px solid #fff;
  text-decoration: none;

}
.tab2 > li.active a {
  color: #137546;
  border-bottom-color: #137546;
  font-weight: 300;

}

/* Button */
.btnWrap {
  margin-top: 30px;
}
.btnWrap > * {
  margin: 0 2px;
}
.btn1 {
  display: inline-block;
  background: #333;
  border: 1px solid #333;
  color: #fff !important;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  font-size: 14px;
  box-sizing: border-box;
}
.btn1:hover {
  text-decoration: none;
}
.btn1.small {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.btn1.big {
  height: 50px;
  line-height: 50px;
  width: 180px;
  padding: 0;
  font-size: 16px;
  text-align: center;
  border-radius: 10px;
}
#user-footer .btn1.big {border-radius: 25px;}
.btn2 {
  display: inline-block;
  background: #fff;
  border: 1px solid #ddd;
  color: #000 !important;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  font-size: 14px;
  box-sizing: border-box;
}
.btn2:hover {
  text-decoration: none;
}
.btn2.small {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.btn2.big {
  height: 50px;
  line-height: 50px;
  width: 200px;
  padding: 0;
  font-size: 16px;
  text-align: center;
  border-radius: 25px;
}
.btn3 {
  display: inline-block;
  border: 1px solid #137546;
  font-size: 16px;
  color: #137546 !important;
  font-weight: 300;
  letter-spacing: -0.05em;
  width: 250px;
  height: 50px;
  line-height: 48px;
  box-sizing: border-box;
  border-radius: 25px;
  text-align: center;
}
.btn3:hover {
  background: url("../images/main/btn-bg.jpg") repeat-y center center;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0);
  text-decoration: none;
}
.btn4 {
  display: inline-block;
  border: 1px solid #ffa506;
  font-size: 16px;
  color: #ffa506 !important;
  font-weight: 300;
  letter-spacing: -0.05em;
  width: 250px;
  height: 50px;
  line-height: 48px;
  box-sizing: border-box;
  border-radius: 25px;
  text-align: center;
}
.btn4:hover {
  background: url("../images/main/btn-bg2.jpg") repeat-y center center;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0);
  text-decoration: none;
}
.btn5 {
  display: inline-block;
  background: #137546;
  border: 1px solid #137546;
  color: #fff !important;
  height: 35px;
  line-height: 34px;
  padding: 0 15px;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 5px;
}
.btn5.small {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 3px;
}
.btn5.big {
  height: 50px;
  line-height: 50px;
  width: 180px;
  padding: 0;
  font-size: 16px;
  text-align: center;
  border-radius: 10px;
}
.btn5:hover {
  text-decoration: none;
}
.btn5-pay {
  background: #fff;
  border: 2px solid #137546;
  color: #137546 !important;
  height: 45px;
  line-height: 41px;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
  width: 180px;
  border-radius: 10px;
  text-align: center;
  /* position: absolute;
  bottom: -5px;
  right: 0; */
  font-weight: 300;
  cursor: pointer;
  margin:0 auto;
  margin-top:30px;

}
.btn5-pay:hover {
  background: #137546;
  color: #fff !important;
}
.btn5-pay.on {
  background: #137546;
  color: #fff !important;
}

.btn6 {
  display: inline-block;
  background: #666666;
  border: 1px solid #666666;
  color: #fff !important;
  height: 35px;
  line-height: 34px;
  padding: 0 15px;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 5px;
}
.btn6.small {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.btn6.big {
  height: 50px;
  line-height: 50px;
  width: 200px;
  padding: 0;
  font-size: 16px;
  text-align: center;
  border-radius: 25px;
}
.btn6:hover {
  text-decoration: none;
}

#wrap .sb-btn {
  width: 200px;
  height: 50px;
  line-height: 50px;
  border-radius: 25px !important;
  font-size: 16px;
  text-align: center;
}
#wrap .sb-btn:hover {
  text-decoration: none;
}
#wrap .sb-btn.type1 {
  background: #137546 !important;
  border: 0 !important;
}
#wrap .sb-btn.type2 {
  background: #333333 !important;
  color: #fff !important;
  border: 0 !important;
}
#wrap .sb-btn.type4 {
  background: #137546 !important;
  border: 0 !important;
  width: 130px;
  height: 35px;
  line-height: 35px;
  border-radius: 20px !important;
  font-size: 16px;
  text-align: center;
  color: #fff !important;
  margin-left:10px;
  font-size:15px;
}

/* Etc */

/**************************************************
	Ajax Popup
**************************************************/
#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 500px;
  margin-top: -250px;
  margin-left: -300px;
  padding-top: 46px;
  z-index: 301;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  transition: all 0.3s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#popup .pop-tit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background: #f7f7f7;
  padding: 0 15px;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}
#popup .pop-tit h3 {
  font-size: 15px;
  color: #000;
  font-weight: 300;
  line-height: 45px;
}
#popup .pop-tit .close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 16px;
  color: #666;
  background: #eee;
  border-left: 1px solid #ddd;
}
#popup .pop-wrap {
  height: 100%;
  overflow-y: auto;
  padding: 15px;
  box-sizing: border-box;
}
#popup.on {
  opacity: 1;
}
#popupBG {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.3s;
}
#popupBG.on {
  opacity: 1;
}

/* sitemap */
#popup .sitemap {
  text-align: center;
}
#popup .sitemap > li {
  display: inline-block;
  width: 32%;
  vertical-align: top;
  margin-bottom: 10px;
}
#popup .sitemap > li > a {
  display: block;
  text-align: center;
  font-size: 14px;
  letter-spacing: -1px;
  background: #f7f7f7;
  font-weight: 300;
  line-height: 40px;
  border-radius: 3px;
}
#popup .sitemap > li ul li {
  border-top: 1px solid #f7f7f7;
  text-align: left;
}
#popup .sitemap > li ul li:first-child {
  border-top: none;
}
#popup .sitemap > li ul li a {
  display: block;
  font-size: 13px;
  color: #333;
  line-height: 18px;
  padding: 10px 0;
  text-align: center;
}

/* traffic */
#traffic-form {
  margin: 18px 40px;
}
#traffic-form .t2,
#traffic-form .t3 {
  display: block;
  text-align: center;
}
#traffic-form .t3 {
  font-size: 32px;
  color: #111;
  font-family: "paybooc-Light";
  font-weight: 600;
}
#traffic-form .inps {
  margin: 30px 0;
  border: 1px solid #ddd;
  border-width: 1px 0;
  padding: 40px 0;
  text-align: center;
  font-size: 20px;
  color: #333333;
  font-weight: 300;
  line-height: 1.2em;
}
#traffic-form .inps input {
  border: 1px solid #ddd;
  border-radius: 5px;
  text-indent: 15px;
  height: 48px;
  line-height: 48px;
  vertical-align: middle;
  margin: 0 10px;
  font-size: 20px;
  color: #333;
}
#traffic-form .w30 {
  width: 150px;
}
#traffic-form .w15 {
  width: 80px;
}
#traffic-form table {
  width: 100%;
}
#traffic-form table tr > * {
  padding: 5px 0;
  font-size: 20px;
  color: #333333;
  font-weight: 300;
  line-height: 25px;
  text-align: left;
}
#traffic-form table tr > th {
  font-size: 16px;
  font-weight: normal;
}

/* user */
#user-pop .bgbox {
  background: #f1f1f1;
  padding: 15px;
  font-size: 14px;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  border-radius: 5px;
}
#user-pop p {
  font-size: 15px;
  line-height: 1.5em;
  letter-spacing: -0.05em;
}
#user-pop .chkArea2 label,
#user-pop .chkArea2 label span,
#user-pop .chkArea2 a {
  font-size: 15px;
}
#user-pop select {
  border: 1px solid #ddd;
  padding: 5px;
  vertical-align: middle;
}
#user-pop .inp {
  border: 1px solid #ddd;
  padding: 5px;
  vertical-align: middle;
}
.user-tbl1 {
  width: 100%;
  border: 1px solid #ddd;
  border-width: 4px 0;
}
.user-tbl1 caption {
  text-align: center;
  font-size: 18px;
  color: #333;
  font-weight: 600;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid #333;
}
.user-tbl1 tr > * {
  padding: 5px;
  font-size: 14px;
  line-height: 1.5em;
  letter-spacing: -0.05em;
}
.user-tbl1 tr th {
  color: #111;
  font-weight: 600;
}
.user-tbl1 tr:first-child > * {
  padding-top: 25px;
}
.user-tbl1 tr:last-child > * {
  padding-bottom: 25px;
}
.user-tbl1 thead + tbody tr:first-child > * {
  padding-top: 5px;
}
.user-tbl2 {
  width: 100%;
}
.user-tbl2 caption {
  text-align: left;
  font-size: 18px;
  color: #333;
  font-weight: 600;
  letter-spacing: -0.05em;
  margin-bottom: 5px;
}
.user-tbl2 tr > * {
  border: 0;
  background: #f5f5f5;
  border-top: 1px solid #fff;
  padding: 10px;
  font-size: 15px;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  text-align: center;
}
.user-tbl2 tr th {
  background: #ddd;
  color: #111;
  font-weight: 600;
}
.user-tbl2 thead tr:first-child > * {
  border-top: 1px solid #111;
}
.user-tbl2 tbody tr:first-child > * {
  border-top: 1px solid #111;
}
.user-tbl2 thead + tbody tr:first-child > * {
  border-top: 1px solid #fff;
}
.user-tbl2 tfoot tr > * {
  background: #faf1e3;
  color: #111;
  font-weight: 600;
}
.user-tbl2 tr:first-child > * {
  padding-top: 10px;
}
.user-tbl2 tr:last-child > * {
  padding-bottom: 10px;
}
.user-tbl2 hr {
  border: 0;
  height: 0;
  width: 0;
  margin: 2px 0;
}
.user-tbl2 .w33 {
  width: 70px;
}
.user-tbl2 .w40 {
  width: auto;
}
.user-tbl2 .w80 {
  width: 70%;
}

/**************************
	Paging
**************************/
.paging {
  text-align: center;
  margin-top: 30px;
  font-family: empty;
  font-size: 0;
}
.paging a {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  margin-right: -1px;
  position: relative;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #f9f9f9;
  border: 1px solid #ddd;
  color: #999999;
  font-size: 12px;
  text-decoration: none;
  box-sizing: border-box;
  font-family: tahoma, arial, axicon;
}
.paging a:first-child {
  border-radius: 5px 0 0 5px !important;
}
.paging a:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 35px;
  text-align: center;
  font-size: 15px;
  text-indent: 0;
}
.paging a:last-child {
  border-radius: 0 5px 5px 0 !important;
}
.paging a.active {
  background: #ffffff;
  color: #333333;
  font-weight: 600;
}
.paging a.first,
.paging a.prev,
.paging a.next,
.paging a.last {
  background: none;
  font-size: 15px;
  text-indent: -999em;
}
.paging a.first:after {
  content: "\f100";
  text-indent: 0;
}
.paging a.prev:after {
  content: "\f104";
}
.paging a.next:after {
  content: "\f105";
}
.paging a.last:after {
  content: "\f101";
}

/**************************************************
	Layout
**************************************************/
#header {
  position: relative;
  z-index: 90;
  background-color: #fff;
  /* box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); */
}
#header .inner {
  position: relative;
  /* height: 65px; */
  width: 1280px;
  margin: 0 auto;
}
#header .logo {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 65px;
  width:180px;
  padding-bottom:3px;
}
#header .logo img {
  width:100%;
}

#gnb {
  text-align: left;
  margin: 0 185px 0 230px;
}
#gnb > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
#gnb > li > a {
  display: block;
  padding: 0 25px;
  line-height: 65px;
  font-size: 16px;
  color: #333333;
  text-decoration: none;
  font-weight:500;
}
#gnb > li.gnb_solution > a {position: relative;padding: 0 38px 0 25px;}
#gnb > li.gnb_solution > a::before  {
  content: '';
  width: 12px;
  height: 65px;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_178_329)'%3E%3Cpath d='M320 0C302.3 0 288 14.3 288 32C288 49.7 302.3 64 320 64H402.7L201.4 265.4C188.9 277.9 188.9 298.2 201.4 310.7C213.9 323.2 234.2 323.2 246.7 310.7L448 109.3V192C448 209.7 462.3 224 480 224C497.7 224 512 209.7 512 192V32C512 14.3 497.7 0 480 0H320ZM80 32C35.8 32 0 67.8 0 112V432C0 476.2 35.8 512 80 512H400C444.2 512 480 476.2 480 432V320C480 302.3 465.7 288 448 288C430.3 288 416 302.3 416 320V432C416 440.8 408.8 448 400 448H80C71.2 448 64 440.8 64 432V112C64 103.2 71.2 96 80 96H192C209.7 96 224 81.7 224 64C224 46.3 209.7 32 192 32H80Z' fill='%23333333'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_178_329'%3E%3Crect width='512' height='512' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  left: 71px;
}
#gnb > li > ul {
  position: absolute;
  top: 65px;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  padding: 15px;
  border: 1px solid #ddd;
  border-top: 2px solid #2ba56a;
  background: #fff;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}
#gnb > li > ul li a {
  display: block;
  font-size: 14px;
  color: #000;
  line-height: 25px;
  text-align: center;
}
#gnb > li > ul li.active a {
  font-weight: bold;
}
#gnb > li:hover > ul {
  visibility: visible;
  opacity: 1;
}
#gnb > li.hidden-gnb {
  display: none;
}

#drdw {
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 3px solid #00afe5;
  z-index: 91;
  display: none;
}
#drdw .inner {
  position: relative;
  width: 1280px;
  margin: 0 auto;
  border-right: 1px solid #e8e8e8;
}
#drdw .inner.pay3 {
  width:1080px;
}

#drdw .inner > li {
  display: inline-block;
  padding: 25px 0;
  vertical-align: top;
}
#drdw .inner > li:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: #e8e8e8;
}
#drdw .inner > li:first-child {
  border-left-width: 1px;
}
#drdw .inner > li > a {
  display: block;
  margin-bottom: 15px;
  font-size: 18px;
  color: #0859a2;
  text-align: center;
  font-weight: bold;
}
#drdw .inner > li ul li a {
  display: block;
  font-size: 15px;
  line-height: 25px;
  color: #555555;
  text-align: center;
}
#drdw .inner > li ul li.active a {
  font-weight: bold;
}
#drdw .inner > li.hidden-gnb {
  display: none;
}

#tnb {
  position: absolute;
  top: 20px;
  right: 0;
}
#tnb > li {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
}
#tnb > li:before {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
  content: "";
  width: 1px;
  height: 10px;
  background: #dddddd;
  margin: 0 16px;
}
#tnb > li:first-child:before {
  display: none;
}
#tnb > li a {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
  color: #777;
  font-size:14px;
}

#footer {
  background: #eee;
}
/* #footer .fnbWrap {
  border-bottom: 1px solid #3d3d3d;
} */
#footer .fnbWrap .inner {
  position: relative;
  width: 1280px;
  margin: 0 auto;
}
#footer .ftWrap {
  position: relative;
  width: 1280px;
  margin: 0 auto;
  padding: 90px 0;
}
#footer h2 {
  position: absolute;
  top: 50px;
  left: 0;
}
#footer address {
  margin-left: 250px;
  font-size: 15px;
  line-height: 23px;
  color: #777;
  font-style: normal;
}
#footer address hr {
  width: 20px;
  border: none;
  display: inline-block;
  vertical-align: middle;
}
#footer address .copyright {
  display: block;
  margin-top: 10px;
  color: #777777;
}


#ft-fam{position: absolute;top: 125px;right: 0;width: 300px;height: 40px;}
#ft-fam > a {display: block;line-height: 40px;padding: 0 15px;border: 1px solid #444444;font-size: 15px;color: #aaaaaa;text-decoration: none;background: url('/images/layout/ft-family-spr.png') no-repeat 92% center;}
#ft-fam ul{position: absolute;bottom: 40px;left: 0;display: none;width: 100%;padding: 5px 15px;background: #444444;box-sizing: border-box;}
#ft-fam ul li{border-top: 1px solid #575757;}
#ft-fam ul li:first-child{border-top: none;}
#ft-fam ul li a{display: block;line-height: 35px;color: #f7f7f7;text-align: center;}
#ft-fam:hover ul{display: block;}

#sns-ico {
  margin-top: 20px;
}
#sns-ico li {
  display: inline-block;
  margin-right: 5px;
}

/* #gotop{position: absolute;top: 10px;right: 0;display: block;background: url('../images/layout/ft-top-btn.jpg') no-repeat center center;width: 50px;height: 50px;text-indent: -999em;} */
#gotop {
  position: fixed;
  bottom: 50px;
  right: 5%;
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background: #137546;
  color: #fff;
  font-size: 26px;
  text-align: center;
}
#gotop:hover {
  text-decoration: none;
}

#fnb {
  margin-left:250px;
  margin-top:-50px;
}
#fnb > li {
  display: inline-block;
  padding: 0 10px;
}
#fnb > li:first-child {
  padding-left: 0;
  background: none;
}
#fnb > li a {
  font-size: 15px;
  color: #777;
  letter-spacing: -1px;
  line-height: 70px;
}

#ft-cc {
  position: absolute;
  top: 50px;
  right: 0;
}
#ft-cc dl {
  font-family: empty;
  font-size: 0;
}
#ft-cc dl > * {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
  font-family: noto;
  height: 34px;
}
#ft-cc dl dt {
  font-size: 21px;
  color: #333;
  font-weight: normal;
  letter-spacing: -0.05em;
  line-height: 34px;
}
#ft-cc dl dd {
  margin-left: 20px;
  font-size: 30px;
  color: #333;
  font-weight: 600;
  padding-left: 40px;
  position: relative;
}
#ft-cc dl dd i {
  position: absolute;
  top: 2px;
  left: 0;
}
#ft-cc dl dd a {
  display: block;
  font-size: 24px;
  color: #333;
  font-weight: 600;
  line-height: 34px;
  text-decoration: none;
}
#ft-cc p {
  margin-top: 10px;
  color: #333;
  line-height: 1em;
}

#slide-btn {
  display: none;
  text-indent: -999em;
  width: 30px;
  height: 20px;
  position: absolute;
  bottom: 35px;
  right: 0;
}
#slide-btn button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}
#slide-btn button span,
#slide-btn button:before,
#slide-btn button:after {
  border-radius: 2px;
  overflow: hidden;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #282828;
}
#slide-btn button span {
  display: block;
  top: 50%;
  margin-top: -1px;
  opacity: 1;
  transition: all 0.3s;
}
#slide-btn button:before {
  content: "";
  display: block;
  top: 0;
  transition: all 0.3s;
}
#slide-btn button:after {
  content: "";
  display: block;
  bottom: 0;
  transition: all 0.3s;
}
#slide-btn button.on span {
  opacity: 0;
}
#slide-btn button.on:before {
  top: 50%;
  margin-top: -1px;
  transform: rotate(45deg);
}
#slide-btn button.on:after {
  bottom: 50%;
  margin-bottom: -1px;
  transform: rotate(-45deg);
}

#slide-bg {
  display: none;
}
#slide-menu {
  display: none;
}

#header.fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); */
  background-color: #fff;
  
}
#header.fix.on .inner {
  height: 65px;
  transition: all 0.3s;
}
#header.fix.on .logo {
  line-height: 65px;
  transition: all 0.3s;
}
#header.fix.on #gnb > li > a {
  line-height: 65px;
  transition: all 0.3s;
}
#header.fix.on #gnb > li > ul {
  top: 65px;
  transition: all 0.3s;
}
#header.fix.on #tnb {
  top: 20px;
  transition: all 0.3s;
}

/**************************************************
	Main
**************************************************/
#main #mainWrap {
  overflow: hidden;
}

#main .visual {
  position: relative;
}
#main .visual .roll .item {
  position: relative;
  overflow: hidden;
}
#main .visual .roll .item img {
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -960px;
}
#main .visual .slick-dots {
  position: absolute;
  bottom: 168px;
  left: 50%;
  margin-left: -700px;
  z-index: 81;
}
#main .visual .slick-dots li {
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
  margin: 0 5px;
}
#main .visual .slick-dots li button {
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 6px;
  text-indent: -999em;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
}
#main .visual .slick-dots li.slick-active button {
  width: 25px;
  height: 3px;
  border: 0;
  background-color: #2b9ce0;
  border-radius: 0;
}

.mtit {
  margin-bottom: 58px;
}
.mtit h3 {
  display: block;
  text-align: center;
  font-family: "paybooc-Light";
  font-weight: 200;
  font-size: 40px;
  color: #222222;
}
.mtit h3 strong {
  font-family: "paybooc-Bold";
  font-weight: 600;
}
.mtit p {
  margin-top: 30px;
  font-size: 24px;
  color: #333333;
  font-weight: 200;
  line-height: 34px;
  text-align: center;
}
.mtit span {
  display: block;
  margin-top: 25px;
  font-size: 16px;
  font-weight: 200;
  line-height: 28px;
  text-align: center;
}

.colBlue {
  color: #137546 !important;
}
.colRed {
  color: red !important;
}

.tac > img.__pc,
.tac > img.__ta {
  margin: 0 auto;
}

.maboutus-wrap {
  padding:130px 0 180px;
  background: #f2f4f6;
}
.maboutus-wrap .inner {
  width: 1280px;
  margin:0 auto;
  position:relative;
}


.maboutus-wrap .inner .mainbanner {
  position:absolute;
}
.maboutus-wrap .inner .mainbanner.bg {
  position:absolute;
  top:-150px;
  right:-200px;
  width:700px;
}
.maboutus-wrap .inner .mainbanner.img {
  position:absolute;
  bottom:-180px;
  right:40px;
  width:700px;
}
.maboutus-wrap .inner .mainbanner img {
  width:100%;
}
.maboutus-wrap .mtit {
  margin-left:30px;
}
.maboutus-wrap .mtit h3 {
  color: #222;
  text-align: left;
  font-family: noto;
  font-weight: 600;
  font-size: 35px;
}
.maboutus-wrap .mtit P {
  color: #222;
  text-align: left;
  font-family: noto;
  font-size: 18px;
}
.maboutus-wrap .mtit h3 strong {
  color: #137546;
  font-family: noto;
}
.maboutus-wrap .mtit .btn3 {
  border-radius:10px;
  width:180px;
  margin-top:20px;
}
.maboutus-wrap dl {
  margin-top: 64px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 50% auto;
  padding: 98px 100px 98px 50%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
.maboutus-wrap dl > * {
  display: block;
}
.maboutus-wrap dl > dt {
  font-size: 32px;
  color: #333333;
  font-weight: 600;
}
.maboutus-wrap dl > dd {
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid #ddd;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 28px;
}

.mselect-wrap {
  padding: 50px 0 100px;
  background: #f1f7fb;
}
.mselect-wrap .inner {
  width: 1280px;
  margin: 0 auto;
}
.mselect-wrap ol {
  padding-left: 640px;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 50% auto;
  box-sizing: border-box;
}
.mselect-wrap ol li {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
  margin-top: 10px;
  padding: 42px 0;
  position: relative;
}
.mselect-wrap ol li:first-child {
  margin-top: 0;
}
.mselect-wrap ol li em {
  position: absolute;
  top: 46px;
  left: 50px;
  width: 45px;
  height: 45px;
  line-height: 47px;
  text-align: center;
  font-family: "paybooc-Light";
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  font-style: normal;
  background: #137546;
  border-radius: 5px;
  box-sizing: border-box;
  padding-left: 2px;
}
.mselect-wrap ol li strong {
  position: absolute;
  top: 46px;
  left: 118px;
  line-height: 45px;
  font-size: 26px;
  color: #333333;
  font-weight: 300;
  letter-spacing: -0.05em;
}
.mselect-wrap ol li p {
  margin-left: 238px;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 28px;
}


#mspecial-con {
  width:100%;
  background-color:#191f28;
}

.mspecial-wrap {
  width: 1280px;
  margin: 0 auto;
  padding:130px 0;
}
.mspecial-wrap ul li {
  margin-top: 60px;
}
.mspecial-wrap ul li:first-child {
  margin-top: 0;
}
.mspecial-wrap ul li:after {
  display: block;
  clear: both;
  content: "";
}
.mspecial-wrap ul li > * {
  float: left;
  width: 48%;
}
.mspecial-wrap ul li:nth-child(odd) .img {
  float: right;
}
.mspecial-wrap ul li:nth-child(even) .info {
  float: right;
}
.mspecial-wrap ul li .img {
  padding-bottom: 384px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}
.mspecial-wrap ul li:nth-child(1) .info {
  padding-top: 63px;
}
.mspecial-wrap ul li:nth-child(2) .info {
  padding-top: 58px;
}
.mspecial-wrap ul li:nth-child(3) .info {
  padding-top: 63px;
}
.mspecial-wrap ul li:nth-child(4) .info {
  padding-top: 63px;
}
.mspecial-wrap ul li .info strong {
  display: block;
  font-size: 24px;
  color: #fff;
  font-weight: 300;
  line-height: 34px;
}
.mspecial-wrap ul li .info strong .mini {
  color:#eee;
  font-size:17px;
}
.mspecial-wrap ul li .info strong .colBlue {
  color:#57be8d !important;
  font-size:30px;
}
.mspecial-wrap ul li .info strong span {
  font-size: 25px;
}
.mspecial-wrap ul li .info p {
  margin-top: 25px;
  font-size: 17px;
  font-weight: 200;
  line-height: 28px;
  color:#ddd;
}
.mspecial-wrap ul li .info a {
  display: block;
  margin-top: 45px;
}
.mspecial-wrap ul li .info .btn3 {
  width:180px;
  border-radius: 10px;
  /* background-color:#fff; */
  color:#57be8d !important;
  border:1px solid #57be8d;
}
.mspecial-wrap ul li .info .btn3:hover {
  color:#fff !important;
}





.mpayinfo-wrap {
  padding: 100px 0;
  background: url("../images/main/bg2.jpg") no-repeat center center;
  background-size: cover;
  position: relative;
}
.mpayinfo-wrap .inner {
  width: 1280px;
  margin: 0 auto;
}
.mpayinfo-wrap .mtit h3 {
  color: #fff;
}
.mpayinfo-wrap ul li {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  width: 33.33%;
}
.mpayinfo-wrap ul li .img {
  position: relative;
}
.mpayinfo-wrap ul li .img img {
  max-width: 100%;
}
.mpayinfo-wrap ul li .img:after {
  display: block;
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url("../images/main/payinfo-dot.png") no-repeat center center;
  background-size: contain;
}
.mpayinfo-wrap ul li .info {
  padding-top: 50px;
}
.mpayinfo-wrap ul li .info:before {
  display: block;
  content: "";
  background: #3d89ca;
  width: 100vw;
  height: 1px;
  position: absolute;
  left: 0;
  margin-top: -50px;
}
.mpayinfo-wrap ul li .info strong {
  display: block;
  font-size: 22px;
  color: #c9e2ef;
  font-weight: 300;
  line-height: 32px;
}
.mpayinfo-wrap ul li .info strong span {
  font-size: 16px;
  color: #87c0e3;
  font-weight: 300;
  line-height: 28px;
}
.mpayinfo-wrap ul li .info p {
  margin-top: 20px;
  font-size: 14px;
  color: #87c0e3;
  font-weight: 200;
  line-height: 24px;
}
.mpayinfo-wrap ul li .info a {
  display: block;
  margin-top: 45px;
  color: #87c0e3 !important;
  border: 1px solid #87c0e3;
}
.mpayinfo-wrap ul li:hover .img:after {
  background-image: url("../images/main/payinfo-dot-on.png");
}
.mpayinfo-wrap ul li:hover .info strong,
.mpayinfo-wrap ul li:hover .info strong span,
.mpayinfo-wrap ul li:hover .info p {
  color: #fff;
}
.mpayinfo-wrap ul li:hover a {
  color: #fff;
  border-color: #fff;
}
.mpayinfo-wrap ul li .info a:hover {
  background: url("../images/main/btn-bg2.jpg") repeat-y center center;
  border: 1px solid rgba(0, 0, 0, 0);
  color: #fff !important;
}

.mcloudmail-wrap {
  width: 1280px;
  margin: 100px auto;
}
.mcloudmail-wrap .mtit h3 {
  font-family: "paybooc-Bold";
  font-weight: 600;
}
.mcloudmail-wrap .img {
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.mcloudmail-wrap .img img {
  max-width: 100%;
}

.mpreview-wrap {
  background: #f8f7fc;
  padding: 100px 0;
}
.mpreview-wrap .inner {
  width: 1280px;
  margin: 0 auto;
}
.mpreview-wrap .mtit h3 {
  font-family: "paybooc-Bold";
  font-weight: 600;
}
.mpreview-wrap .roll {
  margin: -15px;
}
.mpreview-wrap .item .in {
  margin: 15px;
  position: relative;
}
.mpreview-wrap .item .link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-bottom: 63.29%;
  background: rgba(0, 0, 0, 0.8);
  font-size: 30px;
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
}
.mpreview-wrap .item .link i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
}
.mpreview-wrap .item .tmb {
  padding-bottom: 63.29%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.mpreview-wrap .item .info {
  padding: 45px 0;
  border-bottom: 2px solid #333;
  text-align: center;
}
.mpreview-wrap .item .info strong {
  display: block;
  font-size: 24px;
  color: #333333;
  line-height: 34px;
  height: 68px;
  overflow: hidden;
  font-weight: normal;
}
.mpreview-wrap .item .info p {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 200;
  line-height: 28px;
  height: 56px;
  overflow: hidden;
}
.mpreview-wrap .slick-dots {
  text-align: center;
  margin-top: 70px;
}
.mpreview-wrap .slick-dots li {
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
  margin: 0 14px;
}
.mpreview-wrap .slick-dots li button {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  text-indent: -999em;
  overflow: hidden;
  background-color: #dddddd;
  border: 0;
}
.mpreview-wrap .slick-dots li.slick-active button {
  background-color: #137546;
}
.mpreview-wrap .item .in:hover .link {
  opacity: 1;
}

.mbanner-wrap {
  background: #137546;
  padding: 100px 0 100px;
}
.mbanner-wrap .inner {
  width:1000px;
  margin: 0 auto;
  background:#137546;
  position: relative;
  text-align: center;
}
.mbanner-wrap .mtit {
  margin: 0 auto;
  margin-bottom: 40px;
  text-align: center;
}
.mbanner-wrap .mtit h3 {
  text-align: left;
  font-size: 35px;
  color: #fff;
  line-height: 1.4em;
  font-family: noto;
  text-align: center;
}
.mbanner-wrap .mtit h3 strong {
  font-size: 35px;
  color: #fff;
  line-height: 1.4em;
  font-family: noto;
  text-align: center;
}
.mbanner-wrap .img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
}
.mbanner-wrap .img img {
  max-width: 100%;
}
.mbanner-wrap .btnWrap {
  margin:0 auto;
  max-width:410px;
  margin-top: 70px;
}
.mbanner-wrap .btnWrap:after {
  display: block;
  clear: both;
  content: "";
}
.mbanner-wrap .btnWrap a {
  float: left;
  margin: 0;
  margin-right: 10px;
  width: 200px;
  height: 50px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  color: #fff !important;
  font-weight: 300;
  letter-spacing: -0.05em;
  border: 1px solid #fff;
  box-sizing: border-box;
  border-radius: 10px;
  text-decoration: none;
}
.mbanner-wrap .btnWrap a:nth-child(2) {
  margin-right:0;
}
.mbanner-wrap .btnWrap a:hover {
  background-image: none;
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: #ddd;
  color:#137546 !important;
}
.mbanner-wrap .inner p {
  color:#ddd;
  margin-top:20px;
}

/**************************************************
	Sub
**************************************************/
#sub {
  overflow: hidden;
}
#sub #content {
  position: relative;
  width: 1280px;
  margin: 0 auto;
  padding: 40px 0;
}

#sub .sub-vis {
  position: relative;
  height: 250px;
  overflow: hidden;
  text-align: center;
  background-position: center center;
  background-size: cover;
  background-color: #137546;
}

#sub .sub-vis:before {
  position: relative;
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
#sub .sub-vis h2 {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-family: "paybooc-Bold";
  font-weight: 500;
  font-size: 40px;
  color:#fff;
  z-index: 2;
}
#sub .sub-vis h2 em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: noto;
  font-size: 18px;
  color: #333333;
  font-weight: 200;
}

#sub .sub-tit {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid #ddd;
}
#sub .sub-tit h3 {
  margin-top: 10px;
  font-size: 30px;
  color: #000;
}

.lnbWrap {
  width: 1280px;
  margin: 80px auto 0;
}
#lnb {
  width: 1280px;
  margin: 0 auto;
  text-align: center;
}
#lnb > li {
  display: inline-block;
  vertical-align: top;
  margin: 5px 30px;
}
#lnb > li a {
  display: block;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  line-height: 55px;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  color: #999999;
}
#lnb > li.active a {
  border-bottom: 3px solid #137546;
  color: #137546;
  font-weight: 300;
}

.top-step {
  /* background: #f3f3f3; */
  padding-bottom: 20px;
  position: relative;
  z-index: 10;
  margin-top:-35px;
}
.top-step ul {
  width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.top-step ul > li {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: middle;
  width: 50%;
  line-height: 70px;
  font-size: 18px;
  color: #bbb;
  letter-spacing: -0.05em;
}
.top-step ul > li em {
  font-style: normal;
  display: inline-block;
  vertical-align: 1px;
  font-family: "paybooc-Bold";
  font-weight: 600;
  font-size: 19px;
  color: #bbb;
  letter-spacing: -0.025em;
}
.top-step ul > li:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: #ddd;
}
.top-step ul > li:first-child:before {
  display: none;
}
.top-step ul > li.active {
  /* background: #137546; */
  color: #137546;
  font-weight: 600;
}
.top-step ul > li.active em {
  color: #137546;
}

/* 약관 내용 출력 박스 */
.policybox {
  color: #666;
  font-size: 13px;
  line-height: 20px;
}

.btn-box {
  margin: 0 -25px;
}
.btn-box > li {
  margin: 0 25px;
  width: calc(50% - 50px);
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
  padding: 80px 60px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: 40% auto;
  border-radius: 10px;
}
.btn-box > li .link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #137546;
  border-radius: 10px;
  opacity: 0;
}
.btn-box > li strong {
  display: block;
  font-size: 32px;
  color: #333333;
  font-weight: 600;
  line-height: 1em;
  height: 1em;
}
.btn-box > li p {
  margin: 20px 0 35px;
  font-size: 16px;
  letter-spacing: -0.05em;
  line-height: 28px;
  font-weight: 200;
}
.btn-box > li:nth-child(even) .link {
  border-color: #ffa506;
}
.btn-box > li:hover .link {
  opacity: 1;
}
.btn-box > li:hover .btn3 {
  background: url("../images/main/btn-bg.jpg") repeat-y center center;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0);
}
.btn-box > li:hover .btn4 {
  background: url("../images/main/btn-bg2.jpg") repeat-y center center;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0);
}
@media screen and (min-width: 782px) and (max-width: 1200px) {
  .btn-box > li {
    min-height: 188px;
  }
}
@media screen and (min-width: 539px) and (max-width: 664px) {
  .btn-box > li {
    min-height: 207px;
  }
}

.mt_90 {
  margin-top: -90px !important;
}
.mb_90 {
  margin-bottom: -90px !important;
}

.colBlue {
  color: #137546 !important;
}

.stit {
  margin-bottom: 35px;
}
.stit h4 {
  display: block;
  text-align: center;
  font-family: "paybooc-Bold";
  font-weight: 600;
  font-size: 32px;
  color: #333;
  line-height: 1em;
}
.stit p {
  display: block;
  margin-top: 30px;
  text-align: center;
  font-size: 18px;
  color: #333333;
  font-weight: 200;
}
.stit p .big {
  font-size: 22px;
  font-weight: 600;
  color: #333;
}

.fulldiv {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}
.fulldiv .inner {
  width: 1280px;
  margin: 0 auto;
}
.fulldiv .inner.pay3{
  width: 1080px;
  margin: 0 auto;
}

.fulldiv.bgf1f1f1 {
  background: #f1f1f1;
}
.fulldiv.shadow {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
}

.content1 {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 10px;
  padding: 60px;
}
.content2 {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
  background: #fff;
  border-radius: 10px;
  padding: 60px;
}
.content2 select {
  font-size:16px;
}
.content2 .stit h4 {
  font-size:25px;
  margin-top:-10px;
  margin-bottom:30px;
}
.content3 {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 50px;
}
.content3.w80 {
  width:70%;
  margin:0 auto;
}
.step > li {
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  font-weight: 200;
  line-height: 30px;
}
.step > li em {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "paybooc-Light";
  font-weight: 600;
  font-size: 16px;
  color: #137546;
  line-height: 30px;
  font-style: normal;
}

.t1 {
  font-size: 15px;
  color: #888888;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 28px;
}
.t2 {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 30px;
}
.t2 span {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 30px;
  color:#E34B0E;
}
.t3 {
  font-size: 24px;
  color: #333333;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2em;
}

.line1 {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 40px 0;
  background: #ddd;
}

.align-cont {
  margin: -25px;
}
.align-cont:after {
  display: block;
  clear: both;
  content: "";
}
.align-cont > dl {
  float: left;
  margin: 25px;
  width: calc(50% - 50px);
}

.infobox {
  margin: 70px 0 75px;
  border: 1px solid #ddd;
  padding: 30px 50px;
  border-radius: 10px;
}
.infobox:after {
  display: block;
  clear: both;
  content: "";
}
.infobox > * {
  float: left;
}
.infobox > dt {
  width: 210px;
  font-size: 24px;
  color: #333333;
  font-weight: 300;
  line-height: 1em;
}
.infobox > dd {
  width: calc(100% - 210px);
  font-size: 16px;
  font-weight: 200;
  line-height: 1.6em;
}

.ms-list {
  margin: -15px;
}
.ms-list.pay3 {
  margin:0 auto;
  width: calc(80% - 30px);
}
.ms-list > li {
  display: inline-block;
  zoom: 1;
  /* display: inline; */
  vertical-align: top;
  margin: 15px;
  width: calc(33.33% - 30px);
  box-shadow: 0 0 10px rgba(130, 130, 130, 0.1);
  padding-bottom: 40px;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
  /* overflow: hidden; */
  border:2px solid rgba(130, 130, 130, 0.1);
}
.ms-list > li.w100 {
  width: calc(100% - 30px);
}
.ms-list > li label {
  position: absolute;
  top: 0;
  left: 0;
  /* z-index: 10; */
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ms-list .info strong {
  display: block;
  margin-bottom: 15px;
  padding: 40px 0;
  font-size: 25px;
  color: #333333;
  font-weight: 700;
  line-height: 1em;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#payment_cont2 .ms-list li:nth-child(3n - 2) .info strong {background-color: #e0ffef; color: #006631;}
#payment_cont2 .ms-list li:nth-child(3n - 1) .info strong {background-color: #fff8e7; color: #996b00;}
#payment_cont2 .ms-list li:nth-child(3n) .info strong {background-color: #f5f8ff; color: #002ca6;}
.ms-list .info p.chk {
  margin-top: 5px;
  padding: 10px 0;
  padding-left: 80px;
  background: url("../images/sub/icon_circleCheck.png") no-repeat 40px center;
  background-size: 20px;
  font-size: 16px;
  line-height: 21px;

}
.ms-list .info p.chk:nth-child(1) {
  border-top: 1px solid #ddd;
  padding-top: 30px;
  margin-top: 30px;
}
/* #payment_cont2 .ms-list li:first-child .info p.chk:nth-child(7),
#payment_cont2 .ms-list li:first-child .info p.chk:nth-child(8),
#payment_cont2 .ms-list li:first-child .info p.chk:nth-child(9) {background: url("../images/sub/icon_circleQuestion.png") no-repeat 40px center; background-size: 20px;} */
.ms-list .pay {
  border-top: 1px solid #ddd;
  padding-top: 30px;
  margin-top: 30px;
  position: relative;
  text-align: center;
}
/* .ms-list.pay3 .pay {
  text-align: right;
}  */
.ms-list .pay strong {
  font-family: "paybooc-Light";
  font-weight: 600;
  font-size: 25px;
  color: #111111;
  line-height: 1em;
  text-align: center;
}
.ms-list .pay strong em {
  font-family: noto;
  font-size: 15px;
  color: #333333;
  font-weight: 300;
  line-height: 1.2em;
  display: inline-block;
  vertical-align: bottom;
  font-style: normal;
}
/* .ms-list .pay span {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #eeeeee;
  line-height: 30px;
  padding: 0 20px;
  border-radius: 15px;
  display: inline-block;
} */
.ms-list .pay .month {
  color: #222;
  font-size:16px;
}


.ms-list .active {
  /* background: url("../images/main/btn-bg.jpg") repeat-y center 0;
  background-size: 100% auto; */
  border:2px solid #137546;
  box-sizing: border-box;
}
.ms-list .active .info strong,
.ms-list .active .info p.chk,
.ms-list .active .pay strong,
.ms-list .active .pay strong em {
  /* color: #fff; */
}

.ms-list2 > li {
  border: 2px solid #ddd;
  padding: 15px 20px;
  border-radius: 10px;
  position: relative;
  margin-top: 10px;
}
.ms-list2 > li:first-child {
  margin-top: 0;
}
.ms-list2 > li label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ms-list2 > li i {
  position: absolute;
  top: 17px;
  right: 35px;
  font-size: 24px;
  color: #137546;
  opacity: 0;
}
.ms-list2 .info {
  margin-right: 70px;
  padding-left: 160px;
  position: relative;
  line-height: 30px;
}
.ms-list2 .info strong {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
  color: #137546;
  font-weight: 300;
}
.ms-list2 .info p {
  font-size: 15px;
  color: #888888;
  font-weight: 200;
  letter-spacing: -0.05em;
}
.ms-list2 .active {
  border-color: #137546;
  border-width: 2px;
}
.ms-list2 .active i {
  opacity: 1;
}

.icon-list > li {
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  width: 16.66%;
  text-align: center;
  margin-top: 50px;
}
.icon-list > li img {
  display: block;
  margin: 0 auto;
}
.icon-list > li strong {
  display: block;
  margin-top: 20px;
  font-size: 18px;
  color: #333333;
  font-weight: normal;
  line-height: 1em;
}

.caption {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin-top: -3px;
}
.caption b {
  width: 16px;
  vertical-align: middle;
  line-height: 16px;
  color: #fff;
  border-radius: 50%;
  background: #bbb;
  display: block;
  text-align: center;
  margin-left: 5px;
  font-size: 12px;
  font-weight: normal;
}
.caption .on_caption {
  position: absolute;
  opacity: 0;
  transition: all 0.3s;
  top: 20px;
  left: 5px;
  display: inline-block;
  box-sizing: border-box;
  padding: 7px 15px;
  line-height: 16px;
  border-radius: 5px;
  border: 1px solid #ddd;
  color: #444;
  background: #eee;
  font-size: 14px;
  white-space: nowrap;
}
.caption:hover .on_caption {
  opacity: 1;
}

.count1 .btn {
  border: 1px solid #ddd;
  background: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #f3f3f3;
  border-radius: 50%;
}
.count1 .inp {
  border: 1px solid #ddd;
  background: #fff;
  width: 100px;
  height: 50px;
  border-radius: 3px;
  margin: 0 20px;
  text-align: center;
  font-size: 16px;
  color: #333;
}
.sel {
  border: 1px solid #ddd;
  background: #fff;
  height: 50px;
  border-radius: 3px;
  font-size: 20px;
  color: #333;
}

.chkArea2 {
  margin: 20px 60px 20px 0px;
  font-size: 15px;
  color: #888888;
  font-weight: 200;
  letter-spacing: -0.05em;
}
.chkArea2 label,
.chkArea2 label span,
.chkArea2 a {
  font-size: 15px;
  color: #888888;
  font-weight: 200;
  letter-spacing: -0.05em;
}

.chkArea2.w80 {
  width:60%;
}

.manual-list {
  margin: -10px;
}
.manual-list > li {
  margin: 10px;
  width: calc(50% - 20px);
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
  background: #f4f4f4;
  border-radius: 10px;
  position: relative;
}
.manual-list > li a {
  display: block;
  padding: 0 100px 0 40px;
  height: 80px;
  line-height: 80px;
  font-size: 21px;
  color: #222222;
  font-weight: 300;
  letter-spacing: -0.05em;
  text-decoration: none;
}
.manual-list > li i {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 55px;
  height: 55px;
  line-height: 55px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 22px;
  color: #444;
}

.box-shadow > li {
  margin-top: 30px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
.box-shadow > li:first-child {
  margin-top: 0;
}
.box-shadow > li img {
  max-width: 100%;
  margin: 0 auto;
}

#payment_cont2 .fulldiv.bgf1f1f1 {
  padding-bottom: 100px;
}
#payment_cont2 .fulldiv.shadow {
  padding-bottom: 100px;
}
#payment_cont2 .fulldiv .inner {
  position: relative;
}

#payment_cont2 .fulldiv .btn3 {
  position: absolute;
  right: 60px;
  bottom: -50px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  padding-top: 33px;
  text-decoration: none;
  background: url("../images/main/btn-bg.jpg") repeat-y center center !important;
  font-family: "paybooc-Bold";
  font-weight: 600;
  font-size: 20px;
  color: #fff !important;
  border: 0 !important;
  line-height: 26px;
}
#payment_cont2 .fulldiv .btn3:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#payment_cont2 ._mainServer .stit h4 {
  font-size: 40px;
}


#payment_cont3 .fulldiv.bgf1f1f1 {
  padding-bottom: 100px;
}
#payment_cont3 .fulldiv.shadow {
  padding-bottom: 100px;
}
#payment_cont3 .content2 {
  width: 40%;
  margin: 0 auto;
}
#payment_cont3 .content2 legend {
  display: none;
}
#payment_cont3 .count1 {
  padding-bottom: 40px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
#payment_cont3 .count1 .inp {
  width: 150px;
}
#payment_cont3 .table2 tr th {
  width: 20%;
}

#payment_cont4 .fulldiv.shadow {
  padding-bottom: 100px;
}
#payment_cont4 .info:after {
  display: block;
  clear: both;
  content: "";
}
#payment_cont4 .info > * {
  float: left;
}
#payment_cont4 .info strong {
  width: 100%;
}
#payment_cont4 .info p.chk {
  width: 50%;
  box-sizing: border-box;
}
#payment_cont4 .ms-list .pay strong {
  margin-right: 10px;
}
#payment_cont4 .ms-list .pay span {
  position: static;
}
#payment_cont4 .table2 tr > * {
  padding: 20px;
}
#payment_cont4 .table2 td > span {
  display: block;
}
#payment_cont4 .table2 table tr > * {
  padding: 10px 0;
  vertical-align: top;
}
#payment_cont4 .table2 .total > * {
  padding-top: 30px;
  padding-bottom: 30px;
}
#payment_cont4 .content2 {
  width:70%;
  margin:0 auto;
}
#payment_cont4 .content2 .table2 {
  margin: -20px 0;
}
#payment_cont4 .content2 .table2 tr > * {
  padding-right: 0;
  padding-left: 0;
}
#payment_cont4 .content2 .table2 tr:first-child > * {
  border-top: 0;
}
#payment_cont4 .content2 .table2 td {
  position: relative;
  padding-right: 90px;
}
#payment_cont4 .content2 .table2 td .btn6 {
  position: absolute;
  top: 20px;
  right: 0;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  width: 100px;
  text-align: center;
  padding: 0;
  font-size: 16px;
  font-weight: 300;
}
#payment_cont4 .content2 .table2 td .btn6:hover {
  background-color: #137546;
  transition: all 0.3s;
}
#payment_cont4 .inp {
  margin: 0 10px;
}
#payment_cont4 .sel {
  width: 230px;
  padding-left: 10px;
}
#payment_cont4 .ms-list2 {
  margin-top: 10px;
}

.pay3-cash {
  margin-top:80px;
}




#payment_cont5 .slogan {
  padding: 70px;
  text-align: center;
  background-color: #137546;
  background-size: 100% auto;
  border-radius: 10px;
}
#payment_cont5 .slogan img {
  display: block;
  margin: 0 auto;
}
#payment_cont5 .slogan strong {
  display: block;
  margin-top: 25px;
  font-size: 34px;
  color: #fff;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.2em;
}
#payment_cont5 .slogan p {
  margin-top: 30px;
  font-size: 16px;
  color: #fff;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 26px;
}
#payment_cont5 .table2 {
  margin-top: 60px;
  border-top: 2px solid #222;
  border-bottom: 1px solid #ddd;
  padding: 30px;
}
#payment_cont5 .fulldiv.shadow {
  padding-bottom: 100px;
}
#payment_cont5 .btnWrap {
  margin-bottom:100px;
  margin-top:100px;
}

.__line {
  width: 100%;
  display: block;
  height: 1px;
  background: #ddd;
  margin: 30px 0;
  border: 0;
}

#aboutus .stit {
  margin-bottom: 65px;
}
#aboutus .stit h4 {
  font-size: 40px;
  line-height: 1.4em;
}
#aboutus .qna {
  padding: 90px 0;
}
#aboutus .qna .stit h4 {
  color: #fff;
}
#aboutus .qna dl > * {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: contain;
}
#aboutus .qna dl dt {
  padding: 85px 0;
  background-image: url("../images/sub/aboutus-bg2.jpg");
  background-position: 10px center;
  font-size: 30px;
  color: #333333;
  font-weight: 200;
  letter-spacing: -0.05em;
  text-align: center;
  text-indent: 90px;
}
#aboutus .qna dl dt em {
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
  font-family: "paybooc-Bold";
  font-weight: 600;
  font-size: 35px;
  color: #222222;
}
#aboutus .qna dl dd {
  padding: 70px;
  margin-top: 30px;
  background-image: url("../images/sub/aboutus-bg3.jpg");
  background-position: 100% center;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 1.8em;
}
#aboutus .payment {
  background: #f8f7fc;
  padding: 90px 0;
  margin-top: 90px;
}
#aboutus .box-list {
  margin: -1%;
}
#aboutus .box-list:after {
  display: block;
  clear: both;
  content: "";
}
#aboutus .box-list > dl {
  float: left;
  width: 48%;
  margin: 1%;
  background: #fff;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
#aboutus .box-list dt {
  display: block;
  border-radius: 10px 10px 0 0;
  padding: 15px;
  text-align: center;
  background: #079cd4;
  font-family: "paybooc-Light";
  font-weight: 600;
  font-size: 30px;
  color: #fff;
}
#aboutus .box-list dd {
  display: block;
  border-radius: 0 0 10px 10px;
  padding: 50px 40px;
  border: 2px solid #079cd4;
  border-top: 0;
}
#aboutus .box-list dd:after {
  display: block;
  clear: both;
  content: "";
}
#aboutus .box-list dd > * {
  float: left;
  width: 100%;
}
#aboutus .box-list p:not(.chk) {
  margin-bottom: 30px;
  font-size: 16px;
  color: #444444;
  font-weight: 200;
  line-height: 28px;
  text-align: center;
}
#aboutus .box-list p.chk {
  width: 50%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 7px 0;
  padding-left: 45px;
  background: url("../images/sub/t-ico-chk.png") no-repeat 0 0;
  font-size: 16px;
  line-height: 21px;
}
#aboutus .box-list table {
  width: 100%;
  margin: 45px 0 0;
}
#aboutus .box-list table tr td {
  border: 20px solid #fff;
  background: #f1f1f1;
  height: 170px;
  text-align: center;
  font-size: 21px;
  color: #333333;
  font-weight: 300;
  line-height: 1.4em;
}
#aboutus .box-list table tr td span {
  display: block;
  font-size: 15px;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 21px;
}
#aboutus .box-list strong {
  margin-top: 45px;
  font-size: 24px;
  color: #333333;
  font-weight: 300;
  line-height: 34px;
  text-align: center;
}
#aboutus .box-list strong mark {
  font-size: 24px;
  background: #b2e4ed;
}
#aboutus .box-list .btn2 {
  font-size: 16px;
  color: #999999;
  letter-spacing: -0.05em;
  height: 48px;
  line-height: 48px;
  width: 250px;
}
#aboutus .box-list dl:nth-child(odd) dt {
  background: #137546;
}
#aboutus .box-list dl:nth-child(odd) dd {
  border-color: #137546;
}
#aboutus .slider {
  padding: 90px 0;
}
#aboutus .slider .stit {
  margin-bottom: 60px;
}
#aboutus .slider .stit h4 {
  color: #fff;
}
#aboutus .slider .roll {
  position: relative;
  margin: -10px;
}
#aboutus .slider .slick-dots {
  position: absolute;
  bottom: 70px;
  left: 60px;
}
#aboutus .slider .slick-dots li {
  margin-right: 30px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: bottom;
}
#aboutus .slider .slick-dots li button {
  border: 0;
  width: 12px;
  height: 12px;
  background: #dddddd;
  overflow: hidden;
  text-indent: -999px;
  border-radius: 50%;
}
#aboutus .slider .slick-dots li.slick-active button {
  background: #00baff;
}
#aboutus .item {
  padding: 10px;
}
#aboutus .item:after {
  display: block;
  clear: both;
  content: "";
}
#aboutus .item .info {
  float: left;
  padding-top: 50px;
  margin-left: 50px;
}
#aboutus .item .info > * {
  display: block;
}
#aboutus .item .info em {
  display: inline-block;
  font-style: normal;
  border: 2px solid #fff;
  height: 41px;
  line-height: 41px;
  padding: 0 20px;
  border-radius: 23px;
  font-family: "paybooc-Light";
  font-size: 16px;
  color: #fff;
}
#aboutus .item .info strong {
  margin-top: 35px;
  font-size: 32px;
  color: #fff;
  font-weight: 300;
  letter-spacing: -0.05em;
}
#aboutus .item .info p {
  margin-top: 20px;
  font-size: 16px;
  color: #fff;
  font-weight: 200;
  line-height: 28px;
}
#aboutus .item > img {
  float: right;
  border: 20px solid #f1f1f1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
#aboutus .tac > img {
  margin: 0 auto;
}
#aboutus .mbanner-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-top: 65px;
  margin-left: -50vw;
  background: #fff;
  padding-bottom: 0;
}
#aboutus .mbanner-wrap .inner {
  background: #7775e6 url("../images/main/aboutus-bg5.jpg") no-repeat 100%
    center;
}

#case {
  /* border-top: 2px solid #222222; */
  padding-top: 70px;
  margin-top: -40px;
}
#case .stit {
  margin-bottom: 70px;
}
#case .stit p {
  border: 1px solid #ddd;
  padding: 40px 50px;
  border-radius: 10px;
  background: #f1f1f1;
  color: #111;
}
#case .stit p .big {
  color: #111;
}

#ca_id02 .top-step ul > li.active {
  background: #ffa506;
}
#ca_id02 #payment_cont2 .fulldiv .btn3 {
  background-image: url("../images/main/btn-bg2.jpg") !important;
  background-repeat: repeat-y !important;
  background-position: center center !important;
}
#ca_id02 .step > li em {
  color: #ffa506;
  display:none;
}
#ca_id02 .tab2 > li.active a {
  color: #ffa506;
  border-bottom-color: #ffa506;
  display:none;
}
#ca_id02 .ms-list .info p.chk {
  background: url("../images/sub/t-ico-chk2.png") no-repeat 0 0;
}
#ca_id02 .ms-list .active {
  background: url("../images/main/btn-bg2.jpg") repeat-y center 0;
  background-size: 100% auto;
}
#ca_id02 .btn5.big {
  background: #ffa506;
  border-color: #ffa506;
}
#ca_id02 .ms-list2 .active {
  border-color: #ffa506;
}
#ca_id02 .ms-list2 .info strong,
#ca_id02 .ms-list2 > li i {
  color: #ffa506;
}
#ca_id02 #payment_cont5 .slogan {
  background: url("../images/main/btn-bg2.jpg") repeat-y center center;
}
#ca_id02 .colBlue {
  color: #ffa506 !important;
}

/* 회원 로그인 */
#join-wrap {
  background: #fff;
  width: 500px;
  padding: 50px 0;
  margin: 0 auto;
  /* box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); */
  margin-top:30px;
}
#join-wrap h2 {
margin:0 0 30px -40px;  
width:160px;
}
#join-wrap legend {
  display: none;
}
#join-wrap fieldset {
  width: 420px;
  margin: 0 auto;
}
#join-wrap h4 {
  display: block;
  text-align: left;
  margin-bottom: 40px;
  font-family: "paybooc-Bold";
  font-weight: 600;
  font-size: 25px;
  color: #333333;
}
#join-wrap dl {
  margin-top: 15px;
}
#join-wrap dl dt {
  font-size: 13px;
  color: #666666;
  font-weight: 300;
  line-height: 24px;
}
#join-wrap dl dt:nth-child(1) {
  margin-top:30px;
}
#join-wrap dl dd {
  background: #f6f5f8;
  border-radius: 10px;
  position: relative;
  padding-left: 0px;
  margin-top:5px;
}
#join-wrap dl dd i {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 25px;
  color: #666666;
}
#join-wrap dl dd strong {
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  color: #333;
  font-weight: 300;
  display: block;
  padding-left: 20px;

}
#join-wrap dl dd input {
  border: 0;
  width: 100%;
  height: 45px;
  text-indent: 20px;
  background: #f6f5f8;
}
#join-wrap dl dd input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #f6f5f8 inset;
}
#join-wrap .chkWrap {
  margin: 25px 0 28px;
}
#join-wrap .chkWrap > * {
  display: inline-block;
  vertical-align: middle;
}
#join-wrap .chkWrap label {
  /* color: #777777; */
}
#join-wrap .chkWrap a {
  color: #222222;
  font-weight: 300;
  padding: 0 12px;
  margin-left: 10px;
  position: relative;
}
#join-wrap .chkWrap a:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 12px;
  background: #d4d4d4;
  margin-top: -6px;
}
#join-wrap .sbm {
  display: block;
  text-align: center;
  border-radius: 10px;
  border: 0;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #fff;
  font-weight: 300;
  width: 100%;
  background: url("../images/main/btn-bg.jpg") repeat-y center center;
  background-size: 100% 100%;
  margin-bottom:30px;
}

/* user 대시보드 */
#user #header .inner {
  margin: 0 50px 0 20px;
  width: auto;
}
#user #header .logo a {
  font-family: "paybooc-Bold";
  font-size: 22px;
  color: #111 !important;
  font-weight: 600;
  letter-spacing: -1px;
  text-align: center;
}
#user #header .logo a:hover {
  text-decoration: none !important;
}

#user #gnb {
  text-align: left;
  margin: 0 0 0 200px;
}
#user #gnb > li > ul {
  display: none;
}

#user #footer .fnbWrap {
  display: none;
}
#user #footer .ftWrap {
  width: auto;
  margin: 0;
  padding: 0;
}
#user #footer h2 {
  display: none;
}
#user #footer address {
  font-size: 0;
  line-height: 0;
  margin-left: 0;
}
#user #footer address .copyright {
  padding: 30px 0;
  text-align: center;
  margin: 0;
  color: #bbbbbb;
}

#user #ft-cc {
  display: none;
}

#user #sub {
  min-height: calc(100vh - 150px);
  position: relative;
  background: #fff;
  z-index: 1;
}
#user #sub #content {
  width: auto;
  margin: 0;
  padding: 0;
  position: static;
}
#user #sub #content:after {
  display: block;
  clear: both;
  content: "";
}
#user #sub #content:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 100%;
  background: #404040;
  z-index: -1;
}
#user #sub #content > * {
  float: left;
}
#user .lnbWrap {
  width: 220px;
  margin: 0 0 100px;
}
/* #user #subCont {width: 1130px;margin-left: 50px;padding: 40px 0 100px;} */
#user #subCont {
  width: calc(100% - 320px);
  margin-left: 50px;
  padding: 40px 0 100px;
}
#user #lnb {
  width: auto;
}
#user #lnb > li {
  display: block;
  margin: 0;
  border-bottom: 1px solid #222;
}
#user #lnb > li a {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  color: #fff;
  text-align: left;
  padding: 0 20px;
  border: 0;
}
#user #lnb > li.active > a {
  background: #ffa506;
  color: #fff;
}
#user #sub .sub-tit {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 20px;
}
#user #sub .sub-tit h3 {
  font-size: 23px;
  letter-spacing: -1px;
}
#user-list .list_tbl {
  width: 100%;
  border-top: 2px solid #545c73;
}
#user-list .list_tbl caption {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  letter-spacing: -1px;
  margin-bottom: 5px;
  text-align: left;
}
#user-list .list_tbl tr > * {
  position: relative;
  padding: 10px;
  border: 1px solid #dddee0;
  border-width: 0 1px 1px 1px;
  font-size: 15px;
  text-align: center;
  line-height: 1.4;
}
#user-list .list_tbl tr.tr_notice {
  background: #f3f4f7;
}
#user-list .list_tbl thead tr th {
  font-weight: normal;
  font-size: 15px;
  color: #000000;
  letter-spacing: -1px;
  background: rgba(84, 92, 115, 0.03);
}
#user-list .list_tbl tbody tr td.no,
#user-list .list_tbl tbody tr td.date,
#user-list .list_tbl tbody tr td.view {
  color: #999;
}
#user-list .list_tbl tbody tr td.sbj {
  text-align: left;
}
#user-list .list_tbl tbody tr td.sbj a:not(.btn1) {
  font-size: 15px;
  color: #000;
  letter-spacing: -0.5px;
}
#user-list .list_tbl tbody tr td span.green {
  border: 1px solid green;
  color: green;
  font-size: 12px;
  padding: 0 2px;
  min-width: 44px;
  height: 24px;
  line-height: 24px;
  display: inline-block;
  border-radius: 3px;
}
#user-list .list_tbl tbody tr td span.blue {
  border: 1px solid blue;
  color: blue;
  font-size: 12px;
  padding: 0 2px;
  min-width: 44px;
  height: 24px;
  line-height: 24px;
  display: inline-block;
  border-radius: 3px;
}
#user-list .list_tbl tbody tr td span.red {
  border: 1px solid red;
  color: red;
  font-size: 12px;
  padding: 0 2px;
  min-width: 44px;
  height: 24px;
  line-height: 24px;
  display: inline-block;
  border-radius: 3px;
}
#user-list .list_tbl tbody tr td span.black {
  border: 1px solid black;
  color: black;
  font-size: 12px;
  padding: 0 2px;
  min-width: 44px;
  height: 24px;
  line-height: 24px;
  display: inline-block;
  border-radius: 3px;
}
#user-list .btn1.small {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  vertical-align: middle;
  border-radius: 3px;
}

#user-view {
  background: #ffffff;
  border: 5px solid #f1f1f1;
  padding: 0 30px 30px;
}
#user-view.w450 {
  width: 450px;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 20px;
}
#user-view .titWrap {
  padding: 30px 0;
  border-bottom: 1px solid #444;
  margin-bottom: 20px;
}
#user-view .titWrap > * {
  display: block;
  text-align: center;
  margin-top: 5px;
}
#user-view .titWrap > *:first-child {
  margin-top: 0;
}
#user-view .titWrap .tit {
  font-size: 16px;
  color: #111;
  font-weight: 300;
}
#user-view .titWrap .sbj {
  font-size: 18px;
  color: #333;
  letter-spacing: -0.05em;
  line-height: 1.4em;
}
#user-view .titWrap2 {
  padding: 30px 0;
  border-bottom: 1px solid #444;
  margin-bottom: 20px;
}
#user-view .titWrap2:after {
  display: block;
  clear: both;
  content: "";
}
#user-view .titWrap2 > * {
  float: left;
}
#user-view .titWrap2 .lef {
  width: 40%;
}
#user-view .titWrap2 .rig {
  width: calc(60% - 20px);
  margin-left: 20px;
}
#user-view .titWrap2 .sbj {
  display: block;
  margin-bottom: 10px;
  padding: 20px;
  background: #f1f1f1;
  font-size: 18px;
  color: #333;
  letter-spacing: -0.05em;
  line-height: 1.4em;
  text-align: center;
}
#user-view .titWrap2 .btn1 {
  width: 100%;
  text-align: center;
}
#user-view .user-tbl1 tr > * {
  text-align: left;
  padding-left: 20px;
  border-top: 1px solid #fff;
}
#user-view .user-tbl1 tr:first-child > * {
  border-top: 1px solid #ccc;
}
#user-view .user-tbl1 tr th {
  background: #f1f1f1;
}
#user-view .memoWrap {
  font-size: 15px;
  color: #444;
  line-height: 1.6em;
}
#user-view .btn3.big {
  width: 200px;
  background: url("../images/main/btn-bg.jpg") repeat-y center center;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0);
  text-decoration: none;
}

#user-view.type1 .titWrap {
  border-bottom: 0;
  padding-bottom: 0;
}
#user-view.type1 .titWrap .sbj {
  font-size: 32px;
  color: #222222;
  font-family: "paybooc-Bold";
  font-weight: 600;
  text-align: center;
}

#mp-form .user-tbl2 tr > * {
  text-align: left;
}
#mp-form select {
  height: 30px;
  border: 1px solid #ddd;
  padding: 5px;
  vertical-align: middle;
  box-sizing: border-box;
}
#mp-form .inp {
  height: 30px;
  border: 1px solid #ddd;
  padding: 5px;
  vertical-align: middle;
  box-sizing: border-box;
}
#mp-form.w400 {
  width: 400px;
  margin: 0 auto;
  background: #fff;
}
#mp-form.w400.user-tbl1 {
  background: #f1f1f1;
}
#mp-form.w400 .btn1.w100 {
  width: 100%;
}
#mp-form.w400 .inp {
  width: 100%;
}
#mp-form .chkArea2 {
  margin: 20px 0;
}
#mp-form .chkArea2 label,
#mp-form .chkArea2 label span,
#mp-form .chkArea2 a {
  font-size: 13px;
}
#mp-form .chkArea2 a {
  color: #111;
}

#mp-form.type1 {
  width: 450px;
}
#mp-form.type1 legend {
  display: none;
}
#mp-form.type1 .tbl-wrap {
  border: 1px solid #ddd;
  border-radius: 20px;
  overflow: hidden;
  padding: 50px;
}
#mp-form.type1 .tit {
  margin: 50px 0 30px;
  border-top: 0;
  padding-top: 0;
  font-size: 32px;
  color: #222222;
  font-family: "paybooc-Light";
  font-weight: 300;
  text-align: center;
}
#mp-form.type1 .tit strong {
  font-size: 32px;
  color: #222222;
  font-family: "paybooc-Bold";
  font-weight: 600;
}
#mp-form.type1 .tit p {
  margin-top: 15px;
  font-size: 16px;
  color: #888888;
  letter-spacing: -0.05em;
  font-weight: normal;
}
#mp-form.type1 .user-tbl1 {
  border: 0;
}
#mp-form.type1 .user-tbl1 caption {
  display: none;
}
#mp-form.type1 .user-tbl1 tr:first-child > * {
  padding-top: 0;
}
#mp-form.type1 .user-tbl1 tr:last-child > * {
  padding-bottom: 0;
}
#mp-form.type1 .user-tbl1 tr > * {
  text-align: left;
  padding: 0;
  height: 45px;
}
#mp-form.type1 .user-tbl1 tr th {
  font-size: 17px;
  color: #333333;
  font-weight: 300;
}
#mp-form.type1 .user-tbl1 tr td strong {
  display: block;
  border-bottom: 1px solid #ddd;
  color: #222222;
  font-weight: 600;
  height: 45px;
  line-height: 45px;
}
#mp-form.type1 .user-tbl1 .inp {
  background: #f8f8f8;
  height: 45px;
  padding: 10px;
  border-radius: 5px;
}
#mp-form.type1 .btn3 {
  width: 200px;
  background: url("../images/main/btn-bg.jpg") repeat-y center center;
  color: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0);
  text-decoration: none;
}

.txtSmall {
  font-size: 13px;
  letter-spacing: -0.05em;
  line-height: 1.6em;
  vertical-align: middle;
}

/**************************
	Search
**************************/
#user-search {
  position: relative;
  margin-bottom: 20px;
  height: 30px;
}
#user-search .tit {
  font-size: 16px;
  letter-spacing: -1px;
  color: #333;
  font-weight: bold;
  line-height: 40px;
}
#user-search .tit i {
  margin-right: 5px;
}
#user-search fieldset {
  position: absolute;
  top: 0;
  left: 0;
  font-family: empty;
  font-size: 0;
}
#user-search fieldset.no-abs {
  position: static;
  text-align: center;
  padding: 10px 0;
}
#user-search fieldset > * {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle;
  height: 30px;
  box-sizing: border-box;
}
#user-search legend {
  display: none;
}
#user-search .where {
  border: 1px solid #dddddd;
  border-top-color: #ddd;
  border-left-color: #ddd;
  width: 130px;
  overflow: hidden;
  background: url(/superboard/images/sb_slt_spr.jpg) no-repeat 92% center;
  margin-right: 5px;
}
#user-search .where select {
  width: 130%;
  height: 30px;
  border: none;
  background: none;
  padding-left: 10px;
  font-size: 12px;
  color: #333333;
}
#user-search .inp {
  position: relative;
  border-top-color: #ddd;
  border-left-color: #ddd;
  padding-right: 80px;
  margin-left: 5px;
}
#user-search .inp .keyword {
  width: calc(100% - 80px);
  border: 1px solid #dddddd;
  background: none;
  height: 30px;
  font-size: 12px;
  padding-left: 15px;
}
#user-search .inp .sbm {
  width: 77px;
  display: inline-block;
  background: #ffa506;
  border: 1px solid #ffa506;
  color: #fff !important;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  font-size: 13px;
  box-sizing: border-box;
  border-radius: 3px;
}

/**************************
	Button
**************************/
#user-footer {
  position: relative;
  margin-top: 30px;
  min-height: 35px;
}
#user-footer .left {
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  width: 50%;
  z-index: 2;
}
#user-footer .center {
  text-align: center;
}
#user-footer .right {
  text-align: right;
}
#user-footer .btn1.big,
#user-footer .btn2.big {
  width: 190px;
}

.sb-no-data {
  display: block;
  background: #f7f7f7;
  padding: 20px 10px;
  text-align: center;
  font-size: 14px;
  letter-spacing: -1px;
  color: #999;
}

.pub-info {
  border: 5px solid #f1f1f1;
  background: #fcfcfc;
  padding: 10px;
  margin: 80px 0 20px;
  text-align: center;
  font-size: 13px;
  color: red;
  line-height: 1.6em;
  letter-spacing: -0.05em;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
.pub-info:after {
  display: block;
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border: 1px solid red;
  box-sizing: border-box;
  opacity: 0.4;
  z-index: -1;
}
.pub-info em {
  font-style: normal;
  display: block;
  font-size: 11px;
  color: #111;
  font-weight: 600;
}
.pub-info i {
  border: 2px solid #ddd;
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin: 0 auto;
  display: block;
  font-size: 12px;
  color: #7a7a7a;
  font-weight: 600;
  border-radius: 50%;
}
.pub-info mark {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  color: #fff;
  padding: 0 10px;
  opacity: 0;
}
.pub-info:hover mark {
  opacity: 1;
}
.new-icon {
  position:absolute;
  top:12px;
  left:9px;
  line-height: normal;
}

/*22년 5월 4일 요금결제 페이지 수정 CSS*/

.mt_80 {
  margin-top:80px;
}
.mt_40 {
  margin-top:-40px;
}
.mt_20 {
  margin-top:-20px;
}
.mt50 {
  margin-top:-50px;
}
.mt40 {
  margin-top:40px;
}
.con_txt {
  padding: 30px;
  font-size: 16px;
  background-color:#f1f1f1;
}
.con_txt p {
  font-size:16px;
}

/*22년 6월 8일 메인페이지 클라이언트 섹션 추가 */

.mclient-wrap {
  background-color: #fff;
  padding: 20px 0 100px;
}
.mclient-wrap .inner {
  /* width: 1200px; */
  background-color: #fff;
  margin: 0 auto;
}
.mclient-wrap .mtit {
  margin-bottom: 80px;
  margin-top:50px;
}
.mclient-wrap .mtit h3 {
  font-family: "paybooc-Bold";
  font-weight: 600;
}
.mclient-wrap .mtit p {
  font-size: 17px;
}
.mclient-wrap .inner .mclient-box {
  margin: 0 auto;
  text-align: center;
  width:980px;
  margin-top:60px;
}
.mclient-wrap .inner .mclient-box:after {
  display: block;
  clear: both;
  content: "";
}
.mclient-wrap .inner .mclient-box .mclient-logo {
  height:40px;
  float: left;
  margin:20px 90px 20px 0px;
  opacity: 0.8;
}
.mclient-wrap .inner .mclient-box .mclient-logo:nth-child(1) {
  margin-right:100px;
}
.mclient-wrap .inner .mclient-box .mclient-logo:nth-child(4n) {
  margin-right:0px;
}
.mclient-wrap .inner .mclient-box .mclient-logo img {
  height:100%;
}

/*2022월 9월 14일 요금/결제 페이지 분산서버 안내 이미지 추가*/
.con3_server_img {
  width:100%;

}
.con3_server_img > img {
  width:100%;
}

/* 
.monday-cs-iframe {
  width:1000px;
  height:1500px;
  margin:0 auto !important;
} */
.monday-cs-iframe iframe {
  margin:0 auto !important;
  width: 100%;
}


.serviceview-wrap {
  background-color: #fff;
  padding: 30px 0 10px;
  position:relative;
}
.serviceview-wrap .inner {
  /* width: 1200px; */
  background-color: #fff;
  margin: 0 auto;
  border-radius:10px;
  width:1200px;
  height:150px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.12);
  margin-top:-95px;
  overflow: hidden;
  border:3px solid #137546;
}
.serviceview-wrap .inner {
  position:relative;
}
.serviceview-wrap .inner .preview-img {
  width:200px;
  position:absolute;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
}
.serviceview-wrap .inner .preview-img.two {
  top:0px;
  left:80px;
}
.serviceview-wrap .inner .preview-img.one {
  top:40px;
  left:190px;
}
.serviceview-wrap .inner .preview-img img {
  width:100%;
}
.serviceview-wrap .inner .preview-txt {
  margin-left:480px;
  margin-top:35px;
}
.serviceview-wrap .inner .preview-txt:after {
  clear: both;
  content:"";
  display: block;
}
.serviceview-wrap .inner .preview-txt div {
  float: left;
}
.serviceview-wrap .inner .preview-txt h4 {
  font-size:28px;
  color:#222;
}
.serviceview-wrap .inner .preview-txt p {
  font-size:16px;
  margin-top:10px;
}
.serviceview-wrap .inner .preview-txt .btn3 {
  width:150px;
  border-radius: 10px;
  background-color: #137546;
  color:#fff !important;
  margin-top:15px;
  margin-left:45px;
}

/****************************메인페이지(23.01.18 현지) **************************/
/* main_banner */
#main_banner {
    padding: 120px 18% 200px;
    background-color: #f2f4f6;
    position: relative;
}
#main_banner .banner_tit {
    color: #000;
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 30px;
}
#main_banner .banner_tit strong {
    display: block;
    color: #137546;
}
#main_banner .banner_desc {
    font-size: 18px;
    font-weight: 200;
    line-height: 1.9;
    color: #222;
    word-break: keep-all;
    margin-bottom: 30px;
    letter-spacing: -0.015em;
}
#main_banner .banner_text .btn3 {
    width: auto;
    height: auto;
    border-radius: 10px;
    padding: 15px 40px;
    line-height: 1;
    transition: all .3s;
    border: 1px solid #137546;
}
#main_banner .banner_text .btn3:hover {
    border: 1px solid #22c576;
    background-image: linear-gradient(90deg, #137546, #22c576);
}
#main_banner img {
    width: 100%;
    max-width: 800px;
    object-fit: contain;
    position: absolute;
    right: 10%;
    bottom: -7px;
}

/* main_plan */
#main_plan {
    padding: 120px 0 200px;
    background-color: #0c2239;
}
#main_plan .plan_sub_tit {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}
#main_plan .plan_tit {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
}
#main_plan .plan_box {
    width: 40%;
    min-width: 600px;
    padding: 50px 100px;
    margin: 0 auto 80px;
    background: #fff;
    border-radius: 20px;
    text-align: right;
    box-sizing: border-box;
}
#main_plan .plan_box .tit {
    text-align: left;
    font-size: 20px;
    font-weight: 700;
    color: #999;
    margin-bottom: 30px;
    line-height: 1.6;
}
#main_plan .plan_box .tit strong {
    display: block;
    color: #000;
    font-size: 32px;
}
#main_plan .plan_box .desc {
    text-align: left;
    padding-bottom: 30px;
    border-bottom: 1px solid #999;
    margin-bottom: 50px;
}
#main_plan .plan_box .desc li {
    font-size: 18px;
    line-height: 1.9;
    padding-left: 30px;
    margin: 5px 0;
    position: relative;
}
#main_plan .plan_box .desc li::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    position: absolute;
    left: 0;
    top: 5px;
}
#main_plan .plan_box .desc li span {
    display: block;
    font-size: 13px;
    line-height: 1;
}
#main_plan .plan_box span a {
    vertical-align: middle;
}
#main_plan .plan_box span a:hover {
    color: red;
    text-decoration: none;
}
#main_plan .plan_box > a {
    padding: 10px 60px 10px 30px;
    border-radius: 10px;
    font-weight: 300;
    font-size: 16px;
    color: #fff;
    background-color: #137546;
    position: relative;
    transition: all .3s;
    border: 1px solid #137546;
}
#main_plan .plan_box > a:hover {
    text-decoration: none;
    color: #137546;
    background-color: #fff;
}
#main_plan .plan_box > a::after {
    content: '→';
    width: 20px;
    height: 20px;
    font-size: 20px;
    font-weight: 900;
    /* background-size: contain; */
    /* background-image: url("data:image/svg+xml,%0A%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_42_11359)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M50.4902 86.6658L100 50.1569L50.4902 13.6479V35H0V65H50.4902V86.6658Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_42_11359'%3E%3Crect width='100' height='100' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); */
    position: absolute;
    /* top: 12px; */
    top: 6px;
    right: 30px;
}
#main_plan .plan_desc {
    text-align: center;
    font-size: 20px;
    color: #fff;
    line-height: 1.9;
    letter-spacing: -0.015em;
}

/* preview */
.preview {
    width: 70%;
    max-width: 1150px;
    border-radius: 10px;
    border: 3px solid #137546;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 12%);
    background-color: #fff;
    padding: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transform: translateY(-50%);
    overflow: hidden;
    position: relative;
}
.preview  img {
    width: 200px;
    object-fit: contain;
    position: absolute;
}
.preview  img.img1 {left: 13%;bottom: 0;z-index: 1;}
.preview  img.img2 {left: 5%;top: 0;}
.preview .desc {
    width: 45%;
}
.preview .desc h4 {
    color: #333;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}
.preview .desc p {
    font-size: 16px;
    font-weight: 200;
    color: #666;
}
.preview a {
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    padding: 15px 30px;
    border-radius: 10px;
    background: #137546;
    border: 1px solid #137546;
    transition: all .3s;
}
.preview a:hover {
    text-decoration: none;
    color: #137546;
    background: #fff;
}

/* why_mymailer */
#why_mymailer {
    padding-top: 40px;
    text-align: center;
    font-weight: 700;
}
#why_mymailer h3,
#why_mymailer h4 {
    text-align: center;
}
#why_mymailer .why_title {
    font-size: 48px;
    color: #137546;
}
#why_mymailer article {
    padding: 150px 0;
}
#why_mymailer article:nth-child(odd) {
    background: #f8f8f8;
}
#why_mymailer .why_num {
    font-size: 26px;
    color: #999;
    margin-bottom: 20px;
}
#why_mymailer .why_tit {
    font-size: 30px;
    color: #000;
    margin-bottom: 10px;
}
#why_mymailer .why_subtit {
    font-size: 22px;
    color: #666;
    margin-bottom: 80px;
}
#why_mymailer .why_wrap {
    width: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}
#why_mymailer .why_wrap img {
    width: 45%;
    height: 270px;
    object-fit: contain;
}
#why_mymailer .why_wrap ul {
    width: 45%;
}
#why_mymailer .why_wrap ul li {
    text-align: left;
    font-size: 20px;
    line-height: 1.9;
    font-weight: 300;
    word-break: keep-all;
    margin-bottom: 30px;
    padding-left: 45px;
    position: relative;
}
#why_mymailer .why04 li:last-child {margin-top: 70px;}
#why_mymailer .why_wrap ul li::before {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    padding: 3px 10px 3px;
    background: #137546;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 8px;
}
#why_mymailer .why_wrap ul li:first-child::before {content: '1';}
#why_mymailer .why_wrap ul li:nth-child(2)::before {content: '2';}
#why_mymailer .why_wrap ul li:last-child::before {content: '3';}
#why_mymailer .why04 li:last-child::after {
    content: '출시예정';
    padding: 1px 15px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #8e44ad;
    box-shadow: 2px 3px 3px #0004;
    border-radius: 5px;
    position: absolute;
    top: -30px;
    left: 45px;
}
#why_mymailer .why_wrap ul li span {
    font-size: 14px;
    display: block;
}

/* main_customer */
#main_customer {
    padding: 50px 0;
}
#main_customer .customer_wrap {
    width: 68%;
    height: 100px;
    margin: 0 auto;
    /* background: #ddd; */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
}
#main_customer .img_wrap {
    display: flex;
    flex-wrap: nowrap;
}
#main_customer .img_wrap span {
    width: 250px;
    margin-right: 50px;
    text-align: center;
    line-height: 100px;
}
/* #main_customer .img_wrap span:last-child {margin-right: 0;} */
#main_customer .img_wrap img {
    width: 100%;
    object-fit: contain;
}

/* main_exp */
#main_exp {
    padding: 100px 0;
    text-align: center;
    background: #137546;
}
#main_exp h3 {
    text-align: center;
    font-size: 35px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 65px;
}
#main_exp a {
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    transition: all .3s;
    margin: 5px;
}
#main_exp a:hover {
    text-decoration: none;
    background: #fff;
    color: #137546;
}
#main_exp p {
    font-size: 14px;
    color: #ddd;
    margin-top: 10px;
}

/* 티커 애니메이션 */
.ticker {
    white-space: nowrap;
    transform: translateX(0);
    animation: ticker 100s linear infinite;
}
.customer_wrap:hover .ticker{
    animation-play-state: paused;
}
@keyframes ticker {0% {transform: translateX(0);} 100% {transform: translateX(-100%);}}

/****************************미리보기 페이지(23.01.26 현지) ********************************************************************************/
/* common */
a.btn7 {
  display: inline-block;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  background-color: #137546;
  border: 1px solid #fff0;
  border-radius: 10px;
  transition: all .3s;
}
a.btn7:hover {
  text-decoration: none;
  background: #fff;
  color: #137546;
  border-color: #137546;
}
.flex_wrap_sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  max-width: 1100px;
}
#preview_wrap section {
  padding: 80px 0;
  text-align: center;
}
#preview_wrap section.bg_gray {
  background-color: #f8f8f8;
}
#preview_wrap .keyword {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  background-color: #093A5A;
  border-radius: 5px;
  padding: 5px 20px 6px;
  box-shadow: 6px 6px 4px #0002;
  margin-bottom: 20px;
}
#preview_wrap .tit {
  font-size: 35px;
  font-weight: blod;
  color: #000;
  text-align: center;
  margin-bottom: 100px;
}
#preview_wrap .desc {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 30px;
}
#preview_wrap .show_list {
  width: 35%;
}
#preview_wrap .show_list li {
  text-align: left;
  border: 2px solid #fff0;
  border-radius: 10px;
  padding: 15px 10px 15px 65px;
  margin: 20px 0;
  font-size: 18px;
  color: #999;
  transition: all .3s;
  user-select: none;
  background-size: 22px;
  background-position: 20px center;
  background-repeat: no-repeat;
}
#preview_wrap .show_list li.active,
#preview_wrap .show_list li:hover {
  color: #137546;
  border-color: #137546;
  background-color: #fff;
}
#preview_wrap .img_wrap {
  width: 57%;
  height: 440px;
}
#preview_wrap .img_wrap img {
  width: 100%;
  object-fit: contain;
  display: none;
}
#preview_wrap .img_wrap img.active {
  display: block;
}

/* title_sec */
#title_sec {
  text-align: center;
  padding-top: 60px !important;
  height: 60vh;
}
#title_sec .title {
  text-align: center;
  font-size: 40px;
  font-weight: blod;
  color: #000;
  margin-bottom: 10px;
}
#title_sec .desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* previewImg */
#previewImg {
  width: 90%;
  max-width: 1000px;
  margin: -40px auto -300px;
  overflow: hidden;
  border-radius: 20px;
  transform: translateY(-60%);
}
#previewImg img {
  width: 100%;
  object-fit: contain;
}
#previewImg2 {
  display: none;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 50px;
  overflow: hidden;
  border-radius: 20px;
}
#previewImg2 img {
  width: 100%;
  object-fit: contain;
}

/* mail_many */
#mail_many .show_list li:nth-child(1) {background-image: url(../images/previewPage/icon_mail.png);}
#mail_many .show_list li:nth-child(2) {background-image: url(../images/previewPage/icon_mailopen.png);}
#mail_many .show_list li:nth-child(3) {background-image: url(../images/previewPage/icon_alertT.png);}
#mail_many .show_list li:nth-child(4) {background-image: url(../images/previewPage/icon_clip.png);}
#mail_many .show_list li:nth-child(5) {background-image: url(../images/previewPage/icon_checkbox.png);}
#mail_many .show_list li:nth-child(1):hover {background-image: url(../images/previewPage/icon_mail2.png);}
#mail_many .show_list li:nth-child(2):hover {background-image: url(../images/previewPage/icon_mailopen2.png);}
#mail_many .show_list li:nth-child(3):hover {background-image: url(../images/previewPage/icon_alertT2.png);}
#mail_many .show_list li:nth-child(4):hover {background-image: url(../images/previewPage/icon_clip2.png);}
#mail_many .show_list li:nth-child(5):hover {background-image: url(../images/previewPage/icon_checkbox2.png);}

/* icon_sec */
#icon_sec {padding: 50px 0 !important;}
#icon_sec .flex_wrap_sb {
  max-width: 1100px;
  margin-bottom: 50px;
}
#icon_sec a {
  width: 150px;
  font-size: 17px;
  font-weight: 600;
  color: #666;
  text-decoration: none;
  transition: all 0.3s;
}
#icon_sec a:hover {
  color: #137546;
  transform: scale(1.1);
}
#icon_sec a > img {
  display: inline-block;
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 20px;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #fff;
  transition: all .5s;
}
#icon_sec a:hover > img {
  box-shadow: 2px 5px 8px #0002;
}

/* mail_address */
#mail_address {
	padding-bottom: 120px !important;
}
#mail_address article {
  width: 30%;
}
#mail_address article > img {
  width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
}
#mail_address article > h4 {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  color: #000;
  margin-bottom: 20px;
}
#mail_address article > p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 30px;
  min-height: 80px;
}

/* mail_chart */
#mail_chart .show_list li:nth-child(1) {background-image: url(../images/previewPage/icon_mailcheck.png);}
#mail_chart .show_list li:nth-child(2) {background-image: url(../images/previewPage/icon_link.png);}
#mail_chart .show_list li:nth-child(3) {background-image: url(../images/previewPage/icon_chart.png);}
#mail_chart .show_list li:nth-child(4) {background-image: url(../images/previewPage/icon_alert.png);}
#mail_chart .show_list li:nth-child(5) {background-image: url(../images/previewPage/icon_download.png);}
#mail_chart .show_list li:nth-child(1):hover {background-image: url(../images/previewPage/icon_mailcheck2.png);}
#mail_chart .show_list li:nth-child(2):hover {background-image: url(../images/previewPage/icon_link2.png);}
#mail_chart .show_list li:nth-child(3):hover {background-image: url(../images/previewPage/icon_chart2.png);}
#mail_chart .show_list li:nth-child(4):hover {background-image: url(../images/previewPage/icon_alert2.png);}
#mail_chart .show_list li:nth-child(5):hover {background-image: url(../images/previewPage/icon_download2.png);}

/* mail_api */
#mail_api .flex_wrap_sb {
  width: 65%;
  max-width: none;
}
#mail_api .flex_wrap_sb img {
  width: 50%;
  object-fit: contain;
}
#mail_api .right {
	width: 50%;
  	text-align: center;
}
#mail_api .right ul {
  display: inline-block;
  margin-bottom: 50px;
}
#mail_api .right ul li {
	text-align: left;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  padding-left: 30px;
  margin: 15px 0;
  position: relative;
}
#mail_api .right ul li::before {
  content: '';
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 5px;
}
#mail_api .btn_wrap a {
  margin: 10px;
  width: 170px;
}

/* mail_smtp */
#mail_smtp {
	padding-bottom: 120px !important;
}
#mail_smtp .tit {
  margin-bottom: 20px;
}
#mail_smtp ul {
  display: inline-block;
  margin-bottom: 20px;
}
#mail_smtp ul li {
  text-align: left;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  padding-left: 30px;
  margin: 15px 0;
  position: relative;
}
#mail_smtp ul li::before {
  content: '';
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 5px;
}
#mail_smtp > a {
  display: block;
  margin: 0 auto;
  margin-bottom: 100px;
}
#mail_smtp .flex_wrap_sb {
  min-width: 1200px;
}
#mail_smtp span {
  width: 180px;
  height: 180px;
  line-height: 180px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  box-shadow: 3px 6px 4px #0001;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
#mail_smtp span:nth-child(1){background-image: url(../images/previewPage/icon_outlook.png);}
#mail_smtp span:nth-child(2){background-image: url(../images/previewPage/icon_gmail.png);}
#mail_smtp span:nth-child(3){background-image: url(../images/previewPage/icon_cafe24.png);}
#mail_smtp span:nth-child(4){background-image: url(../images/previewPage/icon_crm.png);}
#mail_smtp span:nth-child(5){background-image: url(../images/previewPage/icon_erp.png);}

/* mail_pdf */
#mail_pdf .tit {
  margin-bottom: 20px;
}
#mail_pdf .step {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  max-width: 1000px;
  margin-bottom: 80px;
  margin-top: 60px;
}
#mail_pdf .step li {
  width: 22%;
  padding: 10px 20px;
  color: #999;
  border: 2px solid #999;
  border-radius: 10px;
  background-color: #eee;
  box-sizing: border-box;
  transition: all .5s;
  cursor: pointer;
}
#mail_pdf .step li.active {
  border: 2px solid #137546;
  background-color: #137546;
  color: #fff;
}
#mail_pdf .step li::after {
  content: '';
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: -16%;
  top: 12px;
}
#mail_pdf .step li:last-child::after{
  display: none;
}
#mail_pdf .img_wrap {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  height: auto;
}
#mail_pdf .img_wrap > div {
  display: none;
  opacity: 0;
  transform: translateX(20px);
}
#mail_pdf .img_wrap > div.active {
  display: block;
  animation: fade 4s ease-in-out forwards;
}
#mail_pdf .img_wrap img {
  display: block;
  width: 100%;
  object-fit: contain;
  margin-bottom: 30px;
}
#mail_pdf .img_wrap .desc {
  display: flex;
  color: #000;
  padding: 30px;
  border-radius: 10px;
  background-color: #efefef;
  min-height: 125px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center
}
@keyframes fade {
 	0% {opacity: 0; transform: translateX(20px);}
  	25% {opacity: 1; transform: translateX(0px);}
  	90% {opacity: 1; transform: translateX(0px);}
  	100% {opacity: 0; transform: translateX(-20px);}
}
@keyframes fade2 {
  0% {opacity: 0; transform: translateX(20px);}
  25% {opacity: 1; transform: translateX(0px);}
  100% {opacity: 1; transform: translateX(0px);}
}

/* 기능비교 2023.02.03 */
.compareChart {
  width: 90%;
  max-width: 1200px;
  margin: 80px auto 0;
}
.compareChart table {
  width: 100%;
  /* border: 1px solid #178843; */
}
.compareChart tr th {
  font-size: 20px;
  /* background: #178843; */
  /* color: #fff; */
  color: #178843;
  border-bottom: 3px solid #178843;
  padding: 15px 0;
}
.compareChart tr td {
  font-size: 16px;
  background-color: #fff;
  color: #000;
  text-align: center;
  padding: 15px 0;
  border-right: 1px solid #9ddab4;
}
.compareChart tr td:last-child {border: 0;}
.compareChart tr:nth-child(even) td {
    background-color: #f3f3f3;
}
.compareChart tr td:first-child {
  text-align: left;
  padding-left: 2%;
  text-decoration: underline dashed 1px;
  text-underline-offset: 4px;
}
.comY {background-image: url("data:image/svg+xml,%0A%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 21.8076L20.5932 37.3902L45 13' stroke='%230A897B' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.comN {background-image: url("data:image/svg+xml,%0A%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 40L25 25M40 10L25 25M25 25L40 40M25 25L10 10' stroke='%23E6331E' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.comM {background-image: url("data:image/svg+xml,%0A%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.5 10L8 39.2857H43L25.5 10Z' stroke='%23FDA023' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.comY,
.comN,
.comM {
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center center;
}
.compareChart_info {
    width: 90%;
    max-width: 1200px;
    padding: 30px;
    margin: 20px auto 0;
    background-color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
}
.compareChart_info > ul {
  display: flex;
}
.compareChart_info li {
  margin: 10px;
}
.compareChart_info > div,
.compareChart_info li span {
  font-size: 18px;
}
.compareChart_info li span {
  background-position: left center;
  padding-left: 35px;
}

.chartFlip {
  height: 570px;
  overflow: hidden;
  position: relative;
}
.chartFlip::after {
  content: '';
  width: 100%;
  height: 300px;
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, #fff0 0%, #fff 100%);
}
.chartFlip_btn {
  display: none;
  font-size: 20px !important;
  color: #666 !important;
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 1;
}
.chartFlip_btn:hover {
  text-decoration: underline solid 1px;
  text-underline-offset: 3px;
}
.chartFlip .chartFlip_btn {display: block;}
.chart_down_btn {
	display: none;
	width: 90%;
	margin: 30px auto 0;
	text-align: center;
}
.chart_down_btn a {display: block;width: 100%;}
.chart_down_btn button {
	width: 100%;
	padding: 15px;
	border-radius: 10px;
	font-size: 14px;
	color: #137546;
	font-weight: 300;
	background-color: #fff;
	transition: all .3s;
	border: 2px solid #137546;
}
.chart_down_btn a:hover button {
	background-color: #137546;
	color: #fff;
}
#main_plan .chart_down_btn button {border: 0;}
#main_plan .compareChart tr td {background-color: #0c2239;color: #fff; border-right: 0;}
#main_plan .compareChart tr:nth-child(even) td {background-color: #0a325a;}
#main_plan .chartFlip::after {background: linear-gradient(180deg, #fff0 0%, #0c2239 100%);}
#main_plan .chartFlip_btn {color: #fff !important;}
#main_plan .compareChart tr th {color: #fff; border-color: #fff;}

/********************************* 23.02.22 payment cont2 견적서 다운로드 기능 추가(HJ) *******************************/
#estimate_popup {
  display: none;
  position: relative;;
  width: 100%;
  max-width: 1000px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 30px #0008;
}
#estimate_popup.inPopup {
  display: block;
  width: 100%;
  box-shadow: none;
}
#est_show_btn {cursor: pointer;}
.estimate.stit {position: relative;}
.estimate.stit #est_show_btn {
  line-height: 33px;
  transform: translateY(-50%);
  border-radius: 10px;
  position: absolute;
  top: 50%;
  right: 0;
  transition: all .2s;
}
.estimate.stit #est_show_btn:hover {
  background-color: #fff;
  color: #333 !important;
}
#estimate_popup .est_btn {
  font-size: 16px;
  font-weight: 300;
  padding: 5px 10px 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #666;
  position: absolute;
  top: 10px;
  cursor: pointer;
  transition: all .1s;
}
#estimate_popup .est_btn:hover {background: #137546;color: #fff;}
#estimate_popup .est_close_btn {right: 10px;}
#estimate_popup .est_down_btn {right: 70px;}
#estimate_popup #wrap {
  width: 1000px;
  margin: 0 auto;
  border: 1px solid #999;
  padding: 50px;
  box-sizing: border-box;
  background-color: #fff;
}
/* header */
#estimate_popup .header {margin-bottom: 30px;}
#estimate_popup h1 {
  color: #000;
  font-size: 40px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 30px;
}
#estimate_popup .client {
  list-style: none;
}
#estimate_popup .client li {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
}
#estimate_popup li input,
#estimate_popup td > input {
    color: #000;
    border: 0;
    font-size: 16px;
    width: auto;
}
#estimate_popup strong {
  color: #000;
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px;
  line-height: 1.6;
}
#estimate_popup .tWrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 20px;
  position: relative;
}
#estimate_popup .aife {
  align-items: flex-end;
}
#estimate_popup .aife div {
  color: #000;
  text-align: right;
  font-size: 14px;
  font-weight: normal;
}
#estimate_popup .aife img {
  object-fit: contain;
  width: 200px;
}
#estimate_popup .info span {
  font-size: 14px;
  color: #999;
}
#estimate_popup .info tr td {
  color: #000;
  font-size: 16px;
  vertical-align: top;
}
#estimate_popup .info tr td:first-child {padding-right: 20px;}
#estimate_popup .info textarea {
  color: #000;
  font-size: 16px;
  border: 0;
  resize: none;
}
#estimate_popup .compInfo {
  border-collapse: collapse;
}
#estimate_popup #ingam {
  width: 70px;
  height: 70px;
  object-fit: contain;
  object-position: center center;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  right: 0;

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-touch-callout:none;
}
#estimate_popup .compInfo tr td {
  color: #000;
  border: 1px solid #ccc;
  padding: 1px 10px;
}
#estimate_popup .compInfo tr td:first-child {text-align: center; background-color: #f9f9f9;}

/* main */
#estimate_popup .main {
  margin-bottom: 120px;
  text-align: right;
}
#estimate_popup .main table {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
#estimate_popup .main th {
  background-color: #eee;
}
#estimate_popup .main table,
#estimate_popup .main td,
#estimate_popup .main th {
  padding: 10px;
  border: 1px solid #999;
  border-collapse: collapse;
}
#estimate_popup .main td:nth-child(2) {text-align: left;padding-left: 30px;}
#estimate_popup .subinfo {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 5px;
}
#estimate_popup #discount_desc {
  display: none;
  color: red;
}
#estimate_popup .result {
  display: inline-block;
  width: 30%;
  background-color: #f9f9f9;
  padding: 20px;
  margin-top: 30px;
}
#estimate_popup .result h4 {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
}
#estimate_popup .result h4 span {
  font-size: 16px;
  font-weight: normal;
  color: #666;
}
#estimate_popup .result > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#estimate_popup .result > div > div {
  font-size: 16px;
}
#estimate_popup .result > div > div span {
  font-size: 14px;
  font-weight: 300;
  color: #666;
}

/* footer */
#estimate_popup .footer {
  padding: 30px;
  border-radius: 20px;
  background-color: #f9f9f9;
}
#estimate_popup .footer h3 {
  color: #333;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  position: relative;
}
#estimate_popup .footer h3::after {
  content: '';
  width: 100%;
  height: 12px;
  border-radius: 5px;
  background-color: rgba(255, 230, 2, 0.2);
  position: absolute;
  left: 0;
  bottom: 3px;
}
#estimate_popup ol {
  padding-left: 10px;
}
#estimate_popup .footer li {
  font-size: 14px;
  font-weight: normal;
  word-break: keep-all;
  line-height: 1.4;
  margin-bottom: 5px;
}
#estimate_popup .noSetting {
  display: none !important;
}
#estimate_popup .hide {
  display: none !important;
}

/************************************** smtp 소개 랜딩페이지 (23.03.22 HJ) **********************************/
/* smtp_intro common */
#smtp_intro .wrap {
  max-width: 1100px;
  margin: 0 auto;
}
#smtp_intro .wrap.pd {
  padding: 80px 0 120px;
}
#smtp_intro .dfsb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
#smtp_intro .tit {
  color: #000;
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}
#smtp_intro .subtit {
  color: #666;
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  margin-bottom: 80px;
  line-height: 1.4;
}

/********************* main *************************************/
/* banner */
#smtp_intro #banner {
  width: 100%;
  height: 550px;
  background-color: #333;
  overflow: hidden;
}
#smtp_intro #banner .wrap {
  height: 100%;
}
#smtp_intro #banner .left {
  width: 100%;
  max-width: 552px;
}
#smtp_intro #banner .left span {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 20px;
  background: #A93CFF;
  border-radius: 10px;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
  margin-bottom: 25px;
}
#smtp_intro #banner .left .subtitle {
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
}
#smtp_intro #banner .left .title {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 20px;
}
#smtp_intro #banner .left .desc {
  color: #fff;
  font-size: 18px;
  line-height: 1.4;
}
#smtp_intro #banner .right {
  position: relative;
  width: 100%;
  max-width: 300px;
}
#smtp_intro #banner .right img {
  width: 100%;
  object-fit: contain;
}
#smtp_intro #banner .letters span {
  position: absolute;
  background-image: url(../images/landing/smtpIntro/img_smtp_letter.png);
  background-repeat: no-repeat;
  background-size: contain;
}
#smtp_intro #banner .letters span:first-child {
  width: 80px;
  height: 80px;
  bottom: -12%;
  left: -100%;
  transform: rotate(15deg);
  animation: move1 16s infinite ease-in-out;
}
#smtp_intro #banner .letters span:nth-child(2) {
  width: 50px;
  height: 50px;
  left: -20%;
  top: 0;
  transform: rotate(10deg);
  animation: move2 20s infinite ease-in-out;
}
#smtp_intro #banner .letters span:nth-child(3) {
  width: 40px;
  height: 40px;
  left: -10%;
  top: -11%;
  transform: rotate(-10deg);
  animation: move3 19s infinite ease-in-out;
}
#smtp_intro #banner .letters span:last-child {
  width: 80px;
  height: 80px;
  right: -40%;
  top: 20%;
  transform: rotate(-20deg);
  animation: move4 17s infinite ease-in-out;
}
@keyframes move1 {
  0%, 100% {transform: translateY(0) rotate(15deg);}
  30%, 70% {transform: translateY(10px) rotate(10deg);}
  15%, 45%, 85% {transform: translateY(-10px) rotate(16deg);}
}
@keyframes move2{
  0%, 100% {transform: translateY(0) rotate(10deg);}
  30%, 70% {transform: translateY(10px) rotate(11deg);}
  15%, 45%, 85% {transform: translateY(-10px) rotate(9deg);}
}
@keyframes move3 {
  0%, 100% {transform: translateY(0) rotate(-10deg);}
  30%, 70% {transform: translateY(10px) rotate(-11deg);}
  15%, 45%, 85% {transform: translateY(-10px) rotate(-7deg);}
}
@keyframes move4 {
  0%, 100% {transform: translateY(0) rotate(-20deg);}
  30%, 70% {transform: translateY(10px) rotate(-19deg);}
  15%, 45%, 85% {transform: translateY(-10px) rotate(-21deg);}
}

/* flow */
#smtp_intro #flow .dfsb {
  max-width: 950px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-around;
}
#smtp_intro #flow .card {
  width: 100%;
  max-width: 450px;
  height: 240px;
  border-radius: 20px;
  background-color: #f9f9f9;
  padding: 30px;
  margin-bottom: 30px;
  box-sizing: border-box;
}
#smtp_intro #flow .card img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 10px;
}
#smtp_intro #flow .card h4 {
  color: #000;
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 20px;
}
#smtp_intro #flow .card p {
  color: #666;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.4;
}

/* function */
#smtp_intro #function {
  width: 100%;
  background-color: #f9f9f9;
}
#smtp_intro #function .block {
  width: 100%;
  max-width: 320px;
}
#smtp_intro #function .block img {
  width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
}
#smtp_intro #function .block h4 {
  color: #000;
  font-size: 25px;
  font-weight: normal;
  margin-bottom: 10px;
}
#smtp_intro #function .block p {
  color: #666;
  font-size: 18px;
  line-height: 1.4;
  word-break: keep-all;
}

/* guide */
#smtp_intro #guide article {
  padding-bottom: 120px;
  border-bottom: 2px dashed #ddd;
  margin-bottom: 80px;
}
#smtp_intro #guide article:last-child {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
#smtp_intro #guide article .subtit {text-align: left;}
#smtp_intro #guide article h4 {
  color: #000;
  font-size: 35px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 80px;
}
#smtp_intro #guide .highlight {
  color: #000;
  font-size: 35px;
  font-weight: bold;
  line-height: 1.4;
  text-decoration: underline rgba(255, 208, 43, 0.5) 20px;
  text-underline-offset: -12px;
}
#smtp_intro #guide .text {
  width: 100%;
  max-width: 470px;
}
#smtp_intro #guide .text h5 {
  color: #000;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}
#smtp_intro #guide .text p {
  color: #666;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.4;
  margin-bottom: 50px;
  word-break: keep-all;
}
#smtp_intro #guide .text .detail_btn {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 50px 16px;
  background-color: #137546;
  border: 1px solid #137546;
  border-radius: 10px;
  text-decoration: none;
  transition: all .3s;
}
#smtp_intro #guide .text .detail_btn:hover {
  color: #137546;
  background-color: #fff;
}
#smtp_intro #guide img {
  width: 100%;
  max-width: 545px;
  object-fit: contain;
}

/* statistics */
#smtp_intro #statistics {
  width: 100%;
  background-color: #f9f9f9;
}
#smtp_intro #statistics article .subtit {text-align: left;}
#smtp_intro #statistics .text {
  width: 100%;
  max-width: 470px;
}
#smtp_intro #statistics .text span {
  display: inline-block;
  color: #000;
  font-size: 14px;
  font-weight: normal;
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #addcff;
  box-shadow: 2px 2px 5px #0002;
}
#smtp_intro #statistics .dfsb {margin-bottom: 80px;}
#smtp_intro #statistics article:last-child {margin-bottom: 0;}
#smtp_intro #statistics article:last-child span {
  background-color: #dfd0ff;
}
#smtp_intro #statistics .text h4 {
  color: #000;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}
#smtp_intro #statistics .text p {
  color: #666;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.4;
  margin-bottom: 50px;
  word-break: keep-all;
}
#smtp_intro #statistics img {
  width: 100%;
  max-width: 544px;
  object-fit: contain;
  border-radius: 30px;
}
/* #smtp_intro */
#smtp_intro .api-endbanner {
  background-color: #137546;
  text-align: center;
  padding:100px 0;
}
#smtp_intro .api-endbanner .bigtxt {
  margin:10px 0 50px 0;
  font-weight: bold;
  font-size: 30px;
  color: #fff;
  letter-spacing:-0.02em;
  line-height:42px;
}
#smtp_intro .api-endbanner .btnbox .api-btn {
  width:250px;
  height:60px;
  font-size:17px;
  font-weight:600;
  color: #fff;
  background-color: #137546;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
#smtp_intro .api-endbanner .btnbox .api-btn:hover {
  color:#137546;
  background-color: #fff;
}

#smtp_intro .api-endbanner .btnbox .api-btn:nth-child(1) {
  margin-right:20px;
}

/* soultion 2023.05.30 HJ ********************************************************************/
#main_customer.solution .customer_wrap {
  width: 100%;
}
#solutionWwrap {
  box-sizing: border-box;
}
#solutionWwrap li {
  display: list-item;
}
#solutionWwrap img {
  width: 100%;
  object-fit: contain;
}
#solutionWwrap .mt150 {margin-top: 150px;}
#solutionWwrap .mt80 {margin-top: 80px;}
#solutionWwrap .mt40 {margin-top: 40px;}

/* banner_top */
#solutionWwrap #banner_top {
  width: 100%;
  padding: 100px 1%;
  background: linear-gradient(180deg, #000516 -23%, #001A34 51.28%, #456257 114.12%);
}
#solutionWwrap #banner_top h2 {
  text-align: center;
  color: #fff;
  font-size: 38px;
  font-weight: bold;
  margin-bottom: 10px;
}
#solutionWwrap #banner_top div {
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: normal;
  word-break: keep-all;
}

/* contents_wrap */
#solutionWwrap .contents_wrap {
  width: 90%;
  padding: 50px 0;
  max-width: 1100px;
  margin: 0 auto;
}

/* intro_mymailer */
#solutionWwrap #intro_mymailer h3 {
  font-size: 32px;
  font-weight: bold;
  color: #000;
}
#solutionWwrap #intro_mymailer ul,
#solutionWwrap #intro_mymailer ul li {
  list-style: disc !important;
}
#solutionWwrap #intro_mymailer ol,
#solutionWwrap #intro_mymailer ol li {
  list-style: decimal !important;
}
#solutionWwrap #intro_mymailer ul,
#solutionWwrap #intro_mymailer ol {
  width: 100%;
  padding: 5%;
}
#solutionWwrap #intro_mymailer ul li,
#solutionWwrap #intro_mymailer ol li {
  word-break: break-all;
  line-height: 1.6;
  color: #666;
  font-size: 16px;
  margin: 10px 0;
}
#solutionWwrap .circle_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 5%;
}
#solutionWwrap .circle_wrap .circle {
  width: 30%;
  border-radius: 50%;
  object-fit: contain;
}

/* middle_mymailer */
#solutionWwrap #middle_mymailer .wrap {
  display: flex;
  justify-content: space-between;
}
#solutionWwrap #middle_mymailer .left {
  width: 46%;
}
#solutionWwrap #middle_mymailer .right {
  width: 48%;
}
#solutionWwrap #middle_mymailer .left h3 {
  font-size: 32px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}
#solutionWwrap #middle_mymailer .left p {
  word-break: break-all;
  line-height: 1.5;
  color: #666;
  font-size: 18px;
  font-weight: lighter;
}

/* advantage */
#solutionWwrap #advantage h3 {
  font-size: 32px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}
#solutionWwrap #advantage details summary {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 30px;
  background-color: #efefef;
  border-bottom: 5px solid #fff;
  user-select: none;
  outline: none;
  transition: all .3s;
}
#solutionWwrap #advantage details summary:hover,
#solutionWwrap #advantage details[open] summary {
  color: #fff;
  background-color: #2eca7a;
  border-bottom: 5px solid #efefef;
}
#solutionWwrap #advantage details ul {
  width: 100%;
  padding: 5%;
  list-style: none;
}
#solutionWwrap #advantage ul li {
  word-break: break-all;
  line-height: 1.6;
  color: #666;
  font-size: 16px;
  font-weight: lighter;
}

/* card_section */
#solutionWwrap #card_section {
  background-color: #333;
  padding: 50px 0;
}
#solutionWwrap #card_section .card_wrap {
  display: flex;
  justify-content: space-between;
}
#solutionWwrap #card_section .card {
  width: 48%;
  padding: 2%;
  border-radius: 20px;
  border: 1px solid #333;
  transition: all .3s;
  box-sizing: border-box;
}
#solutionWwrap #card_section .card:hover {
  border: 1px solid #fff;
}
#solutionWwrap #card_section .card h4 {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
#solutionWwrap #card_section .card .desc {
  color: #fff;
  font-size: 16px;
  font-weight: lighter;
  line-height: 1.6;
}
#solutionWwrap #card_section .card img {
  max-width: 60px;
  margin-bottom: 20px;
}

/* function */
#solutionWwrap #function h3 {
  font-size: 32px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}
#solutionWwrap #function details summary {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 30px;
  background-color: #efefef;
  border-bottom: 5px solid #fff;
  user-select: none;
  outline: none;
  transition: all .3s;
}
#solutionWwrap #function details summary:hover,
#solutionWwrap #function details[open] summary {
  color: #fff;
  background-color: #2eca7a;
  border-bottom: 5px solid #efefef;
}
#solutionWwrap #function details ul {
  width: 100%;
  padding: 5%;
  list-style: none;
}
#solutionWwrap #function ul li {
  word-break: break-all;
  line-height: 1.6;
  color: #666;
  font-size: 16px;
  font-weight: lighter;
}

/* dispertion 2023.05.31 HJ *****************************/
#dispertionWrap section {
  padding: 100px 0 80px;
}
#dispertionWrap .contents_wrap {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}
#dispertionWrap h3 {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #000;
  margin-bottom: 80px;
  word-break: keep-all;
  position: relative;
}
#dispertionWrap h3::after {
  position: absolute;
  content: '';
  width: 100px;
  height: 5px;
  background-color: #000;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}
#dispertionWrap .gray {
  background: #f5f5f5;
}
/* banner_top */
#dispertionWrap #banner_top {
  width: 100%;
  background: linear-gradient(180deg, #000516 -23%, #001A34 51.28%, #456257 114.12%);
}
#dispertionWrap #banner_top span {
  display: inline-block;
  color: #fff;
  font-size: 20px;
  font-weight: normal;
  word-break: keep-all;
  margin-bottom: 20px;
}
#dispertionWrap #banner_top h2 {
  color: #fff;
  font-size: 38px;
  font-weight: bold;
  margin-bottom: 50px;
}
#dispertionWrap #banner_top ul,
#dispertionWrap #banner_top ul li {
  word-break: break-all;
  line-height: 1.6;
  color: #fff;
  font-size: 14px;
  font-weight: lighter;
  list-style: disc !important;
}
#dispertionWrap #banner_top ul li {
  display: list-item;
}
/* intro */
#dispertionWrap #intro {
  width: 100%;
  padding: 90px 0;
}
#dispertionWrap #intro .intro_flex {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}
#dispertionWrap #intro .intro_box {
  width: 32%;
  box-sizing: border-box;
  border: 1px solid #42cb82;
}
#dispertionWrap #intro .intro_box img {
  width: 90%;
  display: block;
  margin: 20px auto;
}
#dispertionWrap #intro .intro_box h4 {
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
  background-color: #42cb82;
}
#dispertionWrap #intro .intro_box ol {
  padding: 10px 0;
}
#dispertionWrap #intro .intro_box ol li {
  color: #333;
  font-size: 14px;
  line-height: 1.6;
  list-style: none;
  padding: 5px 20px;
}
#dispertionWrap #intro .number {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
  padding-top: 1px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #3fb576;
}
/* adv */
#dispertionWrap .card {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
}
#dispertionWrap .card img {
  width: 48%;
  object-fit: contain;
  object-position:  center center;
}
#dispertionWrap .card .desc {
  width: 48%;
}
#dispertionWrap .card .desc h4 {
  color: #000;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
}
#dispertionWrap .card .desc div {
  color: #333;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
  word-break: keep-all;
}
/* difference */
#dispertionWrap #difference {
  background-image: url(../images/solution/bg_img01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
}
#dispertionWrap #difference h3 {
  color: #fff;
}
#dispertionWrap #difference h3::after {
  background-color: #fff;
}
#dispertionWrap .flex_box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
#dispertionWrap .flex_box .box {
  width: 280px;
  text-align: center;
  margin-bottom: 50px;
}
#dispertionWrap .box img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  margin: 0 auto;
}
#dispertionWrap .flex_box .desc {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
}
/* server_content */
#dispertionWrap #server_content .desc div {
  color: #333;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
  margin: 0 30px;
}
#dispertionWrap #server_content img {
  width: 100%;
  object-fit: contain;
  object-position: center center;
  margin: 50px 0 150px;
}
/* pricing */
#dispertionWrap #pricing .desc {
  text-align: center;
  color: #333;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
  word-break: keep-all;
}
#dispertionWrap table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
}
#dispertionWrap table tr td,
#dispertionWrap table tr th {
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}
#dispertionWrap table tr th {
  color: #fff;
  font-weight: bold;
  padding: 10px;
  background-color: #43cb83;
}
#dispertionWrap table tr td {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  padding: 8px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
}

/* certificateofpayment 2023.06.01 HJ *************************/
#certificate section {
  padding: 100px 0 80px;
}
#certificate .contents_wrap {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}
#certificate h3 {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #000;
  margin-bottom: 80px;
  word-break: keep-all;
  position: relative;
}
#certificate h3::after {
  position: absolute;
  content: '';
  width: 100px;
  height: 5px;
  background-color: #000;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}
#certificate img {
  width: 100%;
  object-fit: contain;
  object-position: center center;
}
#certificate .gray {
  background: #f5f5f5;
}
#certificate .red {
  color: red;
  font-size: 14px;
  word-break: keep-all;
}
/* banner_top */
#certificate #banner_top {
  width: 100%;
  text-align: center;
  background: linear-gradient(180deg, #000516 -23%, #001A34 51.28%, #456257 114.12%);
}
#certificate #banner_top h2 {
  text-align: center;
  color: #fff;
  font-size: 38px;
  font-weight: bold;
  margin-bottom: 20px;
}
#certificate #banner_top div {
  display: inline-block;
  color: #fff;
  font-size: 20px;
  font-weight: normal;
  word-break: keep-all;
  margin-bottom: 20px;
}
#certificate #intro ul,
#certificate #intro ul li {
  list-style: disc !important;
}
#certificate #intro ul li {
  display: list-item;
  color: #333;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
}
#certificate .flex_box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
#certificate .flex_box img {
  display: block;
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
  position: relative;
}
#certificate .arrow {
  width: 18px;
  height: 120px;
  background: url(../images/solution/icon_arrow.png) no-repeat center/contain;
  margin: 0 10px;
}
#certificate .circle div {
  text-align: center;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}
.swiper {
  width: 80%;
  margin-top: 50px;
  border: 1px solid #999;
}
.swiper-slide {
  user-select: none;
}
/* function_intro */
#certificate #function_intro {
  background-image: url(../images/solution/bg_img02.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
}
#certificate #function_intro h3 {
  color: #fff;
}
#certificate #function_intro h3::after {
  background-color: #fff;
}
#certificate .flex_box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
#certificate .flex_box .box {
  width: 280px;
  text-align: center;
  margin-bottom: 50px;
}
#certificate .box img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  margin: 0 auto;
}
#certificate .flex_box h4 {
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  word-break: keep-all;
}
#certificate .flex_box .desc {
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  margin-top: 10px;
  word-break: keep-all;
}

/* personalInfo 2023.06.01 HJ***********************************/
#personalInfo #banner_top {
  width: 100%;
  text-align: center;
  background: linear-gradient(180deg, #000516 -23%, #001A34 51.28%, #456257 114.12%);
}
#personalInfo #banner_top h2 {
  text-align: center;
  color: #fff;
  font-size: 38px;
  font-weight: bold;
  margin-bottom: 20px;
}
#personalInfo section {
  padding: 100px 0 80px;
}
#personalInfo .contents_wrap {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}
#personalInfo h3 {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #000;
  margin-bottom: 80px;
  word-break: keep-all;
  position: relative;
}
#personalInfo h3::after {
  position: absolute;
  content: '';
  width: 100px;
  height: 5px;
  background-color: #000;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}
#personalInfo img {
  width: 100%;
  object-fit: contain;
  object-position: center center;
}
#personalInfo .gray {
  background: #f5f5f5;
}
#personalInfo .red {
  color: red;
  font-size: 14px;
  word-break: keep-all;
}
/* intro */
#personalInfo #intro ul,
#personalInfo #intro ul li {
  list-style: disc !important;
}
#personalInfo #intro ul li {
  display: list-item;
  color: #333;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
}
/* example */
#personalInfo .flex_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#personalInfo .flex_box .box {
  width: 280px;
  text-align: center;
  margin-bottom: 50px;
}
#personalInfo .box img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  margin: 0 auto;
}
#personalInfo .flex_box h4 {
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  word-break: keep-all;
}
#personalInfo .flex_box .desc {
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  margin-top: 10px;
  word-break: keep-all;
}
/* example */
#personalInfo .circle {
  width: 200px;
  height: 200px;
  text-align: center;
  padding: 20px;
  margin: 10px;
  border-radius: 50%;
  color: #333;
  font-size: 16px;
  font-weight: normal;
  border: 2px solid #009cad;
  background-color: #fff;
  box-sizing: border-box;
  position: relative;
}
#personalInfo .circle img {
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  object-fit: contain;
  object-position: center center;
}
/* example02 */
#personalInfo #example02 .circle {
  width: 300px;
  height: 160px;
  color: #000;
  border-radius: 20px;
  padding: 10px 20px;
  margin: 20px 10px;
  background-color: #f5f5f5;
  border-color: #ccc;
}
#personalInfo #example02.gray .circle {
  background-color: #fff;
}
/* function_intro */
#personalInfo #function_intro {
  background-image: url(../images/solution/bg_img03.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
}
#personalInfo #function_intro.shop {
  background-image: url(../images/solution/bg_img04.jpg);
}
#personalInfo #function_intro.donation {
  background-image: url(../images/solution/bg_img05.jpg);
}
#personalInfo #function_intro h3 {
  color: #fff;
}
#personalInfo #function_intro h3::after {
  background-color: #fff;
}

/********************************* #maintenance 230810 HJ ******************************************/
#maintenance {
  width: 100%;
  overflow: hidden;
}
/* #banner */
#maintenance #banner {
  width: 100%;
  background-color: #F8F8F8;
  position: relative;
}
#maintenance #banner .banner_contents {
  width: 100%;
  max-width: 1200px;
  padding: 100px 30px;
  margin: 0 auto;
  box-sizing: border-box;
}
#maintenance #banner .banner_objects {
  position: relative;
  width: 897px;
  position: absolute;
  top: 2%;
  left: calc(50% - 100px);
}
#maintenance #banner .banner_objects .btn {
  width: 155px;
  height: 42px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 40px;
  border-radius: 22px;
  background-color: var(--point-color);
  border: 1px solid var(--point-color);
  box-shadow: 2px 4px 6px 3px #0002;
  position: absolute;
  transition: all .3s;
  user-select: none;
}
#maintenance #banner .banner_objects .btn:nth-child(1) {top: 150px;left: 330px;}
#maintenance #banner .banner_objects .btn:nth-child(2) {top: 210px;left: 290px;}
#maintenance #banner .banner_objects .btn:nth-child(3) {top: 270px;left: 250px;}
#maintenance #banner .banner_objects .btn:nth-child(4) {top: 330px;left: 210px;}
#maintenance #banner .banner_objects .btn:hover {
  color: var(--point-color);
  background-color: #fff;
}
#maintenance #banner .banner_objects .banner_img {
  width: 100%;
  object-fit: contain;
}
#maintenance #banner .subtit {
  color: #666;
  font-size: 20px;
  font-weight: 700;
  margin: 70px 0 10px;
  padding-left: 10px;
}
#maintenance #banner .point {
  color: var(--point-color);
  font-size: 20px;
  font-weight: 700;
}
#maintenance #banner h3 {
  color: #000;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 90px;
}
#maintenance #banner .banner_contents .btn {
  display: block;
  width: 390px;
  padding: 20px 35px;
  margin-bottom: 20px;
  border-radius: 20px;
  border: 1px solid #D9D9D9;
  background: #FFF;
  text-decoration: none;
  box-sizing: border-box;
}
#maintenance #banner .btn h5 {
  display: block;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
#maintenance #banner .btn > span {
  display: block;
  text-align: right;
  color: var(--point-color);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* intro */
#maintenance #intro {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 150px 30px;
  box-sizing: border-box;
}
#maintenance #intro .article {
  display: flex;
  align-items: center;
  justify-content:space-between;
  gap: 50px;
  margin-bottom: 50px;
}
#maintenance #intro .img {
  flex: 1;
}
#maintenance #intro img {
  display: block;
  width: 80%;
  margin: 0 auto;
  object-fit: contain;
}
#maintenance #intro .desc {
  flex: 1;
}
#maintenance #intro h3 {
  color: #000;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}
#maintenance #intro p {
  color: #4b4b4b;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
}

/* #give */
#maintenance #give {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 150px 175px;
  border-radius: 40px;
  background-color: #F8F8F8;
  margin-bottom: 20px;
  box-sizing: border-box;
}
#maintenance #give h3 {
  text-align: center;
  color: #000;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin: 50px 0 30px;
  position: relative;
}
#maintenance #give h3 .balloon {
  display: block;
  padding: 11px 18px 9px;
  color: #222;
  font-size: 15px;
  font-weight: 700;
  border-radius: 50px;
  background-color: #FF8057;
  position: absolute;
  top: -60px;
  left: calc(50% + 100px);
}
#maintenance #give h3 .balloon::after {
  content: '▼';
  color: #FF8057;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  bottom: -17px;
  left: 20px;
}
#maintenance #give .desc {
  text-align: center;
  color: #4b4b4b;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 100px;
}
#maintenance #give .card_inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px
}
#maintenance #give .card {
  flex: 1;
  padding: 30px;
  background: #FFF;
  border-radius: 20px;
  border: 1px solid #D9D9D9;
  position: relative;
}
#maintenance #give .card .icon {
  width: 48px;
  margin-bottom: 20px;
}
#maintenance #give .card .icon img {
  width: 100%;
  object-fit: contain;
}
#maintenance #give .card h5 {
  color: var(--point-color);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
}
#maintenance #give .card h4 {
  color: #000;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}
#maintenance #give .card p {
  color: #818181;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 60px;
  word-break: keep-all;
}
#maintenance #give .card .more {
  display: inline-block;
  color: var(--point-color);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 20px;
  border-radius: 8px;
  background: #E9FFEC;
  cursor: pointer;
  position: absolute;
  bottom: 30px;
  right: 30px;
}

/* img_banner */
#maintenance #img_banner {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 60px 0;
  margin-bottom: 30px;
  background-image: url(../images/maintenance/04.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
#maintenance #img_banner h3 {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin: 80px 0;
}

#maintenance #img_banner .btn {
  display: inline-block;
  color: #000;
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
  padding: 20px 60px;
  margin-bottom: 50px;
  border-radius: 50px;
  background-color: #fff;
  cursor: pointer;
}

/* popup */
#maintenance .popup {
  display: none;
  position: relative;
  width: 700px;
  margin: 0 auto;
  padding: 80px 100px;
  border-radius: 40px;
  background-color: #fff;
  box-shadow: 2px 2px 6px #0005;
  position: fixed;
  top: calc((100vh - 700px) / 2);
  left: 50%;
  transform: translateX(-50%);
}
#maintenance .popup.active {
  display: block;
}
#maintenance .popup .close_btn {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  text-align: center;
  color: #434343;
  font-size: 18px;
  font-weight: 700;
  line-height: 39px;
  border-radius: 10px;
  background-color: #f5f5f5;
  cursor: pointer;
  transition: all .3s;
}
#maintenance .popup .close_btn:hover {
  color: #fff;
  background-color: #666;
}
#maintenance .popup .sub {
  text-align: center;
  color: var(--point-color);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
#maintenance .popup h4 {
  text-align: center;
  color: #000;
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 50px;
}
#maintenance .popup .info {
  text-align: center;
  color: #6a6a6a;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 40px;
}
/* popup01 */
#maintenance #popup01 .block_inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
#maintenance #popup01 .block_inner > div {
  flex: 1;
  min-width: 180px;
}
#maintenance #popup01 .block {
  text-align: center;
  padding: 30px;
  border-radius: 20px;
  background-color: #f5f5f5;
}
#maintenance #popup01 .red {
  text-align: center;
  color: #DE2E23;
  font-size: 12px;
  font-weight: 400;
  margin-top: 5px;
}
#maintenance #popup01 .block img {
  width: 16px;
  object-fit: contain;
  margin-bottom: 5px;
}
#maintenance #popup01 .block > div {
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
/* #popup02 */
#maintenance #popup02 .block_inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 50px;
}
#maintenance #popup02 .block {
  flex: 1;
  padding: 40px 30px;
  border-radius: 20px;
  background-color: #f5f5f5;
}
#maintenance #popup02 .block h5 {
  text-align: center;
  color: var(--point-color);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 30px;
}
#maintenance #popup02 .block ul {
  padding-left: 40px;
}
#maintenance #popup02 .block ul li {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  margin: 15px 0;
  padding-left: 30px;
  list-style: none;
  position: relative;
}
#maintenance #popup02 .block ul li::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background-image: url(../images/maintenance/07.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 2.5px;
  left: 0;
}
/* popup03 */
#maintenance #popup03 .graph {
  width: 100%;
  text-align: center;
  border-radius: 20px;
  border: 1px solid #C9C9C9;
}
#maintenance #popup03 .graph img {
  width: 630px;
  object-fit: contain;
}

/* cash_popup 240126 HJ */
#cash_popup_inner {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  background-color: #00000050;
}
#cash_popup_inner.hide {
  display: none;
}
#cash_popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  max-width: 650px;
  background-color: #f5f5f5;
  padding: 20px 30px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 2px 2px 8px #00000050;
}
#cash_popup > h4 {
  color: #000;
  font-size: 1.5em;
  text-align: center;
  margin: 10px 0 15px;
}
#cash_popup > ul {
  font-size: 1em;
  padding-left: 30px;
}
#cash_popup > ul > li {
  font-size: 1.1em;
  color: #000;
  line-height: 1.4;
  margin: 10px 0;
  word-break: keep-all;
  position: relative;
}
#cash_popup > ul#pay_check_request > li {
  line-height: 1.6;
}
#cash_popup > ul > li::before {
  content: '※';
  width: 10px;
  height: 10px;

  position: absolute;
  left: -20px;
}
#cash_popup > ul > li > img {
  display: inline-block;
  width: 100%;
  object-fit: contain;
  margin-bottom: 10px;
}
#cash_popup > .btn_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
#cash_popup > .btn_wrap > .btn {
  font-size: 1em;
  font-weight: bold;
  line-height: 1;
  padding: 9px 20px 8px !important;
  border-radius: 5px !important;
  cursor: pointer;
}