@charset "utf-8";

/* 계열사 바로가기 */
footer .family-site {margin-bottom: 16px; position: relative;}
footer .family-site .family-select {position: relative; width: 250px;}
footer .family-site .family-list {overflow:auto; height:auto; width: 250px; display: none; position: absolute; left: 0; right: 0; top: auto; bottom: 43px; background-color: #f6f6f6; border: 1px solid #909090; text-align: left; padding: 18px 0px;}
footer .family-site.active .family-list {display: block;}
footer .family-site .family-select:after {position: absolute; content: ''; width: 13px; height: 7px; background: url('/resources/images/main/foot-site-icon.svg') no-repeat; top: 50%; margin-left: 10px; transform: translateY(-50%); transition: all 0.15s ease-in-out;}
footer .family-site.active .family-select:after {transform: translateY(-50%) rotate(180deg);}
footer .family-site .family-list li a {display: block; font-size: 16px; overflow: hidden; color: #4B4B4B; line-height: 34px; padding: 0 20px;}
footer .family-site .family-list li a:hover {background: #3c7af9; color: #fff;}

.btn-box{width: 100%; text-align: center;}

.layer-dimm {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 100; }
.layer-alert{display: none; position: fixed; background-color: #ffffff; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 110; border: 1px solid #000;}
.layer-alert .document-layer{min-width: 400px; background: #f6f6f6; padding: 93px 25px 20px; text-align: center; position: relative; color: #4e4e4e; letter-spacing: -0.03em;}
.layer-alert .document-layer:before{position: absolute; content: ''; width: 30px; height: 30px; background: url('/resources/images/sub/info-circle-blue.png') no-repeat; left: 50%; transform: translateX(-50%); top: 48px;}
.layer-alert .btn-box{cursor: pointer; padding: 18px 0; color: #323232; font-family: 'Paybooc'; letter-spacing: -0.03em; background: #fff; transition: background 0.5s ease-in-out;}
.layer-alert .btn-box:hover{background: #3c7af9; color: #fff;}
.layer-alert .btn-box:hover .alert-btn {color:#fff;}
@media all and (max-width : 400px){
  .layer-alert{width: 300px;}
  .content-wrap .title-txt p br{display: none;}
  .layer-alert .document-layer {min-width:100%;}
}
/* 프로그래스 바(도트형) */
.loading-progress { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 1100; background: rgba(0, 0, 0, 0.6); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; }

.loading-progress .prog { height: 10px; width: 100%; text-align: center; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.loading-progress .prog .c { display: inline-block; vertical-align: middle; width: 10px; height: 10px; background-color: #e5e6e8; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; margin: 0 3px; -webkit-animation: prsloading 0.7s infinite ease-in-out both; -moz-animation: prsloading 0.7s infinite ease-in-out both; -o-animation: prsloading 0.7s infinite ease-in-out both; animation: prsloading 0.7s infinite ease-in-out both; }

.loading-progress .msg { width: 100%; color: #fff; font-size: 15px; margin: 20px 0 0 0; text-align: center; }

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