@charset "UTF-8";
.jexjs-color-default {
  color: #ffffff;
}

.jexjs-color-primary {
  color: #08A9F4;
}

.jexjs-color-danger {
  color: #d9534f;
}

.jexjs-color-success {
  color: #5cb85c;
}

.jexjs-color-warning {
  color: #f0ad4e;
}

.jexjs-color-info {
  color: #23527c;
}

.jexjs-bgcolor-default {
  background-color: #ffffff;
}

.jexjs-bgcolor-primary {
  background-color: #08A9F4;
}

.jexjs-bgcolor-danger {
  background-color: #d9534f;
}

.jexjs-bgcolor-success {
  background-color: #5cb85c;
}

.jexjs-bgcolor-warning {
  background-color: #f0ad4e;
}

.jexjs-bgcolor-info {
  background-color: #23527c;
}

@font-face {
  font-family: "Glyphicons Halflings";
  src: url("./fonts/glyphicons-halflings-regular.eot");
  src: url("./fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("./fonts/glyphicons-halflings-regular.woff") format("woff"), url("./fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("./fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}
.jexjs-icon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "glyphicons Halflings";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.jexjs-icon-asterisk:before {
  content: "*";
}

.jexjs-icon-plus:before {
  content: "+";
}

.jexjs-icon-euro:before,
.jexjs-icon-eur:before {
  content: "€";
}

.jexjs-icon-minus:before {
  content: "−";
}

.jexjs-icon-cloud:before {
  content: "☁";
}

.jexjs-icon-envelope:before {
  content: "✉";
}

.jexjs-icon-pencil:before {
  content: "✏";
}

.jexjs-icon-glass:before {
  content: "\e001";
}

.jexjs-icon-music:before {
  content: "\e002";
}

.jexjs-icon-search:before {
  content: "\e003";
}

.jexjs-icon-heart:before {
  content: "\e005";
}

.jexjs-icon-star:before {
  content: "\e006";
}

.jexjs-icon-star-empty:before {
  content: "\e007";
}

.jexjs-icon-user:before {
  content: "\e008";
}

.jexjs-icon-film:before {
  content: "\e009";
}

.jexjs-icon-th-large:before {
  content: "\e010";
}

.jexjs-icon-th:before {
  content: "\e011";
}

.jexjs-icon-th-list:before {
  content: "\e012";
}

.jexjs-icon-ok:before {
  content: "\e013";
}

.jexjs-icon-remove:before {
  content: "\e014";
}

.jexjs-icon-zoom-in:before {
  content: "\e015";
}

.jexjs-icon-zoom-out:before {
  content: "\e016";
}

.jexjs-icon-off:before {
  content: "\e017";
}

.jexjs-icon-signal:before {
  content: "\e018";
}

.jexjs-icon-cog:before {
  content: "\e019";
}

.jexjs-icon-trash:before {
  content: "\e020";
}

.jexjs-icon-home:before {
  content: "\e021";
}

.jexjs-icon-file:before {
  content: "\e022";
}

.jexjs-icon-time:before {
  content: "\e023";
}

.jexjs-icon-road:before {
  content: "\e024";
}

.jexjs-icon-download-alt:before {
  content: "\e025";
}

.jexjs-icon-download:before {
  content: "\e026";
}

.jexjs-icon-upload:before {
  content: "\e027";
}

.jexjs-icon-inbox:before {
  content: "\e028";
}

.jexjs-icon-play-circle:before {
  content: "\e029";
}

.jexjs-icon-repeat:before {
  content: "\e030";
}

.jexjs-icon-refresh:before {
  content: "\e031";
}

.jexjs-icon-list-alt:before {
  content: "\e032";
}

.jexjs-icon-lock:before {
  content: "\e033";
}

.jexjs-icon-flag:before {
  content: "\e034";
}

.jexjs-icon-headphones:before {
  content: "\e035";
}

.jexjs-icon-volume-off:before {
  content: "\e036";
}

.jexjs-icon-volume-down:before {
  content: "\e037";
}

.jexjs-icon-volume-up:before {
  content: "\e038";
}

.jexjs-icon-qrcode:before {
  content: "\e039";
}

.jexjs-icon-barcode:before {
  content: "\e040";
}

.jexjs-icon-tag:before {
  content: "\e041";
}

.jexjs-icon-tags:before {
  content: "\e042";
}

.jexjs-icon-book:before {
  content: "\e043";
}

.jexjs-icon-bookmark:before {
  content: "\e044";
}

.jexjs-icon-print:before {
  content: "\e045";
}

.jexjs-icon-camera:before {
  content: "\e046";
}

.jexjs-icon-font:before {
  content: "\e047";
}

.jexjs-icon-bold:before {
  content: "\e048";
}

.jexjs-icon-italic:before {
  content: "\e049";
}

.jexjs-icon-text-height:before {
  content: "\e050";
}

.jexjs-icon-text-width:before {
  content: "\e051";
}

.jexjs-icon-align-left:before {
  content: "\e052";
}

.jexjs-icon-align-center:before {
  content: "\e053";
}

.jexjs-icon-align-right:before {
  content: "\e054";
}

.jexjs-icon-align-justify:before {
  content: "\e055";
}

.jexjs-icon-list:before {
  content: "\e056";
}

.jexjs-icon-indent-left:before {
  content: "\e057";
}

.jexjs-icon-indent-right:before {
  content: "\e058";
}

.jexjs-icon-facetime-video:before {
  content: "\e059";
}

.jexjs-icon-picture:before {
  content: "\e060";
}

.jexjs-icon-map-marker:before {
  content: "\e062";
}

.jexjs-icon-adjust:before {
  content: "\e063";
}

.jexjs-icon-tint:before {
  content: "\e064";
}

.jexjs-icon-edit:before {
  content: "\e065";
}

.jexjs-icon-share:before {
  content: "\e066";
}

.jexjs-icon-check:before {
  content: "\e067";
}

.jexjs-icon-move:before {
  content: "\e068";
}

.jexjs-icon-step-backward:before {
  content: "\e069";
}

.jexjs-icon-fast-backward:before {
  content: "\e070";
}

.jexjs-icon-backward:before {
  content: "\e071";
}

.jexjs-icon-play:before {
  content: "\e072";
}

.jexjs-icon-pause:before {
  content: "\e073";
}

.jexjs-icon-stop:before {
  content: "\e074";
}

.jexjs-icon-forward:before {
  content: "\e075";
}

.jexjs-icon-fast-forward:before {
  content: "\e076";
}

.jexjs-icon-step-forward:before {
  content: "\e077";
}

.jexjs-icon-eject:before {
  content: "\e078";
}

.jexjs-icon-chevron-left:before {
  content: "\e079";
}

.jexjs-icon-chevron-right:before {
  content: "\e080";
}

.jexjs-icon-plus-sign:before {
  content: "\e081";
}

.jexjs-icon-minus-sign:before {
  content: "\e082";
}

.jexjs-icon-remove-sign:before {
  content: "\e083";
}

.jexjs-icon-ok-sign:before {
  content: "\e084";
}

.jexjs-icon-question-sign:before {
  content: "\e085";
}

.jexjs-icon-info-sign:before {
  content: "\e086";
}

.jexjs-icon-screenshot:before {
  content: "\e087";
}

.jexjs-icon-remove-circle:before {
  content: "\e088";
}

.jexjs-icon-ok-circle:before {
  content: "\e089";
}

.jexjs-icon-ban-circle:before {
  content: "\e090";
}

.jexjs-icon-arrow-left:before {
  content: "\e091";
}

.jexjs-icon-arrow-right:before {
  content: "\e092";
}

.jexjs-icon-arrow-up:before {
  content: "\e093";
}

.jexjs-icon-arrow-down:before {
  content: "\e094";
}

.jexjs-icon-share-alt:before {
  content: "\e095";
}

.jexjs-icon-resize-full:before {
  content: "\e096";
}

.jexjs-icon-resize-small:before {
  content: "\e097";
}

.jexjs-icon-exclamation-sign:before {
  content: "\e101";
}

.jexjs-icon-gift:before {
  content: "\e102";
}

.jexjs-icon-leaf:before {
  content: "\e103";
}

.jexjs-icon-fire:before {
  content: "\e104";
}

.jexjs-icon-eye-open:before {
  content: "\e105";
}

.jexjs-icon-eye-close:before {
  content: "\e106";
}

.jexjs-icon-warning-sign:before {
  content: "\e107";
}

.jexjs-icon-plane:before {
  content: "\e108";
}

.jexjs-icon-calendar:before {
  content: "\e109";
}

.jexjs-icon-random:before {
  content: "\e110";
}

.jexjs-icon-comment:before {
  content: "\e111";
}

.jexjs-icon-magnet:before {
  content: "\e112";
}

.jexjs-icon-chevron-up:before {
  content: "\e113";
}

.jexjs-icon-chevron-down:before {
  content: "\e114";
}

.jexjs-icon-retweet:before {
  content: "\e115";
}

.jexjs-icon-shopping-cart:before {
  content: "\e116";
}

.jexjs-icon-folder-close:before {
  content: "\e117";
}

.jexjs-icon-folder-open:before {
  content: "\e118";
}

.jexjs-icon-resize-vertical:before {
  content: "\e119";
}

.jexjs-icon-resize-horizontal:before {
  content: "\e120";
}

.jexjs-icon-hdd:before {
  content: "\e121";
}

.jexjs-icon-bullhorn:before {
  content: "\e122";
}

.jexjs-icon-bell:before {
  content: "\e123";
}

.jexjs-icon-certificate:before {
  content: "\e124";
}

.jexjs-icon-thumbs-up:before {
  content: "\e125";
}

.jexjs-icon-thumbs-down:before {
  content: "\e126";
}

.jexjs-icon-hand-right:before {
  content: "\e127";
}

.jexjs-icon-hand-left:before {
  content: "\e128";
}

.jexjs-icon-hand-up:before {
  content: "\e129";
}

.jexjs-icon-hand-down:before {
  content: "\e130";
}

.jexjs-icon-circle-arrow-right:before {
  content: "\e131";
}

.jexjs-icon-circle-arrow-left:before {
  content: "\e132";
}

.jexjs-icon-circle-arrow-up:before {
  content: "\e133";
}

.jexjs-icon-circle-arrow-down:before {
  content: "\e134";
}

.jexjs-icon-globe:before {
  content: "\e135";
}

.jexjs-icon-wrench:before {
  content: "\e136";
}

.jexjs-icon-tasks:before {
  content: "\e137";
}

.jexjs-icon-filter:before {
  content: "\e138";
}

.jexjs-icon-briefcase:before {
  content: "\e139";
}

.jexjs-icon-fullscreen:before {
  content: "\e140";
}

.jexjs-icon-dashboard:before {
  content: "\e141";
}

.jexjs-icon-paperclip:before {
  content: "\e142";
}

.jexjs-icon-heart-empty:before {
  content: "\e143";
}

.jexjs-icon-link:before {
  content: "\e144";
}

.jexjs-icon-phone:before {
  content: "\e145";
}

.jexjs-icon-pushpin:before {
  content: "\e146";
}

.jexjs-icon-usd:before {
  content: "\e148";
}

.jexjs-icon-gbp:before {
  content: "\e149";
}

.jexjs-icon-sort:before {
  content: "\e150";
}

.jexjs-icon-sort-by-alphabet:before {
  content: "\e151";
}

.jexjs-icon-sort-by-alphabet-alt:before {
  content: "\e152";
}

.jexjs-icon-sort-by-order:before {
  content: "\e153";
}

.jexjs-icon-sort-by-order-alt:before {
  content: "\e154";
}

.jexjs-icon-sort-by-attributes:before {
  content: "\e155";
}

.jexjs-icon-sort-by-attributes-alt:before {
  content: "\e156";
}

.jexjs-icon-unchecked:before {
  content: "\e157";
}

.jexjs-icon-expand:before {
  content: "\e158";
}

.jexjs-icon-collapse-down:before {
  content: "\e159";
}

.jexjs-icon-collapse-up:before {
  content: "\e160";
}

.jexjs-icon-log-in:before {
  content: "\e161";
}

.jexjs-icon-flash:before {
  content: "\e162";
}

.jexjs-icon-log-out:before {
  content: "\e163";
}

.jexjs-icon-new-window:before {
  content: "\e164";
}

.jexjs-icon-record:before {
  content: "\e165";
}

.jexjs-icon-save:before {
  content: "\e166";
}

.jexjs-icon-open:before {
  content: "\e167";
}

.jexjs-icon-saved:before {
  content: "\e168";
}

.jexjs-icon-import:before {
  content: "\e169";
}

.jexjs-icon-export:before {
  content: "\e170";
}

.jexjs-icon-send:before {
  content: "\e171";
}

.jexjs-icon-floppy-disk:before {
  content: "\e172";
}

.jexjs-icon-floppy-saved:before {
  content: "\e173";
}

.jexjs-icon-floppy-remove:before {
  content: "\e174";
}

.jexjs-icon-floppy-save:before {
  content: "\e175";
}

.jexjs-icon-floppy-open:before {
  content: "\e176";
}

.jexjs-icon-credit-card:before {
  content: "\e177";
}

.jexjs-icon-transfer:before {
  content: "\e178";
}

.jexjs-icon-cutlery:before {
  content: "\e179";
}

.jexjs-icon-header:before {
  content: "\e180";
}

.jexjs-icon-compressed:before {
  content: "\e181";
}

.jexjs-icon-earphone:before {
  content: "\e182";
}

.jexjs-icon-phone-alt:before {
  content: "\e183";
}

.jexjs-icon-tower:before {
  content: "\e184";
}

.jexjs-icon-stats:before {
  content: "\e185";
}

.jexjs-icon-sd-video:before {
  content: "\e186";
}

.jexjs-icon-hd-video:before {
  content: "\e187";
}

.jexjs-icon-subtitles:before {
  content: "\e188";
}

.jexjs-icon-sound-stereo:before {
  content: "\e189";
}

.jexjs-icon-sound-dolby:before {
  content: "\e190";
}

.jexjs-icon-sound-5-1:before {
  content: "\e191";
}

.jexjs-icon-sound-6-1:before {
  content: "\e192";
}

.jexjs-icon-sound-7-1:before {
  content: "\e193";
}

.jexjs-icon-copyright-mark:before {
  content: "\e194";
}

.jexjs-icon-registration-mark:before {
  content: "\e195";
}

.jexjs-icon-cloud-download:before {
  content: "\e197";
}

.jexjs-icon-cloud-upload:before {
  content: "\e198";
}

.jexjs-icon-tree-conifer:before {
  content: "\e199";
}

.jexjs-icon-tree-deciduous:before {
  content: "\e200";
}

.jexjs-icon-cd:before {
  content: "\e201";
}

.jexjs-icon-save-file:before {
  content: "\e202";
}

.jexjs-icon-open-file:before {
  content: "\e203";
}

.jexjs-icon-level-up:before {
  content: "\e204";
}

.jexjs-icon-copy:before {
  content: "\e205";
}

.jexjs-icon-paste:before {
  content: "\e206";
}

.jexjs-icon-alert:before {
  content: "\e209";
}

.jexjs-icon-equalizer:before {
  content: "\e210";
}

.jexjs-icon-king:before {
  content: "\e211";
}

.jexjs-icon-queen:before {
  content: "\e212";
}

.jexjs-icon-pawn:before {
  content: "\e213";
}

.jexjs-icon-bishop:before {
  content: "\e214";
}

.jexjs-icon-knight:before {
  content: "\e215";
}

.jexjs-icon-baby-formula:before {
  content: "\e216";
}

.jexjs-icon-tent:before {
  content: "⛺";
}

.jexjs-icon-blackboard:before {
  content: "\e218";
}

.jexjs-icon-bed:before {
  content: "\e219";
}

.jexjs-icon-apple:before {
  content: "\f8ff";
}

.jexjs-icon-erase:before {
  content: "\e221";
}

.jexjs-icon-hourglass:before {
  content: "⌛";
}

.jexjs-icon-lamp:before {
  content: "\e223";
}

.jexjs-icon-duplicate:before {
  content: "\e224";
}

.jexjs-icon-piggy-bank:before {
  content: "\e225";
}

.jexjs-icon-scissors:before {
  content: "\e226";
}

.jexjs-icon-bitcoin:before {
  content: "\e227";
}

.jexjs-icon-btc:before {
  content: "\e227";
}

.jexjs-icon-xbt:before {
  content: "\e227";
}

.jexjs-icon-yen:before {
  content: "¥";
}

.jexjs-icon-jpy:before {
  content: "¥";
}

.jexjs-icon-ruble:before {
  content: "₽";
}

.jexjs-icon-rub:before {
  content: "₽";
}

.jexjs-icon-scale:before {
  content: "\e230";
}

.jexjs-icon-ice-lolly:before {
  content: "\e231";
}

.jexjs-icon-ice-lolly-tasted:before {
  content: "\e232";
}

.jexjs-icon-education:before {
  content: "\e233";
}

.jexjs-icon-option-horizontal:before {
  content: "\e234";
}

.jexjs-icon-option-vertical:before {
  content: "\e235";
}

.jexjs-icon-menu-hamburger:before {
  content: "\e236";
}

.jexjs-icon-modal-window:before {
  content: "\e237";
}

.jexjs-icon-oil:before {
  content: "\e238";
}

.jexjs-icon-grain:before {
  content: "\e239";
}

.jexjs-icon-sunglasses:before {
  content: "\e240";
}

.jexjs-icon-text-size:before {
  content: "\e241";
}

.jexjs-icon-text-color:before {
  content: "\e242";
}

.jexjs-icon-text-background:before {
  content: "\e243";
}

.jexjs-icon-object-align-top:before {
  content: "\e244";
}

.jexjs-icon-object-align-bottom:before {
  content: "\e245";
}

.jexjs-icon-object-align-horizontal:before {
  content: "\e246";
}

.jexjs-icon-object-align-left:before {
  content: "\e247";
}

.jexjs-icon-object-align-vertical:before {
  content: "\e248";
}

.jexjs-icon-object-align-right:before {
  content: "\e249";
}

.jexjs-icon-triangle-right:before {
  content: "\e250";
}

.jexjs-icon-triangle-left:before {
  content: "\e251";
}

.jexjs-icon-triangle-bottom:before {
  content: "\e252";
}

.jexjs-icon-triangle-top:before {
  content: "\e253";
}

.jexjs-icon-console:before {
  content: "\e254";
}

.jexjs-icon-superscript:before {
  content: "\e255";
}

.jexjs-icon-subscript:before {
  content: "\e256";
}

.jexjs-icon-menu-left:before {
  content: "\e257";
}

.jexjs-icon-menu-right:before {
  content: "\e258";
}

.jexjs-icon-menu-down:before {
  content: "\e259";
}

.jexjs-icon-menu-up:before {
  content: "\e260";
}

.jexjs-text-left {
  text-align: left;
}

.jexjs-text-right {
  text-align: right;
}

.jexjs-text-center {
  text-align: center;
}

.jexjs-text-justify {
  text-align: justify;
}

.jexjs-text-nowrap {
  white-space: nowrap;
}

.jexjs-text-lowercase {
  text-transform: lowercase;
}

.jexjs-text-uppercase {
  text-transform: uppercase;
}

.jexjs-text-capitalize {
  text-transform: capitalize;
}

.jexjs-text-muted {
  color: #777777;
}

.jexjs-text-primary {
  color: #08a9f4;
}

.jexjs-container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .jexjs-container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .jexjs-container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .jexjs-container {
    width: 1170px;
  }
}
.jexjs-container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.jexjs-row {
  margin-left: -15px;
  margin-right: -15px;
}

.jexjs-col-xs-1, .jexjs-col-sm-1, .jexjs-col-md-1, .jexjs-col-lg-1, .jexjs-col-xs-2, .jexjs-col-sm-2, .jexjs-col-md-2, .jexjs-col-lg-2, .jexjs-col-xs-3, .jexjs-col-sm-3, .jexjs-col-md-3, .jexjs-col-lg-3, .jexjs-col-xs-4, .jexjs-col-sm-4, .jexjs-col-md-4, .jexjs-col-lg-4, .jexjs-col-xs-5, .jexjs-col-sm-5, .jexjs-col-md-5, .jexjs-col-lg-5, .jexjs-col-xs-6, .jexjs-col-sm-6, .jexjs-col-md-6, .jexjs-col-lg-6, .jexjs-col-xs-7, .jexjs-col-sm-7, .jexjs-col-md-7, .jexjs-col-lg-7, .jexjs-col-xs-8, .jexjs-col-sm-8, .jexjs-col-md-8, .jexjs-col-lg-8, .jexjs-col-xs-9, .jexjs-col-sm-9, .jexjs-col-md-9, .jexjs-col-lg-9, .jexjs-col-xs-10, .jexjs-col-sm-10, .jexjs-col-md-10, .jexjs-col-lg-10, .jexjs-col-xs-11, .jexjs-col-sm-11, .jexjs-col-md-11, .jexjs-col-lg-11, .jexjs-col-xs-12, .jexjs-col-sm-12, .jexjs-col-md-12, .jexjs-col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.jexjs-col-xs-1, .jexjs-col-xs-2, .jexjs-col-xs-3, .jexjs-col-xs-4, .jexjs-col-xs-5, .jexjs-col-xs-6, .jexjs-col-xs-7, .jexjs-col-xs-8, .jexjs-col-xs-9, .jexjs-col-xs-10, .jexjs-col-xs-11, .jexjs-col-xs-12 {
  float: left;
}

.jexjs-col-xs-12 {
  width: 100%;
}

.jexjs-col-xs-11 {
  width: 91.66666667%;
}

.jexjs-col-xs-10 {
  width: 83.33333333%;
}

.jexjs-col-xs-9 {
  width: 75%;
}

.jexjs-col-xs-8 {
  width: 66.66666667%;
}

.jexjs-col-xs-7 {
  width: 58.33333333%;
}

.jexjs-col-xs-6 {
  width: 50%;
}

.jexjs-col-xs-5 {
  width: 41.66666667%;
}

.jexjs-col-xs-4 {
  width: 33.33333333%;
}

.jexjs-col-xs-3 {
  width: 25%;
}

.jexjs-col-xs-2 {
  width: 16.66666667%;
}

.jexjs-col-xs-1 {
  width: 8.33333333%;
}

.jexjs-col-xs-pull-12 {
  right: 100%;
}

.jexjs-col-xs-pull-11 {
  right: 91.66666667%;
}

.jexjs-col-xs-pull-10 {
  right: 83.33333333%;
}

.jexjs-col-xs-pull-9 {
  right: 75%;
}

.jexjs-col-xs-pull-8 {
  right: 66.66666667%;
}

.jexjs-col-xs-pull-7 {
  right: 58.33333333%;
}

.jexjs-col-xs-pull-6 {
  right: 50%;
}

.jexjs-col-xs-pull-5 {
  right: 41.66666667%;
}

.jexjs-col-xs-pull-4 {
  right: 33.33333333%;
}

.jexjs-col-xs-pull-3 {
  right: 25%;
}

.jexjs-col-xs-pull-2 {
  right: 16.66666667%;
}

.jexjs-col-xs-pull-1 {
  right: 8.33333333%;
}

.jexjs-col-xs-pull-0 {
  right: auto;
}

.jexjs-col-xs-push-12 {
  left: 100%;
}

.jexjs-col-xs-push-11 {
  left: 91.66666667%;
}

.jexjs-col-xs-push-10 {
  left: 83.33333333%;
}

.jexjs-col-xs-push-9 {
  left: 75%;
}

.jexjs-col-xs-push-8 {
  left: 66.66666667%;
}

.jexjs-col-xs-push-7 {
  left: 58.33333333%;
}

.jexjs-col-xs-push-6 {
  left: 50%;
}

.jexjs-col-xs-push-5 {
  left: 41.66666667%;
}

.jexjs-col-xs-push-4 {
  left: 33.33333333%;
}

.jexjs-col-xs-push-3 {
  left: 25%;
}

.jexjs-col-xs-push-2 {
  left: 16.66666667%;
}

.jexjs-col-xs-push-1 {
  left: 8.33333333%;
}

.jexjs-col-xs-push-0 {
  left: auto;
}

.jexjs-col-xs-offset-12 {
  margin-left: 100%;
}

.jexjs-col-xs-offset-11 {
  margin-left: 91.66666667%;
}

.jexjs-col-xs-offset-10 {
  margin-left: 83.33333333%;
}

.jexjs-col-xs-offset-9 {
  margin-left: 75%;
}

.jexjs-col-xs-offset-8 {
  margin-left: 66.66666667%;
}

.jexjs-col-xs-offset-7 {
  margin-left: 58.33333333%;
}

.jexjs-col-xs-offset-6 {
  margin-left: 50%;
}

.jexjs-col-xs-offset-5 {
  margin-left: 41.66666667%;
}

.jexjs-col-xs-offset-4 {
  margin-left: 33.33333333%;
}

.jexjs-col-xs-offset-3 {
  margin-left: 25%;
}

.jexjs-col-xs-offset-2 {
  margin-left: 16.66666667%;
}

.jexjs-col-xs-offset-1 {
  margin-left: 8.33333333%;
}

.jexjs-col-xs-offset-0 {
  margin-left: 0%;
}

@media (min-width: 768px) {
  .jexjs-col-sm-1, .jexjs-col-sm-2, .jexjs-col-sm-3, .jexjs-col-sm-4, .jexjs-col-sm-5, .jexjs-col-sm-6, .jexjs-col-sm-7, .jexjs-col-sm-8, .jexjs-col-sm-9, .jexjs-col-sm-10, .jexjs-col-sm-11, .jexjs-col-sm-12 {
    float: left;
  }
  .jexjs-col-sm-12 {
    width: 100%;
  }
  .jexjs-col-sm-11 {
    width: 91.66666667%;
  }
  .jexjs-col-sm-10 {
    width: 83.33333333%;
  }
  .jexjs-col-sm-9 {
    width: 75%;
  }
  .jexjs-col-sm-8 {
    width: 66.66666667%;
  }
  .jexjs-col-sm-7 {
    width: 58.33333333%;
  }
  .jexjs-col-sm-6 {
    width: 50%;
  }
  .jexjs-col-sm-5 {
    width: 41.66666667%;
  }
  .jexjs-col-sm-4 {
    width: 33.33333333%;
  }
  .jexjs-col-sm-3 {
    width: 25%;
  }
  .jexjs-col-sm-2 {
    width: 16.66666667%;
  }
  .jexjs-col-sm-1 {
    width: 8.33333333%;
  }
  .jexjs-col-sm-pull-12 {
    right: 100%;
  }
  .jexjs-col-sm-pull-11 {
    right: 91.66666667%;
  }
  .jexjs-col-sm-pull-10 {
    right: 83.33333333%;
  }
  .jexjs-col-sm-pull-9 {
    right: 75%;
  }
  .jexjs-col-sm-pull-8 {
    right: 66.66666667%;
  }
  .jexjs-col-sm-pull-7 {
    right: 58.33333333%;
  }
  .jexjs-col-sm-pull-6 {
    right: 50%;
  }
  .jexjs-col-sm-pull-5 {
    right: 41.66666667%;
  }
  .jexjs-col-sm-pull-4 {
    right: 33.33333333%;
  }
  .jexjs-col-sm-pull-3 {
    right: 25%;
  }
  .jexjs-col-sm-pull-2 {
    right: 16.66666667%;
  }
  .jexjs-col-sm-pull-1 {
    right: 8.33333333%;
  }
  .jexjs-col-sm-pull-0 {
    right: auto;
  }
  .jexjs-col-sm-push-12 {
    left: 100%;
  }
  .jexjs-col-sm-push-11 {
    left: 91.66666667%;
  }
  .jexjs-col-sm-push-10 {
    left: 83.33333333%;
  }
  .jexjs-col-sm-push-9 {
    left: 75%;
  }
  .jexjs-col-sm-push-8 {
    left: 66.66666667%;
  }
  .jexjs-col-sm-push-7 {
    left: 58.33333333%;
  }
  .jexjs-col-sm-push-6 {
    left: 50%;
  }
  .jexjs-col-sm-push-5 {
    left: 41.66666667%;
  }
  .jexjs-col-sm-push-4 {
    left: 33.33333333%;
  }
  .jexjs-col-sm-push-3 {
    left: 25%;
  }
  .jexjs-col-sm-push-2 {
    left: 16.66666667%;
  }
  .jexjs-col-sm-push-1 {
    left: 8.33333333%;
  }
  .jexjs-col-sm-push-0 {
    left: auto;
  }
  .jexjs-col-sm-offset-12 {
    margin-left: 100%;
  }
  .jexjs-col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .jexjs-col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .jexjs-col-sm-offset-9 {
    margin-left: 75%;
  }
  .jexjs-col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .jexjs-col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .jexjs-col-sm-offset-6 {
    margin-left: 50%;
  }
  .jexjs-col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .jexjs-col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .jexjs-col-sm-offset-3 {
    margin-left: 25%;
  }
  .jexjs-col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .jexjs-col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .jexjs-col-sm-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 992px) {
  .jexjs-col-md-1, .jexjs-col-md-2, .jexjs-col-md-3, .jexjs-col-md-4, .jexjs-col-md-5, .jexjs-col-md-6, .jexjs-col-md-7, .jexjs-col-md-8, .jexjs-col-md-9, .jexjs-col-md-10, .jexjs-col-md-11, .jexjs-col-md-12 {
    float: left;
  }
  .jexjs-col-md-12 {
    width: 100%;
  }
  .jexjs-col-md-11 {
    width: 91.66666667%;
  }
  .jexjs-col-md-10 {
    width: 83.33333333%;
  }
  .jexjs-col-md-9 {
    width: 75%;
  }
  .jexjs-col-md-8 {
    width: 66.66666667%;
  }
  .jexjs-col-md-7 {
    width: 58.33333333%;
  }
  .jexjs-col-md-6 {
    width: 50%;
  }
  .jexjs-col-md-5 {
    width: 41.66666667%;
  }
  .jexjs-col-md-4 {
    width: 33.33333333%;
  }
  .jexjs-col-md-3 {
    width: 25%;
  }
  .jexjs-col-md-2 {
    width: 16.66666667%;
  }
  .jexjs-col-md-1 {
    width: 8.33333333%;
  }
  .jexjs-col-md-pull-12 {
    right: 100%;
  }
  .jexjs-col-md-pull-11 {
    right: 91.66666667%;
  }
  .jexjs-col-md-pull-10 {
    right: 83.33333333%;
  }
  .jexjs-col-md-pull-9 {
    right: 75%;
  }
  .jexjs-col-md-pull-8 {
    right: 66.66666667%;
  }
  .jexjs-col-md-pull-7 {
    right: 58.33333333%;
  }
  .jexjs-col-md-pull-6 {
    right: 50%;
  }
  .jexjs-col-md-pull-5 {
    right: 41.66666667%;
  }
  .jexjs-col-md-pull-4 {
    right: 33.33333333%;
  }
  .jexjs-col-md-pull-3 {
    right: 25%;
  }
  .jexjs-col-md-pull-2 {
    right: 16.66666667%;
  }
  .jexjs-col-md-pull-1 {
    right: 8.33333333%;
  }
  .jexjs-col-md-pull-0 {
    right: auto;
  }
  .jexjs-col-md-push-12 {
    left: 100%;
  }
  .jexjs-col-md-push-11 {
    left: 91.66666667%;
  }
  .jexjs-col-md-push-10 {
    left: 83.33333333%;
  }
  .jexjs-col-md-push-9 {
    left: 75%;
  }
  .jexjs-col-md-push-8 {
    left: 66.66666667%;
  }
  .jexjs-col-md-push-7 {
    left: 58.33333333%;
  }
  .jexjs-col-md-push-6 {
    left: 50%;
  }
  .jexjs-col-md-push-5 {
    left: 41.66666667%;
  }
  .jexjs-col-md-push-4 {
    left: 33.33333333%;
  }
  .jexjs-col-md-push-3 {
    left: 25%;
  }
  .jexjs-col-md-push-2 {
    left: 16.66666667%;
  }
  .jexjs-col-md-push-1 {
    left: 8.33333333%;
  }
  .jexjs-col-md-push-0 {
    left: auto;
  }
  .jexjs-col-md-offset-12 {
    margin-left: 100%;
  }
  .jexjs-col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .jexjs-col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .jexjs-col-md-offset-9 {
    margin-left: 75%;
  }
  .jexjs-col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .jexjs-col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .jexjs-col-md-offset-6 {
    margin-left: 50%;
  }
  .jexjs-col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .jexjs-col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .jexjs-col-md-offset-3 {
    margin-left: 25%;
  }
  .jexjs-col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .jexjs-col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .jexjs-col-md-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 1200px) {
  .jexjs-col-lg-1, .jexjs-col-lg-2, .jexjs-col-lg-3, .jexjs-col-lg-4, .jexjs-col-lg-5, .jexjs-col-lg-6, .jexjs-col-lg-7, .jexjs-col-lg-8, .jexjs-col-lg-9, .jexjs-col-lg-10, .jexjs-col-lg-11, .jexjs-col-lg-12 {
    float: left;
  }
  .jexjs-col-lg-12 {
    width: 100%;
  }
  .jexjs-col-lg-11 {
    width: 91.66666667%;
  }
  .jexjs-col-lg-10 {
    width: 83.33333333%;
  }
  .jexjs-col-lg-9 {
    width: 75%;
  }
  .jexjs-col-lg-8 {
    width: 66.66666667%;
  }
  .jexjs-col-lg-7 {
    width: 58.33333333%;
  }
  .jexjs-col-lg-6 {
    width: 50%;
  }
  .jexjs-col-lg-5 {
    width: 41.66666667%;
  }
  .jexjs-col-lg-4 {
    width: 33.33333333%;
  }
  .jexjs-col-lg-3 {
    width: 25%;
  }
  .jexjs-col-lg-2 {
    width: 16.66666667%;
  }
  .jexjs-col-lg-1 {
    width: 8.33333333%;
  }
  .jexjs-col-lg-pull-12 {
    right: 100%;
  }
  .jexjs-col-lg-pull-11 {
    right: 91.66666667%;
  }
  .jexjs-col-lg-pull-10 {
    right: 83.33333333%;
  }
  .jexjs-col-lg-pull-9 {
    right: 75%;
  }
  .jexjs-col-lg-pull-8 {
    right: 66.66666667%;
  }
  .jexjs-col-lg-pull-7 {
    right: 58.33333333%;
  }
  .jexjs-col-lg-pull-6 {
    right: 50%;
  }
  .jexjs-col-lg-pull-5 {
    right: 41.66666667%;
  }
  .jexjs-col-lg-pull-4 {
    right: 33.33333333%;
  }
  .jexjs-col-lg-pull-3 {
    right: 25%;
  }
  .jexjs-col-lg-pull-2 {
    right: 16.66666667%;
  }
  .jexjs-col-lg-pull-1 {
    right: 8.33333333%;
  }
  .jexjs-col-lg-pull-0 {
    right: auto;
  }
  .jexjs-col-lg-push-12 {
    left: 100%;
  }
  .jexjs-col-lg-push-11 {
    left: 91.66666667%;
  }
  .jexjs-col-lg-push-10 {
    left: 83.33333333%;
  }
  .jexjs-col-lg-push-9 {
    left: 75%;
  }
  .jexjs-col-lg-push-8 {
    left: 66.66666667%;
  }
  .jexjs-col-lg-push-7 {
    left: 58.33333333%;
  }
  .jexjs-col-lg-push-6 {
    left: 50%;
  }
  .jexjs-col-lg-push-5 {
    left: 41.66666667%;
  }
  .jexjs-col-lg-push-4 {
    left: 33.33333333%;
  }
  .jexjs-col-lg-push-3 {
    left: 25%;
  }
  .jexjs-col-lg-push-2 {
    left: 16.66666667%;
  }
  .jexjs-col-lg-push-1 {
    left: 8.33333333%;
  }
  .jexjs-col-lg-push-0 {
    left: auto;
  }
  .jexjs-col-lg-offset-12 {
    margin-left: 100%;
  }
  .jexjs-col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .jexjs-col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .jexjs-col-lg-offset-9 {
    margin-left: 75%;
  }
  .jexjs-col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .jexjs-col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .jexjs-col-lg-offset-6 {
    margin-left: 50%;
  }
  .jexjs-col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .jexjs-col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .jexjs-col-lg-offset-3 {
    margin-left: 25%;
  }
  .jexjs-col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .jexjs-col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .jexjs-col-lg-offset-0 {
    margin-left: 0%;
  }
}
/** TABLE  START **/
.jexjs-table {
  border-collapse: collapse !important;
  border-spacing: 0;
  background-color: transparent;
  width: 100%;
  max-width: 100%;
  margin-bottom: 14px;
}

.jexjs-table thead {
  display: table-header-group;
}

.jexjs-table tr {
  page-break-inside: avoid;
}

.jexjs-table td,
.jexjs-table th {
  padding: 0;
  background-color: #fff !important;
}

.jexjs-table-bordered th,
.jexjs-table-bordered td {
  border: 1px solid #ddd !important;
}

.jexjs-table > thead > tr > th,
.jexjs-table > tbody > tr > th,
.jexjs-table > tfoot > tr > th,
.jexjs-table > thead > tr > td,
.jexjs-table > tbody > tr > td,
.jexjs-table > tfoot > tr > td {
  padding: 6px;
  line-height: 1.2;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

.jexjs-table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #dddddd;
}

.jexjs-table > caption + thead > tr:first-child > th,
.jexjs-table > colgroup + thead > tr:first-child > th,
.jexjs-table > thead:first-child > tr:first-child > th,
.jexjs-table > caption + thead > tr:first-child > td,
.jexjs-table > colgroup + thead > tr:first-child > td,
.jexjs-table > thead:first-child > tr:first-child > td {
  border-top: 0;
}

.jexjs-table > tbody + tbody {
  border-top: 2px solid #dddddd;
}

.jexjs-table .jexjs-table {
  background-color: #ffffff;
}

.jexjs-table-condensed > thead > tr > th,
.jexjs-table-condensed > tbody > tr > th,
.jexjs-table-condensed > tfoot > tr > th,
.jexjs-table-condensed > thead > tr > td,
.jexjs-table-condensed > tbody > tr > td,
.jexjs-table-condensed > tfoot > tr > td {
  padding: 4px;
}

.jexjs-table-bordered {
  border: 1px solid #dddddd;
}

.jexjs-table-bordered > thead > tr > th,
.jexjs-table-bordered > tbody > tr > th,
.jexjs-table-bordered > tfoot > tr > th,
.jexjs-table-bordered > thead > tr > td,
.jexjs-table-bordered > tbody > tr > td,
.jexjs-table-bordered > tfoot > tr > td {
  border: 1px solid #dddddd;
}

.jexjs-table-bordered > thead > tr > th,
.jexjs-table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}

.jexjs-table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.jexjs-table-hover > tbody > tr:hover {
  background-color: #f0f1f3;
}

table col[class*=jexjs-col-] {
  position: static;
  float: none;
  display: table-column;
}

table td[class*=jexjs-col-],
table th[class*=jexjs-col-] {
  position: static;
  float: none;
  display: table-cell;
}

.jexjs-table > thead > tr > td.jexjs-active,
.jexjs-table > tbody > tr > td.jexjs-active,
.jexjs-table > tfoot > tr > td.jexjs-active,
.jexjs-table > thead > tr > th.jexjs-active,
.jexjs-table > tbody > tr > th.jexjs-active,
.jexjs-table > tfoot > tr > th.jexjs-active,
.jexjs-table > thead > tr.jexjs-active > td,
.jexjs-table > tbody > tr.jexjs-active > td,
.jexjs-table > tfoot > tr.jexjs-active > td,
.jexjs-table > thead > tr.jexjs-active > th,
.jexjs-table > tbody > tr.jexjs-active > th,
.jexjs-table > tfoot > tr.jexjs-active > th {
  background-color: #f0f1f3;
}

.jexjs-table-hover > tbody > tr > td.jexjs-active:hover,
.jexjs-table-hover > tbody > tr > th.jexjs-active:hover,
.jexjs-table-hover > tbody > tr.jexjs-active:hover > td,
.jexjs-table-hover > tbody > tr:hover > .jexjs-active,
.jexjs-table-hover > tbody > tr.jexjs-active:hover > th {
  background-color: #e2e4e8;
}

.jexjs-table > thead > tr > td.jexjs-success,
.jexjs-table > tbody > tr > td.jexjs-success,
.jexjs-table > tfoot > tr > td.jexjs-success,
.jexjs-table > thead > tr > th.jexjs-success,
.jexjs-table > tbody > tr > th.jexjs-success,
.jexjs-table > tfoot > tr > th.jexjs-success,
.jexjs-table > thead > tr.jexjs-success > td,
.jexjs-table > tbody > tr.jexjs-success > td,
.jexjs-table > tfoot > tr.jexjs-success > td,
.jexjs-table > thead > tr.jexjs-success > th,
.jexjs-table > tbody > tr.jexjs-success > th,
.jexjs-table > tfoot > tr.jexjs-success > th {
  background-color: #dff0d8;
}

.jexjs-table-hover > tbody > tr > td.jexjs-success:hover,
.jexjs-table-hover > tbody > tr > th.jexjs-success:hover,
.jexjs-table-hover > tbody > tr.jexjs-success:hover > td,
.jexjs-table-hover > tbody > tr:hover > .jexjs-success,
.jexjs-table-hover > tbody > tr.jexjs-success:hover > th {
  background-color: #d0e9c6;
}

.jexjs-table > thead > tr > td.jexjs-info,
.jexjs-table > tbody > tr > td.jexjs-info,
.jexjs-table > tfoot > tr > td.jexjs-info,
.jexjs-table > thead > tr > th.jexjs-info,
.jexjs-table > tbody > tr > th.jexjs-info,
.jexjs-table > tfoot > tr > th.jexjs-info,
.jexjs-table > thead > tr.jexjs-info > td,
.jexjs-table > tbody > tr.jexjs-info > td,
.jexjs-table > tfoot > tr.jexjs-info > td,
.jexjs-table > thead > tr.jexjs-info > th,
.jexjs-table > tbody > tr.jexjs-info > th,
.jexjs-table > tfoot > tr.jexjs-info > th {
  background-color: #d9edf7;
}

.jexjs-table-hover > tbody > tr > td.jexjs-info:hover,
.jexjs-table-hover > tbody > tr > th.jexjs-info:hover,
.jexjs-table-hover > tbody > tr.jexjs-info:hover > td,
.jexjs-table-hover > tbody > tr:hover > .jexjs-info,
.jexjs-table-hover > tbody > tr.jexjs-info:hover > th {
  background-color: #c4e3f3;
}

.jexjs-table > thead > tr > td.jexjs-warning,
.jexjs-table > tbody > tr > td.jexjs-warning,
.jexjs-table > tfoot > tr > td.jexjs-warning,
.jexjs-table > thead > tr > th.jexjs-warning,
.jexjs-table > tbody > tr > th.jexjs-warning,
.jexjs-table > tfoot > tr > th.jexjs-warning,
.jexjs-table > thead > tr.jexjs-warning > td,
.jexjs-table > tbody > tr.jexjs-warning > td,
.jexjs-table > tfoot > tr.jexjs-warning > td,
.jexjs-table > thead > tr.jexjs-warning > th,
.jexjs-table > tbody > tr.jexjs-warning > th,
.jexjs-table > tfoot > tr.jexjs-warning > th {
  background-color: #fcf8e3;
}

.jexjs-table-hover > tbody > tr > td.jexjs-warning:hover,
.jexjs-table-hover > tbody > tr > th.jexjs-warning:hover,
.jexjs-table-hover > tbody > tr.jexjs-warning:hover > td,
.jexjs-table-hover > tbody > tr:hover > .jexjs-warning,
.jexjs-table-hover > tbody > tr.jexjs-warning:hover > th {
  background-color: #faf2cc;
}

.jexjs-table > thead > tr > td.jexjs-danger,
.jexjs-table > tbody > tr > td.jexjs-danger,
.jexjs-table > tfoot > tr > td.jexjs-danger,
.jexjs-table > thead > tr > th.jexjs-danger,
.jexjs-table > tbody > tr > th.jexjs-danger,
.jexjs-table > tfoot > tr > th.jexjs-danger,
.jexjs-table > thead > tr.jexjs-danger > td,
.jexjs-table > tbody > tr.jexjs-danger > td,
.jexjs-table > tfoot > tr.jexjs-danger > td,
.jexjs-table > thead > tr.jexjs-danger > th,
.jexjs-table > tbody > tr.jexjs-danger > th,
.jexjs-table > tfoot > tr.jexjs-danger > th {
  background-color: #f2dede;
}

.jexjs-table-hover > tbody > tr > td.jexjs-danger:hover,
.jexjs-table-hover > tbody > tr > th.jexjs-danger:hover,
.jexjs-table-hover > tbody > tr.jexjs-danger:hover > td,
.jexjs-table-hover > tbody > tr:hover > .jexjs-danger,
.jexjs-table-hover > tbody > tr.jexjs-danger:hover > th {
  background-color: #ebcccc;
}

.jexjs-table-responsive {
  overflow-x: auto;
  min-height: 0.01%;
}

@media screen and (max-width: 767px) {
  .jexjs-table-responsive {
    width: 100%;
    margin-bottom: 10.5px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #dddddd;
  }
  .jexjs-table-responsive > .jexjs-table {
    margin-bottom: 0;
  }
  .jexjs-table-responsive > .jexjs-table > thead > tr > th,
  .jexjs-table-responsive > .jexjs-table > tbody > tr > th,
  .jexjs-table-responsive > .jexjs-table > tfoot > tr > th,
  .jexjs-table-responsive > .jexjs-table > thead > tr > td,
  .jexjs-table-responsive > .jexjs-table > tbody > tr > td,
  .jexjs-table-responsive > .jexjs-table > tfoot > tr > td {
    white-space: nowrap;
  }
  .jexjs-table-responsive > .jexjs-table-bordered {
    border: 0;
  }
  .jexjs-table-responsive > .jexjs-table-bordered > thead > tr > th:first-child,
  .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr > th:first-child,
  .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr > th:first-child,
  .jexjs-table-responsive > .jexjs-table-bordered > thead > tr > td:first-child,
  .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr > td:first-child,
  .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .jexjs-table-responsive > .jexjs-table-bordered > thead > tr > th:last-child,
  .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr > th:last-child,
  .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr > th:last-child,
  .jexjs-table-responsive > .jexjs-table-bordered > thead > tr > td:last-child,
  .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr > td:last-child,
  .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr:last-child > th,
  .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr:last-child > th,
  .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr:last-child > td,
  .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}
/** TABLE  END **/
.jexjs-form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.jexjs-form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.jexjs-form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.jexjs-form-control:-ms-input-placeholder {
  color: #999;
}

.jexjs-form-control::-webkit-input-placeholder {
  color: #999;
}

.jexjs-form-control[disabled],
.jexjs-form-control[readonly],
fieldset[disabled].jex .jexjs-form-control {
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}

textarea.jexjs-form-control {
  height: auto;
}

input[type=search].jex {
  -webkit-appearance: none;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type=date].jex,
  input[type=time].jex,
  input[type=datetime-local].jex,
  input[type=month].jex {
    line-height: 34px;
  }
  input[type=date].jexjs-input-sm,
  input[type=time].jexjs-input-sm,
  input[type=datetime-local].jexjs-input-sm,
  input[type=month].jexjs-input-sm,
  .jexjs-input-group-sm input[type=date],
  .jexjs-input-group-sm input[type=time],
  .jexjs-input-group-sm input[type=datetime-local],
  .jexjs-input-group-sm input[type=month] {
    line-height: 30px;
  }
  input[type=date].jexjs-input-lg,
  input[type=time].jexjs-input-lg,
  input[type=datetime-local].jexjs-input-lg,
  input[type=month].jexjs-input-lg,
  .jexjs-input-group-lg input[type=date].jex,
  .jexjs-input-group-lg input[type=time].jex,
  .jexjs-input-group-lg input[type=datetime-local].jex,
  .jexjs-input-group-lg input[type=month].jex {
    line-height: 46px;
  }
}
.jexjs-form-group {
  margin-bottom: 15px;
}

.jexjs-radio,
.jexjs-checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.jexjs-radio label,
.jexjs-checkbox label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}

.jexjs-radio input[type=radio],
.jexjs-radio-inline input[type=radio],
.jexjs-checkbox input[type=checkbox],
.jexjs-checkbox-inline input[type=checkbox] {
  position: absolute;
  margin-top: 4px \9 ;
  margin-left: -20px;
}

.jexjs-radio + .jexjs-radio,
.jexjs-checkbox + .jexjs-checkbox {
  margin-top: -5px;
}

.jexjs-radio-inline,
.jexjs-checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}

.jexjs-radio-inline + .jexjs-radio-inline,
.jexjs-checkbox-inline + .jexjs-checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}

input[type=radio][disabled].jex,
input[type=checkbox][disabled].jex,
input[type=radio].jexjs-disabled.jex,
input[type=checkbox].jexjs-disabled.jex,
fieldset[disabled].jex input[type=radio],
fieldset[disabled].jex input[type=checkbox] {
  cursor: not-allowed;
}

.jexjs-radio-inline.jexjs-disabled,
.jexjs-checkbox-inline.jexjs-disabled,
fieldset[disabled].jex .jexjs-radio-inline,
fieldset[disabled].jex .jexjs-checkbox-inline {
  cursor: not-allowed;
}

.jexjs-radio.jexjs-disabled label,
.jexjs-checkbox.jexjs-disabled label,
fieldset[disabled].jex .jexjs-radio label,
fieldset[disabled].jex .jexjs-checkbox label {
  cursor: not-allowed;
}

.jexjs-form-control-static {
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}

.jexjs-form-control-static.jexjs-input-lg,
.jexjs-form-control-static.jexjs-input-sm {
  padding-right: 0;
  padding-left: 0;
}

.jexjs-input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

select.jexjs-input-sm {
  height: 30px;
  line-height: 30px;
}

textarea.jexjs-input-sm,
select[multiple].jexjs-input-sm {
  height: auto;
}

.jexjs-form-group-sm .jexjs-form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

select.jexjs-form-group-sm .jexjs-form-control {
  height: 30px;
  line-height: 30px;
}

textarea.jexjs-form-group-sm .jexjs-form-control,
select[multiple].jexjs-form-group-sm .jexjs-form-control {
  height: auto;
}

.jexjs-form-group-sm .jexjs-form-control-static {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.jexjs-input-lg {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

select.jexjs-input-lg {
  height: 46px;
  line-height: 46px;
}

textarea.jexjs-input-lg,
select[multiple].jexjs-input-lg {
  height: auto;
}

.jexjs-form-group-lg .jexjs-form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

select.jexjs-form-group-lg .jexjs-form-control {
  height: 46px;
  line-height: 46px;
}

textarea.jexjs-form-group-lg .jexjs-form-control,
select[multiple].jexjs-form-group-lg .jexjs-form-control {
  height: auto;
}

.jexjs-form-group-lg .jexjs-form-control-static {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}

.jexjs-has-feedback {
  position: relative;
}

.jexjs-has-feedback .jexjs-form-control {
  padding-right: 42.5px;
}

.jexjs-form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
}

.jexjs-input-lg + .jexjs-form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px;
}

.jexjs-input-sm + .jexjs-form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.jexjs-has-success .jexjs-help-block,
.jexjs-has-success .jexjs-control-label,
.jexjs-has-success .jexjs-radio,
.jexjs-has-success .jexjs-checkbox,
.jexjs-has-success .jexjs-radio-inline,
.jexjs-has-success .jexjs-checkbox-inline,
.jexjs-has-success.jexjs-radio label,
.jexjs-has-success.jexjs-checkbox label,
.jexjs-has-success.jexjs-radio-inline label,
.jexjs-has-success.jexjs-checkbox-inline label {
  color: #3c763d;
}

.jexjs-has-success .jexjs-form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.jexjs-has-success .jexjs-form-control:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}

.jexjs-has-success .jexjs-input-group-addon {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #3c763d;
}

.jexjs-has-success .jexjs-form-control-feedback {
  color: #3c763d;
}

.jexjs-has-warning .jexjs-help-block,
.jexjs-has-warning .jexjs-control-label,
.jexjs-has-warning .jexjs-radio,
.jexjs-has-warning .jexjs-checkbox,
.jexjs-has-warning .jexjs-radio-inline,
.jexjs-has-warning .jexjs-checkbox-inline,
.jexjs-has-warning.jexjs-radio label,
.jexjs-has-warning.jexjs-checkbox label,
.jexjs-has-warning.jexjs-radio-inline label,
.jexjs-has-warning.jexjs-checkbox-inline label {
  color: #8a6d3b;
}

.jexjs-has-warning .jexjs-form-control {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.jexjs-has-warning .jexjs-form-control:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}

.jexjs-has-warning .jexjs-input-group-addon {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #8a6d3b;
}

.jexjs-has-warning .jexjs-form-control-feedback {
  color: #8a6d3b;
}

.jexjs-has-error .jexjs-help-block,
.jexjs-has-error .jexjs-control-label,
.jexjs-has-error .jexjs-radio,
.jexjs-has-error .jexjs-checkbox,
.jexjs-has-error .jexjs-radio-inline,
.jexjs-has-error .jexjs-checkbox-inline,
.jexjs-has-error.jexjs-radio label,
.jexjs-has-error.jexjs-checkbox label,
.jexjs-has-error.jexjs-radio-inline label,
.jexjs-has-error.jexjs-checkbox-inline label {
  color: #a94442;
}

.jexjs-has-error .jexjs-form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.jexjs-has-error .jexjs-form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}

.jexjs-has-error .jexjs-input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}

.jexjs-has-error .jexjs-form-control-feedback {
  color: #a94442;
}

.jexjs-has-feedback label ~ .jexjs-form-control-feedback {
  top: 25px;
}

.jexjs-has-feedback label.sr-only ~ .jexjs-form-control-feedback {
  top: 0;
}

.jexjs-help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

@media (min-width: 768px) {
  .jexjs-form-inline .jexjs-form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .jexjs-form-inline .jexjs-form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .jexjs-form-inline .jexjs-form-control-static {
    display: inline-block;
  }
  .jexjs-form-inline .jexjs-input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .jexjs-form-inline .jexjs-input-group .jexjs-input-group-addon,
  .jexjs-form-inline .jexjs-input-group .jexjs-input-group-btn,
  .jexjs-form-inline .jexjs-input-group .jexjs-form-control {
    width: auto;
  }
  .jexjs-form-inline .jexjs-input-group > .jexjs-form-control {
    width: 100%;
  }
  .jexjs-form-inline .jexjs-control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .jexjs-form-inline .jexjs-radio,
  .jexjs-form-inline .jexjs-checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .jexjs-form-inline .jexjs-radio label,
  .jexjs-form-inline .jexjs-checkbox label {
    padding-left: 0;
  }
  .jexjs-form-inline .jexjs-radio input[type=radio],
  .jexjs-form-inline .jexjs-checkbox input[type=checkbox] {
    position: relative;
    margin-left: 0;
  }
  .jexjs-form-inline .jexjs-has-feedback .jexjs-form-control-feedback {
    top: 0;
  }
}
.jexjs-form-horizontal .jexjs-radio,
.jexjs-form-horizontal .jexjs-checkbox,
.jexjs-form-horizontal .jexjs-radio-inline,
.jexjs-form-horizontal .jexjs-checkbox-inline {
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}

.jexjs-form-horizontal .jexjs-radio,
.jexjs-form-horizontal .jexjs-checkbox {
  min-height: 27px;
}

.jexjs-form-horizontal .jexjs-form-group {
  margin-right: -15px;
  margin-left: -15px;
}

@media (min-width: 768px) {
  .jexjs-form-horizontal .jexjs-control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
  }
}
.jexjs-form-horizontal .jexjs-has-feedback .jexjs-form-control-feedback {
  right: 15px;
}

@media (min-width: 768px) {
  .jexjs-form-horizontal .jexjs-form-group-lg .jexjs-control-label {
    padding-top: 14.333333px;
  }
}
@media (min-width: 768px) {
  .jexjs-form-horizontal .jexjs-form-group-sm .jexjs-control-label {
    padding-top: 6px;
  }
}
.jexjs-btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.jexjs-btn:focus,
.jexjs-btn:active:focus,
.jexjs-btn.jexjs-active:focus,
.jexjs-btn.focus,
.jexjs-btn:active.focus,
.jexjs-btn.jexjs-active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.jexjs-btn:hover,
.jexjs-btn:focus,
.jexjs-btn.focus {
  color: #333;
  text-decoration: none;
}

.jexjs-btn:active,
.jexjs-btn.jexjs-active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.jexjs-btn.jexjs-disabled,
.jexjs-btn[disabled],
fieldset[disabled].jex .jexjs-btn {
  pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: 0.65;
}

.jexjs-btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.jexjs-btn-default:hover,
.jexjs-btn-default:focus,
.jexjs-btn-default.focus,
.jexjs-btn-default:active,
.jexjs-btn-default.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.jexjs-btn-default:active,
.jexjs-btn-default.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-default {
  background-image: none;
}

.jexjs-btn-default.jexjs-disabled,
.jexjs-btn-default[disabled],
fieldset[disabled].jex .jexjs-btn-default,
.jexjs-btn-default.jexjs-disabled:hover,
.jexjs-btn-default[disabled]:hover,
fieldset[disabled].jex .jexjs-btn-default:hover,
.jexjs-btn-default.jexjs-disabled:focus,
.jexjs-btn-default[disabled]:focus,
fieldset[disabled].jex .jexjs-btn-default:focus,
.jexjs-btn-default.jexjs-disabled.focus,
.jexjs-btn-default[disabled].focus,
fieldset[disabled].jex .jexjs-btn-default.focus,
.jexjs-btn-default.jexjs-disabled:active,
.jexjs-btn-default[disabled]:active,
fieldset[disabled].jex .jexjs-btn-default:active,
.jexjs-btn-default.jexjs-disabled.jexjs-active,
.jexjs-btn-default[disabled].jexjs-active,
fieldset[disabled].jex .jexjs-btn-default.jexjs-active {
  background-color: #fff;
  border-color: #ccc;
}

.jexjs-btn-default .jexjs-badge {
  color: #fff;
  background-color: #333;
}

.jexjs-btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.jexjs-btn-primary:hover,
.jexjs-btn-primary:focus,
.jexjs-btn-primary.focus,
.jexjs-btn-primary:active,
.jexjs-btn-primary.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-primary {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}

.jexjs-btn-primary:active,
.jexjs-btn-primary.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-primary {
  background-image: none;
}

.jexjs-btn-primary.jexjs-disabled,
.jexjs-btn-primary[disabled],
fieldset[disabled].jex .jexjs-btn-primary,
.jexjs-btn-primary.jexjs-disabled:hover,
.jexjs-btn-primary[disabled]:hover,
fieldset[disabled].jex .jexjs-btn-primary:hover,
.jexjs-btn-primary.jexjs-disabled:focus,
.jexjs-btn-primary[disabled]:focus,
fieldset[disabled].jex .jexjs-btn-primary:focus,
.jexjs-btn-primary.jexjs-disabled.focus,
.jexjs-btn-primary[disabled].focus,
fieldset[disabled].jex .jexjs-btn-primary.focus,
.jexjs-btn-primary.jexjs-disabled:active,
.jexjs-btn-primary[disabled]:active,
fieldset[disabled].jex .jexjs-btn-primary:active,
.jexjs-btn-primary.jexjs-disabled.jexjs-active,
.jexjs-btn-primary[disabled].jexjs-active,
fieldset[disabled].jex .jexjs-btn-primary.jexjs-active {
  background-color: #337ab7;
  border-color: #2e6da4;
}

.jexjs-btn-primary .jexjs-badge {
  color: #337ab7;
  background-color: #fff;
}

.jexjs-btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.jexjs-btn-success:hover,
.jexjs-btn-success:focus,
.jexjs-btn-success.focus,
.jexjs-btn-success:active,
.jexjs-btn-success.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-success {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

.jexjs-btn-success:active,
.jexjs-btn-success.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-success {
  background-image: none;
}

.jexjs-btn-success.jexjs-disabled,
.jexjs-btn-success[disabled],
fieldset[disabled].jex .jexjs-btn-success,
.jexjs-btn-success.jexjs-disabled:hover,
.jexjs-btn-success[disabled]:hover,
fieldset[disabled].jex .jexjs-btn-success:hover,
.jexjs-btn-success.jexjs-disabled:focus,
.jexjs-btn-success[disabled]:focus,
fieldset[disabled].jex .jexjs-btn-success:focus,
.jexjs-btn-success.jexjs-disabled.focus,
.jexjs-btn-success[disabled].focus,
fieldset[disabled].jex .jexjs-btn-success.focus,
.jexjs-btn-success.jexjs-disabled:active,
.jexjs-btn-success[disabled]:active,
fieldset[disabled].jex .jexjs-btn-success:active,
.jexjs-btn-success.jexjs-disabled.jexjs-active,
.jexjs-btn-success[disabled].jexjs-active,
fieldset[disabled].jex .jexjs-btn-success.jexjs-active {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.jexjs-btn-success .jexjs-badge {
  color: #5cb85c;
  background-color: #fff;
}

.jexjs-btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

.jexjs-btn-info:hover,
.jexjs-btn-info:focus,
.jexjs-btn-info.focus,
.jexjs-btn-info:active,
.jexjs-btn-info.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-info {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}

.jexjs-btn-info:active,
.jexjs-btn-info.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-info {
  background-image: none;
}

.jexjs-btn-info.jexjs-disabled,
.jexjs-btn-info[disabled],
fieldset[disabled].jex .jexjs-btn-info,
.jexjs-btn-info.jexjs-disabled:hover,
.jexjs-btn-info[disabled]:hover,
fieldset[disabled].jex .jexjs-btn-info:hover,
.jexjs-btn-info.jexjs-disabled:focus,
.jexjs-btn-info[disabled]:focus,
fieldset[disabled].jex .jexjs-btn-info:focus,
.jexjs-btn-info.jexjs-disabled.focus,
.jexjs-btn-info[disabled].focus,
fieldset[disabled].jex .jexjs-btn-info.focus,
.jexjs-btn-info.jexjs-disabled:active,
.jexjs-btn-info[disabled]:active,
fieldset[disabled].jex .jexjs-btn-info:active,
.jexjs-btn-info.jexjs-disabled.jexjs-active,
.jexjs-btn-info[disabled].jexjs-active,
fieldset[disabled].jex .jexjs-btn-info.jexjs-active {
  background-color: #5bc0de;
  border-color: #46b8da;
}

.jexjs-btn-info .jexjs-badge {
  color: #5bc0de;
  background-color: #fff;
}

.jexjs-btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

.jexjs-btn-warning:hover,
.jexjs-btn-warning:focus,
.jexjs-btn-warning.focus,
.jexjs-btn-warning:active,
.jexjs-btn-warning.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-warning {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}

.jexjs-btn-warning:active,
.jexjs-btn-warning.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-warning {
  background-image: none;
}

.jexjs-btn-warning.jexjs-disabled,
.jexjs-btn-warning[disabled],
fieldset[disabled].jex .jexjs-btn-warning,
.jexjs-btn-warning.jexjs-disabled:hover,
.jexjs-btn-warning[disabled]:hover,
fieldset[disabled].jex .jexjs-btn-warning:hover,
.jexjs-btn-warning.jexjs-disabled:focus,
.jexjs-btn-warning[disabled]:focus,
fieldset[disabled].jex .jexjs-btn-warning:focus,
.jexjs-btn-warning.jexjs-disabled.focus,
.jexjs-btn-warning[disabled].focus,
fieldset[disabled].jex .jexjs-btn-warning.focus,
.jexjs-btn-warning.jexjs-disabled:active,
.jexjs-btn-warning[disabled]:active,
fieldset[disabled].jex .jexjs-btn-warning:active,
.jexjs-btn-warning.jexjs-disabled.jexjs-active,
.jexjs-btn-warning[disabled].jexjs-active,
fieldset[disabled].jex .jexjs-btn-warning.jexjs-active {
  background-color: #f0ad4e;
  border-color: #eea236;
}

.jexjs-btn-warning .jexjs-badge {
  color: #f0ad4e;
  background-color: #fff;
}

.jexjs-btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}

.jexjs-btn-danger:hover,
.jexjs-btn-danger:focus,
.jexjs-btn-danger.focus,
.jexjs-btn-danger:active,
.jexjs-btn-danger.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-danger {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}

.jexjs-btn-danger:active,
.jexjs-btn-danger.jexjs-active,
.jexjs-open > .jexjs-dropdown-toggle.jexjs-btn-danger {
  background-image: none;
}

.jexjs-btn-danger.jexjs-disabled,
.jexjs-btn-danger[disabled],
fieldset[disabled].jex .jexjs-btn-danger,
.jexjs-btn-danger.jexjs-disabled:hover,
.jexjs-btn-danger[disabled]:hover,
fieldset[disabled].jex .jexjs-btn-danger:hover,
.jexjs-btn-danger.jexjs-disabled:focus,
.jexjs-btn-danger[disabled]:focus,
fieldset[disabled].jex .jexjs-btn-danger:focus,
.jexjs-btn-danger.jexjs-disabled.focus,
.jexjs-btn-danger[disabled].focus,
fieldset[disabled].jex .jexjs-btn-danger.focus,
.jexjs-btn-danger.jexjs-disabled:active,
.jexjs-btn-danger[disabled]:active,
fieldset[disabled].jex .jexjs-btn-danger:active,
.jexjs-btn-danger.jexjs-disabled.jexjs-active,
.jexjs-btn-danger[disabled].jexjs-active,
fieldset[disabled].jex .jexjs-btn-danger.jexjs-active {
  background-color: #d9534f;
  border-color: #d43f3a;
}

.jexjs-btn-danger .jexjs-badge {
  color: #d9534f;
  background-color: #fff;
}

.jexjs-btn-link {
  font-weight: normal;
  color: #337ab7;
  border-radius: 0;
}

.jexjs-btn-link,
.jexjs-btn-link:active,
.jexjs-btn-link.jexjs-active,
.jexjs-btn-link[disabled],
fieldset[disabled].jex .jexjs-btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.jexjs-btn-link,
.jexjs-btn-link:hover,
.jexjs-btn-link:focus,
.jexjs-btn-link:active {
  border-color: transparent;
}

.jexjs-btn-link:hover,
.jexjs-btn-link:focus {
  color: #23527c;
  text-decoration: underline;
  background-color: transparent;
}

.jexjs-btn-link[disabled]:hover,
fieldset[disabled].jex .jexjs-btn-link:hover,
.jexjs-btn-link[disabled]:focus,
fieldset[disabled].jex .jexjs-btn-link:focus {
  color: #777;
  text-decoration: none;
}

.jexjs-btn-lg,
.jexjs-btn-group-lg > .jexjs-btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

.jexjs-btn-sm,
.jexjs-btn-group-sm > .jexjs-btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.jexjs-btn-xs,
.jexjs-btn-group-xs > .jexjs-btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.jexjs-btn-block {
  display: block;
  width: 100%;
}

.jexjs-btn-block + .jexjs-btn-block {
  margin-top: 5px;
}

input[type=submit].jexjs-btn-block,
input[type=reset].jexjs-btn-block,
input[type=button].jexjs-btn-block {
  width: 100%;
}

.jexjs-btn-group,
.jexjs-btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.jexjs-btn-group > .jexjs-btn,
.jexjs-btn-group-vertical > .jexjs-btn {
  position: relative;
  float: left;
}

.jexjs-btn-group > .jexjs-btn:hover,
.jexjs-btn-group-vertical > .jexjs-btn:hover,
.jexjs-btn-group > .jexjs-btn:focus,
.jexjs-btn-group-vertical > .jexjs-btn:focus,
.jexjs-btn-group > .jexjs-btn:active,
.jexjs-btn-group-vertical > .jexjs-btn:active,
.jexjs-btn-group > .jexjs-btn.jexjs-active,
.jexjs-btn-group-vertical > .jexjs-btn.jexjs-active {
  z-index: 2;
}

.jexjs-btn-group .jexjs-btn + .jexjs-btn,
.jexjs-btn-group .jexjs-btn + .jexjs-btn-group,
.jexjs-btn-group .jexjs-btn-group + .jexjs-btn,
.jexjs-btn-group .jexjs-btn-group + .jexjs-btn-group {
  margin-left: -1px;
}

.jexjs-btn-toolbar {
  margin-left: -5px;
}

.jexjs-btn-toolbar .jexjs-btn,
.jexjs-btn-toolbar .jexjs-btn-group,
.jexjs-btn-toolbar .jexjs-input-group {
  float: left;
}

.jexjs-btn-toolbar > .jexjs-btn,
.jexjs-btn-toolbar > .jexjs-btn-group,
.jexjs-btn-toolbar > .jexjs-input-group {
  margin-left: 5px;
}

.jexjs-btn-group > .jexjs-btn:not(:first-child):not(:last-child):not(.jexjs-dropdown-toggle) {
  border-radius: 0;
}

.jexjs-btn-group > .jexjs-btn:first-child {
  margin-left: 0;
}

.jexjs-btn-group > .jexjs-btn:first-child:not(:last-child):not(.jexjs-dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.jexjs-btn-group > .jexjs-btn:last-child:not(:first-child),
.jexjs-btn-group > .jexjs-dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.jexjs-btn-group > .jexjs-btn-group {
  float: left;
}

.jexjs-btn-group > .jexjs-btn-group:not(:first-child):not(:last-child) > .jexjs-btn {
  border-radius: 0;
}

.jexjs-btn-group > .jexjs-btn-group:first-child:not(:last-child) > .jexjs-btn:last-child,
.jexjs-btn-group > .jexjs-btn-group:first-child:not(:last-child) > .jexjs-dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.jexjs-btn-group > .jexjs-btn-group:last-child:not(:first-child) > .jexjs-btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.jexjs-btn-group .jexjs-dropdown-toggle:active,
.jexjs-btn-group.jexjs-open .jexjs-dropdown-toggle {
  outline: 0;
}

.jexjs-btn-group > .jexjs-btn + .jexjs-dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
}

.jexjs-btn-group > .jexjs-btn-lg + .jexjs-dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}

.jexjs-btn-group.jexjs-open .jexjs-dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.jexjs-btn-group.jexjs-open .jexjs-dropdown-toggle.jexjs-btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.jexjs-btn .caret {
  margin-left: 0;
}

.jexjs-btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}

.jexjs-dropup .jexjs-btn-lg .caret {
  border-width: 0 5px 5px;
}

.jexjs-btn-group-vertical > .jexjs-btn,
.jexjs-btn-group-vertical > .jexjs-btn-group,
.jexjs-btn-group-vertical > .jexjs-btn-group > .jexjs-btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}

.jexjs-btn-group-vertical > .jexjs-btn-group > .jexjs-btn {
  float: none;
}

.jexjs-btn-group-vertical > .jexjs-btn + .jexjs-btn,
.jexjs-btn-group-vertical > .jexjs-btn + .jexjs-btn-group,
.jexjs-btn-group-vertical > .jexjs-btn-group + .jexjs-btn,
.jexjs-btn-group-vertical > .jexjs-btn-group + .jexjs-btn-group {
  margin-top: -1px;
  margin-left: 0;
}

.jexjs-btn-group-vertical > .jexjs-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.jexjs-btn-group-vertical > .jexjs-btn:first-child:not(:last-child) {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.jexjs-btn-group-vertical > .jexjs-btn:last-child:not(:first-child) {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.jexjs-btn-group-vertical > .jexjs-btn-group:not(:first-child):not(:last-child) > .jexjs-btn {
  border-radius: 0;
}

.jexjs-btn-group-vertical > .jexjs-btn-group:first-child:not(:last-child) > .jexjs-btn:last-child,
.jexjs-btn-group-vertical > .jexjs-btn-group:first-child:not(:last-child) > .jexjs-dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.jexjs-btn-group-vertical > .jexjs-btn-group:last-child:not(:first-child) > .jexjs-btn:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.jexjs-btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.jexjs-btn-group-justified > .jexjs-btn,
.jexjs-btn-group-justified > .jexjs-btn-group {
  float: none;
  display: table-cell;
  width: 1%;
}

.jexjs-btn-group-justified > .jexjs-btn-group .jexjs-btn {
  width: 100%;
}

.jexjs-btn-group-justified > .jexjs-btn-group .jexjs-dropdown-menu {
  left: auto;
}

[data-toggle=buttons] > .jexjs-btn input[type=radio],
[data-toggle=buttons] > .jexjs-btn-group > .jexjs-btn input[type=radio],
[data-toggle=buttons] > .jexjs-btn input[type=checkbox],
[data-toggle=buttons] > .jexjs-btn-group > .jexjs-btn input[type=checkbox] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.jexjs-nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.jexjs-nav > li {
  position: relative;
  display: block;
}

.jexjs-nav > li > a {
  position: relative;
  display: block;
  padding: 8px 10px;
}

.jexjs-nav > li > a:hover,
.jexjs-nav > li > a:focus {
  text-decoration: none;
  background-color: #e6e6e6;
}

.jexjs-nav > li.jexjs-disabled > a {
  color: #777777;
}

.jexjs-nav > li.jexjs-disabled > a:hover,
.jexjs-nav > li.jexjs-disabled > a:focus {
  color: #777777;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}

.jexjs-nav .jexjs-open > a,
.jexjs-nav .jexjs-open > a:hover,
.jexjs-nav .jexjs-open > a:focus {
  background-color: #e6e6e6;
  border-color: #08a9f4;
}

.jexjs-nav .jexjs-nav-divider {
  height: 1px;
  margin: 6px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.jexjs-nav > li > a > img {
  max-width: none;
}

.jexjs-nav-tabs {
  border-bottom: 1px solid #dddddd;
}

.jexjs-nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}

.jexjs-nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.jexjs-nav-tabs > li > a:hover {
  border-color: #e6e6e6 #e6e6e6 #dddddd;
}

.jexjs-nav-tabs > li.jexjs-active > a,
.jexjs-nav-tabs > li.jexjs-active > a:hover,
.jexjs-nav-tabs > li.jexjs-active > a:focus {
  color: #555555;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-bottom-color: transparent;
  cursor: default;
}

.jexjs-nav-tabs.jexjs-nav-justified {
  width: 100%;
  border-bottom: 0;
}

.jexjs-nav-tabs.jexjs-nav-justified > li {
  float: none;
}

.jexjs-nav-tabs.jexjs-nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}

.jexjs-nav-tabs.jexjs-nav-justified > .jexjs-dropdown .jexjs-dropdown-menu {
  top: auto;
  left: auto;
}

@media (min-width: 768px) {
  .jexjs-nav-tabs.jexjs-nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .jexjs-nav-tabs.jexjs-nav-justified > li > a {
    margin-bottom: 0;
  }
}
.jexjs-nav-tabs.jexjs-nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}

.jexjs-nav-tabs.jexjs-nav-justified > .jexjs-active > a,
.jexjs-nav-tabs.jexjs-nav-justified > .jexjs-active > a:hover,
.jexjs-nav-tabs.jexjs-nav-justified > .jexjs-active > a:focus {
  border: 1px solid #dddddd;
}

@media (min-width: 768px) {
  .jexjs-nav-tabs.jexjs-nav-justified > li > a {
    border-bottom: 1px solid #dddddd;
    border-radius: 4px 4px 0 0;
  }
  .jexjs-nav-tabs.jexjs-nav-justified > .jexjs-active > a,
  .jexjs-nav-tabs.jexjs-nav-justified > .jexjs-active > a:hover,
  .jexjs-nav-tabs.jexjs-nav-justified > .jexjs-active > a:focus {
    border-bottom-color: #ffffff;
  }
}
.jexjs-nav-pills > li {
  float: left;
}

.jexjs-nav-pills > li > a {
  border-radius: 4px;
}

.jexjs-nav-pills > li + li {
  margin-left: 2px;
}

.jexjs-nav-pills > li.jexjs-active > a,
.jexjs-nav-pills > li.jexjs-active > a:hover,
.jexjs-nav-pills > li.jexjs-active > a:focus {
  color: #ffffff;
  background-color: #08a9f4;
}

.jexjs-nav-stacked > li {
  float: none;
}

.jexjs-nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}

.jexjs-nav-justified {
  width: 100%;
}

.jexjs-nav-justified > li {
  float: none;
}

.jexjs-nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}

.jexjs-nav-justified > .jexjs-dropdown .jexjs-dropdown-menu {
  top: auto;
  left: auto;
}

@media (min-width: 768px) {
  .jexjs-nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .jexjs-nav-justified > li > a {
    margin-bottom: 0;
  }
}
.jexjs-nav-tabs-justified {
  border-bottom: 0;
}

.jexjs-nav-tabs-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}

.jexjs-nav-tabs-justified > .jexjs-active > a,
.jexjs-nav-tabs-justified > .jexjs-active > a:hover,
.jexjs-nav-tabs-justified > .jexjs-active > a:focus {
  border: 1px solid #dddddd;
}

@media (min-width: 768px) {
  .jexjs-nav-tabs-justified > li > a {
    border-bottom: 1px solid #dddddd;
    border-radius: 4px 4px 0 0;
  }
  .jexjs-nav-tabs-justified > .jexjs-active > a,
  .jexjs-nav-tabs-justified > .jexjs-active > a:hover,
  .jexjs-nav-tabs-justified > .jexjs-active > a:focus {
    border-bottom-color: #ffffff;
  }
}
.jexjs-tab-content > .jexjs-tab-pane {
  display: none;
}

.jexjs-tab-content > .jexjs-active {
  display: block;
}

.jexjs-nav-tabs .jexjs-dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.jexjs-navbar {
  position: relative;
  min-height: 45px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}

@media (min-width: 768px) {
  .jexjs-navbar {
    border-radius: 4px;
  }
}
@media (min-width: 768px) {
  .jexjs-navbar-header {
    float: left;
  }
}
.jexjs-navbar-collapse {
  overflow-x: visible;
  padding-right: 15px;
  padding-left: 15px;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch;
}

.jexjs-navbar-collapse.in {
  overflow-y: auto;
}

@media (min-width: 768px) {
  .jexjs-navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .jexjs-navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .jexjs-navbar-collapse.in {
    overflow-y: visible;
  }
  .jexjs-navbar-fixed-top .jexjs-navbar-collapse,
  .jexjs-navbar-static-top .jexjs-navbar-collapse,
  .jexjs-navbar-fixed-bottom .jexjs-navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }
}
.jexjs-navbar-fixed-top .jexjs-navbar-collapse,
.jexjs-navbar-fixed-bottom .jexjs-navbar-collapse {
  max-height: 340px;
}

@media (max-device-width: 480px) and (orientation: landscape) {
  .jexjs-navbar-fixed-top .jexjs-navbar-collapse,
  .jexjs-navbar-fixed-bottom .jexjs-navbar-collapse {
    max-height: 200px;
  }
}
.jexjs-container > .jexjs-navbar-header,
.jexjs-container-fluid > .jexjs-navbar-header,
.jexjs-container > .jexjs-navbar-collapse,
.jexjs-container-fluid > .jexjs-navbar-collapse {
  margin-right: -15px;
  margin-left: -15px;
}

@media (min-width: 768px) {
  .jexjs-container > .jexjs-navbar-header,
  .jexjs-container-fluid > .jexjs-navbar-header,
  .jexjs-container > .jexjs-navbar-collapse,
  .jexjs-container-fluid > .jexjs-navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}
.jexjs-navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px;
}

@media (min-width: 768px) {
  .jexjs-navbar-static-top {
    border-radius: 0;
  }
}
.jexjs-navbar-fixed-top,
.jexjs-navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

@media (min-width: 768px) {
  .jexjs-navbar-fixed-top,
  .jexjs-navbar-fixed-bottom {
    border-radius: 0;
  }
}
.jexjs-navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}

.jexjs-navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0;
  border-width: 1px 0 0;
}

.jexjs-navbar-brand {
  float: left;
  padding: 15.5px 15px;
  font-size: 15px;
  line-height: 14px;
  height: 45px;
}

.jexjs-navbar-brand:hover,
.jexjs-navbar-brand:focus {
  text-decoration: none;
}

.jexjs-navbar-brand > img {
  display: block;
}

@media (min-width: 768px) {
  .jexjs-navbar > .jexjs-container .jexjs-navbar-brand,
  .jexjs-navbar > .jexjs-container-fluid .jexjs-navbar-brand {
    margin-left: -15px;
  }
}
.jexjs-navbar-toggle {
  position: relative;
  float: right;
  margin-right: 15px;
  padding: 9px 10px;
  margin-top: 5.5px;
  margin-bottom: 5.5px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.jexjs-navbar-toggle:focus {
  outline: 0;
}

.jexjs-navbar-toggle .jexjs-icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.jexjs-navbar-toggle .jexjs-icon-bar + .jexjs-icon-bar {
  margin-top: 4px;
}

@media (min-width: 768px) {
  .jexjs-navbar-toggle {
    display: none;
  }
}
.jexjs-navbar-nav {
  margin: 7.75px -15px;
}

.jexjs-navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 14px;
}

@media (max-width: 767px) {
  .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > li > a,
  .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu .jexjs-dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > li > a {
    line-height: 14px;
  }
  .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > li > a:hover,
  .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > li > a:focus {
    background-image: none;
  }
}
@media (min-width: 768px) {
  .jexjs-navbar-nav {
    float: left;
    margin: 0;
  }
  .jexjs-navbar-nav > li {
    float: left;
  }
  .jexjs-navbar-nav > li > a {
    padding-top: 15.5px;
    padding-bottom: 15.5px;
  }
}
.jexjs-navbar-form {
  margin-left: -15px;
  margin-right: -15px;
  padding: 10px 15px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-top: 9.5px;
  margin-bottom: 9.5px;
}

@media (min-width: 768px) {
  .jexjs-navbar-form .jexjs-form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .jexjs-navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .jexjs-navbar-form .form-control-static {
    display: inline-block;
  }
  .jexjs-navbar-form .jexjs-input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .jexjs-navbar-form .jexjs-input-group .jexjs-input-group-addon,
  .jexjs-navbar-form .jexjs-input-group .jexjs-input-group-btn,
  .jexjs-navbar-form .jexjs-input-group .form-control {
    width: auto;
  }
  .jexjs-navbar-form .jexjs-input-group > .form-control {
    width: 100%;
  }
  .jexjs-navbar-form .jexjs-control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .jexjs-navbar-form .radio,
  .jexjs-navbar-form .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .jexjs-navbar-form .radio label,
  .jexjs-navbar-form .checkbox label {
    padding-left: 0;
  }
  .jexjs-navbar-form .radio input[type=radio],
  .jexjs-navbar-form .checkbox input[type=checkbox] {
    position: relative;
    margin-left: 0;
  }
  .jexjs-navbar-form .jexjs-has-feedback .jexjs-form-control-feedback {
    top: 0;
  }
}
@media (max-width: 767px) {
  .jexjs-navbar-form .jexjs-form-group {
    margin-bottom: 5px;
  }
  .jexjs-navbar-form .jexjs-form-group:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  .jexjs-navbar-form {
    width: auto;
    border: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
.jexjs-navbar-nav > li > .jexjs-dropdown-menu {
  margin-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.jexjs-navbar-fixed-bottom .jexjs-navbar-nav > li > .jexjs-dropdown-menu {
  margin-bottom: 0;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.jexjs-navbar-btn {
  margin-top: 9.5px;
  margin-bottom: 9.5px;
}

.jexjs-navbar-btn.btn-sm {
  margin-top: 10px;
  margin-bottom: 10px;
}

.jexjs-navbar-btn.btn-xs {
  margin-top: 11.5px;
  margin-bottom: 11.5px;
}

.jexjs-navbar-text {
  margin-top: 15.5px;
  margin-bottom: 15.5px;
}

@media (min-width: 768px) {
  .jexjs-navbar-text {
    float: left;
    margin-left: 15px;
    margin-right: 15px;
  }
}
@media (min-width: 768px) {
  .jexjs-navbar-left {
    float: left !important;
  }
  .jexjs-navbar-right {
    float: right !important;
    margin-right: -15px;
  }
  .jexjs-navbar-right ~ .jexjs-navbar-right {
    margin-right: 0;
  }
}
.jexjs-navbar-default {
  background-color: #212d42;
  border-color: #212d42;
}

.jexjs-navbar-default .jexjs-navbar-brand {
  color: #ffffff;
}

.jexjs-navbar-default .jexjs-navbar-brand:hover,
.jexjs-navbar-default .jexjs-navbar-brand:focus {
  color: #e6e6e6;
  background-color: transparent;
}

.jexjs-navbar-default .jexjs-navbar-text {
  color: #ffffff;
}

.jexjs-navbar-default .jexjs-navbar-nav > li > a {
  color: #ffffff;
}

.jexjs-navbar-default .jexjs-navbar-nav > li > a:hover,
.jexjs-navbar-default .jexjs-navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: #08a9f4;
}

.jexjs-navbar-default .jexjs-navbar-nav > .jexjs-active > a,
.jexjs-navbar-default .jexjs-navbar-nav > .jexjs-active > a:hover,
.jexjs-navbar-default .jexjs-navbar-nav > .jexjs-active > a:focus {
  color: #ffffff;
  background-color: #08a9f4;
}

.jexjs-navbar-default .jexjs-navbar-nav > .jexjs-disabled > a,
.jexjs-navbar-default .jexjs-navbar-nav > .jexjs-disabled > a:hover,
.jexjs-navbar-default .jexjs-navbar-nav > .jexjs-disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}

.jexjs-navbar-default .jexjs-navbar-toggle {
  border-color: #212d42;
}

.jexjs-navbar-default .jexjs-navbar-toggle:hover,
.jexjs-navbar-default .jexjs-navbar-toggle:focus {
  background-color: #dddddd;
}

.jexjs-navbar-default .jexjs-navbar-toggle .jexjs-icon-bar {
  background-color: #888888;
}

.jexjs-navbar-default .jexjs-navbar-collapse,
.jexjs-navbar-default .jexjs-navbar-form {
  border-color: #212d42;
}

.jexjs-navbar-default .jexjs-navbar-nav > .jexjs-open > a,
.jexjs-navbar-default .jexjs-navbar-nav > .jexjs-open > a:hover,
.jexjs-navbar-default .jexjs-navbar-nav > .jexjs-open > a:focus {
  background-color: #08a9f4;
  color: #ffffff;
}

@media (max-width: 767px) {
  .jexjs-navbar-default .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > li > a {
    color: #ffffff;
  }
  .jexjs-navbar-default .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > li > a:hover,
  .jexjs-navbar-default .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: #08a9f4;
  }
  .jexjs-navbar-default .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-active > a,
  .jexjs-navbar-default .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-active > a:hover,
  .jexjs-navbar-default .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-active > a:focus {
    color: #ffffff;
    background-color: #08a9f4;
  }
  .jexjs-navbar-default .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-disabled > a,
  .jexjs-navbar-default .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-disabled > a:hover,
  .jexjs-navbar-default .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
}
.jexjs-navbar-default .jexjs-navbar-link {
  color: #ffffff;
}

.jexjs-navbar-default .jexjs-navbar-link:hover {
  color: #ffffff;
}

.jexjs-navbar-default .jexjs-btn-link {
  color: #ffffff;
}

.jexjs-navbar-default .jexjs-btn-link:hover,
.jexjs-navbar-default .jexjs-btn-link:focus {
  color: #ffffff;
}

.jexjs-navbar-default .jexjs-btn-link[disabled]:hover,
fieldset[disabled] .jexjs-navbar-default .jexjs-btn-link:hover,
.jexjs-navbar-default .jexjs-btn-link[disabled]:focus,
fieldset[disabled] .jexjs-navbar-default .jexjs-btn-link:focus {
  color: #cccccc;
}

.jexjs-navbar-inverse {
  background-color: #222222;
  border-color: #080808;
}

.jexjs-navbar-inverse .jexjs-navbar-brand {
  color: #9d9d9d;
}

.jexjs-navbar-inverse .jexjs-navbar-brand:hover,
.jexjs-navbar-inverse .jexjs-navbar-brand:focus {
  color: #ffffff;
  background-color: transparent;
}

.jexjs-navbar-inverse .jexjs-navbar-text {
  color: #9d9d9d;
}

.jexjs-navbar-inverse .jexjs-navbar-nav > li > a {
  color: #9d9d9d;
}

.jexjs-navbar-inverse .jexjs-navbar-nav > li > a:hover,
.jexjs-navbar-inverse .jexjs-navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: transparent;
}

.jexjs-navbar-inverse .jexjs-navbar-nav > .jexjs-active > a,
.jexjs-navbar-inverse .jexjs-navbar-nav > .jexjs-active > a:hover,
.jexjs-navbar-inverse .jexjs-navbar-nav > .jexjs-active > a:focus {
  color: #ffffff;
  background-color: #080808;
}

.jexjs-navbar-inverse .jexjs-navbar-nav > .jexjs-disabled > a,
.jexjs-navbar-inverse .jexjs-navbar-nav > .jexjs-disabled > a:hover,
.jexjs-navbar-inverse .jexjs-navbar-nav > .jexjs-disabled > a:focus {
  color: #444444;
  background-color: transparent;
}

.jexjs-navbar-inverse .jexjs-navbar-toggle {
  border-color: #333333;
}

.jexjs-navbar-inverse .jexjs-navbar-toggle:hover,
.jexjs-navbar-inverse .jexjs-navbar-toggle:focus {
  background-color: #333333;
}

.jexjs-navbar-inverse .jexjs-navbar-toggle .jexjs-icon-bar {
  background-color: #ffffff;
}

.jexjs-navbar-inverse .jexjs-navbar-collapse,
.jexjs-navbar-inverse .jexjs-navbar-form {
  border-color: #101010;
}

.jexjs-navbar-inverse .jexjs-navbar-nav > .jexjs-open > a,
.jexjs-navbar-inverse .jexjs-navbar-nav > .jexjs-open > a:hover,
.jexjs-navbar-inverse .jexjs-navbar-nav > .jexjs-open > a:focus {
  background-color: #080808;
  color: #ffffff;
}

@media (max-width: 767px) {
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-dropdown-header {
    border-color: #080808;
  }
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu .divider {
    background-color: #080808;
  }
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > li > a:hover,
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: transparent;
  }
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-active > a,
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-active > a:hover,
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-active > a:focus {
    color: #ffffff;
    background-color: #080808;
  }
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-disabled > a,
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-disabled > a:hover,
  .jexjs-navbar-inverse .jexjs-navbar-nav .jexjs-open .jexjs-dropdown-menu > .jexjs-disabled > a:focus {
    color: #444444;
    background-color: transparent;
  }
}
.jexjs-navbar-inverse .jexjs-navbar-link {
  color: #9d9d9d;
}

.jexjs-navbar-inverse .jexjs-navbar-link:hover {
  color: #ffffff;
}

.jexjs-navbar-inverse .jexjs-btn-link {
  color: #9d9d9d;
}

.jexjs-navbar-inverse .jexjs-btn-link:hover,
.jexjs-navbar-inverse .jexjs-btn-link:focus {
  color: #ffffff;
}

.jexjs-navbar-inverse .jexjs-btn-link[disabled]:hover,
fieldset[disabled] .jexjs-navbar-inverse .jexjs-btn-link:hover,
.jexjs-navbar-inverse .jexjs-btn-link[disabled]:focus,
fieldset[disabled] .jexjs-navbar-inverse .jexjs-btn-link:focus {
  color: #444444;
}

.jexjs-panel {
  margin-bottom: 14px;
  background-color: #ffffff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.jexjs-panel-body {
  padding: 10px;
}

.jexjs-panel-heading {
  padding: 10px 10px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.jexjs-panel-heading > .jexjs-dropdown .jexjs-dropdown-toggle {
  color: inherit;
}

.jexjs-panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: inherit;
}

.jexjs-panel-title > a,
.jexjs-panel-title > small,
.jexjs-panel-title > .jexjs-small,
.jexjs-panel-title > small > a,
.jexjs-panel-title > .jexjs-small > a {
  color: inherit;
}

.jexjs-panel-footer {
  padding: 10px 10px;
  background-color: #f0f1f3;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.jexjs-panel > .jexjs-list-group,
.jexjs-panel > .jexjs-panel-collapse > .jexjs-list-group {
  margin-bottom: 0;
}

.jexjs-panel > .jexjs-list-group .jexjs-list-group-item,
.jexjs-panel > .jexjs-panel-collapse > .jexjs-list-group .jexjs-list-group-item {
  border-width: 1px 0;
  border-radius: 0;
}

.jexjs-panel > .jexjs-list-group:first-child .jexjs-list-group-item:first-child,
.jexjs-panel > .jexjs-panel-collapse > .jexjs-list-group:first-child .jexjs-list-group-item:first-child {
  border-top: 0;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.jexjs-panel > .jexjs-list-group:last-child .jexjs-list-group-item:last-child,
.jexjs-panel > .jexjs-panel-collapse > .jexjs-list-group:last-child .jexjs-list-group-item:last-child {
  border-bottom: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.jexjs-panel > .jexjs-panel-heading + .jexjs-panel-collapse > .jexjs-list-group .jexjs-list-group-item:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.jexjs-panel-heading + .jexjs-list-group .jexjs-list-group-item:first-child {
  border-top-width: 0;
}

.jexjs-list-group + .jexjs-panel-footer {
  border-top-width: 0;
}

.jexjs-panel > .jexjs-table,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table,
.jexjs-panel > .jexjs-panel-collapse > .jexjs-table {
  margin-bottom: 0;
}

.jexjs-panel > .jexjs-table caption,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table caption,
.jexjs-panel > .jexjs-panel-collapse > .jexjs-table caption {
  padding-left: 10px;
  padding-right: 10px;
}

.jexjs-panel > .jexjs-table:first-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child {
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.jexjs-panel > .jexjs-table:first-child > thead:first-child > tr:first-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child > thead:first-child > tr:first-child,
.jexjs-panel > .jexjs-table:first-child > tbody:first-child > tr:first-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child > tbody:first-child > tr:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.jexjs-panel > .jexjs-table:first-child > thead:first-child > tr:first-child td:first-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child > thead:first-child > tr:first-child td:first-child,
.jexjs-panel > .jexjs-table:first-child > tbody:first-child > tr:first-child td:first-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child > tbody:first-child > tr:first-child td:first-child,
.jexjs-panel > .jexjs-table:first-child > thead:first-child > tr:first-child th:first-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child > thead:first-child > tr:first-child th:first-child,
.jexjs-panel > .jexjs-table:first-child > tbody:first-child > tr:first-child th:first-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child > tbody:first-child > tr:first-child th:first-child {
  border-top-left-radius: 3px;
}

.jexjs-panel > .jexjs-table:first-child > thead:first-child > tr:first-child td:last-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child > thead:first-child > tr:first-child td:last-child,
.jexjs-panel > .jexjs-table:first-child > tbody:first-child > tr:first-child td:last-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child > tbody:first-child > tr:first-child td:last-child,
.jexjs-panel > .jexjs-table:first-child > thead:first-child > tr:first-child th:last-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child > thead:first-child > tr:first-child th:last-child,
.jexjs-panel > .jexjs-table:first-child > tbody:first-child > tr:first-child th:last-child,
.jexjs-panel > .jexjs-table-responsive:first-child > .jexjs-table:first-child > tbody:first-child > tr:first-child th:last-child {
  border-top-right-radius: 3px;
}

.jexjs-panel > .jexjs-table:last-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.jexjs-panel > .jexjs-table:last-child > tbody:last-child > tr:last-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child > tbody:last-child > tr:last-child,
.jexjs-panel > .jexjs-table:last-child > tfoot:last-child > tr:last-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child > tfoot:last-child > tr:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.jexjs-panel > .jexjs-table:last-child > tbody:last-child > tr:last-child td:first-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child > tbody:last-child > tr:last-child td:first-child,
.jexjs-panel > .jexjs-table:last-child > tfoot:last-child > tr:last-child td:first-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child > tfoot:last-child > tr:last-child td:first-child,
.jexjs-panel > .jexjs-table:last-child > tbody:last-child > tr:last-child th:first-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child > tbody:last-child > tr:last-child th:first-child,
.jexjs-panel > .jexjs-table:last-child > tfoot:last-child > tr:last-child th:first-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child > tfoot:last-child > tr:last-child th:first-child {
  border-bottom-left-radius: 3px;
}

.jexjs-panel > .jexjs-table:last-child > tbody:last-child > tr:last-child td:last-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child > tbody:last-child > tr:last-child td:last-child,
.jexjs-panel > .jexjs-table:last-child > tfoot:last-child > tr:last-child td:last-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child > tfoot:last-child > tr:last-child td:last-child,
.jexjs-panel > .jexjs-table:last-child > tbody:last-child > tr:last-child th:last-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child > tbody:last-child > tr:last-child th:last-child,
.jexjs-panel > .jexjs-table:last-child > tfoot:last-child > tr:last-child th:last-child,
.jexjs-panel > .jexjs-table-responsive:last-child > .jexjs-table:last-child > tfoot:last-child > tr:last-child th:last-child {
  border-bottom-right-radius: 3px;
}

.jexjs-panel > .jexjs-panel-body + .jexjs-table,
.jexjs-panel > .jexjs-panel-body + .jexjs-table-responsive,
.jexjs-panel > .jexjs-table + .jexjs-panel-body,
.jexjs-panel > .jexjs-table-responsive + .jexjs-panel-body {
  border-top: 1px solid #dddddd;
}

.jexjs-panel > .jexjs-table > tbody:first-child > tr:first-child th,
.jexjs-panel > .jexjs-table > tbody:first-child > tr:first-child td {
  border-top: 0;
}

.jexjs-panel > .jexjs-table-bordered,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered {
  border: 0;
}

.jexjs-panel > .jexjs-table-bordered > thead > tr > th:first-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > thead > tr > th:first-child,
.jexjs-panel > .jexjs-table-bordered > tbody > tr > th:first-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr > th:first-child,
.jexjs-panel > .jexjs-table-bordered > tfoot > tr > th:first-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr > th:first-child,
.jexjs-panel > .jexjs-table-bordered > thead > tr > td:first-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > thead > tr > td:first-child,
.jexjs-panel > .jexjs-table-bordered > tbody > tr > td:first-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr > td:first-child,
.jexjs-panel > .jexjs-table-bordered > tfoot > tr > td:first-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr > td:first-child {
  border-left: 0;
}

.jexjs-panel > .jexjs-table-bordered > thead > tr > th:last-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > thead > tr > th:last-child,
.jexjs-panel > .jexjs-table-bordered > tbody > tr > th:last-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr > th:last-child,
.jexjs-panel > .jexjs-table-bordered > tfoot > tr > th:last-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr > th:last-child,
.jexjs-panel > .jexjs-table-bordered > thead > tr > td:last-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > thead > tr > td:last-child,
.jexjs-panel > .jexjs-table-bordered > tbody > tr > td:last-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr > td:last-child,
.jexjs-panel > .jexjs-table-bordered > tfoot > tr > td:last-child,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr > td:last-child {
  border-right: 0;
}

.jexjs-panel > .jexjs-table-bordered > thead > tr:first-child > td,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > thead > tr:first-child > td,
.jexjs-panel > .jexjs-table-bordered > tbody > tr:first-child > td,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr:first-child > td,
.jexjs-panel > .jexjs-table-bordered > thead > tr:first-child > th,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > thead > tr:first-child > th,
.jexjs-panel > .jexjs-table-bordered > tbody > tr:first-child > th,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr:first-child > th {
  border-bottom: 0;
}

.jexjs-panel > .jexjs-table-bordered > tbody > tr:last-child > td,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr:last-child > td,
.jexjs-panel > .jexjs-table-bordered > tfoot > tr:last-child > td,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr:last-child > td,
.jexjs-panel > .jexjs-table-bordered > tbody > tr:last-child > th,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tbody > tr:last-child > th,
.jexjs-panel > .jexjs-table-bordered > tfoot > tr:last-child > th,
.jexjs-panel > .jexjs-table-responsive > .jexjs-table-bordered > tfoot > tr:last-child > th {
  border-bottom: 0;
}

.jexjs-panel > .jexjs-table-responsive {
  border: 0;
  margin-bottom: 0;
}

.jexjs-panel-group {
  margin-bottom: 14px;
}

.jexjs-panel-group .jexjs-panel {
  margin-bottom: 0;
  border-radius: 4px;
}

.jexjs-panel-group .jexjs-panel + .jexjs-panel {
  margin-top: 5px;
}

.jexjs-panel-group .jexjs-panel-heading {
  border-bottom: 0;
}

.jexjs-panel-group .jexjs-panel-heading + .jexjs-panel-collapse > .jexjs-panel-body,
.jexjs-panel-group .jexjs-panel-heading + .jexjs-panel-collapse > .jexjs-list-group {
  border-top: 1px solid #dddddd;
}

.jexjs-panel-group .jexjs-panel-footer {
  border-top: 0;
}

.jexjs-panel-group .jexjs-panel-footer + .jexjs-panel-collapse .jexjs-panel-body {
  border-bottom: 1px solid #dddddd;
}

.jexjs-panel-default {
  border-color: #dddddd;
}

.jexjs-panel-default > .jexjs-panel-heading {
  color: #333333;
  background-color: #f0f1f3;
  border-color: #dddddd;
}

.jexjs-panel-default > .jexjs-panel-heading + .jexjs-panel-collapse > .jexjs-panel-body {
  border-top-color: #dddddd;
}

.jexjs-panel-default > .jexjs-panel-heading .jexjs-badge {
  color: #f0f1f3;
  background-color: #333333;
}

.jexjs-panel-default > .jexjs-panel-footer + .jexjs-panel-collapse > .jexjs-panel-body {
  border-bottom-color: #dddddd;
}

.jexjs-panel-primary {
  border-color: #08a9f4;
}

.jexjs-panel-primary > .jexjs-panel-heading {
  color: #ffffff;
  background-color: #08a9f4;
  border-color: #08a9f4;
}

.jexjs-panel-primary > .jexjs-panel-heading + .jexjs-panel-collapse > .jexjs-panel-body {
  border-top-color: #08a9f4;
}

.jexjs-panel-primary > .jexjs-panel-heading .jexjs-badge {
  color: #08a9f4;
  background-color: #ffffff;
}

.jexjs-panel-primary > .jexjs-panel-footer + .jexjs-panel-collapse > .jexjs-panel-body {
  border-bottom-color: #08a9f4;
}

.jexjs-panel-success {
  border-color: #d6e9c6;
}

.jexjs-panel-success > .jexjs-panel-heading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.jexjs-panel-success > .jexjs-panel-heading + .jexjs-panel-collapse > .jexjs-panel-body {
  border-top-color: #d6e9c6;
}

.jexjs-panel-success > .jexjs-panel-heading .jexjs-badge {
  color: #dff0d8;
  background-color: #3c763d;
}

.jexjs-panel-success > .jexjs-panel-footer + .jexjs-panel-collapse > .jexjs-panel-body {
  border-bottom-color: #d6e9c6;
}

.jexjs-panel-info {
  border-color: #bce8f1;
}

.jexjs-panel-info > .jexjs-panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.jexjs-panel-info > .jexjs-panel-heading + .jexjs-panel-collapse > .jexjs-panel-body {
  border-top-color: #bce8f1;
}

.jexjs-panel-info > .jexjs-panel-heading .jexjs-badge {
  color: #d9edf7;
  background-color: #31708f;
}

.jexjs-panel-info > .jexjs-panel-footer + .jexjs-panel-collapse > .jexjs-panel-body {
  border-bottom-color: #bce8f1;
}

.jexjs-panel-warning {
  border-color: #faebcc;
}

.jexjs-panel-warning > .jexjs-panel-heading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.jexjs-panel-warning > .jexjs-panel-heading + .jexjs-panel-collapse > .jexjs-panel-body {
  border-top-color: #faebcc;
}

.jexjs-panel-warning > .jexjs-panel-heading .jexjs-badge {
  color: #fcf8e3;
  background-color: #8a6d3b;
}

.jexjs-panel-warning > .jexjs-panel-footer + .jexjs-panel-collapse > .jexjs-panel-body {
  border-bottom-color: #faebcc;
}

.jexjs-panel-danger {
  border-color: #ebccd1;
}

.jexjs-panel-danger > .jexjs-panel-heading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.jexjs-panel-danger > .jexjs-panel-heading + .jexjs-panel-collapse > .jexjs-panel-body {
  border-top-color: #ebccd1;
}

.jexjs-panel-danger > .jexjs-panel-heading .jexjs-badge {
  color: #f2dede;
  background-color: #a94442;
}

.jexjs-panel-danger > .jexjs-panel-footer + .jexjs-panel-collapse > .jexjs-panel-body {
  border-bottom-color: #ebccd1;
}

.jexjs-clearfix:before,
.jexjs-clearfix:after,
.jexjs-dl-horizontal dd:before,
.jexjs-dl-horizontal dd:after,
.jexjs-container:before,
.jexjs-container:after,
.jexjs-container-fluid:before,
.jexjs-container-fluid:after,
.jexjs-row:before,
.jexjs-row:after,
.jexjs-form-horizontal .jexjs-form-group:before,
.jexjs-form-horizontal .jexjs-form-group:after,
.jexjs-btn-toolbar:before,
.jexjs-btn-toolbar:after,
.jexjs-btn-group-vertical > .jexjs-btn-group:before,
.jexjs-btn-group-vertical > .jexjs-btn-group:after,
.jexjs-nav:before,
.jexjs-nav:after,
.jexjs-navbar:before,
.jexjs-navbar:after,
.jexjs-navbar-header:before,
.jexjs-navbar-header:after,
.jexjs-navbar-collapse:before,
.jexjs-navbar-collapse:after,
.jexjs-pager:before,
.jexjs-pager:after,
.jexjs-panel-body:before,
.jexjs-panel-body:after,
.jexjs-modal-header:before,
.jexjs-modal-header:after,
.jexjs-modal-footer:before,
.jexjs-modal-footer:after {
  content: " ";
  display: table;
}

.jexjs-clearfix:after,
.jexjs-dl-horizontal dd:after,
.jexjs-container:after,
.jexjs-container-fluid:after,
.jexjs-row:after,
.jexjs-form-horizontal .jexjs-form-group:after,
.jexjs-btn-toolbar:after,
.jexjs-btn-group-vertical > .jexjs-btn-group:after,
.jexjs-nav:after,
.jexjs-navbar:after,
.jexjs-navbar-header:after,
.jexjs-navbar-collapse:after,
.jexjs-pager:after,
.jexjs-panel-body:after,
.jexjs-modal-header:after,
.jexjs-modal-footer:after {
  clear: both;
}

.jexjs-show {
  display: block !important;
}

.jexjs-hide {
  display: none !important;
}

button.jexjs-close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.jexjs-close {
  float: right;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 1px 0 #ffffff;
  color: #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.jexjs-close:hover,
.jexjs-close:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

jexjs-template {
  display: none;
}

.jexjs-logger-badge {
  position: absolute;
  z-index: 10;
  top: 3%;
  right: 5%;
  width: 30px;
  height: 30px;
  background-color: #FFF;
  border: 3px solid #F00;
}

.jexjs-logger-badge:hover {
  cursor: pointer;
}

.jexjs-logger-console {
  position: absolute;
  top: 3%;
  left: 3%;
  width: 90%;
  height: 90%;
  border: 1px solid #FFF;
  color: #FFF;
  background-color: #000;
  overflow: scroll;
  overflow-x: hidden;
}

.jexjs-logger-console ul {
  list-style: none;
  margin: 5px 0;
  padding: 0;
}

.jexjs-logger-console-line {
  word-break: break-all;
  padding: 2px 15px;
}

.jexjs-logger-console-line:hover {
  cursor: pointer;
  background-color: #BBB;
}

/* indicator css */
.jexjs-indicator {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999990;
  text-align: center;
  background: rgba(0, 0, 0, 0);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000); /* IE8을 위해 적용*/
}

.jexjs-indicator-bg {
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  position: fixed;
  text-align: center;
  width: 32px;
  height: 32px;
  background-color: #FFF;
  border-radius: 5px;
}

.jexjs-indicator-img {
  display: block;
  width: 32px;
  height: 32px;
  background: url("img/indicator.gif");
  background-size: 32px 32px;
  background-repeat: no-repeat;
}

/* div 부분 indicator */
.jexjs-indicator-target {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999990;
  text-align: center;
  background: rgba(0, 0, 0, 0);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000); /* IE8을 위해 적용*/
}

.jexjs-indicator-bg-target {
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  position: absolute;
  text-align: center;
  width: 32px;
  height: 32px;
  background-color: #FFF;
  border-radius: 5px;
}

/* modal, active */
.jexjs-indicator.modal, .jexjs-indicator-target.modal {
  background: rgba(0, 0, 0, 0.4);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000,endColorstr=#40000000); /* IE8을 위해 적용*/
}

.jexjs-indicator.active, .jexjs-indicator-target.active {
  display: block;
}

/* indicator css */
.jexjs-indicator.new {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999990;
  text-align: center;
  background: rgba(0, 0, 0, 0);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
  /* IE8을 위해 적용*/
  /* div 부분 indicator */
  /* modal, active */
}
.jexjs-indicator.new.active {
  display: block;
}
.jexjs-indicator.new .jexjs-indicator-bg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 106px;
  padding: 16px;
  background-color: var(--bg-clr2);
  border: 2px solid var(--main-clr);
  border-radius: 20px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-align: center;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}
.jexjs-indicator.new .jexjs-indicator-spinner {
  position: relative;
  width: 38px;
  height: 38px;
  margin: auto auto 5px;
  transform: translateZ(0) scale(0.38);
  backface-visibility: hidden;
  transform-origin: 0 0;
}
.jexjs-indicator.new .jexjs-indicator-txt {
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  text-align: center;
  color: var(--cap-clr);
}
.jexjs-indicator.new .jexjs-indicator-spinner div {
  position: absolute;
  top: 24px;
  left: 48.5px;
  width: 3px;
  height: 8px;
  background: var(--main-clr);
  border-radius: 0.08px/0.08px;
  transform-origin: 1.5px 26px;
  box-sizing: content-box;
  animation: indicatorAni linear 1s infinite;
}
@keyframes indicatorAni {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -0.9375s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(2) {
  transform: rotate(22.5deg);
  animation-delay: -0.875s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(3) {
  transform: rotate(45deg);
  animation-delay: -0.8125s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(4) {
  transform: rotate(67.5deg);
  animation-delay: -0.75s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(5) {
  transform: rotate(90deg);
  animation-delay: -0.6875s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(6) {
  transform: rotate(112.5deg);
  animation-delay: -0.625s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(7) {
  transform: rotate(135deg);
  animation-delay: -0.5625s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(8) {
  transform: rotate(157.5deg);
  animation-delay: -0.5s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(9) {
  transform: rotate(180deg);
  animation-delay: -0.4375s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(10) {
  transform: rotate(202.5deg);
  animation-delay: -0.375s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(11) {
  transform: rotate(225deg);
  animation-delay: -0.3125s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(12) {
  transform: rotate(247.5deg);
  animation-delay: -0.25s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(13) {
  transform: rotate(270deg);
  animation-delay: -0.1875s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(14) {
  transform: rotate(292.5deg);
  animation-delay: -0.125s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(15) {
  transform: rotate(315deg);
  animation-delay: -0.0625s;
}
.jexjs-indicator.new .jexjs-indicator-spinner div:nth-child(16) {
  transform: rotate(337.5deg);
  animation-delay: 0s;
}
.jexjs-indicator.new .jexjs-indicator-img {
  display: block;
  width: 32px;
  height: 32px;
  background: url("img/indicator.gif");
  background-size: 32px 32px;
  background-repeat: no-repeat;
}
.jexjs-indicator.new .jexjs-indicator-target {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999990;
  text-align: center;
  background: rgba(0, 0, 0, 0);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
  /* IE8을 위해 적용*/
}
.jexjs-indicator.new .jexjs-indicator-bg-target {
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  position: absolute;
  text-align: center;
  width: 32px;
  height: 32px;
  background-color: #FFF;
  border-radius: 5px;
}
.jexjs-indicator.new .jexjs-indicator.modal,
.jexjs-indicator.new .jexjs-indicator-target.modal {
  background: rgba(0, 0, 0, 0.4);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#40000000, endColorstr=#40000000);
  /* IE8을 위해 적용*/
}
.jexjs-indicator.new .jexjs-indicator.active,
.jexjs-indicator.new .jexjs-indicator-target.active {
  display: block;
}

/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?bgShadowXPos=&bgOverlayXPos=&bgErrorXPos=&bgHighlightXPos=&bgContentXPos=&bgHeaderXPos=&bgActiveXPos=&bgHoverXPos=&bgDefaultXPos=&bgShadowYPos=&bgOverlayYPos=&bgErrorYPos=&bgHighlightYPos=&bgContentYPos=&bgHeaderYPos=&bgActiveYPos=&bgHoverYPos=&bgDefaultYPos=&bgShadowRepeat=&bgOverlayRepeat=&bgErrorRepeat=&bgHighlightRepeat=&bgContentRepeat=&bgHeaderRepeat=&bgActiveRepeat=&bgHoverRepeat=&bgDefaultRepeat=&iconsHover=url(%22images%2Fui-icons_555555_256x240.png%22)&iconsHighlight=url(%22images%2Fui-icons_777620_256x240.png%22)&iconsHeader=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsError=url(%22images%2Fui-icons_cc0000_256x240.png%22)&iconsDefault=url(%22images%2Fui-icons_777777_256x240.png%22)&iconsContent=url(%22images%2Fui-icons_444444_256x240.png%22)&iconsActive=url(%22images%2Fui-icons_ffffff_256x240.png%22)&bgImgUrlShadow=&bgImgUrlOverlay=&bgImgUrlHover=&bgImgUrlHighlight=&bgImgUrlHeader=&bgImgUrlError=&bgImgUrlDefault=&bgImgUrlContent=&bgImgUrlActive=&opacityFilterShadow=Alpha(Opacity%3D30)&opacityFilterOverlay=Alpha(Opacity%3D30)&opacityShadowPerc=30&opacityOverlayPerc=30&iconColorHover=%23555555&iconColorHighlight=%23777620&iconColorHeader=%23444444&iconColorError=%23cc0000&iconColorDefault=%23777777&iconColorContent=%23444444&iconColorActive=%23ffffff&bgImgOpacityShadow=0&bgImgOpacityOverlay=0&bgImgOpacityError=95&bgImgOpacityHighlight=55&bgImgOpacityContent=75&bgImgOpacityHeader=75&bgImgOpacityActive=65&bgImgOpacityHover=75&bgImgOpacityDefault=75&bgTextureShadow=flat&bgTextureOverlay=flat&bgTextureError=flat&bgTextureHighlight=flat&bgTextureContent=flat&bgTextureHeader=flat&bgTextureActive=flat&bgTextureHover=flat&bgTextureDefault=flat&cornerRadius=3px&fwDefault=normal&ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&cornerRadiusShadow=8px&thicknessShadow=5px&offsetLeftShadow=0px&offsetTopShadow=0px&opacityShadow=.3&bgColorShadow=%23666666&opacityOverlay=.3&bgColorOverlay=%23aaaaaa&fcError=%235f3f3f&borderColorError=%23f1a899&bgColorError=%23fddfdf&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgColorHighlight=%23fffa90&fcContent=%23333333&borderColorContent=%23dddddd&bgColorContent=%23ffffff&fcHeader=%23333333&borderColorHeader=%23dddddd&bgColorHeader=%23e9e9e9&fcActive=%23ffffff&borderColorActive=%23003eff&bgColorActive=%23007fff&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgColorHover=%23ededed&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgColorDefault=%23f6f6f6
* Copyright jQuery Foundation and other contributors; Licensed MIT */
.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before, .ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
}

.ui-front {
  z-index: 100;
}

.ui-state-disabled {
  cursor: default !important;
  pointer-events: none;
}

.ui-icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.25em;
  position: relative;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

.ui-widget-icon-block {
  left: 50%;
  margin-left: -8px;
  display: block;
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: 0.5em 0.5em 0.5em 0.7em;
  font-size: 100%;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
}

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

.ui-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  outline: 0;
}

.ui-menu .ui-menu {
  position: absolute;
}

.ui-menu .ui-menu-item {
  margin: 0;
  cursor: pointer;
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

.ui-menu .ui-menu-item-wrapper {
  position: relative;
  padding: 3px 1em 3px 0.4em;
}

.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0 0;
}

.ui-menu .ui-state-focus, .ui-menu .ui-state-active {
  margin: -1px;
}

.ui-menu-icons {
  position: relative;
}

.ui-menu-icons .ui-menu-item-wrapper {
  padding-left: 2em;
}

.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.2em;
  margin: auto 0;
}

.ui-menu .ui-menu-icon {
  left: auto;
  right: 0;
}

.ui-button {
  padding: 0.4em 1em;
  display: inline-block;
  position: relative;
  line-height: normal;
  margin-right: 0.1em;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: visible;
}

.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active {
  text-decoration: none;
}

.ui-button-icon-only {
  width: 2em;
  box-sizing: border-box;
  text-indent: -9999px;
  white-space: nowrap;
}

input.ui-button.ui-button-icon-only {
  text-indent: 0;
}

.ui-button-icon-only .ui-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
  padding: 0;
  width: 2.1em;
  height: 2.1em;
  text-indent: -9999px;
  white-space: nowrap;
}

input.ui-button.ui-icon-notext .ui-icon {
  width: auto;
  height: auto;
  text-indent: 0;
  white-space: normal;
  padding: 0.4em 1em;
}

input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ui-controlgroup {
  vertical-align: middle;
  display: inline-block;
}

.ui-controlgroup > .ui-controlgroup-item {
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.ui-controlgroup > .ui-controlgroup-item:focus, .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
  z-index: 9999;
}

.ui-controlgroup-vertical > .ui-controlgroup-item {
  display: block;
  float: none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
}

.ui-controlgroup-vertical .ui-controlgroup-item {
  box-sizing: border-box;
}

.ui-controlgroup .ui-controlgroup-label {
  padding: 0.4em 1em;
}

.ui-controlgroup .ui-controlgroup-label span {
  font-size: 80%;
}

.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
  border-left: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
  border-top: none;
}

.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
  border-right: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
  border-bottom: none;
}

.ui-controlgroup-vertical .ui-spinner-input {
  width: 75%;
  width: calc(100% - 2.4em);
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
  border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
  box-shadow: inset 1px 1px 1px #ccc;
  border-radius: 0.12em;
  border: none;
}

.ui-checkboxradio-radio-label .ui-icon-background {
  width: 16px;
  height: 16px;
  border-radius: 1em;
  overflow: visible;
  border: none;
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
  background-image: none;
  width: 8px;
  height: 8px;
  border-width: 4px;
  border-style: solid;
}

.ui-checkboxradio-disabled {
  pointer-events: none;
}

.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
  width: 45%;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span, .ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-align: right;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

.ui-datepicker .ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
  left: 0.5em;
  top: 0.3em;
}

.ui-dialog {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.2em;
  outline: 0;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 1em;
  position: relative;
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 50%;
  width: 20px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0.5em 1em;
  background: none;
  overflow: auto;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
  margin-top: 0.5em;
  padding: 0.3em 1em 0.5em 0.4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}

.ui-dialog .ui-resizable-n {
  height: 2px;
  top: 0;
}

.ui-dialog .ui-resizable-e {
  width: 2px;
  right: 0;
}

.ui-dialog .ui-resizable-s {
  height: 2px;
  bottom: 0;
}

.ui-dialog .ui-resizable-w {
  width: 2px;
  left: 0;
}

.ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw, .ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-nw {
  width: 7px;
  height: 7px;
}

.ui-dialog .ui-resizable-se {
  right: 0;
  bottom: 0;
}

.ui-dialog .ui-resizable-sw {
  left: 0;
  bottom: 0;
}

.ui-dialog .ui-resizable-ne {
  right: 0;
  top: 0;
}

.ui-dialog .ui-resizable-nw {
  left: 0;
  top: 0;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

.ui-draggable-handle {
  -ms-touch-action: none;
  touch-action: none;
}

.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

.ui-progressbar {
  height: 2em;
  text-align: left;
  overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
}

.ui-progressbar .ui-progressbar-overlay {
  background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
  height: 100%;
  filter: alpha(opacity=25);
  opacity: 0.25;
}

.ui-progressbar-indeterminate .ui-progressbar-value {
  background-image: none;
}

.ui-selectable {
  -ms-touch-action: none;
  touch-action: none;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

.ui-selectmenu-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.ui-selectmenu-menu .ui-menu {
  overflow: auto;
  overflow-x: hidden;
  padding-bottom: 1px;
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5;
  padding: 2px 0.4em;
  margin: 0.5em 0 0 0;
  height: auto;
  border: 0;
}

.ui-selectmenu-open {
  display: block;
}

.ui-selectmenu-text {
  display: block;
  margin-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-selectmenu-button.ui-button {
  text-align: left;
  white-space: nowrap;
  width: 14em;
}

.ui-selectmenu-icon.ui-icon {
  float: right;
  margin-top: 0;
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

.ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}

.ui-slider-horizontal {
  height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

.ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
}

.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: none;
  color: inherit;
  padding: 0.222em 0;
  margin: 0.2em 0;
  vertical-align: middle;
  margin-left: 0.4em;
  margin-right: 2em;
}

.ui-spinner-button {
  width: 1.6em;
  height: 50%;
  font-size: 0.5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}

.ui-spinner a.ui-spinner-button {
  border-top-style: none;
  border-bottom-style: none;
  border-right-style: none;
}

.ui-spinner-up {
  top: 0;
}

.ui-spinner-down {
  bottom: 0;
}

.ui-tabs {
  position: relative;
  padding: 0.2em;
}

.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0.2em 0.2em 0;
}

.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px 0.2em 0 0;
  border-bottom-width: 0;
  padding: 0;
  white-space: nowrap;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  float: left;
  padding: 0.5em 1em;
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
  cursor: text;
}

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
  cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: none;
}

.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
}

body .ui-tooltip {
  border-width: 2px;
}

.ui-widget {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}

.ui-widget-content {
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
}

.ui-widget-content a {
  color: #333;
}

.ui-widget-header {
  border: 1px solid #ddd;
  background: #e9e9e9;
  color: #333;
  font-weight: bold;
}

.ui-widget-header a {
  color: #333;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
  color: #454545;
  text-decoration: none;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
  border: 1px solid #ccc;
  background: #ededed;
  font-weight: normal;
  color: #2b2b2b;
}

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-visual-focus {
  box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: normal;
  color: #fff;
}

.ui-icon-background, .ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #fff;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  color: #fff;
  text-decoration: none;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}

.ui-state-checked {
  border: 1px solid #dad55e;
  background: #fffa90;
}

.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
  color: #777620;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
  border: 1px solid #f1a899;
  background: #fddfdf;
  color: #5f3f3f;
}

.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a {
  color: #5f3f3f;
}

.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
  color: #5f3f3f;
}

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  filter: Alpha(Opacity=70);
  font-weight: normal;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  filter: Alpha(Opacity=35);
  background-image: none;
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
}

.ui-icon {
  width: 16px;
  height: 16px;
}

.ui-icon, .ui-widget-content .ui-icon {
  background-image: url("images/ui-icons_444444_256x240.png");
}

.ui-widget-header .ui-icon {
  background-image: url("images/ui-icons_444444_256x240.png");
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon {
  background-image: url("images/ui-icons_555555_256x240.png");
}

.ui-state-active .ui-icon, .ui-button:active .ui-icon {
  background-image: url("images/ui-icons_ffffff_256x240.png");
}

.ui-state-highlight .ui-icon, .ui-button .ui-state-highlight.ui-icon {
  background-image: url("images/ui-icons_777620_256x240.png");
}

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
  background-image: url("images/ui-icons_cc0000_256x240.png");
}

.ui-button .ui-icon {
  background-image: url("images/ui-icons_777777_256x240.png");
}

.ui-icon-blank {
  background-position: 16px 16px;
}

.ui-icon-caret-1-n {
  background-position: 0 0;
}

.ui-icon-caret-1-ne {
  background-position: -16px 0;
}

.ui-icon-caret-1-e {
  background-position: -32px 0;
}

.ui-icon-caret-1-se {
  background-position: -48px 0;
}

.ui-icon-caret-1-s {
  background-position: -65px 0;
}

.ui-icon-caret-1-sw {
  background-position: -80px 0;
}

.ui-icon-caret-1-w {
  background-position: -96px 0;
}

.ui-icon-caret-1-nw {
  background-position: -112px 0;
}

.ui-icon-caret-2-n-s {
  background-position: -128px 0;
}

.ui-icon-caret-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -65px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -65px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 1px -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-on {
  background-position: -96px -144px;
}

.ui-icon-radio-off {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-start {
  background-position: -80px -160px;
}

.ui-icon-seek-first {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
  border-top-left-radius: 3px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
  border-top-right-radius: 3px;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
  border-bottom-left-radius: 3px;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
  border-bottom-right-radius: 3px;
}

.ui-widget-overlay {
  background: #aaa;
  opacity: 0.003;
  filter: Alpha(Opacity=0.3);
}

.ui-widget-shadow {
  -webkit-box-shadow: 0 0 5px #666;
  box-shadow: 0 0 5px #666;
}

/**
 * Swiper 11.1.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: March 28, 2024
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color:#007aff;
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
  transform-style: preserve-3d;
}

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color:#fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color:#000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root { /*--swiper-navigation-size:44px*/ }

.swiper-button-next, .swiper-button-prev { /*position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))*/ }

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { /*opacity:.35;cursor:auto;pointer-events:none*/ }

.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { /*opacity:0;cursor:auto;pointer-events:none*/ }

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { /*display:none!important*/ }

.swiper-button-next svg, .swiper-button-prev svg { /*width:100%;height:100%;object-fit:contain;transform-origin:center*/ }

.swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg { /*transform:rotate(180deg)*/ }

.swiper-button-prev, .swiper-rtl .swiper-button-next { /*left:var(--swiper-navigation-sides-offset,10px);right:auto*/ }

.swiper-button-next, .swiper-rtl .swiper-button-prev { /*right:var(--swiper-navigation-sides-offset,10px);left:auto*/ }

.swiper-button-lock {
  display: none;
}

.swiper-button-next:after, .swiper-button-prev:after { /*font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1*/ }

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { /*content:'prev'*/ }

.swiper-button-next, .swiper-rtl .swiper-button-prev { /*right:var(--swiper-navigation-sides-offset,10px);left:auto*/ }

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { /*content:'next'*/ }

.swiper-pagination { /*position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{/*bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%*/ }

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { /*transform:scale(.33);position:relative*/ }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { /*transform:scale(1)*/ }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet { /*width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)*/ }

button.swiper-pagination-bullet { /*border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none*/ }

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active { /*opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))*/ }

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { /*margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block*/ }

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { /*display:inline-block;transition:.2s transform,.2s top*/ }

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { /*margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)*/ }

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { /*transition:.2s transform,.2s left*/ }

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { /*transition:.2s transform,.2s right*/ }

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}

.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, section, summary, time, mark, audio, video, select, option {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--body-clr);
  font-family: "Pretendard", "NanumBarun", "돋움", Dotum, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1em;
  box-sizing: border-box;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a, article, aside, details, figcaption,
figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

strong {
  font-weight: 700 !important;
}

b {
  font-weight: 700 !important;
  vertical-align: baseline;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

select::-ms-expand {
  display: none;
}

a, button, input, textarea, select {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  letter-spacing: inherit;
  vertical-align: baseline;
  appearance: none;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
}

button,
select {
  overflow: visible;
  text-transform: none;
  line-height: 1em;
}

abbr,
a:hover,
a:focus,
button:focus,
button:hover {
  text-decoration: none;
}

input:autofill {
  background-color: transparent;
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
}

input[readonly],
input[disabled],
input[readonly] + label,
input[disabled] + label,
button[disabled] {
  cursor: default;
  filter: grayscale(1);
}

/*
  Chrome의 증가/감소 버튼의 커서 모양을 수정.
  `input` 요소의 특정 `font-size` 값에 대해
  감소 버튼의 커서 모양이 `default`에서 `text`로 변한다.
*/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
  OS X의 Safari, Chrome에서 내부(inner) `padding`과 검색 취소 버튼을 제거.
*/
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  input[type="text"], input[type="password"] placeholder속성 추가
*/
input[type=text]:-ms-input-placeholder, input[type=text]::-ms-input-placeholder, input[type=text]::-moz-placeholder {
  color: var(--cap-clr);
  font-family: "Pretendard", "NanumBarun", "돋움", Dotum, sans-serif;
}

input[type=password]:-ms-input-placeholder, input[type=password]::-ms-input-placeholder, input[type=password]::-moz-placeholder {
  color: var(--cap-clr);
  font-family: "Pretendard", "NanumBarun", "돋움", Dotum, sans-serif;
}

input.ie-clear::-ms-clear {
  width: 0;
  height: 0;
  display: none !important;
}

i {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  display: inline-block;
}

pre {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f3f3f3;
  border: 1px solid var(--disable-clr);
  border-radius: 10px;
  font-size: 14px;
}

code {
  padding: 3px 5px;
  background-color: #000;
  border-radius: 5px;
  font-size: 14px;
  color: #efef00;
}

caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
caption::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
}

[hidden] {
  display: none !important;
}

/*----------------------------------------*\
  || Size
\*----------------------------------------*/
.common-headline {
  font-size: 25px !important;
  line-height: 150% !important;
}

.common-headline02 {
  font-size: 23px !important;
  line-height: 150% !important;
}

.common-headline03 {
  font-size: 20px !important;
  line-height: 150% !important;
}

.common-tit01 {
  font-size: 18px !important;
  line-height: 150% !important;
}

.common-tit02 {
  font-size: 17px !important;
  line-height: 150% !important;
}

.common-txt01 {
  font-size: 16px !important;
  line-height: 150% !important;
}

.common-txt02 {
  font-size: 15px !important;
  line-height: 150% !important;
}

.common-txt03 {
  font-size: 14px !important;
  line-height: 150% !important;
}

.common-cap01 {
  font-size: 13px !important;
  line-height: 150% !important;
}

.common-cap02 {
  font-size: 12px !important;
  line-height: 150% !important;
}

.common-cap03 {
  font-size: 11px !important;
  line-height: 150% !important;
}

.ft_24 {
  font-size: 24px;
  line-height: 28px;
}

.ft_32 {
  font-size: 32px;
}

.ft_36 {
  font-size: 36px;
}

.font01 {
  font-size: 16px;
}

.font-1rem {
  font-size: 16px !important;
}

.ft-reset {
  font-size: 0 !important;
}

.txt-inh * {
  font-size: inherit !important;
}

/*----------------------------------------*\
  || Align
\*----------------------------------------*/
.tal,
.al-l {
  text-align: left !important;
}

.tac,
.al-c {
  text-align: center !important;
}

.tar,
.al-r {
  text-align: right !important;
}

.lsp {
  letter-spacing: -1px !important;
}

/*----------------------------------------*\
  || Weight
\*----------------------------------------*/
.fw-t {
  font-weight: 100 !important;
}

.fw-l {
  font-weight: 300 !important;
}

.fw-n {
  font-weight: 400 !important;
}

.fw-m {
  font-weight: 500 !important;
}

.fw-b,
.txt-bold,
.font-type01 {
  font-weight: 700 !important;
}

/*----------------------------------------*\
  || Color
\*----------------------------------------*/
:root {
  --main-clr: #00a29c;
  --body-clr: #333;
  --body-clr2: #555;
  --tit-clr: #111;
  --cap-clr: #888;
  --disable-clr: #ccc;
  --disable-clr2: #e2e2e2;
  --bg-clr1: #f9f9f9;
  --bg-clr2: #ffffff;
  --bg-clr3: #e9e9e9;
  --bg-clr4: #f7f8fa;
  --line-clr: #f2f2f2;
  --line-clr2: #e8e8e8;
  --line-clr3: #ddd;
  --pos-clr: #3f81db;
  --neg-clr: #ff4040;
  --ing-clr: #52bc3d;
  --mint-clr: #dff5f1;
}

.bg-main {
  background-color: var(--main-clr) !important;
}

.bg-black {
  background-color: var(--tit-clr) !important;
}

.bg-white {
  background-color: var(--bg-clr2) !important;
}

.bg-green {
  background-color: var(--ing-clr) !important;
}

.bg-danger {
  background-color: var(--neg-clr) !important;
}

.bg-success {
  background-color: var(--pos-clr) !important;
}

.bg-mint {
  background-color: var(--mint-clr) !important;
}

.bg-grey01 {
  background-color: var(--body-clr) !important;
}

.bg-body02 {
  background-color: var(--body-clr2) !important;
}

.bg-grey02 {
  background-color: var(--cap-clr) !important;
}

.bg-grey03 {
  background-color: var(--disable-clr) !important;
}

.bg-grey04 {
  background-color: var(--disable-clr2) !important;
}

.bg-grey05 {
  background-color: var(--line-clr2) !important;
}

.bg-grey06 {
  background-color: var(--line-clr) !important;
}

.bg-grey07 {
  background-color: var(--bg-clr1) !important;
}

.bg-grey08 {
  background-color: var(--line-clr3) !important;
}

.bg-grey09 {
  background-color: var(--bg-clr3) !important;
}

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

.color-black {
  color: var(--tit-clr) !important;
}

.color-white {
  color: var(--bg-clr2) !important;
}

.color-green {
  color: var(--ing-clr) !important;
}

.color-danger {
  color: var(--neg-clr) !important;
}

.color-success {
  color: var(--pos-clr) !important;
}

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

.color-grey01 {
  color: var(--body-clr) !important;
}

.color-body02 {
  color: var(--body-clr2) !important;
}

.color-grey02 {
  color: var(--cap-clr) !important;
}

.color-grey03 {
  color: var(--disable-clr) !important;
}

.color-grey04 {
  color: var(--disable-clr2) !important;
}

.color-grey05 {
  color: var(--line-clr2) !important;
}

.color-grey06 {
  color: var(--line-clr) !important;
}

.color-grey07 {
  color: var(--bg-clr1) !important;
}

.color-grey08 {
  color: var(--line-clr3) !important;
}

.color-grey09 {
  color: var(--bg-clr3) !important;
}

.bor-main {
  border: 2px solid var(--main-clr) !important;
}

.bor-black {
  border: 2px solid var(--tit-clr) !important;
}

.bor-white {
  border: 2px solid var(--bg-clr2) !important;
}

.bor-green {
  border: 2px solid var(--ing-clr) !important;
}

.bor-danger {
  border: 2px solid var(--neg-clr) !important;
}

.bor-success {
  border: 2px solid var(--pos-clr) !important;
}

.bor-mint {
  border: 2px solid var(--mint-clr) !important;
}

.bor-grey01 {
  border: 2px solid var(--body-clr) !important;
}

.bor-body02 {
  border: 2px solid var(--body-clr2) !important;
}

.bor-grey02 {
  border: 2px solid var(--cap-clr) !important;
}

.bor-grey03 {
  border: 2px solid var(--disable-clr) !important;
}

.bor-grey04 {
  border: 2px solid var(--disable-clr2) !important;
}

.bor-grey05 {
  border: 2px solid var(--line-clr2) !important;
}

.bor-grey06 {
  border: 2px solid var(--line-clr) !important;
}

.bor-grey07 {
  border: 2px solid var(--bg-clr1) !important;
}

.bor-grey08 {
  border: 2px solid var(--line-clr3) !important;
}

.bor-grey09 {
  border: 2px solid var(--bg-clr3) !important;
}

.all-color01,
.bg-color01 {
  border-color: var(--main-clr) !important;
  background-color: var(--main-clr) !important;
}

.txt-color01 {
  color: var(--main-clr) !important;
}

.all-color02,
.bg-color02 {
  border-color: var(--neg-clr) !important;
  background-color: var(--neg-clr) !important;
}

.txt-color02,
.color-active {
  color: var(--neg-clr) !important;
}

.txt-white {
  color: var(--bg-clr2) !important;
}

.txt-black {
  color: var(--tit-clr) !important;
}

.txt-red {
  color: var(--neg-clr) !important;
}

.txt-blue {
  color: var(--pos-clr) !important;
}

.b-font,
.txt-def,
.txt-333 {
  color: var(--body-clr) !important;
}

.txt-666 {
  color: #666 !important;
}

.txt-999 {
  color: var(--cap-clr) !important;
}

.f-color07 {
  color: var(--main-clr) !important;
}

.f-color08 {
  color: red !important;
}

[style="background: #e2e2e2"] [style="color: #ff6262"] {
  color: #fb4a4a !important;
}

/*----------------------------------------*\
  || Etc
\*----------------------------------------*/
.txt-underline {
  text-decoration: underline !important;
}

.tool-number {
  text-decoration: underline;
}

.line-h {
  line-height: 1.4;
}

.txt-lh {
  line-height: 1.5 !important;
}

.txt-over {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.txt-multi {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.break-word {
  word-break: break-word;
}

.underline {
  text-decoration: underline !important;
}

.txt-up {
  display: inline-block;
  margin-bottom: 10px;
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
.fz88 {
  font-size: 14px !important;
}

.fz100 {
  font-size: 16px !important;
}

.fz112 {
  font-size: 18px !important;
}

.fz125 {
  font-size: 20px !important;
}

.fz225 {
  font-size: 36px !important;
}

.lh120 {
  line-height: 20px !important;
}

.lh150 {
  line-height: 24px !important;
}

.lh170 {
  line-height: 28px !important;
}

.lh130p {
  line-height: 130% !important;
}

/* etc */
.big-num-wrap {
  margin: 10px auto 20px;
}

.big-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 150%;
  color: var(--main-clr);
}

.big-num-txt {
  margin-left: 3px;
  font-size: 30px;
  line-height: 36px;
  color: #666;
}

/*----------------------------------------*\
  || [공통] Float
\*----------------------------------------*/
.fl {
  float: left !important;
}

.fr {
  float: right !important;
}

.cl {
  clear: both !important;
}

.fn {
  float: none !important;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/*----------------------------------------*\
  || [공통] Display
\*----------------------------------------*/
.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}

.block {
  display: block !important;
}

/*----------------------------------------*\
  || [공통] Gap
\*----------------------------------------*/
.unit-block-xs {
  margin-bottom: 10px !important;
}
.unit-block-s {
  margin-bottom: 20px !important;
}
.unit-block {
  margin-bottom: 30px !important;
}
.unit-block-m {
  margin-bottom: 40px !important;
}
.unit-block-l {
  margin-bottom: 50px !important;
}
.unit-block-xl {
  margin-bottom: 60px !important;
}

[class*=gap-list] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.gap-list-xs {
  gap: 5px;
}
.gap-list-s {
  gap: 10px;
}
.gap-list-sm {
  gap: 15px;
}
.gap-list-m {
  gap: 20px;
}
.gap-list-ml {
  gap: 25px;
}
.gap-list-l {
  gap: 30px;
}
.gap-list-xl {
  gap: 40px;
}

.gap5 {
  gap: 5px !important;
}

.gap10 {
  gap: 10px !important;
}

.gap15 {
  gap: 15px !important;
}

.gap20 {
  gap: 20px !important;
}

.gap25 {
  gap: 25px !important;
}

.gap30 {
  gap: 30px !important;
}

.gap35 {
  gap: 35px !important;
}

.gap40 {
  gap: 40px !important;
}

.gap45 {
  gap: 45px !important;
}

.gap50 {
  gap: 50px !important;
}

/*----------------------------------------*\
  || [공통] Show/Hide
\*----------------------------------------*/
.hide {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

.visible {
  visibility: visible !important;
}

.view-pc,
.pc-view {
  display: block !important;
}

.view-pc-inline {
  display: inline !important;
}

.view-pc-i-block {
  display: inline-block !important;
}

.view-pc-flex {
  display: flex !important;
}

.view-mobile-flex,
.view-mobile-inline,
.view-mobile-i-block,
.view-mobile,
.mobile-view {
  display: none !important;
}

html.responsive .pc-viewbox {
  display: block !important;
}
html.responsive .tablet-viewbox,
html.responsive .mobile-viewbox {
  display: none !important;
}

@media (max-width: 1200px) {
  html.responsive .tablet-viewbox {
    display: block !important;
  }
  html.responsive .pc-viewbox,
  html.responsive .mobile-viewbox {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .view-pc-flex,
  .view-pc-inline,
  .view-pc-i-block,
  .view-pc,
  .pc-view {
    display: none !important;
  }
  .view-mobile,
  .mobile-view {
    display: block !important;
  }
  .view-mobile-inline {
    display: inline !important;
  }
  .view-mobile-i-block {
    display: inline-block !important;
  }
  .view-mobile-flex {
    display: flex !important;
  }
  html.responsive .mobile-viewbox {
    display: block !important;
  }
  html.responsive .pc-viewbox,
  html.responsive .tablet-viewbox {
    display: none !important;
  }
}
/*----------------------------------------*\
  || [공통] IR / TTS
\*----------------------------------------*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.sr-only::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
  width: auto;
  height: auto;
  position: static;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

caption,
.tts,
.for-a11y,
.component-layer-close-button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
caption::before,
.tts::before,
.for-a11y::before,
.component-layer-close-button-text::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
}

/*----------------------------------------*\
  || [공통] Vertical
\*----------------------------------------*/
.vat {
  vertical-align: top !important;
}

.vam {
  vertical-align: middle !important;
}

.vab {
  vertical-align: bottom !important;
}

/*----------------------------------------*\
  || [공통] Border
\*----------------------------------------*/
.bt-none {
  border-top: none !important;
}

.bl-none {
  border-left: none !important;
}

.br-none {
  border-right: none !important;
}

.bbnone,
.bb-none,
.borderbot-n {
  border-bottom: none !important;
}

.bd-none {
  border: 0 !important;
}

.bt-ccc {
  border-top: 1px solid var(--disable-clr) !important;
}

.bl-ccc {
  border-left: 1px solid var(--disable-clr) !important;
}

.th-brline,
.br-line,
.br-ccc {
  border-right: 1px solid var(--disable-clr) !important;
}

.bb-ccc {
  border-bottom: 1px solid var(--disable-clr) !important;
}

.bd-ccc {
  border: 1px solid var(--disable-clr) !important;
}

.br-ef,
.be-efef,
.brc-tdline,
.br-style01 {
  border-right: 1px solid #efefef !important;
}

.bt-333 {
  border-top: 1px solid var(--body-clr);
}

/*----------------------------------------*\
  || [공통] HR / Line
\*----------------------------------------*/
.hr-line01 {
  width: 100%;
  height: 1px;
  margin: 14px 0;
  background-color: var(--line-clr3);
  border: 0;
}

/*----------------------------------------*\
  || [공통] Position
\*----------------------------------------*/
.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

.static {
  position: static !important;
}

.left52 {
  left: 52% !important;
}

/*----------------------------------------*\
  || [공통] Scroll / Cursor / Etc
\*----------------------------------------*/
.over-hidden {
  overflow-x: hidden !important;
  overflow-y: auto;
}

.scroll {
  overflow: auto !important;
}

.clickable {
  cursor: pointer;
}

.deg180 {
  transform: rotate(180deg);
}

/*----------------------------------------*\
  || [공통] Flex
\*----------------------------------------*/
.flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex3 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex4 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.flex-row {
  flex-direction: row !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-as {
  align-items: flex-start !important;
}
.flex-ae {
  align-items: flex-end !important;
}
.flex-ac {
  align-items: center !important;
}
.flex-ast {
  align-items: stretch !important;
}
.flex-jc {
  justify-content: center;
}
.flex-jsb {
  justify-content: space-between;
}
.flex-jfs {
  justify-content: flex-start;
}
.flex-jfe {
  justify-content: flex-end;
}

/*----------------------------------------*\
  || [공통] Width / Height
\*----------------------------------------*/
.w-auto {
  width: auto !important;
}

.mnw-fit {
  min-width: fit-content !important;
}

.mnw-auto,
.wn-auto {
  min-width: auto !important;
}

.mxw-auto,
.wx-auto {
  max-width: auto !important;
}

.mxw-inh,
.maxw-auto {
  max-width: inherit !important;
}

.maxh-none {
  max-height: none !important;
}

.w5 {
  width: 5% !important;
}

.w10 {
  width: 10% !important;
}

.w15 {
  width: 15% !important;
}

.w20 {
  width: 20% !important;
}

.w25 {
  width: 25% !important;
}

.w30 {
  width: 30% !important;
}

.w35 {
  width: 35% !important;
}

.w40 {
  width: 40% !important;
}

.w45 {
  width: 45% !important;
}

.w50 {
  width: 50% !important;
}

.w55 {
  width: 55% !important;
}

.w60 {
  width: 60% !important;
}

.w65 {
  width: 65% !important;
}

.w70 {
  width: 70% !important;
}

.w75 {
  width: 75% !important;
}

.w80 {
  width: 80% !important;
}

.w85 {
  width: 85% !important;
}

.w90 {
  width: 90% !important;
}

.w95 {
  width: 95% !important;
}

.w100 {
  width: 100% !important;
}

/*----------------------------------------*\
  || [공통] Margin
\*----------------------------------------*/
.m-auto {
  margin: auto !important;
}

.m-top {
  margin-top: auto !important;
}

.m-left {
  margin-left: auto !important;
}

.m-bottom {
  margin-bottom: auto !important;
}

.m-right {
  margin-right: auto !important;
}

.mt3 {
  margin-top: 3px !important;
}

.mt7 {
  margin-top: 7px !important;
}

.mb4 {
  margin-bottom: 4px !important;
}

.mb16 {
  margin-bottom: 16px !important;
}

.ml2 {
  margin-left: 2px;
}

.mr4 {
  margin-right: 4px;
}

.mr11 {
  margin-right: 11px;
}

.margin-b {
  margin-bottom: 20px;
}

.mln30 {
  margin-left: -30px;
}

.mg0 {
  margin: 0px !important;
}

.mg5 {
  margin: 5px !important;
}

.mg10 {
  margin: 10px !important;
}

.mg15 {
  margin: 15px !important;
}

.mg20 {
  margin: 20px !important;
}

.mg25 {
  margin: 25px !important;
}

.mg30 {
  margin: 30px !important;
}

.mg35 {
  margin: 35px !important;
}

.mg40 {
  margin: 40px !important;
}

.mg45 {
  margin: 45px !important;
}

.mg50 {
  margin: 50px !important;
}

.mt0 {
  margin-top: 0px !important;
}

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

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

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

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

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

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

.mt35 {
  margin-top: 35px !important;
}

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

.mt45 {
  margin-top: 45px !important;
}

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

.mt55 {
  margin-top: 55px !important;
}

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

.mt65 {
  margin-top: 65px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mt75 {
  margin-top: 75px !important;
}

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

.mt85 {
  margin-top: 85px !important;
}

.mt90 {
  margin-top: 90px !important;
}

.mt95 {
  margin-top: 95px !important;
}

.mt100 {
  margin-top: 100px !important;
}

.ml0 {
  margin-left: 0px !important;
}

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

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

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

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

.ml25 {
  margin-left: 25px !important;
}

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

.ml35 {
  margin-left: 35px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml45 {
  margin-left: 45px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.ml55 {
  margin-left: 55px !important;
}

.ml60 {
  margin-left: 60px !important;
}

.ml65 {
  margin-left: 65px !important;
}

.ml70 {
  margin-left: 70px !important;
}

.ml75 {
  margin-left: 75px !important;
}

.ml80 {
  margin-left: 80px !important;
}

.ml85 {
  margin-left: 85px !important;
}

.ml90 {
  margin-left: 90px !important;
}

.ml95 {
  margin-left: 95px !important;
}

.ml100 {
  margin-left: 100px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

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

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

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

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

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

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

.mb35 {
  margin-bottom: 35px !important;
}

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

.mb45 {
  margin-bottom: 45px !important;
}

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

.mb55 {
  margin-bottom: 55px !important;
}

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

.mb65 {
  margin-bottom: 65px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

.mb75 {
  margin-bottom: 75px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.mb85 {
  margin-bottom: 85px !important;
}

.mb90 {
  margin-bottom: 90px !important;
}

.mb95 {
  margin-bottom: 95px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.mr0 {
  margin-right: 0px !important;
}

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

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

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

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

.mr25 {
  margin-right: 25px !important;
}

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

.mr35 {
  margin-right: 35px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr45 {
  margin-right: 45px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mr55 {
  margin-right: 55px !important;
}

.mr60 {
  margin-right: 60px !important;
}

.mr65 {
  margin-right: 65px !important;
}

.mr70 {
  margin-right: 70px !important;
}

.mr75 {
  margin-right: 75px !important;
}

.mr80 {
  margin-right: 80px !important;
}

.mr85 {
  margin-right: 85px !important;
}

.mr90 {
  margin-right: 90px !important;
}

.mr95 {
  margin-right: 95px !important;
}

.mr100 {
  margin-right: 100px !important;
}

/*----------------------------------------*\
  || [공통] Padding
\*----------------------------------------*/
.btm-pad {
  padding-bottom: 60px;
}

.pt13 {
  padding-top: 13px;
}

.pd0 {
  padding: 0px !important;
}

.pd5 {
  padding: 5px !important;
}

.pd10 {
  padding: 10px !important;
}

.pd15 {
  padding: 15px !important;
}

.pd20 {
  padding: 20px !important;
}

.pd25 {
  padding: 25px !important;
}

.pd30 {
  padding: 30px !important;
}

.pd35 {
  padding: 35px !important;
}

.pd40 {
  padding: 40px !important;
}

.pd45 {
  padding: 45px !important;
}

.pd50 {
  padding: 50px !important;
}

.pd55 {
  padding: 55px !important;
}

.pd60 {
  padding: 60px !important;
}

.pd65 {
  padding: 65px !important;
}

.pd70 {
  padding: 70px !important;
}

.pd75 {
  padding: 75px !important;
}

.pd80 {
  padding: 80px !important;
}

.pd85 {
  padding: 85px !important;
}

.pd90 {
  padding: 90px !important;
}

.pd95 {
  padding: 95px !important;
}

.pd100 {
  padding: 100px !important;
}

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

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

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

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

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

.pt25 {
  padding-top: 25px !important;
}

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

.pt35 {
  padding-top: 35px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pt45 {
  padding-top: 45px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pt55 {
  padding-top: 55px !important;
}

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

.pt65 {
  padding-top: 65px !important;
}

.pt70 {
  padding-top: 70px !important;
}

.pt75 {
  padding-top: 75px !important;
}

.pt80 {
  padding-top: 80px !important;
}

.pt85 {
  padding-top: 85px !important;
}

.pt90 {
  padding-top: 90px !important;
}

.pt95 {
  padding-top: 95px !important;
}

.pt100 {
  padding-top: 100px !important;
}

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

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

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

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

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

.pl25 {
  padding-left: 25px !important;
}

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

.pl35 {
  padding-left: 35px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pl45 {
  padding-left: 45px !important;
}

.pl50 {
  padding-left: 50px !important;
}

.pl55 {
  padding-left: 55px !important;
}

.pl60 {
  padding-left: 60px !important;
}

.pl65 {
  padding-left: 65px !important;
}

.pl70 {
  padding-left: 70px !important;
}

.pl75 {
  padding-left: 75px !important;
}

.pl80 {
  padding-left: 80px !important;
}

.pl85 {
  padding-left: 85px !important;
}

.pl90 {
  padding-left: 90px !important;
}

.pl95 {
  padding-left: 95px !important;
}

.pl100 {
  padding-left: 100px !important;
}

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

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

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

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

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

.pb25 {
  padding-bottom: 25px !important;
}

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

.pb35 {
  padding-bottom: 35px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pb45 {
  padding-bottom: 45px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.pb55 {
  padding-bottom: 55px !important;
}

.pb60 {
  padding-bottom: 60px !important;
}

.pb65 {
  padding-bottom: 65px !important;
}

.pb70 {
  padding-bottom: 70px !important;
}

.pb75 {
  padding-bottom: 75px !important;
}

.pb80 {
  padding-bottom: 80px !important;
}

.pb85 {
  padding-bottom: 85px !important;
}

.pb90 {
  padding-bottom: 90px !important;
}

.pb95 {
  padding-bottom: 95px !important;
}

.pb100 {
  padding-bottom: 100px !important;
}

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

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

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

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

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

.pr25 {
  padding-right: 25px !important;
}

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

.pr35 {
  padding-right: 35px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.pr45 {
  padding-right: 45px !important;
}

.pr50 {
  padding-right: 50px !important;
}

.pr55 {
  padding-right: 55px !important;
}

.pr60 {
  padding-right: 60px !important;
}

.pr65 {
  padding-right: 65px !important;
}

.pr70 {
  padding-right: 70px !important;
}

.pr75 {
  padding-right: 75px !important;
}

.pr80 {
  padding-right: 80px !important;
}

.pr85 {
  padding-right: 85px !important;
}

.pr90 {
  padding-right: 90px !important;
}

.pr95 {
  padding-right: 95px !important;
}

.pr100 {
  padding-right: 100px !important;
}

/*----------------------------------------*\
  || [공통] Opacity
\*----------------------------------------*/
.op0 {
  opacity: 0 !important;
}

.op1 {
  opacity: 0.1 !important;
}

.op2 {
  opacity: 0.2 !important;
}

.op3 {
  opacity: 0.3 !important;
}

.op4 {
  opacity: 0.4 !important;
}

.op5 {
  opacity: 0.5 !important;
}

.op6 {
  opacity: 0.6 !important;
}

.op7 {
  opacity: 0.7 !important;
}

.op8 {
  opacity: 0.8 !important;
}

.op9 {
  opacity: 0.9 !important;
}

.op10 {
  opacity: 1 !important;
}

.opa0 {
  opacity: 0 !important;
}

.opa1 {
  opacity: 1 !important;
}

/*----------------------------------------*\
  || 화살표 Icon 인터랙션
\*----------------------------------------*/
.moving-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: auto 12px;
}
.moving-arrow span {
  width: 5px;
  height: 10px;
  background: url(/img/common/icon/icon_arrow_mint.png) no-repeat center/contain;
  opacity: 0;
  animation: movingArrow 1.5s linear infinite;
}
.moving-arrow .moving-arrow01 {
  opacity: 0.5;
}
.moving-arrow .moving-arrow02 {
  animation-delay: 0.5s;
}
.moving-arrow .moving-arrow03 {
  animation-delay: 1s;
}

@keyframes movingArrow {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
/*----------------------------------------*\
  || Icon Area
\*----------------------------------------*/
.icon-area {
  text-align: right;
}
.icon-area::after {
  content: "";
  display: block;
  clear: both;
}
.icon-area.bottom {
  padding-top: 20px;
}
.icon-area.bottom button {
  margin-left: 20px;
}
.icon-area li {
  float: left;
}
.icon-area li::before {
  content: "";
  display: block;
  float: left;
  width: 1px;
  height: 18px;
  background-color: #ccc;
  margin: 4px 10px 0;
}
.icon-area li:first-child::before {
  display: none;
}

.icon-area.retouch {
  float: right;
  margin-bottom: -10px;
}
.icon-area.retouch::before, .icon-area.retouch:has(.btn-sm-wh) li::before {
  display: none;
}
.icon-area.retouch:last-child {
  margin-right: 0;
}
.icon-area.retouch li {
  margin-right: 10px;
}
.icon-area.retouch .btn-sm-wh.resize {
  min-width: 120px;
}

.icon-area02 {
  float: right;
}
.icon-area02::after {
  content: "";
  display: block;
  clear: both;
}
.icon-area02 li {
  float: left;
}
.icon-area02 li .btn-list,
.icon-area02 li .btn-calender {
  position: relative;
  width: 30px;
  height: 30px;
  background: var(--line-clr);
}
.icon-area02 li .btn-list.on,
.icon-area02 li .btn-calender.on {
  border: 2px solid var(--main-clr);
}
.icon-area02 li .btn-list.on::after,
.icon-area02 li .btn-calender.on::after {
  filter: invert(46%) sepia(70%) saturate(4498%) hue-rotate(152deg) brightness(98%) contrast(97%);
}

@media (max-width: 1200px) {
  .icon-area .btn-sm-wh {
    margin-bottom: 7px;
  }
}
/*----------------------------------------*\
  || 아이콘 세팅
\*----------------------------------------*/
.ico {
  position: relative;
  font-size: 0;
}
.ico::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  background: url("/img/icn_ir.png") no-repeat 0 0;
  transform: translateY(-50%);
}

.ico-bi {
  width: 40px;
  height: 40px;
  position: relative;
  display: inline-flex;
  align-items: center;
  aspect-ratio: 1;
}
.ico-bi::before {
  width: 100%;
  height: 100%;
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}
.ico-bi > span {
  font-size: 0;
  padding-left: 42px;
}
.ico-bi.has-txt {
  max-width: max-content !important;
}
.ico-bi.has-txt > span {
  font-size: 17px;
}
.ico-bi.size-xs {
  width: 18px;
  height: 18px;
}
.ico-bi.size-xs > span {
  padding-left: 33px !important;
  font-size: 16px;
}
.ico-bi.size-s {
  width: 25px;
  height: 25px;
}
.ico-bi.size-s > span {
  padding-left: 33px !important;
  font-size: 16px;
}
.ico-bi.size-m {
  width: 35px;
  height: 35px;
}

.ico-star {
  position: relative;
}
.ico-star::after {
  content: "대표계좌";
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 24px;
  height: 24px;
  background: url("/img/icn_ir.png") no-repeat -119px 0;
  background-size: 200px;
  font-size: 0;
}

.ico-star-r {
  position: relative;
  line-height: 24px;
  height: 24px;
}
.ico-star-r::after {
  content: "대표계좌";
  display: inline-block;
  /* position: absolute;
  top: -4px;
  right: -23px; */
  width: 24px;
  height: 24px;
  background: url("/img/icn_ir.png") no-repeat -119px 0;
  background-size: 200px;
  font-size: 0;
  margin-top: -2px;
  vertical-align: top;
}

.ico.ico-add::before,
.ico.ico-add-txt::before {
  width: 16px;
  height: 16px;
  background-position: -26px 0;
  background-size: 200px;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
}

.ico.has-txt {
  font-size: 16px;
  padding-left: 25px;
}

/*----------------------------------------*\
  || Icon List
\*----------------------------------------*/
.icon-list-box {
  width: 100%;
}
.icon-list-box > li {
  height: auto;
  min-height: 393px;
  padding: 40px 5px 40px 34px;
  width: 25%;
  border-right: 1px solid #efefef;
  float: left;
  text-align: center;
}
.icon-list-box > li:last-child {
  border-right: none;
}

.icon-list-txt {
  font-weight: 500;
  font-size: 16px;
  padding: 20px 0;
}

.icon-list01,
.icon-list02,
.icon-list03,
.icon-list04 {
  width: 107px;
  height: 97px;
  background: url(/img/common/icon_list01.png);
}

.icon-list02 {
  background: url(/img/common/icon_list02.png);
}

.icon-list03 {
  background: url(/img/common/icon_list03.png);
}

.icon-list04 {
  background: url(/img/common/icon_list04.png);
}

.icon-otpex {
  width: 540px;
  height: 168px;
  position: relative;
  top: 0;
  left: 0;
  background: url(/img/common/MRT-700nP_otplay.gif) no-repeat center center;
  margin: 10px 0 10px 10px;
}

.icon-otpbg {
  position: absolute;
  top: 0;
  left: 10px;
  background: url(/img/common/icon_otpbgimg.png);
  width: 100%;
  height: 100%;
}

/*----------------------------------------*\
  || Icon
\*----------------------------------------*/
.icon-kdic {
  vertical-align: middle;
  display: inline-block;
  width: 53px;
  height: 34px;
  background: url(/img/common/icon_kdiclogo.png) no-repeat center center;
  margin-right: 8px;
}

.icon-btr {
  width: 40px;
  height: 16px;
  background: url(/img/common/icon_btr.png) no-repeat center center/28px;
  display: inline-block;
  vertical-align: inherit;
}

.icon-lobat {
  width: 224px;
  height: 132px;
  background: url(/img/common/MRT-700nP_low.gif) no-repeat 50% 50%;
  display: inline-block;
  vertical-align: inherit;
}

.icon-logout {
  height: 60px;
  background: url("/img/common/logout_icon.png") no-repeat 50% 50%;
}

.icon-timer {
  height: 60px;
  background: url("/img/common/popup_timer_icon.png") no-repeat 50% 50%;
}

.icon-error {
  height: 60px;
  background: url(/img/common/icon/icon_error.png) no-repeat center/contain;
  filter: hue-rotate(183deg);
}

.icon-question {
  width: 16px;
  height: 14px;
  background: url("/img/common/icon_question.png") no-repeat center center;
  margin-left: 20px;
}

.icon-prev,
.icon-next {
  width: 16px;
  height: 10px;
  background: url(/img/common/arrow_icon_black.png) no-repeat 50% 50%;
  transform: rotate(270deg);
  margin-right: 4px;
}

.icon-next {
  transform: rotate(90deg);
}

.txt-question {
  vertical-align: bottom;
  margin-right: 10px;
  width: 29px;
  height: 28px;
  background: url("/img/common/icon_question02.png") no-repeat center center;
}

.arrow-icon {
  width: 6px;
  height: 13px;
  background: url("/img/common/arrow_icon_ss.png") no-repeat center;
  background-size: cover;
  display: inline-block;
}

.timer {
  padding: 13px 25px;
  background: url("/img/common/timer_icon.png") no-repeat left center/16px;
  display: inline-block;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .icon-lobat {
    width: 100%;
    height: auto;
    padding-top: 58.92%;
    background-size: 100%;
  }
  .icon-list-box > li {
    float: none;
    width: 100%;
    min-height: auto;
    padding: 30px 25px;
    border-top: 1px solid #efefef;
    border-right: 0;
  }
  .icon-list-box > li:first-child {
    border-top: 0;
  }
  .icon-otpex {
    width: 100%;
    height: auto;
    padding-top: 31.11%;
    background-size: auto 100%;
  }
  .icon-otpbg {
    background-size: 100%;
  }
}
/*----------------------------------------*\
  || 저축은행 아이콘
\*----------------------------------------*/
/* SB저축은행 */
.ico-bi.b050::before {
  background-image: url("/img/logo_thumb/bank/050.png");
}

/* 고려 */
.ico-bi.sb101::before {
  background-image: url("/img/logo_thumb/bank/101.png");
}

/* 금화 */
.ico-bi.sb153::before {
  background-image: url("/img/logo_thumb/bank/153.png");
}

/* 대명 */
.ico-bi.sb401::before {
  background-image: url("/img/logo_thumb/bank/401.png");
}

/* 대신 */
.ico-bi.sb063::before {
  background-image: url("/img/logo_thumb/bank/063.png");
}

/* 대원 */
.ico-bi.sb617::before {
  background-image: url("/img/logo_thumb/bank/617.png");
}

/* 더블 */
.ico-bi.sb557::before {
  background-image: url("/img/logo_thumb/bank/557.png");
}

/* 동양 */
.ico-bi.sb556::before {
  background-image: url("/img/logo_thumb/bank/556.png");
}

/* 드림 */
.ico-bi.sb605::before {
  background-image: url("/img/logo_thumb/bank/605.png");
}

/* 머스트삼일 */
.ico-bi.sb610::before {
  background-image: url("/img/logo_thumb/bank/610.png");
}

/* 민국 */
.ico-bi.sb012::before {
  background-image: url("/img/logo_thumb/bank/012.png");
}

/* 부림 */
.ico-bi.sb310::before {
  background-image: url("/img/logo_thumb/bank/310.png");
}

/* 삼호 */
.ico-bi.sb510::before {
  background-image: url("/img/logo_thumb/bank/510.png");
}

/* 상상인플러스 */
.ico-bi.sb459::before {
  background-image: url("/img/logo_thumb/bank/459.png");
}

/* 센트럴 */
.ico-bi.sb565::before {
  background-image: url("/img/logo_thumb/bank/565.png");
}

/* 스마트 */
.ico-bi.sb566::before {
  background-image: url("/img/logo_thumb/bank/566.png");
}

/* 스타 */
.ico-bi.sb506::before {
  background-image: url("/img/logo_thumb/bank/506.png");
}

/* 아산 */
.ico-bi.sb460::before {
  background-image: url("/img/logo_thumb/bank/460.png");
}

/* 안국 */
.ico-bi.sb304::before {
  background-image: url("/img/logo_thumb/bank/304.png");
}

/* 애큐온 */
.ico-bi.sb002::before {
  background-image: url("/img/logo_thumb/bank/002.png");
}

/* 엠에스 */
.ico-bi.sb209::before {
  background-image: url("/img/logo_thumb/bank/209.png");
}

/* 예가람 */
.ico-bi.sb049::before {
  background-image: url("/img/logo_thumb/bank/049.png");
}

/* 오투 */
.ico-bi.sb461::before {
  background-image: url("/img/logo_thumb/bank/461.png");
}

/* 웰컴 */
.ico-bi.sb066::before {
  background-image: url("/img/logo_thumb/bank/066.png");
}

/* 유안타 */
.ico-bi.sb036::before {
  background-image: url("/img/logo_thumb/bank/036.png");
}

/* 융창 */
.ico-bi.sb324::before {
  background-image: url("/img/logo_thumb/bank/324.png");
}

/* 인천 */
.ico-bi.sb158::before {
  background-image: url("/img/logo_thumb/bank/158.png");
}

/* 조흥 */
.ico-bi.sb657::before {
  background-image: url("/img/logo_thumb/bank/657.png");
}

/* 참 */
.ico-bi.sb614::before {
  background-image: url("/img/logo_thumb/bank/614.png");
}

/* 키움 */
.ico-bi.sb313::before {
  background-image: url("/img/logo_thumb/bank/313.png");
}

/* 페퍼 */
.ico-bi.sb328::before {
  background-image: url("/img/logo_thumb/bank/328.png");
}

/* 푸른 */
.ico-bi.sb014::before {
  background-image: url("/img/logo_thumb/bank/014.png");
}

/* 한국투자 */
.ico-bi.sb551::before {
  background-image: url("/img/logo_thumb/bank/551.png");
}

/* 한화 */
.ico-bi.sb334::before {
  background-image: url("/img/logo_thumb/bank/334.png");
}

/* BNK */
.ico-bi.sb130::before {
  background-image: url("/img/logo_thumb/bank/130.png");
}

/* DB */
.ico-bi.sb007::before {
  background-image: url("/img/logo_thumb/bank/007.png");
}

/* ES */
.ico-bi.sb016::before {
  background-image: url("/img/logo_thumb/bank/016.png");
}

/* JT */
.ico-bi.sb332::before {
  background-image: url("/img/logo_thumb/bank/332.png");
}

/* KB */
.ico-bi.sb065::before {
  background-image: url("/img/logo_thumb/bank/065.png");
}

/* OK */
.ico-bi.sb064::before {
  background-image: url("/img/logo_thumb/bank/064.png");
}

/* SBI */
.ico-bi.sb028::before {
  background-image: url("/img/logo_thumb/bank/028.png");
}

/* 국제 */
.ico-bi.sb102::before {
  background-image: url("/img/logo_thumb/bank/102.png");
}

/* 남양 */
.ico-bi.sb305::before {
  background-image: url("/img/logo_thumb/bank/305.png");
}

/* 대백 */
.ico-bi.sb207::before {
  background-image: url("/img/logo_thumb/bank/207.png");
}

/* 대아 */
.ico-bi.sb607::before {
  background-image: url("/img/logo_thumb/bank/607.png");
}

/* 대한 */
.ico-bi.sb554::before {
  background-image: url("/img/logo_thumb/bank/554.png");
}

/* 더케이 */
.ico-bi.sb021::before {
  background-image: url("/img/logo_thumb/bank/021.png");
}

/* 동원제일 */
.ico-bi.sb656::before {
  background-image: url("/img/logo_thumb/bank/656.png");
}

/* 라온 */
.ico-bi.sb604::before {
  background-image: url("/img/logo_thumb/bank/604.png");
}

/* 모아 */
.ico-bi.sb162::before {
  background-image: url("/img/logo_thumb/bank/162.png");
}

/* 바로 */
.ico-bi.sb038::before {
  background-image: url("/img/logo_thumb/bank/038.png");
}

/* 삼정 */
.ico-bi.sb314::before {
  background-image: url("/img/logo_thumb/bank/314.png");
}

/* 상상인 */
.ico-bi.sb330::before {
  background-image: url("/img/logo_thumb/bank/330.png");
}

/* 세람 */
.ico-bi.sb325::before {
  background-image: url("/img/logo_thumb/bank/325.png");
}

/* 솔브레인 */
.ico-bi.sb654::before {
  background-image: url("/img/logo_thumb/bank/654.png");
}

/* 스카이 */
.ico-bi.sb008::before {
  background-image: url("/img/logo_thumb/bank/008.png");
}

/* 신한 */
.ico-bi.sb347::before {
  background-image: url("/img/logo_thumb/bank/347.png");
}

/* 아주 */
.ico-bi.sb403::before {
  background-image: url("/img/logo_thumb/bank/403.png");
}

/* 안양 */
.ico-bi.sb320::before {
  background-image: url("/img/logo_thumb/bank/320.png");
}

/* 에스앤티 */
.ico-bi.sb651::before {
  background-image: url("/img/logo_thumb/bank/651.png");
}

/* 영진 */
.ico-bi.sb321::before {
  background-image: url("/img/logo_thumb/bank/321.png");
}

/* 오성 */
.ico-bi.sb616::before {
  background-image: url("/img/logo_thumb/bank/616.png");
}

/* 우리 */
.ico-bi.sb120::before {
  background-image: url("/img/logo_thumb/bank/120.png");
}

/* 유니온 */
.ico-bi.sb208::before {
  background-image: url("/img/logo_thumb/bank/208.png");
}

/* 다올 */
.ico-bi.sb048::before {
  background-image: url("/img/logo_thumb/bank/048.png");
}

/* 인성 */
.ico-bi.sb151::before {
  background-image: url("/img/logo_thumb/bank/151.png");
}

/* 좋은 */
.ico-bi.sb024::before {
  background-image: url("/img/logo_thumb/bank/024.png");
}

/* 진주 */
.ico-bi.sb658::before {
  background-image: url("/img/logo_thumb/bank/658.png");
}

/* 청주 */
.ico-bi.sb405::before {
  background-image: url("/img/logo_thumb/bank/405.png");
}

/* 키움예스 */
.ico-bi.sb017::before {
  background-image: url("/img/logo_thumb/bank/017.png");
}

/* 평택 */
.ico-bi.sb317::before {
  background-image: url("/img/logo_thumb/bank/317.png");
}

/* 하나 */
.ico-bi.sb067::before {
  background-image: url("/img/logo_thumb/bank/067.png");
}

/* 한성 */
.ico-bi.sb408::before {
  background-image: url("/img/logo_thumb/bank/408.png");
}

/* 흥국 */
.ico-bi.sb127::before {
  background-image: url("/img/logo_thumb/bank/127.png");
}

/* CK */
.ico-bi.sb351::before {
  background-image: url("/img/logo_thumb/bank/351.png");
}

/* DH */
.ico-bi.sb115::before {
  background-image: url("/img/logo_thumb/bank/115.png");
}

/* IBK */
.ico-bi.sb650::before {
  background-image: url("/img/logo_thumb/bank/650.png");
}

/* JT친애 */
.ico-bi.sb068::before {
  background-image: url("/img/logo_thumb/bank/068.png");
}

/* NH */
.ico-bi.sb062::before {
  background-image: url("/img/logo_thumb/bank/062.png");
}

/* OSB */
.ico-bi.sb003::before {
  background-image: url("/img/logo_thumb/bank/003.png");
}

/*----------------------------------------*\
  || 다른 은행 아이콘
\*----------------------------------------*/
/* 기업은행 */
.ico-bi.b003::before {
  background-image: url("/img/logo_thumb/other_bank/003.png");
}

/* 우리은행 */
.ico-bi.b020::before {
  background-image: url("/img/logo_thumb/other_bank/020.png");
}

/* 하나은행 */
.ico-bi.b081::before {
  background-image: url("/img/logo_thumb/other_bank/081.png");
}

/* 한국씨티은행 */
.ico-bi.b027::before {
  background-image: url("/img/logo_thumb/other_bank/027.png");
}

/* 경남은행 */
.ico-bi.b039::before {
  background-image: url("/img/logo_thumb/other_bank/039.png");
}

/* 대구은행 */
.ico-bi.b031::before {
  background-image: url("/img/logo_thumb/other_bank/031.png");
}

/* 산림조합 */
.ico-bi.b064::before {
  background-image: url("/img/logo_thumb/other_bank/064.png");
}

/* 새마을금고 */
.ico-bi.b045::before {
  background-image: url("/img/logo_thumb/other_bank/045.png");
}

/* 신협 */
.ico-bi.b048::before {
  background-image: url("/img/logo_thumb/other_bank/048.png");
}

/* 제주은행 */
.ico-bi.b035::before {
  background-image: url("/img/logo_thumb/other_bank/035.png");
}

/* 케이뱅크 */
.ico-bi.b089::before {
  background-image: url("/img/logo_thumb/other_bank/089.png");
}

/* 국민은행 */
.ico-bi.b004::before {
  background-image: url("/img/logo_thumb/other_bank/004.png");
}

/* 신한은행 */
.ico-bi.b088::before {
  background-image: url("/img/logo_thumb/other_bank/088.png");
}

/* 농협은행 */
.ico-bi.b011::before,
.ico-bi.b012::before {
  background-image: url("/img/logo_thumb/other_bank/011.png");
}

/* SC은행 */
.ico-bi.b023::before {
  background-image: url("/img/logo_thumb/other_bank/023.png");
}

/* 우체국 */
.ico-bi.b071::before {
  background-image: url("/img/logo_thumb/other_bank/071.png");
}

/* 광주은행 */
.ico-bi.b034::before {
  background-image: url("/img/logo_thumb/other_bank/034.png");
}

/* 부산은행 */
.ico-bi.b032::before {
  background-image: url("/img/logo_thumb/other_bank/032.png");
}

/* 산업은행 */
.ico-bi.b002::before {
  background-image: url("/img/logo_thumb/other_bank/002.png");
}

/* 수협 */
.ico-bi.b007::before {
  background-image: url("/img/logo_thumb/other_bank/007.png");
}

/* 전북은행 */
.ico-bi.b037::before {
  background-image: url("/img/logo_thumb/other_bank/037.png");
}

/* 카카오뱅크 */
.ico-bi.b090::before {
  background-image: url("/img/logo_thumb/other_bank/090.png");
}

/* 도이치 */
.ico-bi.b055::before {
  background-image: url("/img/logo_thumb/other_bank/055.png");
}

/* BNPP */
.ico-bi.b061::before {
  background-image: url("/img/logo_thumb/other_bank/061.png");
}

/* 중국건설 */
.ico-bi.b067::before {
  background-image: url("/img/logo_thumb/other_bank/067.png");
}

/* 수출입 */
.ico-bi.b008::before {
  background-image: url("/img/logo_thumb/other_bank/008.png");
}

/* 중국공상 */
.ico-bi.b062::before {
  background-image: url("/img/logo_thumb/other_bank/062.png");
}

/* BOA */
.ico-bi.b060::before {
  background-image: url("/img/logo_thumb/other_bank/060.png");
}

/* HSBC */
.ico-bi.b054::before {
  background-image: url("/img/logo_thumb/other_bank/054.png");
}

/* JP모간 */
.ico-bi.b057::before {
  background-image: url("/img/logo_thumb/other_bank/057.png");
}

/* 중국은행 */
.ico-bi.b063::before {
  background-image: url("/img/logo_thumb/other_bank/063.png");
}

/* 토스은행 */
.ico-bi.b092::before {
  background-image: url("/img/logo_thumb/other_bank/092.png");
}

/* 국세, 국고금, 지방세 */
.ico-bi.b000::before {
  background-image: url("/img/logo_thumb/other_bank/000.png");
}

/*----------------------------------------*\
  || 증권사 아이콘
\*----------------------------------------*/
/* 한국포스증권 */
.ico-bi.b294::before {
  background-image: url("/img/logo_thumb/stock/294.png");
}

/* 교보증권 */
.ico-bi.b261::before {
  background-image: url("/img/logo_thumb/stock/261.png");
}

/* 메리츠증권 */
.ico-bi.b287::before {
  background-image: url("/img/logo_thumb/stock/287.png");
}

/* 부국증권 */
.ico-bi.b04::before {
  background-image: url("/img/logo_thumb/stock/04.png");
}

/* 신영증권 */
.ico-bi.b05::before {
  background-image: url("/img/logo_thumb/stock/05.png");
}

/* 유안타증권 */
.ico-bi.b06::before {
  background-image: url("/img/logo_thumb/stock/06.png");
}

/* LS증권 */
.ico-bi.b265::before {
  background-image: url("/img/logo_thumb/stock/265.png");
}

/* 키움증권 */
.ico-bi.b264::before {
  background-image: url("/img/logo_thumb/stock/264.png");
}

/* 하이투자증권 */
.ico-bi.b262::before {
  background-image: url("/img/logo_thumb/stock/262.png");
}

/* 한화증권 */
.ico-bi.b269::before {
  background-image: url("/img/logo_thumb/stock/269.png");
}

/* DB증권 */
.ico-bi.b279::before {
  background-image: url("/img/logo_thumb/stock/279.png");
}

/* 다올투자증권 */
.ico-bi.b12::before {
  background-image: url("/img/logo_thumb/stock/12.png");
}

/* BNK투자증권 */
.ico-bi.b13::before {
  background-image: url("/img/logo_thumb/stock/13.png");
}

/* NH투자증권 */
.ico-bi.b247::before {
  background-image: url("/img/logo_thumb/stock/247.png");
}

/* 대신증권 */
.ico-bi.b267::before {
  background-image: url("/img/logo_thumb/stock/267.png");
}

/* 미래에셋대우 */
.ico-bi.b238::before {
  background-image: url("/img/logo_thumb/stock/238.png");
}

/* 삼성증권 */
.ico-bi.b240::before {
  background-image: url("/img/logo_thumb/stock/240.png");
}

/* 신한금융투자 */
.ico-bi.b278::before {
  background-image: url("/img/logo_thumb/stock/278.png");
}

/* 유진투자증권 */
.ico-bi.b280::before {
  background-image: url("/img/logo_thumb/stock/280.png");
}

/* 케이프투자증권 */
.ico-bi.b20::before {
  background-image: url("/img/logo_thumb/stock/20.png");
}

/* 하나금융투자 */
.ico-bi.b270::before {
  background-image: url("/img/logo_thumb/stock/270.png");
}

/* 한국투자증권 */
.ico-bi.b243::before {
  background-image: url("/img/logo_thumb/stock/243.png");
}

/* 현대차증권 */
.ico-bi.b263::before {
  background-image: url("/img/logo_thumb/stock/263.png");
}

/* KB증권 */
.ico-bi.b218::before {
  background-image: url("/img/logo_thumb/stock/218.png");
}

/* SK증권 */
.ico-bi.b266::before {
  background-image: url("/img/logo_thumb/stock/266.png");
}

/* 카카오페이증권 */
.ico-bi.b26::before {
  background-image: url("/img/logo_thumb/stock/26.png");
}

/* 카카오페이증권 */
.ico-bi.b288::before {
  background-image: url("/img/logo_thumb/stock/288.png");
}

/* 토스증권 */
.ico-bi.b271::before {
  background-image: url("/img/logo_thumb/stock/271.png");
}

/* 케이프투자증권 */
.ico-bi.b292::before {
  background-image: url("/img/logo_thumb/stock/292.png");
}

/* 유안타증권 */
.ico-bi.b209::before {
  background-image: url("/img/logo_thumb/stock/209.png");
}

/* 신영증권 */
.ico-bi.b291::before {
  background-image: url("/img/logo_thumb/stock/291.png");
}

/* 부국증권 */
.ico-bi.b290::before {
  background-image: url("/img/logo_thumb/stock/290.png");
}

/* 다올증권 */
.ico-bi.b227::before {
  background-image: url("/img/logo_thumb/stock/227.png");
}

/* BNK증권 */
.ico-bi.b224::before {
  background-image: url("/img/logo_thumb/stock/224.png");
}

/* IBK증권 */
.ico-bi.b225::before {
  background-image: url("/img/logo_thumb/stock/225.png");
}

/* 상상인증권 */
.ico-bi.b221::before {
  background-image: url("/img/logo_thumb/stock/221.png");
}

/*----------------------------------------*\
  || 카드사 아이콘
\*----------------------------------------*/
/* 오픈기관 */
.ico-bi.b399::before {
  background-image: url("../img/logo_thumb/card/399399.png");
}

/* 우리카드 */
.ico-bi.b041::before {
  background-image: url("../img/logo_thumb/card/041041.png");
}

/* 광주카드 */
.ico-bi.b364::before {
  background-image: url("../img/logo_thumb/card/034034.png");
}

/* 삼성카드 */
.ico-bi.b365::before {
  background-image: url("../img/logo_thumb/card/365365.png");
}

/* 신한카드 */
.ico-bi.b366::before {
  background-image: url("../img/logo_thumb/card/366366.png");
}

/* 현대카드 */
.ico-bi.b367::before {
  background-image: url("../img/logo_thumb/card/367367.png");
}

/* 롯데카드 */
.ico-bi.b368::before {
  background-image: url("../img/logo_thumb/card/368368.png");
}

/* 수협은행 */
.ico-bi.b369::before {
  background-image: url("../img/logo_thumb/card/007007.png");
}

/* 씨티카드 */
.ico-bi.b370::before {
  background-image: url("../img/logo_thumb/card/027027.png");
}

/* NH농협은행 */
.ico-bi.b371::before {
  background-image: url("../img/logo_thumb/card/011011.png");
}

/* 전북카드 */
.ico-bi.b0372::before {
  background-image: url("../img/logo_thumb/card/037037.png");
}

/* 제주카드 */
.ico-bi.b0373::before {
  background-image: url("../img/logo_thumb/card/035035.png");
}

/* 하나카드 */
.ico-bi.b374::before {
  background-image: url("../img/logo_thumb/card/374374.png");
}

/* KB국민카드 */
.ico-bi.b381::before {
  background-image: url("../img/logo_thumb/card/381381.png");
}

/* 산업은행 */
.ico-bi.b902::before {
  background-image: url("../img/logo_thumb/card/002002.png");
}

/* 기업은행(BC카드) */
.ico-bi.b903::before {
  background-image: url("../img/logo_thumb/card/003003.png");
}

/* 신협카드 */
.ico-bi.b948::before {
  background-image: url("../img/logo_thumb/card/948.png");
}

/* 저축은행카드 */
.ico-bi.b950::before {
  background-image: url("../img/logo_thumb/card/950.png");
}

/* 우체국카드 */
.ico-bi.b971::before {
  background-image: url("../img/logo_thumb/card/971.png");
}

/* 케이뱅크카드 */
.ico-bi.b989::before {
  background-image: url("../img/logo_thumb/card/089089.png");
}

/* 카카오뱅크 */
.ico-bi.b990::before {
  background-image: url("../img/logo_thumb/card/381090.png");
}

/* 토스뱅크 */
.ico-bi.b992::before {
  background-image: url("../img/logo_thumb/card/092092.png");
}

/* BC카드 */
.ico-bi.b361361::before {
  background-image: url("../img/logo_thumb/card/361361.png");
}

/* SC제일은행(BC카드) */
.ico-bi.b361023::before {
  background-image: url("../img/logo_thumb/card/361023.png");
}

/* 대구은행(BC카드) */
.ico-bi.b361031::before {
  background-image: url("../img/logo_thumb/card/361031.png");
}

/* 부산은행(BC카드) */
.ico-bi.b361032::before {
  background-image: url("../img/logo_thumb/card/361032.png");
}

/* 경남은행(BC카드) */
.ico-bi.b361039::before {
  background-image: url("../img/logo_thumb/card/361039.png");
}

/*----------------------------------------*\
  || 선불사 아이콘
\*----------------------------------------*/
/* 오픈기관 */
.ico-bi.bF00::before {
  background-image: url("../img/logo_thumb/pay/F00.png");
}

/* 지머니트랜스 */
.ico-bi.bF01::before {
  background-image: url("../img/logo_thumb/pay/F01.png");
}

/* 핀샷 */
.ico-bi.bF02::before {
  background-image: url("../img/logo_thumb/pay/F02.png");
}

/* 글로벌머니익스프레스 */
.ico-bi.bF03::before {
  background-image: url("../img/logo_thumb/pay/F03.png");
}

/* 한패스 */
.ico-bi.bF04::before {
  background-image: url("../img/logo_thumb/pay/F04.png");
}

/* 트래블월렛 */
.ico-bi.bF05::before {
  background-image: url("../img/logo_thumb/pay/F05.png");
}

/* 비바리퍼블리카(토스) */
.ico-bi.bF06::before {
  background-image: url("../img/logo_thumb/pay/F06.png");
}

/* 핀크 */
.ico-bi.bF07::before {
  background-image: url("../img/logo_thumb/pay/F07.png");
}

/* 디셈버앤컴퍼니 */
.ico-bi.bF08::before {
  background-image: url("../img/logo_thumb/pay/F08.png");
}

/* 카카오페이 */
.ico-bi.bF09::before {
  background-image: url("../img/logo_thumb/pay/F09.png");
}

/* 세틀뱅크 */
.ico-bi.bF10::before {
  background-image: url("../img/logo_thumb/pay/F10.png");
}

/* 뱅크샐러드 */
.ico-bi.bF11::before {
  background-image: url("../img/logo_thumb/pay/F11.png");
}

/* 쿠콘 */
.ico-bi.bF12::before {
  background-image: url("../img/logo_thumb/pay/F12.png");
}

/* 갤럭시아머니트리 */
.ico-bi.bF13::before {
  background-image: url("../img/logo_thumb/pay/F13.png");
}

/* 코나아이 */
.ico-bi.bF14::before {
  background-image: url("../img/logo_thumb/pay/F14.png");
}

/* 쿠팡페이 */
.ico-bi.bF15::before {
  background-image: url("../img/logo_thumb/pay/F15.png");
}

/* 네이버파이낸셜 */
.ico-bi.bF16::before {
  background-image: url("../img/logo_thumb/pay/F16.png");
}

/* 에스에스지닷컴 */
.ico-bi.bF17::before {
  background-image: url("../img/logo_thumb/pay/F17.png");
}

/* 티머니 */
.ico-bi.bF18::before {
  background-image: url("../img/logo_thumb/pay/F18.png");
}

/* 페이코 */
.ico-bi.bF19::before {
  background-image: url("../img/logo_thumb/pay/F19.png");
}

/* 십일번가 */
.ico-bi.bF20::before {
  background-image: url("../img/logo_thumb/pay/F20.png");
}

/* 케이에스넷 */
.ico-bi.bF21::before {
  background-image: url("../img/logo_thumb/pay/F21.png");
}

/* DGB 유페이 */
.ico-bi.bF22::before {
  background-image: url("../img/logo_thumb/pay/F22.png");
}

/* 롯데멤버스 */
.ico-bi.bF23::before {
  background-image: url("../img/logo_thumb/pay/F23.png");
}

/* 오케이인베스트먼트파트너스 */
.ico-bi.bF24::before {
  background-image: url("../img/logo_thumb/pay/F24.png");
}

/* 나이스정보통신 */
.ico-bi.bF25::before {
  background-image: url("../img/logo_thumb/pay/F25.png");
}

/* 이베이코리아 */
.ico-bi.bF26::before {
  background-image: url("../img/logo_thumb/pay/F26.png");
}

/* 차이코퍼레이션 */
.ico-bi.bF27::before {
  background-image: url("../img/logo_thumb/pay/F27.png");
}

/* 다날 */
.ico-bi.bF28::before {
  background-image: url("../img/logo_thumb/pay/F28.png");
}

/* 웰컴페이먼츠 */
.ico-bi.bF29::before {
  background-image: url("../img/logo_thumb/pay/F29.png");
}

/* 에스케이플래닛 */
.ico-bi.bF30::before {
  background-image: url("../img/logo_thumb/pay/F30.png");
}

/* 아이씨비 */
.ico-bi.bF31::before {
  background-image: url("../img/logo_thumb/pay/F31.png");
}

/* 에스케이플래닛 */
.ico-bi.bF32::before {
  background-image: url("../img/logo_thumb/pay/F32.png");
}

/* 카카오모빌리티 */
.ico-bi.bF33::before {
  background-image: url("../img/logo_thumb/pay/F33.png");
}

/* 지엘엔인터내셔널 */
.ico-bi.bF34::before {
  background-image: url("../img/logo_thumb/pay/F34.png");
}

/* 와이어바알리 */
.ico-bi.bF35::before {
  background-image: url("../img/logo_thumb/pay/F35.png");
}

/* 당근페이 */
.ico-bi.bF36::before {
  background-image: url("../img/logo_thumb/pay/F36.png");
}

/* Finddy */
.ico-bi.bF38::before {
  background-image: url("../img/logo_thumb/pay/F38.png");
}

/* 비즈플레이 */
.ico-bi.bF39::before {
  background-image: url("../img/logo_thumb/pay/F39.png");
}

/* 한국선불카드 */
.ico-bi.bF40::before {
  background-image: url("../img/logo_thumb/pay/F40.png");
}

/* 우아한형제들 */
.ico-bi.bF41::before {
  background-image: url("../img/logo_thumb/pay/F41.png");
}

/* 페이네스트 */
.ico-bi.bF42::before {
  background-image: url("../img/logo_thumb/pay/F42.png");
}

/* 하이픈코퍼레이션 */
.ico-bi.bF43::before {
  background-image: url("../img/logo_thumb/pay/F43.png");
}

/* 섹타나인 */
.ico-bi.bF44::before {
  background-image: url("../img/logo_thumb/pay/F44.png");
}

/* 스마트로 */
.ico-bi.bF45::before {
  background-image: url("../img/logo_thumb/pay/F45.png");
}

/* NICE */
.ico-bi.NIC::before {
  background-image: url("/img/logo_thumb/service/NIC.svg");
}

/*----------------------------------------*\
  || || Mixin
\*----------------------------------------*/
/*----------------------------------------*\
  || || [공통] Keyframes
\*----------------------------------------*/
@keyframes bounce {
  0%, 20%, 80%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(2px);
  }
  60% {
    transform: translateY(-3px);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes scaleUp {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes flip3D {
  0% {
    transform: perspective(1500px) rotateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(1500px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(1500px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(1500px) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(1500px) scale(1);
    animation-timing-function: ease-in;
  }
}
/*----------------------------------------*\
  || Is Animating
\*----------------------------------------*/
.is-animating > * {
  opacity: 0;
}
.is-animating > *:nth-child(1) {
  animation-delay: 0.15s;
}
.is-animating > *:nth-child(2) {
  animation-delay: 0.3s;
}
.is-animating > *:nth-child(3) {
  animation-delay: 0.45s;
}
.is-animating > *:nth-child(4) {
  animation-delay: 0.6s;
}
.is-animating > *:nth-child(5) {
  animation-delay: 0.75s;
}
.is-animating > *:nth-child(6) {
  animation-delay: 0.9s;
}
.is-animating > *:nth-child(7) {
  animation-delay: 1.05s;
}
.is-animating > *:nth-child(8) {
  animation-delay: 1.2s;
}
.is-animating > *:nth-child(9) {
  animation-delay: 1.35s;
}
.is-animating > *:nth-child(10) {
  animation-delay: 1.5s;
}
.is-animating--vertical > * {
  animation-name: slide10px;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes slide10px {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.is-animating__item {
  animation-name: slide-5px;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slide-5px {
  0% {
    transform: translateY(-5px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

html {
  overflow: auto;
  min-width: 1200px;
}
html.responsive {
  min-width: initial;
  width: auto;
}

html,
body {
  height: 100%;
  font-size: 10px;
  overscroll-behavior: none;
}

html.js-scroll-blocking,
html.js-scroll-blocking body,
html.js-scroll-blocking .layout-wrap {
  overflow: hidden !important;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

.layout-wrap.type-A .typeBcont,
.layout-wrap.type-A #typeBmenu {
  display: none !important;
}

.layout-wrap.type-B .typeAcont,
.layout-wrap.type-B #typeAmenu {
  display: none !important;
}

.layout-wrap {
  height: 100%;
}

.layout-container {
  position: relative;
  max-width: 100vw;
  min-height: 100%;
  margin: 0;
  padding: 0 !important; /* 임시 important */
  overflow: hidden;
  box-sizing: border-box;
}

.js-content-zoom-wrap {
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
  transition: all ease 0.3s;
}
.js-content-zoom-wrap .content,
.js-content-zoom-wrap .container,
.js-content-zoom-wrap .title-top {
  max-width: none;
  margin: 0;
}

.content {
  padding: 0 0 40px;
}

.content,
.container {
  position: relative;
  max-width: 1200px;
  min-height: calc(100vh - 470px);
  margin: 0 auto;
  padding-bottom: 60px;
  box-sizing: border-box;
}
.content:has(#breadcrumb),
.container:has(#breadcrumb) {
  min-height: calc(100vh - 530px);
}
.content:has(.dep-title-wrap),
.container:has(.dep-title-wrap) {
  padding-top: 60px;
}

.co-size {
  width: 1200px;
  margin: auto;
}

/*----------------------------------------*\
  || [공통] TTS
\*----------------------------------------*/
.for-a11y,
caption.for-a11y,
.component-layer-close-button-text,
.layout-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.for-a11y::before,
caption.for-a11y::before,
.component-layer-close-button-text::before,
.layout-page-title::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
}

/*----------------------------------------*\
  || [공통] Skip Navigation
\*----------------------------------------*/
#skipnavigation {
  position: absolute;
  top: 0;
  z-index: 5000;
}
#skipnavigation a {
  display: block;
  position: fixed;
  z-index: 5000;
  top: -40px;
  left: 0;
  width: 100%;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  color: var(--bg-clr2);
  background: #1d60a7;
}
#skipnavigation a:focus {
  top: 0;
  outline: 2px solid red;
  outline-offset: 1px;
}

/*----------------------------------------*\
  || Print
\*----------------------------------------*/
@media print {
  .popup-body01,
  .popup-body02 {
    overflow: visible !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}
/*----------------------------------------*\
  || Gap
\*----------------------------------------*/
.select-wrap + .basic-inp-wrap,
.basic-inp-wrap + .select-wrap {
  margin-top: 15px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html {
    overflow-x: hidden;
    min-width: auto;
  }
  html #_FSBcontainer {
    zoom: 1 !important;
  }
  html.responsive .js-content-zoom-wrap,
  html:has(.content) .js-content-zoom-wrap {
    width: auto !important;
    height: auto !important;
  }
  html.responsive .js-content-zoom-wrap .container,
  html.responsive .js-content-zoom-wrap .title-top,
  html:has(.content) .js-content-zoom-wrap .container,
  html:has(.content) .js-content-zoom-wrap .title-top {
    width: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    padding: 15px 15px 50px;
  }
  html.responsive .container > .info-table-area:first-child,
  html:has(.content) .container > .info-table-area:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  html.responsive .content,
  html:has(.content) .content {
    margin: 0 auto;
    padding: 20px;
  }
  html.responsive .content:has(.dep-title-wrap),
  html.responsive .container:has(.dep-title-wrap),
  html:has(.content) .content:has(.dep-title-wrap),
  html:has(.content) .container:has(.dep-title-wrap) {
    padding-top: 30px;
  }
  .container {
    padding: 20px;
  }
}
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .content {
    padding-top: 0;
  }
}
.header-new {
  position: relative;
  z-index: 2;
}
.header-new::before {
  width: 100%;
  height: 1px;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #f0f0f3;
  z-index: 1;
}

html:has(.main-wrap) .header-new::before {
  display: none;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
  margin: auto;
  padding: 20px 0 12px;
}

.header-left {
  display: flex;
  align-items: self-end;
  gap: 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 16px;
}
.header-right .header-list {
  gap: 8px;
}
.header-right .header-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-right .header-list li + li::before {
  content: "|";
  font-size: 14px;
  font-weight: 100;
  line-height: 16px;
  color: var(--line-clr3);
}
.header-right .type-list {
  display: flex;
  align-items: center;
  width: 100px;
  height: 28px;
  padding: 2px;
  background: var(--line-clr);
  border: 1px solid #ececec;
  border-radius: 100px;
  box-sizing: border-box;
}
.header-right .type-list li {
  width: 50%;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  color: #587474;
  text-align: center;
  border-radius: 100px;
}
.header-right .type-list li.on {
  background-color: var(--main-clr);
  color: var(--bg-clr2);
}
.header-right .type-list li a {
  display: block;
}

.header-list {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-list .header-item a {
  font-size: 14px;
  color: var(--tit-clr);
}

.header-bottom {
  display: flex;
  align-items: center;
  width: 1200px;
  height: 72px;
  margin: auto;
}
.header-bottom .header-logo {
  height: 36px;
  margin-right: 45px;
}
.header-bottom .header-logo a,
.header-bottom .header-logo img {
  height: 100%;
}
.header-bottom .header-menu-list {
  margin-left: auto;
}

.header-menu-list {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-menu-list .user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-menu-list .user a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-menu-list .user a img {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, 0.0784313725);
  border-radius: 50%;
  transition: all 0.15s ease;
}
.header-menu-list .user a .name {
  font-size: 12px;
  color: var(--tit-clr);
}
.header-menu-list .user a .name span {
  font-weight: 700;
  color: inherit;
}
.header-menu-list .user .header-count-time-number {
  float: none;
  width: auto;
  min-width: 33px;
  background: none;
  font-size: 12px;
  font-weight: 600;
  line-height: inherit;
  color: var(--main-clr);
}
.header-menu-list .search > button,
.header-menu-list .menu > button {
  width: 36px;
  height: 36px;
  position: relative;
  display: block;
  transition: all 0.2s ease;
}
.header-menu-list .search > button span,
.header-menu-list .menu > button span {
  transition: all 0.5s ease;
}
.header-menu-list .search > button:not(.on):hover {
  animation: bounce 1.2s cubic-bezier(0.22, 1, 0.86, 1.18) infinite;
}
.header-menu-list .search > button .line01 {
  width: 23px;
  height: 23px;
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: block;
  background: var(--bg-clr2);
  border: 3px solid var(--tit-clr);
  border-radius: 50%;
}
.header-menu-list .search > button .line02 {
  width: 10px;
  height: 3px;
  position: absolute;
  right: 5px;
  bottom: 7px;
  display: block;
  background: var(--tit-clr);
  border-radius: 20px;
  transform: rotate(45deg);
}
.header-menu-list .search > button.on .line01 {
  width: 36px;
  height: 36px;
  right: 0;
  bottom: 0;
  background: var(--tit-clr);
}
.header-menu-list .search > button.on .line02 {
  top: 50%;
  left: 50%;
  right: initial;
  bottom: initial;
  width: 18px;
  background: var(--bg-clr2);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.header-menu-list .search > button.on .line03 {
  width: 18px;
  height: 3px;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  background: var(--bg-clr2);
  border-radius: 20px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.header-menu-list .menu > button [class^=line] {
  width: 25px;
  height: 3px;
  position: absolute;
  top: 25%;
  left: 50%;
  display: block;
  background: var(--tit-clr);
  border-radius: 20px;
  transform: translateX(-50%);
}
.header-menu-list .menu > button .line02 {
  top: 50%;
}
.header-menu-list .menu > button .line03 {
  top: 75%;
  left: calc(50% + 5px);
  width: 15px;
}
.header-menu-list .menu > button:hover .line01 {
  animation: menuLine 0.8s cubic-bezier(0.22, 1, 0.86, 1.18) infinite alternate-reverse;
}
.header-menu-list .menu > button:hover .line02 {
  animation: menuLine 0.8s cubic-bezier(0.21, 1.6, 0.73, 0.64) infinite alternate-reverse;
}
.header-menu-list .menu > button:hover .line03 {
  animation: menuLine 0.8s cubic-bezier(0.17, 0.76, 0.92, 1.19) infinite alternate-reverse;
}

@keyframes menuLine {
  0% {
    transform: translateX(-180%);
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  80% {
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
  }
}
/*----------------------------------------*\
  || Responsive
\*----------------------------------------*/
@media (max-width: 1200px) {
  .header-top {
    width: 100%;
    padding: 10px 15px;
  }
  .header-bottom {
    width: 100%;
    padding: 0 15px;
  }
  .header-left .header-list,
  .header-right .type-list {
    display: none;
  }
}
@media (max-width: 768px) {
  .header-new {
    display: flex;
    align-items: normal;
    justify-content: space-between;
    width: 100%;
    padding: 10px 20px;
  }
  .header-new::before {
    display: none;
  }
  .header-top {
    display: none;
  }
  .header-bottom {
    height: auto;
    padding: 0;
  }
  .header-menu-list .menu > button {
    width: 32px;
    height: 32px;
  }
  .header-menu-list .search {
    display: none;
  }
}
.footer-new {
  position: relative;
  background-color: var(--bg-clr2);
  border-top: 1px solid var(--line-clr3);
  z-index: 1;
}

.footer-box {
  width: 1200px;
  margin: auto;
  padding: 40px 0;
}

.footer-menu-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.footer-menu-list .footer-menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
.footer-menu-list .footer-menu-item::after {
  width: 1px;
  height: 14px;
  content: "";
  display: inline-block;
  background: var(--line-clr3);
  vertical-align: middle;
}
.footer-menu-list .footer-menu-item:last-child::after {
  display: none;
}
.footer-menu-list .footer-menu-item a {
  display: inline-block;
  font-size: 14px;
  line-height: 16px;
  color: var(--body-clr);
}
.footer-menu-list .footer-menu-item a.point {
  font-weight: 700;
}

.footer-top {
  display: flex;
  align-items: normal;
  justify-content: space-between;
  gap: 50px;
}

.footer-select-box {
  position: relative;
  margin-left: auto;
  z-index: 1;
}
.footer-select-box .footer-select-btn {
  width: 260px;
  height: 40px;
  position: relative;
  padding: 0 20px;
  background: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  border-radius: 100px;
  font-size: 14px;
  text-align: left;
  z-index: 1;
}
.footer-select-box .footer-select-btn::after {
  width: 7px;
  height: 11px;
  background: url("/img/common/arrow_icon_black.png") no-repeat center center;
  background-size: contain;
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  display: block;
  transform: translateY(-50%) rotate(-90deg);
  transition: all 0.5s ease;
}
.footer-select-box .footer-select-btn:hover {
  filter: brightness(0.97);
}
.footer-select-box .footer-select-btn.on {
  background: var(--bg-clr2);
  border-color: var(--main-clr);
  border-top-color: transparent;
  border-radius: 0 0 24px 24px;
  color: var(--cap-clr);
  text-decoration: none;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  filter: none;
}
.footer-select-box .footer-select-btn.on::after {
  transform: translateY(-50%) rotate(-90deg) scaleX(-1);
}

.footer-select-list-new {
  position: absolute;
  bottom: 100%;
  width: 100%;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  padding: 20px 6px 0 16px;
  background: var(--bg-clr2);
  border: 1px solid var(--main-clr);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}
.footer-select-list-new::before {
  width: calc(100% - 32px);
  height: 1px;
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  background: #d9d9d9;
}
.footer-select-btn.on + .footer-select-list-new {
  max-height: 350px;
  opacity: 1;
  visibility: visible;
}

.footer-select-list-new-in {
  max-height: 330px;
  overflow: auto;
}
.footer-select-list-new-in .footer-select-item-new .footer-select-name {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: var(--tit-clr);
}
.footer-select-list-new-in .footer-select-item-new + li {
  margin-top: 14px;
}
.footer-select-list-new-in .footer-select-item-new + li .footer-select-name {
  margin-top: 28px;
}
.footer-select-list-new-in .footer-select-item-new:last-child {
  padding-bottom: 20px;
}
.footer-select-list-new-in .footer-select-item-new a {
  font-size: 14px;
  line-height: 16px;
  color: var(--cap-clr);
  outline-offset: -1px;
}
.footer-select-list-new-in::-webkit-scrollbar {
  width: 5px;
}
.footer-select-list-new-in::-webkit-scrollbar-thumb {
  background: var(--main-clr);
}
.footer-select-list-new-in::-webkit-scrollbar-track {
  background: transparent;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}
.footer-bottom .footer-address {
  font-size: 13px;
  line-height: 21px;
  color: var(--cap-clr);
}
.footer-bottom .footer-address span {
  color: inherit;
}
.footer-bottom .footer-address span + span {
  margin-left: 20px;
}
.footer-bottom .footer-copyright {
  font-size: 13px;
  line-height: 21px;
  color: var(--cap-clr);
}
.footer-bottom .footer-logo-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
}

/*----------------------------------------*\
  || Responsive
\*----------------------------------------*/
@media (max-width: 1200px) {
  .footer-box {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 768px) {
  .footer-box {
    padding: 30px 20px 40px;
  }
  .footer-menu-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 3fr));
    gap: 20px 10px;
  }
  .footer-menu-list .footer-menu-item::after {
    display: none;
  }
  .footer-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 30px;
  }
  .footer-select-box {
    width: 100%;
  }
  .footer-select-box .footer-select-btn {
    width: 100%;
  }
  .footer-bottom {
    display: block;
    margin-top: 30px;
  }
  .footer-bottom .footer-address {
    font-size: 12px;
    line-height: 1;
  }
  .footer-bottom .footer-address span {
    display: block;
    line-height: 18px;
  }
  .footer-bottom .footer-address span + span {
    margin: 0;
  }
  .footer-bottom .footer-copyright {
    font-size: 12px;
    line-height: 18px;
  }
  .footer-bottom .footer-logo-list {
    justify-content: flex-end;
  }
}
/*----------------------------------------*\
  || GNB
\*----------------------------------------*/
.gnb-depth01-list {
  display: flex;
  align-items: center;
}
.gnb-depth01-list .gnb-depth01-item {
  height: 72px;
}
.gnb-depth01-list .gnb-depth01-item:hover > a::after, .gnb-depth01-list .gnb-depth01-item:focus-within > a::after {
  background: #0d7a7a;
}
.gnb-depth01-list .gnb-depth01-item > a {
  position: relative;
  padding: 0 30px;
  border-bottom: 4px solid transparent;
  font-size: 18px;
  font-weight: 700;
  line-height: 72px;
  color: var(--tit-clr);
  transition: border-color 0.2s ease;
  white-space: nowrap;
}
.gnb-depth01-list .gnb-depth01-item > a::after {
  width: calc(100% - 60px);
  height: 4px;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  background: transparent;
  transition: background 0.2s ease;
}

.gnb-depth02-list {
  display: flex;
  align-items: normal;
  flex-wrap: wrap;
  gap: 50px 60px;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1200px;
  padding: 50px 0;
  transform: translateX(-50%);
  z-index: 1;
}
.gnb-depth02-list .gnb-depth02-item {
  min-width: 190px;
  font-size: 18px;
  font-weight: 700;
  color: var(--body-clr);
}

.gnb-depth03-list {
  margin-top: 30px;
}
.gnb-depth03-list .gnb-depth03-item {
  font-size: 16px;
  color: #666;
}
.gnb-depth03-list .gnb-depth03-item + li {
  margin-top: 20px;
}
.gnb-depth03-list .gnb-depth03-item > a:hover,
.gnb-depth03-list .gnb-depth03-item > a:focus {
  font-weight: 700;
  color: var(--main-clr);
}

.gnb-bg {
  width: 100%;
  height: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #f6fafa;
  border-top: 2px solid transparent;
  opacity: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

/*----------------------------------------*\
  || Search
\*----------------------------------------*/
.search-wrap {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 490px;
  background: #f6fafa;
  border-top: 2px solid #d9d9d9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 2;
  animation: searchWrap 0.5s ease;
}
.search-wrap::after {
  width: 100%;
  height: 70vh;
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  display: block;
  background: linear-gradient(180deg, rgba(27, 32, 33, 0.2), transparent);
  animation: fadeIn 0.4s ease;
}
.search-wrap .search-box {
  display: block;
  width: 1200px;
  margin: auto;
  padding: 40px 50px;
  overflow: hidden;
  animation: searchWrap 0.5s ease;
}

@keyframes searchWrap {
  0% {
    max-height: 100px;
    opacity: 0.5;
  }
  40% {
    opacity: 1;
  }
  100% {
    max-height: 490px;
  }
}
.search-inp-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  height: 60px;
  background: var(--bg-clr2);
  border: 1px solid var(--main-clr);
  border-radius: 35px;
  overflow: hidden;
  transition: all 0.1s ease;
}
.search-inp-wrap:hover, .search-inp-wrap:focus-within {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.search-inp-wrap .inp-search {
  width: 100%;
  height: 60px;
  padding: 0 35px;
  border-radius: 35px;
  font-size: 18px;
  line-height: 21px;
  color: var(--body-clr);
  outline: none;
}

.search-result-wrap {
  position: relative;
  margin-top: 30px;
  padding: 0 35px;
}
.search-result-wrap .search-result-title {
  font-size: 18px;
  line-height: 21px;
  color: var(--body-clr);
}
.search-result-wrap .search-result-title strong {
  color: var(--main-clr);
}

.search-result-list {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: 20px;
  max-height: 270px;
  margin-top: 30px;
  padding-right: 10px;
  overflow: auto;
  animation: searchResultList 0.3s ease;
}
.search-result-list .search-result-item {
  padding-bottom: 20px;
  border-bottom: 1px solid #d5e6e6;
}
.search-result-list .search-result-item a {
  font-size: 16px;
  line-height: 19px;
  color: var(--body-clr);
}
.search-result-list .search-result-item a span {
  color: var(--main-clr);
}
.search-result-list::-webkit-scrollbar {
  width: 8px;
}
.search-result-list::-webkit-scrollbar-thumb {
  background: var(--main-clr);
  border-radius: 12px;
}
.search-result-list::-webkit-scrollbar-track {
  background: #f6fafa;
  border-radius: 12px;
}

@keyframes searchResultList {
  0% {
    max-height: 0;
  }
  100% {
    max-height: 270px;
  }
}
.search-result-msg {
  position: relative;
  max-height: 0;
  padding: 0;
  opacity: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--body-clr);
  text-align: center;
  animation: searchResultMsg 0.3s ease forwards;
  animation-delay: 0.6s;
}
.search-result-msg::before {
  width: 80px;
  height: 80px;
  background: url("/img/content/main/icon_alert.png") no-repeat center center;
  background-size: contain;
  content: "";
  display: block;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  animation: searchResultMsg2 0.5s ease;
}

@keyframes searchResultMsg {
  0% {
    top: -10px;
    max-height: 0px;
    padding: 0;
    opacity: 0;
  }
  100% {
    top: 0;
    max-height: 270px;
    padding: 180px 0 90px;
    opacity: 1;
  }
}
@keyframes searchResultMsg2 {
  0% {
    top: -70px;
    opacity: 0;
  }
  100% {
    top: 70px;
    opacity: 1;
  }
}
/*----------------------------------------*\
  || Full Menu
\*----------------------------------------*/
.full-menu-wrap {
  position: fixed;
  inset: 0;
  background: #f6fafa;
  z-index: 99;
}
.full-menu-wrap .full-menu-box {
  position: relative;
  width: 1200px;
  margin: auto;
  padding: 80px 0;
}
.full-menu-wrap .full-menu-box .full-menu-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--tit-clr);
}

.full-menu-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}
.full-menu-list .full-menu-btn {
  min-width: 120px;
  height: 44px;
  padding: 0 40px;
  background: var(--bg-clr2);
  border: 1px solid #d9d9d9;
  border-radius: 30px;
  font-size: 20px;
  color: var(--tit-clr);
  transition: box-shadow 0.2s ease;
}
.full-menu-list .full-menu-btn.on, .full-menu-list .full-menu-btn:hover {
  background: linear-gradient(90deg, #33c7c4, var(--main-clr));
  border-color: transparent;
  font-weight: 700;
  color: var(--bg-clr2);
}
.full-menu-list .full-menu-btn:hover {
  background: #00938d;
}

.full-menu-depth01-list {
  max-height: calc(100vh - 340px);
  margin-top: 60px;
  overflow: auto;
}
.full-menu-depth01-list::-webkit-scrollbar {
  width: 8px;
}
.full-menu-depth01-list::-webkit-scrollbar-thumb {
  background: var(--main-clr);
  border-radius: 12px;
}
.full-menu-depth01-list::-webkit-scrollbar-track {
  background: #f6fafa;
  border-radius: 12px;
}
.full-menu-depth01-list .full-menu-depth01-item + li {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #d9d9d9;
}
.full-menu-depth01-list .full-menu-depth01-item > a,
.full-menu-depth01-list .full-menu-depth01-item > span {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--main-clr);
}
.full-menu-depth01-list .full-menu-depth01-item a {
  display: inline;
  outline-offset: -1px;
}

.full-menu-depth02-list {
  display: flex;
  align-items: normal;
  flex-wrap: wrap;
  gap: 50px;
  margin-top: 40px;
}
.full-menu-depth02-list .full-menu-depth02-item {
  width: 190px;
}
.full-menu-depth02-list .full-menu-depth02-item > a,
.full-menu-depth02-list .full-menu-depth02-item > span {
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  color: var(--body-clr);
}

.full-menu-depth03-list {
  margin-top: 30px;
}
.full-menu-depth03-list .full-menu-depth03-item + li {
  margin-top: 20px;
}
.full-menu-depth03-list .full-menu-depth03-item > a {
  font-size: 16px;
  line-height: 14px;
  color: #666;
}

.full-menu-close-btn {
  width: 36px;
  height: 36px;
  background: url("/img/content/main/icon_delete02.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 80px;
  right: 0;
}

/*----------------------------------------*\
  || Full Menu Mobile
\*----------------------------------------*/
.full-menu-mob-box {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--bg-clr2);
  animation: fullMenuMob 0.5s ease;
}
.full-menu-mob-box .full-menu-head {
  height: 56px;
  padding: 16px 0;
}
.full-menu-mob-box .full-menu-head .home {
  width: 24px;
  height: 24px;
  background: url("/img/content/main/icon_home.png") no-repeat center center;
  background-size: contain;
  margin-left: auto;
  margin-right: 60px;
}

@keyframes fullMenuMob {
  0% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}
.full-menu-login-box {
  display: flex;
  align-items: center;
  padding: 0 16px 14px;
}
.full-menu-login-box .full-menu-user-box {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.full-menu-login-box img {
  width: 50px;
  border: 1px solid rgba(0, 0, 0, 0.0784313725);
  border-radius: 50%;
  filter: grayscale(1);
}
.full-menu-login-box img.on {
  filter: none;
}
.full-menu-login-box .text-box {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: 10px;
}
.full-menu-login-box .text-box .title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--tit-clr);
}
.full-menu-login-box .text-box .time {
  font-size: 12px;
  line-height: 14px;
  color: #666;
}
.full-menu-login-box .btn-mini {
  margin-top: auto;
  margin-left: auto;
}

.full-menu-search-wrap {
  position: relative;
  padding: 8px 16px 18px;
}
.full-menu-search-wrap .full-menu-search-inp-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  background: #f5f7f8;
  border: 1px solid #f5f7f8;
  border-radius: 24px;
  transition: all 0.1s ease;
}
.full-menu-search-wrap .full-menu-search-inp-wrap:hover, .full-menu-search-wrap .full-menu-search-inp-wrap:focus-within {
  background: var(--bg-clr2);
  border-color: var(--main-clr);
}
.full-menu-search-wrap .full-menu-search-inp-wrap .inp-search.mob {
  width: 100%;
  height: auto;
  padding-left: 17px;
  font-size: 16px;
  line-height: 40px;
  border-radius: 24px;
  outline: none;
}
.full-menu-search-wrap .full-menu-search-inp-wrap .search-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-right: 10px;
}
.full-menu-search-wrap .full-menu-search-inp-wrap .clearbtn {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.full-menu-search-result-wrap {
  position: fixed;
  inset: 0;
  top: 180px;
  padding: 30px;
  background: #f6fafa;
  overflow: hidden;
  animation: searchResultWrap 0.3s ease;
  z-index: 2;
}
.full-menu-search-result-wrap::before {
  width: 100%;
  height: 2px;
  content: "";
  position: fixed;
  top: 180px;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #33c7c4, var(--main-clr));
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.full-menu-search-result-wrap .search-result-list {
  max-height: 100%;
  margin: 0;
  animation: none;
}
.full-menu-search-result-wrap .search-result-list .search-result-item {
  padding: 9px 0;
  border: 0;
}
.full-menu-search-result-wrap .search-result-list .search-result-item a {
  color: #666;
}

@keyframes searchResultWrap {
  0% {
    bottom: 100vh;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}
.full-menu-link-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  padding: 0 18px 18px;
}
.full-menu-link-list::after {
  width: 100%;
  height: 2px;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, #33c7c4, var(--main-clr));
}
.full-menu-link-list .full-menu-link-item a {
  background: url("/img/content/main/icon_menu_A01_m.png") no-repeat left center;
  background-size: contain;
  min-height: 24px;
  padding-left: 35px;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  color: var(--tit-clr);
}
.full-menu-link-list .full-menu-link-item a.security {
  background-image: url("/img/content/main/icon_menu_A02_m.png");
}
.full-menu-link-list .full-menu-link-item a.notice {
  background-image: url("/img/content/main/icon_menu_A03_m.png");
}

.full-menu-mob-list-wrap {
  position: absolute;
  inset: 0;
  top: 228px;
}

.full-menu-mob-depth01-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: 150px;
  height: 100%;
  padding: 20px 15px;
  background: var(--bg-clr2);
  border-right: 1px solid #f1f3f8;
}
.full-menu-mob-depth01-list .full-menu-mob-depth01-item > button {
  width: max-content;
  min-width: 56px;
  min-height: 39px;
  padding: 10px 14px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: var(--tit-clr);
  word-break: auto-phrase;
}
.full-menu-mob-depth01-list .full-menu-mob-depth01-item > button.on {
  background: var(--main-clr);
  color: var(--bg-clr2);
}

.full-menu-mob-depth02-list {
  position: absolute;
  inset: 0;
  left: 150px;
  background: #fcfdfd;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
  z-index: -1;
}
.full-menu-mob-depth02-list::-webkit-scrollbar {
  width: 5px;
}
.full-menu-mob-depth02-list::-webkit-scrollbar-thumb {
  background: var(--main-clr);
}
.full-menu-mob-depth02-list::-webkit-scrollbar-track {
  background: #f5f7f8;
}
.full-menu-mob-depth01-item > button.on + .full-menu-mob-depth02-list {
  opacity: 1;
  visibility: visible;
  transition: none;
  z-index: 1;
}

.full-menu-mob-depth02-list .full-menu-mob-depth02-item > a,
.full-menu-mob-depth02-list .full-menu-mob-depth02-item > button {
  display: flex;
  align-items: center;
  position: relative;
  width: calc(100% - 5px);
  min-height: 65px;
  padding: 15px 45px 15px 24px;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  color: #666;
  transition: all 0.3s ease;
}
.full-menu-mob-depth02-list .full-menu-mob-depth02-item > a::after,
.full-menu-mob-depth02-list .full-menu-mob-depth02-item > button::after {
  width: 20px;
  height: 20px;
  background: url("/img/common/icon_list.png") no-repeat center center;
  background-size: 8px;
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  display: block;
  transform: translateY(-50%) rotate(90deg);
  transition: all 0.3s ease;
}
.full-menu-mob-depth02-list .full-menu-mob-depth02-item > button {
  padding-right: 45px;
}
.full-menu-mob-depth02-list .full-menu-mob-depth02-item > button.on {
  color: var(--main-clr);
}
.full-menu-mob-depth02-list .full-menu-mob-depth02-item > button.on::after {
  transform: translateY(-50%) rotate(90deg) scaleX(-1);
  filter: invert(45%) sepia(79%) saturate(3392%) hue-rotate(150deg) brightness(94%) contrast(103%);
}
.full-menu-mob-depth02-list .full-menu-mob-depth02-item > a::after {
  transform: translateY(-50%);
}

.full-menu-mob-depth03-list {
  max-height: 0;
  padding: 0 30px;
  background: #f5f7f8;
  border: 0 solid transparent;
  overflow: hidden;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.full-menu-mob-depth02-item > button.on + .full-menu-mob-depth03-list {
  max-height: max-content;
  padding: 25px 30px;
  border-top: 1px solid #f1f3f8;
  border-bottom: 1px solid #f1f3f8;
  visibility: visible;
}

.full-menu-mob-depth03-list .full-menu-mob-depth03-item + li {
  margin-top: 20px;
}
.full-menu-mob-depth03-list .full-menu-mob-depth03-item a {
  font-size: 14px;
  line-height: 19px;
  color: var(--cap-clr);
  word-break: auto-phrase;
}

.full-menu-close-btn.mob {
  width: 24px;
  height: 24px;
  background: url("/img/content/main/icon_close.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 16px;
  right: 16px;
}

/*----------------------------------------*\
  || Responsive
\*----------------------------------------*/
@media (max-width: 1200px) {
  .gnb-depth02-list,
  .search-box,
  .full-menu-box {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .full-menu-wrap .full-menu-box {
    width: 100%;
    height: 100%;
    padding: 40px;
  }
  .full-menu-depth01-list {
    max-height: calc(100vh - 280px);
  }
  .full-menu-close-btn {
    top: 40px;
    right: 15px;
  }
}
@media (max-width: 768px) {
  .gnb-new {
    display: none;
  }
  .full-menu-wrap {
    background: transparent;
  }
}
/*----------------------------------------*\
  || Type B
\*----------------------------------------*/
@media (max-width: 768px) {
  .type-B .full-menu-mob-box {
    overflow: auto;
  }
  .type-B .full-menu-mob-box::-webkit-scrollbar {
    display: none;
  }
  .type-B .full-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    position: sticky;
    top: 0;
    height: auto;
    min-height: 44px;
    padding: 10px 58px 19px 20px;
    background: var(--bg-clr2);
    z-index: 1;
  }
  .type-B .full-menu-head .home {
    width: 32px;
    height: 32px;
    background: url("/img/content/main/icon_home_B.png") no-repeat center center;
    background-size: contain;
    margin: 0 0 auto;
  }
  .type-B .full-menu-login-box {
    height: min-content;
    margin-top: 4px;
    padding: 0;
  }
  .type-B .full-menu-login-box .link {
    display: flex;
    align-items: center;
    margin-top: -4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    color: #666;
  }
  .type-B .full-menu-login-box .link::after {
    width: 12px;
    height: 7px;
    background: url("/img/content/main/icon_up.png") no-repeat center center;
    background-size: contain;
    content: "";
    transform: rotate(90deg);
    filter: invert(1) brightness(0) opacity(0.7);
  }
  .type-B .full-menu-login-box .wrap {
    display: flex;
    align-items: normal;
    justify-content: flex-end;
    flex-direction: column;
    gap: 7px;
  }
  .type-B .full-menu-login-box .title-box {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .type-B .full-menu-login-box .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    color: var(--tit-clr);
  }
  .type-B .full-menu-login-box .time {
    font-size: 12px;
    line-height: 14px;
    color: #666;
  }
  .type-B .full-menu-login-box button {
    min-height: 29px;
    padding: 6px 10px;
    background-color: var(--bg-clr1);
    border-radius: 50px;
    font-size: 14px;
    line-height: 16px;
    color: var(--tit-clr);
  }
  .type-B .full-menu-search-wrap {
    padding: 10px 20px;
  }
  .type-B .full-menu-search-wrap .full-menu-search-inp-wrap {
    height: 51px;
    background: var(--bg-clr1);
    border: 0;
    border-radius: 100px;
  }
  .type-B .full-menu-search-wrap .full-menu-search-inp-wrap .inp-search.mob {
    padding-left: 24px;
    border-radius: 100px;
    color: var(--cap-clr);
  }
  .type-B .full-menu-search-wrap .full-menu-search-result-wrap {
    top: 140px;
    background: var(--bg-clr2);
  }
  .type-B .full-menu-search-wrap .full-menu-search-result-wrap::before {
    display: none;
  }
  .type-B .full-menu-link-list {
    justify-content: space-between;
    padding: 10px 24px 30px;
  }
  .type-B .full-menu-link-list::after {
    display: none;
  }
  .type-B .full-menu-link-list .full-menu-link-item.line {
    width: 1px;
    height: 12px;
    background: var(--line-clr3);
  }
  .type-B .full-menu-link-list .full-menu-link-item a {
    background: url("/img/content/main/icon_menu_B01_m.png") no-repeat left center;
    background-size: 24px;
    padding-left: 28px;
    font-weight: 400;
    color: var(--tit-clr);
  }
  .type-B .full-menu-link-list .full-menu-link-item a.security {
    background-image: url("/img/content/main/icon_menu_B02_m.png");
  }
  .type-B .full-menu-link-list .full-menu-link-item a.notice {
    background-image: url("/img/content/main/icon_menu_B03_m.png");
  }
  .type-B .full-menu-mob-list-wrap {
    position: static;
  }
  .type-B .full-menu-mob-list-menu-box {
    position: sticky;
    top: 83px;
    z-index: 1;
  }
  .type-B .full-menu-open-btn {
    width: 36px;
    height: 36px;
    background: url("/img/content/main/icon_down_w.png") no-repeat center center;
    background-size: auto;
    position: absolute;
    top: 18px;
    right: 20px;
    background-color: var(--body-clr);
    border-radius: 50%;
    z-index: 2;
    transition: all 0.4s ease;
  }
  .type-B .full-menu-mob-depth01-list.on + .full-menu-open-btn {
    opacity: 0.8;
    transform: scaleY(-1);
  }
  .type-B .full-menu-mob-depth01-list {
    width: auto;
    height: 71px;
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 8px 4px;
    padding: 16px 60px 16px 20px;
    background-color: var(--bg-clr1);
    border: 0;
    overflow-x: auto;
    transition: height 0.4s ease;
    z-index: 1;
  }
  .type-B .full-menu-mob-depth01-list.on {
    flex-wrap: wrap;
    height: auto;
    padding: 16px 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  }
  .type-B .full-menu-mob-depth01-list::-webkit-scrollbar {
    display: none;
  }
  .type-B .full-menu-mob-depth01-list .full-menu-mob-depth01-item > button {
    padding: 10px 15px;
    background-color: var(--bg-clr2);
    border-radius: 100px;
    font-weight: 400;
    color: #666;
    word-break: keep-all;
  }
  .type-B .full-menu-mob-depth01-list .full-menu-mob-depth01-item > button.on {
    background-color: var(--main-clr);
    font-weight: 700;
    color: var(--bg-clr2);
  }
  .type-B .full-menu-mob-list-box {
    display: flex;
    align-items: normal;
    flex-direction: column;
    padding: 28px 20px;
    background: var(--bg-clr2);
    overflow: auto;
  }
  .type-B .full-menu-mob-depth01-title {
    margin-bottom: 20px;
  }
  .type-B .full-menu-mob-depth01-title span {
    font-size: 24px;
    line-height: 28px;
    color: var(--cap-clr);
  }
  .type-B .full-menu-mob-depth02-list + .full-menu-mob-depth01-title {
    margin-top: 40px;
  }
  .type-B .full-menu-mob-depth02-list {
    position: static;
    padding-bottom: 40px;
    background: none;
    border-bottom: 1px solid #eee;
    opacity: 1;
    z-index: 0;
    visibility: visible;
    overflow: visible;
  }
  .type-B .full-menu-mob-depth02-list:last-child {
    border: 0;
  }
  .type-B .full-menu-mob-depth02-list .full-menu-mob-depth02-item + li {
    margin-top: 40px;
  }
  .type-B .full-menu-mob-depth02-list .full-menu-mob-depth02-item > strong {
    font-size: 15px;
    line-height: 18px;
    color: var(--tit-clr);
  }
  .type-B .full-menu-mob-depth02-list .full-menu-mob-depth02-item > strong a {
    background: url("/img/common/icon_list.png") no-repeat right center;
    background-size: 7px;
  }
  .type-B .full-menu-mob-depth02-list .full-menu-mob-depth02-item > a {
    background: url("/img/common/icon_list.png") no-repeat right center;
    background-size: 7px;
    width: auto;
    min-height: auto;
    padding: 0;
    font-size: 18px;
    line-height: 21px;
    color: #666;
    outline-offset: -1px;
  }
  .type-B .full-menu-mob-depth02-list .full-menu-mob-depth02-item > a::after {
    display: none;
  }
  .type-B .full-menu-mob-depth02-list .full-menu-mob-depth02-item > a:hover {
    /* #666 기준 */
    filter: invert(46%) sepia(70%) saturate(4498%) hue-rotate(151deg) brightness(95%) contrast(97%);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .type-B .full-menu-mob-depth02-list .full-menu-mob-depth03-list {
    max-height: max-content;
    margin-top: 16px;
    padding: 0;
    background: none;
    border: 0;
    visibility: visible;
  }
  .type-B .full-menu-mob-depth02-list .full-menu-mob-depth03-list a {
    background: url("/img/common/icon_list.png") no-repeat right center;
    background-size: 7px;
    font-size: 18px;
    line-height: 21px;
    color: #666;
    outline-offset: -1px;
  }
  .type-B .full-menu-mob-depth02-list .full-menu-mob-depth03-list a:hover {
    /* #666 기준 */
    filter: invert(46%) sepia(70%) saturate(4498%) hue-rotate(151deg) brightness(95%) contrast(97%);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .type-B .full-menu-close-btn.mob {
    width: 32px;
    height: 32px;
    background: url("/img/content/main/icon_close_B.png") no-repeat center center;
    background-size: contain;
    position: fixed;
    top: 10px;
    z-index: 1;
    animation: fullMenuMobBtn 0.5s ease;
  }
}
@keyframes fullMenuMobBtn {
  0% {
    right: -100%;
    opacity: 0;
  }
  100% {
    right: 16px;
    opacity: 1;
  }
}
.breadcrumb-wrap {
  position: relative;
  background: var(--bg-clr2);
}
.breadcrumb-wrap::after {
  width: 100%;
  height: 2px;
  content: "";
  display: block;
  background: linear-gradient(90deg, var(--main-clr), #33c7c4);
}

.breadcrumb-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
  min-height: 56px;
  margin: auto;
  padding: 0;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
}
.breadcrumb-list .breadcrumb-item {
  position: relative;
}
.breadcrumb-list .breadcrumb-item + li::before {
  width: 1px;
  height: 14px;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  background: #e9e9ec;
  transform: translateY(-50%);
}
.breadcrumb-list .breadcrumb-item .home {
  width: 20px;
  height: 20px;
  background: url("/img/content/main/icon_home_gray.png") no-repeat center center;
  background-size: contain;
  margin-right: 20px;
  transition: all 0.2s ease;
}
.breadcrumb-list .breadcrumb-item .home:hover, .breadcrumb-list .breadcrumb-item .home:focus {
  filter: brightness(0.8);
}

.breadcrumb-select {
  position: relative;
  width: fit-content;
  min-width: 165px;
  padding: 0 45px 0 20px;
  font-size: 14px;
  line-height: 53px;
  color: var(--tit-clr);
  text-align: left;
}
.breadcrumb-select::after {
  width: 18px;
  height: 18px;
  background: url("/img/content/main/icon_down_w.png") no-repeat center center;
  background-size: 6px;
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  display: block;
  background-color: #7e95b5;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
.breadcrumb-select.on {
  font-weight: 700;
}
.breadcrumb-select.on::after {
  background-color: #8993a2;
  transform: translateY(-50%) scaleY(-1);
}

.breadcrumb-select-list {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: 20px;
  display: none;
  position: absolute;
  top: calc(100% - 10px);
  width: 100%;
  min-width: 165px;
  max-height: 297px;
  padding: 14px;
  background: var(--bg-clr2);
  border: 1px solid var(--main-clr);
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  overflow: auto;
}
.breadcrumb-select-list::-webkit-scrollbar {
  display: none;
}
.breadcrumb-select.on + .breadcrumb-select-list {
  display: flex;
}

.breadcrumb-select-list .breadcrumb-select-item a {
  font-size: 14px;
  line-height: 18px;
  color: var(--tit-clr);
}

.breadcrumb-right {
  display: flex;
  align-items: center;
}
.breadcrumb-right .breadcrumb-zoom-title {
  margin-right: 13px;
  font-size: 14px;
  line-height: 16px;
  color: var(--tit-clr);
}
.breadcrumb-right .breadcrumb-zoom-button {
  width: 22px;
  height: 22px;
  background: url("/img/content/main/icon_plus_w.png") no-repeat center left 9px;
  background-size: 8px;
  background-color: #7e95b5;
  border-radius: 11px 0 0 11px;
}
.breadcrumb-right .breadcrumb-zoom-button + button {
  background: url("/img/content/main/icon_minus_w.png") no-repeat center right 9px;
  background-size: 8px;
  margin-left: 1px;
  background-color: #7e95b5;
  border-radius: 0 11px 11px 0;
}

/*----------------------------------------*\
  || Responsive
\*----------------------------------------*/
@media (max-width: 1200px) {
  .breadcrumb-box {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 768px) {
  .breadcrumb-wrap {
    display: none;
  }
}
/*----------------------------------------*\
  || Info Acco Group
\*----------------------------------------*/
.info-acco-group {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: 12px;
}
.info-acco-group .info-acco-group-item {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--bg-clr2);
  border: 1px solid #d2d4d4;
  border-radius: 20px;
}
.info-acco-group .info-acco-group-item:has(.btn[aria-expanded=true]) {
  border: 2px solid var(--main-clr);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.info-acco-group .info-acco-group-item:has(.btn[aria-expanded=true]) .info-acco-list,
.info-acco-group .info-acco-group-item:has(.btn[aria-expanded=true]) .info-acco-box {
  display: block;
}
.info-acco-group .info-acco-group-item:has(.btn[aria-expanded=true]) .info-acco-list {
  padding: 29px;
}

.info-acco-head {
  width: 100%;
}
.info-acco-head .btn,
.info-acco-head .link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 30px;
  background: #f2f4f6;
  border-radius: 20px;
  transition: border-radius 0.3s ease;
}
.info-acco-head .btn:hover,
.info-acco-head .link:hover {
  filter: brightness(0.98);
}
.info-acco-head .btn[aria-expanded=true],
.info-acco-head .link[aria-expanded=true] {
  padding: 14px 29px;
  border-radius: 20px 20px 0 0;
  transition: none;
}
.info-acco-head .btn *,
.info-acco-head .link * {
  font-size: 18px;
  line-height: 21px;
  color: var(--tit-clr);
}
.info-acco-head .arrow-link {
  font-weight: 500;
}

.arrow-span {
  display: flex;
  align-items: center;
}
.arrow-span::after {
  width: 30px;
  height: 30px;
  background: url("/img/content/main/icon_down.png") no-repeat center center;
  background-size: 8px;
  content: "";
  display: inline-block;
  margin-left: 30px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--disable-clr);
  border-radius: 50%;
  box-sizing: border-box;
}

[aria-expanded=true] .arrow-span::after {
  background: url("/img/content/main/icon_up_w.png") no-repeat center center;
  background-size: 8px;
  background-color: var(--main-clr);
  border-color: var(--main-clr);
}

@media (max-width: 768px) {
  .info-acco-group .info-acco-group-item {
    border-radius: 14px;
  }
  .info-acco-group .info-acco-group-item:has(.btn[aria-expanded=true]) .info-acco-list {
    padding: 19px 14px;
  }
  .info-acco-head .btn,
  .info-acco-head .link {
    padding: 10px 15px;
    border-radius: 14px;
  }
  .info-acco-head .btn[aria-expanded=true],
  .info-acco-head .link[aria-expanded=true] {
    padding: 9px 14px;
    border-radius: 14px 14px 0 0;
  }
  .info-acco-head .btn *,
  .info-acco-head .link * {
    font-size: 16px;
  }
  .arrow-span::after {
    width: 25px;
    height: 25px;
    margin-left: 10px;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || 알아두세요
\*----------------------------------------*/
.slide-box-area.type03 .ui-accordion-list {
  border-top: 0;
}
.slide-box-area.type03 .ui-accordion-head {
  background: var(--bg-clr2);
  border-top: 0;
  border-bottom-color: #000;
}
.slide-box-area.type03 .ui-accordion-opener {
  border: 0;
}
.slide-box-area.type03 .ui-accordion-item.js-accordion-opened .ui-accordion-opener {
  background: var(--bg-clr2);
  border-left: 0;
}
.slide-box-area.type03 .ui-accordion-item.js-accordion-opened .ui-accordion-opener:before {
  border: 2px solid #000;
  border-left: 0;
  border-top: 0;
}
.slide-box-area.type03 .ui-accordion-item.js-accordion-opened .ui-accordion-text {
  color: var(--body-clr);
}
.slide-box-area.type03 .ui-accordion-list.js-ui-accordion-wrap .ui-accordion-text {
  padding-left: 0;
  color: var(--body-clr);
}
.slide-box-area.type03 .ui-accordion-layer {
  border-bottom: 0;
}
.slide-box-area.type03 .slide-box-txt {
  height: auto;
  max-height: none;
  padding: 0 15px;
  overflow-y: initial;
}
.slide-box-area.type03 .slide-box-txt .payinfo-list {
  border: 0;
}

/*----------------------------------------*\
  || UI Accordion
\*----------------------------------------*/
.ui-accordion-list > li:first-child {
  border-top: 1px solid #efefef;
}
.ui-accordion-list + .ui-accordion-list {
  border-top-color: #efefef;
  margin-top: 20px;
}
.ui-accordion-list.js-ui-accordion-wrap .ui-accordion-text {
  color: #868686;
}
.ui-accordion-list.js-ui-accordion-wrap .ui-accordion-head-sub-agree .ui-accordion-text {
  color: var(--body-clr) !important;
}

.ui-accordion-text-small {
  display: inline-block;
  margin-top: 6px;
}

.ui-accordion-head {
  position: relative;
  padding-right: 61px;
  background: #f7f7f7;
}
.ui-accordion-head.last {
  margin-top: 50px;
}
.ui-accordion-head.type02 {
  background: var(--line-clr3);
}

.ui-accordion-text {
  display: block;
  padding: 17px 20px;
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
}

.ui-accordion-opener {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 100%;
  box-sizing: content-box;
  border-left: 1px solid var(--disable-clr);
  overflow: hidden;
}
.ui-accordion-opener::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid #000;
  border-width: 0 2px 2px 0;
  margin: -7px 0 0 -5px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ui-accordion-item.js-accordion-opened .ui-accordion-text {
  color: var(--body-clr);
}
.ui-accordion-item.js-accordion-opened .ui-accordion-opener {
  background: var(--cap-clr);
}
.ui-accordion-item.js-accordion-opened .ui-accordion-opener::before {
  border-color: var(--bg-clr2);
  margin-top: -2px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.ui-accordion-head-right {
  position: absolute;
  top: 0;
  right: 61px;
}
.ui-accordion-head-right .radio-box.radio-agree-wrap {
  padding: 20px 15px;
}
.ui-accordion-head-right .radio-box.radio-agree-wrap .label-wrap:first-child::before, .ui-accordion-head-right .radio-box.radio-agree-wrap .label-wrap:first-child::after {
  display: none;
}
.ui-accordion-head-right .radio-box.radio-agree-wrap .chk-label {
  color: #666;
  font-weight: 700;
}
.ui-accordion-head-right:last-child {
  right: 0;
}

.ui-accordion-layer {
  position: relative;
  border-bottom: 1px solid var(--disable-clr2);
}
.ui-accordion-layer.js-ui-accordion-layer {
  display: none;
  height: 0;
}
.ui-accordion-layer .component-layer-close-button {
  display: block;
  position: absolute;
  bottom: 100%;
  margin-bottom: 1px;
  right: 0;
  width: 60px;
  height: 60px;
}
.ui-accordion-layer .slide-box-txt {
  border: 0;
}

.ui-accordion-head-sub-agree {
  background: none;
}
.ui-accordion-head-sub-agree .ui-accordion-text {
  font-size: 16px;
  line-height: 20px;
  color: var(--body-clr);
  padding-top: 20px;
  padding-bottom: 20px;
}

.ui-accordion-head-right-checkebox {
  padding-bottom: 42px;
}
.ui-accordion-head-right-checkebox .table {
  clear: both;
  border: 0;
}

/*----------------------------------------*\
  || Small Accordion
\*----------------------------------------*/
.small-accordion-list {
  border: 1px solid var(--disable-clr);
  margin-bottom: 20px;
}

.small-accordion-item + .small-accordion-item {
  border-top: 1px solid var(--disable-clr);
}
.small-accordion-item.js-accordion-opened .small-accordion-opener::before {
  margin-top: -3px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.small-accordion-head {
  position: relative;
  padding-right: 50px;
}

.small-accordion-text {
  display: block;
  padding: 15px 20px;
  font-size: 14px;
  line-height: 20px;
  color: #666;
  font-weight: 700;
  text-align: left;
}

.small-accordion-opener {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 54px;
  height: 100%;
}
.small-accordion-opener::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid #666;
  border-width: 0 2px 2px 0;
  margin: -8px 0 0 -6px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.small-accordion-layer {
  position: relative;
  border-top: 1px solid var(--disable-clr);
}
.small-accordion-layer.js-ui-accordion-layer {
  display: none;
  height: 0;
}
.small-accordion-layer .component-layer-close-button {
  display: block;
  position: absolute;
  bottom: 100%;
  margin-bottom: 1px;
  right: 0;
  width: 54px;
  height: 50px;
}
.small-accordion-layer .phone-slide-txt {
  display: block;
  border: 0;
}
.small-accordion-layer .accordion-slide-txt {
  display: block;
  max-width: 100%;
  height: 100px;
  padding: 20px;
  overflow-y: auto;
  border: 0;
}
.small-accordion-layer .accordion-slide-txt p {
  font-size: 14px;
  line-height: 1.5;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .ui-accordion-list + html.responsive .ui-accordion-list {
    margin-top: 10px;
  }
  html.responsive .ui-accordion-head {
    padding-right: 51px;
    display: flex;
    justify-content: space-between;
  }
  html.responsive .ui-accordion-head.ui-accordion-head-sub-agree {
    padding-right: 0;
  }
  html.responsive .ui-accordion-text {
    padding: 15px 15px;
    font-size: 12px;
    line-height: 20px;
  }
  html.responsive .ui-accordion-opener {
    width: 50px;
  }
  html.responsive .ui-accordion-head-right {
    position: initial;
    right: 51px;
  }
  html.responsive .ui-accordion-head-right:last-child {
    right: 0;
  }
  html.responsive .ui-accordion-head-right .table {
    margin: 20px;
  }
  html.responsive .ui-accordion-head-right .radio-agree-wrap label {
    line-height: 20px;
  }
  html.responsive .ui-accordion-layer .component-layer-close-button {
    width: 50px;
    height: 50px;
  }
  html.responsive .radio-agree-wrap.type02 {
    float: initial;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Area Gap / Area Margin
\*----------------------------------------*/
.notice-list-wrap + .search-select-area {
  margin-top: 20px;
}

.result-info-area + .info-table-area {
  margin-top: 56px;
}
.result-info-area + .document-area {
  margin-top: 40px;
}

.search-table-area,
.search-table-area02,
.info-table-area,
.info-table-area02 {
  width: 100%;
  height: auto;
  margin-top: 40px;
  margin-bottom: 0;
  background-color: var(--bg-clr2);
}

.search-table-area.first-area,
.search-table-area02.first-area,
.info-table-area.first-area,
.info-table-area02first-area {
  padding-top: 50px;
}

.search-table-area table td input,
.search-table-area table td select,
.search-table-area table td button,
.search-table-area02 table td input,
.search-table-area02 table td select,
.search-table-area02 table td button {
  float: left;
  margin-right: 10px;
}

.sub-title-area + .talent-icon-list {
  margin-top: 20px;
}

/*----------------------------------------*\
  || Result Info Area
\*----------------------------------------*/
.result-info-area {
  width: 100%;
  height: auto;
  margin-top: 50px;
  padding-top: 145px;
  text-align: center;
  background: #fff 50% 40px/auto no-repeat;
}
.result-info-area.success {
  background-image: url("/img/common/icon/icon_done.png");
}
.result-info-area.success .list-result {
  margin-top: 36px;
}
.result-info-area.noresult {
  background-image: url("/img/common/icon/icon_error.png");
  background-size: 80px;
}
.result-info-area.noresult .txt-result01 {
  color: var(--neg-clr);
}
.result-info-area.type02 {
  padding-bottom: 50px;
}
.result-info-area.type02 .txt-result01 {
  line-height: 1;
  padding-bottom: 0;
}

/*----------------------------------------*\
  || Search Select Area
\*----------------------------------------*/
.search-select-area {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: auto;
  padding: 20px 40px;
  background-color: #f7f7f7;
  border-radius: 20px;
}
.search-select-area::after {
  content: "";
  display: block;
  clear: both;
}
.search-select-area form {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.search-select-area .btn-right-area {
  min-width: 150px;
}

@media (max-width: 768px) {
  .search-select-area,
  .search-select-area form {
    flex-wrap: wrap;
    flex-direction: column;
    padding: 20px;
  }
  .search-select-area .search-select,
  .search-select-area form .search-select {
    flex-direction: column;
    width: 100%;
  }
  .search-select-area dd,
  .search-select-area .btn-right-area,
  .search-select-area form dd,
  .search-select-area form .btn-right-area {
    width: 100%;
  }
}
.search-select {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  height: 100%;
}
.search-select dd + dt {
  margin-left: 20px;
}
.search-select dt,
.search-select dt label {
  min-width: 70px;
  font-size: 16px;
  font-weight: 500;
  line-height: 40px;
}
.search-select dd {
  flex: 1;
}
.search-select dd .select-basic {
  width: 100%;
}

/*----------------------------------------*\
  || Organ Area / 조직도
\*----------------------------------------*/
.organ-area {
  position: relative;
  padding: 50px 100px 90px;
  background: #efefef;
}
.organ-area::after {
  content: "";
  display: table;
  clear: both;
}
.organ-area h4 {
  position: relative;
  width: 115px;
  height: 115px;
  background: var(--main-clr);
  margin: 0 auto 30px;
  border-radius: 100%;
  font-size: 22px;
  line-height: 115px;
  white-space: nowrap;
  color: var(--bg-clr2);
  text-align: center;
  font-weight: 500;
}
.organ-area h4 strong {
  color: var(--bg-clr2);
  font-weight: 500;
}
.organ-area h5 {
  margin-bottom: 90px;
}
.organ-area h5::before {
  height: 90px;
}
.organ-area h5 strong {
  color: var(--bg-clr2);
  font-weight: 500;
}

.organ-area h4::before,
.organ-area h5::before,
.organ-side strong::before,
.organ::before,
.organ::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1px;
  height: 30px;
  background: var(--disable-clr);
}

.organ-area h5,
.organ-side strong,
.organ-side .org,
.organ h6,
.organ li {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 180px;
  padding: 14px 15px;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: var(--bg-clr2);
  font-weight: 500;
  border-radius: 5px;
  background: #1b569a;
  margin: 0 auto;
}

.organ-side {
  position: absolute;
  top: 195px;
  right: 190px;
}
.organ-side strong {
  margin-bottom: 20px;
}
.organ-side .org {
  margin-bottom: 20px;
  padding: 13px 14px;
  border: 1px solid #1b569a;
  color: var(--body-clr);
  background-color: #e6e8ee;
}
.organ-side .org p {
  font-size: 18px;
  line-height: 22px;
  color: var(--body-clr);
}

.organ-wp {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.organ-wp::after {
  content: "";
  display: table;
  clear: both;
}

.organ {
  width: 200px;
  position: relative;
  margin-top: 30px;
}
.organ + .organ {
  margin-left: 33px;
}
.organ::before {
  top: auto;
  bottom: 100%;
}
.organ::after {
  top: -30px;
  left: -17px;
  right: -17px;
  width: auto;
  height: 1px;
  margin: 0;
}
.organ:first-child::after {
  left: 50%;
}
.organ:last-child::after {
  right: 50%;
}
.organ h6 {
  width: auto;
  padding: 13px 14px;
  border: 1px solid #1b569a;
  color: var(--body-clr);
  background-color: #e6e8ee;
}
.organ li {
  margin-top: 10px;
  width: auto;
  padding: 13px 14px;
  border: 1px solid #1b569a;
  font-size: 16px;
  letter-spacing: -1px;
  color: var(--body-clr);
  background-color: var(--bg-clr2);
}

/* 스타저축은행 조직도 */
.organ-wrap.style02.star-bank .organ-area h4::before,
.organ-wrap.style02.star-bank .organ-area h5::before,
.organ-wrap.style02.star-bank .organ-side strong::before,
.organ-wrap.style02.star-bank .organ::before,
.organ-wrap.style02.star-bank .organ::after {
  background-color: #787878;
}

@media (max-width: 1200px) {
  .organ-wrap {
    margin-top: 30px;
  }
  .organ-area {
    padding: 20px 15px 20px;
  }
  .organ-area h4 {
    width: 90px;
    height: 90px;
    margin: 0 0 115px;
    font-size: 16px;
    line-height: 90px;
  }
  .organ-area h4::before {
    height: 115px;
    right: auto;
    margin: 0;
    left: 45px;
  }
  .organ-area h5 {
    width: 90px;
  }
  .organ-area h5::before {
    height: 10px;
    right: auto;
    margin: 0;
    left: 45px;
  }
  .organ-area h5,
  .organ-side strong,
  .organ-side .org,
  .organ h6,
  .organ li {
    width: auto;
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 10px;
    padding: 10px 5px;
  }
  .organ-side {
    top: 130px;
    right: 15px;
    left: 150px;
    width: auto;
  }
  .organ-side strong::before {
    height: 10px;
  }
  .organ-side .org p {
    font-size: 14px;
    line-height: 18px;
  }
  .organ {
    width: auto;
    float: none;
    margin: 0 0 0 135px;
  }
  .organ::before {
    top: 0;
    left: -90px;
    right: auto;
    bottom: -10px;
    height: auto;
  }
  .organ + .organ {
    margin-left: 135px;
  }
  .organ h6,
  .organ li {
    line-height: 18px;
  }
  .organ:last-child::before {
    bottom: auto;
    height: 20px;
  }
  .organ::after, .organ:first-child::after, .organ:last-child::after {
    top: 20px;
    left: -90px;
    right: 100%;
  }
  .organ-wp {
    display: block;
  }
}
/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
/*----------------------------------------*\
  || Basic Frame
\*----------------------------------------*/
.basic-frame {
  position: relative;
  width: 100%;
  margin: 20px auto;
  padding: 30px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  border-radius: 10px;
}
.basic-frame:first-child {
  margin-top: 0;
}
.basic-frame.on {
  background-color: var(--bg-clr2);
  border: 2px solid var(--main-clr);
}
.basic-frame--compact {
  padding: 20px;
}
.basic-frame--shadow {
  border: 0;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
}
.basic-frame .basic-line {
  width: 100%;
  height: 1px;
  margin: 30px 0;
  background-color: var(--line-clr3);
  border: 0;
}
.basic-frame [aria-expanded=true] .arrow-span::after {
  background-image: url("/img/content/main/icon_down.png");
  background-color: var(--bg-clr2);
  border-color: var(--disable-clr);
  transform: scaleY(-1);
}

.basic-frame-inner {
  position: relative;
  width: 100%;
  padding: 20px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  border-radius: 10px;
}
.basic-frame-inner + .basic-frame-inner {
  margin-top: 20px;
}
.basic-frame-inner.no-gap {
  padding: 100px 50px 50px;
}
.basic-frame-inner.no-gap .basic-tab-list {
  position: absolute;
  inset: 0;
  bottom: initial;
}
.basic-frame-inner.no-line {
  border: none;
}
.basic-frame-inner .basic-table tbody tr:last-child {
  border: 0;
}
.basic-frame-inner .basic-table tbody tr:last-child th,
.basic-frame-inner .basic-table tbody tr:last-child td {
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .basic-frame-inner {
    padding: 15px;
    overflow: auto;
  }
}
/*----------------------------------------*\
  || Tab Frame
\*----------------------------------------*/
.tab-frame {
  position: relative;
  width: 100%;
  margin: 20px auto;
  padding: 10px 20px 0;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  border-radius: 14px;
}

/*----------------------------------------*\
  || Basic Wide Box
\*----------------------------------------*/
.basic-wide-box {
  width: 910px;
  margin: auto;
}

/*----------------------------------------*\
  || Basic Info Box
\*----------------------------------------*/
.basic-info-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  margin: auto auto 40px;
  text-align: center;
}
.basic-info-box .img {
  width: 100px;
  height: 100px;
}
.basic-info-box .img.size-s {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}
.basic-info-box .title {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--main-clr);
  word-break: auto-phrase;
}
.basic-info-box .des {
  font-size: 16px;
  line-height: 19px;
  color: #666;
  word-break: auto-phrase;
}

/*----------------------------------------*\
  || Center Box
\*----------------------------------------*/
.center-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin: auto;
  padding: 100px 0;
  text-align: center;
}
.center-box .img {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
}
.center-box .title {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--tit-clr);
}
.center-box .text {
  margin-top: 20px;
  font-size: 16px;
  line-height: 19px;
  color: #666;
}

.dim-contents .center-box {
  padding: 50px 0 30px;
}

/*----------------------------------------*\
  || Background Color Box
\*----------------------------------------*/
.shadow-box {
  padding: 22px 20px;
  background: var(--bg-clr2);
  border-radius: 7px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.13);
}

.white-box {
  padding: 20px;
  border-radius: 6px;
  background-color: var(--bg-clr2);
}

.grey-box {
  padding: 15px 0;
  border-radius: 5px;
  background-color: #f8f8f8;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--cap-clr);
}

.grey-box02 {
  background: #f7f8fa;
  text-align: center;
  padding: 25px;
  line-height: 20px;
  border-radius: 12px;
}

.grey-box03 {
  background: #fcfcfc;
  text-align: center;
  padding: 30px;
  border-radius: 14px;
}

.grey-box04 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f4f6;
  padding: 20px;
  border-radius: 14px;
}

.mint-box {
  background: #effaf8;
  border-radius: 12px;
  padding: 25px;
  line-height: 20px;
  text-align: center;
  color: var(--tit-clr);
}

.grey-box02 p,
.mint-box p {
  font-size: 18px;
  line-height: 1.3;
}

/*----------------------------------------*\
  || Info Empty Box
\*----------------------------------------*/
.info-empty-box {
  background: url("/img/common/icon/icon_info.png") no-repeat center top;
  background-size: 46px;
  margin: 60px auto;
  padding-top: 76px;
  text-align: center;
}
.info-empty-box.red {
  background-image: url("/img/common/icon/icon_info_red.png");
}
.info-empty-box p + p {
  margin-top: 10px;
}
.info-empty-box .title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--tit-clr);
}
.info-empty-box .txt {
  font-size: 16px;
  line-height: 130%;
}
.info-empty-box .des {
  font-size: 14px;
  line-height: 130%;
  color: #666;
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.border-box {
  margin: 10px 0;
  padding: 50px 30px;
  background: var(--bg-clr2);
  border: 15px solid var(--bg-clr1);
  box-shadow: 0 0 1px var(--disable-clr);
}

/*----------------------------------------*\
  || Info Box
\*----------------------------------------*/
.info-box {
  position: relative;
  display: table;
  width: 100%;
  margin: 30px 0;
  padding: 30px 25px;
  background-color: var(--bg-clr1);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-radius: 14px;
}
.info-box:has(.left) {
  margin: 10px 0 0;
  padding: 0;
  background: none;
  border: 0;
}
.info-box .left {
  display: table-cell;
  width: 50%;
  vertical-align: bottom;
}
.info-box .right {
  display: table-cell;
  width: 50%;
  vertical-align: bottom;
  text-align: right;
}
.info-box .text {
  display: block;
  margin-top: 15px;
  font-size: 14px;
  line-height: 20px;
  color: #666;
}
.info-box .text:first-child {
  margin-top: 0;
}
.info-box .text + .text {
  margin-top: 3px;
}
.info-box .select-basic {
  width: 130px;
  margin-top: 35px;
}

/*----------------------------------------*\
  || Basic Btn Wrap
\*----------------------------------------*/
.basic-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  width: 100%;
  margin: 40px auto;
}
.basic-btn-wrap.justify-content-start {
  justify-content: start;
}
.basic-btn-wrap--overlay-top {
  margin: -10px 0 0;
}
.basic-btn-wrap--overlay-top button {
  background-color: #fff;
  padding: 4px 20px;
}

.page-result-wrap + .basic-btn-wrap {
  margin-top: 60px;
}

/*----------------------------------------*\
  || Basic Button
\*----------------------------------------*/
.basic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 54px;
  background-color: var(--main-clr);
  border-radius: 14px;
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  color: var(--bg-clr2);
  transition: all 0.2s ease;
}
.basic-btn:hover {
  background-color: #00938d;
}
.basic-btn:disabled {
  background-color: var(--cap-clr);
  cursor: default;
  pointer-events: none;
}
.basic-btn.type-s {
  width: 74px;
  height: 30px;
  background-color: var(--bg-clr2);
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: #666;
}
.basic-btn.type-sm {
  width: auto;
  height: 40px;
  min-width: fit-content;
  padding: 12px 15px;
  background-color: var(--bg-clr2);
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--body-clr);
}
.basic-btn.type-inp {
  display: flex;
  align-items: center;
  width: auto;
  height: 45px;
  min-width: 108px;
  padding: 0 15px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: var(--tit-clr);
}
.basic-btn.border {
  width: auto;
  height: auto;
  padding: 11px 24px;
  background-color: var(--bg-clr2);
  border: 1px solid #d9d9d9;
  border-radius: 40px;
  font-size: 16px;
  line-height: 19px;
  color: var(--cap-clr);
  outline-offset: 3px;
}
.basic-btn.border[aria-pressed=true] {
  background-color: var(--main-clr);
  border-color: var(--main-clr);
  color: var(--bg-clr2);
}
.basic-btn.grey {
  background-color: var(--cap-clr);
}
.basic-btn.grey:hover {
  background-color: gray;
}
.basic-btn.white {
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  font-weight: 500;
  color: var(--tit-clr);
}
.basic-btn.white:hover {
  background-color: var(--bg-clr1);
}
.basic-btn.reverse {
  background-color: var(--bg-clr2);
  border: 1px solid var(--main-clr);
  color: var(--main-clr);
}

@media (max-width: 768px) {
  .basic-btn {
    width: 100%;
  }
  .basic-btn.border {
    padding: 6px 14px;
    font-size: 15px;
  }
}
/*----------------------------------------*\
  || Text Type
\*----------------------------------------*/
.btn-line {
  font-size: 12px;
  font-weight: 700;
  color: var(--tit-clr);
  line-height: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-line:hover, .btn-line:focus {
  text-decoration: underline;
}

.btn-mini {
  padding: 6px 8px;
  background-color: var(--line-clr);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  transition: all 0.15s ease;
}
.btn-mini:hover {
  background-color: #e5e5e5;
}
.btn-mini.white {
  background-color: var(--bg-clr2);
  border: 1px solid #dedede;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--tit-clr);
}
.btn-mini.white:hover {
  background-color: #f2f2f2;
}
.btn-mini.mint {
  background-color: #0c7474;
  border: 0;
  font-weight: 400;
  line-height: 16px;
  color: var(--bg-clr2);
}
.btn-mini.mint:hover {
  background-color: #0a5d5d;
}

.more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 51px;
  background-color: #f2f4f6;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  color: var(--tit-clr);
  transition: all 0.2s ease;
}
.more-btn:hover {
  background-color: #e3e7ec;
}

/*----------------------------------------*\
  || Icon Type
\*----------------------------------------*/
.basic-btn--edit {
  background: url("/img/common/icon/icon_arrow_back.png") no-repeat center center;
  background-size: 17px;
}

.clearbtn {
  background: url("/img/content/main/icon_delete01.png") no-repeat center center;
  background-size: contain;
  display: none;
  width: 24px;
  height: 24px;
  opacity: 0;
}

.search-btn {
  background: url("/img/content/main/icon_search.png") no-repeat center center;
  background-size: contain;
  display: inline-block;
  min-width: 36px;
  height: 36px;
  margin-right: 20px;
}

.mouse-btn {
  width: 24px;
  height: 24px;
  background: url("/img/common/icon/icon_mouse.png") no-repeat center center;
  background-size: contain;
}

.calendar-btn {
  width: 19px;
  height: 19px;
  background: url("/img/common/icon/icon_calendar.png") no-repeat center center;
  background-size: contain;
}

.del-btn {
  border-radius: 4px;
  transition: all 0.15s ease;
}
.del-btn:not(.icon) {
  width: auto;
  height: 24px;
  border: 1px solid var(--neg-clr);
  color: var(--neg-clr);
  padding: 0 8px;
  position: relative;
}
.del-btn:not(.icon):hover::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--neg-clr);
  opacity: 0.05;
}
.del-btn.icon {
  background: url("/img/common/icon/icon_close_s.png") no-repeat center center;
  background-size: 10px;
  width: 24px;
  height: 24px;
}
.del-btn.icon:hover {
  background-color: var(--line-clr);
}

.menu-kebab {
  width: 12px;
  height: 22px;
  background: url("/img/common/icon/icon_kebab.png") no-repeat right center;
  background-size: contain;
  display: block;
}

.btn-copy {
  width: 23px;
  height: 23px;
  background: url("/img/common/icon/icon_paste.png") no-repeat center center;
  background-size: 16px;
  display: inline-block;
  border-radius: 4px;
}
.btn-copy:hover {
  background-color: var(--line-clr);
}

.acco-util-btn {
  width: 23px;
  height: 23px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 18px;
  transition: all 0.15s ease;
}
.acco-util-btn:hover {
  background-color: var(--line-clr);
}
.acco-util-btn.doc {
  background-image: url("/img/common/icon/icon_doc.png");
}
.acco-util-btn.msg {
  background-image: url("/img/common/icon/icon_msg.png");
}
.acco-util-btn.msg.off {
  background-image: url("/img/common/icon/icon_msg_on.png");
}
.acco-util-btn.fav {
  background-image: url("/img/common/icon/icon_star.png");
}
.acco-util-btn.fav.on {
  background-image: url("/img/common/icon/icon_star_on.png");
}

/*----------------------------------------*\
  || Mix Type
\*----------------------------------------*/
.btn--chevron-down {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 14px;
  color: var(--cap-clr);
}
.btn--chevron-down::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(/img/common/icon/icon_chevron_down.png) no-repeat center/contain;
}
.btn--chevron-down .active::after, .btn--chevron-down[aria-expanded=true]::after {
  transform: scaleY(-1);
}
.btn--more {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tit-clr);
}
.btn--more::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url(/img/common/icon/chevron/black_small_bottom.png) no-repeat center/contain;
}

.btn-agree {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: var(--tit-clr);
}
.btn-agree::before {
  width: 24px;
  height: 24px;
  background: url("/img/common/icon/icon_again.png") no-repeat left center;
  background-size: 24px;
  content: "";
  display: block;
  transition: all 0.3s ease;
}
.btn-agree:hover::before {
  transform: rotate(-45deg);
}

.down-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background-color: #f0f0f0;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
}
.down-btn::before {
  width: 14px;
  height: 13px;
  background: url("/img/common/icon/icon_down.png") no-repeat center center;
  background-size: contain;
  content: "";
  display: block;
}

.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--tit-clr);
}
.add-btn::before {
  content: "+";
  position: relative;
  top: -1px;
}
.add-btn small {
  font-size: 0.67em;
  color: var(--cap-clr);
}

.util-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 16px;
  color: var(--tit-clr);
}
.util-btn::before {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  content: "";
  display: block;
}
.util-btn.excel::before {
  background-image: url("/img/common/icon/icon_excel.png");
}
.util-btn.print::before {
  background-image: url("/img/common/icon/icon_print.png");
}
.util-btn:hover {
  /* #111 기준 */
  filter: invert(46%) sepia(70%) saturate(4498%) hue-rotate(152deg) brightness(98%) contrast(94%);
  font-weight: 700;
}

.square-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  width: 240px;
  height: 180px;
  border-radius: 14px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  transition: all 0.15s ease;
}
.square-btn .img {
  width: 66px;
  height: 66px;
}
.square-btn .text {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--tit-clr);
}
.square-btn:hover {
  border-color: var(--main-clr);
}

.btn-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 19px;
  color: var(--tit-clr);
}
.btn-icon:hover {
  text-decoration: underline;
}
.btn-icon::before {
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: contain;
  content: "";
}
.btn-icon.id::before {
  width: 14px;
  height: 14px;
  background-image: url("/img/common/icon/icon_user.png");
}
.btn-icon.pw::before {
  width: 10px;
  height: 14px;
  background-image: url("/img/common/icon/icon_lock.png");
}

/*----------------------------------------*\
  || Floating Button
\*----------------------------------------*/
.floating-box {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  position: fixed;
  top: 30%;
  right: 50px;
  z-index: 1;
  gap: 20px;
}
.floating-box .btn-floating {
  position: relative;
  padding: 20px 85px 20px 18px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr2);
  border-radius: 30px;
  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.1);
  transition: padding 0.3s ease;
}
.floating-box .btn-floating:hover {
  padding-right: 100px;
}
.floating-box .btn-floating .txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: #666;
}
.floating-box .btn-floating .img {
  position: absolute;
  top: -5px;
  right: -5px;
}

@media (max-width: 1200px) {
  .floating-box {
    top: initial;
    bottom: 50px;
    right: 20px;
  }
}
@media (max-width: 768px) {
  .floating-box {
    bottom: 20px;
    gap: 15px;
  }
  .floating-box .btn-floating {
    padding: 10px 52px 10px 15px;
    border-radius: 30px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
  }
  .floating-box .btn-floating:hover {
    padding-right: 60px;
  }
  .floating-box .btn-floating .txt {
    font-size: 14px;
    line-height: 18px;
  }
  .floating-box .btn-floating .img {
    width: 50px;
    height: 50px;
    top: -4px;
    right: -3px;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.btn-downlode {
  border-right: 1px solid var(--disable-clr);
  border-left: 1px solid var(--disable-clr);
  min-width: 140px;
  font-size: 14px;
  background: url("/img/common/btn_down_icon.jpg") no-repeat left 18px center;
  padding: 24px 80px 24px 40px;
}

.btn-slide-active .btn-slide {
  background: url("/img/common/icon_select_fff.png") no-repeat center;
  width: 60px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #999999;
  transform: rotate(180deg);
}
.btn-slide-active .sub-title {
  color: var(--body-clr);
}

.btn-slide {
  background: url("/img/common/icon_select_fff.png") no-repeat center var(--body-clr);
  width: 60px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.btn-right-wrap {
  float: right;
  position: relative;
}
.btn-right-wrap .btn-choice:first-child {
  border-left: 1px solid #f7f7f7;
}

.btn-choice {
  width: 50px;
  background: url(/img/common/icon_select_333.png) no-repeat center;
  border-right: 1px solid #f7f7f7;
  padding: 29px 0;
  float: left;
}
.btn-choice:focus {
  background-color: #999;
  background-image: url(/img/common/icon_select_fff.png);
}
.btn-choice.close {
  background-image: url(/img/common/btn_close_333.png);
}
.btn-choice.close:focus {
  background-color: #999;
  background-image: url(/img/common/btn_close_fff.png);
}

.btn-arrow:after {
  content: "";
  float: right;
  width: 32px;
  height: 18px;
  background: url(/img/common/icon_rtarrow_fff.png) no-repeat center center;
}

.btn-size {
  min-width: 200px !important;
}

/*----------------------------------------*\
  || Btn Area
\*----------------------------------------*/
.btn-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 40px auto;
  padding: 0 !important;
}
.btn-area.style01 {
  margin-top: -10px;
  padding-top: 0;
}
.btn-area.retouch-m {
  padding: 30px 20px !important;
  background: #f7f7f7;
  border: 1px solid #efefef;
  text-align: left;
}
.btn-area.retouch-m.info .btn-sm-wh {
  max-width: 256px;
}
.btn-area.retouch-m.info .btn-sm-wh + .btn-sm-wh {
  margin-left: 5px;
  margin-right: 0;
}

/*----------------------------------------*\
  || Btn Basic
\*----------------------------------------*/
.btn-basic,
.btn-print,
.btn-down,
.btn-add,
a.btn-basic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 54px;
  min-width: 230px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  color: var(--bg-clr2);
  transition: all 0.2s ease;
}

.btn-basic,
a.btn-basic {
  background: var(--main-clr);
}

.btn-basic.btn-cer01, .btn-basic.btn-cer02 {
  background: #666 url(/img/content/cer/icon_chce_01.png) no-repeat 45px center;
  padding-left: 35px;
}
.btn-basic.btn-cer02 {
  background-image: url(/img/content/cer/icon_chce_02.png);
}
.btn-basic.margin-r-b {
  margin-right: 8px;
}
.btn-basic.btn-kdic {
  border: 1px solid var(--disable-clr);
  background: var(--bg-clr2);
}
.btn-basic.btn-kdic span {
  font-size: 14px;
  color: var(--body-clr);
  font-weight: 400;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  line-height: 18px;
  padding-top: 2px;
}
.btn-basic .icon-arrow {
  display: inline-block;
  width: 32px;
  height: 18px;
  margin-top: -2px;
  background: url(/img/common/icon_rtarrow_fff.png) no-repeat 50% 50%;
  text-indent: -10000px;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
}

.btn-print::before {
  background: url(/img/common/icon_print.png) no-repeat center/contain;
}

.btn-down::before {
  background: url(/img/common/icon_down.png) no-repeat center/contain;
}

.btn-add::before {
  background: url(/img/common/icon_add.png) no-repeat center/contain;
}

.btn-basic span {
  color: inherit;
  font-weight: 700;
}

.btn-print,
.btn-down,
.btn-add {
  gap: 10px;
  background-color: var(--cap-clr);
}
.btn-print.btn-active,
.btn-down.btn-active,
.btn-add.btn-active {
  background-color: #000;
}
.btn-print span,
.btn-down span,
.btn-add span {
  padding: 0 !important;
  font-weight: 700;
  line-height: 28px;
  color: var(--bg-clr2);
}
.btn-print::before,
.btn-down::before,
.btn-add::before {
  content: "";
  width: 25px;
  height: 25px;
}

.btn-active {
  background: #000;
}

/*----------------------------------------*\
  || Btn Plus
\*----------------------------------------*/
.btn-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 51px;
  background-color: #f2f4f6;
  border-radius: 12px;
  transition: all 0.2s ease;
}
.btn-plus:hover {
  background-color: #e3e7ec;
}
.btn-plus span {
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  color: var(--tit-clr);
}
.btn-plus .icon-plus {
  display: none;
}

/*----------------------------------------*\
  || Btn-clickbox
\*----------------------------------------*/
.btn-clickbox {
  width: 100%;
  clear: both;
  padding-top: 10px;
}
.btn-clickbox::after {
  content: "";
  display: block;
  float: none;
  clear: both;
}
.btn-clickbox button {
  margin-right: 10px;
}

/*----------------------------------------*\
  || Btn-small / Btn-sm-wh
\*----------------------------------------*/
.btn-sm {
  width: 70px;
  min-height: 35px;
  border: 1px solid var(--disable-clr);
  border-radius: 4px;
  font-size: 12px;
  color: var(--tit-clr);
}

.btn-small {
  width: 100%;
  max-width: 150px;
  height: auto;
  padding: 15px 0;
  background: var(--main-clr);
  font-size: 16px;
  color: var(--bg-clr2);
  font-weight: 700;
  border-radius: 14px;
  transition: all 0.2s ease;
}

.btn-small-active {
  background: #000;
}

.btn-sm-wh-wrap .btn-sm-wh {
  width: 120px;
  margin-top: 10px;
  margin-right: 20px;
}

.btn-sm-wh {
  width: 100%;
  min-width: fit-content;
  max-width: 120px;
  height: 47px;
  padding: 0 8px;
  background: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  color: var(--body-clr);
  font-size: 14px;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.btn-sm-wh.resize {
  max-width: none;
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.btn-sm-wh.small {
  max-width: 50px;
}
.btn-sm-wh.ico_down {
  min-width: 240px;
  padding: 0 40px 0 15px;
  background: var(--bg-clr2) url(/img/common/ico_down.png) no-repeat 95% center;
  text-align: left;
}
.btn-sm-wh.btn-qrcode {
  margin-top: 10px;
  font-weight: 400;
}
.btn-sm-wh.btn-qrcode:hover ~ .tooltips.qrcode, .btn-sm-wh.btn-qrcode:active ~ .tooltips.qrcode, .btn-sm-wh.btn-qrcode:focus ~ .tooltips.qrcode {
  display: block;
}
.btn-sm-wh .w90 {
  max-width: 90px;
}

.btn-sm-whactive {
  border-bottom: 2px solid #999;
  border-color: #999;
}

.btn-ctactive {
  position: relative;
}
.btn-ctactive::after {
  max-width: 220px;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}
.btn-ctactive span {
  position: relative;
  z-index: 5;
  display: inline-block;
  color: rgb(255, 255, 255);
  font-weight: 700;
}

/*----------------------------------------*\
  || Btn Link
\*----------------------------------------*/
.btn-link {
  position: relative;
  display: block;
  width: 200px;
  padding: 10px 20px;
  border: 1px solid var(--disable-clr2);
  text-align: center;
  margin: 20px auto;
}
.btn-link::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 15px;
  border: 1px solid var(--cap-clr);
  width: 9px;
  height: 9px;
  border-left: none;
  border-bottom: none;
  transform: rotate(45deg);
}

/*----------------------------------------*\
  || Btn Thin
\*----------------------------------------*/
.btn-thin-wrap.top .btn-thin {
  margin-top: 15px;
  margin-right: 5px;
}

.btn-thin-wrap.bottom .btn-thin {
  margin-bottom: 15px;
  margin-right: 5px;
}

.btn-thin {
  width: 100%;
  max-width: 80px;
  padding: 4px 0;
  border: 1px solid var(--line-clr3);
  font-size: 12px;
  color: var(--body-clr);
  background: var(--bg-clr2);
  border-radius: 4px;
}
.btn-thin.active, .btn-thin[aria-pressed=true] {
  font-weight: 700;
  color: var(--main-clr) !important;
  border-color: var(--main-clr) !important;
  border-width: 2px;
}
.btn-thin.disable {
  background-color: #efefef !important;
  border-color: var(--disable-clr) !important;
}
.btn-thin.sm {
  max-width: 40px;
  width: 100%;
}
.btn-thin.resize {
  width: auto;
  max-width: inherit;
  padding: 4px;
}
.btn-thin.retouch {
  float: right;
  margin-top: -5px;
}

/*----------------------------------------*\
  || Btn Style01
\*----------------------------------------*/
.btn-style01,
.btn-style02,
.btn-style03,
.btn-style04,
.btn-style05,
.btn-style06 {
  transition: all 0.2s ease;
}

.btn-style01 {
  display: inline-block;
  min-width: 120px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--disable-clr);
  border-radius: 5px;
  background: var(--bg-clr2);
  color: #666;
  font-size: 16px;
  text-align: center;
}
.btn-style01.type02 {
  background: #666;
}
.btn-style01 .detailview {
  display: inline-block;
  margin: 0 17px;
  padding: 2px 17px 0 0;
  background: url("/img/hss_common/button/btn_detailview.gif") no-repeat right 3px;
}
.btn-style01 .detailview.type02 {
  background: url("/img/hss_common/button/btn_detailview_white.png") no-repeat right 3px;
  color: var(--bg-clr2);
}
.btn-style01 .down {
  margin: 0 17px;
  padding: 0 30px 0 0;
  background: url("/img/hss_common/button/btn_down.gif") no-repeat right 0;
}
.btn-style01 .download {
  font-size: 16px;
  color: #666;
  font-weight: 400;
}

a.btn-style01 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 40px;
}

.link-box .btn-style01 .detailview {
  padding: 0 17px 0 0;
  line-height: 38px;
  background-position: right center;
}

/*----------------------------------------*\
  || Btn Style02
\*----------------------------------------*/
.btn-style02 {
  display: inline-block;
  min-width: 200px;
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--main-clr);
  border-radius: 5px;
  background: #f3f9e8;
  color: var(--body-clr);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

/*----------------------------------------*\
  || Btn Style03
\*----------------------------------------*/
.btn-style03 {
  display: inline-block;
  min-width: 200px;
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--main-clr);
  border-radius: 5px;
  background: var(--bg-clr2);
  color: var(--body-clr);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

/*----------------------------------------*\
  || Btn Style04
\*----------------------------------------*/
.btn-style04 {
  display: inline-block;
  min-width: 150px;
  height: 40px;
  padding: 0 18px;
  border-radius: 5px;
  background: var(--cap-clr);
  color: var(--bg-clr2);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

/*----------------------------------------*\
  || Btn Style05
\*----------------------------------------*/
.btn-style05 {
  display: inline-block;
  min-width: 150px;
  height: 40px;
  padding: 0 18px;
  border-radius: 5px;
  background: #918d8d;
  color: var(--bg-clr2);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

/*----------------------------------------*\
  || Btn Style06
\*----------------------------------------*/
.btn-style06 {
  display: inline-block;
  min-width: 150px;
  height: 40px;
  padding: 0 18px;
  border-radius: 5px;
  background: var(--main-clr);
  color: var(--bg-clr2);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

a.btn-style06 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 40px;
}

/*----------------------------------------*\
  || Btn Table
\*----------------------------------------*/
.btn-table-wrap {
  padding: 0 !important;
}

.btn-table {
  position: relative;
  float: none !important;
  width: 100%;
  height: 61px;
  margin-right: 0 !important;
  display: block;
  border: 0;
  background: none;
}
.btn-table:hover {
  background-color: #999;
}
.btn-table:hover:before, .btn-table:hover:after {
  background-color: var(--bg-clr2);
}
.btn-table:before, .btn-table:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  content: "";
  width: 16px;
  height: 2px;
  background: var(--body-clr);
}
.btn-table:after {
  transform: translate(-50%, -50%) rotate(135deg);
}

/*----------------------------------------*\
  || Open Btn
\*----------------------------------------*/
.open-btn-wrap {
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
  border-top: 1px solid var(--disable-clr);
}

.open-btn {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  background: var(--bg-clr2);
  border: 1px solid var(--disable-clr);
  border-radius: 50%;
}
.open-btn::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 10px;
  background: url("/img/common/icon_slide_up.png") no-repeat center/contain;
  transform: scaleY(-1);
  transition: all 0.5s ease;
}
.open-btn.on::after {
  transform: scaleY(1);
}

/*----------------------------------------*\
  || Table Button
\*----------------------------------------*/
.btn-double,
.btn-trio {
  margin: auto;
}
.btn-double > .tool-box,
.btn-trio > .tool-box {
  width: 54px;
  float: left;
  margin-right: 5px !important;
  margin-bottom: 0;
}
.btn-double > button,
.btn-trio > button {
  float: left;
  margin-right: 5px !important;
  margin-bottom: 0;
}
.btn-double > button:last-child,
.btn-trio > button:last-child {
  margin-right: 0 !important;
}

.btn-double.sm {
  width: 85px;
}
.btn-double.lg {
  width: 165px;
}
.btn-double > .tool-box {
  float: left;
  margin-right: 5px !important;
  margin-bottom: 0;
}

.btn-trio {
  width: 170px;
}
.btn-trio.type02 {
  width: 160px;
}
.btn-trio.type02 > .tool-box {
  float: none;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px !important;
}
.btn-trio.type02 > button {
  float: none;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px !important;
}
.btn-trio.type03 {
  width: 190px;
  display: flex;
  justify-content: center;
}
.btn-trio > .tool-box {
  float: left;
  margin-right: 5px !important;
  margin-bottom: 0;
}

.btn-quartet {
  width: 215px;
  justify-content: center;
  gap: 4px;
}

/*----------------------------------------*\
  || Btn Search
\*----------------------------------------*/
.btn-search-box {
  position: relative;
  min-width: 400px;
}

.btn-search {
  display: inline-block;
  width: 40px;
  height: 47px;
  background: url("/img/common/icon_search.png") right 12px center/22px 22px no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0;
}

/*----------------------------------------*\
  || Btn-mso
\*----------------------------------------*/
.btn-mso-txt {
  min-height: 16px;
  padding: 1px 0 1px 23px;
  background-size: 16px, 16px;
  background-position: left center;
  background-repeat: no-repeat;
  font-size: 14px;
  color: var(--body-clr);
}
.btn-mso-txt.btn-mso04.slide {
  width: 120px;
  padding: 27px 0 27px 20px;
  border-left: 1px solid var(--disable-clr);
  background-position: left 20px center;
}

.btn-mso,
.btn-mso-s {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-mso {
  width: 54px;
  height: 54px;
}

.btn-mso-s {
  width: 16px;
  height: 16px;
}

.btn-mso01,
.btn-mso04 {
  padding-left: 28px;
  background-image: url("/img/common/icon/icon_excel.png");
  background-size: 24px;
  font-size: 14px;
  line-height: 16px;
  color: var(--tit-clr);
}
.btn-mso01:hover,
.btn-mso04:hover {
  /* #111 기준 */
  filter: invert(46%) sepia(70%) saturate(4498%) hue-rotate(152deg) brightness(98%) contrast(94%);
  font-weight: 700;
}

.btn-mso02 {
  background-image: url("/img/common/mso_icon02.png");
}

.btn-mso03 {
  background-image: url("/img/common/mso_icon03.png");
}

.btn-mso04 {
  background-image: url("/img/common/icon/icon_print.png");
}

/*----------------------------------------*\
  || Btn-close
\*----------------------------------------*/
.btn-close {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-close-l {
  width: 23px;
  height: 23px;
  background-image: url("/img/common/btn_close_l.png");
}

.btn-close-s {
  width: 10px;
  height: 10px;
  background-image: url("/img/common/btn_close_s.png");
}

/*----------------------------------------*\
  || Btn Smart 스마트 간편한도조회
\*----------------------------------------*/
.btn-smart-wrap {
  position: relative;
  float: left;
  width: 175px;
  margin-left: 40px;
  background: #ff9358;
  height: 45px;
  text-align: center;
  line-height: 48px;
  border-radius: 30px;
  transition: all 0.5s ease;
}
.btn-smart-wrap:hover {
  margin-left: 50px;
  box-shadow: -10px 0 0 #aaa;
}

.btn-smart {
  color: var(--bg-clr2);
  font-size: 19px;
}

/*----------------------------------------*\
  || Btn Download / Btn Support
\*----------------------------------------*/
.btn-download,
.btn-support {
  width: 90px;
  height: 22px;
  padding-right: 20px;
  background: #7a8999;
  background-image: url("/img/hss_common/bg_download.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border-radius: 3px;
  font-size: 11px;
  color: var(--bg-clr2);
  vertical-align: bottom;
  text-align: center;
}

a.btn-download,
a.btn-support {
  margin-left: 16px;
  padding-top: 2px;
}
a.btn-download.type01,
a.btn-support.type01 {
  display: inline-block;
  width: initial;
  height: initial;
  padding: 10px 30px 10px 10px;
  margin-top: 15px;
}

.btn-support {
  background-position: right 17px center;
}

/*----------------------------------------*\
  || 이전 / 다음
\*----------------------------------------*/
.btn-box04 {
  margin-top: 20px;
  text-align: center;
}

.btn-prev01 .prev {
  color: var(--disable-clr);
  font-size: 14px;
  font-weight: 700;
}
.btn-prev01 .prev::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-right: 11px;
  background: url("/img/common/btn_prev01.png") no-repeat;
}
.btn-prev01 .prev::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0 27px 0 30px;
  background: var(--disable-clr);
}
.btn-prev01.active .prev {
  color: var(--body-clr);
}
.btn-prev01.active .prev::before {
  background-image: url("/img/common/btn_prev01_on.png");
}

.btn-next01 .next {
  color: var(--disable-clr);
  font-size: 14px;
  font-weight: 700;
}
.btn-next01 .next::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-left: 11px;
  background: url("/img/common/btn_next01.png") no-repeat;
}
.btn-next01.active .next {
  color: var(--body-clr);
}
.btn-next01.active .next::after {
  background-image: url("/img/common/btn_next01_on.png");
}

.btn-prev01,
.btn-next01 {
  cursor: default;
}
.btn-prev01:active,
.btn-next01:active {
  cursor: pointer;
}

/*----------------------------------------*\
  || Color
\*----------------------------------------*/
.btn-grey {
  background: var(--cap-clr);
  border-color: var(--cap-clr);
  color: var(--bg-clr2);
}

.btn-blue {
  background: var(--main-clr);
  border: 0;
  color: var(--bg-clr2);
  min-width: 184px;
  margin-bottom: 30px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .btn-area {
    margin-top: 25px;
    flex-wrap: wrap;
  }
  html.responsive .btn-area.retouch-m {
    padding: 25px 16px;
  }
  html.responsive .btn-area.retouch-m .btn-sm-wh {
    width: 100%;
    margin-bottom: 10px;
  }
  html.responsive .btn-basic {
    width: 100%;
    height: auto;
    padding: 12px 0 11px;
    font-size: 15px;
  }
  html.responsive .btn-basic.margin-r-b {
    margin-right: 0;
    margin-bottom: 7px;
  }
  html.responsive .btn-ctactive {
    height: auto;
    font-size: 15px;
    font-weight: 400;
    max-width: none;
  }
  html.responsive .btn-ctactive::after {
    max-width: none;
  }
  html.responsive .btn-print,
  html.responsive .btn-down,
  html.responsive .btn-add {
    width: 100%;
    padding: 8px 0 7px;
  }
  html.responsive .btn-print span,
  html.responsive .btn-down span,
  html.responsive .btn-add span {
    font-size: 15px;
    line-height: 20px;
  }
  html.responsive .btn-small {
    font-size: 15px;
    max-width: none;
  }
  html.responsive .btn-sm-wh {
    max-width: none;
  }
  html.responsive .btn-sm-wh.agree {
    margin: 10px 0 0 !important;
  }
  html.responsive .btn-sm-wh.resize.mobile-type01 {
    padding: 0 13px;
  }
  html.responsive .icon-area.retouch {
    margin-top: 18px;
    font-size: 12px;
  }
  html.responsive .icon-area.retouch li {
    margin-right: 7px;
  }
  html.responsive .icon-area .btn-sm-wh {
    margin-bottom: 7px;
  }
  html.responsive .btn-reset {
    display: none;
  }
  html.responsive .btn-quartet {
    width: 100%;
    padding: 10px;
  }
  html.responsive .btn-thin {
    max-width: none;
    height: auto;
    width: 100%;
    font-size: 13px;
    padding: 7px 0;
  }
  html.responsive .btn-thin.retouch {
    font-size: 10px;
    font-weight: 400;
    width: auto;
    margin-left: -52px;
    margin-top: 22px;
    margin-bottom: -7px;
    padding: 7px 10px;
    letter-spacing: 3px;
  }
  html.responsive .tool-box {
    width: 100%;
  }
  html.responsive .btn-trio,
  html.responsive .btn-double {
    width: 100%;
  }
  html.responsive .btn-trio > button,
  html.responsive .btn-double > button {
    display: block;
    height: auto;
    color: var(--body-clr);
    background: var(--bg-clr2);
    font-size: 15px;
    padding: 7px 0;
    border-radius: 2px;
  }
  html.responsive .btn-trio.type02 {
    display: table-cell;
    padding: 10px 16px;
  }
  html.responsive .btn-trio.type02 > .tool-box {
    max-width: calc(33.3334% - 10px);
  }
  html.responsive .btn-trio.type02 > .tool-box .btn-thin {
    max-width: 100% !important;
    width: 100%;
    padding: 8px 0;
  }
  html.responsive .btn-trio.type02 .btn-thin {
    display: inline-block;
  }
  html.responsive .btn-trio .btn-thin {
    max-width: calc(33.3334% - 10px);
  }
  html.responsive .btn-trio > .tool-box {
    max-width: inherit;
    width: calc(33% - 10px);
    margin-left: 5px;
  }
  html.responsive .btn-trio > .tool-box .btn-thin {
    max-width: inherit !important;
    width: 100%;
    margin: 0 !important;
  }
  html.responsive .btn-double > button {
    width: 50%;
    max-width: calc(50% - 10px);
  }
  html.responsive .btn-smart-wrap {
    display: none;
  }
  html.responsive .btn-downlode {
    padding: 18px 65px 18px 30px;
    background: url("/img/common/btn_down_icon.jpg") no-repeat 10px 50%;
  }
  html.responsive .btn-slide {
    width: 50px;
    background-size: 17px;
  }
  html.responsive .btn-support {
    width: 112px;
    height: 32px;
  }
  html.responsive .btn-newWp {
    border-top: 1px solid var(--line-clr3);
    padding-top: 10px;
    margin-top: 10px;
    text-align: center;
  }
  .btn-thin-wrap.top, .btn-thin-wrap.bottom {
    margin-top: 10px;
  }
  .btn-thin-wrap.top .btn-thin, .btn-thin-wrap.bottom .btn-thin {
    width: 60px;
    font-size: 11px;
    padding: 8px 0;
    background-color: #eeeff1;
    border: 0;
    border-radius: inherit;
    color: #363636;
  }
  .btn-thin-wrap.top .btn-thin {
    margin-top: 5px;
  }
  .btn-thin-wrap.bottom .btn-thin {
    margin-bottom: 5px;
  }
}
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .btn-basic {
    width: 100%;
    min-width: auto;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Full Canlendar
\*----------------------------------------*/
.calendar-content {
  border-top: 1px solid #000;
}

.fc-toolbar.fc-header-toolbar {
  margin-bottom: 0;
}

.fc-header-toolbar .fc-center {
  vertical-align: bottom;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
  float: none;
  font-weight: 700;
}

.fc td,
.fc th {
  text-align: left;
  border: 0;
}

th.fc-day-header,
td.fc-day-header,
td.fc-day {
  position: relative;
}

th.fc-day-header::after,
td.fc-day-header::after,
td.fc-day::after {
  content: "";
  width: 150px;
  height: 1px;
  background: var(--disable-clr);
  position: absolute;
  left: 0;
  bottom: 0;
}

.fc-toolbar.fc-header-toolbar {
  background: #f7f7f7;
  padding: 15px 20px;
  position: relative;
}

.fc-center p,
.fc-center h5 {
  font-size: 22px;
  font-weight: 700;
}

.fc-state-default {
  border: 0;
  background-color: transparent;
  background-image: url("/img/common/icon_select_333.png");
  background-position: center;
  background-repeat: no-repeat;
  border-color: none;
  box-shadow: none;
}
.fc-state-default span.fc-icon {
  display: none;
}

button .fc-prev-button.fc-button.fc-state-default {
  width: 30px;
  height: 20px;
  position: absolute;
  left: 20px;
  top: 30%;
  transform: rotate(90deg) translateY(-50%);
}
button .fc-next-button.fc-button.fc-state-default {
  width: 30px;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 30%;
  transform: rotate(-90deg) translateY(-50%);
}

.fc-day-header.fc-widget-header {
  padding: 16px 7px 8px 0;
}
.fc-day-header span {
  color: var(--cap-clr);
  font-size: 13px;
}

.fc-sun span {
  color: var(--neg-clr);
}

td.fc-day-top {
  padding: 10px 2px 0 0;
}

.fc-content {
  margin-bottom: 10px;
}

.fc-title {
  font-size: 14px;
  line-height: 1.3;
  display: block;
  text-align: right;
  width: 130px;
  margin-right: 20px;
}
.fc-title.money {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-title > span {
  color: inherit;
}

.fc-event,
.fc-event-dot {
  background: transparent;
  border-color: transparent;
}

.fc-unthemed td.fc-today {
  background: none;
}

.fc-day.fc-widget-content.fc-thu.fc-today::before {
  content: "";
  display: block;
  width: 150px;
  height: 100%;
  background-color: #f7f7f7;
  position: absolute;
  left: 0;
  top: 0;
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.basic-swipe-container.type02 .product-view-dl > li:last-child {
  padding-bottom: 20px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .basic-swipe-container.type02 .product-view-dl > li:last-child {
    padding-bottom: 0;
  }
}
/*----------------------------------------*\
  || Basic Checkbox
\*----------------------------------------*/
.basic-checkbox-wrap {
  position: relative;
  display: inline-block;
  min-width: fit-content;
}
.basic-checkbox-wrap input {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.basic-checkbox-wrap input:checked + label::before {
  background-color: var(--main-clr);
}

.basic-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  color: var(--tit-clr);
}
.basic-checkbox::before {
  width: 24px;
  height: 24px;
  background: url("/img/common/icon/icon_check_white.png") no-repeat center center;
  background-size: 10px;
  content: "";
  display: block;
  background-color: var(--disable-clr);
  border-radius: 50%;
  transition: all 0.15s ease;
}

@media (max-width: 1200px) {
  .basic-checkbox {
    gap: 10px;
    font-size: 16px;
    line-height: 19px;
  }
  .basic-checkbox::before {
    width: 18px;
    height: 18px;
    background-size: 8px;
  }
}
/*----------------------------------------*\
  || Toggle Checkbox
\*----------------------------------------*/
.toggle-checkbox-wrap {
  position: relative;
  display: inline-block;
  min-width: fit-content;
}
.toggle-checkbox-wrap input {
  width: 100%;
  height: 100%;
  position: absolute;
}
.toggle-checkbox-wrap input:checked + label::before {
  right: 2px;
}
.toggle-checkbox-wrap input:checked + label::after {
  background-color: var(--main-clr);
}

.toggle-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  user-select: none;
  cursor: pointer;
}
.toggle-checkbox::before {
  width: 16px;
  height: 16px;
  content: "";
  position: absolute;
  top: 2px;
  right: 14px;
  display: block;
  background-color: var(--bg-clr2);
  border-radius: 50%;
  transition: all 0.2s ease;
  z-index: 2;
}
.toggle-checkbox::after {
  width: 32px;
  height: 20px;
  content: "";
  display: block;
  background-color: var(--disable-clr);
  border-radius: 100px;
  transition: all 0.2s ease;
}

/*----------------------------------------*\
  || Basic Agree Wrap
\*----------------------------------------*/
.basic-agree-wrap {
  padding: 16px 20px;
  background-color: #fafafb;
  border: 1px solid var(--line-clr3);
  border-radius: 10px;
}
.basic-agree-wrap + .basic-agree-list {
  margin-top: 6px;
}
.basic-agree-wrap .basic-checkbox-wrap {
  width: 100%;
}
.basic-agree-wrap .basic-checkbox {
  gap: 20px;
}

.basic-agree-list {
  display: flex;
  align-items: normal;
  flex-direction: column;
  padding: 0 20px;
}

.basic-agree-item .basic-checkbox-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--bg-clr3);
}
.basic-agree-item .basic-checkbox-wrap.link::after {
  width: 7px;
  height: 13px;
  background: url("/img/common/icon/icon_arrow_right.png") no-repeat center center;
  background-size: contain;
  content: "";
}
.basic-agree-item .basic-checkbox {
  gap: 20px;
}

@media (max-width: 1200px) {
  .basic-agree-wrap {
    padding: 10px 15px;
  }
  .basic-agree-item .basic-checkbox-wrap {
    padding: 10px 0;
  }
  .basic-agree-item .basic-checkbox {
    gap: 10px;
  }
  .basic-agree-list {
    padding: 0 15px;
  }
}
.search-type-wrap .basic-checkbox::before {
  width: 20px;
  height: 20px;
  background: url("/img/common/icon/icon_check_white.png") no-repeat center center;
  background-size: 12px;
  border-radius: 4px;
  background-color: var(--disable-clr);
}
.search-type-wrap .basic-inp-wrap {
  width: 100%;
  max-width: 510px;
}

@media (max-width: 768px) {
  .search-type-wrap {
    flex-direction: column;
    align-items: start;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Chk-basic
\*----------------------------------------*/
.chk-wrap {
  display: inline-block;
  vertical-align: middle;
}
.chk-wrap.type01 .chk-basic:checked ~ i {
  background: url("/img/common/icon_chk2.png") no-repeat center/contain;
}
.nick-wrap .chk-wrap {
  height: 40px;
  line-height: 3;
  margin-right: 15px;
}

.check-box-wrap.type02 .label-wrap {
  width: 24.7%;
  margin-right: 0;
}
.check-box-wrap.type02 div {
  margin-top: 20px;
}
.check-box-wrap.type02 div:first-child {
  margin-top: 0;
}
.check-box-wrap .label-wrap {
  margin-right: 40px;
}

.label-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.chk-basic {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
}
.chk-basic:focus + .chk-out {
  outline: -webkit-focus-ring-color auto 5px;
}
.chk-basic:checked ~ i {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url("/img/common/icon_chk2.png") no-repeat center/contain;
}
.chk-basic:disabled ~ i {
  background-color: var(--bg-clr3);
}
.chk-basic:checked ~ .icon-chk2 {
  background-image: url("/img/common/icon_chk_dis.png");
}
.chk-basic.type01 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  cursor: pointer;
  top: initial;
  left: initial;
  opacity: 1;
  z-index: 1;
  background: initial;
}
.chk-basic.white:checked ~ i {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url(/img/common/check_card.png) no-repeat center/contain;
}

.chk-out {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.chk-out.type01 {
  font-size: 0;
}

i.icon-chk {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url(/img/common/icon_chk_off.png) no-repeat center/contain;
  display: table-cell;
}

.chk-label {
  font-size: 14px;
  color: var(--body-clr);
  display: table-cell;
  padding-left: 10px;
  line-height: 1.2;
  text-align: left;
  vertical-align: middle;
}
.chk-label.white {
  font-size: 14px;
  color: var(--bg-clr2);
  display: table-cell;
  padding-left: 10px;
  line-height: 1.2;
  text-align: left;
  vertical-align: middle;
}
.chk-label.phone {
  font-size: 16px;
  font-weight: 500;
  padding-top: 3px;
}
.chk-label.phone02 {
  color: #666;
  font-size: 14px;
  font-weight: 500;
  padding-top: 3px;
}
.chk-label.type02 {
  color: #666;
  font-size: 14px;
  font-weight: 500;
  padding-top: 3px;
}

.ods-chk-label {
  font-size: 18px;
  color: var(--body-clr);
  display: table-cell;
  padding-left: 10px;
  line-height: 1.2;
  text-align: left;
  vertical-align: middle;
  font-weight: 700;
}

input[type=checkbox].disable ~ i {
  opacity: 0.5;
}
input[type=checkbox].disable ~ .chk-label {
  color: var(--cap-clr);
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .chk-label {
    margin-left: 0;
    color: #666666;
    font-size: 12px;
    padding-left: 5px;
  }
  html.responsive .ods-chk-label {
    margin-left: 0;
    color: var(--body-clr);
    font-size: 16px;
    padding-left: 5px;
    font-weight: 700;
  }
}
/*----------------------------------------*\
  || Widget
\*----------------------------------------*/
.ui-widget.ui-widget-content {
  border: 1px solid var(--cap-clr);
}

.ui-widget-content {
  background: #f7f7f7;
  color: var(--body-clr);
}

.ui-datepicker {
  width: 307px !important;
  padding: 10px 24px;
}

.ui-widget-header {
  background: none;
  border: 0;
}

/*----------------------------------------*\
  || Datepicker
\*----------------------------------------*/
.ui-datepicker .ui-datepicker-title {
  font-weight: 700;
  width: 72%;
  margin: 0 auto;
}
.ui-datepicker .ui-datepicker-title select {
  font-size: 18px;
  background: url("/img/common/cal_select_icon.jpg") no-repeat right 0px center;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month, .ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
  width: 40%;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
  margin-right: 20px;
  margin-left: 10px;
}
.ui-datepicker table {
  font-size: 14px;
}
.ui-datepicker th span {
  color: var(--cap-clr) !important;
}
.ui-datepicker td a,
.ui-datepicker td span {
  padding: 10px 5px;
  text-align: center;
  border-radius: 50%;
}

/*버튼*/
.ui-datepicker-next.ui-corner-all,
.ui-datepicker-prev.ui-corner-all {
  display: none;
}

/*일*/
.ui-state-default,
.ui-widget-content .ui-state-default {
  background: none;
  border: 0;
}

/*오늘*/
.ui-widget-content .ui-state-highlight {
  border: 1px solid var(--neg-clr);
}

/*선택일*/
.ui-state-active,
.ui-widget-content .ui-state-active {
  color: var(--bg-clr2);
  position: relative;
}

.ui-state-active::after {
  content: "";
  width: 30px;
  height: 30px;
  background: var(--neg-clr);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -5;
  border-radius: 50%;
}

[id*=monthpicker].ui-widget select {
  font-size: 18px;
  background: url("/img/common/cal_select_icon.jpg") no-repeat right 10px center;
  padding: 3px 35px;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
  padding: 10px 0px !important;
  cursor: pointer !important;
}

.mtz-monthpicker .ui-state-active {
  background: transparent;
  color: var(--bg-clr2);
  position: relative;
  z-index: 10;
}
.mtz-monthpicker .ui-state-active::after {
  content: "";
  width: 30px;
  height: 30px;
  background: var(--neg-clr);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -5;
  border-radius: 50%;
}

/*----------------------------------------*\
  || Input
\*----------------------------------------*/
.input-area {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 400px;
  height: 100%;
}
.input-area .btn-datepicker {
  position: absolute;
  right: 10px;
  top: 13px;
}

.input-area02 {
  position: relative;
  display: inline-block;
  height: 100%;
}
.input-area02 .btn-datepicker {
  position: absolute;
  left: 0;
  top: -22px;
}

.date-box2 .input-area {
  width: 184px;
  vertical-align: middle;
}
.date-box2 .input-area .input-basic {
  margin-right: 0;
}

.glyphicon-calendar img {
  width: 19px;
}

.dim-contents .datepicker-calendar {
  position: fixed;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}

.datepicker-calendar {
  position: absolute;
  height: auto;
  width: 306px;
  padding: 40px 24px 24px;
  border: 1px solid var(--tit-clr);
  background: var(--bg-clr2);
  color: var(--body-clr);
  z-index: 100;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.datepicker-calendar .datepicker-month-wrap {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.datepicker-calendar .datepicker-month-wrap div[role=button] {
  width: 16px;
  height: 16px;
}

.datepicker-month {
  order: 1;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  color: var(--body-clr);
}

.datepicker-month-fast-prev,
.datepicker-month-fast-next {
  background: url("/img/common/icon/icon_arrow_left_double.png") no-repeat center center;
  background-size: contain;
}

.datepicker-month-prev,
.datepicker-month-next {
  background: url("/img/common/icon/icon_arrow_left.png") no-repeat center center;
  background-size: contain;
}

.datepicker-month-next,
.datepicker-month-fast-next {
  transform: rotate(180deg);
}

.datepicker-month-next {
  order: 2;
}

.datepicker-month-fast-next {
  order: 3;
}

.datepicker-grid {
  width: 100%;
  margin-top: 24px;
}
.datepicker-grid * {
  float: none !important;
}
.datepicker-grid tr td:first-child:not(.empty, .cur-day, .month),
.datepicker-grid tr td:last-child:not(.empty, .cur-day, .month) {
  color: var(--neg-clr);
}
.datepicker-grid th {
  border: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--cap-clr);
  text-align: center;
}
.datepicker-grid td {
  height: initial;
  font-size: 16px;
  color: var(--body-clr);
  text-align: center;
  cursor: pointer !important;
}
.datepicker-grid td.cur-day {
  background: var(--main-clr);
  color: var(--bg-clr2);
  border-radius: 50%;
}
.datepicker-grid td.disabled, .datepicker-grid td.empty {
  color: var(--cap-clr);
}
.datepicker-grid th,
.datepicker-grid td {
  border: 0 !important;
  padding: 0 !important;
  width: 36.8571428571px !important;
  height: 35px !important;
  text-align: center !important;
  vertical-align: middle;
}
.datepicker-grid th {
  height: 20px !important;
  padding-bottom: 10px !important;
}

.datepicker-caption {
  height: 1px;
  overflow: hidden;
  opacity: 0;
  color: transparent;
  font-size: 1px;
  line-height: 1px;
  margin: 0 0 -1px;
  padding: 0;
  border: 0;
  background: transparent;
}

/*----------------------------------------*\
  || Calendar
\*----------------------------------------*/
.calendar-area.type01 {
  display: inline-block;
}
.calendar-area.type01 .input-area .btn-datepicker {
  top: -12px;
  left: 9px;
  width: 22px;
  height: 22px;
}
.calendar-area.type01 .datepicker-calendar {
  top: 0 !important;
  left: 0 !important;
}

/*----------------------------------------*\
  || Close Button
\*----------------------------------------*/
.datepicker-close-wrap {
  position: absolute;
  top: 16px;
  right: 16px;
}
.datepicker-close-wrap .datepicker-close {
  width: 14px;
  height: 14px;
  background: url("/img/common/icon/icon_close_s2.png") no-repeat center center;
  background-size: contain;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .datepicker-calendar {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
  }
}
/*----------------------------------------*\
  || Basic Input
\*----------------------------------------*/
.basic-inp-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  width: 100%;
  padding: 0 10px 0 15px;
  min-width: fit-content;
  background-color: var(--bg-clr2);
  border-color: var(--line-clr3);
  border-radius: 10px;
  /* Pseudo */
  /* Child */
}
.basic-inp-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid;
  border-color: inherit;
  border-radius: 10px;
  transition: border-color 0.15s ease;
  pointer-events: none;
}
.basic-inp-wrap:focus-within {
  border-color: var(--main-clr);
}
.basic-inp-wrap:focus-within::before {
  border-width: 2px;
}
.basic-inp-wrap:focus-within label {
  color: var(--tit-clr);
}
.basic-inp-wrap:has(input:disabled), .basic-inp-wrap:has(input[readonly]) {
  background-color: var(--disable-clr2);
  border-color: var(--disable-clr2);
  color: var(--cap-clr);
  cursor: default;
}
.basic-inp-wrap:has(:autofill) {
  background-color: #e8f0fe;
  border-color: var(--pos-clr);
}
.basic-inp-wrap:has(.error) {
  border-color: var(--neg-clr);
  background-color: #faeaea;
}
.basic-inp-wrap:has([style*=background-color][nppfs-keypad-uuid]) {
  background-color: #e8f0fe;
  border-color: var(--pos-clr);
  pointer-events: auto;
}
.basic-inp-wrap:has([style*=background-color][nppfs-keypad-uuid]) input {
  background-color: transparent !important;
}
.basic-inp-wrap label {
  min-width: fit-content;
  margin-right: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  color: var(--cap-clr);
}
.basic-inp-wrap .basic-inp {
  width: 100%;
  height: 45px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
}
.basic-inp-wrap .basic-inp:focus, .basic-inp-wrap .basic-inp:focus-visible {
  outline: none;
}
.basic-inp-wrap .basic-inp::placeholder {
  font-weight: 400;
}
.basic-inp-wrap .basic-inp:has(~ .calendar-btn) {
  margin-right: 6px;
  text-align: right;
}
.basic-inp-wrap .basic-inp.type-calendar {
  background: url("/img/common/icon/icon_calendar.png") no-repeat right center;
  background-size: 19px;
  padding-right: 30px;
  text-align: right;
}
.basic-inp-wrap .txt {
  min-width: fit-content;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: var(--tit-clr);
}
.basic-inp-wrap .clearbtn {
  width: 16px;
  height: 16px;
}
.basic-inp-wrap .inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.basic-inp-wrap .time-counter {
  gap: 8px;
  color: var(--neg-clr);
}
.basic-inp-wrap .time-counter::before {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

/* Pseudo */
.basic-inp-wrap:has(.txt) {
  justify-content: flex-end;
}
.basic-inp-wrap:has(.txt) label {
  margin-right: auto;
}
.basic-inp-wrap:has(.txt) .basic-inp {
  text-align: right;
}
.basic-inp-wrap:has(.inner) {
  flex-direction: column;
  gap: 1px;
  padding-top: 0 !important;
}
.basic-inp-wrap:has(.inner):has(.txt) {
  align-items: flex-end;
}
.basic-inp-wrap + .basic-inp-wrap {
  margin-top: 10px;
}

/* Single */
.basic-inp-wrap.single {
  width: 45px;
  min-width: 45px;
  padding: 0 !important;
}
.basic-inp-wrap.single .basic-inp {
  text-align: center;
}

/* Type */
.basic-inp-wrap.line {
  padding: 0;
  background-color: var(--bg-clr2);
}
.basic-inp-wrap.line::before {
  border: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--line-clr3);
  border-radius: 0;
}
.basic-inp-wrap.line:not(:has(input[readonly], input:disabled)):focus-within {
  padding: 0;
}
.basic-inp-wrap.line:not(:has(input[readonly], input:disabled)):focus-within::before {
  border-left: 0;
  border-right: 0;
  border-top-color: transparent;
}
.basic-inp-wrap.line:has(input:disabled), .basic-inp-wrap.line:has(input[readonly]) {
  background-color: var(--bg-clr2);
}
.basic-inp-wrap.line .basic-inp {
  height: 42px;
}
.basic-inp-wrap.line .txt {
  font-size: 12px;
  line-height: 16px;
  color: var(--cap-clr);
}

.basic-inp-wrap.type-s {
  padding: 0 10px;
}
.basic-inp-wrap.type-s .basic-inp {
  height: 38px;
  font-size: 14px;
  line-height: 16px;
}

/* Variable */
.basic-inp-wrap .basic-btn {
  width: auto;
  height: auto;
  min-width: fit-content;
  padding: 7px 16px;
  font-size: 14px;
  line-height: 16px;
  border-radius: 10px;
}
.basic-inp-wrap .vitualKeyCheck {
  height: auto;
  max-height: 43px;
  margin: 0;
}
.basic-inp-wrap .btn-mouse,
.basic-inp-wrap .icon-mouse,
.basic-inp-wrap .icon-mouse02 {
  width: 25px;
  height: 36px;
  margin: 0;
  background-position: center !important;
}

/*----------------------------------------*\
  || Basic Label Wrap
\*----------------------------------------*/
.basic-label-wrap {
  display: flex;
  align-items: center;
  gap: 10px 15px;
  width: 100%;
  max-width: 910px;
  margin: auto;
}
.basic-label-wrap + .basic-label-wrap {
  margin-top: 16px;
}
.basic-label-wrap .basic-label {
  display: flex;
  align-items: center;
  min-width: 100px;
  height: 45px;
  font-size: 16px;
  line-height: 19px;
  color: var(--cap-clr);
}

.basic-label {
  min-width: 120px;
  font-size: 14px;
  line-height: 18px;
  line-height: var(--tit-clr);
}

@media (max-width: 768px) {
  .basic-label-wrap {
    flex-wrap: wrap;
  }
  .basic-label-wrap .basic-label {
    height: auto;
  }
  .basic-inp-wrap {
    min-width: auto;
  }
}
/*----------------------------------------*\
  || Basic Inp Dash / Dot
\*----------------------------------------*/
.basic-inp-wrap:has(+ .basic-inp-dash) {
  min-width: auto;
}

.basic-inp-dash {
  width: 12px;
  height: 2px;
  min-width: 12px;
  margin: 0 10px;
  background-color: var(--line-clr3);
}

.basic-inp-dot-wrap {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 50px 0 10px;
}
.basic-inp-dot-wrap.type-s {
  gap: 16px;
  margin-left: 0;
}
.basic-inp-dot-wrap.type-s .basic-inp-dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
}
.basic-inp-dot-wrap .basic-inp-dot {
  width: 16px;
  height: 16px;
  min-width: 16px;
  background-color: var(--line-clr3);
  border-radius: 50%;
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.chk-out {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* form required 체크시 사용 */
.formRequired {
  border: 1px solid var(--neg-clr) !important;
}

/*----------------------------------------*\
  || Input Area
\*----------------------------------------*/
.i-wid .input-area,
.i-cwid .input-area {
  width: 285px;
}

.i-inpW .input-area {
  width: 300px;
}

/*----------------------------------------*\
  || Input Basic
\*----------------------------------------*/
input[type=password] {
  padding: 1px 40px 0 10px;
  height: 45px;
  letter-spacing: 1px;
  font-size: 16px;
}

.input-box {
  width: 100%;
}

.input-basic-box {
  display: flex;
  border: 1px solid var(--disable-clr);
  max-width: 400px;
  height: 45px;
  align-items: center;
  padding: 10px;
}
.input-basic-box label {
  font-size: 12px;
  width: 65px;
  margin-right: 10px;
}
.input-basic-box input {
  flex: 1;
}

.input-basic,
.select-basic {
  width: 100%;
  max-width: 400px;
  height: 45px;
  line-height: 45px;
  border: 1px solid var(--line-clr3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--bg-clr2);
  padding: 0 10px;
  font-size: 16px;
  border-radius: 10px;
}
.input-basic.disable, .input-basic.readonly,
.select-basic.disable,
.select-basic.readonly {
  background-color: var(--disable-clr2);
  border-color: var(--disable-clr2);
  color: var(--cap-clr);
  cursor: default;
}
.input-basic.xxxs,
.select-basic.xxxs {
  max-width: 70px;
}
.input-basic.xxss,
.select-basic.xxss {
  max-width: 90px;
}
.input-basic.xxs,
.select-basic.xxs {
  max-width: 124px;
}
.input-basic.xs,
.select-basic.xs {
  max-width: 150px;
}
.input-basic.sm,
.select-basic.sm {
  max-width: 200px;
}
.input-basic.md,
.select-basic.md {
  max-width: 300px;
}
.input-basic.w167,
.select-basic.w167 {
  max-width: 167px !important;
}
.input-basic.w170,
.select-basic.w170 {
  max-width: 170px !important;
}
.input-basic.max170,
.select-basic.max170 {
  max-width: 170px;
}
.input-basic.max185,
.select-basic.max185 {
  max-width: 185px;
}
.input-basic.w227,
.select-basic.w227 {
  max-width: 227px !important;
}
.input-basic.w270,
.select-basic.w270 {
  max-width: 270px !important;
}
.input-basic.w285,
.select-basic.w285 {
  max-width: 285px;
}
.input-basic.w340,
.select-basic.w340 {
  max-width: 340px;
}
.input-basic.w410,
.select-basic.w410 {
  max-width: 410px;
}
.input-basic.w195,
.select-basic.w195 {
  max-width: 195px;
}
.input-basic.w290,
.select-basic.w290 {
  max-width: 290px !important;
}
.input-basic.w525,
.select-basic.w525 {
  max-width: 525px !important;
}
.input-basic.w115,
.select-basic.w115 {
  max-width: 115px !important;
}
.input-basic.w930,
.select-basic.w930 {
  max-width: 930px !important;
}
.input-basic.w380,
.select-basic.w380 {
  max-width: 380px;
}
.input-basic.w245,
.select-basic.w245 {
  max-width: 245px;
}
.input-basic.w400,
.select-basic.w400 {
  max-width: 400px !important;
}
.input-basic.w-auto,
.select-basic.w-auto {
  max-width: 50%;
}

.input-basic:has(+ .vitualKeyCheck) {
  padding-right: 40px;
}

/* 보안키패드 컬러 적용 */
.input-basic[style*=background-color][nppfs-keypad-uuid] {
  background-color: #e9f2ff !important;
  border-color: var(--pos-clr);
  pointer-events: auto;
}

.input-basic::placeholder, .input-basic:-ms-input-placeholder, .input-basic::-ms-input-placeholder, .input-basic::-moz-placeholder {
  color: var(--cap-clr);
}
.input-basic.w-jumin {
  max-width: 270px;
  margin-right: 10px;
}
.input-basic.w-jumin2 {
  max-width: 187px;
}
.input-basic.w-bnum {
  max-width: 175px;
}
.input-basic.w-lifetime01 {
  max-width: 60px;
  margin-right: 0;
}
.input-basic.w-lifetime02 {
  max-width: 314px;
}
.input-basic.pass.merge-icon {
  margin-right: 0;
}
.input-basic.pass.merge-icon + .vitualKeyCheck .icon-mouse {
  margin-left: -30px;
}
.input-basic.input-won {
  padding-right: 33px;
  text-align: right;
}
.input-basic.input-won::placeholder {
  text-align: left;
}
.input-basic.input-won.style01 {
  margin-left: -20px;
}
.input-basic.phone {
  max-width: 327px;
}
.input-basic.payinfo {
  width: 78px;
  height: 30px;
  margin: 0 5px;
  background: #efefef;
  border: 1px solid #e60012;
  font-size: 16px;
  text-align: center;
}

.input-active {
  border-color: var(--body-clr);
}

.input-won ~ .txt {
  margin-left: -42px;
  line-height: 45px;
  top: 0;
  right: 10px;
  color: var(--cap-clr);
  font-size: 16px;
}
.input-won ~ .txt.type02 {
  margin-left: -52px;
}

.select-basic {
  color: var(--body-clr);
  background: var(--bg-clr2) url(/img/common/icon_select_333.png) no-repeat right 10px center/12px;
}
.select-basic.w180 {
  max-width: 180px;
}
.select-basic.phone {
  max-width: 155px;
  margin: 0 0 0 9px;
}

.select-active {
  color: var(--body-clr);
  border-color: var(--body-clr);
}

.input-mouse {
  background: var(--bg-clr2) url(/img/common/icon_mouse.png) no-repeat right 10px center/16px;
}

.vitualKeyCheck {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 45px;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}
.lon-item-list ~ .vitualKeyCheck {
  vertical-align: top;
}

.space-modi .vitualKeyCheck ~ .trn-notice-i-list {
  line-height: 1.2;
}
.space-modi .radio-box-wrap .radio-box {
  margin-top: 0;
}

/*----------------------------------------*\
  || Input www
\*----------------------------------------*/
.input-www {
  background: var(--bg-clr2) url(/img/common/icon_www.png) no-repeat right 10px center/13px;
}
.input-www::placeholder {
  text-align: left;
}
.input-www.input-basic {
  padding-right: 30px;
  text-align: right;
}

/*----------------------------------------*\
  || Btn mouse / Icon mouse
\*----------------------------------------*/
.btn-mouse {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 45px;
  margin-left: -40px;
  vertical-align: bottom;
  border: 1px solid red;
  opacity: 0;
  cursor: pointer;
}
.btn-mouse:checked {
  background: url(/img/common/icon_home.png) 0/16px 24px no-repeat;
}
.btn-mouse:checked + i {
  background: url(/img/common/icon_keyboard.png) 0/24px 19px no-repeat;
}

.chk-basic:focus ~ .icon-chk,
.btn-mouse:focus + i {
  outline: 1px dashed #000;
  outline: -webkit-focus-ring-color auto 5px;
}

.icon-mouse,
.icon-mouse02 {
  width: 24px;
  height: 24px;
  margin-left: -40px;
  vertical-align: bottom;
  opacity: 1;
  background: url("/img/common/icon/icon_mouse.png") no-repeat center/24px;
  cursor: pointer;
}

.icon-mouse02 {
  margin-left: -30px;
}

.btn-mouse-checkbox {
  width: 30px;
  height: 45px;
  margin-left: -40px;
  position: absolute;
  background: url(/img/common/icon_mouse.png) 0/16px 24px no-repeat;
}

/*----------------------------------------*\
  || Date Basic
\*----------------------------------------*/
.date-box2 {
  display: inline-flex;
  flex-wrap: wrap;
}

.date-basic2 {
  width: 186px;
  background: var(--bg-clr2) url(/img/common/icon_date.png) no-repeat right 10px center/19px;
}

.datemid {
  display: inline-block;
  min-width: 26px;
  line-height: 45px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--body-clr);
  vertical-align: middle;
}

.datemid0 {
  display: inline-block;
  width: 0;
  line-height: 45px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--body-clr);
  vertical-align: middle;
}

.datemid02 {
  display: inline-block;
  width: 27px;
  line-height: 45px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--body-clr);
}

.accmid {
  float: left;
  width: 26px;
  line-height: 45px;
  text-align: center;
  font-weight: 400;
  font-size: 18px;
  color: var(--body-clr);
  vertical-align: middle;
}

/*----------------------------------------*\
  || Input Timer
\*----------------------------------------*/
.input-timer-wrap {
  position: relative;
  width: 525px;
  margin-right: 10px;
}
.input-timer-wrap .timer {
  position: absolute;
  top: 0;
  right: -10px;
}

/*----------------------------------------*\
  || Input Phone
\*----------------------------------------*/
.input-phone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.input-phone:has(+ .notice-i-list) {
  margin-bottom: 10px;
}
.input-phone .input-basic {
  flex: 2;
}
.input-phone .timer {
  min-width: 76px;
  margin-left: -87px;
  padding: 0 0 0 22px;
  font-size: 16px;
  color: var(--neg-clr);
}
.input-phone .btn-sm-wh {
  flex: 1;
}

/*----------------------------------------*\
  || 자동납부 변경신청
\*----------------------------------------*/
.input-formbox {
  margin-top: 28px;
  color: #666;
  font-size: 16px;
  line-height: 36px;
}

/*----------------------------------------*\
  || Input State
\*----------------------------------------*/
.text-basic {
  width: 100%;
  height: auto;
  min-height: 100px;
  max-width: 400px;
  padding: 11px 10px;
  border: 1px solid var(--disable-clr);
  background-color: var(--bg-clr2);
  resize: vertical;
  font-size: 14px;
  line-height: 1.2em;
  text-align: left;
}
.text-basic.readonly, .text-basic.disable, .text-basic.error {
  resize: none;
}

.algo {
  padding: 170px 0 40px;
}

.success {
  border-color: var(--main-clr);
}

.error {
  background-color: #faeaea;
  border-color: var(--neg-clr);
  color: var(--neg-clr);
}
.error::placeholder, .error:-ms-input-placeholder, .error::-ms-input-placeholder, .error::-moz-placeholder {
  color: var(--neg-clr);
}

input[type=text].disable,
input[type=text].readonly {
  background-color: var(--disable-clr2) !important;
  border-color: var(--disable-clr2) !important;
  color: var(--cap-clr) !important;
  cursor: default;
}

.input-date {
  position: relative;
}
.input-date span {
  position: absolute;
}

.in-small {
  width: 90px;
  margin-left: 20px;
  text-align: right;
}
.in-small::placeholder, .in-small:-ms-input-placeholder, .in-small::-ms-input-placeholder, .in-small::-moz-placeholder {
  color: var(--cap-clr);
}

/*----------------------------------------*\
  || Editor
\*----------------------------------------*/
.editor {
  margin-top: 20px;
  padding: 23px 40px 0;
  border-top: 1px solid var(--disable-clr);
  font-size: 16px;
  line-height: 23px;
}
.editor * {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.2px;
}
.editor th,
.editor td {
  border: 1px solid #000 !important;
}
.editor .non-tbl th,
.editor .non-tbl td {
  border: 0 !important;
}
.editor.type02 {
  margin-top: 35px;
  padding-top: 40px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .input-basic {
    padding: 0 13px !important;
    line-height: 45px;
  }
  html.responsive .input-basic.input-won {
    padding-right: 47px !important;
    line-height: 39px;
  }
  html.responsive .input-basic,
  html.responsive .select-basic {
    max-width: none;
    font-size: 13px;
    padding: 0 13px;
    margin-right: 0;
  }
  html.responsive .select-basic.phone {
    max-width: 155px;
  }
  html.responsive .text-basic {
    font-size: 16px;
    max-width: none;
    padding: 10px 3.7%;
    resize: none;
  }
  html.responsive .date-box2 .input-area {
    max-width: 83%;
  }
  html.responsive .date-inq .date-back-wrap {
    width: 100%;
  }
  html.responsive .date-inq .date-back-wrap .date-basic2 {
    width: calc(100% - 24px);
    margin-left: 0px;
  }
  html.responsive .date-inq .date-basic2 {
    width: calc(100% - 24px);
    margin-left: 24px;
    margin-bottom: 7px;
  }
  html.responsive .datemid {
    display: inline-block;
    min-width: 24px;
    line-height: 45px;
    font-size: 16px;
  }
  html.responsive .datemid0 {
    display: inline-block;
    width: 24px;
    line-height: 45px;
    font-size: 16px;
  }
  html.responsive .btn-show-list {
    display: inline-block;
    border: 1px solid var(--body-clr);
    padding: 8px 8.52%;
    color: var(--body-clr);
    font-size: 15px;
    width: auto;
    height: auto;
  }
  html.responsive .btn-show-list.option {
    width: 100%;
    color: #363636;
    border: 1px solid #bbb;
  }
  html.responsive .btn-show-list.option span {
    display: inline-block;
    vertical-align: middle;
  }
  html.responsive .btn-show-list.option .icon-list {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    background: url(/img/common/icon_list.png) no-repeat center/contain;
  }
  html.responsive .btn-show-list::before, html.responsive .btn-show-list::after {
    display: none;
  }
  html.responsive .m-input span,
  html.responsive .m-input02 span {
    margin-left: 9px;
  }
  html.responsive .m-input .input-basic {
    max-width: calc(50% - 16px);
  }
  html.responsive .m-input .pass {
    margin-right: 0;
  }
  html.responsive .m-input .btn-sm-wh {
    width: 100%;
    margin-top: 10px;
  }
  html.responsive .m-input02 .input-basic,
  html.responsive .m-input02 .select-basic {
    max-width: 26%;
  }
  .input-won ~ .txt {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  html.responsive .select-basic.phone {
    max-width: none;
  }
  .select-basic.w-auto {
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 8px 0 !important;
  }
}
/*----------------------------------------*\
  || Details List
\*----------------------------------------*/
.details-list {
  display: grid;
  grid-template-columns: max-content auto;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 8px;
  width: 100%;
}
.details-list__name {
  font-size: 13px;
  line-height: 20px;
  color: var(--body-clr2);
}
.details-list__value {
  font-size: 14px;
  line-height: 20px;
  color: var(--body-clr);
  text-align: right;
}
.details-list__value em {
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  color: var(--main-clr);
}

/*----------------------------------------*\
  || Under Line List
\*----------------------------------------*/
.under-line-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.under-line-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-clr3);
}
.under-line-list > li:first-child {
  padding-top: 0;
}
.under-line-list > li .txt {
  font-size: 16px;
  line-height: 19px;
}

@media (max-width: 768px) {
  .under-line-list > li {
    padding: 10px 0;
  }
  .under-line-list > li .txt {
    font-size: 14px;
    line-height: 18px;
  }
}
/*----------------------------------------*\
  || Number Circle List
\*----------------------------------------*/
.number-circle-list {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: 10px;
}
.number-circle-list.grey li {
  color: var(--cap-clr);
}
.number-circle-list.grey li::before {
  background-color: var(--disable-clr);
}
.number-circle-list li {
  counter-increment: line-number;
  padding-left: 25px;
  font-size: 14px;
  line-height: 18px;
  text-indent: -25px;
  color: #666;
}
.number-circle-list li::before {
  width: 17px;
  height: 17px;
  content: counter(line-number);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  margin-right: 8px;
  background-color: var(--tit-clr);
  border-radius: 50%;
  font-size: 10px;
  color: var(--bg-clr2);
  text-indent: 0;
}

/*----------------------------------------*\
  || Message List
\*----------------------------------------*/
.msg-list {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: 10px;
}
.msg-list.grey li {
  color: var(--cap-clr);
}
.msg-list li {
  counter-increment: line-number;
  padding-left: 25px;
  font-size: 14px;
  line-height: 18px;
  text-indent: -25px;
  color: #666;
}
.msg-list li::before {
  width: 17px;
  height: 17px;
  background: url("/img/common/icon/icon_mark.png") no-repeat center center;
  background-size: contain;
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  margin-top: -1px;
  margin-right: 8px;
  border-radius: 50%;
  text-indent: 0;
  vertical-align: middle;
}

/*----------------------------------------*\
  || Notice List New / 알아두세요 New
\*----------------------------------------*/
.notice-title-new {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 60px;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  color: var(--tit-clr);
}
.notice-title-new::before {
  width: 20px;
  height: 20px;
  background: url("/img/common/icon/icon_info02.png") no-repeat center center;
  background-size: contain;
  content: "";
}
.notice-title-new + ul {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #d2d4d4;
}

.notice-list-new.type-bg {
  padding: 20px;
  background-color: #fcfcfc;
  border-radius: 10px;
}
.notice-list-new li {
  padding-left: 10px;
  font-size: 14px;
  line-height: 16px;
  color: var(--cap-clr);
  text-indent: -10px;
}
.notice-list-new li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-bottom: 2px;
  margin-right: 6px;
  background-color: #d9d9d9;
  border-radius: 50%;
  vertical-align: middle;
}
.notice-list-new li + li {
  margin-top: 15px;
}
.notice-list-new li a {
  display: inline;
}
.notice-list-new li small {
  font-size: 12px;
  color: inherit;
}
.notice-list-new li .btn-tooltip {
  width: 18px;
  height: 18px;
  display: inline-block;
  text-indent: 0;
}

/*----------------------------------------*\
  || Mini Link List
\*----------------------------------------*/
.mini-link-list li + li {
  margin-top: 10px;
}
.mini-link-list li a {
  display: inline;
  font-size: 14px;
  line-height: 16px;
  color: var(--cap-clr);
}
.mini-link-list li a:hover, .mini-link-list li a:focus {
  border-bottom: 2px solid var(--main-clr);
  font-weight: 700;
  color: var(--main-clr);
}

/*----------------------------------------*\
  || Simple Link List
\*----------------------------------------*/
.simple-link-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.simple-link-list .line {
  width: 1px;
  height: 14px;
  background-color: var(--disable-clr);
}

.simple-link-item {
  font-size: 14px;
  line-height: 16px;
  color: var(--tit-clr);
}
.simple-link-item:hover {
  text-decoration: underline;
}

/*----------------------------------------*\
  || Column Line List
\*----------------------------------------*/
.column-line-list {
  display: flex;
  align-items: center;
  width: 100%;
}
.column-line-list .column-line-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 0 10px;
}
.column-line-list .column-line-item:first-child {
  padding-left: 0;
}
.column-line-list .column-line-item:last-child {
  padding-right: 0;
}
.column-line-list .column-line-item + li {
  border-left: 1px solid var(--line-clr3);
}
.column-line-list .column-line-item .text {
  font-size: 16px;
  line-height: 19px;
  color: var(--tit-clr);
}
.column-line-list .column-line-item .text02 {
  font-size: 18px;
  line-height: 21px;
  color: var(--cap-clr);
}
.column-line-list .column-line-item .img {
  width: auto;
  height: 80px;
  margin-bottom: 14px;
}
.column-line-list .column-line-item .arrow-link {
  font-weight: 700;
}

@media (max-width: 768px) {
  .column-line-list {
    gap: 25px;
    flex-direction: column;
  }
  .column-line-list .column-line-item {
    width: 100%;
    padding: 0;
  }
  .column-line-list .column-line-item + li {
    padding-top: 25px;
    border: 0;
    border-top: 1px solid var(--line-clr3);
  }
}
/*----------------------------------------*\
  || Column Arrow List
\*----------------------------------------*/
.column-arrow-list {
  display: flex;
  align-items: normal;
  justify-content: center;
  gap: 40px;
  width: 100%;
}
.column-arrow-list .column-arrow-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  width: 80px;
  white-space: nowrap;
}
.column-arrow-list .column-arrow-item:nth-child(even) {
  width: 16px;
  height: 16px;
  margin-top: 32px;
}
.column-arrow-list .column-arrow-item .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: var(--main-clr);
  border-radius: 50%;
  font-size: 12px;
  line-height: 14px;
  color: var(--bg-clr2);
}
.column-arrow-list .column-arrow-item .text {
  font-size: 18px;
  line-height: 27px;
  color: var(--cap-clr);
  text-align: center;
}
.column-arrow-list .column-arrow-item .text small {
  display: block;
  font-size: 14px;
  line-height: 21px;
  color: inherit;
}
.column-arrow-list .column-arrow-item .img {
  width: auto;
  height: 80px;
  margin-bottom: 8px;
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
.notice-list-none li::before {
  display: none;
}

/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  || Acco list
\*----------------------------------------*/
/* 신규 계좌선택 리스트 */
.acco-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #ccc;
  margin-bottom: 10px;
  padding: 20px;
}
.acco-item.on {
  border-color: var(--main-clr);
}
.acco-item .acco-box {
  margin-left: 20px;
}
.acco-item .acco-name {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.acco-item .acco-money {
  align-self: end;
  font-size: 18px;
}

/*----------------------------------------*\
  || Bank list
\*----------------------------------------*/
.bank-list {
  margin-top: 20px;
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.bank-list li a {
  display: block;
  font-size: 14px;
  padding: 15px 10px;
  border: 1px solid var(--disable-clr);
  width: 100px;
  text-align: center;
  border-radius: 15px;
}
.bank-list li img {
  display: block;
  margin: auto auto 15px;
  width: 30px;
}

/*----------------------------------------*\
  || List Style 2채널 인증
\*----------------------------------------*/
.list-style {
  color: #666;
}
.list-style li {
  color: inherit;
  line-height: 1.2em;
  padding-bottom: 10px;
}
.list-style li::before {
  content: "";
  float: left;
  margin-right: 10px;
  margin-top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #999;
}
.list-style.type01 li {
  font-size: 16px;
}
.list-style.type02 li {
  margin-left: 20px;
  font-size: 14px;
}
.list-style.type02 li::before {
  float: none;
}
.list-style.type02 li .txt-bold {
  color: #666;
}
.list-style.table-list {
  padding: 10px 0;
}
.list-style.table-list li {
  margin-top: 5px;
  padding-left: 15px;
  line-height: 23px;
  padding-bottom: 0;
  color: #666;
}
.list-style.table-list li:first-child {
  margin-top: 0;
}
.list-style.table-list li::before {
  margin-left: -15px;
  margin-top: 9px;
}

.checked-txt {
  padding: 10px 10px 10px 25px;
  background: url("/img/common/checked_icon.png") no-repeat left center;
  display: block;
}
.checked-txt.t-disable {
  background: transparent;
  color: var(--cap-clr);
}

/*----------------------------------------*\
  || Notice List
\*----------------------------------------*/
.notice-list02 > li {
  position: relative;
  margin-bottom: 7px;
  padding-left: 18px;
  line-height: 1.6;
  font-size: 13px;
  color: var(--body-clr);
}
.notice-list02 > li::before {
  position: absolute;
  content: "";
  top: 7px;
  left: 6px;
  width: 4px;
  height: 4px;
  background-color: var(--main-clr);
  border-radius: 50%;
}

/*----------------------------------------*\
  || List Style01
\*----------------------------------------*/
.list-style01 {
  margin-top: 8px;
}
.list-style01 li {
  padding-left: 0 !important;
  margin-top: 2px;
  line-height: 1.5 !important;
}
.list-style01 li::before {
  display: none;
}

/*----------------------------------------*\
  || Notice List Wrap
\*----------------------------------------*/
.notice-list-wrap {
  position: relative;
  padding-top: 30px;
  background-color: var(--bg-clr2);
}
.notice-list-wrap:first-child {
  padding-top: 0;
}
.notice-list-wrap.type01 {
  padding-top: 20px;
}
.notice-list-wrap.type02 {
  background-color: transparent;
}
.notice-list-wrap.type02 .notice-list {
  background: transparent;
}
.notice-list-wrap.type02 .notice-list li {
  padding-left: 0;
}
.notice-list-wrap.type02 .notice-list li::before {
  display: none;
}
.notice-list-wrap + .tab-basic.pt50 {
  margin-top: -50px;
}
.notice-list-wrap .info-title,
.notice-list-wrap .notice-i-list-wrap, .notice-list-wrap + .tab-basic .pc-tab, .notice-list-wrap + .tab-basic + .tab-style01 {
  margin-top: 0;
}
.notice-list-wrap .p {
  margin-bottom: 10px;
  line-height: 23px;
}
.notice-list-wrap .notice-i-list {
  display: flex;
  gap: 0;
  color: var(--body-clr);
  font-size: 14px;
  font-weight: 500;
}
.notice-list-wrap .sub-text {
  font-size: 14px;
}

.sub-text + .notice-list {
  margin-top: 10px;
}

.product-view + .notice-list-wrap,
.table-wrap01 + .notice-list-wrap {
  margin-top: 20px;
}

.tts + .notice-list-wrap,
.info-table-area + .notice-list-wrap {
  margin-top: 40px;
}

.notice-list-wrap + .tab-basic,
.notice-list-wrap + .search-select-area,
.notice-list-wrap + .search-table-area,
.notice-list-wrap + .cach-content-wrap,
.notice-list-wrap + .info-table-area,
.notice-list-wrap + .slide-box-area,
.notice-list-wrap + .slide-box-area.type02,
.notice-list-wrap + .ui-accordion-list,
.notice-list-wrap + .notice-area-wrap,
.notice-list-wrap + .document-area,
.notice-list-wrap + .dot-list-wrap,
.notice-list-wrap + .login-box-wrap,
.notice-list-wrap + .battery-confirm,
.notice-list-wrap + .table-wrap01 {
  margin-top: 35px;
}

.notice-list-wrap02 {
  margin-top: 0;
}

.notice-list-wrap02 + .dot-list-wrap {
  margin-top: 35px;
}

.notice-list-wrap03 {
  margin-top: 16px;
}

.notice-list-wrap03 + .info-table-area {
  margin-top: 45px;
}

.notice-list-wrap04 {
  margin-left: 30px;
  padding-top: 31px;
}

/*----------------------------------------*\
  || Notice I List Wrap
\*----------------------------------------*/
.notice-i-list-wrap {
  margin-top: 14px;
}
.notice-i-list-wrap + .notice-i-list-wrap {
  margin-top: 5px;
}

td .notice-i-list-wrap {
  margin: 14px 0 -4px;
}

.notice-i-list {
  display: block;
  font-size: 14px;
  color: #666;
  line-height: 19px;
}
.notice-i-list::before {
  width: 13px;
  height: 13px;
  background: url("/img/common/notice_icon_m.png") no-repeat center center;
  background-size: contain;
  content: "";
  display: inline-block;
  margin-right: 5px;
  transform: translateY(2px);
  filter: grayscale(1) opacity(0.7);
}
.notice-i-list.txt-333.uif-mobile-type01 {
  padding-left: 0;
}
.notice-i-list.txt-333.uif-mobile-type01::before {
  margin-top: 0;
}
.notice-i-list span {
  line-height: inherit;
}

input ~ .notice-i-list {
  margin-left: 15px;
}
input ~ .notice-i-list.trn-notice-i-list {
  margin-left: 10px;
}
input ~ .notice-i-list.trn-notice-i-list.type02 {
  margin-left: 35px;
}

.trn-rowbox + .notice-i-list {
  margin-top: 12px;
}

.tab-txt-list .notice-i-list {
  font-size: 16px;
}

/*----------------------------------------*\
  || Notice List
\*----------------------------------------*/
.notice-list.sm li {
  padding-bottom: 10px;
  font-size: 14px;
}
.notice-list.option01 {
  margin-bottom: 20px;
}
.notice-list.option01 li {
  padding-bottom: 10px;
}
.notice-list.none li {
  padding-left: 0;
}
.notice-list.none li:before {
  display: none;
}
.notice-list.nolist-type2 {
  padding: 4px 0 7px;
}
.notice-list.nolist-type2 li {
  font-size: 14px;
}
.notice-list.lifetime-info {
  padding: 30px 0;
}
.notice-list.lifetime-info::after {
  position: absolute;
  content: "";
  top: calc(50% - 55px);
  right: 30px;
  width: 550px;
  height: 130px;
  border: 5px solid #eeeff1;
  background: url("/img/common/img_lftmacc_info.jpg") no-repeat center/contain;
}
.notice-list + .docu-table-area {
  margin-top: 20px;
}
.notice-list li .arrow {
  float: left;
  line-height: 17px;
}
.notice-list li .arrow:after {
  content: "";
  float: left;
  width: 24px;
  height: 14px;
  background: url(/img/common/icon_rtarrow.png) no-repeat center center;
}
.notice-list li .arrow:after:first-child:after {
  display: none;
}
.notice-list li .notice-i-list {
  font-weight: 400;
}
.notice-list li .notice-i-list::before {
  width: 18px;
  height: 25px;
  background: url(/img/common/notice_icon_m.png) no-repeat left center;
  background-size: 13px;
  background-color: transparent;
  display: inline-block;
  margin-left: 0;
  vertical-align: middle;
  border-radius: inherit;
}
.notice-list li:last-child {
  padding-bottom: 0;
}
.notice-list .table .table-cell {
  vertical-align: middle !important;
}
.notice-list .font-088 {
  font-size: 14px;
  line-height: 1.3;
  padding-top: 10px;
}
.notice-list .notice-link {
  display: inline-block;
  font-weight: 500;
  text-decoration: underline;
}
.notice-list .notice-link.type02 {
  margin-left: 7px;
}

.notice-list2 {
  width: 1200px;
  margin: 0 auto;
}
.notice-list2 li {
  position: relative;
  font-size: 14px;
  line-height: 1.2;
  padding-bottom: 15px;
  padding-left: 15px;
}
.notice-list2 li span {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  border: 1px solid #666;
  border-radius: 50%;
  font-size: 12px;
  color: #666;
}

.notice-list-sm {
  font-size: 11px;
  color: var(--neg-clr);
  padding-top: 10px;
  padding-left: 20px;
}

.notice-listtext {
  font-size: 14px;
  line-height: 23px;
  padding-left: 15px;
}
.notice-listtext::before {
  content: "";
  float: left;
  margin: 7px 0 0 -12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #999;
}

/* 기본 dot style */
.notice-list {
  width: 100%;
  margin: 0 auto;
  background: var(--bg-clr2);
  /* number style */
  /* Dash style */
  /* 중첩 style : text-indent */
}
.notice-list .notice-list {
  padding: 10px;
}
.notice-list > li {
  margin-top: 5px;
  color: #666;
  font-size: 14px;
  line-height: 23px;
  padding-left: 15px;
  font-weight: 400;
}
.notice-list > li:first-child {
  margin-top: 0;
}
.notice-list > li::before {
  content: "";
  float: left;
  margin-left: -15px;
  margin-top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--cap-clr);
}
.notice-list.decimal > li {
  margin-left: 15px;
  padding-left: 0;
  list-style: decimal;
}
.notice-list.decimal > li::before {
  display: none;
}
.notice-list a {
  display: inline-block;
}
.notice-list li strong {
  color: var(--body-clr);
}
.notice-list.type-N > li {
  counter-increment: line-number;
}
.notice-list.type-N > li::before {
  content: counter(line-number) ". ";
  margin-top: 0 !important;
  background: none !important;
  width: 13px !important;
}
.notice-list.type-D li::before {
  content: "-";
  margin-top: 0 !important;
  background: none !important;
  width: 9px !important;
}
.notice-list .indent {
  padding-left: 7px;
  color: inherit;
  font-size: inherit;
  text-indent: -8px;
  line-height: inherit;
}

.notice-list-in li {
  padding-left: 0;
}
.notice-list-in li:first-child {
  margin-top: 5px;
}
.notice-list-in li::before {
  display: none;
}

/*----------------------------------------*\
  || Number List
\*----------------------------------------*/
.number-list.type01 {
  padding-left: 20px;
}
.number-list.type01 li {
  text-indent: -17px;
  line-height: 22px;
}
.number-list li {
  font-size: 16px;
  line-height: 1.2;
  padding-bottom: 15px;
}
.number-list li:last-child {
  padding-bottom: 0;
}

/*----------------------------------------*\
  || List Date
\*----------------------------------------*/
.list-date {
  float: right;
  margin-top: 10px;
}
.list-date > span {
  font-size: 11px;
}
.list-date.line-height li {
  line-height: 2.7;
}
.list-date li span:first-child {
  font-weight: 700 !important;
}

.txt-mid {
  margin: 0 5px;
}

/*----------------------------------------*\
  || Month List
\*----------------------------------------*/
.month-list span {
  float: left;
}
.month-list span::after {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  float: left;
  background: #000;
  margin: 0 12px;
}
.month-list span:first-child::after {
  display: none;
}

/*----------------------------------------*\
  || Trn Notice I List
\*----------------------------------------*/
.trn-notice-i-list {
  display: inline-block;
  line-height: 25px;
}
.trn-notice-i-list::before {
  margin-right: 5px;
}
.trn-notice-i-list ~ .date-box2 {
  margin-right: 10px;
}
.trn-notice-i-list.mobile-type01 {
  margin-left: 30px;
}

.trn-notice-i-list02 {
  line-height: 40px;
  white-space: nowrap;
  display: flex;
  margin-left: 10px;
}
.trn-notice-i-list02::before {
  height: 40px;
}

.trn-notice-i-list03 {
  line-height: 40px;
  white-space: nowrap;
  font-size: 14px;
}
.trn-notice-i-list03::before {
  height: 40px;
}

.trn-notice-i-list04 {
  display: flex;
  margin-top: 10px;
  white-space: nowrap;
  font-size: 14px;
}
.trn-notice-i-list04::before {
  height: 40px;
}

.trn-notice-i-list05 {
  display: flex;
}

input ~ .trn-notice-i-list {
  padding-top: 11px;
  margin-left: 10px;
}
input ~ .trn-notice-i-list05 {
  padding-left: 20px;
  margin: 10px 10px 0 0;
}

/*----------------------------------------*\
  || Dot List Wrap
\*----------------------------------------*/
.dot-list-wrap {
  width: 100%;
  border-top: 1px solid var(--body-clr);
}
.dot-list-wrap li {
  width: 50%;
  float: left;
  padding: 20px;
  font-size: 14px;
  border-bottom: 1px solid #efefef;
  border-right: 1px solid var(--disable-clr);
  min-height: 56px;
}
.dot-list-wrap li:nth-child(even) {
  border-right: none;
}
.dot-list-wrap li::before {
  content: "";
  margin-right: 10px;
  margin-top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #999;
  float: left;
}

/*----------------------------------------*\
  || Question List
\*----------------------------------------*/
.question-list li {
  display: flex;
  gap: 8px;
  margin-bottom: 50px;
  line-height: 24px;
}
.question-list li strong,
.question-list li p {
  line-height: 24px;
  font-size: 18px !important;
  font-weight: 500;
}
.question-list .radio-box-wrap label {
  font-size: 18px;
}
.question-list .radio-box-wrap .radio-box + .radio-box {
  margin-left: 30px;
}

/*----------------------------------------*\
  || Notice List Hyphen
\*----------------------------------------*/
.notice-list-hyphen > li {
  display: flex;
  gap: 3px;
  font-size: 14px;
}
.notice-list-hyphen > li:before {
  content: "-";
}
.notice-list-hyphen > li.notice-i-list::before {
  width: 18px;
  height: 16px;
  content: "";
  display: inline-block;
  background: url("/img/common/notice_icon_m.png") no-repeat left center;
  background-size: 13px;
  margin-left: -20px;
  padding-left: 15px;
  vertical-align: middle;
}
.notice-list-hyphen > li + li {
  margin-top: 5px;
}

/*----------------------------------------*\
  || List Result
\*----------------------------------------*/
.list-result li {
  display: inline-block;
  position: relative;
  padding-left: 13px;
  margin-left: 13px;
  font-size: 16px;
}
.list-result li:first-child {
  margin-left: 0;
  padding-left: 0;
}
.list-result li:first-child:before {
  background: none;
}
.list-result li:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--line-clr3);
}

/*----------------------------------------*\
  || Table Step / 인터넷 대출 절차 / 이용절차
\*----------------------------------------*/
.table-step > li {
  position: relative;
  float: left;
  width: 175px;
  height: 90px;
  margin-right: 10px;
  background: var(--cap-clr);
  text-align: center;
}
.table-step > li:after, .table-step > li:before {
  position: absolute;
  content: "";
  top: 50%;
  right: -10px;
  width: 0;
  height: 0;
  margin-top: -9px;
  border-top: 20px solid var(--cap-clr);
  border-left: 20px solid rgba(0, 0, 0, 0);
  transform: rotate(45deg);
  z-index: 1;
}
.table-step > li:before {
  right: -18px;
  margin-top: -16.4px;
  border-left: 35px solid rgba(0, 0, 0, 0);
  border-top: 35px solid var(--bg-clr2);
}
.table-step > li:last-child {
  margin-right: 0;
}
.table-step > li:nth-child(n+6) {
  margin-top: 10px;
}
.table-step > li:last-child:after, .table-step > li:last-child:before {
  display: none;
}
.table-step > li .num {
  font-weight: 500;
  font-size: 20px;
  color: var(--bg-clr2);
  margin-bottom: 4px;
}
.table-step > li .txt {
  font-size: 14px;
  color: var(--bg-clr2);
  line-height: 17px;
}

.table-step2.type01 {
  margin: 12px 0 -5px;
}
.table-step2.type01 > li {
  width: 182px;
}
.table-step2.type02 > li {
  margin-bottom: 100px;
}
.table-step2 > li {
  width: 152px;
  margin-bottom: 44px;
}

.table-step2 > li .num,
.table-step3 > li .num {
  padding-top: 16px;
}
.table-step2 .table .table-cell,
.table-step3 .table .table-cell {
  vertical-align: top;
}

.table-step-txt,
.table-step-txt2,
.table-step-txt3 {
  position: absolute;
  bottom: -22px;
  right: 0;
  left: 0;
  font-size: 14px;
}

.table-step-txt2 {
  bottom: -46px;
  line-height: 20px;
}

.table-step-txt3 {
  top: 100px;
  line-height: 1.5;
  word-break: keep-all;
}

.table-step3 > li {
  width: 152px;
}

.mStep.table-step > li {
  width: 150px;
}

.table-step03 {
  width: 100%;
}
.table-step03 + .table-step03 {
  margin-top: 20px;
}
.table-step03 .step-box {
  position: relative;
  display: inline-block;
  width: calc(25% - 13px);
  margin-right: 10px;
  text-align: center;
  vertical-align: top;
}
.table-step03 .step-box::before {
  position: absolute;
  content: "";
  right: -21px;
  margin-top: 29px;
  border-left: 35px solid rgba(0, 0, 0, 0);
  border-top: 35px solid var(--bg-clr2);
  transform: rotate(45deg);
  transform: -webkit-rotate(45deg);
  transform: -moz-rotate(45deg);
  transform: -o-rotate(45deg);
  transform: -ms-rotate(45deg);
  z-index: 1;
}
.table-step03 .step-box .text {
  margin-top: 7px;
  padding-bottom: 15px;
  font-size: 14px;
  line-height: 20px;
  word-break: keep-all;
}
.table-step03 .step-box .step {
  position: relative;
  height: 90px;
  padding: 16px 0 0 4px;
  background: #909090;
}
.table-step03 .step-box .step::after {
  position: absolute;
  content: "";
  top: 50%;
  right: -10px;
  width: 0;
  height: 0;
  border-left: 20px solid rgba(0, 0, 0, 0);
  border-top: 20px solid #909090;
  transform: rotate(45deg);
  transform: -webkit-rotate(45deg);
  transform: -moz-rotate(45deg);
  transform: -o-rotate(45deg);
  transform: -ms-rotate(45deg);
  margin-top: -9px;
  z-index: 1;
}
.table-step03 .step-box .step .num {
  font-weight: 500;
  font-size: 20px;
  color: var(--bg-clr2);
  margin-bottom: 4px;
}
.table-step03 .step-box .step .txt {
  font-size: 14px;
  color: var(--bg-clr2);
  line-height: 20px;
  word-break: keep-all;
}
.table-step03 .step-box:last-child .step {
  margin-right: 0;
}
.table-step03 .step-box:nth-child(4n)::before, .table-step03 .step-box:nth-child(4n) .step::after, .table-step03 .step-box:last-child::before, .table-step03 .step-box:last-child .step::after {
  display: none;
}

.dim-contents .table-step.pl40 {
  padding: 0 !important;
}
.dim-contents .table-step.pl40 .table {
  margin-bottom: 0 !important;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .notice-list-wrap + .table-wrap01 {
    margin-top: 0;
  }
  html.responsive .notice-list-wrap + .tab-basic, html.responsive .notice-list-wrap + .tab-basic.pt50 {
    margin-top: 0;
  }
  html.responsive .pc-tab-content .notice-list-wrap:first-child {
    padding-top: 15px;
  }
  html.responsive .notice-i-list-wrap {
    margin-top: 10px;
    padding: 0;
  }
  html.responsive .notice-i-list-wrap + .btn-area button {
    margin-bottom: 5px;
  }
  html.responsive .notice-i-list-wrap + .btn-area button + button {
    margin-top: 5px;
  }
  html.responsive .notice-i-list {
    margin-top: 10px;
    font-size: 12px;
  }
  html.responsive .notice-list.bg {
    background: var(--bg-clr2);
    padding: 30px 20px;
    margin-bottom: -30px;
  }
  html.responsive .notice-list li {
    padding: 0;
  }
  html.responsive .trn-notice-i-list.mobile-type01 {
    margin-left: 0;
  }
  html.responsive .dot-list-wrap {
    margin-top: 0;
    background-color: var(--bg-clr2);
  }
  html.responsive .dot-list-wrap li {
    position: relative;
    width: 100%;
    padding-left: 34px;
    line-height: 1.4;
    border-right: 0;
  }
  html.responsive .dot-list-wrap li::before {
    position: absolute;
    top: 21px;
    left: 20px;
  }
  html.responsive .warn-area {
    margin-top: 0;
    margin-bottom: 15px;
    background: none;
  }
  .table-step03 {
    margin-top: -5px;
  }
  .table-step03 > li {
    margin-top: 5px;
  }
  .table-step03 .step-box {
    width: 150px;
    min-height: 150px;
  }
  .table-step03 .step-box:first-child .step {
    margin-top: 0;
  }
  .table-step03 .step-box:nth-child(4n)::before, .table-step03 .step-box:nth-child(4n) .step::after {
    display: block;
  }
  .table-step03 .step-box:last-child::before, .table-step03 .step-box:last-child .step::after {
    display: none;
  }
  .table-step03 .step-box .step {
    margin-top: 20px;
  }
  html.responsive .notice-list li,
  ul .common-liststyle01 {
    font-size: 12px;
    line-height: 18px;
    padding-bottom: 6px;
    padding-left: 8px;
  }
  html.responsive .notice-list li::before,
  ul .common-liststyle01::before {
    margin-left: -8px;
    margin-top: 8px;
    width: 2px;
    height: 2px;
    background-color: var(--body-clr);
  }
  html.responsive .notice-list.decimal > li {
    margin-left: 8px;
    padding-left: 0;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Loading 01
\*----------------------------------------*/
#loading-dim {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.5);
}

#loading-box {
  width: 300px;
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  z-index: 9999;
}

#loading {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}

.loader {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 74px;
  z-index: 1;
  border: 25px solid var(--line-clr3);
  border-radius: 50%;
  border-top: 25px solid #ee0589;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

/*----------------------------------------*\
  || Loading 02 접속 대기 화면
\*----------------------------------------*/
.dim-white {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-clr2);
  z-index: 900;
  opacity: 0.6;
}

.loading-wrap {
  width: 600px;
  position: fixed;
  top: 50% !important;
  left: 50%;
  padding: 30px 60px;
  background: var(--bg-clr2);
  border: 2px solid var(--disable-clr);
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10000;
}
.loading-wrap span img {
  vertical-align: middle;
  margin-right: 5px;
}

.loading-bar-wrap {
  width: 100%;
  height: 20px;
  margin-bottom: 15px;
  border-radius: 10px;
  background: var(--disable-clr2);
  overflow: hidden;
}

.loading-bar {
  height: 100%;
  background: var(--pos-clr);
}

@media (max-width: 768px) {
  .loading-wrap {
    width: 80%;
    padding: 30px 20px;
  }
  .loading-wrap .flex2 {
    width: 100% !important;
    flex-direction: column;
  }
}
/*----------------------------------------*\
  || 팝업 리뉴얼
\*----------------------------------------*/
.common-layerpopup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 280px;
  width: 100%;
  max-width: 320px;
  padding: 24px 12px 12px;
  background-color: #fff;
  border-radius: 14px;
  outline: none;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.0784313725);
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%;
  z-index: 1000;
  will-change: auto;
  backface-visibility: hidden;
}
.common-layerpopup--system {
  width: 540px;
  max-width: none;
  padding: 20px 0 0;
  border-radius: 0;
}
.common-layerpopup__content {
  padding: 30px;
}
.common-layerpopup__title {
  margin-bottom: 25px;
  font-size: 28px;
  font-weight: 700;
  line-height: 130%;
  text-align: center;
}
.common-layerpopup__title small {
  font-size: 0.8em;
  font-weight: inherit;
  line-height: inherit;
}
.common-layerpopup__text {
  font-size: 15px;
  line-height: 150%;
  color: var(--cap-clr);
  word-break: auto-phrase;
}
.common-layerpopup__text + .common-layerpopup__text {
  margin-top: 8px;
}
.common-layerpopup__list {
  margin-top: 25px;
}
.common-layerpopup__list .name {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 120%;
}
.common-layerpopup__list .name:first-child {
  margin-top: 0;
}
.common-layerpopup__list .value {
  margin-top: 12px;
  font-size: 16px;
  line-height: 150%;
  color: var(--cap-clr);
  word-break: auto-phrase;
}
.common-layerpopup__close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 15px 30px;
  background-color: #373d5c;
}
.common-layerpopup__close-button {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

@media (max-width: 768px) {
  .common-layerpopup--system {
    min-width: 280px;
    width: 100%;
    max-width: 320px;
    padding: 0;
    border-radius: 0;
  }
  .common-layerpopup__content {
    padding: 30px 20px 28px;
  }
  .common-layerpopup__title {
    margin-bottom: 16px;
    font-size: 18px;
  }
  .common-layerpopup__text {
    font-size: 12px;
  }
  .common-layerpopup__list {
    margin-top: 18px;
  }
  .common-layerpopup__list .name {
    margin-top: 6px;
    font-size: 13px;
  }
  .common-layerpopup__list .value {
    margin-top: 6px;
    font-size: 13px;
  }
  .common-layerpopup__close {
    margin-top: 0;
    padding: 13px 14px;
  }
  .common-layerpopup__close-button {
    font-size: 13px;
  }
}
/*----------------------------------------*\
  DIM BG
\*----------------------------------------*/
.dim-bg {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.3);
}

.popup:last-of-type .dim-bg {
  display: block;
}

.layout-container::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: -999999px;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 900;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

html.js-html-layer-opened .layout-container::before {
  left: 0;
  opacity: 0.8;
}

html.js-html-layer-closed-animate .layout-container::before {
  opacity: 0;
}

/*----------------------------------------*\
  New
\*----------------------------------------*/
.dim-contents {
  width: 800px;
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  background: var(--bg-clr2);
  border-radius: 20px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%) translateZ(0);
  will-change: transform;
  z-index: 10000;
}
.dim-contents [class^=popup-head] {
  height: 48px;
  border-radius: 20px 20px 10px 0;
}
.dim-contents .popup-title {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  padding: 20px 40px 0 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: var(--tit-clr);
}
.dim-contents [class^=popup-body] {
  max-height: calc(80vh - 60px);
  padding: 20px;
  overflow: auto;
  backface-visibility: hidden;
}
.dim-contents [class^=popup-body]::-webkit-scrollbar {
  width: 10px;
}
.dim-contents [class^=popup-body]::-webkit-scrollbar-thumb {
  width: 100%;
  background: var(--line-clr);
}
.dim-contents [class^=popup-body]::-webkit-scrollbar-track {
  background: transparent;
}
.dim-contents [class^=popup-body]:first-child {
  padding-top: 68px;
}
.dim-contents [class^=popup-foot] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
}
.dim-contents [class^=popup-foot] .btn-area {
  margin: 0 auto;
  padding: 0 !important;
}
.dim-contents [class^=popup-foot] .btn-basic,
.dim-contents [class^=popup-foot] .btn-print,
.dim-contents [class^=popup-foot] .btn-down,
.dim-contents [class^=popup-foot] .btn-add,
.dim-contents [class^=popup-foot] a.btn-basic,
.dim-contents [class^=popup-foot] .btn-small,
.dim-contents [class^=popup-foot] .basic-btn {
  max-width: 180px;
  height: 40px;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}
.dim-contents [class^=popup-foot] .btn-basic.type-normal,
.dim-contents [class^=popup-foot] .btn-print.type-normal,
.dim-contents [class^=popup-foot] .btn-down.type-normal,
.dim-contents [class^=popup-foot] .btn-add.type-normal,
.dim-contents [class^=popup-foot] a.btn-basic.type-normal,
.dim-contents [class^=popup-foot] .btn-small.type-normal,
.dim-contents [class^=popup-foot] .basic-btn.type-normal {
  height: 54px;
  font-size: 18px;
}
.dim-contents .page-sub-heading {
  margin-bottom: 14px;
}
.dim-contents .body-des {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.dim-contents .close,
.dim-contents .btn-close-l {
  width: 20px;
  height: 20px;
  position: relative;
  background: none;
}
.dim-contents .close::before, .dim-contents .close::after,
.dim-contents .btn-close-l::before,
.dim-contents .btn-close-l::after {
  width: 16px;
  height: 2px;
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  display: block;
  background-color: var(--body-clr);
  border-radius: 10px;
  transform: rotate(-45deg);
}
.dim-contents .close::after,
.dim-contents .btn-close-l::after {
  transform: rotate(45deg);
}
.dim-contents .btn-wrap {
  position: absolute;
  top: 0;
  right: 0;
}
.dim-contents .btn-close-l {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 0;
}
.dim-contents .btn-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  height: 54px;
  max-width: none;
  margin: 0;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  color: var(--bg-clr2);
}
.dim-contents .btn-small.bg-color01 {
  background-color: var(--main-clr) !important;
}
.dim-contents .pop-newWp .td-wrap {
  padding: 0;
}
.dim-contents .slide-box-area:first-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  html:has(.dim-contents)::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 4;
  }
  html:has(.dim-contents[style*=none])::before {
    display: none;
  }
  .dim-contents:not(.sm, .swiper, .error-code) {
    inset: 0;
    width: 100vw !important;
    border-radius: 0;
    transform: none;
  }
  .dim-contents:not(.sm, .swiper, .error-code) .popup-head01 {
    height: 54px;
    padding: 0 20px;
    background: none;
    border-radius: 0;
  }
  .dim-contents:not(.sm, .swiper, .error-code) .popup-head01 .popup-title {
    font-size: 18px;
    line-height: 21px;
    padding: 15px 0 0 0;
  }
  .dim-contents:not(.sm, .swiper, .error-code) .popup-head01:not(.no-title) + .popup-body01,
  .dim-contents:not(.sm, .swiper, .error-code) .popup-head01:not(.no-title) + .popup-body02 {
    padding-top: 20px !important;
  }
  .dim-contents:not(.sm, .swiper, .error-code) .popup-body01 {
    max-height: calc(100vh - 60px);
    padding: 80px 20px 20px !important;
  }
  .dim-contents:not(.sm, .swiper, .error-code):has(.popup-foot01) .popup-body01 {
    max-height: calc(100vh - 150px);
  }
  .dim-contents:not(.sm, .swiper, .error-code) .popup-foot01 {
    position: fixed;
    inset: 0;
    top: initial;
    padding: 20px;
    z-index: 10;
  }
  .dim-contents:not(.sm, .swiper, .error-code) .popup-foot01 .basic-btn {
    flex: 1;
  }
  .dim-contents:not(.sm, .swiper, .error-code) .btn-close-l {
    top: 16px;
    right: 25px;
  }
}
/*----------------------------------------*\
  || Alert Msg
\*----------------------------------------*/
.alert-msg li {
  line-height: 150%;
  font-size: 14px;
  text-align: center;
  word-break: auto-phrase;
}
.alert-msg li:last-child {
  margin-bottom: 0;
}

/*----------------------------------------*\
  || Swiper / 메인 슬라이드 팝업
\*----------------------------------------*/
.dim-contents.swiper {
  width: 600px;
  height: 640px;
  overflow: hidden;
}
.dim-contents.swiper .popup-head01 {
  display: none;
}
.dim-contents.swiper .popup-body01 {
  height: 520px;
  padding: 0 !important;
  overflow: visible;
}
.dim-contents.swiper .popup-body01 > li {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--bg-clr2);
  transform: none;
  /* 서식 */
}
.dim-contents.swiper .popup-body01 > li .popup-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  min-height: 60px;
  padding: 0 30px;
}
.dim-contents.swiper .popup-body01 > li .popup-title-wrap .popup-title {
  padding: 0;
}
.dim-contents.swiper .popup-body01 > li .popup-content-wrap {
  width: 100%;
  height: 100%;
  padding: 0 30px;
  overflow: auto;
}
.dim-contents.swiper .popup-body01 > li .popup-content-wrap::-webkit-scrollbar {
  width: 15px;
}
.dim-contents.swiper .popup-body01 > li .popup-content-wrap::-webkit-scrollbar-thumb {
  width: 100%;
  background: var(--line-clr);
}
.dim-contents.swiper .popup-body01 > li .popup-content-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.dim-contents.swiper .popup-body01 > li .popup-content-wrap img {
  width: 100% !important;
  height: auto !important;
}
.dim-contents.swiper .popup-body01 > li .template h3 {
  width: 100%;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-clr3);
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
  color: var(--body-clr);
  word-break: auto-phrase;
}
.dim-contents.swiper .popup-body01 > li .template h4 {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  color: var(--body-clr);
}
.dim-contents.swiper .popup-body01 > li .template h5 {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: var(--main-clr);
}
.dim-contents.swiper .popup-body01 > li .template p {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  color: var(--cap-clr);
  word-break: auto-phrase;
}
.dim-contents.swiper .popup-body01 > li .template p:first-child {
  margin-top: 0;
}
.dim-contents.swiper .popup-body01 > li .template p + p {
  margin-top: 5px;
}
.dim-contents.swiper .popup-body01 > li .template ul {
  margin-top: 10px;
}
.dim-contents.swiper .popup-body01 > li .template ul > li {
  margin-left: 7px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--body-clr);
  text-indent: -7px;
}
.dim-contents.swiper .popup-body01 > li .template ul > li::before {
  width: 3px;
  height: 3px;
  content: "";
  display: inline-block;
  margin-right: 4px;
  margin-bottom: 2px;
  background-color: var(--body-clr);
  border-radius: 50%;
  vertical-align: middle;
}
.dim-contents.swiper .popup-body01 > li .template ul > li + li {
  margin-top: 10px;
}
.dim-contents.swiper .popup-body01 > li .template ul > li ul li {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  color: var(--body-clr);
  text-indent: -8px;
}
.dim-contents.swiper .popup-body01 > li .template ul > li ul li::before {
  width: 4px;
  height: 1px;
  content: "";
  display: inline-block;
  margin-right: 4px;
  background-color: var(--body-clr);
  vertical-align: middle;
}
.dim-contents.swiper .popup-body01 > li .template ul > li ul li + li {
  margin-top: 5px;
}
.dim-contents.swiper .popup-body01 > li .template ul + ul {
  margin-top: 15px;
}
.dim-contents.swiper .popup-body01 > li .template small {
  display: block;
  margin-top: 20px;
  margin-left: 17px;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  color: var(--cap-clr);
  text-indent: -17px;
}
.dim-contents.swiper .popup-body01 > li .template small::before {
  width: 15px;
  height: 15px;
  background: url("/img/common/tooltip_icon_m.png") no-repeat center center;
  background-size: 12px;
  content: "";
  display: inline-block;
  margin-right: 4px;
  vertical-align: top;
}
.dim-contents.swiper .popup-close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  height: 120px;
  padding: 30px 40px 40px;
  background: var(--bg-clr2);
}
.dim-contents.swiper .popup-close .swiper-controller {
  margin-top: 0;
  margin-right: auto;
}
.dim-contents.swiper .label-wrap label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 16px;
  color: var(--cap-clr);
}
.dim-contents.swiper .label-wrap label::before {
  width: 20px;
  height: 20px;
  content: "";
  display: block;
  border-radius: 4px;
  border: 1px solid var(--cap-clr);
}
.dim-contents.swiper .label-wrap .chk-basic:checked ~ label::before {
  background: var(--body-clr) url("/img/common/icon/icon_check_white.png") no-repeat center/12px;
}
.dim-contents.swiper .basic-btn {
  width: 100px;
  outline-offset: 2px;
}
.dim-contents.swiper .popup-close-top {
  display: none;
}

/*----------------------------------------*\
  Alert / SM / Phone
\*----------------------------------------*/
/*----------------------------------------*\
  SIZE
\*----------------------------------------*/
.dim-contents.sm {
  width: 430px;
}
.dim-contents.sm .btn-basic,
.dim-contents.sm .btn-print,
.dim-contents.sm .btn-down,
.dim-contents.sm .btn-add,
.dim-contents.sm a.btn-basic,
.dim-contents.sm .btn-small,
.dim-contents.sm .basic-btn {
  width: 100%;
  max-width: none;
  height: 40px;
  font-size: 14px;
}

.dim-contents.md {
  width: 600px;
}

.dim-contents.lg {
  width: 1000px;
}

.dim-contents.w-auto {
  min-width: 430px;
}

/*----------------------------------------*\
  Dim contents 팝업 내부 분기 처리 요소
\*----------------------------------------*/
.dim-contents .basic-table tbody th,
.dim-contents .basic-table tbody td,
.dim-contents .basic-table thead + tbody tr:first-child th,
.dim-contents .basic-table thead + tbody tr:first-child td {
  padding: 14px 0;
}
.dim-contents .basic-table thead + tbody tr:only-child th,
.dim-contents .basic-table thead + tbody tr:only-child td {
  padding-bottom: 0;
}

/*----------------------------------------*\
  Toast Popup
\*----------------------------------------*/
.toast-popup {
  position: fixed;
  left: 50%;
  bottom: -50px;
  min-width: 400px;
  min-height: 50px;
  padding: 13px 16px;
  background-color: #e6f6f5;
  border: 1px solid var(--main-clr);
  border-radius: 25px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateX(-50%);
  animation: toastPopup 2.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}
.toast-popup p {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 19px;
  color: var(--tit-clr);
}
.toast-popup p::before {
  width: 22px;
  height: 22px;
  background: url("/img/common/icon/icon_check_shadow.png") no-repeat center center;
  background-size: 22px;
  content: "";
  min-width: 22px;
}

@keyframes toastPopup {
  0%, 100% {
    bottom: -50px;
    opacity: 0;
  }
  25%, 75% {
    bottom: 40px;
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .toast-popup {
    min-width: calc(100vw - 20px);
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  Popup 01
\*----------------------------------------*/
/*----------------------------------------*\
  Popup 02 MD
\*----------------------------------------*/
/*----------------------------------------*\
  Popup 03
\*----------------------------------------*/
/*----------------------------------------*\
  Popup Body 01
\*----------------------------------------*/
/*----------------------------------------*\
  Popup Body 02
\*----------------------------------------*/
/*----------------------------------------*\
  Popup Foot 01
\*----------------------------------------*/
/*----------------------------------------*\
  Popup Gap
\*----------------------------------------*/
/*----------------------------------------*\
  Layer Wrap
\*----------------------------------------*/
.layer-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
  opacity: 0;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
}
.layer-wrap::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.layer-wrap.scroll-type01 .dim-contents .btn-close-l {
  font-size: 0;
}

.layer-container {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.2;
  white-space: normal;
  background: var(--bg-clr2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/*----------------------------------------*\
  Pop New Wp
\*----------------------------------------*/
.pop-newWp input ~ .notice-i-list {
  margin-left: 0;
}
.pop-newWp .td-wrap {
  margin: auto;
  padding: 40px 30px;
}
.pop-newWp .td-wrap.tal label {
  font-size: 14px;
}
.pop-newWp .td-wrap.td-wrap.lonc .divi-styl li {
  width: 33.1%;
  font-size: 14px;
}
.pop-newWp .td-wrap.td-wrap.lonc .notice-i-list.trn-notice-i-list {
  margin-left: 0;
}
.pop-newWp .table {
  width: 100%;
  margin-bottom: 20px;
}
.pop-newWp .table:last-child {
  margin-bottom: 0;
}
.pop-newWp .table .input-basic {
  max-width: 100%;
}
.pop-newWp .table-cell {
  width: 50%;
  text-align: left;
}
.pop-newWp .table-cell.left {
  padding-right: 20px;
  vertical-align: top;
}
.pop-newWp .table-cell.right {
  padding-left: 20px;
  vertical-align: top;
}
.pop-newWp .table-cell.right.fir {
  padding-right: 0;
}
.pop-newWp .table-cell.right.fir .calendar-area {
  width: 370px;
}
.pop-newWp .table-cell.right.fir .calendar-area .input-area {
  width: 370px;
}
.pop-newWp .table-cell02 input[type=text] {
  width: calc(50% - 24px);
}
.pop-newWp .ses-title,
.pop-newWp .lon-item-list {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}
.pop-newWp .btn-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 0;
}
.pop-newWp .dtype .number-k {
  display: block;
  font-size: 11px;
}
.pop-newWp .dtype .btn-sm-wh {
  max-width: 85px;
}
.pop-newWp .dtype .wtype01 {
  width: 240px;
}
.pop-newWp .stype .date-box2 .input-area {
  flex: 1;
  width: auto;
  max-width: initial;
}
.pop-newWp .input-basic,
.pop-newWp .stype .select-basic {
  width: 99%;
}
.pop-newWp .input-basic,
.pop-newWp .select-basic {
  max-width: 370px;
}

.btn-newWp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 20px;
  margin-top: 20px;
  text-align: center;
}

.loan-inpWp {
  max-width: 270px !important;
  margin-left: 10px;
}

.dur-date {
  display: inline-block;
}
.dur-date .input-area {
  width: 270px;
  margin-top: 10px;
}

/*----------------------------------------*\
  마이페이지 팝업
\*----------------------------------------*/
.p-img-wrap {
  width: calc(100% + 10px);
  margin: 20px -5px 25px;
}
.p-img-wrap .p-img-box {
  position: relative;
  width: calc(14.2857142857% - 10px);
  padding-top: 12.845%;
  border: 1px solid var(--disable-clr);
  float: left;
  margin: 5px;
}
.p-img-wrap .p-img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-img-box {
  position: relative;
}
.p-img-box .label-wrap {
  position: absolute;
  top: 0;
  left: 0;
}
.p-img-box .label-wrap .icon-chk {
  display: inline-block;
  margin: 5px;
}

/*----------------------------------------*\
  ARS 팝업
\*----------------------------------------*/
.ars-content-wrap .list-style li {
  margin-left: 0;
  line-height: 22px;
  padding-left: 17px;
  text-indent: -13px;
}
.ars-content-wrap .list-style li::before {
  margin-top: 8px;
}
.ars-content-wrap .ars-content {
  padding-bottom: 30px;
  text-align: center;
}
.ars-content-wrap .subtext01 {
  margin-top: 6px;
  font-size: 24px;
}
.ars-content-wrap .text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--body-clr);
}
.ars-content-wrap .subtext02 {
  margin-top: 6px;
  font-size: 16px;
  color: #666;
  line-height: 24px;
}
.ars-content-wrap .ars-cerbox {
  width: 280px;
  margin: 30px auto;
  padding: 20px 0 18px;
  background: #efefef;
  text-align: center;
  border-radius: 10px;
}

.ars-cerbox span {
  display: block;
}
.ars-cerbox .title {
  font-size: 24px;
  font-weight: 500;
  color: var(--body-clr);
}
.ars-cerbox .num {
  margin-top: 10px;
  font-size: 72px;
  color: var(--main-clr);
  font-weight: 500;
}
.ars-cerbox .timer {
  margin-top: 6px;
  padding: 0;
  background: none;
  font-size: 16px;
  color: #000;
}

/*----------------------------------------*\
  Phone Content 팝업
\*----------------------------------------*/
.phone-content .phonetext {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.phone-content .certifiy-result-wrap {
  padding: 156px 0 22px;
  border: 0;
}
.phone-content + .sub-box-wrap.type01 {
  padding-top: 20px !important;
}

/*----------------------------------------*\
  전화승인실패 팝업
\*----------------------------------------*/
.error-content {
  width: 490px;
  margin: 35px auto 0;
  padding: 44px 0;
  border-top: 1px solid var(--disable-clr);
  background: #efefef;
  font-size: 24px;
  line-height: 37px;
  text-align: center;
}

/*----------------------------------------*\
  주소찾기 팝업
\*----------------------------------------*/
.address-search {
  margin-bottom: 10px;
}
.address-search * {
  float: left;
  margin-right: 10px;
}
.address-search select {
  width: 140px;
}
.address-search input {
  width: 343px;
}
.address-search button {
  width: 120px;
  margin-right: 0;
}
.address-search.type02 input {
  width: 510px;
  max-width: inherit;
}

.address-search::after,
.address-result li::after {
  content: "";
  display: block;
  clear: both;
}

.address-view {
  border: 1px solid var(--disable-clr);
  padding: 20px;
  max-height: 150px;
  overflow-y: auto;
}

.address-info li {
  text-align: center;
  font-size: 14px;
  padding: 3px 0;
}

.address-result li {
  margin-bottom: 10px;
}
.address-result [class*=txt-addr] {
  font-size: 14px;
  float: left;
  display: block;
  line-height: 1.2em;
}
.address-result .txt-addr01 {
  font-weight: 500;
  width: 90px;
}
.address-result .txt-addr02 {
  max-width: 490px;
}

.address-input {
  width: 100%;
}

/*----------------------------------------*\
  문자전송 팝업
\*----------------------------------------*/
.send-msg-box {
  width: 100%;
  height: auto;
  padding: 20px;
  margin-top: 30px;
  border: 1px solid var(--line-clr3);
  border-radius: 14px;
}
.send-msg-box dt,
.send-msg-box dd {
  font-size: 13px;
  line-height: 1.5em;
  word-break: keep-all;
}
.send-msg-box dt {
  font-weight: 500;
  padding-bottom: 10px;
}

/*----------------------------------------*\
  이체 확인증 출력 팝업
\*----------------------------------------*/
.docu-title.top.bd-btm {
  border-bottom: 1px solid #000;
  display: inline-block;
  padding: 0 5px 5px;
}

.txt-option01 {
  font-weight: 500;
  font-size: 20px;
  padding-bottom: 15px;
}

/*----------------------------------------*\
  지연이체 팝업
\*----------------------------------------*/
.popup-b-txt {
  margin-bottom: 28px;
}
.popup-b-txt li {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 12px;
}

.popup-checkbox-wrap {
  border: 1px solid var(--line-clr3);
  padding: 20px;
  margin: 15px 0;
  border-radius: 10px;
}
.popup-checkbox-wrap.agree {
  margin-bottom: 0;
  background: #f7f7f7;
  border: 0;
  text-align: center;
}
.popup-checkbox-wrap.agree .chk-label {
  font-weight: 500;
  color: #666;
}
.popup-checkbox-wrap.agree .radio-box-wrap {
  margin-left: 0;
  transform: translateX(0);
}
.popup-checkbox-wrap .radio-box-wrap {
  display: inline-block;
}

/*----------------------------------------*\
  로그인 팝업
\*----------------------------------------*/
.log-pop-top {
  display: table;
  width: 100%;
}
.log-pop-top .log-pop-txt {
  font-size: 14px;
  text-align: center;
}

.log-pop-center {
  padding: 20px 0 1px 0;
}
.log-pop-center .qrcode-wrap {
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
}
.log-pop-center .timer {
  display: block;
  width: 150px;
  margin: 0 auto;
  text-align: center;
  background: url("/img/common/timer_icon.png") no-repeat left 35px center/18px;
  padding-left: 45px;
  font-size: 16px;
}
.log-pop-center .qr-num-box {
  margin-top: 20px;
  text-align: center;
}
.log-pop-center .qr-num {
  display: inline-block;
  border: 1px solid var(--disable-clr);
  width: 130px;
  text-align: center;
  font-size: 24px;
  padding: 13px 0;
  vertical-align: middle;
  margin: 0 auto 20px;
}
.log-pop-center .qr-num + .qr-num {
  margin-left: 10px;
}
.log-pop-center .qr-num span {
  display: inline-block;
  vertical-align: sub;
}

.log-pop-blist {
  width: 500px;
  list-style: decimal;
  margin-left: 20px;
}
.log-pop-blist li {
  font-size: 14px;
  line-height: 1.5;
}

.log-pop-bottom {
  border-top: 1px solid var(--disable-clr);
  padding: 22px 0 0px 0;
  position: relative;
}

.pop-bottom-txt {
  width: 500px;
  line-height: 1.3;
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 6px;
}

.pop-bottom-logo {
  position: absolute;
  top: calc(50% - 55px);
  right: 0;
  width: 50px;
}

/*----------------------------------------*\
  OTP 만료안내 팝업
\*----------------------------------------*/
.otp-alert {
  padding: 30px 0;
  background: #efefef;
  font-size: 16px;
  text-align: center;
}
.otp-alert + .notice-list-wrap {
  padding-top: 23px;
}

.otp-alert-txt {
  margin-top: 14px;
  line-height: 30px;
  font-size: 18px;
}

.battery-confirm {
  padding: 30px 0 10px;
  border-top: 1px solid var(--disable-clr);
}

.icon-alert {
  height: 40px;
  background: url("/img/common/icon_alert.png") no-repeat 50% 50%;
}

.confirm-txt {
  font-size: 20px;
  font-weight: 500;
}

.otp-box,
.otp-box02 {
  width: 265px;
  height: 160px;
}
.otp-box img,
.otp-box02 img {
  width: 265px;
  height: 130px;
}
.otp-box p,
.otp-box02 p {
  font-weight: 500;
  margin-top: 10px;
  font-size: 16px;
}

.otp-box02 {
  margin-left: 55px;
}

.popup-close {
  height: 50px;
  padding: 15px 30px;
  background: #666;
}

i.chk-w {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url(/img/common/checkbox-w.png) no-repeat center/contain;
  display: table-cell;
}

.popup-close-btn {
  padding: 2px 20px 0 0;
  color: var(--bg-clr2);
  background: url("/img/common/icon_popup_close.png") no-repeat right center;
  font-size: 16px;
}

/*----------------------------------------*\
  휴대폰인증 팝업
\*----------------------------------------*/
.phone-table tr:last-child {
  margin-bottom: 0;
}
.phone-table th {
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
}
.phone-table th label {
  font-weight: 500;
}
.phone-table td {
  padding: 10px 0;
}

.phone-radios,
.phone-radios02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
}
.phone-radios:focus + label,
.phone-radios02:focus + label {
  border: 1px dotted var(--bg-clr2);
}
.phone-radios:checked + label,
.phone-radios02:checked + label {
  border: 1px solid var(--main-clr);
  color: var(--bg-clr2);
  background: var(--main-clr);
}

.phone-radio:focus + label,
.phone-radios:focus + label {
  border: 1px dotted var(--bg-clr2);
}

.phone-radio02:focus + label,
.phone-radios02:focus + label {
  border: 1px dotted var(--bg-clr2);
}

.phone-radios + label {
  padding: 13px 26px;
  border: 1px solid var(--disable-clr);
  box-sizing: border-box;
  font-weight: 400;
  color: var(--body-clr);
  font-size: 14px;
  cursor: pointer;
}

.phone-radios02 + label {
  width: 109px;
  height: 47px;
  display: inline-block;
  text-align: center;
  border: 1px solid var(--disable-clr);
  box-sizing: border-box;
  font-weight: 400;
  color: var(--body-clr);
  font-size: 14px;
  cursor: pointer;
}

.phone-slide-area {
  border: 1px solid var(--disable-clr);
}

.phone-slide-top {
  padding: 15px 20px;
  border-top: 1px solid var(--disable-clr);
}
.phone-slide-top:first-child {
  border-top: none;
}

.phone-slide-txt {
  display: none;
  max-width: 100%;
  height: 150px;
  padding: 20px;
  border-top: 1px solid var(--disable-clr);
  overflow-y: auto;
}
.phone-slide-txt p {
  font-size: 14px;
  line-height: 1.5em;
}

.phone-slide-btn {
  width: 16px;
  height: 9px;
  margin-top: 6px;
  background: url("/img/common/icon_slide_down.png") no-repeat center;
}

.phone-slide-active .phone-slide-btn {
  background: #f7f7f7 url("/img/common/icon_slide_up.png") no-repeat center;
  transform: none;
}

.phone-table02 {
  margin: 10px 0 5px;
}
.phone-table02 th {
  font-size: 16px;
  vertical-align: top;
}

/*----------------------------------------*\
  통장사본
\*----------------------------------------*/
/*----------------------------------------*\
  공과금 팝업
\*----------------------------------------*/
/*----------------------------------------*\
  영수증번호 팝업
\*----------------------------------------*/
.popup-top-number {
  display: flex;
  align-items: center;
  width: 100%;
  background: #f7f7f7;
  margin-bottom: 30px;
  border-radius: 14px;
  border: 1px solid var(--line-clr3);
  overflow: hidden;
}
.popup-top-number .number {
  display: inline-block;
  width: 126px;
  text-align: center;
  padding: 15px;
  border-right: 1px solid var(--line-clr3);
  font-weight: 500;
  font-size: 14px;
}
.popup-top-number .number:last-child {
  border-right: none;
}

/*----------------------------------------*\
  오류코드 팝업
\*----------------------------------------*/
.dim-contents.error-code {
  width: auto;
  min-width: 300px;
  max-width: 430px;
  text-align: center;
}
.dim-contents.error-code .popup-head01 {
  text-align: left;
}
.dim-contents.error-code .code-name {
  font-size: 16px;
  line-height: 150%;
  color: var(--tit-clr);
  font-weight: 700;
}
.dim-contents.error-code .code {
  font-weight: 700;
}
.dim-contents.error-code .code-details {
  margin-top: 12px;
  font-size: 14px;
  line-height: 150%;
  color: #555;
}

/*----------------------------------------*\
  팝업 버튼
\*----------------------------------------*/
.popup-control01 {
  position: fixed;
  top: 75px;
  right: 27px;
  width: 260px;
  border-radius: 20px;
  background: var(--body-clr);
  padding: 10px 20px;
}

.popup-control03 {
  position: fixed;
  bottom: 20px;
  left: 50%;
  margin-left: -142px;
  width: 284px;
  background: var(--body-clr);
  padding: 15px 20px 13px;
}
.popup-control03 .prev,
.popup-control03 .next {
  color: var(--bg-clr2);
  font-size: 16px;
  vertical-align: middle;
}
.popup-control03 .popup-prev,
.popup-control03 .popup-next {
  width: 18px;
  height: 18px;
  margin-top: -2px;
  vertical-align: middle;
}
.popup-control03 .popup-prev {
  margin-left: 15px;
  background: url("/img/common/icon_prev.png") no-repeat;
}
.popup-control03 .popup-next {
  margin-right: 15px;
  background: url("/img/common/icon_next.png") no-repeat;
}
.popup-control03 span {
  padding: 0 14px;
}

.popup-control04 {
  position: fixed;
  bottom: 20px;
  right: 35px;
  width: 160px;
}
.popup-control04 button {
  width: 100%;
  max-width: 160px;
  padding: 14px 0;
  color: var(--bg-clr2);
}

.popup-page {
  display: inline-block;
  font-weight: 500;
  color: var(--bg-clr2);
  font-size: 16px;
  vertical-align: middle;
}

.popup-btn-plus,
.popup-btn-minus,
.popup-btn-original,
.popup-btn-basic,
.popup-btn-minimap {
  color: var(--bg-clr2);
  padding: 4px 0 3px 23px;
  font-size: 14px;
  margin-left: 7px;
}

.popup-btn-plus {
  margin-left: 0;
  background: url("/img/common/icon_plus_wh.png") no-repeat left center;
}

.popup-btn-minus {
  background: url("/img/common/icon_minus_wh.png") no-repeat left center;
}

.popup-btn-original {
  background: url("/img/common/icon_original.png") no-repeat left center;
}

.popup-btn-basic {
  background: url("/img/common/icon_basic.png") no-repeat left center;
}

.popup-btn-minimap {
  background: url("/img/common/icon_minimap.png") no-repeat left center;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .dtype .radio-box-wrap label {
    float: inherit;
  }
  html.responsive .dtype .radio-box-wrap label:last-child {
    margin-bottom: 10px;
  }
  html.responsive .dtype .btn-small {
    width: 49.5%;
  }
  html.responsive .stype .m-date .date-box2 .datemid {
    display: none;
  }
  html.responsive .p-img-wrap .p-img-box {
    width: calc(50% - 10px);
    padding-top: 47.21%;
  }
  .pop-newWp .td-wrap {
    margin: auto;
    padding: 20px 20px;
  }
  .pop-newWp .td-wrap.td-wrap.lonc .divi-styl li {
    width: 100%;
  }
  .pop-newWp .td-wrap.td-wrap.lonc .divi-styl li:before {
    background: none;
  }
  .pop-newWp .table {
    width: 100%;
    margin-bottom: 10px;
  }
  .pop-newWp .table:last-child {
    margin-bottom: 0;
  }
  .pop-newWp .table.during .radio-box {
    display: block;
    margin-bottom: 10px;
  }
  .pop-newWp .table .input-basic {
    max-width: 100%;
  }
  .pop-newWp .table-cell {
    width: 100%;
    text-align: left;
  }
  .pop-newWp .table-cell.left {
    padding-right: 0px;
    display: block !important;
  }
  .pop-newWp .table-cell.right {
    padding-left: 0px;
    display: block !important;
    padding-top: 10px;
  }
  .pop-newWp .table-cell.right.fir .calendar-area {
    width: inherit;
  }
  .pop-newWp .table-cell.right.fir .calendar-area .input-area {
    width: inherit;
  }
  .pop-newWp .ses-title {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
  }
  .pop-newWp .btn-area {
    padding-top: 20px;
  }
  .pop-newWp .input-area {
    width: 100%;
  }
  .pop-newWp .dtype .btn-sm-wh {
    max-width: 120px;
    margin-top: 5px;
  }
  .pop-newWp .dtype .wtype01 {
    width: 100%;
  }
  .pop-newWp .dtype .radio-box-wrap {
    margin-bottom: 15px;
  }
  .pop-newWp .dtype .loan-inpWp {
    margin-left: 0;
    margin-top: 5px;
  }
  .pop-newWp .stype .date-box2 {
    display: block;
  }
  .pop-newWp .stype .date-box2 .input-area {
    max-width: inherit;
    width: 100%;
  }
  .pop-newWp .input-basic,
  .pop-newWp .select-basic {
    max-width: inherit;
  }
  .pop-newWp .table-cell02 input[type=text] {
    width: 99%;
    text-align: left;
  }
}
/*----------------------------------------*\
  Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .dim-contents.w-auto {
    min-width: inherit;
  }
  .dim-contents.swiper {
    width: 100%;
    height: 57.5%;
    max-height: none;
    border-radius: 32px 32px 0 0;
    margin: 0 !important;
    transform: none;
    inset: 0;
    top: initial !important;
    box-shadow: none;
    overflow: visible;
    will-change: auto;
  }
  .dim-contents.swiper .popup-body01 {
    max-height: calc(100% - 72px);
    padding: 0;
  }
  .dim-contents.swiper .popup-body01:has(> :only-child) {
    max-height: calc(100% - 34px);
  }
  .dim-contents.swiper .popup-body01 > li {
    height: 100%;
    border-radius: 32px 32px 0 0;
  }
  .dim-contents.swiper .popup-body01 > li::-webkit-scrollbar {
    display: none;
  }
  .dim-contents.swiper .popup-body01 > li .popup-title {
    max-width: 100%;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
  }
  .dim-contents.swiper .popup-body01 > li h3 {
    margin-bottom: 16px;
    padding-bottom: 16px;
    font-size: 20px;
    line-height: 26px;
  }
  .dim-contents.swiper .popup-body01 > li p {
    word-break: normal;
  }
  .dim-contents.swiper .popup-body01 > li h4,
  .dim-contents.swiper .popup-body01 > li h5 {
    margin-top: 16px;
  }
  .dim-contents.swiper .popup-body01 .popup-title-wrap {
    justify-content: center;
    margin-bottom: 0;
    background-color: var(--bg-clr2);
  }
  .dim-contents.swiper .popup-body01 .popup-content-wrap {
    width: 100%;
    height: 100%;
    padding: 0 30px;
    overflow: auto;
  }
  .dim-contents.swiper .popup-body01 .popup-content-wrap::-webkit-scrollbar {
    width: 10px;
  }
  .dim-contents.swiper .popup-body01 .close {
    display: none;
  }
  .dim-contents.swiper .popup-close {
    justify-content: center;
    height: auto;
    padding: 20px 0 30px;
  }
  .dim-contents.swiper .popup-close .swiper-controller {
    margin: 2px auto;
    min-height: 24px;
  }
  .dim-contents.swiper .popup-close-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: -40px;
    left: 20px;
    width: calc(100% - 40px);
  }
  .dim-contents.swiper .popup-close-top .today,
  .dim-contents.swiper .popup-close-top .close-wrap {
    font-size: 15px;
    line-height: 17px;
    color: var(--bg-clr2);
    text-align: left;
  }
  .dim-contents.swiper .popup-close-top .close-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
  .dim-contents.swiper .popup-close-top .close {
    width: 30px;
    height: 30px;
    background-color: var(--bg-clr2);
    border-radius: 50%;
  }
  .dim-contents.swiper .popup-close-top .close::before, .dim-contents.swiper .popup-close-top .close::after {
    width: 14px;
    height: 2px;
    top: 14px;
    left: 8px;
  }
  .dim-contents.swiper .dim-bg {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
  }
}
/*----------------------------------------*\
  540px
\*----------------------------------------*/
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  || Pagination
\*----------------------------------------*/
.pagination {
  width: 100%;
  padding: 40px 0;
  text-align: center;
}
.pagination > li {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: 5px;
}
.pagination > li:last-child {
  margin-right: 0;
}
.pagination > li a {
  display: table;
  width: 100%;
  height: 100%;
}
.pagination > li .page {
  display: block;
  text-align: center;
  line-height: 35px;
  color: #767676;
  background: var(--bg-clr2);
  border: 1px solid #efefef;
  font-size: 14px;
}
.pagination .active-page .page {
  background: var(--cap-clr);
  color: var(--bg-clr2);
  font-weight: 700;
}
.pagination .prev a {
  background: url("/img/common/page_left.png") no-repeat center;
}
.pagination .next a {
  background: url("/img/common/page_right.png") no-repeat center;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .pagination {
    padding-bottom: 15px;
  }
}
/*----------------------------------------*\
  || Basic Radio
\*----------------------------------------*/
.basic-radio-wrap {
  position: relative;
  min-width: fit-content;
}
.basic-radio-wrap input {
  width: 100%;
  height: 100%;
  position: absolute;
}
.basic-radio-wrap input:checked + label::before {
  border-color: var(--main-clr);
}
.basic-radio-wrap input:checked + label::after {
  background-color: var(--main-clr);
}

.basic-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  font-size: 16px;
  line-height: 19px;
  color: var(--tit-clr);
}
.basic-radio::before {
  width: 22px;
  height: 22px;
  content: "";
  display: block;
  background-color: var(--bg-clr2);
  border: 1px solid var(--disable-clr);
  border-radius: 50%;
  transition: all 0.15s ease;
}
.basic-radio::after {
  width: 14px;
  height: 14px;
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  display: block;
  background-color: var(--bg-clr2);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.15s ease;
}

/*----------------------------------------*\
  || Basic Full Radio
\*----------------------------------------*/
.basic-full-radio-list {
  display: flex;
  align-items: center;
  width: 100%;
}
.basic-full-radio-list .basic-full-radio {
  flex: 1;
  position: relative;
}
.basic-full-radio-list .basic-full-radio:has(:checked) {
  z-index: 1;
}
.basic-full-radio-list .basic-full-radio:first-child label {
  border-radius: 10px 0 0 10px;
}
.basic-full-radio-list .basic-full-radio:last-child label {
  border-radius: 0 10px 10px 0;
}
.basic-full-radio-list .basic-full-radio + .basic-full-radio {
  margin-left: -1px;
}
.basic-full-radio-list .basic-full-radio input {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
}
.basic-full-radio-list .basic-full-radio input:checked + label {
  background-color: #f6fffc;
  border-color: var(--main-clr);
  font-weight: 700;
  color: var(--main-clr);
}
.basic-full-radio-list .basic-full-radio label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  border-radius: 0;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  transition: all 0.3s ease;
}
.basic-full-radio-list--s {
  width: auto;
}
.basic-full-radio-list--s .basic-full-radio {
  flex: none;
}
.basic-full-radio-list--s .basic-full-radio label {
  padding: 0 15px;
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.priod-box1 {
  position: relative;
  display: inline-block;
  margin-bottom: 6px;
}

.log-radio {
  display: flex;
  align-items: center;
  gap: 15px;
}

/*----------------------------------------*\
  || Form Box
\*----------------------------------------*/
.form-box {
  margin-top: 10px;
}
.form-box.type01 .radio-box {
  width: 50%;
}
.form-box.type01 .radio-box .phone-radios02 + label {
  width: 100%;
  font-size: 12px;
}
.form-box.type02 .radio-box {
  width: 33.333%;
}
.form-box.type02 .radio-box .phone-radios02 + label {
  width: 100%;
  font-size: 12px;
}

/*----------------------------------------*\
  || Btn Radio
\*----------------------------------------*/
.btn-radio {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.btn-radio:checked + .radio-basic {
  background-color: var(--bg-clr2);
}

.btn-radios {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
.btn-radios + label {
  position: relative;
  padding-left: 25px;
  font-weight: 700;
  color: #666;
  font-size: 16px;
  cursor: pointer;
}
.btn-radios + label::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 16px;
  height: 16px;
  background: url(/img/common/btn_radio_off.png) no-repeat center/16px;
}
.btn-radios:checked + label::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 16px;
  background: url(/img/common/btn_radio_click.png) no-repeat center/16px;
  filter: invert(46%) sepia(79%) saturate(4498%) hue-rotate(166deg) brightness(100%) contrast(97%);
}

.btn-radio:focus + label,
.btn-radios:focus + label {
  outline: -webkit-focusring-color auto 5px;
  outline: 1px dashed #000;
}

/*----------------------------------------*\
  || Radio Basic
\*----------------------------------------*/
.radio-basic {
  display: inline-block;
  color: var(--body-clr);
  vertical-align: middle;
  font-size: 12px;
  width: 80px;
  text-align: center;
  padding: 5px 0;
  border: 1px solid var(--disable-clr);
  border-bottom: 2px solid var(--disable-clr);
  background-color: var(--bg-clr2);
}

/*----------------------------------------*\
  || Radio Box Wrap
\*----------------------------------------*/
.radio-box-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.radio-box-wrap .radio-box {
  min-width: fit-content;
}
.radio-box-wrap .radio-box.type01, .radio-box-wrap .radio-box.type03 {
  height: 20px;
}
.radio-box-wrap .radio-box.type01 .btn-radios + label::after, .radio-box-wrap .radio-box.type02 .btn-radios + label::after, .radio-box-wrap .radio-box.type03 .btn-radios + label::after {
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-top: -11px;
  margin-left: -10px;
  background: url(/img/hss_common/btn_radio_off.png) no-repeat center/20px;
}
.radio-box-wrap .radio-box.type01 .btn-radios + label {
  top: 2px;
}
.radio-box-wrap .radio-box.type02 .btn-radios + label::after {
  left: 0;
  margin-left: 0;
  background: url(/img/hss_common/btn_radio_off.png) no-repeat center/20px;
}
.radio-box-wrap .radio-box.type03 .btn-radios + label::after {
  left: 0;
  margin-left: 0;
}
.radio-box-wrap :has(.t-margin) {
  margin-top: 10px;
  margin-bottom: 15px;
}

td.radio-box-wrap {
  min-width: 100%;
}
td.radio-box-wrap .clearfix {
  width: 100%;
}

/*----------------------------------------*\
  || Radio Box
\*----------------------------------------*/
.radio-box,
.radio-box2 {
  position: relative;
  display: inline-block;
}

.radio-box.type01 .btn-radios + label::after, .radio-box.type02 .btn-radios + label::after, .radio-box.type03 .btn-radios + label::after {
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-top: -11px;
  margin-left: -10px;
  background: url(/img/common/btn_radio_off.png) no-repeat center/20px;
}
.radio-box.type01 .btn-radios:checked + label::after, .radio-box.type02 .btn-radios:checked + label::after, .radio-box.type03 .btn-radios:checked + label::after {
  background: url(/img/hss_common/btn_radio_click.png) no-repeat center/20px;
  filter: invert(46%) sepia(79%) saturate(4498%) hue-rotate(166deg) brightness(100%) contrast(97%);
}
.radio-box.type01, .radio-box.type03 {
  height: 20px;
}
.radio-box.type02 .btn-radios + label, .radio-box.type03 .btn-radios + label {
  top: 2px;
  padding-left: 30px;
  font-size: 22px;
  font-weight: 700;
  color: var(--body-clr);
}
.radio-box.type01 .btn-radios + label {
  top: 2px;
}
.radio-box.type02 .btn-radios + label::after {
  left: 0;
  margin-left: 0;
  background: url(/img/common/btn_radio_off.png) no-repeat center/20px;
}
.radio-box.type03 .btn-radios + label {
  font-size: 14px;
}
.radio-box.type03 .btn-radios + label::after {
  left: 0;
  margin-left: 0;
}
.radio-box .phone-radios + label,
.radio-box .phone-radios02 + label {
  line-height: 47px;
}

.radio-box2 .btn-radios + label {
  line-height: 47px;
}

/*----------------------------------------*\
  || Btn-show-list
\*----------------------------------------*/
.btn-show-list {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 50px;
  padding: 0;
  background-color: var(--bg-clr2);
  color: #363636;
  font-size: 16px;
  border: 1px solid var(--body-clr);
}
.btn-show-list::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--body-clr);
  position: absolute;
  top: 46%;
  right: 20px;
  display: block;
}
.btn-show-list::after {
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid var(--body-clr);
  border-left: 2px solid var(--body-clr);
  position: absolute;
  top: 36%;
  right: 20px;
  transform: rotate(225deg);
  display: block;
}
.btn-show-list.option span {
  display: inline-block;
  vertical-align: middle;
}
.btn-show-list.option .icon-list {
  display: none;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  .radio-box-wrap.bottom .radio-box {
    min-width: fit-content;
  }
  .radio-basic {
    width: 60px;
    font-size: 13px;
    padding: 8px 0;
    background-color: #eeeff1;
    border: 0;
    color: #363636;
  }
  .radio-box-wrap label {
    margin-right: 20px;
    float: left;
    margin-bottom: 10px;
  }
  .radio-box-wrap label:last-child {
    margin-bottom: 0;
  }
  .btn-radio:checked + .radio-basic {
    background-color: var(--bg-clr2);
  }
  .btn-radios + label {
    font-weight: 400;
    padding-left: 25px;
    color: #363636;
    font-size: 14px;
  }
  .btn-radios + label::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(/img/common/btn_radio_off.png) no-repeat center/16px;
  }
  .btn-radios:checked + label::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(/img/common/btn_radio_click.png) no-repeat center/16px;
    filter: invert(46%) sepia(79%) saturate(4498%) hue-rotate(166deg) brightness(100%) contrast(97%);
  }
}
/*----------------------------------------*\
  || Basic Select
\*----------------------------------------*/
.basic-select-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  width: 100%;
  min-width: fit-content;
}
.basic-select-wrap > div {
  flex-basis: 330px;
}
.basic-select-wrap > div:last-child {
  flex-grow: 1;
}
.basic-select-wrap .select-wrap {
  flex: 1;
}
.basic-select-wrap .basic-inp-wrap {
  margin-top: 0;
}

.basic-select-btn {
  position: relative;
  width: 100%;
  padding: 13px 20px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  border-radius: 10px;
  font-size: 16px;
  line-height: 19px;
  color: var(--tit-clr);
  text-align: left;
  transition: background-color 0.3s ease;
}
.basic-select-btn[aria-pressed=true] {
  border-color: var(--main-clr);
  font-weight: 500;
}
.basic-select-btn[aria-pressed=true]::after {
  transform: translateY(-50%) scaleY(-1);
}
.basic-select-btn::after {
  width: 16px;
  height: 16px;
  background: url("/img/common/icon/icon_arrow_down.png") no-repeat center center;
  background-size: 12px;
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  display: block;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.basic-select-list {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  max-height: 300px;
  padding: 20px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--main-clr);
  border-radius: 10px;
  overflow: auto;
  scrollbar-gutter: stable;
  z-index: 1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.basic-select-list::-webkit-scrollbar {
  width: 32px;
}
.basic-select-list::-webkit-scrollbar-thumb {
  background: var(--line-clr);
  background-clip: padding-box;
  border: 12px solid transparent;
  border-radius: 16px;
}
.basic-select-list::-webkit-scrollbar-track {
  background: #f6fafa;
  background-clip: padding-box;
  border: 12px solid transparent;
  border-radius: 16px;
}
.basic-select-list .title {
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  color: var(--tit-clr);
}
.basic-select-list .list + .title {
  margin-top: 40px;
}
.basic-select-list .list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, auto));
  grid-gap: 20px 30px;
}
.basic-select-list .list.type-long {
  grid-template-columns: repeat(auto-fill, minmax(300px, auto));
}
.basic-select-list .item {
  width: 100%;
  height: 100%;
}
.basic-select-list .basic-select {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.basic-select-list .basic-select .ico-bi {
  width: 36px;
  height: 36px;
  min-width: 36px;
}
.basic-select-list .basic-select .ico-bi::before {
  width: 36px;
  height: 36px;
  background-size: 36px;
}
.basic-select-list .basic-select .name {
  font-size: 16px;
  line-height: 19px;
}
.basic-select-list .basic-select[aria-selected=true] .name {
  font-weight: 700;
  color: var(--main-clr);
  text-decoration: underline;
  text-underline-offset: 3px;
}

ul.basic-select-list {
  display: flex;
  align-items: normal;
  flex-direction: column;
  padding: 0;
}
ul.basic-select-list li {
  position: relative;
  background-color: var(--bg-clr2);
}
ul.basic-select-list li:hover {
  background-color: #e5f5f5;
}
ul.basic-select-list li:hover::before, ul.basic-select-list li:hover + li::before {
  left: 0;
  right: 0;
  background-color: #e5f5f5;
}
ul.basic-select-list li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  display: block;
  height: 1px;
  background-color: var(--line-clr3);
  transition: all 0.2s ease;
}
ul.basic-select-list .basic-select-item {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  line-height: 19px;
  color: var(--tit-clr);
  text-align: left;
  transition: background-color 0.3s ease;
  outline-offset: -2px;
}
ul.basic-select-list .basic-select-item[aria-selected=true] {
  font-weight: 700;
  color: var(--main-clr);
}

/*----------------------------------------*\
  || Acco Select Wrap
\*----------------------------------------*/
.acco-select-wrap {
  position: relative;
}

.acco-select-btn {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: 4px;
  position: relative;
  width: 100%;
  padding: 14px 20px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr2);
  border-radius: 10px;
  text-align: left;
  transition: background-color 0.3s ease;
  outline-offset: -2px;
}
.acco-select-btn[aria-pressed=true] {
  border-color: var(--main-clr);
}
.acco-select-btn[aria-pressed=true]::after {
  transform: translateY(-50%) scaleY(-1);
  top: calc(50% - 1px);
}
.acco-select-btn:disabled {
  background-color: #f2f4f6;
}
.acco-select-btn:disabled::after {
  display: none;
}
.acco-select-btn:disabled .name {
  color: var(--cap-clr);
}
.acco-select-btn::after {
  width: 24px;
  height: 24px;
  background: url("/img/common/icon/icon_arrow_down.png") no-repeat center center;
  background-size: 14px;
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  display: block;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
.acco-select-btn .name {
  font-size: 16px;
  font-weight: 500;
  line-height: 120%;
  color: var(--tit-clr);
}
.acco-select-btn .num {
  font-size: 14px;
  color: var(--body-clr2);
}

.acco-select-list {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  width: 100%;
  max-height: 300px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--main-clr);
  border-radius: 10px;
  overflow: auto;
  z-index: 10;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.acco-select-list::-webkit-scrollbar {
  display: none;
}

.acco-select-item {
  position: relative;
  transition: background-color 0.2s ease;
}
.acco-select-item:hover {
  background-color: #e5f5f5;
}
.acco-select-item:hover::before, .acco-select-item:hover + li::before {
  left: 0;
  right: 0;
  background-color: #e5f5f5;
}
.acco-select-item + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  display: block;
  height: 1px;
  background-color: var(--line-clr3);
  transition: all 0.2s ease;
}
.acco-select-item .acco-select-btn {
  border: 0;
  background-color: transparent;
  border-radius: 0;
}
.acco-select-item .acco-select-btn[aria-selected=true] * {
  color: var(--main-clr);
}
.acco-select-item .acco-select-btn::after {
  display: none;
}

.acco-info-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.acco-info-wrap .basic-inp-wrap {
  max-width: 290px;
}

.acco-balance-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  animation-name: slide-10px;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  margin-left: auto;
  opacity: 0;
}
@keyframes slide-10px {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.acco-balance-box .balance,
.acco-balance-box .possible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  line-height: 14px;
  color: var(--body-clr2);
}
.acco-balance-box .balance strong,
.acco-balance-box .possible strong {
  font-size: 16px;
  line-height: 16px;
  color: var(--tit-clr);
  text-align: right;
}
.acco-balance-box .possible::before,
.acco-balance-box .num + .balance::before {
  width: 1px;
  height: 14px;
  content: "";
  display: block;
  margin-right: 8px;
  background-color: var(--line-clr3);
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
/*----------------------------------------*\
  || Page Step List
\*----------------------------------------*/
.page-step-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.page-step-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  counter-increment: line-number;
}
.page-step-list li::before {
  width: 8px;
  height: 8px;
  content: "";
  background-color: #abb8ca;
  border-radius: 50%;
  box-sizing: border-box;
}
.page-step-list li.current::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  content: counter(line-number);
  background-color: var(--main-clr);
  border: 4px solid #d9f5f4;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  color: var(--bg-clr2);
}
.page-step-list li.current .txt {
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  color: var(--main-clr);
}
.page-step-list li:not(.current) .txt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.page-step-list li:not(.current) .txt::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Process Step
\*----------------------------------------*/
.process-step {
  display: block;
  float: right;
  margin-top: 12px;
}
.process-step li {
  width: 140px;
  float: left;
  color: #666;
  font-size: 12px;
  padding: 14px 40px 0;
  position: relative;
}
.process-step li:first-child, .process-step li:last-child {
  width: 140px;
}
.process-step li::before, .process-step li::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
}
.process-step li::before {
  right: 50%;
  margin-right: 22px;
}
.process-step li::after {
  left: 50%;
  margin-left: 22px;
}
.process-step li.active-step {
  color: #333;
  font-weight: 500;
}
.process-step li.active-step .step-txt {
  color: #333;
  font-weight: 500;
}
.process-step li.active-step .step-num {
  background-color: #333;
  color: #333;
}
.process-step li.active-step .step-num::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 12px;
  border: 1px solid #fff;
  border-width: 0 2px 2px 0;
  margin: -8px 0 0 -3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-radius: 1px;
}
.process-step::after {
  content: "";
  display: block;
  clear: both;
}
.process-step .step-txt {
  width: 100%;
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1.2;
  word-break: keep-all;
  color: #666;
}
.process-step .step-num {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  color: #fff;
  font-size: 16px;
  line-height: 27px;
  text-align: center;
  border-radius: 100%;
  background-color: #909090;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .process-step {
    display: none;
  }
}
/*----------------------------------------*\
  || Basic Tab
\*----------------------------------------*/
.basic-tab-list {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}
.basic-tab-list .basic-tab {
  flex: 1;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--disable-clr);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: var(--cap-clr);
  text-align: center;
}
.basic-tab-list .basic-tab[aria-selected=true] {
  border-color: var(--main-clr);
  border-width: 3px;
  color: var(--main-clr);
  font-weight: 700;
}
.basic-tab-list .basic-tab span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.basic-tab-list.type-m .basic-tab {
  padding: 13px 0;
  border-width: 2px;
  font-size: 15px;
  font-weight: 500;
  line-height: 19px;
}
.basic-tab-list.type-m .basic-tab[aria-selected=true] {
  font-weight: 700;
}
.basic-tab-list.type-inset .basic-tab[aria-selected=true] {
  box-shadow: 0 -1px 0 0 inset var(--main-clr);
}

@media (max-width: 768px) {
  .basic-tab-list .basic-tab {
    padding-bottom: 10px;
    font-size: 18px;
  }
}
/*----------------------------------------*\
  || Check Tab
\*----------------------------------------*/
.check-tab-list {
  display: flex;
  align-items: center;
  gap: 14px;
}
.check-tab-list .check-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  color: #666;
}
.check-tab-list .check-tab[aria-selected=true] {
  background: url("/img/common/icon/icon_check_mint.png") no-repeat left center;
  background-size: 14px;
  padding-left: 20px;
  font-weight: 700;
  color: var(--tit-clr);
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.sub-tab-txt {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

/*----------------------------------------*\
  || Tab Basic
\*----------------------------------------*/
.tab-basic {
  margin-top: 40px;
  padding-top: 0 !important;
}
.tab-basic.type01 {
  margin-top: 20px;
}
.tab-basic.type01 .tab-basic-contents {
  padding-top: 40px;
}
.tab-basic.type02, .tab-basic.margin-above {
  margin-top: 50px;
}
.tab-basic .icon-arrow {
  display: inline-block;
  width: 28px;
  height: 10px;
  margin-top: -2px;
  background: url(/img/common/icon_rtarrow.png) no-repeat 50% 50%;
  text-indent: -10000px;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
}
.tab-basic .active-tab .icon-arrow {
  background-image: url(/img/common/icon_rtarrow_fff.png);
}

.tab-basic-contents.type01 {
  padding-top: 40px;
}

.popup-body02 .tab-basic:first-child {
  margin-top: 0;
}

.sub-title-area + .tab-basic {
  margin-top: 0;
}

.tab-basic-buttons {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.tab-basic-buttons.type02 {
  width: 135px;
}

.tab-basic-buttons-list {
  display: flex;
  align-items: center;
  width: 100%;
}
.tab-basic-buttons-list.type-m .tab-basic-buttons-item {
  background: transparent;
  border: 0;
  padding: 0;
}
.tab-basic-buttons-list.type-m .tab-basic-buttons-item.js-tabpanel-active {
  color: var(--main-clr);
}
.tab-basic-buttons-list.type-m .tab-basic-buttons-item + .tab-basic-buttons-item {
  border-left: 1px solid var(--line-clr3);
}

.tab-basic-buttons-item {
  flex: 1;
  min-width: fit-content;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--disable-clr);
  font-size: 20px;
  line-height: 24px;
  color: var(--cap-clr);
  text-align: center;
  cursor: pointer;
}
.tab-basic-buttons-item > a {
  outline-offset: -1px;
}
.tab-basic-buttons-item.type02 {
  min-width: 135px;
}
.tab-basic-buttons-item.js-tabpanel-active, .tab-basic-buttons-item.is-tab-basic-active {
  background: none !important;
  border-color: var(--main-clr) !important;
  font-weight: 700;
  color: var(--main-clr) !important;
}
.tab-basic-buttons-item.js-tabpanel-active span, .tab-basic-buttons-item.is-tab-basic-active span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.tab-basic-buttons-item.disable {
  background-size: 20px 20px;
}

.tab-basic-buttons-item-link:hover {
  text-decoration: none;
}
.tab-basic-buttons-item-link::before {
  /* content: ''; */
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
}

.tab-basic-contents .bbs-top,
.tab-basic-contents .slide-box-area:has(.bbs-top) {
  margin-top: 0;
  border-top: 0;
}

.tab-basic-panel[data-tab] {
  display: none;
}
.tab-basic-panel[data-tab].js-tabpanel-opened {
  display: block;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .tab-basic.type02 {
    margin-top: 20px;
  }
  html.responsive .tab-basic.margin-above {
    margin-top: 0;
  }
  html.responsive .tab-basic.m-tab .tab-basic-buttons {
    margin-bottom: 20px;
  }
  html.responsive .tab-basic.m-tab .tab-basic-buttons-list {
    display: inherit;
    overflow: hidden;
    width: 100%;
    padding: 0;
  }
  html.responsive .tab-basic.m-tab .tab-basic-buttons-item {
    display: inherit;
    width: 40%;
    float: left;
    padding: 0;
    margin-left: 0;
  }
  html.responsive .tab-basic.m-tab .tab-basic-buttons-item:last-child {
    width: 20%;
  }
  html.responsive .tab-basic.m-tab .tab-basic-buttons-item .icon-arrow {
    width: 10px;
  }
  html.responsive .tab-basic.m-tab .notice-list li > span {
    display: block;
  }
  html.responsive .tab-basic.m-tab .notice-list li .arrow {
    float: inherit;
    line-height: 20px;
  }
  html.responsive .tab-basic.m-tab .img-list {
    overflow: hidden;
  }
  html.responsive .tab-basic.m-tab .step-list-content .img-list li .txt-style01 {
    padding-top: 270px;
  }
  html.responsive .tab-basic.m-tab .step-list-content .img-list li,
  html.responsive .tab-basic.m-tab .step-list-content .img-type2 li,
  html.responsive .tab-basic.m-tab .step-list-content .img-type4 li {
    width: calc(33.334% - 14px);
    width: -webkit-calc(33.334% - 14px);
    width: -moz-calc(33.334% - 14px);
    width: -o-calc(33.334% - 14px);
    height: 250px;
    /* background: url(/img/common/cap_img_01.png);*/
    float: left;
    margin-right: 20px;
    background-size: 100% 280px;
  }
  html.responsive .tab-basic.m-tab .step-list-content .img-title {
    font-size: 14px;
  }
  html.responsive .tab-basic.m-tab .step-list-content .img-style03,
  html.responsive .tab-basic.m-tab .step-list-content .img-style09,
  html.responsive .tab-basic.m-tab .step-list-content .img-style12,
  html.responsive .tab-basic.m-tab .step-list-content .img-style22 {
    margin-right: 0 !important;
  }
  html.responsive .tab-basic.m-tab .btn-area {
    text-align: center;
  }
  html.responsive .tab-basic.m-tab .btn-area .btn-arrow {
    display: inline-block;
  }
  html.responsive .tab-basic-buttons {
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    text-align: center;
    border-bottom: 1px solid var(--line-clr3);
  }
  html.responsive .tab-basic-buttons-list {
    display: inline-block;
    vertical-align: top;
    padding: 0 15px;
    width: auto;
  }
  html.responsive .tab-basic-buttons-item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 0 6px;
    border: 0;
    font-size: 13px;
    line-height: 35px;
  }
  html.responsive .tab-basic-buttons-item::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 2px solid var(--main-clr);
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  html.responsive .tab-basic-buttons-item.js-tabpanel-active, html.responsive .tab-basic-buttons-item.is-tab-basic-active {
    background: none;
    color: var(--main-clr);
  }
  html.responsive .tab-basic-buttons-item.js-tabpanel-active::after, html.responsive .tab-basic-buttons-item.is-tab-basic-active::after {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  html.responsive .tab-basic-buttons-item + .tab-basic-buttons-item {
    margin-left: 12px;
  }
  html.responsive .tab-basic-buttons-item + .tab-basic-buttons-item::before {
    display: none;
  }
}
/*----------------------------------------*\
  || Basic Table
\*----------------------------------------*/
.basic-table {
  width: 100%;
}
.basic-table thead {
  border-bottom: 1px solid var(--tit-clr);
}
.basic-table thead th {
  position: relative;
  padding: 0 10px 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 19px;
  color: var(--tit-clr);
  vertical-align: middle;
  word-break: keep-all;
  white-space: nowrap;
}
.basic-table thead th + th::before {
  width: 1px;
  height: 12px;
  content: "";
  position: absolute;
  top: 3.5px;
  left: 0;
  background-color: var(--line-clr3);
}
.basic-table thead + tbody tr:first-child th,
.basic-table thead + tbody tr:first-child td {
  padding-top: 20px;
}
.basic-table tbody tr {
  border-bottom: 1px solid var(--line-clr3);
}
.basic-table tbody tr:first-child th,
.basic-table tbody tr:first-child td {
  padding-top: 0;
}
.basic-table tbody th {
  padding: 20px 5px;
  font-size: 14px;
  line-height: 18px;
  color: var(--tit-clr);
  text-align: left;
  vertical-align: middle;
}
.basic-table tbody th + td:last-child {
  text-align: right;
}
.basic-table tbody td {
  padding: 20px 5px;
  font-size: 14px;
  line-height: 18px;
  color: #666;
  text-align: center;
  vertical-align: middle;
  word-break: keep-all;
}
.basic-table tbody td div,
.basic-table tbody td span,
.basic-table tbody td strong {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.basic-table.type-ani {
  padding: 0;
  animation: tableTdAni 0.6s ease forwards;
}
@keyframes tableTdAni {
  0% {
    padding: 0;
  }
  100% {
    padding: 20px 15px;
  }
}
.basic-table.type-ani td div {
  opacity: 0;
  max-height: 0;
  animation: tableTdAni2 0.6s ease forwards;
}
@keyframes tableTdAni2 {
  0% {
    opacity: 0;
    max-height: 0;
  }
  100% {
    opacity: 1;
    max-height: 40px;
  }
}
.basic-table .tooltip-wrap .btn-tooltip {
  width: 18px;
  height: 18px;
}
.basic-table .tooltip-wrap .btn-tooltip::before {
  font-size: 12px;
}
.basic-table .notice-list-new li + li {
  margin-top: 5px;
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.table-type01 th,
.table-type01 td,
.table-type02 th,
.table-type02 td,
.table-type03 th,
.table-type03 td,
.table-type04 th,
.table-type04 td,
.table-type05 th,
.table-type05 td,
.table-type03-m th,
.table-type03-m td,
.table-type03-w th,
.table-type03-w td,
.table-newstyle01 th,
.table-newstyle01 td {
  border-color: #efefef !important;
}

table.scroll {
  max-height: 400px;
  overflow-x: auto;
  display: block;
}

table th > button:only-child,
table th > a[class*=btn]:only-child,
table td > button:only-child,
table td > a[class*=btn]:only-child {
  margin: auto;
}

/* Hover 표시 행 */
tr.select {
  cursor: pointer;
}
tr.select:hover {
  background-color: #e5f5f5;
}

tr.clearfix::after {
  display: none;
}

td .inviter {
  position: absolute;
  top: 40px;
  left: 0;
  display: inline;
  width: 400px;
  height: 40px;
  padding: 11px 10px;
  border: 1px solid var(--disable-clr);
  background: var(--bg-clr2);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
}

.type-border th,
.type-border td {
  border: 1px solid var(--disable-clr) !important;
}

.td-box {
  float: right;
}
.td-box span {
  font-size: 16px;
  vertical-align: baseline;
}
.td-box .money {
  padding: 0 2px 0 20px;
  font-size: 22px;
  text-align: right;
}

.col-style01 {
  width: 80px;
}

.col-style02 {
  width: 150px;
}

.wide-table td {
  padding: 20px 10px;
}

.scroll-table {
  height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.no-bb tr:last-child,
.no-bb tr:last-child th,
.no-bb tr:last-child td {
  border-bottom: none;
}

.txt-paragraph,
.table-infolist02 > li,
.table-numlist > li {
  font-size: 14px;
  color: var(--body-clr);
  line-height: 24px;
  word-break: keep-all;
}

.table-infolist02 > li {
  padding-left: 8px;
}
.table-infolist02 > li:before {
  content: "*";
}

.table-numlist > li {
  padding-left: 8px;
  counter-increment: num;
}
.table-numlist > li:before {
  content: "(" counter(num) ")";
}

/*탭안 테이블 아래여백*/
.pc-tab-container.tab-table-bottom .search-table-area,
.pc-tab-container.tab-table-bottom .info-table-area {
  padding-bottom: 35px;
}

.table {
  display: table !important;
}

.table-fixed {
  table-layout: fixed !important;
}

.table-cell {
  display: table-cell !important;
}

/*----------------------------------------*\
  || Search Table Area
\*----------------------------------------*/
.search-table-area.stbl .input-won ~ .txt {
  margin-left: -42px;
}
.search-table-area.stbl .list-style li {
  font-size: 16px;
}
.search-table-area .vitualKeyCheck {
  float: left;
}

/*----------------------------------------*\
  || Info Table Area
\*----------------------------------------*/
.table-area .info-table-area:first-of-type {
  margin-top: 32px;
}

.info-table-area.type02 {
  margin-top: 60px;
}
.info-table-area.join-guidebox .notice-list-wrap {
  padding-top: 19px;
}
.info-table-area.join-guidebox .table-wrap01 {
  margin-top: 15px;
}
.info-table-area.join-guidebox .btn-area {
  padding-top: 35px;
}

/*----------------------------------------*\
  || Table Wrap
\*----------------------------------------*/
.table-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.table-wrap li {
  width: 12.5%;
  text-align: center;
  height: 50px;
  word-break: break-all;
  line-height: 16px;
}
.table-wrap li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--line-clr);
}
.table-wrap li a:hover, .table-wrap li a:focus, .table-wrap li a.active {
  background-color: var(--main-clr);
  border-color: var(--main-clr);
  color: var(--bg-clr2);
}
.table-wrap li a:hover span, .table-wrap li a:focus span, .table-wrap li a.active span {
  color: var(--bg-clr2);
}

.table-title {
  font-size: 18px;
  font-weight: 500;
  margin-top: 40px;
  padding-bottom: 15px;
}

.pc-tab2 .tab-list {
  color: #666;
  font-weight: 400;
}
.pc-tab2 .tab-list a {
  padding: 15px 0;
  font-size: 16px;
}
.pc-tab2 .active-tab {
  font-weight: 500;
}

/*----------------------------------------*\
  || Wrap 01 / 02
\*----------------------------------------*/
.table-wrap01.style01 .table-type04 {
  table-layout: fixed;
}
.table-wrap01 + .table-wrap01 {
  margin-top: 15px;
}
.table-wrap01 + .table-wrap01.type01 {
  margin-top: 27px;
}
.table-wrap01:has(+ .table-type01-foot) {
  border-radius: 20px 20px 0 0;
}
.table-wrap01 + .xflow {
  overflow-x: visible;
}
.table-wrap01 .common-text01 {
  margin-top: 0;
}
.table-wrap01 .common-text01 + .common-text01 {
  margin-top: 5px;
}
.table-wrap01 .tag {
  position: relative;
}
.table-wrap01 .tag::before {
  content: "전용계좌";
  position: absolute;
  top: 50%;
  left: -64px;
  transform: translateY(-50%);
  padding: 3px 6px;
  background: #fff;
  border: 1px solid var(--main-clr);
  border-radius: 17px;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  color: var(--main-clr);
}
.table-wrap01 .tag.blue::before {
  border-color: var(--pos-clr);
  color: var(--pos-clr);
}

.common-textstyle03 + .table-wrap01 {
  margin-top: 20px;
}

.table-wrap02 {
  margin-bottom: 20px;
  padding-top: 25px;
  background: url(/img/common/bg_logo.png) no-repeat center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/*----------------------------------------*\
  || Type 01
\*----------------------------------------*/
.table-type01 {
  width: 100%;
  table-layout: auto;
  text-align: center;
  color: var(--body-clr);
}
.table-type01:not(.table-fixed) colgroup {
  display: none;
}
.table-type01.large-table td {
  padding: 30px 20px;
}
.table-type01.large-table .td-line {
  line-height: 20px;
}
.table-type01.loan .se-td {
  border-right: none;
}
.table-type01.loan .se-td:first-child {
  text-align: left;
  padding: 40px 30px 0 !important;
  vertical-align: top;
}
.table-type01.loan .se-td:nth-child(2), .table-type01.loan .se-td:nth-child(3) {
  padding-top: 30px !important;
  padding-bottom: 27px !important;
}
.table-type01.loan th.w-44 {
  width: 44%;
}
.table-type01.loan th.w-21 {
  width: 21%;
}
.table-type01.loan th.w-130 {
  min-width: 130px;
}
.table-type01.agree-table tr td {
  line-height: 1.6;
  word-break: keep-all;
}
.table-type01.agree-table tr td:last-child {
  text-align: left;
}
.table-type01.table-bor-type02 tbody tr:last-child > td {
  border-bottom: 1px solid #efefef;
}
.table-type01.pad-type3 td {
  padding: 20px;
}
.table-type01.pad-type4 td {
  padding: 14px;
}
.table-type01.table-type02.table-pdxs tbody td, .table-type01.table-type02.table-pdxs tbody th {
  padding: 18px 0;
}
.table-type01 thead tr {
  width: 100%;
  background: #f7f7f7;
}
.table-type01 th,
.table-type01 td {
  width: auto;
  border: 1px solid #efefef;
  font-size: 14px;
  line-height: 20px;
  vertical-align: middle;
  word-break: keep-all;
}
.table-type01 th:first-child,
.table-type01 td:first-child {
  border-left: none;
}
.table-type01 th:last-child,
.table-type01 td:last-child {
  border-right: none;
}
.table-type01 thead th {
  border-bottom: none;
}
.table-type01 th {
  height: 40px;
  padding: 9px 10px 8px 10px;
  font-weight: 700;
  white-space: nowrap;
}
.table-type01 td {
  height: 50px;
  padding: 14px 10px 13px 10px;
}
.table-type01 td .td-wrap {
  line-height: 20px;
}
.table-type01 .table-td {
  font-weight: 400;
  background: #fcfcfc;
  border-right: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.table-type01 .child {
  background: #efefef;
}
.table-type01 .child td {
  padding: 0;
}
.table-type01 .child .td-wrap {
  margin: auto;
  padding: 40px 130px;
}
.table-type01 .child .table {
  width: 100%;
  margin-bottom: 20px;
}
.table-type01 .child .table:last-child {
  margin-bottom: 0;
}
.table-type01 .child .table .input-basic {
  max-width: 100%;
}
.table-type01 .child .table-cell {
  width: 50%;
  text-align: left;
}
.table-type01 .child .table-cell.left {
  padding-right: 20px;
}
.table-type01 .child .table-cell.right {
  padding-left: 20px;
}
.table-type01 .child .ses-title {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
}
.table-type01 .child .btn-area {
  border-top: 1px solid var(--line-clr3);
  padding-top: 20px;
  margin-top: 20px;
}
.table-type01.wide-table-type01 td {
  padding: 22px 10px 21px;
  line-height: 28px;
}

.table-type01-foot {
  padding: 16px 20px 16px 0;
  background: #f7f7f7;
  border: 1px solid #efefef;
  border-top: none;
  text-align: right;
}
.table-type01-foot::after {
  content: "";
  display: table;
  clear: both;
}

.td-point-txt {
  display: block;
  margin-top: 4px;
  line-height: 26px;
}

.td-wrap .td-point-txt + .link {
  margin-bottom: 3px;
  line-height: 20px;
}
.td-wrap .td-point-txt + .td-txt {
  margin-bottom: 3px;
}
.td-wrap .td-point-txt .td-txt {
  display: inline-block;
  line-height: 20px;
}

.se-td .td-point-txt + .td-wrap {
  margin-bottom: 3px;
}

.child.session .table .table-cell {
  vertical-align: top;
}

.tbl-blineWp .table-type01 tr:last-child td {
  border-bottom: none;
}

@media (max-width: 1200px) {
  .content .table-type01,
  html.responsive .table-type01 {
    table-layout: fixed;
  }
  .content .table-type01 th,
  .content .table-type01 td,
  html.responsive .table-type01 th,
  html.responsive .table-type01 td {
    font-size: 12px;
    line-height: 16px;
    word-break: break-all;
    white-space: normal;
  }
}
/*----------------------------------------*\
  || Type 02
\*----------------------------------------*/
.table-type02 td {
  padding: 22px 10px;
}
.table-type02 tr:last-child > .table-th {
  border-bottom: 1px solid var(--disable-clr);
}
.table-type02 .table-th {
  font-weight: 500;
  background: #f6f6f6;
  border-color: #ededed;
}

/*----------------------------------------*\
  || Type 03 / Type 04
\*----------------------------------------*/
.table-type03 td {
  width: 25%;
}

.table-type03-m {
  display: none;
}
.table-type03-m td {
  background: var(--bg-clr2);
}

.table-type03-w,
.table-type04 {
  width: 100%;
}
.table-type03-w th,
.table-type03-w td,
.table-type04 th,
.table-type04 td {
  padding: 20px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  font-size: 14px;
  text-align: left;
  line-height: 22px;
  vertical-align: middle;
}
.table-type03-w th,
.table-type04 th {
  width: 249px;
  padding: 15px 20px 14px 20px;
  background: #f7f7f7;
  font-weight: 700;
  font-size: 14px;
}
.table-type03-w th label,
.table-type04 th label {
  font-weight: 700;
}
.table-type03-w td,
.table-type04 td {
  min-height: 50px;
  padding: 20px;
  background: var(--bg-clr2);
}
.table-type03-w .trn-notice-i-list04,
.table-type04 .trn-notice-i-list04 {
  margin-top: 0;
  padding-top: 15px;
}

.table-type03-w th,
.table-type03-w td {
  width: 30.09%;
}
.table-type03-w td {
  width: 520px;
}
.document-area .table-type03-w .table-th02 {
  background: #fcfcfc;
}

.table-type04.pd-type0 td {
  padding: 0;
}
.table-type04.table-fixed.i-tbl {
  width: inherit;
}
.table-type04.style01 td, .table-type04.style01 th {
  width: auto;
}
.table-type04.set-table tr .td-title {
  font-size: 16px;
  font-weight: 500;
}
.table-type04.set-table tr .td-txt {
  font-size: 14px;
  margin-top: 20px;
}
.table-type04.set-table tr .td-txt.type02 {
  margin-top: 15px;
}
.table-type04.set-table tr .td-txt.type03 {
  margin-top: 0;
  line-height: 25px;
}
.table-type04.set-table tr td:nth-child(3) {
  border-left: 1px solid var(--disable-clr);
  text-align: center;
  font-weight: 500;
}
.table-type04.set-table tr td:nth-child(3) .btn-sm-wh {
  font-weight: 400;
}
.table-type04.set-table td {
  padding: 20px;
}
.table-type04 td.dep {
  padding: 10px 20px 5px;
}
.table-type04 .bbs-head {
  width: 100%;
}

.table-type04-foot {
  border-top: 1px solid #efefef;
  background: #f7f7f7;
  text-align: right;
  padding: 12px 20px;
  border-bottom: 1px solid #efefef;
}
.table-type04-foot .btn-clickbox {
  width: 100%;
  display: inline-block;
  padding-top: 0;
  text-align: left;
  position: relative;
  left: 0px;
  top: 0px;
}

/*----------------------------------------*\
  || Type 05
\*----------------------------------------*/
.table-type05 th,
.table-type05 td {
  padding: 0 0 25px 20px;
  font-size: 14px;
  text-align: left;
  line-height: 22px;
  color: var(--body-clr);
}
.table-type05 th {
  font-weight: 700;
  color: var(--tit-clr);
}

/*----------------------------------------*\
  || Style 01
\*----------------------------------------*/
.table-style01 {
  position: relative;
  width: 100%;
  table-layout: fixed;
  text-align: center;
  color: var(--body-clr);
}
.table-style01::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  width: 1px;
  height: 101%;
  z-index: 20;
}
.table-style01 thead tr {
  width: 100%;
  background: #f7f7f7;
}
.table-style01 th,
.table-style01 td {
  vertical-align: middle;
  word-break: break-all;
  padding: 17px 10px 16px 10px;
  font-size: 14px;
  line-height: 20px;
  border: 1px solid #eee;
}
.table-style01 th {
  border-bottom: none !important;
  font-weight: 700;
}
.table-style01 td {
  border-color: #eee !important;
}
.table-style01 td.tal {
  text-align: left;
}
.table-style01 td .td-wrap {
  line-height: 20px;
  font-weight: 400;
}
.table-style01 .pad-type4 td {
  padding: 14px;
}
.table-style01 .large-table td {
  padding: 30px 20px;
}
.table-style01 .large-table .td-line {
  line-height: 20px;
}

/*----------------------------------------*\
  || Table New Style
\*----------------------------------------*/
.table-newstyle01 {
  width: 100%;
}
.table-newstyle01 thead th {
  height: 40px;
  border-bottom: 1px solid var(--disable-clr);
  border-left: 1px solid var(--disable-clr);
  background: #f7f7f7;
  color: var(--body-clr);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.table-newstyle01 thead th:first-child {
  border-left: none;
}
.table-newstyle01 tbody th {
  height: 50px;
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  background: #f7f7f7;
  color: var(--body-clr);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.table-newstyle01 tbody th:first-child {
  border-left: none;
}
.table-newstyle01 tbody th.thsub {
  background: #fcfcfc;
  font-size: 300;
}
.table-newstyle01 tbody td {
  height: 50px;
  border-top: 1px solid #efefef;
  border-left: 1px solid #efefef;
  color: var(--body-clr);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}
.table-newstyle01 tbody td:first-child {
  border-left: none;
}
.table-newstyle01 tbody td.text-type01 {
  padding: 15px 5px 13px 42px;
  font-weight: 700;
  text-align: left;
  line-height: 25px;
}

/*----------------------------------------*\
  || Table custom
\*----------------------------------------*/
.table-type02-foot {
  padding: 0;
}
.table-type02-foot .td-box.width2 {
  width: 50%;
}
.table-type02-foot .td-box.line {
  position: relative;
}
.table-type02-foot .td-box.line::after {
  content: "";
  width: 1px;
  height: 20px;
  background: var(--disable-clr);
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
}
.table-type02-foot .td-box.width4 {
  width: 33%;
  padding: 18px 13px;
}
.table-type02-foot .td-box.width4:nth-child(2), .table-type02-foot .td-box.width4:nth-child(3) {
  width: 17%;
}
.table-type02-foot .td-box.width4 .tal {
  width: auto;
  float: left;
}
.table-type02-foot .td-box.width4 .td-box02 {
  width: auto;
  float: right;
}
.table-type02-foot .td-box.width4 .td-box02 .money {
  padding: 0;
}
.table-type02-foot .td-box {
  width: calc(35.1% - 22px);
  float: left;
  padding: 18px 20px;
}
.table-type02-foot .td-box02 {
  float: right;
  width: 65%;
}
.table-type02-foot .tal {
  width: 34%;
  display: inline-block;
  text-align: left;
  padding-top: 4px;
}

.table-wrap01:has(+ .table-type03-foot) table th,
.table-wrap01:has(+ .table-type03-foot) table td {
  border: 1px solid #efefef;
}

.table-type03-foot {
  display: flex;
  align-items: center;
  padding: 20px;
  position: relative;
  border-color: #efefef;
}
.table-type03-foot:has(.btn-clickbox) {
  padding: 10px 20px;
}
.table-type03-foot .btn-clickbox {
  padding-top: 0;
  text-align: left;
}
.table-type03-foot .td-box {
  display: flex;
  align-items: flex-end;
  min-width: fit-content;
  margin-left: auto;
}
.table-type03-foot .btn-sm-wh {
  width: fit-content;
  max-width: none;
  padding: 15px;
}

.wide-table th {
  padding: 22px 10px;
}

.wide-table td {
  padding: 22px 10px;
}

.write .table-type01 td {
  height: 60px;
}
.write .table-type01 td input,
.write .table-type01 td select {
  margin-top: -1px;
}
.write .table-type04 td {
  height: 60px;
  padding: 11px 20px 9px;
}

/*----------------------------------------*\
  || Table Clone
\*----------------------------------------*/
.table-clone {
  width: 100%;
  padding: 20px;
  background: #f7f7f7;
  border-top: 1px solid var(--line-clr3);
  border-radius: 20px;
  overflow: hidden;
}
.table-clone.bg-f7 {
  background: #f7f7f7 !important;
  padding: 18px 20px;
}
.table-clone.bg-f7 p {
  line-height: 1.4;
}
.table-clone .table-top {
  width: 250px;
  padding: 15px 20px;
  border-right: 1px solid var(--disable-clr);
}
.table-clone .table-cell:first-child {
  font-size: 16px;
  font-weight: 500;
}
.table-clone .notice-subtxt {
  font-weight: 500;
  font-size: 14px;
}
.table-clone .s-txt {
  font-size: 14px;
  line-height: 1.5;
}

/*----------------------------------------*\
  || Condensed
\*----------------------------------------*/
.condensed-head th,
.condensed td {
  padding: 15px 20px;
}

.condensed-thin td {
  padding: 10px !important;
}
.condensed-thin td .btn-table {
  height: 40px;
}

.condensed-type01 td {
  padding: 20px;
}

/*----------------------------------------*\
  || Code Table
\*----------------------------------------*/
.code-box {
  display: inline-block;
}

.code-table {
  width: 100%;
  padding: 40px 20px;
}
.code-table .table-cell:first-child {
  width: 280px;
}
.code-table .otp-img {
  width: 247px;
}
.code-table .otp-img > img {
  width: 100%;
}
.code-table.type02 {
  padding: 21px 30px 0 15px;
  font-size: 0;
}
.code-table.type02 .notice-list {
  display: inline-block;
  margin-left: 2px;
  vertical-align: 67px;
}

/*----------------------------------------*\
  || Gap
\*----------------------------------------*/
table th .tab-basic:first-child,
table th .search-select-area:first-child,
table th .search-table-area:first-child,
table th .cach-content-wrap:first-child,
table th .info-table-area:first-child,
table th .slide-box-area:first-child,
table th .slide-box-area.type02:first-child,
table th .ui-accordion-list:first-child,
table th .notice-area-wrap:first-child,
table th .document-area:first-child,
table th .dot-list-wrap:first-child,
table th .login-box-wrap:first-child,
table th .notice-list-wrap:first-child,
table td .tab-basic:first-child,
table td .search-select-area:first-child,
table td .search-table-area:first-child,
table td .cach-content-wrap:first-child,
table td .info-table-area:first-child,
table td .slide-box-area:first-child,
table td .slide-box-area.type02:first-child,
table td .ui-accordion-list:first-child,
table td .notice-area-wrap:first-child,
table td .document-area:first-child,
table td .dot-list-wrap:first-child,
table td .login-box-wrap:first-child,
table td .notice-list-wrap:first-child {
  margin-top: 0;
  padding-top: 0;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
.table-pc {
  display: block;
}

.table-mobile {
  display: none;
}

@media (max-width: 1200px) {
  html.responsive .table-pc {
    display: none;
  }
  html.responsive .table-mobile {
    display: block;
  }
  html.responsive .search-table-area.table-areapd {
    padding-top: 0px !important;
  }
  html.responsive .search-table-area.respon {
    padding-bottom: 20px;
    margin-bottom: 0;
  }
  html.responsive .table-wrap01.wt {
    border: 0;
  }
  html.responsive .table-type01 {
    background-color: #eeeff1;
  }
  html.responsive .table-type01.loan .se-td {
    border: 0;
    width: 100%;
  }
  html.responsive .table-type01.loan .se-td::before {
    display: none;
  }
  html.responsive .table-type01.loan .se-td:first-child {
    border-top: 1px solid var(--body-clr);
  }
  html.responsive .table-type01.loan .se-td:last-child .td-wrap {
    padding-bottom: 20px;
  }
  html.responsive .table-type01.loan .se-td .td-wrap {
    padding-bottom: 0;
  }
  html.responsive .table-type01.loan .se-td .td-wrap button {
    margin-bottom: 10px;
  }
  html.responsive .table-type01 th,
  html.responsive .table-type01 td {
    padding: 0;
    border: 0;
    font-size: 13px;
    background-color: var(--bg-clr2);
  }
  html.responsive .table-type01 th.respon {
    display: table-cell;
  }
  html.responsive .table-type01 .session::before {
    content: "";
    display: block;
    float: none;
    clear: both;
    width: 100%;
    height: 10px;
    background: var(--line-clr3);
  }
  html.responsive .table-type01 th[scope],
  html.responsive .table-type01 .table-center::before,
  html.responsive .table-type01 .session.child::before,
  html.responsive .table-type01 .session:first-child::before,
  html.responsive .table-type01 .no-data [data-cell-header]::before,
  html.responsive .table-type01 .child [data-cell-header]::before {
    display: none;
  }
  html.responsive .table-type01 .se-td {
    position: relative;
    display: table;
    width: 100%;
    table-layout: fixed;
    float: left;
    border-top: 1px solid var(--disable-clr);
    align-items: center;
  }
  html.responsive .table-type01 .se-td .td-wrap {
    display: table-cell;
    font-size: 13px;
    padding: 12px 16px;
    text-align: left;
  }
  html.responsive .table-type01 [data-cell-header]::before {
    content: attr(data-cell-header);
    display: table-cell;
    width: 145px;
    padding: 10px 16px;
    background: #f7f7f7;
    border-right: 1px solid var(--disable-clr);
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
    text-align: left;
    box-sizing: border-box;
  }
  html.responsive .table-type01 .child .td-wrap,
  html.responsive .table-type01 .no-data .td-wrap,
  html.responsive .table-type01 .table-center .td-wrap {
    width: 100%;
    text-align: center;
  }
  html.responsive .table-type01-foot {
    border-top: 2px solid var(--body-clr);
    border-bottom: 1px solid var(--disable-clr);
    background: var(--bg-clr2);
  }
  html.responsive .td-box {
    width: 100%;
    display: table;
    table-layout: fixed;
  }
  html.responsive .td-box > span {
    font-size: 15px;
    display: table-cell;
    padding: 10px 0;
  }
  html.responsive .td-box .tal {
    padding-left: 15px;
  }
  html.responsive .td-box .won {
    width: 40px;
    padding-right: 15px;
  }
  html.responsive .td-box .money {
    padding: 0;
    font-size: 20px;
  }
  html.responsive .table-type03-w {
    display: none;
  }
  html.responsive .table-type03-m {
    display: table;
  }
  html.responsive .table-type03-m th,
  html.responsive .table-type03-m td {
    padding: 10px 16px;
    font-size: 13px;
    line-height: 15px;
    text-align: left;
    vertical-align: middle;
  }
  html.responsive .table-type04.style01 td, html.responsive .table-type04.style01 th {
    width: auto;
  }
  html.responsive .table-type04 th,
  html.responsive .table-type04 td {
    padding: 10px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--disable-clr);
  }
  html.responsive .table-type04 tbody tr:last-child th,
  html.responsive .table-type04 tbody tr:last-child td {
    border-bottom: 0;
  }
  html.responsive .table-type03-m,
  html.responsive .table-type04 {
    width: 100%;
  }
  html.responsive .table-type03-m th,
  html.responsive .table-type04 th {
    background: #f7f7f7;
    width: 43%;
    font-weight: 700;
  }
  html.responsive .table-type03-m td,
  html.responsive .table-type04 td {
    width: 57%;
  }
  html.responsive .table-style01 td {
    padding-left: 10px !important;
  }
  html.responsive .col-style02 {
    width: 115px;
  }
  html.responsive .condensed th {
    padding: 13px 16px;
  }
  html.responsive .condensed td {
    padding: 13px 16px;
  }
  html.responsive .tbl-style01 {
    border-top: 1px solid var(--body-clr);
  }
  html.responsive .tbl-style01 li {
    border-bottom: 1px solid var(--disable-clr);
  }
  html.responsive .tbl-style01 li .link {
    display: block;
    padding: 20px 18px;
  }
  html.responsive .tbl-style01 li .link .thema {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
  }
  html.responsive .tbl-style01 li .link .date {
    margin-top: 5px;
    color: #666;
    font-size: 12px;
  }
  html.responsive .tbl-style01 li .link .btn {
    margin-top: 15px;
  }
  .table-style01 th,
  .table-style01 td {
    padding: 12px 5px;
    font-size: 12px;
    line-height: 18px;
  }
  .child .table {
    display: block !important;
    margin-bottom: 0;
  }
  .child .td-wrap {
    padding: 32px 7.5%;
  }
  .child .table-cell {
    display: block !important;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
  }
  .child .ses-title {
    font-size: 16px;
  }
  .child .btn-area {
    padding: 0;
    margin-top: 0;
    border-top: 0;
  }
  .child .btn-area button {
    margin: 0;
  }
}
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  html.responsive .table-type04.type-col colgroup {
    display: none;
  }
  html.responsive .table-type04.type-col th {
    display: block;
    width: 100% !important;
    height: auto;
    padding: 15px;
    border-right: none;
    border-bottom: 1px solid var(--line-clr);
  }
  html.responsive .table-type04.type-col td {
    display: block;
    width: 100% !important;
    height: auto;
    padding: 15px;
  }
  html.responsive .table-type04.type-col td::after {
    content: "";
    display: block;
    clear: both;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.agreement-txt-point li {
  font-size: 12px;
  line-height: 18px;
}

.prev-term {
  padding: 8px 20px 20px 20px;
}

/*----------------------------------------*\
  || Slide Box Wrap
\*----------------------------------------*/
.slide-box-wrap {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}

/*----------------------------------------*\
  || Slide Box Area
\*----------------------------------------*/
.slide-box-area {
  /* 스타저축은행 */
}
.slide-box-area.type01:not(:first-child) {
  margin-top: 45px;
}
.slide-box-area.type01 .slide-box-top {
  padding: 23px 15px 20px;
}
.slide-box-area.type01 .slide-box-top .sub-title {
  color: var(--body-clr);
  font-size: 18px;
}
.slide-box-area.type01 .slide-box-txt {
  height: 213px;
}
.slide-box-area.type01 .slide-box-txt.type01 {
  height: 300px;
}
.slide-box-area.type01 .slide-box-txt p {
  font-size: 14px;
}
.slide-box-area.type01 .slide-box-txt .title {
  margin-top: 20px;
  margin-bottom: 0;
  color: var(--body-clr);
  font-size: 14px;
  font-weight: 500;
}
.slide-box-area.type01 .slide-box-txt .title:first-child {
  margin-top: 0;
}
.slide-box-area.type01 .slide-box-txt .title + .termlist-box, .slide-box-area.type01 .slide-box-txt .title + .text {
  margin-top: 27px;
}
.slide-box-area.type01 .slide-box-txt .text {
  margin-bottom: 0;
}
.slide-box-area.type01 .slide-box-txt .termlist-box {
  margin-top: 27px;
}
.slide-box-area.type01 .termlist-box li {
  color: var(--body-clr);
  font-size: 14px;
  line-height: 25px;
}
.slide-box-area.type02 {
  margin-top: 40px;
  border-top: 1px solid var(--disable-clr);
}
.slide-box-area.type02:has(.ui-accordion-list) {
  border-top: none;
}
.slide-box-area.type02 + .slide-box-area.type02.type02 {
  margin-top: 0;
  border: 0;
}
.slide-box-area.type02.qna .slide-box-top .sub-title {
  font-size: 14px;
  margin: 23px 0;
}
.slide-box-area.type02 .btn-right-wrap::after {
  content: "";
  clear: both;
  float: none;
  display: block;
}
.slide-box-area.type02 .table {
  background: var(--bg-clr2);
  border-color: transparent !important;
}
.slide-box-area.type02 .table-cell p {
  margin-bottom: 10px;
}
.slide-box-area.type02 .table-cell p:last-child {
  margin-bottom: 0;
}
.slide-box-area.type02 .label-wrap {
  margin-right: 20px;
  position: relative;
}
.slide-box-area.type02 .label-wrap:first-child::before {
  position: absolute;
  left: -12px;
  top: 3px;
  content: "( ";
}
.slide-box-area.type02 .label-wrap:last-child {
  margin-right: 0;
  padding-right: 10px;
}
.slide-box-area.type02 .label-wrap:last-child::after {
  position: absolute;
  right: 0px;
  top: 3px;
  content: " )";
}
.slide-box-area.type02 .slide-box-top .label-wrap .chk-label {
  color: #666;
  font-weight: 500;
}
.slide-box-area.type02 .agree-n .label-wrap:first-child::before,
.slide-box-area.type02 .agree-n .label-wrap:last-child::after,
.slide-box-area.type02 .slide-box-top .label-wrap:first-child::before,
.slide-box-area.type02 .slide-box-top .label-wrap:last-child::after,
.slide-box-area.type02 .chk-agree .label-wrap:first-child::before,
.slide-box-area.type02 .chk-agree .label-wrap:first-child::after {
  display: none;
}
.slide-box-area.type03 {
  margin-top: 40px;
}
.slide-box-area.agree {
  margin-top: 40px !important;
}
.slide-box-area.bottom {
  margin-bottom: 50px;
}
.slide-box-area.bottom h3 {
  margin: 20px 0;
  font-size: 16px;
  color: var(--cap-clr);
}
.slide-box-area.only-top .slide-box-top {
  border-bottom: 1px solid var(--disable-clr);
  border-top: 0 !important;
}
.slide-box-area.star-bank .slide-box-top {
  padding: 23px 15px 20px;
}
.slide-box-area.star-bank .slide-box-top .sub-title {
  color: var(--body-clr);
  font-size: 18px;
}
.slide-box-area.star-bank .slide-box-txt {
  height: 213px;
}
.slide-box-area.star-bank .slide-box-txt p {
  font-size: 14px;
}
.slide-box-area.star-bank .slide-box-txt .title {
  margin-bottom: 0;
  font-weight: 500;
}
.slide-box-area.star-bank .slide-box-txt .text {
  margin-top: 28px;
  margin-bottom: 0;
  line-height: 26px;
}
.slide-box-area.qna .sub-title {
  font-size: 14px;
  font-weight: 400;
}
.slide-box-area.qna .slide-box-txt {
  position: relative;
  height: auto;
  max-height: 1000px;
  padding-left: 60px;
  font-weight: 400;
  background: #f7f7f7;
}
.slide-box-area.qna .slide-box-txt::before {
  content: "A";
  top: 30px;
  color: var(--neg-clr);
}
.slide-box-area.qna .slide-box-txt p {
  font-weight: 400;
}
.slide-box-area.qna .ui-accordion-text::before,
.slide-box-area.qna .slide-box-txt::before {
  position: absolute;
  top: 20px;
  left: 25px;
  content: "Q";
  color: var(--main-clr);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}
.slide-box-area.qna .ui-accordion-list.js-ui-accordion-wrap .ui-accordion-text {
  position: relative;
  padding-left: 60px;
  font-size: 14px;
  line-height: 18px;
  padding-top: 21px;
  padding-bottom: 21px;
  color: var(--body-clr);
  font-weight: 400;
}
.slide-box-area.qna .ui-accordion-head {
  background: none;
  border-bottom-color: #efefef;
}
.slide-box-area.qna .ui-accordion-layer {
  border-bottom-color: #efefef;
}
.slide-box-area.qna .ui-accordion-opener {
  border-left-color: #efefef;
}
.slide-box-area.pay {
  margin-bottom: 60px;
}
.slide-box-area.pay .slide-box-txt {
  height: auto;
  padding: 40px;
  background: #efefef;
}
.slide-box-area.pay .document-area {
  background: var(--bg-clr2);
  margin-bottom: 0;
  border: 0;
}
.slide-box-area.pay .ui-accordion-head {
  background: none;
}
.slide-box-area.pay .ui-accordion-text {
  position: relative;
  padding-left: 60px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.slide-box-area.pay .ui-accordion-text .b-number {
  display: block;
  position: absolute;
  top: 17px;
  left: 20px;
  font-size: 22px;
  line-height: 26px;
  font-weight: 500;
  margin-right: 10px;
}
.slide-box-area.pay .table-type03-w .table-th02 {
  background: #fcfcfc;
}
.slide-box-area .sub-title-area {
  margin-top: 20px;
}
.slide-box-area .sub-title, .slide-box-area.type02 .sub-title {
  color: var(--body-clr);
  font-size: 22px;
}
.slide-box-area .btn-downlode, .slide-box-area.type02 .btn-downlode {
  display: none;
  border-right: 0;
  padding: 23px 20px 23px 40px;
}
.slide-box-area .btn-slide,
.slide-box-area .btn-slide-active .btn-slide, .slide-box-area.type02 .btn-slide, .slide-box-area.type02 .btn-slide-active .btn-slide {
  position: static;
  padding: 0;
  height: 60px;
  float: right;
  border-left: 1px solid var(--disable-clr);
  background: #b5b5b5 url("/img/common/icon_select_fff_up.png") no-repeat center;
}
.slide-box-area .btn-slide-active .btn-slide, .slide-box-area.type02 .btn-slide-active .btn-slide {
  background: #f7f7f7 url("/img/common/icon_select_333.png") no-repeat center;
  transform: none;
}

.tts + .slide-box-area {
  margin-top: 40px;
}

/*----------------------------------------*\
  || Slide Box Top
\*----------------------------------------*/
.slide-box-top {
  padding-left: 20px;
  background: #f7f7f7;
  border-top: 1px solid #efefef;
}
.slide-box-top + .ui-accordion-list {
  border-top: none;
}
.slide-box-top + .notice-list-wrap {
  padding-top: 24px;
}
.slide-box-top + .slide-box-txt {
  border-bottom: 1px solid #efefef;
}
.slide-box-top h3 {
  margin: 20px 0;
  color: var(--cap-clr);
}
.slide-box-top .sub-title {
  margin: 19px 0;
}
.slide-box-top .radio-agree-wrap {
  padding: 25px;
}

.agree-title {
  display: inline-block;
  padding: 23px 0 21px;
  font-size: 16px;
  font-weight: 500;
}

.radio-agree-wrap {
  float: left;
  padding: 22px;
}
.radio-agree-wrap label {
  margin-right: 40px;
}
.radio-agree-wrap label:last-child {
  margin-right: 0;
}

/*----------------------------------------*\
  || Slide Box TXT
\*----------------------------------------*/
.slide-box-txt {
  position: relative;
  max-width: 100%;
  max-height: 230px;
  overflow-y: auto;
  padding: 30px 20px;
  border-bottom: 1px solid var(--disable-clr);
  background: var(--bg-clr2);
}
.slide-box-txt.h-auto {
  height: auto;
  min-height: 520px;
}
.slide-box-txt.radio-box-wrap {
  height: auto;
  padding: 30px 20px 25px 20px;
}
.slide-box-txt h4,
.slide-box-txt > p {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.7;
}
.slide-box-txt a {
  display: inline;
}
.slide-box-txt .component-layer-close-button {
  display: block;
  position: absolute;
  top: -60px;
  right: 0;
  width: 60px;
  height: 60px;
}
.slide-box-txt .tit {
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
}
.slide-box-txt .agreement-subtit {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
}
.slide-box-txt .agreement-subtext {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
}
.slide-box-txt .agreement-num {
  padding-left: 27px;
}
.slide-box-txt .agreement-num li {
  font-size: 13px;
  list-style: dash;
  line-height: 20px;
}
.slide-box-txt .agreement-subtext + .agreement-subtit {
  margin-top: 20px;
}
.slide-box-txt .notice-list.nolist-type2.none li {
  padding-left: 0;
}
.slide-box-txt .notice-list.nolist-type2.none li::before {
  display: none;
}
.slide-box-txt .table-wrap01 {
  margin-top: 10px;
  margin-bottom: 20px;
}
.slide-box-txt .agreement-subtext + .agreement-definition dl {
  margin-bottom: 10px;
}
.slide-box-txt .agreement-definition dt,
.slide-box-txt .agreement-definition dd {
  display: inline-block;
  font-size: 14px;
  line-height: 24px;
}
.slide-box-txt .agreement-definition dd {
  width: 94%;
}
.slide-box-txt .slide-txt-title {
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 500;
  line-height: 1.4;
}

.btn-slide-active .sub-title {
  color: var(--cap-clr) !important;
}

.slide-box-txt,
.slide-box-txt p:last-child {
  margin-bottom: 0;
}

.table .table-cell {
  vertical-align: middle;
}

.phone-mark {
  display: block;
  float: left;
  margin-right: 10px;
  line-height: 43px;
}

/*----------------------------------------*\
  || Check Agree
\*----------------------------------------*/
.check-agree-wrap {
  padding: 21px;
}
.check-agree-wrap .label-wrap {
  margin-right: 20px;
  font-size: 12px;
}
.check-agree-wrap .label-wrap:nth-of-type(5) {
  margin-right: 0;
}
.check-agree-wrap .label-wrap span.chk-label {
  font-weight: 700;
  color: #666;
}
.check-agree-wrap .check-span {
  font-weight: 700;
  color: #666;
  margin: 3px;
}

.check-box-wrap02 .label-wrap {
  margin-right: 18px;
}

.img-wrap {
  margin-top: 40px;
}

/*----------------------------------------*\
  || Termsconditions
\*----------------------------------------*/
.termsconditions_box {
  font-size: 14px;
  line-height: 1.5;
}
.termsconditions_box .termsconditions_thema01 {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}
.termsconditions_box .termsconditions_thema01:first-child {
  margin-top: 0;
}
.termsconditions_box .termsconditions_thema02 {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
}
.termsconditions_box .termsconditions_title01,
.termsconditions_box .termsconditions_title02 {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}
.termsconditions_box .termsconditions_title01 + .termsconditions_tablebox,
.termsconditions_box .termsconditions_title02 + .termsconditions_tablebox {
  margin-top: 5px;
}
.termsconditions_box .termsconditions_thema01 + .termsconditions_title01,
.termsconditions_box .termsconditions_title02 {
  margin-top: 30px;
}
.termsconditions_box .termsconditions_title01:first-child {
  margin-top: 0;
}
.termsconditions_box .termsconditions_text01 {
  font-size: 14px;
  line-height: 1.7;
}
.termsconditions_box .termsconditions_list {
  margin-top: 15px;
}
.termsconditions_box .termsconditions_list li {
  font-size: 14px;
  line-height: 1.5;
}
.termsconditions_box .termsconditions_caution {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.7;
}
.termsconditions_box .paymentinfo-wrap {
  margin-bottom: 15px;
}

.termsconditions_tablebox {
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid var(--disable-clr);
}
.termsconditions_tablebox + .termsconditions_tablebox {
  margin-top: 15px;
}
.termsconditions_tablebox td .label-wrap:first-child {
  margin-left: 10px;
}

.chk-wrap + .termsconditions_tablebox {
  margin-top: 15px;
}

.termsconditions_table01 {
  width: 100%;
  table-layout: fixed;
  text-align: center;
  color: var(--body-clr);
  border: 0;
}
.termsconditions_table01 thead tr {
  width: 100%;
  background: #f7f7f7;
}
.termsconditions_table01 tbody tr:last-child > td {
  border-bottom: none;
}
.termsconditions_table01 th,
.termsconditions_table01 td {
  vertical-align: middle;
  word-break: break-all;
  padding: 17px 10px 16px 10px;
  font-size: 14px;
  line-height: 20px;
  word-break: auto-phrase;
}
.termsconditions_table01 th:last-child,
.termsconditions_table01 td:last-child {
  border-right: none;
}
.termsconditions_table01 th {
  height: 40px;
  padding: 9px 10px 8px 10px !important;
  font-weight: 700;
  border-right: 1px solid var(--disable-clr);
  border-bottom: 1px solid var(--disable-clr);
}
.termsconditions_table01 td {
  height: 50px;
  padding: 14px 10px 13px 10px !important;
  border-right: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.termsconditions_table01 td .td-wrap {
  line-height: 20px;
}

.termsconditions_table02 {
  width: 100%;
}
.termsconditions_table02 tr:last-child th,
.termsconditions_table02 tr:last-child td {
  border-bottom-width: 0px;
}
.termsconditions_table02 th,
.termsconditions_table02 td {
  border-bottom: 1px solid #efefef;
  font-size: 14px;
  text-align: left;
  line-height: 22px;
  vertical-align: middle;
}
.termsconditions_table02 th {
  width: 249px;
  padding: 15px 20px 14px 20px;
  background: #f7f7f7;
  border-right: 1px solid var(--disable-clr);
  font-weight: 700;
  font-size: 14px;
}
.termsconditions_table02 td {
  height: 50px;
  padding: 6px 20px 4px 20px;
  background: var(--bg-clr2);
}

.termsconditions_box input[type=checkbox] + label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url(/img/common/icon_chk_off.png) no-repeat center/contain;
}
.termsconditions_box input[type=checkbox]:checked + label::after {
  background-image: url("/img/common/icon_chk2.png");
}
.termsconditions_box .chk-wrap .label-wrap label {
  display: inline-block;
  padding: 3px 0 0 28px;
}
.termsconditions_box .chk-wrap .label-wrap i {
  float: left;
  margin-top: 0;
}
.termsconditions_box .chk-wrap .label-wrap:first-child {
  margin-left: 10px;
}
.termsconditions_box .label-wrap:first-child::before .termsconditions_box .label-wrap:last-child::after {
  display: none;
}
.termsconditions_box .popup-checkbox-wrap.agree.agree-n,
.termsconditions_box .termsconditions_text01 {
  margin-top: 10px;
}
.termsconditions_box i.icon-chk {
  float: left;
}

.termsconditions_textbox .termsconditions_in_list li {
  font-size: 15px;
  line-height: 28px;
  padding-left: 15px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .termsconditions_box {
    padding-top: 20px;
    border-top: 1px solid #d5d5d5;
  }
  html.responsive .termsconditions_box .termsconditions_thema01 {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 700;
  }
  html.responsive .termsconditions_box .termsconditions_thema01:first-child {
    margin-top: 0;
  }
  html.responsive .termsconditions_box .termsconditions_title01,
  html.responsive .termsconditions_box .termsconditions_title02 {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 700;
  }
  html.responsive .termsconditions_box .termsconditions_text01 {
    margin-top: 15px;
    font-size: 12px;
    line-height: 1.5;
  }
  html.responsive .termsconditions_box .termsconditions_list {
    margin-top: 15px;
  }
  html.responsive .termsconditions_box .termsconditions_list li {
    font-size: 12px;
    line-height: 1.5;
  }
  html.responsive .termsconditions_box .termsconditions_caution {
    margin-top: 15px;
    font-size: 12px;
    line-height: 1.5;
  }
  html.responsive .termsconditions_box .paymentinfo-wrap {
    margin-bottom: 15px;
  }
  html.responsive .slide-box-top h3 {
    margin: 15px 0;
  }
  html.responsive .slide-box-txt h4,
  html.responsive .slide-box-txt > p {
    font-size: 14px;
    margin-bottom: 20px;
  }
  html.responsive .radio-agree-wrap {
    padding: 15px !important;
  }
  html.responsive .radio-agree-wrap label {
    margin-right: 20px;
    font-weight: 700;
  }
  html.responsive .radio-agree-wrap label:last-child {
    margin-right: 0;
  }
  html.responsive .slide-box-area.type02.qna .slide-box-top .sub-title {
    width: 80%;
  }
  html.responsive .slide-box-area.type02.qna .slide-box-txt {
    padding: 15px 20px 15px 60px;
  }
  html.responsive .slide-box-area.type02.qna .slide-box-txt p {
    margin-bottom: 0;
  }
  html.responsive .slide-box-area.agree {
    margin-top: 0px !important;
  }
  html.responsive .slide-box-area.qna .slide-box-txt::before, html.responsive .slide-box-area.qna .ui-accordion-text::before {
    top: 15px;
  }
  html.responsive .slide-box-area.qna .ui-accordion-text {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  html.responsive .slide-box-area .btn-slide,
  html.responsive .slide-box-area .btn-slide-active .btn-slide,
  html.responsive .slide-box-area.type02 .btn-slide,
  html.responsive .slide-box-area.type02 .btn-slide-active .btn-slide {
    height: inherit;
  }
  html.responsive .table-exp.fr {
    font-size: 12px;
    text-align: left;
    float: left !important;
  }
}
/*----------------------------------------*\
  || Main Title
\*----------------------------------------*/
.main-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 31px;
  color: var(--tit-clr);
}

@media (max-width: 1200px) {
  .main-title {
    font-size: 24px;
    line-height: 26px;
  }
  .main-title img {
    height: 28px;
  }
}
@media (max-width: 768px) {
  .main-title {
    font-size: 20px;
    line-height: 24px;
  }
  .main-title img {
    height: 22px;
  }
}
/*----------------------------------------*\
  || Page Title
\*----------------------------------------*/
.page-main-title {
  margin: 40px 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 43px;
  color: var(--tit-clr);
}

.page-main-txt {
  margin: 20px 0 40px;
  font-size: 24px;
  line-height: 32px;
  color: var(--tit-clr);
}
.page-main-txt strong {
  color: var(--main-clr);
}

.page-sub-title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--tit-clr);
}

.page-heading {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--tit-clr);
  word-break: auto-phrase;
}
.page-heading .sub {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 19px;
  color: #666;
}

.page-sub-heading {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  color: var(--tit-clr);
}

.page-count {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  line-height: 19px;
  color: var(--tit-clr);
}
.page-count strong {
  font-size: 18px;
  line-height: 21px;
  color: var(--main-clr);
}

:where(.page-main-title, .page-sub-title, .page-sub-heading)[aria-expanded] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: all 0.3s ease;
}
:where(.page-main-title, .page-sub-title, .page-sub-heading)[aria-expanded][aria-expanded=false] {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .page-main-title {
    margin: 10px 0 30px;
    font-size: 26px;
    line-height: 34px;
  }
}
/*----------------------------------------*\
  || Page Result Text
\*----------------------------------------*/
.page-result-wrap {
  margin: 20px auto 40px;
  text-align: center;
}
.page-result-wrap .img {
  width: 80px;
  height: 80px;
}
.page-result-wrap .txt {
  display: block;
  margin-top: 20px;
  font-size: 24px;
  line-height: 28px;
  color: var(--main-clr);
}
.page-result-wrap .des {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 19px;
  color: #666;
}
.page-result-wrap.fail .txt {
  color: var(--neg-clr);
}

/*----------------------------------------*\
  || Tag
\*----------------------------------------*/
.basic-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 28px;
  padding: 0 6px;
  border: 2px solid var(--tit-clr);
  border-radius: 17px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.basic-tag.size-s {
  min-width: fit-content;
  height: 18px;
  padding: 0 8px;
  border-width: 1px;
  font-size: 12px;
  font-weight: 400;
}
.basic-tag.neg {
  border-color: var(--neg-clr);
  color: var(--neg-clr);
}

/*----------------------------------------*\
  || Link
\*----------------------------------------*/
.arrow-link {
  display: inline-block;
  background: url(/img/common/icon/icon_arrow_right.png) no-repeat right 4px center;
  background-size: 7px;
  padding-right: 17px;
  font-size: 18px;
  line-height: 21px;
  font-weight: 700;
  color: var(--tit-clr);
  text-underline-offset: 4px;
}
.arrow-link.type-m {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
}
.arrow-link.type-mint {
  filter: invert(46%) sepia(70%) saturate(4498%) hue-rotate(152deg) brightness(98%) contrast(94%);
}

/*----------------------------------------*\
  || Message
\*----------------------------------------*/
.msg-mini-box {
  display: inline-block;
  padding: 4px 8px;
  background-color: var(--line-clr);
  border-radius: 16px;
  font-size: 14px;
  line-height: 150%;
  position: relative;
}
.msg-mini-box[class*=type] {
  padding: 4px 8px 4px 22px;
}
.msg-mini-box[class*=type]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}
.msg-mini-box.type01::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none"><path d="M6 9.72514L8.4654 12.5L13 7.5" stroke="%2300A29C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.msg-mini-box.type02::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none"><path d="M15.8204 13.7327L10.2188 3.71486C9.96845 3.26724 9.51284 3 8.99999 3C8.48713 3 8.03154 3.26724 7.78125 3.71486L2.17959 13.7327C1.93518 14.1699 1.94052 14.6887 2.19389 15.1207C2.44727 15.5527 2.89753 15.8106 3.39833 15.8106H14.6017C15.1025 15.8106 15.5527 15.5527 15.8061 15.1207C16.0595 14.6888 16.0648 14.1699 15.8204 13.7327Z" fill="url(%23paint0_linear_62177_194279)"/><g filter="url(%23filter0_i_62177_194279)"><path d="M9.09781 6.34464C9.33422 6.34464 9.55688 6.43671 9.72381 6.60364C9.89075 6.77057 9.98281 6.99323 9.98281 7.22963C9.98281 7.46604 9.89074 7.68871 9.72381 7.85565C9.55689 8.02258 9.33422 8.11465 9.09781 8.11465C8.8614 8.11465 8.63874 8.02258 8.47181 7.85565C8.30488 7.68871 8.21281 7.46605 8.21281 7.22963C8.21281 6.99322 8.30488 6.77057 8.47181 6.60364L9.09781 6.34464ZM9.09781 6.34464C8.8614 6.34464 8.63874 6.43671 8.47181 6.60364L9.09781 6.34464Z" fill="white" stroke="white" stroke-width="0.2"/><path d="M8.57629 13.8834L8.57629 13.8834C8.43828 13.7454 8.36261 13.5602 8.36261 13.3631L8.36261 9.53583C8.36261 9.33882 8.43828 9.15359 8.57629 9.01559L8.647 9.0863L8.57629 9.01559C8.7143 8.87758 8.89954 8.80192 9.09655 8.80192C9.29355 8.80192 9.47878 8.87758 9.61679 9.01559C9.7548 9.15359 9.83047 9.33882 9.83047 9.53583L9.83047 13.3631C9.83047 13.5602 9.7548 13.7454 9.61679 13.8834M8.57629 13.8834L9.61679 13.8834M8.57629 13.8834C8.71431 14.0214 8.89954 14.0971 9.09655 14.0971C9.29355 14.0971 9.47879 14.0214 9.61679 13.8834M8.57629 13.8834L9.54608 13.8127L9.61679 13.8834" fill="white" stroke="white" stroke-width="0.2"/></g><defs><filter id="filter0_i_62177_194279" x="7.81328" y="5.94512" width="2.26875" height="8.25215" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dx="-0.3" dy="-0.3"/><feGaussianBlur stdDeviation="0.15"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 1 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow_62177_194279"/></filter><linearGradient id="paint0_linear_62177_194279" x1="3.59091" y1="5.95629" x2="13.3195" y2="18.3265" gradientUnits="userSpaceOnUse"><stop stop-color="%23FFD075"/><stop offset="1" stop-color="%23FAC154"/></linearGradient></defs></svg>');
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.h-title {
  margin: 20px 0;
  font-size: 24px;
  font-weight: 700;
}

.h-sub {
  width: 100%;
  margin: 10px 0;
  font-size: 14px;
  font-weight: 700;
}

.hyphen {
  float: left;
  margin-right: 10px;
  line-height: 40px;
}

.font105 {
  font-size: 16px;
}

/*----------------------------------------*\
  || Title Wrap / Title Top
\*----------------------------------------*/
.title-wrap {
  width: 100%;
}

.title-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}

/* 타이틀 오른쪽 접속일시 */
.connect-time {
  display: block;
  float: right;
  padding: 15px 20px;
  background-color: var(--bg-clr1);
  border-radius: 7px;
}
.connect-time dt,
.connect-time dd {
  float: left;
  font-size: 12px;
}
.connect-time dt {
  font-weight: 500;
}
.connect-time dd::before {
  content: ":";
  display: block;
  float: left;
  margin: 0 10px;
}

/*----------------------------------------*\
  || Page Title
\*----------------------------------------*/
.page-title {
  font-size: 36px;
  font-weight: 500;
  line-height: 43px;
}

/*----------------------------------------*\
  || Sub Title
\*----------------------------------------*/
.sub-title-area.type01 {
  padding-bottom: 9px;
}
.sub-title-area.type02 {
  margin-top: 40px;
}
.sub-title-area.t-pad {
  padding-top: 60px;
}

.sub-title.sm {
  font-size: 18px;
}

.sub-title02 {
  font-size: 16px;
  font-weight: 500;
  padding: 22px;
  float: left;
}

/*----------------------------------------*\
  || Mint Point Line
\*----------------------------------------*/
.mint-point-line {
  display: inline-block;
  position: relative;
  font-weight: bold;
  color: var(--tit-clr);
  z-index: 2;
  font-size: 18px;
}
.mint-point-line::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  width: 100%;
  background: #8ff4f3;
  z-index: -1;
  animation: mineLineAni 0.5s ease;
}

@keyframes mineLineAni {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
/*----------------------------------------*\
  || Common Text
\*----------------------------------------*/
.common-title01 {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
}

.common-text01 {
  font-weight: 400;
}
.common-text01,
.common-text01 strong {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
  line-height: 23px;
}
.common-text01.other-txt {
  margin-top: 30px;
}
.common-text01.dot {
  padding-left: 15px;
}
.common-text01.dot:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: -2px 5px 0 -9px;
  border-radius: 50%;
  background: #666;
  vertical-align: middle;
}
.common-text01.sm-indent {
  padding-left: 17px;
  text-indent: -14px;
}
.common-text01 a {
  color: #666;
  text-decoration: underline;
}
.common-text01 a:hover {
  color: #18a33e;
}
.common-text01 + .common-stit02 {
  margin-top: 30px;
}
.common-text01 + .com-list01 {
  margin-top: 30px;
}
.common-text01 + .com-list04 {
  margin-top: 33px;
}
.common-text01 + .table-wrap01 {
  margin-top: 35px;
}
.common-text01 + .sub-title-area {
  margin-top: 30px;
}
.common-text01 .link {
  display: inline-block;
}

.common-text02 {
  font-size: 14px;
  color: #666;
  line-height: 23px;
}

.common-text03 {
  padding-left: 16px;
}

.common-text04 {
  color: #666;
  font-size: 16px;
  line-height: 24px;
}

.common-stit02 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 15px;
}

/*----------------------------------------*\
  || TXT Result
\*----------------------------------------*/
.txt-result02 .txt-s {
  color: #666;
  font-size: 16px;
}

.txt-result03.txt-type05 {
  display: inline-block;
  vertical-align: super;
}

/*----------------------------------------*\
  || Info Title
\*----------------------------------------*/
.info-title {
  margin-top: 60px;
}
.info-title.type01 {
  margin-top: 29px;
}
.info-title li {
  font-size: 16px;
}

/*----------------------------------------*\
  || Board Title : 게시판 제목
\*----------------------------------------*/
.board-title {
  width: 100%;
  display: inline-block;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-title.style01 .ico-category {
  margin-right: 15px;
}

/*----------------------------------------*\
  || Com Msg
\*----------------------------------------*/
.com-msgbox {
  padding: 32px 40px;
  background: #efefef;
}
.com-msgbox.type02 {
  margin-top: 40px;
}
.com-msgbox + .common-stit {
  margin-top: 37px;
}
.com-msgbox .common-stit02 {
  margin-top: 0;
}

.com-msg01 {
  font-size: 17px;
  line-height: 30px;
}

.com-msg02 {
  padding-left: 35px;
  font-size: 16px;
  color: #666;
  line-height: 28px;
  text-indent: -14px;
}

@media (max-width: 1200px) {
  .com-msgbox {
    padding: 25px;
    text-indent: 0;
  }
  .com-msg01,
  .com-msg02 {
    padding: 0;
    font-size: 15px;
    line-height: 24px;
  }
}
/*----------------------------------------*\
  || Message
\*----------------------------------------*/
.msb-basic {
  font-size: 14px;
  font-weight: 700;
}
.msb-basic.dot::before {
  content: "";
  background: var(--disable-clr);
  width: 5px;
  height: 5px;
  margin-right: 5px;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
}

/*----------------------------------------*\
  || Tag
\*----------------------------------------*/
.acco-tag {
  display: inline-block;
  min-width: 65px;
  padding: 5px 3px 4px;
  margin-left: 10px;
  color: var(--main-clr);
  font-size: 12px;
  text-align: center;
  box-sizing: border-box;
  background: var(--bg-clr2);
  border: 1px Solid var(--main-clr);
  border-radius: 13px;
}

.title .acco-tag {
  margin-left: 0;
}

.stopacco-tag {
  display: inline-block;
  min-width: 65px;
  padding: 5px 8px;
  margin-right: 10px;
  margin-bottom: 10px;
  color: var(--neg-clr);
  font-size: 12px;
  text-align: center;
  box-sizing: border-box;
  background: var(--bg-clr2);
  border: 1px Solid var(--neg-clr);
  border-radius: 13px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .title-wrap {
    padding: 0;
    background-color: var(--bg-clr2);
  }
  html.responsive .title-wrap.type01 {
    background: #eeeff1;
  }
  html.responsive .title-wrap.type01 .title-top {
    padding: 0 16px;
  }
  html.responsive .title-wrap.type01 .page-title {
    font-size: 24px;
  }
  html.responsive .title-wrap + .content {
    margin-top: -40px;
  }
  html.responsive .connect-time {
    display: none;
  }
  html.responsive .title-top {
    padding: 15px 16px 0;
  }
  html.responsive .page-title {
    margin-top: 20px;
    font-size: 0;
  }
  html.responsive .sub-title-area.title-areapd {
    padding-left: 22px;
    margin-bottom: 20px;
  }
  html.responsive .txt-result01 {
    font-size: 16px;
  }
  html.responsive .txt-result02 {
    font-size: 14px;
  }
  html.responsive .page-title .title-arrow {
    font-size: 24px;
  }
  html.responsive .page-title .title-arrow::after {
    width: 40px;
    height: 20px;
  }
}
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  .title-wrap {
    display: none;
    padding: 15px 16px 0;
    background-color: var(--bg-clr2);
  }
  .title-top {
    padding: 0;
  }
  .page-title {
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 14px;
    float: none;
    max-width: auto;
  }
  .container > .info-table-area:first-child {
    padding-top: 0 !important;
  }
}
/*----------------------------------------*\
  || Tooltip New
\*----------------------------------------*/
.tooltip-wrap {
  position: relative;
  vertical-align: middle;
}
.tooltip-wrap:focus-within .btn-tooltip .btn-tooltip :hover {
  background-color: var(--bg-clr2);
  border: 1px solid var(--disable-clr);
}
.tooltip-wrap:focus-within .btn-tooltip .btn-tooltip :hover::before {
  color: var(--cap-clr);
}
.tooltip-wrap:focus-within .btn-tooltip .btn-tooltip :hover .tooltip-box {
  padding-right: 25px;
}

.tooltip-wrap .btn-tooltip {
  width: 22px;
  height: 22px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--disable-clr);
  border-radius: 50%;
  color: var(--cap-clr);
}
.tooltip-wrap .btn-tooltip::before {
  content: "?";
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: inherit;
  text-align: center;
}
.tooltip-wrap:focus-within .btn-tooltip, .tooltip-wrap .btn-tooltip:hover {
  background-color: var(--cap-clr);
  border-color: var(--cap-clr);
}
.tooltip-wrap:focus-within .btn-tooltip::before, .tooltip-wrap .btn-tooltip:hover::before {
  color: var(--bg-clr2);
}

.tooltip-wrap .btn-tooltip.type-error {
  border-color: var(--neg-clr);
  color: var(--neg-clr);
}
.tooltip-wrap:focus-within .btn-tooltip.type-error, .tooltip-wrap .btn-tooltip.type-error:hover {
  background-color: var(--neg-clr);
  border-color: var(--neg-clr);
}
ㄹ .tooltip-wrap:focus-within .btn-tooltip.type-error::before, ㄹ .tooltip-wrap .btn-tooltip.type-error:hover::before {
  color: var(--bg-clr2);
}

.tooltip-wrap .tooltip-box {
  display: none;
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  width: max-content;
  min-width: 89px;
  max-width: 160px;
  padding: 12px;
  background-color: var(--bg-clr2);
  border: 1px solid #000;
  border-radius: 7px;
  font-size: 14px;
  line-height: 16px;
  color: var(--cap-clr);
  text-align: left;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  transform: translateX(-50%);
  z-index: 1;
}
.tooltip-wrap .tooltip-box:focus-visible {
  padding: 11px;
  border-width: 2px;
}
.tooltip-wrap .tooltip-box:focus-visible .close {
  top: 7px;
  right: 7px;
}
.tooltip-wrap .tooltip-box:focus-visible::before {
  top: -7.5px;
  border-width: 2px;
}
.tooltip-wrap .tooltip-box::before {
  width: 10px;
  height: 10px;
  content: "";
  position: absolute;
  top: -6.5px;
  left: 50%;
  background-color: var(--bg-clr2);
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  transform: translateX(-50%) rotate(45deg);
}
.tooltip-wrap .tooltip-box .close {
  width: 19px;
  height: 19px;
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
}
.tooltip-wrap .tooltip-box .close::before, .tooltip-wrap .tooltip-box .close::after {
  width: 11px;
  height: 1.5px;
  content: "";
  position: absolute;
  top: 6px;
  left: 1.5px;
  display: block;
  background-color: var(--tit-clr);
  border-radius: 10px;
  transform: rotate(-45deg);
}
.tooltip-wrap .tooltip-box .close::after {
  transform: rotate(45deg);
}
.tooltip-wrap:not(.type-click):hover .tooltip-box, .tooltip-wrap:not(.type-click):focus-within .tooltip-box {
  display: block;
}

@media (max-width: 768px) {
  .tooltip-wrap.type-click .tooltip-box {
    position: fixed;
    inset: 0;
    top: initial;
    width: 100%;
    max-width: none;
    max-height: 50vh;
    padding: 40px 20px 20px;
    border: 0;
    border-radius: 14px 14px 0 0;
    transform: none;
    z-index: 2;
  }
  .tooltip-wrap.type-click .tooltip-box:before {
    display: none;
  }
  .tooltip-wrap.type-click .tooltip-box .close {
    width: 20px;
    height: 20px;
    top: 15px;
    right: 20px;
  }
  .tooltip-wrap.type-click .tooltip-box .close::before, .tooltip-wrap.type-click .tooltip-box .close::after {
    width: 20px;
  }
  .tooltip-wrap.type-click .tooltip-box .mini-link-list li a {
    font-size: 16px;
    line-height: 19px;
  }
  .tooltip-wrap.type-click .tooltip-box .mini-link-list li + li {
    margin-top: 20px;
  }
  body:has(.tooltip-box[style*=block])::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s ease forwards;
    z-index: 1;
  }
}
/*----------------------------------------*\
  || Basic Tooltip
\*----------------------------------------*/
.basic-tooltip-wrap {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  min-width: fit-content;
  min-height: 40px;
  padding: 9px 16px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--tit-clr);
  border-radius: 20px;
  z-index: 1;
}
.basic-tooltip-wrap::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(/img/common/icon/icon_tooltip_error.png) no-repeat center/contain;
}
.basic-tooltip-wrap::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 19px;
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--bg-clr2);
  border-radius: 1px;
  border: 1px solid var(--tit-clr);
  border-color: inherit;
  border-right-color: var(--bg-clr2);
  border-bottom-color: var(--bg-clr2);
  transform: rotate(45deg);
  will-change: transform;
}
.basic-tooltip-wrap.type-right {
  left: initial;
  right: 0;
}
.basic-tooltip-wrap.type-neg {
  border-color: var(--neg-clr);
}
.basic-tooltip-wrap.type-pos {
  border-color: var(--pos-clr);
}
.basic-tooltip-wrap .basic-tooltip-txt {
  font-size: 14px;
  color: var(--tit-clr);
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Tooltip box
\*----------------------------------------*/
.tool-box {
  position: relative;
}
.tool-box .btn-close-box {
  position: absolute;
  top: 10px;
  right: 10px;
}
.tool-box .icon-question:hover ~ .tooltips.bottom,
.tool-box .icon-question:focus ~ .tooltips.bottom {
  display: block;
}

.tooltips {
  display: none;
  min-width: 150px;
  position: absolute;
  padding: 10px;
  background: var(--bg-clr2);
  -webkit-box-shadow: 15px 12px 46px -1px rgba(127, 127, 127, 0.68);
  box-shadow: 15px 12px 46px -1px rgba(127, 127, 127, 0.68);
  border: 1px solid #000;
  z-index: 5;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
}
.tooltips::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -5px;
  left: 45%;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  background: var(--bg-clr2);
  transform: rotate(45deg);
  z-index: 10;
}
.tooltips.bottom {
  display: none;
  bottom: 0;
  left: 55%;
}
.tooltips.qrcode {
  display: none;
  bottom: inherit;
  top: 60px;
  left: -10px;
  transform: none;
  padding: 30px 30px 20px;
}
.tooltips.qrcode::after {
  bottom: inherit;
  top: -5px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: none;
  border-right: 0;
}
.tooltips.qrcode img {
  width: 90px;
  height: auto;
}
.tooltips.qrcode .qr-txt {
  font-size: 12px;
  padding-top: 5px;
  text-align: center;
}

.tool-box-type3,
.tool-box-type4 {
  font-size: 14px;
}
.tool-box-type3 .tool-subtxt,
.tool-box-type4 .tool-subtxt {
  text-align: left;
  line-height: 24px;
}
.tool-box-type3 .tooltips::after,
.tool-box-type4 .tooltips::after {
  left: 28%;
}

.tool-box-type4 .tooltips {
  left: 181.3%;
  min-width: 274px;
  bottom: 47px;
}

.tool-box-type3 .tooltips {
  left: 170.3%;
  transform: translateX(-50.3%);
  min-width: 250px;
  bottom: 47px;
}

.tool-line {
  width: 30px;
  height: 1px;
  background: var(--line-clr3);
  display: block;
  margin: 10px 0;
}

.tooltips-ul {
  padding: 20px 0 10px;
}
.tooltips-ul li {
  text-align: left;
  font-size: 12px;
  color: var(--body-clr);
  margin-bottom: 10px;
}
.tooltips-ul li:last-child {
  margin-bottom: 0;
}
.tooltips-ul li a {
  position: relative;
  display: inline;
  text-align: left;
  text-decoration: underline;
}
.tooltips-ul li a:active, .tooltips-ul li a:focus {
  font-weight: 700;
}

.tooltips-txt {
  font-size: 12px;
  line-height: 20px;
  word-break: keep-all;
}

.btn-close {
  float: right;
}

.icon-close {
  width: 10px;
  height: 10px;
  background: url(/img/common/btn_close.png) no-repeat center;
}

/* //mark:  tooltip */
[class^=aui-tooltip] {
  width: 22px;
  height: 22px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--disable-clr);
  border-radius: 50%;
  vertical-align: middle;
}
[class^=aui-tooltip]::before {
  content: "?";
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--cap-clr);
  text-align: center;
}
[class^=aui-tooltip]:hover, [class^=aui-tooltip]:focus {
  background-color: var(--cap-clr);
  border-color: var(--cap-clr);
}
[class^=aui-tooltip]:hover::before, [class^=aui-tooltip]:focus::before {
  color: var(--bg-clr2);
}
[class^=aui-tooltip] > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
[class^=aui-tooltip] > span::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
}

[class^=tooltipContent] {
  position: absolute;
  width: max-content;
  min-width: 89px;
  max-width: 400px;
  padding: 12px;
  background-color: var(--bg-clr2);
  border: 1px solid #000;
  border-radius: 7px;
  font-size: 14px;
  line-height: 16px;
  color: var(--cap-clr);
  text-align: left;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.tooltipContent--close.active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.tooltipContent.active {
  opacity: 1;
  visibility: visible;
}

.right[class^=tooltipContent]::after {
  top: 50%;
  transform: translateY(-50%);
  left: -7px;
  border-color: transparent var(--body-clr);
  border-width: 10px 10px 10px 0;
}

.left[class^=tooltipContent]::after {
  top: 50%;
  transform: translateY(-50%);
  right: -7px;
  border-color: transparent var(--body-clr);
  border-width: 10px 0 10px 10px;
}

.top[class^=tooltipContent]::after {
  bottom: -7px;
  left: 50%;
  border-color: var(--body-clr) transparent;
  border-width: 7px 7px 0;
  transform: translateX(-50%);
}

/* mini버전 tooltip */
.tooltip-btn {
  width: 22px;
  height: 22px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--disable-clr);
  border-radius: 50%;
}
.tooltip-btn::before {
  content: "?";
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--cap-clr);
  text-align: center;
}
.tooltip-wrap:focus-within .tooltip-btn, .tooltip-btn:hover {
  background-color: var(--cap-clr);
  border-color: var(--cap-clr);
}
.tooltip-wrap:focus-within .tooltip-btn::before, .tooltip-btn:hover::before {
  color: var(--bg-clr2);
}

.tooltip-item {
  position: absolute;
  width: max-content;
  min-width: 89px;
  max-width: 400px;
  padding: 12px;
  background-color: var(--bg-clr2);
  border: 1px solid #000;
  border-radius: 7px;
  font-size: 14px;
  line-height: 16px;
  color: var(--cap-clr);
  text-align: left;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}
.tooltip-item.on {
  opacity: 1;
  visibility: visible;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .tooltips {
    left: 68px;
  }
  html.responsive .tooltips li {
    margin-bottom: 4px;
    line-height: 20px;
  }
  html.responsive .tooltips li a {
    word-break: break-all;
    text-decoration: underline;
    text-underline-position: under;
    font-size: 10px;
  }
  html.responsive .tooltips span {
    display: none;
  }
  html.responsive .snsbox .tooltip-layerpopup {
    right: -3px;
    width: 155px;
    height: 62px;
    padding: 19px 0 40px 0;
  }
  html.responsive .snsbox .tooltip-layerpopup::after {
    right: 20px;
  }
  html.responsive .snsbox .tooltip-layerpopup .sns {
    width: 32px;
    padding-top: 34px;
    font-size: 0;
  }
  html.responsive .snsbox .tooltip-layerpopup .kakao,
  .snsbox .tooltip-layerpopup .instagram,
  .snsbox .tooltip-layerpopup .facebook,
  .snsbox .tooltip-layerpopup .urlcopy {
    background-size: 80%;
    line-height: 0;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  || CEO 인사말
\*----------------------------------------*/
.ceo-info-wrap.type01 .ceo-sign img {
  margin: 0;
}
.ceo-info-wrap .ceo-sign.yat-bank img {
  margin: 0 0 -19px 21px;
}

.ceo-img-box .text::before {
  background: #008ed8;
}

/* 스타저축은행 */
.ceo-img-box.star-bank .text {
  top: 183px;
}
.ceo-img-box.star-bank .text::before {
  top: -53px;
  background: #014c9a;
}

.ceo-info-wrap.star-bank .ceo-info .text {
  text-align: center;
}
.ceo-info-wrap.star-bank .ceo-sign {
  margin-top: 75px;
  display: none;
}
.ceo-info-wrap.star-bank .ceo-sign img {
  margin: 0;
}

/*----------------------------------------*\
  || 윤리강령
\*----------------------------------------*/
.ethics-box {
  display: table;
  min-height: 200px;
  padding: 0 320px 0 40px;
  width: 100%;
  background: #f7f7f7 url("/img/hss_company/star_content/bg_ethics.png");
  /* 스타저축은행 */
  /* 한화저축은행  */
  /* 키움yes 저축은행 */
  /* 청주저축은행 */
  /* 진주저축은행 */
  /* 인천저축은행 */
  /* 오성저축은행 */
  /* 안양저축은행 */
  /* 바로저축은행 */
  /* 스타저축은행 */
  /* 스마트저축은행 */
  /* 라온저축은행 */
  /* 드림저축은행 */
  /* 더블저축은행 */
  /* 대한저축은행 */
  /* 대백저축은행 */
  /* 금화저축은행 */
  /* dh저축은행 */
  /* 모아저축은행 */
  /* 인성저축은행 */
}
.ethics-box.star-bank {
  width: 100%;
  padding: 55px 291px 56px 39px;
  background: #f7f7f7 url("/img/star_content/bg_ethics.png");
}
.ethics-box.star-bank + .ethics-list.star-bank {
  margin-top: 38px;
}
.ethics-box.star-bank .text {
  color: var(--body-clr);
  font-size: 18px;
  line-height: 30px;
}
.ethics-box.star-bank .text + .text {
  margin-top: 5px;
}
.ethics-box.star-bank .text strong {
  font-size: 18px;
}
.ethics-box .text {
  display: table-cell;
  color: var(--body-clr);
  font-size: 16px;
  vertical-align: middle;
  line-height: 28px;
  word-break: keep-all;
}
.ethics-box .text strong {
  font-size: 18px;
}
.ethics-box .text .ty01 {
  display: block;
  line-height: 30px;
}
.ethics-box .text + .text {
  margin-top: 5px;
}
.ethics-box .text-point {
  font-size: 18px;
  font-weight: 500;
}
.ethics-box.hanhwa-bank {
  height: 200px;
  background-image: url("/img/hss_companycontent/hanhwa_content/bg_ethics.jpg");
}
.ethics-box.hanhwa-bank .text-point {
  color: #f46c0e;
}
.ethics-box.kiumyes-bank {
  background-image: url("/img/hss_companycontent/kiumyes_content/bg_ethics.jpg");
}
.ethics-box.kiumyes-bank .text strong {
  font-size: 20px;
}
.ethics-box.kiumyes-bank .text-point {
  color: #1d3d6e;
}
.ethics-box.cheongju-bank {
  background-image: url("/img/hss_companycontent/cheongju_content/bg_ethics.jpg");
}
.ethics-box.jinju-bank {
  background-image: url("/img/hss_companycontent/jinju_content/bg_ethics.jpg");
}
.ethics-box.incheon-bank {
  background-image: url("/img/hss_companycontent/incheon_content/bg_ethics.jpg");
}
.ethics-box.osung-bank {
  background-image: url("/img/hss_companycontent/osung_content/bg_ethics.jpg");
}
.ethics-box.anyang-bank {
  background-image: url("/img/hss_companycontent/anyang_content/bg_ethics.jpg");
}
.ethics-box.baro-bank {
  background-image: url("/img/hss_companycontent/baro_content/bg_ethics.jpg");
}
.ethics-box.star-bank {
  background-image: url("/img/hss_companycontent/star_content/bg_ethics.jpg");
}
.ethics-box.smart-bank {
  background-image: url("/img/hss_companycontent/smart_content/bg_ethics.jpg");
}
.ethics-box.raon-bank {
  background-image: url("/img/hss_companycontent/raon_content/bg_ethics.jpg");
}
.ethics-box.dream-bank {
  background-image: url("/img/hss_companycontent/dream_content/bg_ethics.jpg");
}
.ethics-box.dobble-bank {
  background-image: url("/img/hss_companycontent/dobble_content/bg_ethics.jpg");
}
.ethics-box.daehan-bank {
  background-image: url("/img/hss_companycontent/daehan_content/bg_ethics.jpg");
}
.ethics-box.daeback-bank {
  background-image: url("/img/hss_companycontent/daeback_content/bg_ethics.jpg");
}
.ethics-box.namyang-bank {
  background-image: url("/img/hss_companycontent/namyang_content/bg_ethics.jpg");
}
.ethics-box.kuemhwa-bank {
  background-image: url("/img/hss_companycontent/kuemhwa_content/bg_ethics.jpg");
}
.ethics-box.dh-bank {
  background-image: url("/img/hss_companycontent/dh_content/bg_ethics.jpg");
}
.ethics-box.moa-bank {
  background-image: url("/img/hss_companycontent/baro_content/bg_ethics.jpg");
}
.ethics-box.insung-bank {
  height: 350px;
  background-image: url("/img/hss_companycontent/insung_content/bg_ethics.jpg");
  background-position: center;
}
.ethics-box.smart-bank .text, .ethics-box.smart-bank .text span, .ethics-box.dream-bank .text, .ethics-box.dream-bank .text span, .ethics-box.kuemhwa-bank .text span, .ethics-box.kuemhwa-bank .text strong, .ethics-box.namyang-bank .text, .ethics-box.namyang-bank .text span, .ethics-box.namyang-bank .text strong {
  color: var(--bg-clr2);
}
.ethics-box + .tab-basic {
  margin-top: 40px;
}

.ethics-text {
  margin-top: 45px;
  font-size: 18px;
  line-height: 28px;
}
.ethics-text.type01 {
  color: var(--body-clr);
  font-size: 14px;
  text-align: right;
}

.ethics-list {
  margin-top: 38px;
  /* 스타저축은행 */
}
.ethics-list .star-bank + .slide-box-area.star-bank {
  margin-top: 58px;
}

.ethics-list-text {
  margin-top: 4px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 24px;
  text-indent: -20px;
}
.ethics-list-text::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 15px;
  background: #999;
  border-radius: 50%;
  vertical-align: 3px;
}
.ethics-list-text:first-child {
  margin-top: 0;
}

.ethics-telegram {
  margin-top: 67px;
  font-size: 24px;
  text-align: center;
}

.ethics-telegram .date {
  display: block;
  padding-bottom: 19px;
  font-size: 18px;
}

/* 인성저축은행 */
.ethics-list-box.insung-bank {
  margin-bottom: 100px;
}
.ethics-list-box.insung-bank .title-eng {
  font-family: GothamPro;
  font-weight: 700;
  font-size: 60px;
  letter-spacing: -0.25px;
  color: #e0e0e4;
  margin-top: 80px;
}
.ethics-list-box.insung-bank .title {
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -0.5px;
  color: var(--body-clr);
  margin-top: 30px;
}
.ethics-list-box.insung-bank .text {
  font-size: 18px;
  letter-spacing: -0.25px;
  color: #666;
  margin-top: 15px;
}

/*----------------------------------------*\
  || 경영이념
\*----------------------------------------*/
.management-philosophy-box.star-bank .management-philosophy dt {
  font-size: 14px;
  font-weight: 500;
}
.management-philosophy-box.star-bank dd.box-style01 {
  height: auto;
  padding: 30px 20px 29px;
}
.management-philosophy-box.star-bank dd.box-style01 .sub-title {
  margin-top: 0;
  line-height: 22px;
}
.management-philosophy-box.star-bank dd.box-style02 {
  height: auto;
  padding: 26px 20px 24px;
}
.management-philosophy-box.star-bank dd.box-style02 .sub-style01 {
  margin-top: 0;
  font-size: 14px;
  line-height: 23px;
}
.management-philosophy-box.star-bank dd.box-style03 {
  padding: 19px 20px 17px;
  background: var(--bg-clr2);
  border: 1px solid #014c9a;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  line-height: 18px;
}

/*----------------------------------------*\
  || 조직도
\*----------------------------------------*/
.organize-box img {
  width: 100%;
}
.organize-box img.yat-bank img {
  width: 100%;
}

.tablet-viewbox .organize-box {
  margin-top: 30px;
}

.mobile-viewbox .organize-box {
  margin-top: 20px;
}

.info-table-wrap.pyeongtaek-bank .bold {
  font-weight: 500;
}

/*  조직도 - 평택저축은행 */
.moa-bank .organize-box {
  margin-top: 35px;
}

.organize-table-area {
  overflow: hidden;
  margin-top: 47px;
}
.organize-table-area .sub-title-area {
  padding-bottom: 0;
}
.organize-table-area .info-table-area {
  float: left;
  width: 530px;
  margin-top: 20px;
  padding-bottom: 0;
}
.organize-table-area .info-table-area:nth-child(2n-1) {
  float: right;
}
.organize-table-area .info-table-area .table-wrap01 th {
  background: #f0f9fd;
}
.organize-table-area .info-table-area .table-wrap01 td {
  height: 54px;
  padding: 17px 20px 16px 20px;
}
.organize-table-area .info-table-area .table-wrap01 tr td:first-child {
  text-align: left;
  font-weight: 700;
}

/*----------------------------------------*\
  || 키움예스 금융소비자보호체계
\*----------------------------------------*/
.protectinfo-list-box li {
  margin-top: 16px;
}
.protectinfo-list-box li .tit {
  font-size: 16px;
  color: #00397c;
  font-weight: 500;
}
.protectinfo-list-box li .explain {
  margin-top: 10px;
  font-size: 16px;
  color: var(--body-clr);
  line-height: 1.2;
}

.common-titlestyle01 + .protectinfo-img-box {
  margin-top: 15px;
}

.protectinfo-img-box img {
  width: 100%;
}

/*----------------------------------------*\
  || 키움예스 상품별 리스트 페이지
\*----------------------------------------*/
.common-titlestyle01 + .deposit-item-list {
  margin-top: 10px;
}

.tts + .deposit-item-list {
  margin-top: 82px;
}

.deposit-item-list {
  overflow: hidden;
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid var(--disable-clr);
}
.deposit-item-list li {
  overflow: hidden;
}
.deposit-item-list li:last-child .deposit-item {
  border-bottom: none;
}
.deposit-item-list li .deposit-item {
  float: left;
  display: table;
  width: 50%;
  padding: 13px 20px;
  border-bottom: 1px solid #efefef;
  font-size: 14px;
  color: var(--body-clr);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: right;
}
.deposit-item-list li .name {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}
.deposit-item-list li .btn-thin {
  display: table-cell;
}
.deposit-item-list li .deposit-item:first-child {
  border-right: 1px solid #efefef;
}

/*----------------------------------------*\
  || 수수료 : 키움예스/한국투자/모아
\*----------------------------------------*/
.box-list-wrap {
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid var(--disable-clr);
}
.box-list-wrap.koreatuja .box-list .box-item, .box-list-wrap.moa-bank .box-list .box-item {
  background: none;
}
.box-list-wrap .box-list {
  overflow: hidden;
  border-top: 1px solid #efefef;
}
.box-list-wrap .box-list:first-child {
  border-top: 0;
}
.box-list-wrap .box-list .box-item {
  float: left;
  width: 50%;
  padding: 30px 150px 30px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.box-list-wrap .box-list .box-item:first-child {
  background: url("/img/hss_companycontent/kiumyes_content/kiumtes_chargeitem01.png") no-repeat 400px 50%;
}
.box-list-wrap .box-list .box-item.box-item:nth-child(2) {
  background: url("/img/hss_companycontent/kiumyes_content/kiumtes_chargeitem02.png") no-repeat 400px 50%;
}
.box-list-wrap .box-list .box-item:nth-child(2n) {
  border-left: 1px solid #efefef;
}
.box-list-wrap .box-list .box-item .explain {
  margin-top: 10px;
  font-size: 16px;
  color: var(--body-clr);
  line-height: 1.4;
}
.box-list-wrap .box-list .box-item .btn-thin {
  display: inline-block;
  margin-top: 40px;
  text-align: center;
  line-height: 1;
}

.tts + .box-list-wrap {
  margin-top: 40px;
}

/*----------------------------------------*\
  || SR List WP
\*----------------------------------------*/
/*----------------------------------------*\
  || New Thumb
\*----------------------------------------*/
.new-thumbWp {
  border-top: 1px solid var(--main-clr);
}

.new-thumb-list .thumb-wp img {
  width: 100%;
  height: 100%;
}

.thumb-wp {
  overflow: hidden;
}

ul.new-thumb-list {
  overflow: hidden;
  margin: 0 -32px;
}
ul.new-thumb-list li {
  float: left;
  width: 324px;
  margin: 0 32px;
  padding-top: 40px;
}
ul.new-thumb-list li .thumb-wp {
  width: 322px;
  height: 348px;
}
ul.new-thumb-list li .txt-wp {
  padding: 17px 20px;
  min-height: 115px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
ul.new-thumb-list li .txt-wp .date {
  display: block;
  color: #666;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.25px;
  margin-top: 18px;
}
ul.new-thumb-list li .tit {
  display: block;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.25px;
}
ul.new-thumb-list li .cmt {
  overflow: hidden;
  display: block;
  height: 48px;
  word-break: break-all;
}
ul.new-thumb-list li > a {
  display: block;
  border: 1px solid var(--disable-clr);
  text-decoration: none;
}

.new-thumbWp.tmb-type02 ul.new-thumb-list li .thumb-wp {
  height: 216px;
}
.new-thumbWp.tmb-type02 ul.new-thumb-list li .txt-wp {
  border-top: 1px solid var(--disable-clr);
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  .ceo-info-wrap .hanhwa-bank .ceo-sign {
    display: none;
  }
  .ceo-info-wrap .star-bank .ceo-sign {
    margin-top: 20px;
  }
  .ceo-img-box.star-bank .text {
    top: 5px;
  }
  .store-searchWp {
    overflow: inherit;
    margin: 30px 0 0;
  }
  .store-mapWp {
    float: left;
    padding-left: 60px;
    min-height: 800px;
    clear: both;
    width: 100%;
    height: inherit;
    margin-top: 20px;
    padding: 0 16px 30px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .map-area {
    width: 100%;
    height: 250px;
    min-height: auto;
    margin-top: 30px;
  }
  .map-area img {
    width: 100%;
    height: inherit;
  }
  .s-inp-optWp {
    height: inherit;
    padding: 0 16px;
  }
  .store-optWp {
    float: inherit;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .store-optWp .check-optWp {
    padding: 26px 0 20px;
  }
  .store-optWp .check-optWp .chk-wrap {
    display: inline-block;
    width: 32.5%;
    margin-bottom: 13px;
  }
  .search-tabWp {
    width: 100%;
    height: inherit;
    padding-bottom: 20px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
  .search-tabWp .tab-basic-buttons-item {
    padding: 9px 10px 8px;
    font-size: 13.3px;
  }
  .ser-result {
    padding: 11px 16px 17px;
  }
  .ser-result p {
    font-size: 13.3px;
    letter-spacing: -0.25px;
    line-height: 20px;
  }
  .ser-result p strong {
    color: #18a33e;
  }
  .regionS .r-info {
    font-size: 13px;
    padding: 15px 10px;
  }
  .r-opt-wp {
    height: inherit;
    background: var(--bg-clr2);
  }
  .rlist-opt li button {
    height: 35px;
    padding: 7px 0;
    text-align: center;
  }
  .rlist-opt li button span {
    display: inline-block;
    font-size: 13px;
    letter-spacing: -0.25px;
  }
  .deposit-item-list li .deposit-item {
    float: none;
    width: 100%;
  }
  .deposit-item-list li .deposit-item:last-child .deposit-item:first-child {
    border-bottom: 1px solid #efefef;
  }
  .deposit-item-list li .deposit-item:last-child .deposit-item:first-child {
    border-right: none;
  }
  .deposit-item-list li .deposit-item:last-child .deposit-item:last-child {
    border-bottom: none;
  }
  .box-list-wrap {
    margin-top: 20px;
    padding: 0 20px;
  }
  .box-list-wrap .box-list .box-item {
    float: none;
    width: 100%;
    padding: 30px 0;
  }
  .box-list-wrap .box-list .box-item:first-child {
    background: url("/img/hss_companycontent/kiumyes_content/kiumtes_chargeitem01.png") no-repeat right 50%;
  }
  .box-list-wrap .box-list .box-item:nth-child(2) {
    border-top: 1px solid #efefef;
    border-left: none;
    background: url("/img/hss_companycontent/kiumyes_content/kiumtes_chargeitem02.png") no-repeat right 50%;
  }
  .organize-table-area .info-table-area {
    width: 100%;
  }
  .ethics-list-box.insung-bank {
    margin-bottom: 60px;
  }
  .ethics-list-box.insung-bank .title-eng {
    font-size: 48px;
    font-weight: 400;
  }
  .ethics-list-box.insung-bank .title {
    font-size: 40px;
    margin-top: 40px;
  }
  .ethics-list-box.insung-bank .text {
    margin-top: 20px;
  }
  .ethics-box.star-bank {
    padding: 43px 238px 44px 39px;
  }
}
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .management-philosophy-box.star-bank dd.box-style01,
  .management-philosophy-box.star-bank dd.box-style03 {
    margin-top: 9px;
  }
  .ethics-box {
    padding: 33px 39px 34px;
  }
  .ethics-box.star-bank {
    padding: 33px 39px 34px;
    background-image: none;
  }
  .ethics-box.star-bank + .ethics-list.star-bank {
    margin-top: 28px;
  }
  .ethics-box.star-bank .text {
    font-size: 15px;
  }
  .ethics-box.star-bank .text::before {
    width: 3px;
    height: 3px;
    background: #000;
  }
  .ethics-box.star-bank .text strong {
    font-size: 15px;
  }
  .ethics-box .text {
    font-size: 15px;
  }
  .ethics-box .text strong {
    font-size: 15px;
  }
  .ethics-list.star-bank + .slide-box-area.star-bank {
    margin-top: 38px;
  }
  .box-list-wrap .box-list .box-item {
    padding: 150px 0 20px;
    text-align: center;
  }
  .box-list-wrap .box-list .box-item:first-child {
    background: url("/img/hss_companycontent/kiumyes_content/kiumtes_chargeitem01.png") no-repeat 50% 30px;
  }
  .box-list-wrap .box-list .box-item:nth-child(2) {
    background: url("/img/hss_companycontent/kiumyes_content/kiumtes_chargeitem02.png") no-repeat 50% 30px;
  }
  .box-list-wrap .box-list .box-item .btn-thin {
    margin-top: 20px;
  }
  .ethics-list-box.insung-bank {
    margin-bottom: 30px;
  }
  .ethics-list-box.insung-bank .title-eng {
    font-size: 24px;
    margin-top: 40px;
    font-weight: 400;
  }
  .ethics-list-box.insung-bank .title {
    font-size: 30px;
    margin-top: 20px;
  }
  .ethics-list-box.insung-bank .text {
    font-size: 14px;
    margin-top: 5px;
  }
}
/*----------------------------------------*\
  || 인증서 선택 Certi List
\*----------------------------------------*/
.certi-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 30px;
}

.certi-item {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 74px;
  border: 1px solid var(--line-clr3);
  border-radius: 20px;
  transition: border-color 0.15s ease;
}
.certi-item:hover {
  border: 2px solid var(--main-clr);
}
.certi-item:hover a {
  padding: 12px 18px;
}
.certi-item.disabled {
  background-color: #f2f4f6;
  border-color: #f2f4f6;
}
.certi-item.disabled a {
  pointer-events: none;
  user-select: none;
}
.certi-item.disabled a .img {
  display: none;
}
.certi-item.disabled a .img.off {
  display: block;
  filter: grayscale(1);
}
.certi-item.disabled a .wrap {
  width: 100%;
}
.certi-item.disabled a .name {
  flex: 1;
}
.certi-item.disabled a .tag {
  display: block;
}
.certi-item.unhover {
  padding: 13px 19px;
}
.certi-item.unhover:hover {
  border: 1px solid var(--line-clr3);
}
.certi-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 13px 19px;
}
.certi-item a::after {
  width: 28px;
  height: 28px;
  background: url("/img/common/icon/icon_arrow_right.png") no-repeat center center;
  background-size: auto;
  content: "";
  display: block;
  min-width: 28px;
  margin-left: auto;
  border: 1px solid var(--disable-clr);
  border-radius: 50%;
}
.certi-item .img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.certi-item .img.off {
  display: none;
}
.certi-item .wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.certi-item .name {
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  color: var(--tit-clr);
}
.certi-item .dl-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 30px;
}
.certi-item .list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.certi-item .list dt,
.certi-item .list dd {
  font-size: 14px;
  line-height: 16px;
  color: var(--cap-clr);
}
.certi-item .list dd {
  color: #666;
}
.certi-item .tag {
  display: none;
  padding: 4px 6px;
  border: 2px solid var(--line-clr3);
  border-radius: 17px;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  color: var(--line-clr3);
}

.dim-contents:has(.certi-list) {
  width: 430px;
}
.dim-contents .popup-body01:has([role=tablist]) {
  padding-top: 20px !important;
  padding-bottom: 30px;
}
.dim-contents .popup-body01:has(.certi-list) {
  height: 540px;
}

@media (max-width: 768px) {
  .certi-item .img {
    width: 38px;
    height: 38px;
  }
}
/*----------------------------------------*\
  || 간편인증서
\*----------------------------------------*/
.private-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.private-list.type-tab {
  margin-bottom: 30px;
}
.private-list.type-tab a,
.private-list.type-tab button {
  flex: 1;
  height: 145px;
}
.private-list .private-item {
  width: auto;
  height: 175px;
  flex: 1;
  min-width: 219px;
}
.private-list a,
.private-list button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  height: 100%;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  border-radius: 14px;
  transition: all 0.15s ease;
}
.private-list a:hover, .private-list a[aria-selected=true],
.private-list button:hover,
.private-list button[aria-selected=true] {
  border-color: var(--main-clr);
}
.private-list .img {
  width: 56px;
  height: 56px;
}
.private-list .text {
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  color: var(--tit-clr);
}

/*----------------------------------------*\
  || 앱 인증 App Certi Box
\*----------------------------------------*/
.app-certi-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: 50px auto 20px;
  border: 1px solid var(--line-clr3);
  border-radius: 35px;
}
.app-certi-box img {
  width: 55px;
  margin-bottom: 7px;
}

/*----------------------------------------*\
  || 보안카드 Security Card
\*----------------------------------------*/
.basic-security-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}

.security-img-box {
  position: relative;
}
.security-img-box .security-img {
  width: 515px;
}
.security-img-box .security-mark {
  position: absolute;
  display: block;
  width: 25px;
  height: 19px;
  background-color: rgba(255, 64, 64, 0.3098039216);
  border: 1px solid var(--neg-clr);
  opacity: 0.7;
}
.security-img-box .security-mark.mark-0101 {
  top: 35px;
  left: 44px;
}
.security-img-box .security-mark.mark-0102 {
  top: 35px;
  left: 68px;
}
.security-img-box .security-mark.mark-0201 {
  top: 35px;
  left: 146px;
}
.security-img-box .security-mark.mark-0202 {
  top: 35px;
  left: 171px;
}
.security-img-box .security-mark.mark-0301 {
  top: 35px;
  left: 249px;
}
.security-img-box .security-mark.mark-0302 {
  top: 35px;
  left: 273px;
}
.security-img-box .security-mark.mark-0401 {
  top: 35px;
  left: 352px;
}
.security-img-box .security-mark.mark-0402 {
  top: 35px;
  left: 376px;
}
.security-img-box .security-mark.mark-0501 {
  top: 35px;
  left: 455px;
}
.security-img-box .security-mark.mark-0502 {
  top: 35px;
  left: 479px;
}
.security-img-box .security-mark.mark-0601 {
  top: 68px;
  left: 44px;
}
.security-img-box .security-mark.mark-0602 {
  top: 68px;
  left: 68px;
}
.security-img-box .security-mark.mark-0701 {
  top: 68px;
  left: 146px;
}
.security-img-box .security-mark.mark-0702 {
  top: 68px;
  left: 171px;
}
.security-img-box .security-mark.mark-0801 {
  top: 68px;
  left: 249px;
}
.security-img-box .security-mark.mark-0802 {
  top: 68px;
  left: 273px;
}
.security-img-box .security-mark.mark-0901 {
  top: 68px;
  left: 352px;
}
.security-img-box .security-mark.mark-0902 {
  top: 68px;
  left: 376px;
}
.security-img-box .security-mark.mark-1001 {
  top: 68px;
  left: 455px;
}
.security-img-box .security-mark.mark-1002 {
  top: 68px;
  left: 479px;
}
.security-img-box .security-mark.mark-1101 {
  top: 102px;
  left: 44px;
}
.security-img-box .security-mark.mark-1102 {
  top: 102px;
  left: 68px;
}
.security-img-box .security-mark.mark-1201 {
  top: 102px;
  left: 146px;
}
.security-img-box .security-mark.mark-1202 {
  top: 102px;
  top: 171px;
}
.security-img-box .security-mark.mark-1301 {
  top: 102px;
  left: 249px;
}
.security-img-box .security-mark.mark-1302 {
  top: 102px;
  left: 273px;
}
.security-img-box .security-mark.mark-1401 {
  top: 102px;
  left: 352px;
}
.security-img-box .security-mark.mark-1402 {
  top: 102px;
  left: 376px;
}
.security-img-box .security-mark.mark-1501 {
  top: 102px;
  left: 455px;
}
.security-img-box .security-mark.mark-1502 {
  top: 102px;
  left: 479px;
}
.security-img-box .security-mark.mark-1601 {
  top: 136px;
  left: 44px;
}
.security-img-box .security-mark.mark-1602 {
  top: 136px;
  left: 68px;
}
.security-img-box .security-mark.mark-1701 {
  top: 136px;
  left: 146px;
}
.security-img-box .security-mark.mark-1702 {
  top: 136px;
  top: 171px;
}
.security-img-box .security-mark.mark-1801 {
  top: 136px;
  left: 249px;
}
.security-img-box .security-mark.mark-1802 {
  top: 136px;
  left: 273px;
}
.security-img-box .security-mark.mark-1901 {
  top: 136px;
  left: 352px;
}
.security-img-box .security-mark.mark-1902 {
  top: 136px;
  left: 376px;
}
.security-img-box .security-mark.mark-2001 {
  top: 136px;
  left: 455px;
}
.security-img-box .security-mark.mark-2002 {
  top: 136px;
  left: 479px;
}
.security-img-box .security-mark.mark-2101 {
  top: 169px;
  left: 44px;
}
.security-img-box .security-mark.mark-2102 {
  top: 169px;
  left: 68px;
}
.security-img-box .security-mark.mark-2201 {
  top: 169px;
  left: 146px;
}
.security-img-box .security-mark.mark-2202 {
  top: 169px;
  top: 171px;
}
.security-img-box .security-mark.mark-2301 {
  top: 169px;
  left: 249px;
}
.security-img-box .security-mark.mark-2302 {
  top: 169px;
  left: 273px;
}
.security-img-box .security-mark.mark-2401 {
  top: 169px;
  left: 352px;
}
.security-img-box .security-mark.mark-2402 {
  top: 169px;
  left: 376px;
}
.security-img-box .security-mark.mark-2501 {
  top: 169px;
  left: 455px;
}
.security-img-box .security-mark.mark-2502 {
  top: 169px;
  left: 479px;
}
.security-img-box .security-mark.mark-2601 {
  top: 203px;
  left: 44px;
}
.security-img-box .security-mark.mark-2602 {
  top: 203px;
  left: 68px;
}
.security-img-box .security-mark.mark-2701 {
  top: 203px;
  left: 146px;
}
.security-img-box .security-mark.mark-2702 {
  top: 203px;
  top: 171px;
}
.security-img-box .security-mark.mark-2801 {
  top: 203px;
  left: 249px;
}
.security-img-box .security-mark.mark-2802 {
  top: 203px;
  left: 273px;
}
.security-img-box .security-mark.mark-2901 {
  top: 203px;
  left: 352px;
}
.security-img-box .security-mark.mark-2902 {
  top: 203px;
  left: 376px;
}
.security-img-box .security-mark.mark-3001 {
  top: 203px;
  left: 455px;
}
.security-img-box .security-mark.mark-3002 {
  top: 203px;
  left: 479px;
}
.security-img-box .security-mark.mark-3101 {
  top: 236px;
  left: 44px;
}
.security-img-box .security-mark.mark-3102 {
  top: 236px;
  left: 68px;
}
.security-img-box .security-mark.mark-3201 {
  top: 236px;
  left: 146px;
}
.security-img-box .security-mark.mark-3202 {
  top: 236px;
  top: 171px;
}
.security-img-box .security-mark.mark-3301 {
  top: 236px;
  left: 249px;
}
.security-img-box .security-mark.mark-3302 {
  top: 236px;
  left: 273px;
}
.security-img-box .security-mark.mark-3401 {
  top: 236px;
  left: 352px;
}
.security-img-box .security-mark.mark-3402 {
  top: 236px;
  left: 376px;
}
.security-img-box .security-mark.mark-3501 {
  top: 236px;
  left: 455px;
}
.security-img-box .security-mark.mark-3502 {
  top: 236px;
  left: 479px;
}

.security-card-wrap {
  display: flex;
  align-items: normal;
  justify-content: center;
  flex-direction: column;
  gap: 35px;
  max-width: 507px;
}

.security-card-list {
  margin-left: 30px;
}

.security-card-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.security-card-item + .security-card-item {
  margin-top: 10px;
}
.security-card-item .security-card-label {
  margin-right: 38px;
  font-size: 16px;
  line-height: 18px;
  color: var(--cap-clr);
}
.security-card-item .security-card-label strong {
  color: var(--tit-clr);
}

.security-card-inp-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 76px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  transition: all 0.15s ease;
}
.security-card-inp-wrap.type-triple {
  width: 100px;
  max-width: none;
}
.security-card-inp-wrap.type-triple .security-card-inp {
  max-width: 71px;
}
.security-card-inp-wrap.disabled {
  justify-content: center;
  max-width: 36px;
  background-color: #fafafb;
  aspect-ratio: 1;
}
.security-card-inp-wrap.disabled::before {
  width: 10px;
  height: 10px;
  content: "";
  display: block;
  background-color: var(--cap-clr);
  border-radius: 50%;
}
.security-card-inp-wrap:focus-within {
  border-color: var(--main-clr);
  box-shadow: inset 1px 1px var(--main-clr), inset -1px -1px var(--main-clr);
}
.security-card-inp-wrap .security-card-inp {
  max-width: 47px;
  height: 34px;
  padding: 0 0 0 6px;
  font-family: monospace;
  font-size: 43px;
  letter-spacing: 0.02em;
}
.security-card-inp-wrap .security-card-inp:focus {
  outline: none;
}
.security-card-inp-wrap .vitualKeyCheck {
  height: 34px;
}
.security-card-inp-wrap .vitualKeyCheck .btn-mouse,
.security-card-inp-wrap .vitualKeyCheck .icon-mouse,
.security-card-inp-wrap .vitualKeyCheck .icon-mouse02 {
  margin: 0 0 0 -4px;
}
.security-card-inp-wrap .vitualKeyCheck .btn-mouse {
  width: 24px;
  height: 24px;
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*보안모듈페이지 타이틀 이미지*/
.title-top.bg-com-img {
  background-image: url("/img/common/title_com_img.png");
  background-repeat: no-repeat;
  background-position: right 30px center;
}

/*----------------------------------------*\
  || 2채널 인증
\*----------------------------------------*/
.ars-num {
  width: 86px;
  padding: 13px 0;
  border: 1px solid var(--disable-clr);
  text-align: center;
  font-size: 24px;
  border-radius: 7px;
}

.alert-message,
td.alert-message {
  padding: 60px 0;
  text-align: center;
}

.alert-message .text {
  font-size: 16px;
}

/*----------------------------------------*\
  || OTP IMG
\*----------------------------------------*/
.bg-otpimg {
  margin-top: 40px;
  padding: 30px;
  background: #f7f7f7 url(/img/common/bg_otpimg.png) no-repeat right 80px center;
  background-size: 20%;
}
.bg-otpimg .warn-title {
  width: 70%;
}
.bg-otpimg .warn-title::after {
  content: "";
}
.bg-otpimg .warn-txt {
  width: 70%;
}

/*----------------------------------------*\
  || 2채널 보안 인증완료
\*----------------------------------------*/
.certifiy-result-wrap {
  padding: 165px 0 73px;
  background: url("/img/common/bg_result_succ.png") no-repeat 50% 34%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.certifiy-result-wrap + .list-style.type02 {
  margin-top: 34px;
}
.certifiy-result-wrap .text {
  font-weight: 500;
  font-size: 24px;
  color: var(--body-clr);
}

/*----------------------------------------*\
  || 보안카드 코드표
\*----------------------------------------*/
.secret-code-select {
  position: relative;
  width: 480px;
  height: 300px;
  background: url("/img/common/security_card.jpg") no-repeat center center;
}
.secret-code-select .mark {
  position: absolute;
  border: 1px solid #e06262;
  border-radius: 0px;
  width: 22px;
  height: 18px;
  background: var(--bg-clr2);
  /*background:#f0b2b2;*/
  text-indent: -5000px;
}
.secret-code-select .mark.mark-0101 {
  top: 54px;
  left: 52px;
}
.secret-code-select .mark.mark-0102 {
  top: 54px;
  left: 68px;
}
.secret-code-select .mark.mark-0201 {
  top: 54px;
  left: 140px;
}
.secret-code-select .mark.mark-0202 {
  top: 54px;
  top: 171px;
}
.secret-code-select .mark.mark-0301 {
  top: 54px;
  left: 249px;
}
.secret-code-select .mark.mark-0302 {
  top: 54px;
  left: 273px;
}
.secret-code-select .mark.mark-0401 {
  top: 54px;
  left: 352px;
}
.secret-code-select .mark.mark-0402 {
  top: 54px;
  left: 376px;
}
.secret-code-select .mark.mark-0501 {
  top: 54px;
  left: 455px;
}
.secret-code-select .mark.mark-0502 {
  top: 54px;
  left: 479px;
}
.secret-code-select .mark.mark-0601 {
  top: 68px;
  left: 52px;
}
.secret-code-select .mark.mark-0602 {
  top: 68px;
  left: 68px;
}
.secret-code-select .mark.mark-0701 {
  top: 68px;
  left: 140px;
}
.secret-code-select .mark.mark-0702 {
  top: 68px;
  top: 171px;
}
.secret-code-select .mark.mark-0801 {
  top: 68px;
  left: 249px;
}
.secret-code-select .mark.mark-0802 {
  top: 68px;
  left: 273px;
}
.secret-code-select .mark.mark-0901 {
  top: 68px;
  left: 352px;
}
.secret-code-select .mark.mark-0902 {
  top: 68px;
  left: 376px;
}
.secret-code-select .mark.mark-1001 {
  top: 68px;
  left: 455px;
}
.secret-code-select .mark.mark-1002 {
  top: 68px;
  left: 479px;
}
.secret-code-select .mark.mark-1101 {
  top: 102px;
  left: 52px;
}
.secret-code-select .mark.mark-1102 {
  top: 102px;
  left: 68px;
}
.secret-code-select .mark.mark-1201 {
  top: 102px;
  left: 140px;
}
.secret-code-select .mark.mark-1202 {
  top: 102px;
  top: 171px;
}
.secret-code-select .mark.mark-1301 {
  top: 102px;
  left: 249px;
}
.secret-code-select .mark.mark-1302 {
  top: 102px;
  left: 273px;
}
.secret-code-select .mark.mark-1401 {
  top: 102px;
  left: 352px;
}
.secret-code-select .mark.mark-1402 {
  top: 102px;
  left: 376px;
}
.secret-code-select .mark.mark-1501 {
  top: 102px;
  left: 455px;
}
.secret-code-select .mark.mark-1502 {
  top: 102px;
  left: 479px;
}
.secret-code-select .mark.mark-1601 {
  top: 136px;
  left: 52px;
}
.secret-code-select .mark.mark-1602 {
  top: 136px;
  left: 68px;
}
.secret-code-select .mark.mark-1701 {
  top: 136px;
  left: 140px;
}
.secret-code-select .mark.mark-1702 {
  top: 136px;
  top: 171px;
}
.secret-code-select .mark.mark-1801 {
  top: 136px;
  left: 249px;
}
.secret-code-select .mark.mark-1802 {
  top: 136px;
  left: 273px;
}
.secret-code-select .mark.mark-1901 {
  top: 136px;
  left: 352px;
}
.secret-code-select .mark.mark-1902 {
  top: 136px;
  left: 376px;
}
.secret-code-select .mark.mark-2001 {
  top: 136px;
  left: 455px;
}
.secret-code-select .mark.mark-2002 {
  top: 136px;
  left: 479px;
}
.secret-code-select .mark.mark-2101 {
  top: 169px;
  left: 52px;
}
.secret-code-select .mark.mark-2102 {
  top: 169px;
  left: 68px;
}
.secret-code-select .mark.mark-2201 {
  top: 169px;
  left: 140px;
}
.secret-code-select .mark.mark-2202 {
  top: 169px;
  top: 171px;
}
.secret-code-select .mark.mark-2301 {
  top: 169px;
  left: 249px;
}
.secret-code-select .mark.mark-2302 {
  top: 169px;
  left: 273px;
}
.secret-code-select .mark.mark-2401 {
  top: 169px;
  left: 352px;
}
.secret-code-select .mark.mark-2402 {
  top: 169px;
  left: 376px;
}
.secret-code-select .mark.mark-2501 {
  top: 169px;
  left: 455px;
}
.secret-code-select .mark.mark-2502 {
  top: 169px;
  left: 479px;
}
.secret-code-select .mark.mark-2601 {
  top: 203px;
  left: 52px;
}
.secret-code-select .mark.mark-2602 {
  top: 203px;
  left: 68px;
}
.secret-code-select .mark.mark-2701 {
  top: 203px;
  left: 140px;
}
.secret-code-select .mark.mark-2702 {
  top: 203px;
  top: 171px;
}
.secret-code-select .mark.mark-2801 {
  top: 203px;
  left: 249px;
}
.secret-code-select .mark.mark-2802 {
  top: 203px;
  left: 273px;
}
.secret-code-select .mark.mark-2901 {
  top: 203px;
  left: 352px;
}
.secret-code-select .mark.mark-2902 {
  top: 203px;
  left: 376px;
}
.secret-code-select .mark.mark-3001 {
  top: 203px;
  left: 455px;
}
.secret-code-select .mark.mark-3002 {
  top: 203px;
  left: 479px;
}
.secret-code-select .mark.mark-3101 {
  top: 236px;
  left: 52px;
}
.secret-code-select .mark.mark-3102 {
  top: 236px;
  left: 68px;
}
.secret-code-select .mark.mark-3201 {
  top: 236px;
  left: 140px;
}
.secret-code-select .mark.mark-3202 {
  top: 236px;
  top: 171px;
}
.secret-code-select .mark.mark-3301 {
  top: 236px;
  left: 249px;
}
.secret-code-select .mark.mark-3302 {
  top: 236px;
  left: 273px;
}
.secret-code-select .mark.mark-3401 {
  top: 236px;
  left: 352px;
}
.secret-code-select .mark.mark-3402 {
  top: 236px;
  left: 376px;
}
.secret-code-select .mark.mark-3501 {
  top: 236px;
  left: 455px;
}
.secret-code-select .mark.mark-3502 {
  top: 236px;
  left: 479px;
}

.docu-table-area + .docu-table-area {
  margin-top: 40px;
}
.docu-table-area .sub-title {
  font-size: 18px;
}

table .th-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
}

.radio-box .th-sub {
  display: inline-block;
  padding-left: 30px;
}

/*----------------------------------------*\
  || 서비스 이용절차
\*----------------------------------------*/
.service-step {
  border-top: 1px solid var(--body-clr);
}
.service-step .table.width-style01 {
  width: 50%;
}
.service-step .table-cell {
  width: 50%;
  padding: 40px 203px 193px 60px;
  border-right: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  vertical-align: top;
}
.service-step .table-cell:nth-child(2n) {
  border-right: none;
}
.service-step .table-cell.service-box {
  background: url("/img/common/icon_uselist01.gif") no-repeat 92% 35px;
  background-size: 27% auto;
}
.service-step .table-cell.service-box.img02 {
  padding-right: 340px;
  background-image: url("/img/common/icon_uselist02.gif");
  background-size: 50% auto;
}
.service-step .table-cell.service-box.img03 {
  background-image: url("/img/common/icon_uselist03.gif");
}
.service-step .table-cell.service-box.img04 {
  padding-right: 340px;
  background-image: url("/img/common/icon_uselist04.gif");
  background-size: 50% auto;
}
.service-step .table-cell.service-box.img05 {
  background-image: url("/img/common/icon_uselist05.gif");
}
.service-step .step-title {
  position: relative;
}
.service-step .step-title > .txt {
  display: block;
  margin-bottom: 14px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
}
.service-step .step-title > .txt:last-child {
  font-size: 16px;
}
.service-step .step-title .num-icon {
  position: absolute;
  top: -4px;
  left: -41px;
  display: block;
  width: 24px;
  height: 24px;
  background: var(--body-clr);
  border-radius: 50%;
  color: var(--bg-clr2);
  text-align: center;
  line-height: 27px;
  font-size: 16px;
}
.service-step .step-des li {
  margin-top: 5px;
  font-size: 14px;
  line-height: 23px;
  padding-left: 15px;
}
.service-step .step-des li::before {
  content: "";
  float: left;
  margin: 7px 0 0 -15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #999;
}
.service-step .step-des .small {
  display: block;
  font-size: 14px;
  line-height: 1.6;
}

/*----------------------------------------*\
  || Toss 토스인증
\*----------------------------------------*/
.cert-list {
  display: flex;
  justify-content: center;
}

.cert-item {
  margin: 10px;
  padding: 30px 15px 20px;
  border: 2px solid var(--line-clr);
  text-align: center;
}

/*----------------------------------------*\
  || Sub Box
\*----------------------------------------*/
.sub-box-wrap {
  padding: 20px;
}
.sub-box-wrap.option-td {
  display: none;
  width: 680px;
  clear: both;
  padding: 15px 0 0;
}
.sub-box-wrap.option-td .sub-box {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.sub-box {
  background-color: #f7f7f7;
  padding: 20px 20px 16px;
}
.sub-box.sub-box02 {
  padding: 40px;
}

.sub-box::after,
.sub-box-wrap::after {
  content: "";
  display: block;
  clear: both;
}

.sub-box-num,
.sub-box-btn {
  display: table-cell;
  vertical-align: middle;
}

.sub-box-num {
  width: 410px;
  padding: 10px 0 10px 20px;
}
.sub-box-num li {
  font-size: 14px;
  line-height: 30px;
}

.sub-box-btn {
  width: 270px;
}

.doc-box02 {
  width: 50%;
  float: left;
  font-size: 0;
  text-align: center;
}
.doc-box02:first-child {
  border-right: 1px solid var(--disable-clr);
}
.doc-box02 span {
  color: #666;
  font-size: 14px;
  font-weight: 700;
  vertical-align: middle;
}
.doc-box02 button {
  vertical-align: middle;
  margin-left: 20px;
}

.checked-txt-fail {
  padding: 10px 10px 10px 25px;
  background: url("/img/common/checked_icon_fail.png") no-repeat left center;
  display: block;
}

.table-exp {
  font-size: 11px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .bg-otpimg {
    margin-top: 0;
    padding: 24px 16px;
    background-image: none;
  }
  html.responsive .warn-title {
    width: 100%;
    margin-bottom: 15px;
    font-size: 20px;
  }
  html.responsive .warn-txt {
    width: 100%;
    font-size: 13px;
  }
  html.responsive + .info-table-area {
    padding-top: 30px;
  }
  html.responsive .service-step .table {
    display: block !important;
  }
  html.responsive .service-step .table.width-style01 {
    width: 100%;
  }
  html.responsive .service-step .table-cell {
    display: block !important;
    width: 100%;
    border-right: 0;
  }
  html.responsive .service-step .table-cell .box.img {
    padding-left: 10px;
  }
  html.responsive .service-step .table-cell .box.img img {
    max-width: 100%;
  }
  .service-step .table-cell.service-box {
    background-size: 150px auto;
  }
  .service-step .table-cell.service-box.img02 {
    background-size: 260px auto;
  }
  .service-step .table-cell.service-box.img04 {
    background-size: 260px auto;
  }
}
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .service-step .table-cell {
    padding: 40px 60px 350px 60px;
  }
  .service-step .table-cell.service-box {
    background-size: 150px auto;
    background-position: 50% 90%;
  }
  .service-step .table-cell.service-box.img02 {
    padding: 40px 60px 300px 60px;
    background-size: 260px auto;
  }
  .service-step .table-cell.service-box.img04 {
    padding: 40px 60px 300px 60px;
    background-size: 260px auto;
  }
  .service-step .table-cell.service-box + .service-step .table-cell.service-box {
    margin-top: 30px;
  }
}
/*----------------------------------------*\
  || Error Page 에러페이지
\*----------------------------------------*/
.common-notice-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  inset: 0;
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;
}
.common-notice-wrap * {
  max-width: 520px;
}
.common-notice-wrap .img {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 10px;
}
.common-notice-wrap .icon {
  width: 16px;
  height: auto;
  min-width: 16px;
  margin-right: 5px;
  vertical-align: middle;
}
.common-notice-wrap h3.title {
  font-size: 24px;
  line-height: 28px;
  color: var(--tit-clr);
  text-align: center;
}
.common-notice-wrap strong.title {
  font: inherit;
  font-weight: 700;
  color: inherit;
}
.common-notice-wrap .title em,
.common-notice-wrap strong.txt em {
  font: inherit;
  color: var(--main-clr);
}
.common-notice-wrap .title + p.txt {
  margin-top: 20px;
}
.common-notice-wrap .title + strong.txt {
  margin-top: 8px;
}
.common-notice-wrap .txt {
  font-size: 16px;
  line-height: 19px;
  color: #666;
  text-align: center;
  word-break: auto-phrase;
}
.common-notice-wrap .txt em {
  font: inherit;
  font-weight: 500;
  color: var(--body-clr);
}
.common-notice-wrap .txt + .txt {
  margin-top: 20px;
}
.common-notice-wrap .notice-line {
  width: 100%;
  height: 1px;
  margin: 30px auto;
  background-color: #e6e8e8;
  border: 0;
}
.common-notice-wrap .box {
  display: flex;
  align-items: normal;
  gap: 10px;
  width: 100%;
}
.common-notice-wrap .box + .box {
  margin-top: 20px;
}
.common-notice-wrap .box dt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: fit-content;
  height: 25px;
  padding: 3px 10px;
  border: 1px solid var(--main-clr);
  border-radius: 15px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: var(--main-clr);
}
.common-notice-wrap .box dd {
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  color: var(--tit-clr);
}
.common-notice-wrap .notice {
  margin-top: 9px;
  padding-left: 12px;
  font-size: 12px;
  line-height: 14px;
  color: var(--cap-clr);
  text-indent: -12px;
}
.common-notice-wrap .notice::before {
  content: "※";
  display: inline-block;
  margin-right: 5px;
  text-indent: 0;
}

@media (max-width: 768px) {
  .common-notice-wrap {
    padding-bottom: 90px;
  }
  .common-notice-wrap .txt br {
    display: none;
  }
  .common-notice-wrap .box {
    gap: 10px;
    align-items: flex-start;
    flex-direction: column;
  }
  .common-notice-wrap .basic-btn-wrap {
    position: fixed;
    inset: 20px;
    top: initial;
    width: calc(100% - 40px);
    max-width: none;
    margin: 0;
  }
  .common-notice-wrap .basic-btn {
    max-width: none;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  || Search : 전체메뉴 검색
\*----------------------------------------*/
.dim-search-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.9);
}

.dim-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  padding: 70px 77px 0px 77px;
  font-size: 16px;
  overflow-y: scroll;
}

.search-01dep {
  padding-bottom: 30px;
  color: var(--bg-clr2);
  font-size: 24px;
}

.search-02dep-wrap {
  border-top: 2px solid var(--bg-clr2);
}
.search-02dep-wrap > li {
  width: 230px;
  padding: 30px 0 50px;
  color: var(--bg-clr2);
  font-size: 18px;
}

.search-03dep-wrap li a {
  margin-top: 15px;
  color: #efefef;
  font-size: 16px;
}
.search-03dep-wrap li:first-child a {
  margin-top: 20px;
}

.search-result li {
  padding: 18px 0;
  border-top: 1px solid #999999;
}
.search-result li:last-child {
  border-bottom: 1px solid #999999;
}
.search-result li a {
  padding-left: 20px;
  color: var(--bg-clr2);
}

span.search-arrow {
  width: 7px;
  height: 11px;
  padding-top: 5px;
  margin: 0 10px;
  display: inline-block;
  background: url("/img/common/icon_search_arrow.png") no-repeat;
}

/*----------------------------------------*\
  || Notice
\*----------------------------------------*/
.notice-info-box {
  width: 100%;
  padding: 20px;
  background: #efefef;
  border-radius: 7px;
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
  word-break: keep-all;
}

.notice-info-txt {
  padding: 25px 35px;
  font-size: 18px;
  line-height: 27px;
}

.notice-smart-wrap {
  padding: 2px 20px 15px;
  background: #efefef;
  border-radius: 7px;
}

.notice-smart-title {
  padding: 20px 0 15px 0;
  font-weight: 700;
  font-size: 15px;
}

.notice-smart-list {
  font-size: 14px;
}
.notice-smart-list li {
  font-size: 14px;
  line-height: 24px;
}
.notice-smart-list li strong {
  margin-right: 5px;
  font-weight: 700;
}

/*----------------------------------------*\
  || 에러 404
\*----------------------------------------*/
.title-top.error-top {
  justify-content: center;
}

.error-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 22px;
  font-weight: 500;
  text-decoration: underline;
}

/*----------------------------------------*\
  || 안내화면 바로가기
\*----------------------------------------*/
.guide-wrap {
  height: 420px;
  background: #eee;
  text-align: center;
  font-size: 22px;
  margin-top: 50px;
}
.guide-wrap h3 {
  padding-top: 100px;
  color: #ff0000;
  font-weight: 500;
}

/*----------------------------------------*\
  || 권유직원
\*----------------------------------------*/
.employee-box .notice-list li {
  font-weight: 500;
  font-size: 16px;
}
.employee-box .select-basic {
  width: 140px;
}
.employee-box .input-basic {
  width: 259px;
  margin-left: 7px;
}
.employee-box .btn-sm-wh {
  margin-left: 8px;
}

/*----------------------------------------*\
  || Error : 오류 페이지
\*----------------------------------------*/
.error-wrap.type02 {
  width: 100%;
  max-width: 700px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  text-align: center;
}
.error-wrap.type02 .error-title {
  font-size: 0;
  padding: 0 0 16px;
}
.error-wrap.type02 .error-title .title01 {
  font-size: 48px;
  color: var(--body-clr);
  font-weight: 700;
  margin-right: 15px;
}
.error-wrap.type02 .error-title .title02 {
  font-size: 32px;
  color: var(--cap-clr);
  font-weight: 700;
}
.error-wrap.type02 .error-cont {
  background: #eeeff1;
  border-top: 1px solid var(--disable-clr);
  padding: 32px 16px;
}
.error-wrap.type02 .error-cont li {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px;
  line-height: 1.4;
  letter-spacing: -1px;
}
.error-wrap.type02 .btn-area {
  padding: 15px 0 0;
}
.error-wrap.type02 .btn-main {
  display: inline-block;
  padding: 10px 20px;
  background: #666;
  color: var(--bg-clr2);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.error {
    font-size: 16px;
  }
  .error-wrap.type02 {
    width: calc(100% - 40px);
    margin: auto;
  }
}
/* 대출모집법인 추가  */
.layout-wrap2 {
  width: 100%;
}

.header-wrap-cor {
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 0 5px #eee;
}

.header-container-cor {
  width: 1200px;
  height: 100%;
  margin: auto;
}

.header-container-cor-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px;
}

.header-container-cor-top .name,
.header-container-cor-top .name span {
  font-size: 14px;
}

.header-container-cor-top .logout {
  margin-left: 15px;
  background: #1a61b3;
  padding: 8px 10px;
  font-size: 12px;
  color: #fff;
}

.header-container-cor-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list {
  display: flex;
  gap: 50px;
  align-items: center;
  height: 100%;
}

.nav-link {
  font-size: 21px;
  line-height: 120px;
  font-weight: 400;
}

.nav-item {
  transition: all 0.5s ease;
}

.nav-item:hover {
  border-color: #1a61b3;
}

.nav-item.on {
  border-color: #1a61b3;
}

.nav-item {
  border-bottom: 3px solid transparent;
}

.title-wrap2 {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 390px;
  background: url(/img/content/cor/bg_cor.png) no-repeat center/cover;
}

.title-wrap2.type01 {
  background-image: url(/img/content/cor/bg_cor01.png);
}

.title-wrap2.type02 {
  background-image: url(/img/content/cor/bg_cor02.png);
}

.title-wrap2.type03 {
  background-image: url(/img/content/cor/bg_cor03.png);
}

.page-title2 {
  margin-top: 110px;
  font-size: 38px;
  font-weight: 400;
}

.container2 {
  width: 1200px;
  margin: -80px auto auto;
}

.basic-box {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #eee;
}

.basic-box.type-blue {
  padding: 15px;
  border-color: #1a61b3;
  background: #f8fdff;
  text-align: center;
}

.table-cor {
  margin: 0 50px;
}

.table-cor tr {
  height: 80px;
  border-bottom: 1px solid #eee;
}

.table-cor tr:last-child {
  border-bottom: none;
}

.table-cor th {
  line-height: 80px;
  text-align: left;
  font-size: 14px;
  color: #000;
  vertical-align: middle;
  word-break: keep-all;
  white-space: normal;
}

.table-cor td {
  vertical-align: middle;
}

.table-cor02 {
  width: 100%;
  text-align: center;
  font-size: 14px;
}

.table-cor02 thead tr {
  border-bottom: 1px solid #ccc;
}

.table-cor02 tbody tr {
  border-top: 1px solid #eee;
}

.table-cor02 tbody tr:hover {
  background: #f8fdff;
}

.table-cor02 th {
  color: #111;
  vertical-align: middle;
  word-break: keep-all;
  white-space: normal;
}

.table-cor02 th,
.table-cor02 td {
  padding: 15px 10px;
}

.table-cor02 td {
  vertical-align: middle;
}

.table-cor03 {
  position: relative;
  width: 100%;
  margin-top: 15px;
  border: 1px solid #eee;
  border-radius: 14px;
  border-collapse: initial;
  text-align: left;
  overflow: hidden;
}

.table-cor03 tr::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  background: #eee;
  height: 1px;
}

.table-cor03 th {
  background: #f8fdff;
  vertical-align: middle;
}

.table-cor03 th,
.table-cor03 td {
  padding: 20px;
  font-size: 14px;
}

.table-cor03 tr:first-child::after {
  display: none;
}

.table-cor03 tr.type-black::after {
  background: #333;
}

.input-cor {
  width: 555px;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #eee;
  border-radius: 7px;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
}

.input-cor:focus {
  border-color: #1a61b3;
  background: #f8fdff;
}

.input-cor.with-btn {
  width: 410px;
  padding-right: 60px;
}

.input-col-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: end;
}

.input-time {
  position: absolute;
  right: 15px;
  top: 20px;
  font-size: 14px;
  color: #ff3e3e;
}

.label-cor {
  position: relative;
  font-size: 14px;
}

.input-cor.type-xxs {
  width: 100px;
}

.input-cor.type-xs {
  width: 130px;
}

.input-cor.type-cal {
  background: url(/img/content/cor/ico_cor_03.png) no-repeat center right 5px;
  cursor: pointer;
}

.radio-cor + .label-cor::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #eee;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5px;
}

.radio-cor:checked + .label-cor::before {
  background: #1a61b3;
}

.radio-cor:checked + .label-cor::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  left: 6px;
  top: 6px;
}

.select-cor {
  border: 1px solid #eee;
  border-radius: 7px;
  width: 70px;
  height: 35px;
  padding: 0 10px;
  font-size: 14px;
  background: url(/img/common/icon_select_333.png) no-repeat center right 8px/15px;
}

.btn-wrap-cor {
  display: flex;
  justify-content: center;
  align-items: center;
}

.basic-box + .btn-wrap-cor {
  margin: 100px 0;
}

.btn-basic-cor {
  width: 140px;
  height: 50px;
  line-height: 50px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 7px;
  font-size: 14px;
  text-align: center;
}

.btn-basic-cor + .btn-basic-cor {
  margin-left: 15px;
}

.btn-basic-cor:hover {
  box-shadow: 0 0 8px #eee;
}

.btn-basic-cor.type-l {
  width: 240px;
}

.btn-small-cor {
  font-size: 14px;
  color: #888;
}

.btn-basic-cor.type-blue {
  background: #315d8f;
  color: #fff;
  border-color: #315d8f;
}

.btn-basic-cor.type-blue2 {
  background: #1a61b3;
  color: #fff;
  border-color: #1a61b3;
}

.btn-basic-cor.type-skyblue {
  background: #f8fdff;
  color: #333;
}

.btn-basic-cor.type-gray {
  background: #f2f2f2;
  color: #1a61b3;
}

.btn-basic-cor.type-xs {
  width: 80px;
  height: 45px;
  line-height: 45px;
  font-size: 12px;
}

.btn-basic-cor.type-s {
  width: 100px;
}

.btn-basic-cor.type-search {
  background: #315d8f;
  color: #fff;
}

.btn-basic-cor.type-search span {
  color: inherit;
}

.btn-basic-cor.type-search span::before {
  content: "";
  position: relative;
  top: -1px;
  width: 18px;
  height: 13px;
  margin-right: 2px;
  display: inline-block;
  background: url("/img/content/cor/ico_search.png") no-repeat center/contain;
  vertical-align: middle;
}

.footer-wrap2 {
  border-top: 1px solid #eee;
}

.footer-container2 {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: 30px auto;
  padding-bottom: 50px;
}

.footer-nav-list2 {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  font-size: 14px;
}

.footer-nav-mini-list {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  font-size: 12px;
}

.footer-address2,
.footer-copyright2 {
  color: #666;
  font-style: normal;
  margin-bottom: 7px;
  font-size: 11px;
}

.dim-background {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #000;
  z-index: 900;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.dim-background.on {
  opacity: 0.8;
}

.popup-wrap-cor {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 364px;
  max-width: 760px;
  background: #fff;
  padding: 30px;
  border-radius: 14px;
}

.popup-wrap-cor-head {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.popup-wrap-cor-title {
  font-size: 20px;
  font-weight: 500;
}

.popup-wrap-cor-btn-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: url(/img/common/btn_close_l.png) no-repeat center/20px;
}

.popup-tit-cor {
  font-size: 20px;
  text-align: center;
  margin-bottom: 15px;
}

.popup-box-cor {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  background: #f8fdff;
  padding: 20px 15px;
}

.popup-dl-cor {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.popup-dl-cor:last-child {
  margin-bottom: 0;
}

.popup-dt-cor {
  min-width: 80px;
}

.popup-dt-cor,
.popup-dd-cor {
  font-size: 14px;
  line-height: 1.5;
}

.notice-msg-cor {
  margin-top: 15px;
  margin-left: 20px;
  text-indent: -20px;
  font-size: 14px;
  line-height: 1.5;
}

.notice-msg-cor::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  background: url(/img/content/cor/ico_cor_01.png) no-repeat center/contain;
  vertical-align: middle;
}

.basic-box + .page-num-cor {
  margin: 100px auto;
}

.page-num-list-cor {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  gap: 5px;
}

.page-num-cor .page-first,
.page-num-cor .page-prev,
.page-num-cor .page-next,
.page-num-cor .page-last {
  width: 100%;
  height: 100%;
  background: url(/img/common/page_left.png) no-repeat center;
}

.page-num-cor .page-first {
  background-image: url(/img/common/page_first.png);
}

.page-num-cor .page-prev {
  background-image: url(/img/common/page_left.png);
}

.page-num-cor .page-next {
  background-image: url(/img/common/page_right.png);
}

.page-num-cor .page-last {
  background-image: url(/img/common/page_last.png);
}

.page-num-cor .page.on {
  background: #1a61b3;
  color: #fff;
}

.page-num-item-cor {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #eee;
  border-radius: 4px;
  text-align: center;
  overflow: hidden;
}

.file-name-cor {
  color: #666;
  margin-bottom: 10px;
}

.file-name-cor:last-child {
  margin-bottom: 0;
}

.del-btn-cor {
  width: 17px;
  height: 17px;
  margin-right: 5px;
  background: url(/img/content/cor/ico_cor_06.png) no-repeat center;
  vertical-align: text-bottom;
}

/* // 대출모집법인 추가  */
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  || 대출신청
\*----------------------------------------*/
.td-v {
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--bg-clr2);
}
.td-v.email-box select {
  margin-left: 5px;
}
.td-v.email-box .alpha {
  float: left;
  margin: 0 10px 0 2px;
  color: var(--cap-clr);
  font-size: 14px;
  line-height: 40px;
}

.addr .post .input-basic {
  width: 100px;
  margin-left: 15px;
}

/* 고려저축은행 대출페이지 반응형 */
.ui-accordion-layer.js-ui-accordion-layer.slide-bg01 .slide-box-txt {
  background: #c6dcf4;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  .td-v {
    display: block;
    width: 100%;
    padding: 0;
  }
  .td-v.email-box select {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
  }
  .td-v.email-box .alpha {
    display: block;
    width: 100%;
    padding: 0;
  }
  .addr .post .fl {
    width: 50px;
  }
  .addr .post .input-basic {
    width: 35%;
  }
  .addr .post .btn-sm-wh {
    width: 80px;
  }
}
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .addr .post .fl {
    width: 100%;
    text-align: center;
  }
  .addr .post .input-basic {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
  }
  .addr .post .btn-sm-wh {
    width: 100%;
    margin-top: 10px;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  || My Page
\*----------------------------------------*/
.mypg-wrap {
  width: 100%;
  padding: 40px 0 0;
}

.mypg-picture {
  float: left;
  width: 160px;
  max-height: 233px;
  padding: 36px 28px;
  border: 1px solid var(--line-clr3);
  border-radius: 14px;
  text-align: center;
}

.bth-picture {
  width: 100%;
  height: 104px;
  position: relative;
  max-width: 120px;
  border: 1px solid var(--line-clr3);
  border-radius: 50%;
}
.bth-picture img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.bth-picture::after {
  content: "";
  display: inline-block;
  width: 38px;
  height: 37px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: url(/img/common/icon_picture01.png) no-repeat center center;
}

.picture-name {
  font-size: 16px;
  color: var(--body-clr);
  padding-top: 36px;
}

.mypg-info {
  float: right;
  width: calc(100% - 180px);
  padding: 30px 1.85%;
  background: #f7f7f7;
  border-radius: 14px;
}
.mypg-info .info-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg-clr2);
}
.mypg-info .info-list li {
  flex: 1;
  padding: 35px 20px;
  border-right: 1px solid var(--line-clr3);
  display: table-cell;
}
.mypg-info .info-list li:last-child {
  border-right: none;
}
.mypg-info .info-list li .mb15 {
  font-size: 16px;
}
.mypg-info .btn-sm-wh {
  float: right;
}

.info-wtitle {
  display: none;
}

.mypg-info-title {
  float: left;
  font-size: 16px;
}

.info-list span {
  font-size: 16px;
}
.info-list .info-won {
  font-size: 18px;
  word-break: break-all;
}

.service-content {
  width: 100%;
  border-top: 1px solid var(--line-clr3);
  border-bottom: 1px solid var(--line-clr3);
}
.service-content li {
  padding: 13px 1.85%;
  width: 50%;
  float: left;
  border-bottom: 1px solid #efefef;
  display: table;
}
.service-content li:nth-child(2n-1) {
  border-right: 1px solid #efefef;
}
.service-content li .sev-title {
  font-size: 14px;
  display: table-cell;
  vertical-align: middle;
}
.service-content .btn-thin.sm {
  max-width: 60px;
}

.js-swiper-mypage-account-slide {
  padding: 30px 25px 15px;
  background: #efefef;
  border-radius: 14px;
  overflow: hidden;
}
.js-swiper-mypage-account-slide .mypg-slick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.js-swiper-mypage-account-slide .swiper-container {
  margin: 0 -8px;
  overflow: visible;
}

.mypg-slick {
  display: none;
  max-width: 100% !important;
  height: auto !important;
}
.mypg-slick.swiper-no-swiping {
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transition: 0s !important;
  transition: 0s !important;
  margin: 0;
}
.mypg-slick::after {
  content: "";
  display: block;
  clear: both;
}
.mypg-slick .mypg-slickli {
  position: relative;
  margin-bottom: 15px;
  text-align: center;
  min-height: 391px;
  box-sizing: border-box;
  padding: 0 8px;
  width: 25%;
  z-index: 0;
}
.mypg-slick .mypg-slickli::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  bottom: 0;
  background: var(--bg-clr2);
  z-index: -1;
}
.mypg-slick .mypg-slickli:nth-child(4n+1) {
  clear: both;
}

.mypg-slicktop {
  padding: 30px 0 25px 0;
}

.mypg-title {
  font-size: 24px;
  font-weight: 500;
}

.mypg-txt {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin-top: 15px;
  display: inline-block;
}

.mypgcontent-txt {
  background: #f7f7f7;
  width: 100%;
  display: table;
  margin-bottom: 20px;
  padding: 60px 0;
  height: 168px;
  max-height: 168px;
}

.mypgcont-title {
  display: table-cell;
  font-size: 36px;
  font-weight: 500;
  vertical-align: middle;
}
.mypgcont-title > span {
  font-size: 48px;
  color: var(--neg-clr);
  font-weight: 500;
  letter-spacing: -2.25px;
}

.mypg-subtxt {
  font-size: 14px;
  font-weight: 500;
  color: var(--cap-clr);
  line-height: 21px;
}

.btn-slick {
  width: 50%;
  border-top: 1px solid var(--disable-clr);
  float: left;
}

.mypg-top {
  padding: 30px 5.79% 24px;
  min-height: 109px;
}

.mypg-middle {
  padding: 0 5.79%;
  min-height: 235px;
}
.mypg-middle .middle-info li {
  background: #f7f7f7;
  padding: 18px 7.85%;
  width: 100%;
  text-align: left;
  display: block;
  min-height: 84px;
}
.mypg-middle .middle-info li:last-child {
  border-top: 1px solid var(--line-clr2);
}
.mypg-middle .middle-info li:first-child .won {
  font-size: 18px;
}
.mypg-middle .middle-info li > p {
  font-size: 16px;
}
.mypg-middle .middle-info .won {
  font-size: 20px;
  font-weight: 500;
  word-break: break-all;
}

.mypg-bottom button {
  width: 50%;
  float: left;
  padding: 15px 0;
  border-top: 1px solid var(--line-clr);
  border-right: 1px solid var(--line-clr);
  font-size: 16px;
}
.mypg-bottom button:last-child {
  border-right: none;
}

.mypg-middle .mypg-subtxt {
  display: block;
  margin: 23px 0 0 0;
}

.mypg-slick .slick-dots li button {
  opacity: 0;
  height: 3px;
}

/*----------------------------------------*\
  || 카드 슬라이더
\*----------------------------------------*/
.slide-section.table-clone {
  padding: 0 40px;
  position: relative;
}
.slide-section.is-min-length .swiper-button-next,
.slide-section.is-min-length .swiper-button-prev {
  display: none;
}
.slide-section.is-min-length .card-slider-list {
  width: auto !important;
  font-size: 0;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
}
.slide-section.is-min-length .slide {
  display: inline-block;
  vertical-align: top;
  float: none;
  white-space: normal;
}
.slide-section .slide {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 40px 40px 40px 0;
  border-bottom: 1px solid var(--line-clr2);
}
.slide-section .slide:last-child {
  border: 0;
}
.slide-section .img-area {
  width: 270px;
  height: 170px;
  margin-right: 30px;
}
.slide-section .img-area img {
  display: inline;
  width: 100%;
}
.slide-section .card-img {
  position: relative;
  width: 100%;
  height: 100%;
  -moz-box-shadow: 5px 5px 45px rgba(0, 0, 0, 0.3);
  /*FF 3.5+*/
  -webkit-box-shadow: 5px 5px 45px rgba(0, 0, 0, 0.3);
  /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
  box-shadow: 5px 5px 45px rgba(0, 0, 0, 0.3);
  /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=45, Direction=135, Color=#000000);
  /*IE 5.5-7*/
  border-radius: 5px;
  overflow: hidden;
}
.slide-section .title-area {
  margin-top: 10px;
  color: #7a8999;
  font-size: 18px;
  transition: color 0.25s;
  -webkit-transition: color 0.25s;
}
.slide-section .title-area .arrow-txt {
  position: relative;
  display: inline-block;
  padding: 0;
  padding-right: 15px;
  color: #7a8999;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 20px;
  border: 0;
}
.slide-section .title-area .arrow-txt::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  box-sizing: content-box;
  border-bottom: 1px solid #7a8999;
  border-right: 1px solid #7a8999;
  margin: -7.5px 0 0 0;
  padding-top: 1px;
  padding-left: 1px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.slide-section .title-area .arrow-txt:hover {
  color: var(--body-clr);
}
.slide-section .title-area .arrow-txt:hover:before {
  border-color: var(--body-clr);
}
.slide-section .card-over {
  display: table !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s;
  -webkit-transition: opacity 0.25s;
}
.slide-section .card-over * {
  color: var(--bg-clr2);
}
.slide-section .card-over .card-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
}
.slide-section .card-over .card-des li {
  font-size: 12px;
  line-height: 22px;
}
.slide-section .slide:hover .card-over,
.slide-section .slide.is-focus .card-over,
.slide-section .slide.is-checked .card-over {
  opacity: 1;
}
.slide-section .slide:hover .title-area,
.slide-section .slide.is-focus .title-area,
.slide-section .slide.is-checked .title-area {
  color: var(--body-clr);
}
.slide-section .swiper-object {
  position: relative;
  padding: 40px 49px 60px;
  overflow: hidden;
}
.slide-section .swiper-container {
  overflow: visible;
}
.slide-section .swiper-wrapper {
  height: auto !important;
}
.slide-section .swiper-button-next-text,
.slide-section .swiper-button-prev-text {
  display: block;
  position: absolute;
  z-index: -1;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  color: transparent;
  font-size: 1px;
  line-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.slide-section .swiper-button-next,
.slide-section .swiper-button-prev {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  width: 80px;
  height: 100%;
  overflow: hidden;
}
.slide-section .swiper-button-next:before,
.slide-section .swiper-button-prev:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -42px;
  border-radius: 2px;
  border: 2px solid transparent;
}
.slide-section .swiper-button-next {
  right: 0;
}
.slide-section .swiper-button-next:before {
  right: 40px;
  margin-right: -12px;
  border-top-color: var(--body-clr);
  border-right-color: var(--body-clr);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.slide-section .swiper-button-prev {
  left: 0;
}
.slide-section .swiper-button-prev:before {
  left: 40px;
  margin-left: -12px;
  border-top-color: var(--body-clr);
  border-left-color: var(--body-clr);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.card-chk-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border: 1px solid #8f8f8f;
}
.card-chk-wrap + .img-area {
  margin-left: 60px;
}
.card-chk-wrap .card-chk {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: transparent;
  opacity: 0;
  z-index: 5;
}
.card-chk-wrap .card-chk:focus ~ .icon_chk {
  outline: -webkit-focus-ring-color auto 5px;
}
.card-chk-wrap .card-chk:checked ~ .icon_chk {
  background: url("../../img/common/check_card_t1.png") no-repeat center;
  filter: hue-rotate(178deg) brightness(1.9);
}
.card-chk-wrap .icon_chk {
  vertical-align: middle;
  width: 30px;
  height: 30px;
  background: var(--bg-clr2);
  border-radius: 3px;
}

.card-slider-list .slide {
  display: block;
}
.card-slider-list:after {
  content: "";
  display: table;
  clear: both;
}

/*----------------------------------------*\
  || 체크카드
\*----------------------------------------*/
.dim-contents.card-layer {
  width: 920px;
}
.dim-contents.card-layer .card-wrap {
  position: relative;
}
.dim-contents.card-layer .card-wrap .scroll-box {
  max-height: 690px;
  overflow-y: auto;
}
.dim-contents.card-layer .card-wrap .popup-body02 {
  max-height: inherit;
  text-align: left;
  padding: 30px 30px 60px;
}
.dim-contents.card-layer .card-wrap .body-box {
  margin-top: 35px;
}
.dim-contents.card-layer .card-wrap .body-box:first-child {
  margin-top: 0;
}
.dim-contents.card-layer .card-wrap .tit-des {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
}
.dim-contents.card-layer .card-wrap .sub-des {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.dim-contents.card-layer .card-wrap .notice-list .font-088 {
  padding-top: 20px;
  line-height: 23px;
}
.dim-contents.card-layer .card-wrap .notice-list .notice-i-list {
  margin-top: 0;
}
.dim-contents.card-layer .card-wrap .notice-list li .notice-i-list {
  padding-left: 0;
}
.dim-contents.card-layer .card-wrap .notice-i-list {
  margin-top: 20px;
  color: var(--body-clr);
}
.dim-contents.card-layer .card-wrap .nostyle-list {
  max-width: 1200px;
  margin: 0 auto;
}
.dim-contents.card-layer .card-wrap .nostyle-list li {
  margin-top: 3px;
  font-size: 14px;
  line-height: 22px;
}
.dim-contents.card-layer .card-wrap .nostyle-list li:first-child {
  margin-top: 0;
}
.dim-contents.card-layer .card-wrap .notice-box {
  margin-top: 30px;
  padding: 25px 20px;
  background: #f7f7f7;
}
.dim-contents.card-layer .card-wrap .notice-box .sub-des {
  margin-top: 0;
}
.dim-contents.card-layer .card-wrap .notice-box .notice-list {
  padding-top: 0;
}
.dim-contents.card-layer .card-wrap .notice-box .notice-list li {
  margin-top: 0;
  padding-left: 10px;
  font-size: 12px;
}
.dim-contents.card-layer .card-wrap .notice-box .notice-list li a {
  display: inline;
  font-weight: 700;
}
.dim-contents.card-layer .card-wrap .notice-box .nostyle-list li {
  font-size: 12px;
}
.dim-contents.card-layer .card-wrap .notice-box .notice-i-list {
  margin-top: 0;
  font-size: 12px;
}
.dim-contents.card-layer .card-wrap .notice-box .notice-i-list::before {
  margin-left: -10px;
}
.dim-contents.card-layer .card-wrap .step-ux {
  margin-top: 30px;
  padding: 30px 60px;
  background: #f7f7f7;
}
.dim-contents.card-layer .card-wrap .step-ux ul {
  display: table;
  width: 100%;
}
.dim-contents.card-layer .card-wrap .step-ux ul li {
  position: relative;
  display: table-cell;
  vertical-align: top;
  width: 25%;
  text-align: center;
}
.dim-contents.card-layer .card-wrap .step-ux ul li::before {
  content: "";
  display: block;
  width: 16px;
  height: 29px;
  position: absolute;
  top: 40px;
  right: -8px;
  background: url("/img/mypage/card_check_arrow.png") no-repeat center;
}
.dim-contents.card-layer .card-wrap .step-ux ul li:last-child::before {
  display: none;
}
.dim-contents.card-layer .card-wrap .step-ux ul li p {
  padding-top: 128px;
  font-size: 14px;
  line-height: 25px;
  background-repeat: no-repeat;
  background-position: center top;
}
.dim-contents.card-layer .card-wrap .step-ux ul li p.step-t01 {
  background-image: url("/img/mypage/card_check_step01.png");
  padding-top: 120px;
}
.dim-contents.card-layer .card-wrap .step-ux ul li p.step-t02 {
  background-image: url("/img/mypage/card_check_step02.png");
}
.dim-contents.card-layer .card-wrap .step-ux ul li p.step-t03 {
  background-image: url("/img/mypage/card_check_step03.png");
}
.dim-contents.card-layer .card-wrap .step-ux ul li p.step-t04 {
  background-image: url("/img/mypage/card_check_step04.png");
}
.dim-contents.card-layer .card-wrap .table-type04 th {
  width: 160px;
}
.dim-contents.card-layer .card-wrap .table-type04 td {
  padding: 14px 10px 13px 10px;
}
.dim-contents.card-layer .card-wrap td .notice-list {
  margin-left: 10px;
}
.dim-contents.card-layer .popup-foot01.foot-style01 {
  padding: 30px 0 40px;
}
.dim-contents.card-layer .table-title + .table-wrap {
  margin-top: 15px;
}
.dim-contents.card-layer .table-title + .table-wrap.clearfix {
  height: 201px;
}
.dim-contents.card-layer .notice-list + .popup-top-number {
  margin-top: 20px;
}
.dim-contents.card-layer.paybooc-layer .popup-body02 {
  max-height: inherit;
}
.dim-contents.card-layer.paybooc-layer .popup-foot01 {
  padding: 40px 30px;
}

/*----------------------------------------*\
  || 주소 찾기
\*----------------------------------------*/
.newaddrwss-search {
  display: table;
  width: 100%;
  margin: 20px 0 10px;
}

.cellb-wrap {
  display: table-cell;
  vertical-align: top;
}
.cellb-wrap.type01 {
  width: 140px;
  padding-right: 10px;
}
.cellb-wrap.type03 {
  padding-left: 10px;
  width: 120px;
}
.cellb-wrap.type03 button {
  width: 100%;
}
.cellb-wrap select {
  width: 100%;
}
.cellb-wrap input {
  max-width: 100%;
}

/*----------------------------------------*\
  || Kakao Box
\*----------------------------------------*/
.kakao-box {
  background: #f7f7f7;
  padding: 30px 20px;
}
.kakao-box .kakao-box-content li {
  line-height: 2;
  font-size: 14px;
}

.kakao-txt {
  font-size: 14px;
  line-height: 1.6;
}

.kakao-last-txt {
  padding: 30px 0 40px;
}
.kakao-last-txt span {
  display: block;
  font-size: 14px;
}
.kakao-last-txt span:first-child {
  margin-bottom: 12px;
}

/*----------------------------------------*\
  || 마이메뉴
\*----------------------------------------*/
.mymenu-box-top {
  width: 100%;
  background: var(--bg-clr2);
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid var(--disable-clr);
}
.mymenu-box-top .mymenu-box-wrap:last-child {
  border-bottom: none;
}

.mymenu-box-wrap {
  width: 100%;
  padding-left: 20px;
  border-bottom: 1px solid #f7f7f7;
}

.list-left-wrap {
  padding: 19px 0 16px;
}
.list-left-wrap li {
  float: left;
  font-size: 14px;
}
.list-left-wrap li:last-child {
  font-weight: 700;
}
.list-left-wrap li::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--disable-clr);
  border-right: 2px solid var(--disable-clr);
  float: left;
  transform: rotate(45deg);
  margin: 3px 10px;
}
.list-left-wrap li:first-child::after {
  display: none;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .service-content {
    border-color: #efefef;
  }
  html.responsive .service-content li {
    padding: 16px 3.4%;
    width: 100%;
    border-right: none;
  }
  html.responsive .service-content li .sev-title {
    font-size: 14px;
  }
  html.responsive .service-content .btn-thin {
    font-size: 12px;
  }
  html.responsive .service-content .btn-thin.sm {
    width: 60px;
    max-width: 80px;
  }
  html.responsive .mypg-wrap {
    background: var(--bg-clr2);
    padding: 0 16px;
  }
  html.responsive .mypg-picture {
    padding: 0;
    width: 107px;
  }
  html.responsive .mypg-info-title {
    display: block;
    width: 100%;
    font-size: 14px;
    margin-bottom: 20px;
  }
  html.responsive .mypg-info-title span {
    font-weight: 300 !important;
    color: var(--body-clr) !important;
  }
  html.responsive .mypg-info {
    background: var(--bg-clr2);
    float: left;
    padding: 0;
    margin-left: 28px;
    width: calc(100% - 135px);
  }
  html.responsive .mypg-info .info-list {
    display: none;
  }
  html.responsive .mypg-info .btn-sm-wh {
    float: left;
    font-size: 14px;
  }
  html.responsive .picture-name {
    display: none;
  }
  html.responsive .info-wtitle {
    display: block;
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 20px;
  }
  html.responsive .mypg-title {
    font-size: 16px;
    color: var(--main-clr);
  }
  html.responsive .mypg-txt {
    font-size: 13px;
    font-weight: 400;
    color: var(--body-clr);
  }
  html.responsive .mypgcont-title > span {
    font-size: 34px;
    font-weight: 800;
  }
  html.responsive .mypg-subtxt {
    font-weight: 400;
    font-size: 11px;
  }
  html.responsive .middle-info p {
    font-size: 15px;
  }
  html.responsive .middle-info span,
  html.responsive .middle-info .won {
    font-size: 18px;
    font-weight: 500;
  }
  html.responsive .mypg-bottom button {
    font-size: 15px;
    font-weight: 500;
    padding: 20px 0;
  }
  html.responsive .mypg-middle {
    min-height: 226px;
  }
  html.responsive .mypg-middle .middle-info li {
    padding: 18px 6%;
  }
  html.responsive .js-swiper-mypage-account-slide {
    padding: 20px 15px 20px;
  }
  html.responsive .js-swiper-mypage-account-slide .swiper-container {
    margin: 0 -12px;
  }
  html.responsive .js-swiper-mypage-account-slide .swiper-scrollbar {
    position: relative;
    z-index: 10;
    margin-top: 5px;
    height: 2px;
    background: var(--bg-clr2);
    overflow: hidden;
  }
  html.responsive .js-swiper-mypage-account-slide .swiper-scrollbar-drag {
    height: 100%;
    background: var(--neg-clr);
  }
  html.responsive .mypg-slick {
    max-width: none !important;
  }
  html.responsive .mypg-slick .mypg-slickli:before {
    left: 12px;
    right: 12px;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
  }
  html.responsive .mypg-slick .mypg-slickli:nth-child(4n+1) {
    clear: none;
  }
  html.responsive .mypg-slick .slick-track {
    padding-bottom: 40px;
  }
  html.responsive .mypg-slick .slick-dots {
    display: table;
    width: 100%;
    background: var(--bg-clr2);
  }
  html.responsive .mypg-slick .slick-dots li {
    display: table-cell;
    font-size: 0;
  }
  html.responsive .mypg-slick .slick-dots .slick-active {
    background: var(--neg-clr);
  }
  html.responsive .mypg-slickli {
    width: 230px;
    padding: 0 12px;
    box-sizing: content-box;
  }
}
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .mypg-picture {
    border: 0;
  }
  .dim-contents.paybooc-layer .popup-body02 {
    max-height: 420px;
  }
}
/*----------------------------------------*\
  || 예적금상품목록 / 대출상품목록
\*----------------------------------------*/
.wide-product-list {
  width: 100%;
  height: auto;
  margin: 30px 0;
}

.wide-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  padding: 30px 40px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  border-radius: 20px;
  transition: all 0.15s ease;
}
.wide-product-item:hover {
  border-color: var(--main-clr);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.wide-product-item + li {
  margin-top: 16px;
}
.wide-product-item .basic-btn {
  width: 160px;
  height: 47px;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
}

.wide-product-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-grow: 1;
}
.wide-product-box:hover .title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wide-product-box .box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.wide-product-box .box:first-child {
  align-items: normal;
  width: auto;
  max-width: 580px;
  margin-right: auto;
}
.wide-product-box .box:not(:first-child) {
  min-width: 160px;
  max-width: 160px;
}
.wide-product-box .box:not(:first-child) + .box {
  min-width: 165px;
  max-width: 165px;
  padding-left: 15px;
  border-left: 1px solid var(--line-clr3);
}
.wide-product-box .box:nth-child(2):has(+ .hide) {
  min-width: 330px;
  max-width: 330px;
}
.wide-product-box .list {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wide-product-box .list span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.wide-product-box .list span::before {
  width: 1px;
  height: 10px;
  content: "";
  background-color: var(--line-clr3);
}
.wide-product-box .list span:first-child::before {
  display: none;
}
.wide-product-box .title {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 600px;
  font-size: 24px;
  line-height: 26px;
  color: var(--tit-clr);
}
.wide-product-box .des {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 600px;
}
.wide-product-box .interest {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: #ff6200;
}
.wide-product-box span {
  font-size: 14px;
  line-height: 16px;
  color: #666;
}

@media (max-width: 768px) {
  .wide-product-item {
    padding: 20px;
    border-radius: 14px;
  }
  .wide-product-item .basic-btn {
    margin: 10px auto auto;
    height: 40px;
    border-radius: 10px;
  }
  .wide-product-box {
    flex-direction: column;
    width: 100%;
  }
  .wide-product-box .box:first-child {
    flex-direction: column;
  }
  .wide-product-box .box:not(:first-child) + .box {
    padding-left: 0;
    padding-top: 15px;
    border-left: none;
    border-top: 1px solid var(--line-clr3);
  }
  .wide-product-box .box:nth-child(2):has(+ .hide) {
    min-width: auto;
  }
  .wide-product-box .list span {
    font-size: 13px;
  }
  .wide-product-box .title {
    font-size: 20px;
    line-height: 24px;
    white-space: initial;
  }
  .wide-product-box .des {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-width: none;
    font-size: 13px;
    white-space: initial;
  }
}
/*----------------------------------------*\
  || 예적금상품안내 / 대출상품안내
\*----------------------------------------*/
.dep-title-wrap {
  margin-bottom: 120px;
  text-align: center;
}
.dep-title-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50vw;
  width: 150vw;
  height: 447px;
  background-color: #eef7fa;
  z-index: -1;
}
.dep-title-wrap .page-main-title {
  margin: 0 0 10px;
  font-weight: 700;
}
.dep-title-wrap .des {
  font-size: 18px;
  line-height: 21px;
  color: #666;
}
.dep-title-wrap .interest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 40px auto;
}
.dep-title-wrap .interest dt,
.dep-title-wrap .interest dd {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  color: var(--body-clr);
}
.dep-title-wrap .interest dd {
  font-weight: 700;
  color: var(--neg-clr);
}
.dep-title-wrap .date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.dep-title-wrap .date::before {
  width: 38px;
  height: 38px;
  background: url("/img/content/dep/icon_date.png") no-repeat center center;
  background-size: contain;
  content: "";
}
.dep-title-wrap .date dt,
.dep-title-wrap .date dd {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: var(--body-clr);
}
.dep-title-wrap .basic-btn {
  margin: 40px auto auto;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.dep-calc-box {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}

.info-acco-group-item.type-calc .info-acco-head .btn,
.info-acco-group-item.type-calc .info-acco-head .btn strong {
  transition: all 0.3s ease;
}
.info-acco-group-item.type-calc .info-acco-head .btn[aria-expanded=true] {
  align-items: flex-start;
  padding: 30px 30px 10px;
  background-color: var(--bg-clr2);
}
.info-acco-group-item.type-calc .info-acco-head .btn[aria-expanded=true]:hover {
  filter: none;
}
.info-acco-group-item.type-calc .info-acco-head .btn[aria-expanded=true] strong {
  font-size: 24px;
  line-height: 28px;
}
.info-acco-group-item.type-calc .left {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: 10px;
}
.info-acco-group-item.type-calc .left .des {
  margin-bottom: auto;
  font-size: 16px;
  line-height: 19px;
  color: #666;
}
.info-acco-group-item.type-calc .info-acco-box {
  padding-top: 0;
}

.calc-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.calc-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.calc-list > li > label,
.calc-list > li > .label {
  flex-grow: 1;
  min-width: fit-content;
  margin-right: 5px;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
}
.calc-list .basic-inp-wrap {
  width: 500px;
}
.calc-list .basic-inp-wrap span.basic-inp {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 120px;
  height: 30px;
  line-height: 1;
}
.calc-list .basic-full-radio-list {
  min-width: 250px;
}
.calc-list .basic-full-radio-list + .basic-inp-wrap {
  width: 240px;
}
.calc-list .basic-btn-wrap {
  margin: 0 0 0 auto;
  max-width: 500px;
}
.calc-list .basic-btn {
  width: 500px;
  height: 44px;
  margin-left: auto;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
}

.info-acco-group-item.type-kdic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 30px;
}
.info-acco-group-item.type-kdic img {
  width: 120px;
}
.info-acco-group-item.type-kdic p {
  font-size: 14px;
  line-height: 28px;
  word-break: auto-phrase;
}

.info-acco-box {
  display: none;
  padding: 30px 30px 40px;
}
.info-acco-box .info-table-area:first-child {
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .dep-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    height: 300px;
    margin-bottom: 85px;
  }
  .dep-title-wrap::after {
    height: 375px;
  }
  .dep-title-wrap .page-main-title {
    font-size: 24px;
    line-height: 30px;
  }
  .dep-title-wrap .des {
    margin-bottom: auto;
    font-size: 14px;
    line-height: 18px;
  }
  .dep-title-wrap .interest {
    margin: 25px auto;
    font-size: 24px;
    line-height: 30px;
  }
  .dep-title-wrap .interest dt,
  .dep-title-wrap .interest dd {
    font-size: 24px;
  }
  .dep-title-wrap .date::before {
    width: 28px;
    height: 28px;
  }
  .dep-title-wrap .date dt,
  .dep-title-wrap .date dd {
    font-size: 16px;
    line-height: 19px;
  }
  .dep-title-wrap .basic-btn {
    max-width: 230px;
    margin: 40px auto 0;
  }
  .dep-calc-box {
    gap: 40px;
    flex-direction: column;
  }
  .info-acco-group-item.type-calc .info-acco-head .btn[aria-expanded=true] {
    padding: 15px;
  }
  .info-acco-group-item.type-calc .info-acco-head .btn[aria-expanded=true] strong {
    font-size: 20px;
    line-height: 26px;
  }
  .info-acco-group-item.type-calc .left {
    width: 100%;
  }
  .info-acco-group-item.type-calc .left .des {
    margin-bottom: 15px;
  }
  .calc-list > li {
    gap: 0;
    align-items: normal;
    flex-direction: column;
  }
  .calc-list > li > label,
  .calc-list > li > .label {
    font-size: 14px;
  }
  .calc-list .basic-inp-wrap {
    width: 100%;
  }
  .calc-list .basic-full-radio-list {
    min-width: auto;
    margin-top: 10px;
  }
  .calc-list .basic-full-radio-list + .basic-inp-wrap {
    width: 100%;
  }
  .calc-list .basic-btn {
    width: 100%;
  }
  .info-acco-box {
    padding: 15px;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.no-item {
  min-height: 178px;
  text-align: center;
  font-weight: 500;
  font-size: 22px;
  line-height: 117px;
}

/* 모아저축은행 SB톡톡 플러스 정기예금 단리 중도해지이율  (*기준 : 연이율, 세전) 19.09.17 김재원 */
.sub-infotxt-type01 {
  clear: both;
  float: right;
  text-align: right;
  font-size: 14px !important;
}

/*----------------------------------------*\
  || 예적금 목록
\*----------------------------------------*/
.product-list {
  overflow: hidden;
  width: 100%;
  border-top: 1px solid var(--body-clr);
}
.product-list > li {
  overflow: hidden;
  width: 100%;
  padding: 30px 3.7% 35px;
  position: relative;
  border-bottom: 1px solid #efefef;
}
.product-list > li .product-list-l {
  float: left;
  width: 47%;
  height: 100%;
}
.product-list > li .product-list-tit {
  font-size: 24px;
  float: left;
  width: 380px;
  padding-top: 49px;
  font-weight: 500;
  letter-spacing: -0.05em;
}
.product-list > li .product-list-exp {
  width: 100%;
  float: left;
  line-height: 1.5;
  font-size: 16px;
  padding-top: 15px;
}
.product-list > li .product-list-classi {
  position: absolute;
  top: 30px;
  left: 40px;
  font-size: 11px;
}
.product-list > li .product-list-irate {
  width: 38.2%;
  display: table;
  text-align: center;
  float: left;
  margin-top: 21px;
}
.product-list > li .product-list-irate > li {
  display: table-cell;
  width: 50%;
  border-left: 1px solid #efefef;
  margin-left: 40px;
  height: 90px;
  text-align: center;
  font-size: 14px;
  letter-spacing: -0.07em;
}
.product-list > li .product-list-irate > li:first-child {
  width: 125px;
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}
.product-list > li .product-list-irate > li em {
  display: block;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  padding: 10px 0;
}
.product-list > li .product-list-irate > li em i {
  display: inline;
  width: auto;
  color: var(--neg-clr);
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
}
.product-list > li .product-list-btn {
  float: left;
  width: 14.8%;
  margin-top: 17px;
}
.product-list > li .product-list-btn button {
  margin-bottom: 10px;
}

.product-list-btn.margin .btn-small {
  margin-bottom: 10px;
}

.product-list-classi > span:not([class^=ico]) {
  display: inline-block;
  vertical-align: middle;
}

.product-view {
  width: 100%;
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid var(--disable-clr);
  padding-top: 20px;
}
.product-view.type01 {
  padding-top: 30px;
}
.product-view .product-list-l {
  position: relative;
  padding: 0 40px;
}
.product-view .ico-internet,
.product-view .ico-smartphone,
.product-view .ico-shop {
  display: inline-block;
}
.product-view .product-view-tit {
  font-size: 24px;
  display: inline-block;
  width: 100%;
  padding-top: 25px;
  font-weight: 500;
  letter-spacing: -0.05em;
}
.product-view .product-view-exp {
  width: 100%;
  line-height: 1.5;
  font-size: 16px;
  display: inline-block;
  padding-top: 15px;
}
.product-view .product-view-sns {
  float: right;
}
.product-view .product-view-sns a {
  float: left;
  margin-right: 5px;
}
.product-view .product-view-sns a:last-child {
  margin-right: 0;
}

.product-view-dl {
  overflow: hidden;
  width: 100%;
  margin-top: 35px;
  padding: 19px 40px 0;
  border-top: 1px solid #efefef;
}
.product-view-dl + .product-view-dl {
  margin-top: 0;
}
.product-view-dl > li {
  display: table;
  width: 100%;
  padding-top: 15px;
}
.product-view-dl > li:first-child {
  padding-top: 0px;
}
.product-view-dl .notice {
  padding-left: 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}
.product-view-dl .notice::before {
  content: "";
  float: left;
  margin-left: -15px;
  margin-top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--cap-clr);
}
.product-view-dl .product-view-dt {
  font-weight: 500;
  display: table-cell;
  width: 165px;
  padding-left: 15px;
  padding-right: 20px;
  vertical-align: top;
  font-size: 14px;
  line-height: 32px;
  word-break: keep-all;
}
.product-view-dl .product-view-dt:before {
  content: "";
  float: left;
  margin-left: -15px;
  margin-top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--cap-clr);
}
.product-view-dl .product-view-dt.type02 {
  width: 100%;
}
.product-view-dl .product-view-dt span {
  display: block;
  font-weight: 500;
}
.product-view-dl .product-view-dd {
  display: inline-block;
  width: calc(100% - 170px);
  width: -webkit-calc(100% - 170px);
}
.product-view-dl .product-view-dd .table-wrap01 {
  margin-top: 10px;
}
.product-view-dl .product-view-dd .table-wrap01 + .notice-list-wrap {
  margin-top: 15px;
}
.product-view-dl .product-view-dd .notice-list-wrap {
  margin-top: 5px;
  padding-top: 0;
}
.product-view-dl .product-view-dd .notice-list-wrap + .notice-list-wrap {
  margin-top: 10px;
}
.product-view-dl .product-view-dd .table-type04 th {
  width: 145px;
}
.product-view-dl .product-view-dd .table-type04 td {
  width: auto;
  border-right: 1px solid #efefef;
}
.product-view-dl .product-view-dd .table-type04 td:last-child {
  border-right: 0;
}
.product-view-dl .product-view-dd .img-wrap {
  margin-top: 10px;
}
.product-view-dl .product-view-dd .img-wrap img {
  width: 100%;
}
.product-view-dl .product-view-dt,
.product-view-dl .product-view-dd {
  font-size: 14px;
  line-height: 1.6;
}
.product-view-dl .list {
  overflow: hidden;
  padding-top: 20px;
}

.product-view-dd .btn-thin.resize {
  display: inline-block;
  padding: 4px 8px 3px;
  vertical-align: 1px;
  line-height: 20px;
}

.ico-wrap {
  font-size: 11px;
}

.ico-internet,
.ico-smartphone,
.ico-notice,
.ico-event,
.ico-etc,
.ico-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-right: 4px;
  padding: 0 8px;
  background-color: #017a51;
  border: 0;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 500;
  color: var(--bg-clr2);
  vertical-align: middle;
}
.ico-internet.w46,
.ico-smartphone.w46,
.ico-notice.w46,
.ico-event.w46,
.ico-etc.w46,
.ico-shop.w46 {
  width: 46px;
}

.ico-notice,
.ico-internet {
  background-color: var(--neg-clr);
}

.ico-smartphone {
  background-color: var(--main-clr);
}

.ico-event {
  background-color: var(--pos-clr);
}

.ico-etc {
  background-color: var(--cap-clr);
}

.txt-total {
  font-size: 14px;
}
.txt-total.loan {
  display: inline-block;
  margin-bottom: 15px;
}
.txt-total.loan::after {
  content: "";
  display: block;
  float: none;
  clear: both;
}
.txt-total.loan .item {
  float: left;
  font-weight: 500;
  margin-right: 10px;
}

/*----------------------------------------*\
  || 상품테이블
\*----------------------------------------*/
.product-title {
  font-size: 24px;
  font-weight: 500;
  padding-top: 30px;
  padding-bottom: 15px;
}

.product-txt {
  font-size: 16px;
  line-height: 1.3;
}

.loan-p-wrap {
  padding: 14px 0;
  background: #f7f7f7;
}
.loan-p-wrap.one {
  padding: 40px 0px;
}
.loan-p-wrap.type01 {
  padding: 17px 0 20px;
}
.loan-p-wrap.type01 .loan-p-txt + .loan-p-point {
  display: inline-block;
  margin-top: 8px;
}
.loan-p-wrap .loan-p-txt {
  font-size: 16px;
  word-break: keep-all;
  display: block;
  line-height: 1.2;
  margin-bottom: 10px;
}
.loan-p-wrap .loan-p-txt:last-child {
  margin-bottom: 0;
}
.loan-p-wrap .loan-p-txt.pc-none {
  display: none;
}
.loan-p-wrap .loan-p-point {
  font-size: 30px;
  color: var(--neg-clr);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
}

.loan-p-info {
  font-size: 12px;
  line-height: 1.3;
  padding-top: 10px;
  display: inline-block;
}

/*----------------------------------------*\
  || 교직원 회원여부 조회
\*----------------------------------------*/
.inquiry-wrap {
  padding-top: 40px;
}
.inquiry-wrap .notice-list li strong {
  font-weight: 500;
}
.inquiry-wrap .chk-wrap {
  margin-top: 20px;
  display: block;
  text-align: right;
}
.inquiry-wrap .inquiry-input {
  margin-top: 10px;
  text-align: right;
  font-size: 14px;
}
.inquiry-wrap .title {
  display: inline-block;
}
.inquiry-wrap .input-basic {
  max-width: 128px !important;
}

/*----------------------------------------*\
  || 보호금융상품 KDIC
\*----------------------------------------*/
.pv-kdic {
  display: table;
  width: 100%;
  margin-top: 25px;
  padding: 30px 150px 30px 40px;
  background: #f7f7f7;
  border-top: 1px solid #efefef;
  font-size: 14px;
  letter-spacing: -0.05em;
  word-break: keep-all;
  overflow: hidden;
}
.pv-kdic.type02 {
  margin-top: 27px;
}
.pv-kdic + .common-text01 {
  margin-top: 45px;
}
.pv-kdic .pv-kdic-logo {
  display: table-cell;
  padding-right: 40px;
  vertical-align: middle;
}
.pv-kdic .pv-kdic-txt {
  display: table-cell;
  width: calc(100% - 180px);
  margin-top: 10px;
  line-height: 24px;
  vertical-align: middle;
}

/*----------------------------------------*\
  || 상품설명 Style 추가
\*----------------------------------------*/
.list-wrap01 {
  width: 100%;
  margin-top: 20px;
  border-top: 1px solid var(--body-clr);
}

.list-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 20%;
  border-bottom: 1px solid var(--disable-clr);
}
.list-item-tit {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0px;
  width: 100%;
  max-width: 20%;
  background: #f7f7f7;
  border-right: 1px solid var(--disable-clr);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.list-item-txt {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 16px 18px;
  font-size: 16px;
}
.list-item-box {
  width: 100%;
  height: 100%;
  padding: 18px;
  border-bottom: 1px solid var(--disable-clr);
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .no-item {
    padding-bottom: 16px !important;
    font-size: 19px;
    line-height: 138px;
  }
  html.responsive .full-content {
    margin: 0 -18px !important;
  }
  html.responsive .full-content .btn-area {
    padding: 0 18px !important;
  }
  html.responsive .product-list > li {
    padding: 20px 16px 35px;
  }
  html.responsive .product-list > li .product-list-tit {
    font-size: 16px;
  }
  html.responsive .product-list > li .product-list-l {
    width: 100%;
  }
  html.responsive .product-list > li .product-list-classi {
    left: 16px;
    top: 26px;
    font-size: 11px;
  }
  html.responsive .product-list > li .product-list-exp {
    width: 100%;
    font-size: 13px;
    color: #666;
  }
  html.responsive .product-list > li .product-list-btn {
    position: relative;
    right: 0;
    top: 10px;
    width: 100%;
    display: inline-block;
    margin-top: 25px;
  }
  html.responsive .product-list > li .product-list-btn button {
    width: 100%;
  }
  html.responsive .product-list .product-list-irate {
    position: relative;
    left: 0px;
    top: 10px;
    width: 100%;
    margin-top: 0;
    background: #efefef;
  }
  html.responsive .product-list .product-list-irate > li {
    height: auto;
    width: 50%;
    padding: 25px 0;
    margin: 0;
    font-size: 11px;
    border-left: 1px solid var(--disable-clr) !important;
  }
  html.responsive .product-list .product-list-irate > li:first-child {
    border: 0 !important;
  }
  html.responsive .product-list .product-list-irate > li .m-bold {
    font-size: 13px;
    font-weight: 500;
  }
  html.responsive .product-list .product-list-irate > li em {
    font-size: 18px;
  }
  html.responsive .product-list .product-list-irate > li em i {
    font-size: 24px;
    vertical-align: middle;
  }
  html.responsive .product-view {
    padding: 20px;
  }
  html.responsive .product-view.mt50 {
    margin-top: 15px !important;
  }
  html.responsive .product-view .product-view-tit {
    padding-top: 0;
    font-size: 20px;
  }
  html.responsive .product-view .product-list-l {
    padding: 0 5px;
  }
  html.responsive .product-view .product-view-dl {
    padding: 20px 5px;
    margin-top: 20px;
  }
  html.responsive .product-view .product-view-exp {
    font-size: 14px;
  }
  html.responsive .product-view-dl li {
    overflow: hidden;
  }
  html.responsive .product-view-dl .product-view-dt {
    display: block;
    width: 100%;
    padding-left: 10px;
    line-height: 20px;
  }
  html.responsive .product-view-dl .product-view-dt::before {
    margin-top: 8px;
    margin-left: -10px;
  }
  html.responsive .product-view-dl .product-view-dt span {
    display: inline;
  }
  html.responsive .product-view-dl .product-view-dd {
    width: 100%;
  }
  html.responsive .product-view-dl .product-view-dd .table-type03-w {
    display: table;
  }
  html.responsive .product-view-dl .product-view-dd .img-wrap img {
    max-width: 100%;
  }
  html.responsive .product-view-dl .product-view-dd .notice-list-wrap {
    padding: 0;
  }
  html.responsive .product-view-dt {
    float: left;
    width: 33%;
  }
  html.responsive .product-view-dd {
    float: left;
    width: 67%;
    line-height: 1.2;
  }
  html.responsive .txt-total {
    display: inline-block;
    padding: 20px 0 0 16px;
    font-size: 11px;
    color: #666;
  }
  html.responsive .pv-kdic {
    padding: 16px;
  }
  html.responsive .pv-kdic .pv-kdic-logo {
    display: inline-block;
    margin-top: 7px;
    margin-right: 20px;
    padding-right: 0;
    min-width: 100px;
  }
  html.responsive .pv-kdic .pv-kdic-logo img {
    max-width: 100%;
  }
  html.responsive .product-title {
    font-size: 16px;
    padding-top: 25px;
    padding-bottom: 10px;
  }
  html.responsive .product-txt {
    font-size: 13px;
  }
  html.responsive .loan-p-wrap {
    text-align: center;
    padding: 30px 0 0px;
  }
  html.responsive .loan-p-wrap .loan-p-txt {
    font-size: 16px;
    font-weight: 700;
  }
  html.responsive .loan-p-wrap .loan-p-txt.pc-none {
    display: block;
  }
  html.responsive .loan-p-wrap .loan-p-point {
    font-size: 24px;
  }
  html.responsive .loan-p-info {
    width: 100%;
    background: #f7f7f7;
    text-align: center;
    font-size: 11px;
    padding-bottom: 20px;
  }
  html.responsive .ico-wrap {
    font-size: 11px;
  }
  html.responsive .ico-internet,
  html.responsive .ico-smartphone,
  html.responsive .ico-notice,
  html.responsive .ico-event,
  html.responsive .ico-etc,
  html.responsive .ico-shop {
    padding: 3px 11px 1px;
  }
  .list-item-tit,
  .list-item-txt {
    font-size: 14px;
  }
}
/*================================================*/
/*==================== TYPE A ====================*/
/*================================================*/
/*----------------------------------------*\
  || Swiper
\*----------------------------------------*/
.swiper.one .swiper-slide {
  opacity: 1 !important;
}

/*----------------------------------------*\
  || Main Banner
\*----------------------------------------*/
.main-banner-wrap {
  width: 100%;
  height: 447px;
  position: relative;
}
.main-banner-wrap .main-banner-list {
  position: absolute;
  inset: 0;
}

.main-banner-item {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.main-banner-item.swiper-slide-active {
  opacity: 1;
}
.main-banner-item .wrap {
  width: 100%;
  height: 100%;
  outline-offset: -1px;
}
.main-banner-item .wrap:hover, .main-banner-item .wrap:focus {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}
.main-banner-item .inner {
  width: 1200px;
  height: 100%;
  position: relative;
  margin: auto;
  padding-top: 80px;
}
.main-banner-item span {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  animation-name: slide-20px;
  animation-duration: 0.6s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  max-width: 400px;
  color: var(--tit-clr);
  word-break: auto-phrase;
  letter-spacing: -0.05em;
  opacity: 0;
  transform: translateX(-20px);
}
@keyframes slide-20px {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.main-banner-item .des {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 32px;
}
.main-banner-item .title {
  font-size: 46px;
  font-weight: 700;
  line-height: 56px;
  animation-delay: 0.2s;
  -webkit-line-clamp: 3;
}
.main-banner-item img {
  animation-name: slide20px;
  animation-duration: 0.6s;
  animation-timing-function: ease;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  position: absolute;
  right: 335px;
  bottom: 0;
  width: 447px;
  height: 447px;
  opacity: 0;
  transform: translateX(20px);
}
@keyframes slide20px {
  0% {
    transform: translateX("20px");
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.main-banner-item img[src*=zmainbnr] {
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}

.swiper-controller {
  display: flex;
  align-items: center;
  gap: 8px;
}
.main-banner-wrap.one .swiper-controller {
  display: none;
}

.swiper-controller .swiper-button-prev,
.swiper-controller .swiper-button-next {
  width: 24px;
  height: 24px;
  background: url("/img/content/main/icon_prev.png") no-repeat center center;
  background-size: contain;
}
.swiper-controller .swiper-button-next {
  transform: rotate(180deg);
}
.swiper-controller .swiper-pagination-bullets {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}
.swiper-controller .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: #8b95a1;
  border-radius: 50%;
  transition: all 0.3s ease;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.swiper-controller .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  background-color: var(--main-clr);
  border-radius: 5px;
}
.swiper-controller .swiper-button-play,
.swiper-controller .swiper-button-pause {
  width: 24px;
  height: 24px;
  background: url("/img/content/main/icon_play.png") no-repeat center center;
  background-size: contain;
  display: block;
}
.swiper-controller .swiper-button-play[aria-pressed],
.swiper-controller .swiper-button-pause[aria-pressed] {
  display: none;
}
.swiper-controller .swiper-button-pause {
  background-image: url("/img/content/main/icon_pause.png");
}

.main-banner-inner-zone {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 1200px;
  height: 100%;
  position: relative;
  margin: 0 auto;
  padding: 30px 0;
}
.main-banner-inner-zone .swiper-controller {
  position: absolute;
  left: 5px;
  bottom: 60px;
  z-index: 1;
}
.main-banner-inner-zone .swiper-controller .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-color: var(--body-clr);
}
.main-banner-inner-zone .main-menu-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 285px;
  height: 100%;
  position: relative;
  padding: 14px 16px;
  background-color: var(--bg-clr2);
  border-radius: 30px;
  text-align: center;
  z-index: 1;
}

.main-menu-item {
  width: 50%;
  height: 33.3333333333%;
}
.main-menu-item a {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center 20px;
  background-size: 48px;
  margin: auto;
  padding-top: 80px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  color: var(--body-clr);
  letter-spacing: -0.05em;
  box-sizing: border-box;
}
.main-menu-item a:hover, .main-menu-item a:focus {
  background-color: #f5f7f8;
  animation: mainMenuBounce2 1.2s ease infinite;
}

@keyframes mainMenuBounce2 {
  0%, 20%, 80%, 100% {
    padding-top: 80px;
    background-position: center 20px;
  }
  30% {
    padding-top: 88px;
    background-position: center 12px;
  }
  50% {
    padding-top: 77px;
    background-position: center 23px;
  }
  60% {
    padding-top: 82px;
    background-position: center 18px;
  }
}
/*----------------------------------------*\
  || Priduct List
\*----------------------------------------*/
.main-product-wrap {
  display: flex;
  align-items: normal;
  justify-content: space-between;
  width: 1200px;
  height: 288px;
  position: relative;
  margin: 60px auto;
  padding: 40px 40px 40px 60px;
  background-color: #f4f7fc;
  border-radius: 30px;
}
.main-product-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 270px;
  background: linear-gradient(90deg, #f4f7fc, rgba(244, 247, 252, 0.7490196078) 50%, transparent);
  z-index: 2;
}
.main-product-wrap.less .main-title::after, .main-product-wrap.less:has(li:only-child) .main-title::after {
  width: 51px;
  height: 68px;
  content: "";
  position: absolute;
  left: 0;
  bottom: -90px;
  background: url("/img/content/main/img_product_point.png");
}
.main-product-wrap.less .swiper-controller, .main-product-wrap.less:has(li:only-child) .swiper-controller {
  display: none;
}
.main-product-wrap:has(.main-product-item:nth-child(3))::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 270px;
  background: linear-gradient(-90deg, #f4f7fc, rgba(244, 247, 252, 0.7490196078) 50%, transparent);
  z-index: 2;
}
.main-product-wrap:has(.main-product-item:nth-child(3)) .main-product-item.swiper-slide-active,
.main-product-wrap:has(.main-product-item:nth-child(3)) .main-product-item.swiper-slide-next {
  max-width: 520px;
}
.main-product-wrap .main-title {
  width: fit-content;
  height: fit-content;
  position: relative;
  margin-top: 20px;
  line-height: 1.7;
  z-index: 2;
  color: var(--tit-clr);
}
.main-product-wrap .swiper-controller {
  gap: 12px;
  position: absolute;
  left: 60px;
  bottom: 60px;
  z-index: 2;
}
.main-product-wrap .swiper-controller button {
  width: 40px;
  height: 40px;
  background-image: url("/img/content/main/icon_prev_l.png");
}
.main-product-wrap .swiper-controller .swiper-current {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 35px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  color: #64727f;
}
.main-product-wrap .swiper-controller .swiper-current span {
  min-width: 10px;
  line-height: inherit;
}

.main-product-list {
  width: 880px;
  height: auto;
}

.main-product-item {
  width: auto;
  height: auto;
  max-width: 540px;
  opacity: 0;
  transition: all 0.4s ease;
}
.main-product-item:only-child .main-product {
  width: 540px;
}
.main-product-item.swiper-slide-active, .main-product-item.swiper-slide-next {
  max-width: 430px;
  opacity: 1;
}

.main-product {
  display: flex;
  align-items: normal;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 208px;
  background: url("/img/content/main/img_product01.png") no-repeat right 30px bottom 30px;
  background-size: 120px;
  position: relative;
  padding: 30px;
  background-color: var(--bg-clr2);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}
.main-product.type01 {
  background-image: url("/img/content/main/img_product01.png");
}
.main-product.type02 {
  background-image: url("/img/content/main/img_product02.png");
}
.main-product.type03 {
  background-image: url("/img/content/main/img_product03.png");
}
.main-product.type04 {
  background-image: url("/img/content/main/img_product04.png");
}
.main-product.type05 {
  background-image: url("/img/content/main/img_product05.png");
}
.main-product.type06 {
  background-image: url("/img/content/main/img_product06.png");
}
.main-product:hover, .main-product:focus-within {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.12);
}
.main-product .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 17px;
  right: 17px;
  padding: 7px 11px;
  background-color: #ef4b56;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: var(--bg-clr2);
}
.main-product .tag.blue {
  background-color: #2e99f8;
}
.main-product .title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 320px;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--body-clr);
  word-break: auto-phrase;
}
.main-product .box .top {
  font-size: 14px;
  line-height: 16px;
  color: #64727f;
}
.main-product .box .bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: #ef4b56;
}
.main-product .box .bottom strong {
  font-size: 24px;
  line-height: inherit;
  color: inherit;
}

/*----------------------------------------*\
  || Band Banner
\*----------------------------------------*/
.main-point-banner-wrap {
  width: 1200px;
  margin: 90px auto 60px;
}
.main-point-banner-wrap .main-point-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  position: relative;
  min-height: 80px;
  padding: 25px 25% 30px;
  background-color: #edfbe3;
  border-radius: 20px;
  transition: all 0.2s ease;
}
.main-point-banner-wrap .main-point-banner::before {
  width: 0;
  height: 100%;
  content: "";
  position: absolute;
  left: 0;
  display: block;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 0;
}
.main-point-banner-wrap .main-point-banner:hover, .main-point-banner-wrap .main-point-banner:focus-within {
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.1);
  transform: scale(1.01);
}
.main-point-banner-wrap .main-point-banner .txt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  color: #3f8576;
}
.main-point-banner-wrap .main-point-banner strong {
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  color: inherit;
  word-break: auto-phrase;
}
.main-point-banner-wrap .main-point-banner span {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: inherit;
  word-break: auto-phrase;
}
.main-point-banner-wrap .main-point-banner img {
  width: 133px;
  height: auto;
  position: absolute;
  right: 11%;
  bottom: 0;
  display: block;
}

/*----------------------------------------*\
  || Service List
\*----------------------------------------*/
.main-service-wrap {
  width: 1200px;
  margin: 60px auto;
}
.main-service-wrap .main-service-list {
  display: flex;
  align-items: normal;
  gap: 20px;
  margin-top: 40px;
}

.main-service-item {
  position: relative;
  flex: 1;
  max-width: 590px;
}

.main-service {
  height: 118px;
  padding: 30px;
  border-radius: 30px;
  background-color: #f4f7fc;
  transition: all 0.2s ease;
}
.main-service .sub {
  display: block;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  text-align: center;
  color: #475668;
}
.main-service .title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--body-clr);
}
.main-service .title::after {
  width: 8px;
  height: 20px;
  background: url("/img/content/main/icon_right.png") no-repeat center center;
  background-size: contain;
  content: "";
  display: block;
}
.main-service:hover, .main-service:focus-within {
  box-shadow: 0 3px 5px rgb(229, 232, 237);
  transform: translateY(-5px);
}

/*----------------------------------------*\
  || Notice Wrap
\*----------------------------------------*/
.main-notice-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 1200px;
  margin: 60px auto;
}
.main-notice-wrap .main-notice-left,
.main-notice-wrap .main-notice-right {
  width: 50%;
  height: 264px;
  position: relative;
  border: 1px solid var(--line-clr3);
  border-radius: 30px;
}
.main-notice-wrap .main-notice-left {
  display: flex;
  align-items: normal;
  flex-direction: column;
  gap: 45px;
  padding: 40px;
}
.main-notice-wrap .main-notice-left .main-title {
  color: var(--body-clr);
}
.main-notice-wrap .main-notice-list {
  display: flex;
  align-items: normal;
  justify-content: space-between;
  flex-direction: column;
  flex: 1;
}
.main-notice-wrap .main-notice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1;
}
.main-notice-wrap .main-notice-item a {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 100px);
  font-size: 16px;
  font-weight: 500;
  color: var(--body-clr);
}
.main-notice-wrap .main-notice-item a:hover, .main-notice-wrap .main-notice-item a:focus {
  color: var(--tit-clr);
}
.main-notice-wrap .main-notice-item .time {
  font-size: 16px;
  font-weight: 400;
  color: #64727f;
}
.main-notice-wrap .main-notice-link {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: 45px;
  right: 40px;
}
.main-notice-wrap .main-notice-link span {
  font-size: 16px;
  font-weight: 700;
  color: #191f28;
}
.main-notice-wrap .main-notice-link::after {
  width: 20px;
  height: 20px;
  background: url("/img/content/main/icon_more01.png") no-repeat center center;
  background-size: contain;
  content: "";
  display: block;
  transition: all 0.3s ease;
}
.main-notice-wrap .main-notice-link:hover::after, .main-notice-wrap .main-notice-link:focus::after {
  animation: noticeLink 1s cubic-bezier(0, 0.32, 0.37, 1.66) infinite;
}

@keyframes noticeLink {
  30% {
    transform: rotate(45deg);
  }
  60% {
    transform: rotate(0deg);
  }
}
/*----------------------------------------*\
  || Sub Banner
\*----------------------------------------*/
.main-notice-right {
  position: relative;
}
.main-notice-right .swiper-controller {
  position: absolute;
  top: initial;
  left: 40px;
  bottom: 40px;
  transform: none;
  z-index: 1;
}

.main-sub-banner-list {
  position: relative;
  height: 100%;
}
.main-sub-banner-list .main-sub-banner-item {
  position: relative;
  height: 264px;
}
.main-sub-banner-list .main-sub-banner-item .inner {
  width: 100%;
  height: 100%;
  padding: 50px 35px;
  border-radius: 30px;
  outline-offset: -3px;
}
.main-sub-banner-list .main-sub-banner-item span {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  position: relative;
  max-width: 300px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  z-index: 1;
}
.main-sub-banner-list .main-sub-banner-item .title {
  font-size: 27px;
  font-weight: 700;
  color: var(--body-clr);
}
.main-sub-banner-list .main-sub-banner-item .text {
  margin-top: 12px;
  font-size: 16px;
  color: var(--cap-clr);
}
.main-sub-banner-list .main-sub-banner-item img {
  width: 170px;
  height: 170px;
  position: absolute;
  right: 65px;
  bottom: 55px;
}

/*----------------------------------------*\
  || Customer Center
\*----------------------------------------*/
.main-customer-wrap {
  position: relative;
  bottom: -1px;
  margin-top: 60px;
  padding: 20px 0;
  background-color: #f5f7f8;
  z-index: 1;
}

.main-customer-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
  margin: auto;
}
.main-customer-list .main-customer-item {
  flex: 1;
  padding-left: 33px;
  border-left: 1px solid #e5e8e9;
}
.main-customer-list .main-customer-item:first-child {
  padding-left: 0;
  border-left: none;
}
.main-customer-list .main-customer-item .title {
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  color: #64727f;
}
.main-customer-list .main-customer-item .num {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--body-clr);
}

/*================================================*/
/*==================== TYPE B ====================*/
/*================================================*/
/*----------------------------------------*\
  || Main Banner
\*----------------------------------------*/
.type-B {
  /*----------------------------------------*\
    || Main Menu
  \*----------------------------------------*/
  /*----------------------------------------*\
    || Main Contents
  \*----------------------------------------*/
  /*----------------------------------------*\
    || Sub Banner
  \*----------------------------------------*/
  /*----------------------------------------*\
    || Customer Center
  \*----------------------------------------*/
  /*----------------------------------------*\
    || Sub Menu
  \*----------------------------------------*/
  /*----------------------------------------*\
    || Sub Menu
  \*----------------------------------------*/
}
.type-B .swiper-controller {
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  transform: none;
}
.two .swiper-controller {
  display: none;
}

.type-B .swiper-controller .swiper-button-play,
.type-B .swiper-controller .swiper-button-pause {
  width: 18px;
  height: 18px;
  background-image: url("/img/content/main/icon_play_B.png");
}
.type-B .swiper-controller .swiper-button-pause {
  background-image: url("/img/content/main/icon_pause_B.png");
}
.type-B .swiper-controller .swiper-button-prev,
.type-B .swiper-controller .swiper-button-next {
  width: 18px;
  height: 18px;
}
.type-B .swiper-controller .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--main-clr);
}
.type-B .main-banner-wrap {
  width: auto;
  height: 498px;
  padding: 40px 0;
}
.type-B .main-banner-wrap:has(.one), .type-B .main-banner-wrap:has(.two) {
  height: 460px;
}
.type-B .main-banner-wrap .swiper-btn-wrap button {
  width: 75px;
  height: 102px;
  background: url("/img/content/main/icon_prev_B.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 130px;
  left: -20px;
  z-index: 1;
  filter: invert(0.6);
}
.type-B .main-banner-wrap .swiper-btn-wrap button.swiper-button-next {
  left: initial;
  right: -20px;
  background-image: url("/img/content/main/icon_next_B.png");
}
.type-B .main-banner-box {
  width: 1280px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: auto;
  animation: scaleUp 0.4s ease forwards;
  overflow: visible;
}
.type-B .main-banner-box.two .main-banner-item {
  width: 630px !important;
  min-width: initial;
  max-width: initial;
  height: initial !important;
  min-height: initial;
  max-height: initial;
  opacity: 0;
}
.type-B .main-banner-box.two .main-banner-item.swiper-slide span {
  width: 310px;
}
.type-B .main-banner-box.two .main-banner-item.swiper-slide-visible {
  opacity: 1;
}
.type-B .main-banner-box.two .main-banner-item .inner {
  padding: 50px 60px;
}
.type-B .main-banner-box.two .main-banner-item .inner::after {
  width: 246px;
  height: 246px;
  top: initial;
  bottom: 0;
  opacity: 1;
}
@media (min-width: 1200px) {
  .type-B .main-banner-box:not(.two) .less .swiper-slide {
    position: absolute;
    left: 0;
    margin: 0 !important;
    transform: translateZ(0) translateY(-50%) !important;
    opacity: 1 !important;
    transition: none;
  }
  .type-B .main-banner-box:not(.two) .less .swiper-slide:not(.swiper-slide-active) {
    width: 220px !important;
    min-width: 220px;
    max-width: 220px;
    height: 280px !important;
    min-height: 280px;
    max-height: 280px;
  }
  .type-B .main-banner-box:not(.two) .less .swiper-slide-active {
    left: 240px;
    z-index: 2;
  }
  .type-B .main-banner-box:not(.two) .less .swiper-slide-prev {
    left: 0;
  }
  .type-B .main-banner-box:not(.two) .less .swiper-slide-next {
    left: 1060px;
    z-index: 1;
  }
}
.type-B .main-banner-list {
  position: static;
  height: 380px;
}
.type-B .main-banner-item {
  width: 220px;
  height: 280px;
  position: relative;
  top: 190px;
  opacity: 0;
  transform: translateZ(0) translateY(-50%);
  transition: opacity 0.4s ease, height 0.4s ease, min-height 0.4s ease, max-height 0.4s ease;
}
.type-B .main-banner-item.type01 .inner {
  background-color: #fee8e9;
}
.type-B .main-banner-item.type01 .inner::after {
  background-image: url("/img/content/main/img_main_banner_B01.png");
}
.type-B .main-banner-item.type02 .inner {
  background-color: #d2e9f6;
}
.type-B .main-banner-item.type02 .inner::after {
  background-image: url("/img/content/main/img_main_banner_B06.png");
}
.type-B .main-banner-item.type03 .inner {
  background-color: #fff4cd;
}
.type-B .main-banner-item.type03 .inner::after {
  background-image: url("/img/content/main/img_main_banner_B02.png");
}
.type-B .main-banner-item.type04 .inner {
  background-color: #d4f5df;
}
.type-B .main-banner-item.type04 .inner::after {
  background-image: url("/img/content/main/img_main_banner_B03.png");
}
.type-B .main-banner-item.type05 .inner {
  background-color: #ffe7cd;
}
.type-B .main-banner-item.type05 .inner::after {
  background-image: url("/img/content/main/img_main_banner_B05.png");
}
.type-B .main-banner-item.type06 .inner {
  background-color: #efe1ff;
}
.type-B .main-banner-item.type06 .inner::after {
  background-image: url("/img/content/main/img_main_banner_B04.png");
}
.type-B .main-banner-item .inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background-color: #fee8e9;
  border-radius: 20px;
  transition: opacity 0.4s ease, height 0.4s ease, min-height 0.4s ease, max-height 0.4s ease;
  overflow: hidden;
}
.type-B .main-banner-item .inner::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 400px;
  height: 360px;
  background: no-repeat bottom right/contain;
  opacity: 0;
}
.type-B .main-banner-item .inner .tag {
  align-self: flex-start;
  max-width: fit-content;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 4px 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--tit-clr);
}
.type-B .main-banner-item .inner span {
  width: 160px;
}
.type-B .main-banner-item .inner .title {
  margin-bottom: 9px;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  word-break: auto-phrase;
  color: var(--tit-clr);
}
.type-B .main-banner-item .inner .des,
.type-B .main-banner-item .inner .top {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #666;
  z-index: 1;
}
.type-B .main-banner-item .inner .interest-box {
  display: block;
  margin-top: auto;
}
.type-B .main-banner-item .inner .interest-box .bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--tit-clr);
}
.type-B .main-banner-item .inner .interest-box .bottom .num {
  font-size: 24px;
  font-weight: 800;
  line-height: 31px;
  color: var(--tit-clr);
}
.type-B .main-banner-item.swiper-slide-prev, .type-B .main-banner-item.swiper-slide-next {
  width: 220px !important;
  min-width: 220px;
  max-width: 220px;
  height: 280px !important;
  min-height: 280px;
  max-height: 280px;
  opacity: 1;
}
.type-B .main-banner-item.swiper-slide-active {
  width: 800px !important;
  min-width: 800px;
  max-width: 800px;
  height: 380px !important;
  min-height: 380px;
  max-height: 380px;
  opacity: 1;
}
.type-B .main-banner-item:only-child .inner, .type-B .main-banner-item.swiper-slide-active .inner {
  padding: 50px;
}
.type-B .main-banner-item:only-child .inner::after, .type-B .main-banner-item.swiper-slide-active .inner::after {
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 1, 1) 0.2s;
}
.type-B .main-banner-box.two .main-banner-item .tag, .type-B .main-banner-item:only-child .tag, .type-B .main-banner-item.swiper-slide-active .tag {
  animation-name: slide-20px;
  animation-duration: 0.4s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  min-height: 31px;
  margin-bottom: 6px;
  padding: 6px 10px;
  font-size: 16px;
  line-height: 19px;
  opacity: 0;
  transform: translateX(-20px);
}
@keyframes slide-20px {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.type-B .main-banner-box.two .main-banner-item span, .type-B .main-banner-item:only-child span, .type-B .main-banner-item.swiper-slide-active span {
  width: 320px;
}
.type-B .main-banner-box.two .main-banner-item .title, .type-B .main-banner-item:only-child .title, .type-B .main-banner-item.swiper-slide-active .title {
  animation-name: slide-20px;
  animation-duration: 0.4s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  font-size: 36px;
  line-height: 42px;
  opacity: 0;
  transform: translateX(-20px);
  -webkit-line-clamp: 3;
}
@keyframes slide-20px {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.type-B .main-banner-box.two .main-banner-item .des, .type-B .main-banner-item:only-child .des, .type-B .main-banner-item.swiper-slide-active .des {
  animation-name: slide-20px;
  animation-duration: 0.4s;
  animation-timing-function: ease;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-20px);
}
@keyframes slide-20px {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.type-B .main-banner-box.two .main-banner-item .des,
.type-B .main-banner-box.two .main-banner-item .top, .type-B .main-banner-item:only-child .des,
.type-B .main-banner-item:only-child .top, .type-B .main-banner-item.swiper-slide-active .des,
.type-B .main-banner-item.swiper-slide-active .top {
  font-size: 16px;
  line-height: 21px;
}
.type-B .main-banner-box.two .main-banner-item .interest-box, .type-B .main-banner-item:only-child .interest-box, .type-B .main-banner-item.swiper-slide-active .interest-box {
  animation-name: slide-20px;
  animation-duration: 0.4s;
  animation-timing-function: ease;
  animation-delay: 0.3s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateX(-20px);
}
@keyframes slide-20px {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.type-B .main-banner-box.two .main-banner-item .interest-box .bottom, .type-B .main-banner-item:only-child .interest-box .bottom, .type-B .main-banner-item.swiper-slide-active .interest-box .bottom {
  font-size: 24px;
  line-height: 31px;
}
.type-B .main-banner-box.two .main-banner-item .interest-box .bottom .num, .type-B .main-banner-item:only-child .interest-box .bottom .num, .type-B .main-banner-item.swiper-slide-active .interest-box .bottom .num {
  font-size: 34px;
  line-height: 44px;
}

.type-B .main-banner-item:only-child {
  width: 100% !important;
  height: initial;
}
.type-B .main-banner-item:only-child .inner {
  background-position: bottom right 100px;
}
.type-B .main-banner-item:only-child .des {
  max-width: calc(100% - 500px);
}
.type-B .main-menu-wrap {
  padding: 22px 0 38px;
  background-color: var(--bg-clr1);
}
.type-B .main-menu-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 1200px;
  margin: auto;
}
.type-B .main-menu-item {
  width: 100%;
  height: 100%;
  animation-name: slide-15px;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.17, 0.67, 0.3, 1.8);
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0.3;
  transform: translateY(-15px);
}
@keyframes slide-15px {
  0% {
    transform: translateY(-15px);
    opacity: 0.3;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.type-B .main-menu-item:nth-child(2) {
  animation-delay: 0.03s;
}
.type-B .main-menu-item:nth-child(3) {
  animation-delay: 0.06s;
}
.type-B .main-menu-item:nth-child(4) {
  animation-delay: 0.09s;
}
.type-B .main-menu-item:nth-child(5) {
  animation-delay: 0.12s;
}
.type-B .main-menu-item:nth-child(6) {
  animation-delay: 0.15s;
}
.type-B .main-menu-item a {
  width: 110px;
  height: 96px;
  background: url("/img/content/main/icon_menu_B01.png") no-repeat center top 8px;
  background-size: 62px;
  padding-top: 82px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  letter-spacing: initial;
}
.type-B .main-menu-item a:hover,
.type-B .main-menu-item a:focus {
  animation: mainMenuBounce 1.2s ease infinite;
}
@keyframes mainMenuBounce {
  0%, 20%, 80%, 100% {
    padding-top: 82px;
    background-position: center top 8px;
  }
  30% {
    padding-top: 90px;
    background-position: center top;
  }
  50% {
    padding-top: 79px;
    background-position: center top 10px;
  }
  60% {
    padding-top: 86px;
    background-position: center top 4px;
  }
}
.type-B .main-content-wrap {
  padding: 40px 0;
}
.type-B .main-content-grid-box {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 1200px;
  height: 200px;
  margin: auto;
}
.type-B .main-sub-banner-box {
  width: 355px;
  height: 200px;
  border-radius: 20px;
}
.type-B .main-sub-banner-box .swiper-controller {
  position: absolute;
  justify-content: normal;
  bottom: 30px;
  left: 30px;
  z-index: 1;
}
.type-B .main-sub-banner-box .swiper-pagination-bullets {
  gap: 8px;
}
.type-B .main-sub-banner-box .swiper-pagination-bullets .swiper-pagination-bullet {
  background-color: var(--cap-clr);
}
.type-B .main-sub-banner-item {
  height: 200px;
}
.type-B .main-sub-banner-item .inner {
  padding: 30px !important;
  background-color: #efeeff !important;
  border-radius: 0 !important;
}
.type-B .main-sub-banner-item .inner span {
  max-width: 195px;
}
.type-B .main-sub-banner-item .inner .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--tit-clr);
}
.type-B .main-sub-banner-item .inner .text {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  color: #666;
}
.type-B .main-sub-banner-item .inner img {
  position: absolute;
  top: initial;
  right: 30px;
  bottom: 25px;
  max-width: 90px;
  max-height: 90px;
}
.type-B .main-customer-box {
  width: auto;
  height: 200px;
  display: flex;
  align-items: normal;
  flex-direction: column;
  background: url("/img/content/main/img_customer01.png") no-repeat right 20px bottom 25px;
  background-size: 84px;
  flex-grow: 1;
  padding: 30px;
  border: 1px solid var(--line-clr3);
  border-radius: 20px;
}
.type-B .main-customer-box .title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  color: var(--tit-clr);
}
.type-B .main-customer-box .title .bubble {
  position: relative;
  display: inline-block;
  padding: 5px 11px 5px 14px;
  background-color: var(--body-clr);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--bg-clr2);
}
.type-B .main-customer-box .title .bubble::before {
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  top: 8px;
  left: -5px;
  border-style: solid;
  border-width: 5px 8.66px 5px 0;
  border-color: transparent var(--body-clr) transparent transparent;
}
.type-B .main-customer-box .num {
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: var(--tit-clr);
}
.type-B .main-customer-box .main-customer-list {
  align-items: flex-end;
  width: calc(100% - 75px);
  margin: auto 0 0;
}
.type-B .main-customer-box .main-customer-item {
  padding: 0;
  border: 0;
}
.type-B .main-customer-box .main-customer-item .customer-title {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  color: #666;
}
.type-B .main-customer-box .main-customer-item .customer-num {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  color: var(--tit-clr);
}
.type-B .main-sub-menu-list {
  width: 230px;
  height: 200px;
  display: flex;
  align-items: normal;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
  padding: 30px;
  border: 1px solid var(--line-clr3);
  border-radius: 20px;
}
.type-B .main-sub-menu-item a {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: url("/img/content/main/icon_right.png") no-repeat right center;
  background-size: 7px;
  width: 100%;
  padding-right: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  color: #666;
  filter: invert(41%) saturate(1324%) hue-rotate(171deg) brightness(94%);
}
.type-B .main-sub-menu-item a:hover, .type-B .main-sub-menu-item a:focus {
  filter: brightness(0.6);
  transition: all 0.3s ease;
}
.type-B .main-notice-band-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  width: 1200px;
  height: 72px;
  margin: 20px auto 0;
  padding: 0 30px;
  border: 1px solid var(--line-clr3);
  border-radius: 20px;
}
.type-B .main-notice-band-wrap .title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 155px;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--tit-clr);
}
.type-B .main-notice-band-wrap .title img {
  width: 32px;
  height: 32px;
}
.type-B .main-notice-band-wrap .title::after {
  width: 20px;
  height: 20px;
  background: url("/img/content/main/icon_more01.png") no-repeat center center;
  background-size: contain;
  content: "";
  display: block;
}
.type-B .main-notice-band-wrap .swiper-controller {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  position: static;
  margin: 0;
}
.type-B .main-notice-band-wrap .swiper-controller .swiper-button-prev,
.type-B .main-notice-band-wrap .swiper-controller .swiper-button-next {
  width: 20px;
  height: 20px;
  background: url("/img/content/main/icon_left.png") no-repeat center center;
  background-size: 7px;
}
.type-B .main-notice-band-wrap .swiper-controller .swiper-button-play,
.type-B .main-notice-band-wrap .swiper-controller .swiper-button-pause {
  background-size: 35px;
  filter: invert(1) brightness(2);
}
.type-B .main-notice-band-wrap .swiper-controller .line {
  width: 5px;
  height: 18px;
  font-size: 16px;
  line-height: 19px;
  color: var(--line-clr3);
}
.type-B .main-notice-band-list {
  flex: 1;
}
.type-B .one .main-notice-band-list {
  width: auto;
}
.type-B .main-notice-band-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.type-B .main-notice-band-item * {
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
}
.type-B .main-notice-band-item a {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 720px;
  color: var(--tit-clr);
}
.type-B .main-notice-band-item .time {
  color: var(--cap-clr);
  text-align: right;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  .type-B .main-banner-box.two .main-banner-item.swiper-slide span {
    width: auto;
  }
  .type-B .main-banner-box.two .swiper-controller {
    display: flex;
  }
  .main-banner-wrap {
    height: auto;
  }
  .main-banner-wrap .main-banner-list {
    position: static;
    height: 382px;
  }
  .main-banner-item .inner {
    width: 100%;
    padding: 30px;
  }
  .main-banner-item .des {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
  }
  .main-banner-item .title {
    font-size: 30px;
    line-height: 36px;
    -webkit-line-clamp: 2;
  }
  .main-banner-item span {
    max-width: 468px;
  }
  .main-banner-item img {
    right: 30px;
    width: 230px;
    height: 230px;
  }
  .main-banner-item img[src*=zmainbnr] {
    max-width: 230px;
    max-height: 230px;
  }
  .main-banner-inner-zone {
    position: static;
    width: 100%;
    padding: 0;
    height: auto;
  }
  .main-banner-inner-zone .swiper-controller {
    top: 172px;
    left: 20px;
    height: 28px;
  }
  .main-banner-inner-zone .main-menu-list {
    width: 100%;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    gap: 20px calc((100% - 300px) / 2);
    padding: 24px 20px;
  }
  .main-menu-item {
    width: 100%;
    height: 63px;
  }
  .main-menu-item a {
    padding-top: 46px;
    background-size: 42px;
    background-position-y: top;
  }
  .main-menu-item a:hover, .main-menu-item a:focus {
    background-color: transparent;
    animation: none;
  }
  .swiper-controller .swiper-button-prev,
  .swiper-controller .swiper-button-next {
    display: none;
  }
  .main-product-wrap {
    width: 100%;
    height: 342px;
    flex-direction: column;
    margin: 0 0 30px;
    padding: 30px;
    border-radius: 0;
  }
  .main-product-wrap::before, .main-product-wrap::after {
    display: none;
  }
  .main-product-wrap.less, .main-product-wrap.less:has(li:only-child) {
    height: 288px;
  }
  .main-product-wrap.less li:only-child, .main-product-wrap.less:has(li:only-child) li:only-child {
    flex: 1;
    max-width: none;
  }
  .main-product-wrap.less li:only-child .main-product, .main-product-wrap.less:has(li:only-child) li:only-child .main-product {
    width: 100%;
  }
  .main-product-wrap .main-title {
    width: auto;
    margin: 0 0 20px;
    line-height: 24px;
  }
  .main-product-wrap .main-title::after,
  .main-product-wrap .main-title br {
    display: none;
  }
  .main-product-wrap .swiper-button-prev,
  .main-product-wrap .swiper-button-next {
    display: block;
  }
  .main-product-list {
    position: static;
    width: auto;
  }
  .main-product-item.swiper-slide-active,
  .main-product-item.swiper-slide-next {
    max-width: none;
  }
  .main-product {
    width: 100%;
    height: 178px;
    padding: 20px;
    background-position: right 20px bottom 20px;
    background-size: 80px;
  }
  .main-product .tag {
    top: 20px;
    right: 20px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 14px;
  }
  .main-product .title {
    max-width: calc(100% - 110px);
    font-size: 18px;
    line-height: 24px;
    -webkit-line-clamp: 3;
  }
  .main-product .box .bottom {
    font-size: 16px;
    line-height: normal;
  }
  .main-product .box .bottom strong {
    font-size: 20px;
  }
  .main-product-wrap .swiper-controller {
    position: static;
    justify-content: center;
    margin-top: 20px;
  }
  .main-point-banner-wrap {
    width: 100%;
    margin: 60px 0;
  }
  .main-point-banner-wrap .main-point-banner {
    justify-content: space-between;
    gap: 20px;
    min-height: 120px;
    padding: 10px 10px 10px 20px;
    border-radius: 0;
  }
  .main-point-banner-wrap .main-point-banner .txt {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .main-point-banner-wrap .main-point-banner .txt span {
    display: block;
    margin-top: 10px;
  }
  .main-point-banner-wrap .main-point-banner strong {
    font-size: 18px;
    line-height: 21px;
  }
  .main-point-banner-wrap .main-point-banner span {
    font-size: 14px;
    line-height: 16px;
  }
  .main-point-banner-wrap .main-point-banner img {
    position: static;
    width: 27%;
    max-width: 133px;
    min-width: 100px;
  }
  .main-service-wrap {
    width: 100%;
    margin: 60px auto;
    padding: 0 20px;
  }
  .main-service-wrap .main-service-list {
    gap: 15px;
  }
  .main-service-wrap .main-service-item {
    max-width: none;
  }
  .main-service {
    padding: 30px 20px;
  }
  .main-service-link {
    padding: 30px 25px;
    border-radius: 20px;
    background-size: 180px;
  }
  .main-service-link .title {
    font-size: 24px;
  }
  .main-service-link .img {
    max-width: 50%;
    min-width: 130px;
  }
  .main-notice-wrap {
    width: 100%;
    margin: 60px auto;
    padding: 0 20px;
  }
  .main-notice-wrap .main-notice-left,
  .main-notice-wrap .main-notice-right {
    height: 234px;
  }
  .main-notice-wrap .main-notice-left {
    gap: 30px;
  }
  .main-notice-wrap .main-notice-right {
    border-radius: 20px;
  }
  .main-sub-banner-list .main-sub-banner-item {
    height: 234px;
  }
  .main-sub-banner-list .main-sub-banner-item .inner {
    padding: 30px 20px;
    border-radius: 20px;
  }
  .main-sub-banner-list .main-sub-banner-item .title {
    font-size: 24px;
  }
  .main-sub-banner-list .main-sub-banner-item span {
    max-width: calc(100% - 160px);
  }
  .main-sub-banner-list .main-sub-banner-item img {
    width: 140px;
    height: 140px;
    top: initial;
    right: 10px;
    bottom: 30px;
    transform: none;
  }
  .main-notice-right .swiper-controller {
    left: 20px;
    bottom: 30px;
  }
  .main-customer-wrap {
    margin-top: 60px;
    padding: 20px;
  }
  .main-customer-list {
    width: auto;
  }
  .main-customer-list .main-customer-item {
    margin-right: 10px;
    padding-right: 10px;
  }
  .type-B .main-banner-wrap,
  .type-B .main-banner-wrap:has(.one),
  .type-B .main-banner-wrap:has(.two) {
    height: auto;
    padding: 30px 0 40px;
  }
  .type-B .main-banner-wrap .swiper-btn-wrap button,
  .type-B .main-banner-wrap:has(.one) .swiper-btn-wrap button,
  .type-B .main-banner-wrap:has(.two) .swiper-btn-wrap button {
    width: 54px;
    height: 74px;
    top: 103px;
  }
  .type-B .main-banner-box {
    width: 100%;
    padding: 0 20px;
  }
  .type-B .main-banner-list {
    height: 300px;
  }
  .type-B .main-banner-item {
    position: static;
    transform: none;
  }
  .type-B .main-banner-list.less .main-banner-item .inner,
  .type-B .main-banner-item .inner, .type-B .main-banner-item:only-child .inner, .type-B .main-banner-item.swiper-slide-active .inner {
    padding: 30px;
  }
  .type-B .main-banner-list.less .main-banner-item .inner::after,
  .type-B .main-banner-item .inner::after, .type-B .main-banner-item:only-child .inner::after, .type-B .main-banner-item.swiper-slide-active .inner::after {
    width: 200px;
    height: 200px;
    top: initial;
    bottom: 0;
    transition-delay: initial;
  }
  .type-B .main-banner-item:only-child .inner {
    background-position: bottom right;
  }
  .type-B .main-banner-list.less .main-banner-item, .type-B .main-banner-item:only-child, .type-B .main-banner-item.swiper-slide-prev, .type-B .main-banner-item.swiper-slide-next, .type-B .main-banner-item.swiper-slide-active {
    width: 100% !important;
    min-width: auto;
    max-width: initial;
    height: 300px !important;
    min-height: auto;
    max-height: initial;
  }
  .type-B .main-banner-list.less .main-banner-item .tag, .type-B .main-banner-item:only-child .tag, .type-B .main-banner-item.swiper-slide-prev .tag, .type-B .main-banner-item.swiper-slide-next .tag, .type-B .main-banner-item.swiper-slide-active .tag {
    min-height: 25px;
    margin-bottom: 8px;
    padding: 4px 10px;
    font-size: 14px;
    line-height: 16px;
  }
  .type-B .main-banner-list.less .main-banner-item .title, .type-B .main-banner-item:only-child .title, .type-B .main-banner-item.swiper-slide-prev .title, .type-B .main-banner-item.swiper-slide-next .title, .type-B .main-banner-item.swiper-slide-active .title {
    width: auto;
    max-width: 480px;
    margin-bottom: 13px;
    font-size: 26px;
    line-height: 31px;
  }
  .type-B .main-banner-list.less .main-banner-item .des,
  .type-B .main-banner-list.less .main-banner-item .top, .type-B .main-banner-item:only-child .des,
  .type-B .main-banner-item:only-child .top, .type-B .main-banner-item.swiper-slide-prev .des,
  .type-B .main-banner-item.swiper-slide-prev .top, .type-B .main-banner-item.swiper-slide-next .des,
  .type-B .main-banner-item.swiper-slide-next .top, .type-B .main-banner-item.swiper-slide-active .des,
  .type-B .main-banner-item.swiper-slide-active .top {
    width: auto;
    max-width: 480px;
    font-size: 14px;
    line-height: 16px;
  }
  .type-B .main-banner-list.less .main-banner-item .interest-box, .type-B .main-banner-item:only-child .interest-box, .type-B .main-banner-item.swiper-slide-prev .interest-box, .type-B .main-banner-item.swiper-slide-next .interest-box, .type-B .main-banner-item.swiper-slide-active .interest-box {
    width: auto;
  }
  .type-B .main-banner-list.less .main-banner-item .interest-box .bottom, .type-B .main-banner-item:only-child .interest-box .bottom, .type-B .main-banner-item.swiper-slide-prev .interest-box .bottom, .type-B .main-banner-item.swiper-slide-next .interest-box .bottom, .type-B .main-banner-item.swiper-slide-active .interest-box .bottom {
    font-size: 16px;
    line-height: 20px;
  }
  .type-B .main-banner-list.less .main-banner-item .interest-box .bottom .num, .type-B .main-banner-item:only-child .interest-box .bottom .num, .type-B .main-banner-item.swiper-slide-prev .interest-box .bottom .num, .type-B .main-banner-item.swiper-slide-next .interest-box .bottom .num, .type-B .main-banner-item.swiper-slide-active .interest-box .bottom .num {
    font-size: 24px;
    line-height: 31px;
  }
  .type-B .main-menu-list {
    width: 100%;
  }
  .type-B .main-content-grid-box {
    width: auto;
    height: auto;
    flex-wrap: wrap;
    padding: 0 20px;
  }
  .type-B .main-sub-banner-box,
  .type-B .main-sub-menu-list {
    width: calc((100% - 15px) / 2);
  }
  .type-B .main-sub-banner-item {
    height: 200px;
  }
  .type-B .main-sub-banner-item .inner span {
    max-width: calc(100% - 110px);
  }
  .type-B .main-customer-box {
    grid-column: 1/-1;
    order: 1;
    height: auto;
    min-height: 200px;
  }
  .type-B .main-customer-box .num {
    margin-bottom: 33px;
  }
  .type-B .main-notice-band-wrap {
    gap: 30px;
    width: auto;
    margin: 20px 20px 0;
  }
  .type-B .main-notice-band-wrap .swiper-button-prev,
  .type-B .main-notice-band-wrap .swiper-button-next {
    display: block;
  }
  .type-B .main-notice-band-list {
    width: calc(100% - 270px);
  }
}
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .type-B .main-banner-list .main-banner-item.swiper-slide-active .title {
    -webkit-line-clamp: 2;
  }
  .main-product-wrap.less {
    height: 342px;
  }
  .main-product-wrap.less .swiper-controller {
    display: flex;
  }
  .main-product-item.swiper-slide-next {
    opacity: 0;
  }
  .main-point-banner-wrap {
    margin: 30px 0 40px;
  }
  .main-service-wrap {
    margin: 40px auto;
  }
  .main-service-wrap .main-service-list {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }
  .main-service-item {
    width: 100%;
  }
  .main-service {
    height: 88px;
    padding: 20px;
    border-radius: 24px;
  }
  .main-service .sub {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 16px;
  }
  .main-service .title {
    font-size: 18px;
    line-height: 21px;
  }
  .main-service:hover, .main-service:focus-within {
    transform: none;
  }
  .main-notice-wrap {
    flex-direction: column;
    gap: 20px;
    margin: 40px auto;
  }
  .main-notice-wrap .main-notice-left,
  .main-notice-wrap .main-notice-right {
    width: 100%;
    border-radius: 30px;
  }
  .main-notice-wrap .main-notice-left {
    gap: 20px;
    order: 1;
    height: 196px;
    padding: 30px;
  }
  .main-notice-wrap .main-notice-right {
    height: 170px;
  }
  .main-notice-wrap .main-notice-link {
    width: 24px;
    height: 24px;
    top: 30px;
    right: 30px;
    gap: 0;
  }
  .main-notice-wrap .main-notice-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .main-notice-wrap .main-notice-link span::before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    font-size: 0;
  }
  .main-notice-wrap .main-notice-link::after {
    width: 24px;
    height: 24px;
  }
  .main-sub-banner-list .main-sub-banner-item {
    height: 170px;
  }
  .main-sub-banner-list .main-sub-banner-item .inner {
    padding: 30px;
  }
  .main-sub-banner-list .main-sub-banner-item .title {
    font-size: 20px;
    line-height: 24px;
  }
  .main-sub-banner-list .main-sub-banner-item .text {
    margin-top: 4px;
    font-size: 14px;
    line-height: 16px;
  }
  .main-sub-banner-list .main-sub-banner-item img {
    width: 80px;
    height: 80px;
    right: 20px;
    bottom: 40px;
  }
  .main-customer-wrap {
    margin-top: 40px;
    padding: 30px 20px;
  }
  .main-customer-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
  }
  .main-customer-list .main-customer-item {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .main-customer-list .main-customer-item .title {
    font-size: 14px;
    line-height: 16px;
  }
  .main-customer-list .main-customer-item .num {
    margin-top: 5px;
    font-size: 18px;
    line-height: 21px;
  }
  .type-B .main-menu-wrap {
    padding: 30px 20px;
  }
  .type-B .main-menu-list {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-gap: 32px calc((100% - 300px) / 2);
  }
  .type-B .main-menu-item {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .type-B .main-menu-item a {
    padding-top: 66px;
    background-position-y: top;
    font-size: 13px;
  }
  .type-B .main-menu-item a:hover, .type-B .main-menu-item a:focus {
    background-color: transparent;
    animation: none;
  }
  .type-B .main-content-wrap {
    padding: 30px 0;
  }
  .type-B .main-content-grid-box {
    display: flex;
    flex-direction: column;
  }
  .type-B .main-sub-banner-box,
  .type-B .main-sub-banner-list .main-sub-banner-item {
    width: 100%;
    height: 180px;
  }
  .type-B .main-sub-banner-item .inner span {
    max-width: 185px;
  }
  .type-B .main-sub-banner-item .inner span.text {
    -webkit-line-clamp: 1;
  }
  .type-B .main-customer-box {
    width: 100%;
    padding: 25px 10px 25px 25px;
    order: initial;
  }
  .type-B .main-customer-box .title .bubble {
    padding: 5px 6px;
    font-size: 12px;
  }
  .type-B .main-customer-box .main-customer-list {
    display: flex;
    flex-direction: column;
    align-items: normal;
    width: auto;
    margin: auto 0 0;
    gap: 20px;
  }
  .type-B .main-sub-menu-list {
    width: 100%;
    padding: 25px;
  }
  .type-B .main-notice-band-wrap {
    flex-wrap: wrap;
    gap: 20px 0;
    height: 103px;
    padding: 20px 25px;
  }
  .type-B .main-notice-band-wrap .title img {
    width: 24px;
    height: 24px;
  }
  .type-B .main-notice-band-list {
    width: 100%;
    order: 1;
  }
  .type-B .main-notice-band-item {
    height: 19px !important;
  }
  .type-B .main-notice-band-item.swiper-slide {
    opacity: 0;
    transition: all 0.3s ease;
  }
  .type-B .main-notice-band-item.swiper-slide-active {
    opacity: 1;
  }
}
/*----------------------------------------*\
  || 조은저축은행 대주주소개
\*----------------------------------------*/
.choeun-major-shareholder-wrap .slogan {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  color: var(--body-clr);
  text-align: center;
}
.choeun-major-shareholder-wrap .slogan strong {
  display: block;
  color: #db3a3a;
}
.choeun-major-shareholder-wrap .img-map {
  display: block;
  margin: 40px auto;
  max-width: 100%;
}
.choeun-major-shareholder-wrap .office-map-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--line-clr2);
}
.choeun-major-shareholder-wrap .office-map-item {
  flex: 1;
}
.choeun-major-shareholder-wrap .office-map-item .box {
  aspect-ratio: 1;
  padding: 50px;
  border-bottom: 1px solid var(--line-clr2);
}
.choeun-major-shareholder-wrap .office-map-item .box .title {
  display: block;
  margin-bottom: 15px;
  font-size: 24px;
  line-height: 24px;
  color: var(--body-clr);
}
.choeun-major-shareholder-wrap .office-map-item .box .text {
  display: block;
  margin-bottom: 25px;
  font-size: 15px;
  line-height: 25px;
  color: #666;
}
.choeun-major-shareholder-wrap .office-map-item .box .phone,
.choeun-major-shareholder-wrap .office-map-item .box .email {
  background: url("/img/hss_companycontent/choeun_content/icon_phone.png") no-repeat left center;
  background-size: auto;
  display: block;
  height: 36px;
  padding-left: 36px;
  font-size: 15px;
  line-height: 36px;
  color: #666;
}
.choeun-major-shareholder-wrap .office-map-item .box .email {
  background-image: url(/img/hss_companycontent/choeun_content/icon_mail.png);
}
.choeun-major-shareholder-wrap .office-map-item .map {
  aspect-ratio: 1;
}
.choeun-major-shareholder-wrap .office-map-item:nth-of-type(2) {
  border-left: 1px solid var(--line-clr2);
  border-right: 1px solid var(--line-clr2);
}
.choeun-major-shareholder-wrap .office-map-item:nth-of-type(2) .box {
  border-top: 1px solid var(--line-clr2);
  border-bottom: 0;
}

@media (max-width: 1200px) {
  .choeun-major-shareholder-wrap .office-map-list {
    display: block;
  }
  .choeun-major-shareholder-wrap .office-map-item {
    display: flex;
    align-items: stretch;
  }
  .choeun-major-shareholder-wrap .office-map-item:nth-of-type(2) {
    border: 0;
    border-top: 1px solid var(--line-clr2);
    border-bottom: 1px solid var(--line-clr2);
  }
  .choeun-major-shareholder-wrap .office-map-item:nth-of-type(2) .box {
    border-top: 0;
    border-left: 1px solid var(--line-clr2);
  }
  .choeun-major-shareholder-wrap .office-map-item:nth-of-type(2) .map {
    border-left: 0;
  }
  .choeun-major-shareholder-wrap .office-map-item .box {
    min-width: 336px;
    border: 0;
  }
  .choeun-major-shareholder-wrap .office-map-item .map {
    flex-grow: 1;
    border-left: 1px solid var(--line-clr2);
    aspect-ratio: auto;
  }
}
@media (max-width: 768px) {
  .choeun-major-shareholder-wrap .office-map-item {
    flex-direction: column;
  }
  .choeun-major-shareholder-wrap .office-map-item:nth-of-type(2) .box {
    border-left: 0;
    border-bottom: 1px solid var(--line-clr2);
  }
  .choeun-major-shareholder-wrap .office-map-item .box {
    min-width: auto;
    border-bottom: 1px solid var(--line-clr2);
    aspect-ratio: auto;
  }
  .choeun-major-shareholder-wrap .office-map-item .map {
    min-height: 300px;
    border-left: 0;
    order: 1;
  }
}
/*----------------------------------------*\
  || 채권추심자 증표
\*----------------------------------------*/
.column-line-list .column-line-item:first-child {
  padding-left: 10px;
}
.column-line-list .column-line-item:last-child {
  padding-right: 10px;
}
.column-line-list .column-line-item:nth-child(4n) {
  border-left: 0;
}
.column-line-list .column-line-item .img.h-auto {
  height: auto;
  max-width: 250px;
}

@media (max-width: 1200px) {
  html.responsive .column-line-list .column-line-item:nth-child(2n-1),
  html:has(.content) .column-line-list .column-line-item:nth-child(2n-1) {
    border-left: 0;
  }
  html.responsive .column-line-list .column-line-item:nth-child(4n),
  html:has(.content) .column-line-list .column-line-item:nth-child(4n) {
    border-left: 1px solid var(--line-clr3);
  }
}
@media (max-width: 768px) {
  .column-line-list .column-line-item .img.h-auto {
    max-width: 100%;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  || Card Acco
\*----------------------------------------*/
.card-acco-dl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.card-acco-dl dt,
.card-acco-dl dd {
  font-size: 16px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
/*----------------------------------------*\
  || 전체계좌조회
\*----------------------------------------*/
.inq-info-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.inq-info-box .arrow-link {
  margin-left: auto;
}

.aside-data {
  font-size: 14px;
  font-weight: 400;
}
.aside-data time {
  margin-left: 10px;
  color: var(--cap-clr);
}

.info-acco-group-item:has(.btn[aria-expanded=true]):has(.util-box) {
  margin-bottom: 46px;
}
.info-acco-group-item:has(.btn[aria-expanded=true]) .util-box {
  display: flex;
}
.info-acco-group-item .util-box {
  display: none;
  align-items: center;
  gap: 20px;
  position: absolute;
  right: 30px;
  bottom: -36px;
}

.info-acco-list {
  display: none;
  padding: 30px;
}
.info-acco-list:has(.btn[aria-expanded=true]) + .info-acco-list {
  border-top: 1px solid #d2d4d4;
}

.info-acco-item {
  display: flex;
  align-items: normal;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #d9d9d9;
}
.info-acco-item .ico-bi {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  border: 1px solid var(--bg-clr3);
  border-radius: 50%;
}
.info-acco-item .left,
.info-acco-item .right {
  display: flex;
  align-items: normal;
  justify-content: space-between;
  flex-direction: column;
  min-height: 52px;
}
.info-acco-item .left .title,
.info-acco-item .left .balance,
.info-acco-item .right .title,
.info-acco-item .right .balance {
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  color: var(--tit-clr);
}
.info-acco-item .left .title {
  display: flex;
  align-items: center;
  line-height: unset;
}
.info-acco-item .left .name {
  font-size: 16px;
  line-height: 19px;
  color: var(--tit-clr);
}
.info-acco-item .left .name::before {
  width: 1px;
  height: 14px;
  content: "";
  display: inline-block;
  margin: 0 14px -2px;
  background: #d9d9d9;
}
.info-acco-item .left .tag {
  height: 22px;
  margin-left: 10px;
  padding: 3px 6px;
  border: 1px solid var(--main-clr);
  border-radius: 17px;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  color: var(--main-clr);
}
.info-acco-item .left .tag.red {
  border-color: var(--neg-clr);
  color: var(--neg-clr);
}
.info-acco-item .left .tag.blue {
  border-color: var(--pos-clr);
  color: var(--pos-clr);
}
.info-acco-item .left .wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.info-acco-item .left .wrap .account {
  font-size: 13px;
  line-height: 15px;
  color: #666;
}
.info-acco-item .left .wrap .account:hover::after, .info-acco-item .left .wrap .account:focus::after {
  content: "";
  width: 100%;
  height: 1px;
  position: relative;
  display: block;
  background-color: #666;
  bottom: -2px;
}
.info-acco-item .left .wrap .account em {
  line-height: inherit;
  color: inherit;
  margin-right: 10px;
}
.info-acco-item .left .wrap .account span {
  line-height: inherit;
  color: inherit;
}
.info-acco-item .left .wrap .btn-copy {
  margin-left: -5px;
  margin-right: -5px;
}
.info-acco-item .left .wrap .date {
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 15px;
  color: var(--cap-clr);
}
.info-acco-item .left .wrap .date::before {
  width: 1px;
  height: 10px;
  content: "";
  margin: 0 14px 0 4px;
  background: #d9d9d9;
}
.info-acco-item .left .wrap .date time {
  margin-left: 8px;
  line-height: inherit;
  color: inherit;
}
.info-acco-item .left .wrap .date.notify time {
  color: var(--neg-clr);
}
.info-acco-item .right {
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  gap: 20px;
  margin-left: auto;
}
.info-acco-item .right .balance {
  font-weight: 400;
}
.info-acco-item .right .balance .num {
  margin-right: 4px;
  font-weight: 500;
}
.info-acco-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

@media (max-width: 768px) {
  .info-acco-list {
    display: none;
    padding: 20px 15px;
  }
  .info-acco-item {
    justify-content: normal;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .info-acco-item .ico-bi {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
  .info-acco-item .left .title,
  .info-acco-item .left .balance,
  .info-acco-item .right .title,
  .info-acco-item .right .balance {
    font-size: 16px;
    line-height: 19px;
  }
  .info-acco-item .left {
    max-width: calc(100% - 34px);
    min-height: 46px;
  }
  .info-acco-item .left .title {
    align-items: normal;
  }
  .info-acco-item .left .wrap {
    flex-wrap: wrap;
  }
  .info-acco-item .left .wrap .date {
    width: 100%;
  }
  .info-acco-item .left .wrap .date::before {
    display: none;
  }
  .info-acco-item .left .name {
    min-width: fit-content;
  }
  .info-acco-item .right {
    flex-wrap: wrap;
    margin-top: 15px;
  }
  .info-acco-item .right .balance {
    width: 100%;
    text-align: right;
  }
  .info-acco-item .btn-agree {
    justify-content: flex-end;
    width: 100%;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/* 계좌별명관리팝업 */
.point-icon::before {
  content: "*";
  color: var(--neg-clr);
  padding: 3px;
}

/*----------------------------------------*\
  || 전체계좌조회 : 총잔액
\*----------------------------------------*/
.inq-unitdate {
  font-size: 12px;
  text-align: right;
  letter-spacing: 0.25px;
}
.inq-unitdate .title {
  font-weight: 700;
  letter-spacing: 1px;
}
.inq-unitdate + .table-wrap01 {
  margin-top: 15px;
}

.assets-unit,
.assets-price {
  color: var(--main-clr);
  font-weight: 700;
}

.assets-price {
  margin-right: 5px;
  font-size: 18px;
}

.inq-assets-box + .info-table-area {
  margin-top: 50px;
}

/*----------------------------------------*\
  || 계좌상세조회
\*----------------------------------------*/
.lookup-01-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 25px;
  background: #f7f7f7;
  border-radius: 20px;
}
.lookup-01-wrap .look-up-txt {
  font-size: 14px;
  line-height: 24px;
  word-break: auto-phrase;
  min-height: 48px;
}
.lookup-01-wrap .lookup-title {
  font-weight: 700;
  font-size: 18px;
}

.lookup-01-sample + .table-03-wrap {
  margin-top: 40px;
}

.lookup-01-list {
  flex: 1;
  height: auto;
  padding: 0 25px;
  border-right: 1px solid var(--line-clr3);
}
.lookup-01-list:first-child {
  padding-left: 0;
}
.lookup-01-list:last-child {
  padding-right: 0;
  border-right: 0;
}
.lookup-01-list.pt30 {
  padding-top: 0 !important;
}
.lookup-01-list h5 {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 20px;
}
.lookup-01-list p {
  margin-bottom: 13px;
  font-size: 16px;
}
.lookup-01-list p.txt-bold {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lookup-01-list p.txt-bold .btn-thin.retouch {
  margin-top: 0;
}
.lookup-01-list p > span {
  display: inline-block;
  max-width: 140px;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lookup-01-list span {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  word-break: auto-phrase;
}
.lookup-01-list span + span, .lookup-01-list span:has(+ span) {
  display: inline;
}
.lookup-01-list span.type01 {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 400;
  color: var(--cap-clr);
}
.lookup-01-list span span {
  margin-top: 5px;
  margin-left: 5px;
  font-size: 16px;
  font-weight: 400;
}
.lookup-01-list .sub-title-lower {
  margin-left: 15px;
  font-size: 16px;
}
.lookup-01-list .sub-title-lower::before {
  content: ":";
  margin-right: 15px;
}
.lookup-01-list .btn-thin.retouch {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: fit-content;
  max-width: none;
  min-width: 60px;
  margin: 0 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--line-clr3);
  font-size: 12px;
  color: var(--body-clr);
}

.lookup-02-wrap,
.lookup-03-wrap {
  background: #f7f7f7;
}
.lookup-02-wrap h5,
.lookup-03-wrap h5 {
  margin-bottom: 8px;
}
.lookup-02-wrap span,
.lookup-03-wrap span {
  font-size: 22px;
  vertical-align: baseline;
}
.lookup-02-wrap .lookup-result,
.lookup-03-wrap .lookup-result {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  padding-left: 8px;
}
.lookup-02-wrap .lookup-03result,
.lookup-03-wrap .lookup-03result {
  display: inline-block;
}

.lookup-02-wrap li {
  text-align: center;
}

.list-date li {
  float: left;
  font-size: 13px;
}
.list-date li::after {
  content: "";
  display: block;
  float: left;
  width: 1px;
  height: 13px;
  margin: 0 10px;
  background-color: var(--disable-clr);
}
.list-date li:first-child::after {
  display: none;
}
.list-date li:nth-child(2)::after {
  background: var(--disable-clr);
}

.look-rut::after {
  content: "";
  display: block;
  float: left;
  width: 1px;
  height: 22px;
  margin: 0 20px;
  background-color: var(--disable-clr);
}

/*----------------------------------------*\
  || 자기앞수표조회
\*----------------------------------------*/
.cach-content-wrap {
  width: 100%;
  border: 1px solid var(--disable-clr);
  padding: 25px 20px;
  background: var(--bg-clr2);
  margin-bottom: 40px;
}

.cach-img {
  margin: 0 auto;
  display: block;
}

.number-k {
  font-size: 1em;
  font-weight: 500;
  padding: 14px 5px 14px 20px;
  display: inline-block;
}
.number-k span {
  font-weight: 500;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .lookup-01-wrap {
    flex-direction: column;
  }
  html.responsive .lookup-01-list {
    min-width: 100%;
    padding: 20px 0;
    border: 0;
    border-bottom: 1px solid var(--line-clr3);
  }
  html.responsive .lookup-01-list:first-child {
    padding-top: 0;
  }
  html.responsive .lookup-01-list:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  html.responsive .lookup-01-list.pt30:not(:first-child) {
    padding-top: 30px !important;
  }
  html.responsive .lookup-01-list h5 {
    margin-bottom: 0;
    font-size: 15px;
  }
  html.responsive .lookup-01-list > span {
    margin-top: 3px;
    font-size: 17px;
  }
  html.responsive .lookup-01-list span span {
    margin-top: 2px;
    margin-left: 2px;
    font-size: 13px;
  }
  html.responsive .lookup-01-list .txt-bold .btn-thin.retouch {
    margin-top: 0;
  }
  html.responsive .lookup-01-list .lookup-title {
    font-size: 19px;
  }
  html.responsive .lookup-01-list .look-up-txt {
    width: 100%;
    min-height: auto;
    margin-bottom: 0;
    font-size: 13px;
    line-height: 24px;
  }
  html.responsive .lookup-01-list .btn-thin.retouch {
    margin: 15px 0 0 auto;
    padding: 7px 10px;
    font-size: 14px;
    letter-spacing: 0;
  }
  html.responsive .cach-content-wrap {
    padding: 30px 0;
    margin-bottom: 15px;
  }
  html.responsive .cach-img {
    width: 80%;
  }
  html.responsive .number-k {
    padding-right: 0;
    padding-bottom: 0;
    float: right;
  }
  html.responsive .inquiry-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .lookup-01-list p > span {
    max-width: 100%;
  }
  .inq-assets-box {
    margin-top: 30px;
  }
  .inq-assets-box + .info-table-area {
    margin-top: 50px;
  }
  .inq-unitdate {
    letter-spacing: initial;
  }
}
/*----------------------------------------*\
  || Login Wrap
\*----------------------------------------*/
.login-wrap {
  position: relative;
  max-width: 640px;
  margin: auto;
  padding: 40px 0 100px;
}
.login-wrap .page-main-title {
  margin: 30px auto 20px;
  text-align: center;
}
.login-wrap .basic-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 583px;
  padding-top: 140px;
  padding-bottom: 0;
}
.login-wrap .basic-frame-top {
  position: absolute;
  inset: 0;
  bottom: initial;
  background-color: var(--bg-clr2);
  border-radius: 20px 20px 0 0;
}
.login-wrap .basic-frame-top .basic-tab-list {
  margin-bottom: 0;
}
.login-wrap [role=tabpanel] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
}
.login-wrap [role=tabpanel]:has(.login-qr-box) {
  justify-content: center;
}
.login-wrap .toggle-checkbox-wrap {
  margin-top: 40px;
}
.login-wrap .simple-link-list {
  width: 100%;
  margin-top: 85px;
}
.login-wrap .basic-btn {
  width: 100%;
  margin-top: 10px;
}
.login-wrap .login-inp-wrap {
  width: 500px;
}
.login-wrap .basic-inp-wrap {
  height: 54px;
}
.login-wrap .login-btn-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
}
.login-wrap .private-list {
  justify-content: center;
  margin-bottom: 45px;
}
.login-wrap .private-list + .private-list {
  margin-top: 10px;
}
.login-wrap .private-item {
  height: 145px;
  min-width: 150px;
  max-width: 150px;
}
.login-wrap .private-item:nth-child(1) a {
  margin-left: auto;
}
.login-wrap .private-item:nth-child(1), .login-wrap .private-item:nth-child(2) {
  min-width: 205px;
}
.login-wrap .private-item:nth-child(1) a, .login-wrap .private-item:nth-child(2) a {
  max-width: 150px;
}
.login-wrap .login-qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  width: 240px;
  height: 180px;
  margin-bottom: 30px;
  background-color: var(--bg-clr2);
  border: 1px solid var(--line-clr3);
  border-radius: 14px;
  transition: all 0.15s ease;
}
.login-wrap .login-qr-box:hover {
  border-color: var(--main-clr);
}
.login-wrap .login-qr-box .img {
  width: 66px;
  height: 66px;
}
.login-wrap .login-qr-box .text {
  font-size: 20px;
  line-height: 24px;
  color: var(--tit-clr);
  text-align: center;
}

@media (max-width: 768px) {
  .login-wrap {
    padding: 0;
  }
  .login-wrap .basic-frame-top {
    position: static;
    background-color: transparent;
  }
  .login-wrap .page-main-title {
    margin: 0 auto 30px;
  }
  .login-wrap .basic-frame {
    height: auto;
    padding: 30px 20px;
  }
  .login-wrap .basic-tab-list,
  .login-wrap [role=tabpanel]:not(#tabPanel2) {
    display: none !important;
  }
  .login-wrap #tabPanel2 {
    display: flex !important;
    padding-bottom: 0;
  }
  .login-wrap #tabPanel2 .login-btn-list,
  .login-wrap #tabPanel2 .simple-link-list {
    display: none;
  }
  .login-wrap .login-inp-wrap {
    width: 100%;
    padding-bottom: 0;
  }
}
/*----------------------------------------*\
  || QR 로그인
\*----------------------------------------*/
.time-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 70px;
  margin: auto;
  font-size: 16px;
  line-height: 25px;
}
.time-counter::before {
  width: 21px;
  height: 21px;
  background: url("/img/common/icon/icon_time.png") no-repeat center center;
  background-size: contain;
  content: "";
}

.qr-img-wrap {
  width: 158px;
  height: auto;
  margin: 30px auto;
  padding: 4px;
  background-color: var(--main-clr);
}
.qr-img-wrap img {
  width: 150px;
  height: 150px;
  padding: 14px;
  background-color: var(--bg-clr2);
}
.qr-img-wrap .time-counter {
  width: 66px;
  margin-top: 6px;
  margin-bottom: 5px;
  line-height: 19px;
  color: var(--bg-clr2);
}
.qr-img-wrap .time-counter::before {
  width: 16px;
  height: 16px;
  background-image: url("/img/common/icon/icon_time_w.png");
}

.qr-num-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.qr-num-wrap .qr-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 54px;
  border: 1px solid var(--line-clr3);
  border-radius: 10px;
  font-size: 24px;
}

.qr-logo-wrap {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 30px;
  bottom: 0;
  padding-bottom: 3px;
  border: 1px solid var(--line-clr3);
  border-radius: 20px;
}
.qr-logo-wrap img {
  width: 30px;
}

@media (max-width: 768px) {
  .qr-logo-wrap {
    display: none;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.log-radio .radio-box-wrap {
  float: right;
}

/*----------------------------------------*\
  || Login
\*----------------------------------------*/
.login-box-wrap {
  border-top: 1px solid var(--body-clr);
}

.login-box {
  border-right: 1px solid var(--disable-clr);
  float: left;
  width: 50%;
  padding: 44px 71px 40px;
  display: table;
}
.login-box:last-child {
  border-right: none;
}

.login-sub-title {
  margin-bottom: 33px;
  font-weight: 400;
  font-size: 20px;
}

.login-center {
  height: 193px;
}
.login-center.type01 {
  width: 406px;
}
.login-center.type01 .input-basic {
  width: 99%;
  margin-bottom: 10px;
}
.login-center.type01 .btn-log {
  width: 400px;
}
.login-center.type01 .vitualKeyCheck {
  float: right;
}

.btn-log {
  width: 100%;
  height: 51px;
  font-weight: 400;
  font-size: 20px;
  box-sizing: border-box;
  border-radius: 10px;
}
.btn-log.bg-color01 {
  background-color: var(--main-clr);
  color: var(--bg-clr2);
}
.btn-log.large {
  height: 70px;
  margin-bottom: 13px;
}
.btn-log.wh {
  border: 1px solid var(--disable-clr);
  border-bottom-width: 2px;
}
.btn-log .log-icon {
  width: 20px;
  height: 27px;
  vertical-align: middle;
  background: url("/img/common/login_icon.png") no-repeat left center;
  background-size: cover;
  margin-right: 10px;
}

.log-radio-title {
  font-weight: 400;
  font-size: 14px;
  margin: 3px 0 22px;
}

.log-link-wrap {
  text-align: left;
}
.log-link-wrap li {
  padding-right: 10px;
  background: url("/img/common/arrow_icon_black.png") no-repeat right center;
  margin-right: 27px;
  font-size: 14px;
  display: inline-block;
}
.log-link-wrap li:last-child {
  margin-right: 0;
}
.log-link-wrap.ty01 {
  margin: 4px 0 21px;
  text-align: center;
}
.log-link-wrap.ty01 li {
  margin-right: 17px;
}
.log-link-wrap.ty01 li:last-child {
  margin-right: 0;
}
.log-link-wrap.ty02 {
  margin-top: 1px;
}
.log-link-wrap.ty02 li {
  margin-right: 10px;
}

.login-bottom {
  border-top: 1px solid var(--disable-clr);
  border-bottom: 1px solid var(--disable-clr);
  padding: 40px 79px 40px 71px;
}

.log-bottom-title {
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 10px;
}

.log-bottom-txt {
  font-size: 14px;
}

.log-btn-wrap {
  width: 250px;
}
.log-btn-wrap .btn-sm-wh {
  margin-right: 10px;
}
.log-btn-wrap .btn-sm-wh:last-child {
  margin-right: 0;
}
.log-btn-wrap .btn-sm-wh.bg-color01 {
  border: 0;
  background-color: var(--main-clr);
  color: var(--bg-clr2);
}

/*----------------------------------------*\
  || 아이디 찾기
\*----------------------------------------*/
.link-box-wrap {
  margin-top: 50px;
  border-top: 1px solid var(--disable-clr);
}

.link-box {
  width: 50%;
  float: left;
  padding: 40px;
}
.link-box .box-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
}
.link-box .box-txt {
  font-size: 14px;
  line-height: 22px;
  word-break: keep-all;
}

.link-txt-box {
  width: 350px;
  float: left;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .login-box-wrap {
    margin-top: 0;
    border-top: none;
  }
  html.responsive .m-none {
    display: none;
  }
  html.responsive .login-box.login-box-m {
    width: 100%;
    background: var(--bg-clr2);
    padding: 0 15px;
  }
  html.responsive .login-box.login-box-m .login-sub-title {
    display: none;
  }
  html.responsive .login-center {
    width: 100%;
    margin-bottom: 10px;
  }
  html.responsive .login-center .btn-log {
    width: 100%;
    margin-top: 30px;
  }
  html.responsive .login-center button,
  html.responsive .login-center input {
    margin-top: 20px;
  }
}
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .log-radio .radio-box-wrap {
    float: left;
    margin-bottom: 10px;
  }
  .log-radio .log-radio-title {
    margin-bottom: 15px;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/* 금리인하 신청 결과 동의 */
.consent-txt {
  width: 100%;
  margin: 26px 0 20px;
  text-align: center;
  font-size: 21px;
}

.no-info {
  padding: 50px 0;
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid var(--disable-clr);
  text-align: center;
  font-size: 16px;
}

/*----------------------------------------*\
  || 약관동의 Top Notice
\*----------------------------------------*/
.slide-notice-wrap {
  background: #fcfcfc;
  border-bottom: 1px solid var(--disable-clr);
  margin-top: 0;
  padding: 20px;
}
.slide-notice-wrap .notice-i-list-wrap {
  margin-top: 0;
}

/*----------------------------------------*\
  || 대출 심사 결과
\*----------------------------------------*/
.divi-styl {
  overflow: hidden;
  background: var(--bg-clr2);
  padding: 30px 0;
}
.divi-styl:before {
  position: absolute;
  top: 9px;
  left: 0;
  content: "";
  display: inline-block;
  width: 1px;
  height: 30px;
  background: var(--line-clr3);
}
.divi-styl:last-child {
  margin-right: 0;
  padding-right: 0;
}
.divi-styl:first-child:before {
  background: none;
}
.divi-styl li {
  display: inline-block;
  position: relative;
  width: 24.5%;
  text-align: center;
}
.divi-styl li .divi-stylop {
  font-size: 18px;
  font-weight: 500;
  display: block;
  margin-top: 14px;
}
.divi-styl li .divi-styl.type01 li {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 40px;
  text-align: left;
  font-size: 14px;
}

/*----------------------------------------*\
  || PEY 추가 대출
\*----------------------------------------*/
.notice-area-wrap {
  padding-bottom: 60px;
}

.notice-area-wrap .notice-box li {
  background: #f7f7f7;
  padding: 40px;
  margin-bottom: 30px;
}
.notice-area-wrap .notice-box li:last-child {
  margin-bottom: 0;
}

.notice-area-wrap .notice-box li .notice-number,
.notice-txtbox .notice-number {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 60px;
  font-weight: 500;
  font-size: 24px;
  vertical-align: middle;
}

.notice-txtbox {
  display: flex;
  align-items: center;
}
.notice-txtbox .notice-number {
  width: auto;
}
.notice-txtbox .notice-number::after {
  content: "";
  width: 1px;
  height: 14px;
  background: #e1e1e1;
  vertical-align: middle;
}
.notice-txtbox .table-cell {
  font-size: 14px;
}

.notice-subtxt,
.notice-titletxt {
  display: table-cell;
  vertical-align: middle;
  font-size: 20px;
  line-height: 25px;
}

.notice-titletxt {
  font-size: 24px;
  font-weight: 500;
}

.notice-box .notice-list {
  padding-top: 20px;
  background: transparent;
}
.notice-box .notice-list li {
  padding: 0 0 0 74px;
  margin-bottom: 0;
}
.notice-box .notice-list .notice-list li {
  padding-left: 10px;
}
.notice-box.notis .notice-list li {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 25px;
}
.notice-box.notis .notice-list li:last-child {
  margin-bottom: 0;
}
.notice-box.notis .notice-list li .fir-line {
  line-height: 28px;
}

.notice-number.no-title {
  font-size: 22px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  .notice-area-wrap .notice-box > li {
    padding: 32px;
  }
  .notice-area-wrap .notice-box > li .notice-number,
  .notice-txtbox .notice-number {
    margin-top: 3px;
    font-size: 20px;
  }
  .notice-number:after {
    margin-top: 2px;
  }
  .notice-subtxt,
  .notice-titletxt {
    font-size: 16px;
  }
  .divi-styl li {
    display: inline-block;
    position: relative;
    width: 49.5%;
    text-align: center;
  }
  .divi-styl li:nth-child(3):before {
    display: none;
  }
  .divi-styl li .divi-stylop {
    margin-bottom: 14px;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  || 랜딩페이지
\*----------------------------------------*/
.table-type01.ods td {
  padding: 30px 30px 27px !important;
  text-align: left;
}
.table-type01.ods .product-title {
  padding-top: 26px;
}
.table-type01.ods .product-txt02 {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  line-height: 20px;
}
.table-type01.ods .ico-internet {
  letter-spacing: 1px;
}

.ods-boxstyle01 {
  width: 100%;
  margin-top: 40px;
  padding: 20px 20px 18px;
  border: 1px solid var(--line-clr2);
  font-size: 16px;
  line-height: 24px;
  border-radius: 14px;
}

.ods-text {
  margin-top: 10px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
/*190530 ie 대응 수정*/
.i-top {
  width: 195px;
  vertical-align: middle;
}

/*190531 ie 대응 및 수정*/
.faq-tab .slide-box-area.type02.qna .slide-box-top .sub-title {
  margin: 23px 0;
}

/*----//190531 ie 대응 및 수정-----*/
/*190311 현정 예적금 추가*/
/*타이틀 옆 리스트*/
.process-step.long li {
  width: 115px;
}

/* Layer Select */
.selectBox {
  display: inline-block;
  position: relative;
  min-width: 150px;
  height: 35px;
  text-align: left;
  cursor: pointer;
  background-color: var(--bg-clr2);
}

.selectBox a {
  display: block;
  padding: 0px 10px;
  font-size: 12px;
  line-height: 33px;
  color: var(--disable-clr);
  background-color: var(--body-clr);
}

.selectBox .selectVal {
  height: 35px;
  line-height: 35px;
  border: 1px solid #666;
}

.selectBox .selectVal a {
  background: var(--body-clr) url(/img/common/icon_select_fff.png) right center/13px 7px no-repeat;
  vertical-align: middle;
}

.selectBox .selectVal a:focus {
  color: var(--bg-clr2);
  background-color: var(--neg-clr);
}

.selectBox .selectMenu {
  display: none;
  position: absolute;
  left: 0;
  z-index: 100;
  width: 100%;
  border: 1px solid #222;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.selectBox.up .selectMenu {
  bottom: 35px;
  border-bottom: 0px;
}

.selectBox.down .selectMenu {
  top: 35px;
  border-top: 0px;
}

.selectBox.on .selectMenu {
  display: inline-block;
  display: inline;
  zoom: 1;
}

.selectBox .selectMenu li:hover a {
  background-color: #ebebeb;
}

.selectBox .selectMenu li a {
  border-bottom: 1px solid #666;
}

.selectBox .selectMenu li:last-child a {
  border-bottom: 0;
}

.selectBox .selectMenu li a:focus {
  background-color: var(--neg-clr);
}

/*=============================================*/
/*=============================================*/
/*=============================================*/
/*=============================================*/
/*=============================================*/
/* layer popup */
.layer-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
  opacity: 0;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  text-align: center;
}

.layer-wrap::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.layer-container {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.2;
  white-space: normal;
  background: var(--bg-clr2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 인뱅 푸터 문제 임시방안 */
.height-auto .js-content-zoom-wrap {
  height: auto !important;
}

/* 조직도 */
/* 인재채용 */
.tab-basic .talent-wrap {
  margin-top: 40px;
}

.talent-title {
  font-size: 22px;
  line-height: 26px;
  margin: 40px 0 10px;
}

.talent-title:first-child {
  margin-top: 0;
}

.talent-text {
  font-size: 16px;
  line-height: 28px;
  color: #666;
  font-weight: 400;
}

.talent-icon-list::after {
  content: "";
  display: table;
  clear: both;
}

.talent-icon-list {
  border: 1px solid var(--line-clr3);
  position: relative;
}

.talent-icon-list::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 33.3%;
  right: 33.3%;
  bottom: 0;
  border: 1px solid var(--line-clr3);
  border-width: 0 1px;
}

.talent-icon-list-item {
  width: 33.3%;
  float: left;
  box-sizing: border-box;
  padding: 30px 0 28px;
  text-align: center;
  word-wrap: break-word;
  word-break: keep-all;
}

.talent-icon-list-item:nth-child(3n-1) {
  width: 33.4%;
}

.talent-icon-list-item:nth-child(3n+1) {
  clear: both;
}

.talent-icon-list-item:nth-child(3) ~ .talent-icon-list-item {
  border-top: 1px solid var(--line-clr3);
}

.talent-icon-list-item::before {
  content: "";
  display: block;
  width: 130px;
  height: 130px;
  margin: 0 auto 15px;
  border-radius: 100%;
  background: no-repeat 50% 50% #efefef;
}

.talent-icon-list-item-type1::before {
  background-image: url(/img/hss_content/hps/talent-icon-01.png);
}

.talent-icon-list-item-type2::before {
  background-image: url(/img/hss_content/hps/talent-icon-02.png);
}

.talent-icon-list-item-type3::before {
  background-image: url(/img/hss_content/hps/talent-icon-03.png);
}

.talent-icon-list-item-type4::before {
  background-image: url(/img/hss_content/hps/talent-icon-04.png);
}

.talent-icon-list-item-type5::before {
  background-image: url(/img/hss_content/hps/talent-icon-05.png);
}

.talent-icon-list-item-type6::before {
  background-image: url(/img/hss_content/hps/talent-icon-06.png);
}

.talent-icon-list-item-type7::before {
  background-image: url(/img/hss_content/hps/talent-icon-07.png);
}

.talent-icon-list-item-type8::before {
  background-image: url(/img/hss_content/hps/talent-icon-08.png);
}

.talent-icon-list-item-type9::before {
  background-image: url(/img/hss_content/hps/talent-icon-09.png);
}

.talent-icon-list-item-type10::before {
  background-image: url(/img/hss_content/hps/talent-icon-10.png);
}

.talent-icon-list-title {
  display: block;
  padding: 0 30px;
  margin-bottom: 6px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
}

.talent-icon-list-text {
  display: block;
  padding: 0 30px;
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: #666;
  font-weight: 400;
}

.talent-left-title-list {
  margin: 30px 0;
}

.talent-left-title-list-item + .talent-left-title-list-item {
  border-top: 1px solid var(--line-clr3);
}

.talent-left-title-list-item {
  padding: 33px 0 33px 245px;
  word-wrap: break-word;
  word-break: keep-all;
}

.talent-left-title-list-item::after {
  content: "";
  display: table;
  clear: both;
}

.talent-left-title-list-title {
  display: block;
  float: left;
  margin-left: -245px;
  width: 230px;
  font-size: 20px;
  line-height: 36px;
  font-weight: 500;
}

.talent-left-title-list-text {
  display: block;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: #666;
}

.talent-info-list {
  margin: 30px 0 90px -70px;
  font-size: 0;
  line-height: 0;
  text-align: center;
}

.talent-info-list-item {
  display: inline-block;
  width: 320px;
  margin-left: 70px;
  text-align: left;
  word-wrap: break-word;
  word-break: keep-all;
  vertical-align: top;
}

.talent-info-list-item:nth-child(3) ~ .talent-info-list-item {
  margin-top: 70px;
}

.talent-info-list-title {
  display: block;
  padding: 0 20px;
  height: 216px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  color: var(--bg-clr2);
  background: no-repeat 50% 0;
  text-shadow: 1px 3px 3px #000;
}

.talent-info-list-num {
  display: block;
  padding: 85px 0 8px;
  font-size: 48px;
  line-height: 50px;
  font-weight: 500;
  color: var(--bg-clr2);
}

.talent-info-list-text {
  display: block;
  padding: 16px 20px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  border: 1px solid var(--disable-clr);
  box-sizing: content-box;
  min-height: 96px;
}

.talent-icon-list.type01 {
  border-bottom: 0;
  border-right: 0;
}

.talent-icon-list.type01 .talent-icon-list-item {
  border-top: 0;
  border-bottom: 1px solid var(--line-clr3);
}

.talent-icon-list.type01 .talent-icon-list-item:nth-child(3n) {
  border-right: 1px solid var(--line-clr3);
}

@media (max-width: 1200px) {
  .talent-icon-list.type01 {
    border-bottom: 1px solid var(--line-clr3);
  }
  .talent-icon-list.type01 .talent-icon-list-item {
    border-right: 1px solid var(--line-clr3);
  }
}
/* 스타 저축은행 */
.talent-icon-list.star-bank .talent-icon-list-item-type1::before {
  background-image: url(/img/hss_companycontent/star_content/talent-icon-01.png);
}

.talent-icon-list.star-bank .talent-icon-list-item-type2::before {
  background-image: url(/img/hss_companycontent/star_content/talent-icon-02.png);
}

.talent-icon-list.star-bank .talent-icon-list-item-type3::before {
  background-image: url(/img/hss_companycontent/star_content/talent-icon-03.png);
}

/* 키움예스 저축은행*/
.talent-icon-list.kiumyes-bank::before {
  z-index: 1;
}

.talent-icon-list.kiumyes-bank .talent-icon-list-item-type1::before {
  background-image: url(/img/hss_companycontent/kiumyes_content/talent-icon-01.png);
}

.talent-icon-list.kiumyes-bank .talent-icon-list-item-type2::before {
  background-image: url(/img/hss_companycontent/kiumyes_content/talent-icon-02.png);
}

.talent-icon-list.kiumyes-bank .talent-icon-list-item-type3::before {
  background-image: url(/img/hss_companycontent/kiumyes_content/talent-icon-03.png);
}

/* 고려 저축은행 */
.talent-wrap.goryeo-bank .talent-sub-title {
  font-size: 36px;
  text-align: center;
}

.talent-icon-list.goryeo-bank {
  border: 0;
}

.talent-icon-list.goryeo-bank::before {
  display: none;
}

.talent-icon-list.goryeo-bank .talent-icon-list-item {
  width: 25%;
  float: left;
  box-sizing: border-box;
  padding: 30px 0 28px;
  border: 0;
  text-align: center;
  word-wrap: break-word;
  word-break: keep-all;
  clear: none;
}

.talent-icon-list.goryeo-bank .talent-icon-list-item:nth-child(4n+1) {
  clear: both;
}

.talent-icon-list.goryeo-bank .talent-icon-list-item:nth-child(4) ~ .talent-icon-list-item {
  border-top: 1px solid var(--line-clr3);
}

.talent-icon-list.goryeo-bank .talent-icon-list-item::before {
  width: 200px;
  height: 200px;
  margin-bottom: 40px;
  background-color: transparent;
  border-radius: 0;
}

.talent-icon-list.goryeo-bank .talent-icon-list-item-type1::before {
  background-image: url(/img/hss_companycontent/goryeo_content/talent-icon-01.png);
}

.talent-icon-list.goryeo-bank .talent-icon-list-item-type2::before {
  background-image: url(/img/hss_companycontent/goryeo_content/talent-icon-02.png);
}

.talent-icon-list.goryeo-bank .talent-icon-list-item-type3::before {
  background-image: url(/img/hss_companycontent/goryeo_content/talent-icon-03.png);
}

.talent-icon-list.goryeo-bank .talent-icon-list-item-type4::before {
  background-image: url(/img/hss_companycontent/goryeo_content/talent-icon-04.png);
}

.talent-icon-list.goryeo-bank .talent-icon-list-title {
  margin-bottom: 15px;
  font-size: 34px;
  color: #9f8438;
}

.talent-icon-list.goryeo-bank .talent-icon-list-title span {
  display: block;
  margin-top: 10px;
  font-size: 18px;
}

.talent-icon-list.goryeo-bank .talent-icon-list-text {
  line-height: 25px;
}

/* 모아 저축은행*/
.sub-text02 {
  margin-top: 7px;
  color: #666;
  font-size: 16px;
  line-height: 30px;
}

.sub-text02 + .talent-icon-list {
  margin-top: 25px;
}

/* 스마트 저축은행 */
.talent-icon-list.type-smart {
  display: flex;
}

.talent-icon-list.type-smart::before {
  display: none;
}

.talent-icon-list.type-smart .talent-icon-list-item {
  float: none;
  width: 20%;
}

.talent-icon-list.type-smart .talent-icon-list-item:nth-child(3) ~ .talent-icon-list-item {
  border: 0;
}

.talent-icon-list.type-smart .talent-icon-list-item-type1::before {
  background-image: url(/img/hss_companycontent/smart_content/talent-icon-01.png);
  background-size: 70px;
}

.talent-icon-list.type-smart .talent-icon-list-item-type2::before {
  background-image: url(/img/hss_companycontent/smart_content/talent-icon-02.png);
  background-size: 70px;
}

.talent-icon-list.type-smart .talent-icon-list-item-type3::before {
  background-image: url(/img/hss_companycontent/smart_content/talent-icon-03.png);
  background-size: 70px;
}

.talent-icon-list.type-smart .talent-icon-list-item-type4::before {
  background-image: url(/img/hss_companycontent/smart_content/talent-icon-04.png);
  background-size: 70px;
}

.talent-icon-list.type-smart .talent-icon-list-item-type5::before {
  background-image: url(/img/hss_companycontent/smart_content/talent-icon-05.png);
  background-size: 70px;
}

.talent-info-list.type-smart .talent-info-list-title {
  text-shadow: none;
  color: #000;
}

.talent-info-list.type-smart .talent-info-list-num {
  color: #ed6408;
}

.talent-icon-list.smart-bank .talent-icon-list-title {
  font-size: 20px;
  color: var(--body-clr);
  line-height: 36px;
}

@media (max-width: 768px) {
  .talent-icon-list.type-smart {
    flex-direction: column;
  }
  .talent-icon-list.type-smart .talent-icon-list-item {
    width: 100%;
    border-bottom: 1px solid var(--disable-clr) !important;
  }
}
/* 인천 저축은행 */
.talent-icon-list.type02 {
  display: flex;
}

.talent-icon-list.type02::before {
  content: none;
  display: none;
}

.talent-icon-list.type02 .talent-icon-list-item {
  flex: 1;
  width: 25%;
}

.talent-icon-list.type02 .talent-icon-list-item {
  border-left: 1px solid var(--line-clr3);
}

.talent-icon-list.type02 .talent-icon-list-item:first-child {
  border-left: none;
}

.talent-icon-list.type02 .talent-icon-list-item:nth-child(3n+1) {
  clear: initial;
}

.talent-icon-list.type02 .talent-icon-list-item:nth-child(3) ~ .talent-icon-list-item {
  border-top: none;
}

.talent-icon-list.type02 .talent-icon-list-text {
  padding: 0 10px;
}

.talent-icon-list .incheon-bank.talent-icon-list-item-type1::before {
  background-image: url(/img/hss_companycontent/incheon_content/talent-icon-01.png);
}

.talent-icon-list .incheon-bank.talent-icon-list-item-type3::before {
  background-image: url(/img/hss_companycontent/incheon_content/talent-icon-02.png);
}

.talent-icon-list .incheon-bank.talent-icon-list-item-type4::before {
  background-image: url(/img/hss_content/hps/talent-icon-03.png);
}

.talent-icon-list .incheon-bank02.talent-icon-list-item-type7::before {
  background-image: url(/img/hss_content/hps/talent-icon-10.png);
}

.talent-icon-list .incheon-bank02.talent-icon-list-item-type10::before {
  background-image: url(/img/hss_content/hps/talent-icon-07.png);
}

.talent-icon-list .incheon-bank02.talent-icon-list-item-type11::before {
  background-image: url(/img/hss_content/hps/talent-icon-11.png);
}

@media (max-width: 1200px) {
  .talent-icon-list.type02 {
    display: block;
  }
  .talent-icon-list.type02 .talent-icon-list-item {
    width: 100%;
    border-left: none;
  }
}
/* 진주 저축은행 */
.talent-icon-list .jinju-bank.talent-icon-list-item-type1::before {
  background-image: url(/img/hss_companycontent/jinju_content/talent-icon-01.png);
}

.talent-icon-list .jinju-bank.talent-icon-list-item-type2::before {
  background-image: url(/img/hss_companycontent/jinju_content/talent-icon-02.png);
}

.talent-icon-list .jinju-bank.talent-icon-list-item-type3::before {
  background-image: url(/img/hss_companycontent/jinju_content/talent-icon-03.png);
}

.talent-icon-list .jinju-bank.talent-icon-list-item-type4::before {
  background-image: url(/img/hss_companycontent/jinju_content/talent-icon-04.png);
}

.talent-icon-list-item.jinju-bank::before {
  margin: 0 auto 30px;
}

.talent-icon-list-item.jinju-bank .talent-icon-list-title {
  padding: 0 20px;
}

/* 한국투자 저축은행 */
.talent-icon-list .koreatuja-bank.talent-icon-list-item-type1::before {
  background-image: url(/img/hss_companycontent/koreatuja_content/talent-icon-01.png);
}

.talent-icon-list .koreatuja-bank.talent-icon-list-item-type3::before {
  background-image: url(/img/hss_companycontent/koreatuja_content/talent-icon-03.png);
}

.talent-icon-list .koreatuja-bank.talent-icon-list-item-type4::before {
  background-image: url(/img/hss_companycontent/koreatuja_content/talent-icon-04.png);
}

.talent-icon-list .koreatuja-bank.talent-icon-list-item-type5::before {
  background-image: url(/img/hss_companycontent/koreatuja_content/talent-icon-05.png);
}

.talent-icon-list .koreatuja-bank.talent-icon-list-item-type6::before {
  background-image: url(/img/hss_companycontent/koreatuja_content/talent-icon-06.png);
}

.talent-icon-list .koreatuja-bank.talent-icon-list-item-type7::before {
  background-image: url(/img/hss_companycontent/koreatuja_content/talent-icon-07.png);
}

.talent-icon-list .koreatuja-bank.talent-icon-list-item-type8::before {
  background-image: url(/img/hss_companycontent/koreatuja_content/talent-icon-08.png);
}

.talent-icon-list .koreatuja-bank.talent-icon-list-item-type9::before {
  background-image: url(/img/hss_companycontent/koreatuja_content/talent-icon-09.png);
}

.talent-icon-list .talent-icon-list-item.koreatuja-bank .talent-icon-list-text {
  padding: 0 15px;
}

/* 금웅소비자보호헌장 */
.consumer-box {
  margin-top: 35px;
  padding: 82px 100px 72px 485px;
  background: #f7f7f7 url(/img/hss_common/img_ready.jpg) no-repeat 0 50%;
}

.consumer-box::after {
  content: "";
  display: block;
  clear: both;
}

.consumer-box .logo-box {
  display: none;
  float: left;
  width: 50%;
  padding-top: 18px;
}

.consumer-box .logo-box img {
  height: 77px;
}

.consumer-box .text-box {
  float: left;
  padding-left: 55px;
}

.consumer-box .text-box .text {
  font-size: 16px;
  color: #666;
  line-height: 28px;
  font-weight: 400;
}

.consumer-box .text-box .text strong {
  display: block;
  margin-bottom: 15px;
  font-size: 20px;
  color: var(--body-clr);
}

.consumer-list {
  margin-top: 45px;
}

.consumer-list li {
  font-size: 18px;
  font-weight: 400;
  line-height: 40px;
}

.consumer-list li strong {
  margin-right: 25px;
  color: var(--main-clr);
}

.consumer-box.insung-bank {
  margin-top: 35px;
  padding: 82px 100px 72px 485px;
  background: #f7f7f7 url(/img/hss_content/ptc_151.png) no-repeat 40px 50%;
}

/*20201008 김재원 추가*/
/* 한국투자저축은행 */
.consumer-box.koreatuja-bank {
  margin-top: 35px;
  padding: 82px 123px 72px 550px;
  background: #f7f7f7 url(/img/hss_companycontent/koreatuja_content/img_koreatuja_logo.png) no-repeat 40px 50%;
}

/* 모아저축은행 */
.consumer-box.moa-bank {
  margin-top: 35;
  padding: 52px 123px 42px 550px;
  background-image: url(/img/hss_companycontent/moa_content/img_consumer_logo.png);
  background-position: 7%;
}

.consumer-box.moa-bank .text-box {
  padding: 0;
}

.consumer-box.moa-bank .text {
  word-break: keep-all;
}

/* 바로저축은행 */
.consumer-box.baro-bank {
  margin-top: 35px;
  padding: 82px 123px 72px 550px;
  background: #f7f7f7 url(/img/hss_companycontent/baro_content/img_baro_logo.png) no-repeat 105px 50%;
}

/* 민국저축은행 */
.consumer-box.minguk-bank {
  margin-top: 0;
  padding: 52px 90px 42px 433px;
  background-image: url(/img/hss_companycontent/minguk_content/img_consumer_logo.png);
  background-position: 16%;
}

@media (max-width: 1200px) {
  .consumer-box {
    margin-top: 30px !important;
    padding: 82px 50px 72px 390px !important;
    background-size: 270px !important;
  }
  .consumer-box.baro-bank {
    background-size: 200px !important;
  }
  /* 바로 저축은행 */
  .consumer-box.minguk-bank {
    background-size: 140px !important;
  }
  /* 민국 저축은행 */
}
@media (max-width: 768px) {
  .consumer-box {
    padding: 70px 20px 20px !important;
    background-position: 50% 20px !important;
    background-size: 190px !important;
  }
  .consumer-box.baro-bank {
    background-size: 150px !important;
  }
  /* 바로 저축은행 */
  .consumer-box.minguk-bank {
    padding-top: 50px !important;
    background-size: 130px !important;
  }
  /* 민국 저축은행 */
}
/* 금융소비자보호조직도 */
.organ-wrap.style02 .organ-wp {
  width: 433px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.organ-wrap.style02 {
  margin-top: 20px;
}

/* mobile */
@media (max-width: 1200px) {
  /* 금웅소비자보호헌장 */
  .consumer-box {
    padding: 20px;
  }
  .consumer-box .logo-box {
    float: none;
    width: 100%;
    padding-top: 0;
  }
  .consumer-box .logo-box img {
    height: 30px;
  }
  .consumer-box .text-box {
    float: none;
    width: 100%;
    margin-top: 10px;
    padding-left: 0;
  }
  .consumer-box .text-box .text {
    font-size: 14px;
    line-height: 26px;
  }
  .consumer-box .text-box .text strong {
    margin-bottom: 10px;
    font-size: 17px;
  }
  .consumer-list {
    margin-top: 30px;
    padding-left: 44px;
  }
  .consumer-list li {
    font-size: 14px;
    line-height: 25px;
    text-indent: -39px;
  }
  .consumer-list li strong {
    margin-right: 8px;
  }
  /* 금융소비자보호조직도 */
  .organ-wrap.style02 .organ-wp {
    width: auto;
    display: block;
  }
  .organ-wrap.style02 .organ-area h5 {
    width: 100px;
  }
  /* 인재채용 */
  .talent-wrap {
    margin-top: 20px;
  }
  .talent-icon-list .talent-icon-list-item {
    border-bottom: 1px solid var(--disable-clr);
  }
  .talent-icon-list .talent-icon-list-item:last-child {
    border-bottom: none;
  }
  .talent-icon-list-item {
    width: 100%;
    float: none;
  }
  .talent-icon-list::before {
    border: 0;
  }
  .talent-icon-list-item:nth-child(3n-1) {
    width: auto;
  }
  .talent-left-title-list-item {
    padding-left: 0;
  }
  .talent-left-title-list-title {
    float: none;
    margin-left: 0;
  }
  .talent-info-list-item {
    margin-top: 20px;
  }
  .kdicbox-wrap {
    margin-top: 30px !important;
  }
}
@media (max-width: 1200px) {
  .organ-wrap {
    margin-top: 20px;
  }
}
/* 금융거래 유의사항,약관,이용사항 등의 텍스트정보페이지 */
.common-titlestyle01 {
  margin-top: 39px;
  color: var(--body-clr);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
}

.common-titlestyle01:first-child {
  margin-top: 0px;
}

.common-titlestyle02 {
  margin-top: 30px;
  color: var(--body-clr);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.common-titlestyle02 + .table-wrap01 {
  margin-top: 10px;
}

.noticestyle-list01 li {
  margin-top: 20px;
  color: var(--body-clr);
  font-size: 16px;
  line-height: 1.5;
}

.noticestyle-list01 li:first-child {
  margin-top: 25px;
}

.common-textstyle01 {
  margin: 0 0 0 16px;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
}

.common-textstyle02 {
  margin-top: 2px;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
}

.common-textstyle03 {
  margin-top: 2px;
  color: var(--body-clr);
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
}

.common-textstyle03 + .notice-list-wrap {
  margin-top: 5px;
}

.common-textstyle03 a {
  display: inline-block;
}

.common-liststyle01 {
  font-size: 16px;
  line-height: 1.8em;
  padding-bottom: 6px;
  padding-left: 15px;
  font-weight: 400;
}

.common-liststyle01::before {
  content: "";
  float: left;
  margin-left: -15px;
  margin-top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #999;
}

.common-liststyle02 {
  display: block;
  position: relative;
  margin-top: 31px;
  padding: 0 0 0 27px;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
}

.common-liststyle02:first-child {
  margin-top: 2px;
}

.common-liststyle02::after {
  content: " ";
  position: absolute;
  top: 14px;
  left: 16px;
  display: block;
  width: 7px;
  background: #696969;
}

.common-liststyle01 .common-liststyle02 {
  margin: 2px 0 0 -16px;
  padding-left: 13px;
}

.common-list-instyle01 {
  margin: 31px 0 0 -16px;
}

.common-list-instyle01 li {
  padding: 0 0 0 16px;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
  text-indent: -16px;
}

.common-titlestyle01 + .complaint-process {
  margin-top: 20px;
  margin-bottom: 0;
}

.common-titlestyle01 + .notice-list-wrap {
  margin-top: 10px;
}

@media (max-width: 1200px) {
  .common-titlestyle01 {
    font-size: 19px;
  }
}
.process-img img {
  max-width: 100%;
}

/* 예금자보호법 */
.kdicbox-wrap {
  overflow: hidden;
  width: 100%;
  margin-top: 65px;
  padding: 30px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #f7f7f7;
}

.kdicbox-wrap .imgbox {
  float: left;
  font-size: 0;
  line-height: 0;
}

.kdicbox-wrap .info {
  float: left;
  margin: 5px 0 0 41px;
}

.kdicbox-wrap .info dt {
  color: #666;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.kdicbox-wrap .info dt .str {
  color: var(--neg-clr);
}

.kdicbox-wrap .info dd {
  color: #666;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.deposit-box {
  margin-top: 20px;
  font-size: 0;
  line-height: 0;
}

@media (max-width: 1200px) {
  .kdicbox-wrap .info {
    clear: both;
    margin: 20px 0 0 0;
  }
  .deposit-box .mobile {
    display: block;
  }
  .deposit-box .pc {
    display: none;
  }
}
.arsguide-box {
  overflow: hidden;
  width: 100%;
  margin-top: 40px;
}

.arsguide-box .table-wrap01 {
  margin-top: 7px;
}

.arsguide-box .type01 {
  float: left;
  width: 530px;
}

.arsguide-box .type01 td,
.arsguide-box .type02 td {
  text-align: left;
}

.arsguide-box .type02 {
  float: right;
  width: 540px;
}

.bbc-line {
  border-bottom-color: var(--disable-clr) !important;
}

@media (max-width: 1200px) {
  .arsguide-box .type01 {
    margin-bottom: 40px;
  }
  .arsguide-box .type02 {
    margin-top: 20px;
    float: none;
  }
}
/* 신안카드 */
.checkcash-cards li {
  position: relative;
  min-height: 160px;
  padding: 40px 180px 30px 331px;
  border-bottom: 1px solid var(--line-clr3);
  background-repeat: no-repeat;
  background-position: 20px 30px;
  -webkit-box-sizing: initial;
  box-sizing: initial;
}

.checkcash-cards li .title {
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 700;
}

.checkcash-cards li .benefits {
  margin-top: 14px;
  color: #666;
  font-size: 12px;
  font-weight: 700;
}

.checkcash-cards li .info {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
  font-weight: 400;
  line-height: 27px;
}

.checkcash-cards li .title + .info {
  margin-top: 35px;
}

.checkcash-cards li .link-box {
  position: absolute;
  right: 20px;
  bottom: 30px;
}

.checkcash-cards-new li .link-box {
  width: auto;
  float: none;
  padding: 0;
}

.checkcash-cards li .link-box .btn-style01 + .btn-style01 {
  margin-left: 7px;
}

.notice-i-list.color-red {
  color: var(--neg-clr);
}

.notice-list.type02 {
  margin: 10px 0 0 20px;
}

.alert-card-txt {
  display: inline-block;
  margin: 15px 0 0 20px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.checkcash-cards li .link-box .btn-style01 {
  cursor: pointer;
}

/* 신안카드 태블릿 */
@media (max-width: 1200px) {
  .checkcash-cards li {
    padding: 30px 20px 30px 331px;
  }
  .checkcash-cards li .title + .info {
    margin-top: 17px;
  }
  .checkcash-cards li .link-box {
    position: static;
    margin-top: 10px;
  }
}
/* 신안카드 모바일 */
@media (max-width: 768px) {
  .notice-list.type02 {
    margin: 10px 0 0 15px;
  }
  .notice-list.type02 li {
    font-size: 12px;
  }
  .notice-list.type02 li::before {
    content: "";
    float: left;
    margin-left: -10px;
    margin-top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #999;
  }
  .alert-card-txt {
    display: inline-block;
    margin: 10px 0 0 20px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
  }
  .checkcash-cards li {
    position: relative;
    min-height: 160px;
    padding: 200px 18px 18px;
    border-bottom: 1px solid var(--line-clr3);
    background-repeat: no-repeat;
    background-position: 20px 30px;
    background-size: auto 150px;
  }
  .checkcash-cards li .link-box {
    position: relative;
    right: 0;
    bottom: 0;
    margin-top: 20px;
  }
}
/* 경영이념 */
.management-philosophy-box {
  overflow: hidden;
  width: 100%;
  padding: 50px 100px 50px 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #efefef;
}

.management-philosophy dt {
  clear: both;
  float: left;
  width: 116px;
  padding-top: 40px;
  color: var(--body-clr);
  font-size: 14px;
  line-height: 35px;
}

.management-philosophy dd {
  margin-left: 116px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.management-philosophy dd.box-style01 {
  width: auto;
  overflow: hidden;
  height: 138px;
  padding: 0 20px;
  border-radius: 5px;
  background: #1b569a;
  text-align: center;
}

.management-philosophy dd.box-style01 .sub-title {
  display: block;
  margin-top: 27px;
  color: var(--bg-clr2);
  font-size: 18px;
}

.management-philosophy dd.box-style01 .sub-style01 {
  display: block;
  margin-top: 12px;
  color: var(--bg-clr2);
  font-size: 16px;
}

.management-philosophy dd.box-style01 .sub-style02 {
  display: block;
  margin-top: 24px;
  color: var(--bg-clr2);
  font-size: 14px;
}

.management-philosophy dd.box-style02 {
  width: auto;
  overflow: hidden;
  height: 105px;
  margin-top: 12px;
  padding: 0 20px;
  border-radius: 5px;
  border: 1px solid #1b569a;
  background: #e6e8ee;
  text-align: center;
}

.management-philosophy dd.box-style02 .sub-title {
  display: block;
  margin-top: 24px;
  color: var(--body-clr);
  font-size: 16px;
  line-height: 1.4;
}

.management-philosophy dd.box-style02 .sub-style01 {
  display: block;
  margin-top: 24px;
  color: var(--body-clr);
  font-size: 14px;
  line-height: 1.4;
}

.management-philosophy dd.box-style03 {
  width: auto;
  margin-top: 24px;
  padding: 0;
  background: none;
  overflow: hidden;
}

.management-philosophy dd .list {
  overflow: hidden;
  width: calc(100% + 7px);
  margin-left: -7px;
}

.management-philosophy dd .list li {
  float: left;
  width: 20%;
  padding-left: 7px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.management-philosophy dd .list li .mpsub-title {
  width: 100%;
  height: 50px;
  padding-top: 16px;
  border-radius: 5px;
  border: 1px solid #1b569a;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #e6e8ee;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.management-philosophy dd .list li .sub-text {
  width: 100%;
  height: 172px;
  margin-top: 10px;
  padding-top: 12px;
  border: 1px solid #1b569a;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--bg-clr2);
  color: var(--body-clr);
  font-size: 14px;
  text-align: center;
  line-height: 24px;
}

.management-philosophy dd .list li .sub-text .gap01 {
  display: block;
  line-height: 24px;
}

@media (max-width: 1200px) {
  .management-philosophy-box {
    margin-top: 30px;
  }
}
@media (max-width: 768px) {
  .management-philosophy dd.box-style01 .sub-style02 {
    margin-top: 10px;
    line-height: 1.5;
  }
  .management-philosophy dd.box-style02 .sub-style01 {
    margin-top: 10px;
  }
  .management-philosophy dd .list {
    width: 100%;
    margin: 0;
  }
  .management-philosophy dd .list li {
    overflow: hidden;
    width: 100%;
    float: none;
    margin-top: 30px;
    padding: 0;
  }
  .management-philosophy dd .list li:first-child {
    margin: 0;
  }
  .management-philosophy dd .list li .sub-text {
    padding: 0 10px;
  }
  .management-philosophy dd .list li .sub-text .gap01 {
    display: inline-block;
    line-height: 24px;
  }
  .management-philosophy dd .list li .sub-text {
    width: 100%;
    height: auto;
    padding: 20px;
  }
}
@media (max-width: 768px) {
  .management-philosophy dd.box-style01 .sub-style01 {
    line-height: 1.5;
  }
  .management-philosophy-box {
    padding: 20px 30px;
  }
  .management-philosophy dd.box-style01 {
    height: auto;
    padding-bottom: 24px;
  }
  .management-philosophy dd.box-style02 {
    height: auto;
    padding-bottom: 24px;
  }
}
@media (max-width: 768px) {
  .management-philosophy-box {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  .management-philosophy dt {
    float: none;
    margin-top: 20px;
    padding-top: 0;
    line-height: 1.5;
  }
  .management-philosophy dt:first-child {
    margin-top: 0;
  }
  .management-philosophy dd {
    margin: 0;
  }
  .management-philosophy dd[class*=box-style] {
    margin-top: 12px;
  }
}
.table-wrap01 + .notice-date {
  margin-top: 50px;
}

/* 금융소비자보호광장 */
.gate-list::after {
  content: "";
  clear: both;
  display: table;
}

.gate-list > li {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.gate-list > li.sum-list {
  width: 66.66%;
}

.gate-list > li.sum-list .notice-list-wrap {
  float: left;
  width: 50%;
}

.gate-list .cont-box {
  overflow: hidden;
  border: 1px solid var(--disable-clr);
}

.gate-list .gate-title {
  padding: 20px;
  font-size: 16px;
  border-bottom: 1px solid var(--disable-clr);
}

.gate-list .notice-list-wrap {
  padding: 20px;
  min-height: 290px;
}

@media (max-width: 768px) {
  .gate-list {
    margin-top: 40px;
  }
  .gate-list > li {
    float: none;
    width: 100%;
  }
  .gate-list > li.sum-list {
    width: 100%;
  }
  .gate-list .gate-title {
    padding: 15px;
    font-size: 14px;
  }
  .gate-list .notice-list-wrap {
    padding: 15px;
    height: auto;
  }
}
/* [공통]보호금융상품등록부 */
.protection-financial-product {
  padding: 59px 273px 51px 41px;
  background: #eeeff1 url(/img/hss_content/bg_money.gif) no-repeat right 50%;
  color: var(--body-clr);
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
}

.protection-financial-product .str {
  display: block;
  color: var(--main-clr);
  font-weight: 700;
}

.insurance-corporation-box {
  display: table;
  width: 100%;
  margin-top: 22px;
  padding: 21px 22px 21px 36px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #f7f7f7;
}

.insurance-corporation-box .img-box {
  display: table-cell;
  width: 134px;
  vertical-align: middle;
}

.insurance-corporation-box .list {
  display: table-cell;
  padding-left: 55px;
  vertical-align: middle;
}

.insurance-corporation-box .list li {
  color: #666666;
  font-size: 14px;
  line-height: 24px;
}

.protection-financial-product-box {
  width: 100%;
  margin-top: 50px;
  padding: 40px 30px 50px;
  border: 2px solid var(--disable-clr);
}

.protection-financial-product-box .title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.protection-financial-product-box .text {
  margin-top: 32px;
  font-size: 16px;
  line-height: 25px;
  text-align: left;
}

.protection-attachment-box {
  margin-top: 39px;
  position: relative;
  width: 100%;
  padding-left: 55px;
}

.protection-attachment-box .protection-attachment-title {
  position: absolute;
  top: 4px;
  left: 0;
  font-size: 16px;
  font-weight: 700;
}

.protection-attachment-box .attachment-list-text {
  color: #0a67b1;
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  text-align: left;
}

.protection-financial-sign {
  margin-top: 38px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 24px;
}

.protection-info-box {
  width: 100%;
  margin-top: 34px;
  padding: 24px 38px 20px;
  background: #f3f1ef;
  text-align: left;
}

.protection-info-box .protection-info-text {
  font-size: 14px;
  line-height: 25px;
}

.protection-info-text .str {
  color: #0a67b1;
}

.protection-info-text .str .underline {
  color: #0a67b1;
  text-decoration: underline;
  text-decoration-color: #0a67b1;
}

.protection-info-text .str .underline.link {
  display: inline-block;
}

.protection-info-text + .protection-info-list {
  margin-top: 21px;
  padding-top: 24px;
  border-top: 1px solid #d4d4d4;
}

.protection-financial-product.dh-bank .str {
  color: #0a67b1;
}

/* dh 저축은행 */
.protection-financial-product.goryeo-bank .str {
  color: #2e1263;
}

.protection-financial-product-box.goryeo-bank .protection-attachment-box .attachment-list-text {
  color: #2e1263;
}

.protection-financial-product-box.goryeo-bank .str,
.protection-financial-product-box.goryeo-bank .underline {
  color: #2e1263;
}

/* 고려 저축은행 */
@media (max-width: 1200px) {
  .protection-financial-product {
    margin-top: 30px;
  }
}
@media (max-width: 768px) {
  .protection-financial-product .str {
    display: inline-block;
  }
  .protection-financial-product {
    margin-top: 20px;
    padding: 33px 41px 29px 41px;
    background-image: none;
    font-size: 18px;
    line-height: 31px;
  }
  .insurance-corporation-box {
    margin-top: 30px;
    padding: 13px 22px 21px 18px;
  }
  .insurance-corporation-box .img-box,
  .insurance-corporation-box .list {
    display: block;
  }
  .insurance-corporation-box .list {
    padding-left: 6px;
  }
}
/* 대출신청안내 */
.steplist-box > li {
  overflow: hidden;
  display: table;
  width: 100%;
  margin-top: 20px;
}

.steplist-box li:first-child {
  margin-top: 0;
}

.steplist-box li .title {
  position: relative;
  display: table-cell;
  width: 275px;
  height: 89px;
  background: var(--main-clr);
  color: var(--bg-clr2);
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}

/* .steplist-box li .title::after {content:' ';position:absolute;top:50%;right:-14px;margin-top:-15px;width:14px;height:29px;background:url(/img/hss_content/com/bul_step_blue.png) no-repeat 0 0;} */
.steplist-box li .title .str {
  display: block;
  margin-bottom: 12px;
  color: var(--bg-clr2);
  font-size: 18px;
  font-weight: 700;
}

.steplist-box li .info {
  display: table-cell;
  height: 89px;
  padding-right: 20px;
  border-left: 34px solid var(--bg-clr2);
  background: #f7f7f7;
  vertical-align: middle;
}

.steplist-box li .text {
  position: relative;
  padding-left: 44px;
  color: var(--body-clr);
  font-size: 16px;
  line-height: 36px;
}

/* .steplist-box li .text::after {content:'';display:block;position:absolute;top:48%;left:28px;width:5px;height:5px;border-radius:50%;background:#999999;} */
.steplist-box li .text::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border-radius: 50%;
  background: #999999;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .steplist-box > li {
    display: block;
  }
  .steplist-box li .title {
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
    text-align: left;
  }
  .steplist-box li .title .str {
    display: inline-block;
    margin: 0 5px 0 0;
    font-size: 16px;
  }
  .steplist-box li .info {
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
    border: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .steplist-box li .info .text {
    padding: 0;
  }
  .steplist-box li .text {
    line-height: 1.5;
  }
  .steplist-box li .text::after {
    display: none;
  }
}
/* 대출유의사항 */
.tts + .common-guideinfo {
  margin-top: 40px;
}

.common-guideinfo {
  padding: 55px 322px 47px 41px;
  background: #eeeff1 url(/img/hss_content/bg_money02.png) no-repeat right 32px top 50%;
  color: var(--body-clr);
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
}

.common-guideinfo + .bond-list01 {
  margin-top: 50px;
}

.common-guideinfo .str {
  display: block;
  color: var(--main-clr);
  font-weight: 700;
  line-height: 32px;
}

@media (max-width: 768px) {
  .common-guideinfo {
    padding: 33px 41px 29px 41px;
    background-image: none;
    font-size: 18px;
    line-height: 31px;
  }
  .common-guideinfo + .bond-list01 {
    margin-top: 20px;
  }
  .common-guideinfo + .bond-list01 .bond-textstyle01 {
    font-size: 14px;
    line-height: 22px;
  }
}
/* [공통] 전자민원신청 */
.complaint-process {
  margin-bottom: 75px;
  padding: 40px 10px;
  border: 1px solid var(--line-clr3);
}

.complaint-process ol {
  display: table;
  width: 100%;
}

.complaint-process ol li {
  display: table-cell;
  width: 20%;
  text-align: center;
  position: relative;
}

.complaint-process ol li::after {
  content: "";
  display: block;
  width: 21px;
  height: 40px;
  position: absolute;
  top: 47px;
  right: -10px;
  background: url(/img/hss_content/bg_apply_arrow.png) no-repeat 0 0;
}

.complaint-process ol li:last-child::after {
  background: none;
}

.complaint-process ol li p {
  padding-top: 146px;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  background-position: 50% 0;
  background-repeat: no-repeat;
}

.complaint-process ol li p > span {
  font-size: 14px;
}

.complaint-process ol li p.pcs-type1 {
  background-image: url(/img/hss_content/bg_applyimg01.png);
}

.complaint-process ol li p.pcs-type2 {
  background-image: url(/img/hss_content/bg_applyimg02.png);
}

.complaint-process ol li p.pcs-type3 {
  background-image: url(/img/hss_content/bg_applyimg03.png);
}

.complaint-process ol li p.pcs-type4 {
  background-image: url(/img/hss_content/bg_applyimg04.png);
}

.complaint-process ol li p.pcs-type5 {
  background-image: url(/img/hss_content/bg_applyimg05.png);
}

.complaint-process ol li .txt {
  display: block;
  margin-top: 10px;
  padding: 0 10px;
  font-size: 14px;
  text-align: left;
  line-height: 20px;
}

/* 키움예스 대출신청절차 */
.sub-text01 {
  margin-top: 7px;
  color: var(--body-clr);
  font-size: 16px;
  line-height: 25px;
}

.sub-text01 + .complaint-process {
  margin-top: 16px;
}

.sub-text01 + .protectinfo-img-box {
  margin-top: 20px;
}

.complaint-process.kiumyes-bank {
  padding: 25px 10px 26px;
}

.complaint-process.kiumyes-bank .pcs-type4 {
  color: #00397c;
}

.complaint-process.kiumyes-bank .pcs-type5 {
  padding-top: 154px;
  background-image: url(/img/hss_companycontent/kiumyes_content/bg_applyimg05.png);
  background-position: 50% 0;
  color: #00397c;
}

@media (max-width: 1200px) {
  .complaint-process.kiumyes-bank li:nth-child(4)::after {
    top: 75px;
  }
}
@media (max-width: 768px) {
  .complaint-process.kiumyes-bank li:nth-child(4)::after {
    top: auto;
  }
}
.terms-wrap .terms-title {
  line-height: 24px;
}

.terms-wrap .terms-box strong {
  font-weight: 400;
}

.complaint-popup.str-searPop {
  width: 850px;
}

.complaint-complete {
  padding: 90px 0 40px;
}

.complaint-complete .com-wp {
  display: table;
  width: 100%;
  padding-left: 90px;
  padding-bottom: 30px;
  text-align: left;
  border-bottom: 1px solid var(--disable-clr);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.complaint-complete .com-wp .img-box {
  display: table-cell;
  vertical-align: top;
}

.complaint-complete .com-wp .txt-box {
  display: table-cell;
  vertical-align: top;
  padding-left: 35px;
}

.complaint-complete .com-wp .txt-box h4 {
  color: var(--body-clr);
  font-size: 40px;
  font-weight: 400;
}

.complaint-complete .com-wp .txt-box p {
  margin-top: 30px;
  color: #666;
  font-size: 18px;
  line-height: 24px;
}

.complaint-complete .com-wp .txt-box p strong {
  color: var(--body-clr);
  font-size: 18px;
  font-weight: 400;
}

.complaint-complete .com-btn-wp {
  margin-top: 30px;
  margin-bottom: 0;
}

.complaint-complete .com-btn-wp button {
  width: 220px;
}

@media (max-width: 768px) {
  .complaint-process {
    margin-top: 20px;
    margin-bottom: 40px;
    padding: 40px 10px;
  }
  .complaint-process ol li {
    display: inline-block;
    width: 33%;
    vertical-align: top;
  }
  .complaint-process ol li:nth-child(3)::after {
    display: none;
  }
  .complaint-process ol li:nth-child(4) {
    margin-top: 40px;
  }
  .complaint-process ol li:nth-child(5) {
    margin-top: 40px;
  }
  .complaint-popup.str-searPop {
    width: auto;
    margin: 0 20px;
  }
  .complaint-complete {
    padding: 60px 0 30px;
  }
  .complaint-complete .com-wp {
    padding-left: 30px;
    padding-right: 30px;
  }
  .complaint-complete .com-wp .img-box img {
    width: 100px;
  }
  .complaint-complete .com-wp .txt-box {
    padding-left: 20px;
  }
  .complaint-complete .com-wp .txt-box h4 {
    font-size: 30px;
    line-height: 1.2;
  }
  .complaint-complete .com-wp .txt-box p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 20px;
  }
  .complaint-complete .com-wp .txt-box p strong {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .complaint-complete .com-wp .img-box {
    display: none;
  }
  .complaint-complete .com-wp .txt-box {
    padding-left: 0;
  }
}
@media (max-width: 768px) {
  .complaint-process ol li {
    width: 100%;
    padding-top: 40px;
  }
  .complaint-process ol li::after {
    width: 13px;
    height: 25px;
    top: auto;
    bottom: -30px;
    right: 50%;
    margin-right: -6.5px;
    background-size: cover;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .complaint-process ol li:first-child {
    padding-top: 0;
  }
  .complaint-process ol li:nth-child(3)::after {
    display: block;
  }
  .complaint-process ol li:nth-child(4) {
    margin-top: 0;
  }
  .complaint-process ol li:nth-child(5) {
    margin-top: 0;
  }
  .complaint-process ol li:last-child .txt {
    margin-bottom: 0;
  }
  .complaint-process ol li p {
    padding-top: 140px;
    font-size: 17px;
  }
  .complaint-process ol li p > span {
    font-size: 15px;
  }
  .complaint-process ol li .txt {
    margin-bottom: 10px;
  }
  .complaint-complete .com-wp {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
  }
  .complaint-complete .com-wp .txt-box h4 {
    font-size: 20px;
  }
  .complaint-complete .com-wp .txt-box p {
    margin-top: 10px;
  }
  .complaint-complete .com-btn-wp button {
    width: auto;
  }
}
/* 스타 저축은행  */
.ceo-info-wrap.star-bank .ceo-info .text {
  text-align: center;
}

.ceo-info-wrap.star-bank .ceo-sign img {
  margin: 0;
}

.ceo-info-wrap.star-bank .ceo-sign {
  margin-top: 75px;
}

.ethics-box.star-bank {
  width: 100%;
  padding: 55px 291px 56px 39px;
  background: #f7f7f7 url(/img/star_content/bg_ethics.png);
}

.ethics-box.star-bank .text {
  display: block;
  color: var(--body-clr);
  font-size: 18px;
  line-height: 30px;
}

.ethics-box.star-bank .text strong {
  font-size: 18px;
}

.ethics-box.star-bank .text + .text {
  margin-top: 5px;
}

.ethics-box.star-bank + .ethics-list.star-bank {
  margin-top: 38px;
}

.ethics-list-text {
  margin-top: 10px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 18px;
  text-indent: -20px;
}

.ethics-list-text::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 15px;
  background: #999;
  border-radius: 50%;
  vertical-align: 3px;
}

.ethics-list-text:first-child {
  margin-top: 0;
}

.slide-box-area.star-bank .slide-box-top {
  padding: 23px 15px 20px;
}

.slide-box-area.star-bank .slide-box-top .sub-title {
  color: var(--body-clr);
  font-size: 18px;
}

.slide-box-area.star-bank .slide-box-txt {
  height: 213px;
}

.slide-box-area.star-bank .slide-box-txt p {
  font-size: 14px;
}

.slide-box-area.star-bank .slide-box-txt .title {
  margin-bottom: 0;
  font-weight: 500;
}

.slide-box-area.star-bank .slide-box-txt .text {
  margin-top: 28px;
  margin-bottom: 0;
  line-height: 26px;
}

.ethics-list.star-bank + .slide-box-area.star-bank {
  margin-top: 58px;
}

.management-philosophy-box.star-bank .management-philosophy dt {
  font-size: 14px;
  font-weight: 500;
}

.management-philosophy-box.star-bank dd.box-style01 {
  height: auto;
  padding: 30px 20px 29px;
}

.management-philosophy-box.star-bank dd.box-style01 .sub-title {
  margin-top: 0;
  line-height: 22px;
}

.management-philosophy-box.star-bank dd.box-style02 {
  height: auto;
  padding: 26px 20px 24px;
}

.management-philosophy-box.star-bank dd.box-style02 .sub-style01 {
  margin-top: 0;
  font-size: 14px;
  line-height: 23px;
}

.management-philosophy-box.star-bank dd.box-style03 {
  padding: 19px 20px 17px;
  background: var(--bg-clr2);
  border: 1px solid #014c9a;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  line-height: 18px;
}

.gnb-link:hover,
.gnb-link:focus {
  color: #0282C9;
}

.stat-bank.pc-viewbox {
  display: block;
}

.stat-bank.tablet-viewbox {
  display: none;
}

.stat-bank.mobile-viewbox {
  display: none;
}

.header-tab-item.is-active .header-tab-link {
  color: #0282C9;
}

.header-count-time-number {
  color: var(--main-clr);
}

.nonfacing-stepbox {
  margin-top: 10px;
  padding: 28px 0 28px 0;
  border: 1px solid var(--line-clr3);
}

.nonfacing-stepbox .step-list {
  display: table;
  width: 100%;
}

.nonfacing-stepbox .step-list li {
  display: table-cell;
  width: 25%;
  text-align: center;
}

.nonfacing-stepbox .step-list li .step {
  height: 189px;
  background-repeat: no-repeat;
  background-position: left 50% top 37px;
}

.nonfacing-stepbox .step-list li .step-style01 {
  background-image: url(/img/hss_content/bg_accountimg01.png);
}

.nonfacing-stepbox .step-list li .step-style02 {
  background-image: url(/img/hss_content/bg_accountimg02.png);
}

.nonfacing-stepbox .step-list li .step-style03 {
  background-image: url(/img/hss_content/bg_accountimg03.png);
}

.nonfacing-stepbox .step-list li .step-style04 {
  background-image: url(/img/hss_content/bg_accountimg04.png);
}

.nonfacing-stepbox .step-list li .text {
  color: var(--body-clr);
  font-size: 16px;
  line-height: 25px;
}

.nonfacing-stepbox + .sub-title-area {
  margin-top: 60px;
}

.notice-subtext.type01 {
  margin-top: 0;
}

.notice-subtext.type01 + .sub-title-area {
  margin-top: 42px;
}

/* 텍스트만 있는 타입 */
.nonfacing-stepbox.type01 {
  margin-top: 20px;
  padding-bottom: 12px;
}

.nonfacing-stepbox.type01 .step-list li .step {
  height: auto;
  background: none;
}

.nonfacing-stepbox.type01 .step-list li .title {
  margin-top: 20px;
  font-weight: 500;
}

.nonfacing-stepbox.type01 .step-list li .list {
  margin-top: 14px;
}

.nonfacing-stepbox.type01 .step-list li .text {
  display: inline-block;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
}

.steplistbox-wrap {
  display: table;
  width: 100%;
}

.steplistbox-wrap li {
  position: relative;
  display: table-cell;
  width: 1%;
  height: 89px;
  background: url(/img/hss_content/bg_step.png) no-repeat;
  background-color: var(--main-clr);
  color: var(--bg-clr2);
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}

.steplistbox-wrap li:first-child {
  background-image: none;
}

.steplistbox-wrap li .str {
  display: block;
  margin-bottom: 20px;
  color: var(--bg-clr2);
  font-size: 18px;
  font-weight: 700;
}

.steplistbox-wrap + .sub-title-area {
  margin-top: 50px;
}

.tts + .steplistbox-wrap {
  margin-top: 40px;
}

.table-type01 .th-style03 {
  border-right: 0;
  border-bottom-color: #efefef;
}

.bb-none {
  border-bottom: 0 !important;
}

.steplistbox-wrap + .steplistbox-wrap {
  margin-top: 40px;
}

.step-list .step strong {
  color: var(--main-clr);
  font-size: 22px;
  font-weight: 500;
}

.step-list .step::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url(/img/hss_content/bg_apply_arrow.png) no-repeat left top 55px;
}

.step-list li:first-child .step::after {
  display: none;
}

.step-list .text .str {
  color: var(--main-clr);
  font-size: 16px;
  font-weight: 500;
}

.step-list .text {
  font-weight: 500;
}

.step-list .text02 {
  font-weight: 400;
}

.th-style02 {
  border-bottom-color: #efefef !important;
}

@media (max-width: 1200px) {
  .common-titlestyle01:first-child {
    margin-top: 20px;
  }
  .arsguide-box {
    margin-top: 0;
  }
  .steplist-box {
    margin-top: 20px;
  }
  .common-viewtitle {
    margin-top: 20px;
  }
  .notice-subtext.type01 {
    margin-top: 20px;
  }
  .nonfacing-stepbox .step-list {
    display: block;
  }
  .nonfacing-stepbox .step-list li {
    display: block;
    width: 100%;
    margin-top: 30px;
  }
  .nonfacing-stepbox .step-list li:first-child {
    margin-top: 0;
  }
  .step-list .step::after {
    display: none;
  }
}
@media (max-width: 1200px) {
  .swiper-active-switch .main-page-service-tab-button {
    width: 53px;
    background-color: #339dd7;
  }
}
/* @media (max-width: $wrapSize) {
	.ceo-img-box {height:230px !important;background-repeat:no-repeat;background-size:100% 100%;}
	.ceo-img-box .text {display:none;}
	.ceo-info-wrap.star-bank .ceo-sign {margin-top:20px;}
	.stat-bank.tablet-viewbox {display:block;}
	.stat-bank.mobile-viewbox {display:none;}
	.stat-bank.pc-viewbox {display:none;}
} */
@media (max-width: 1200px) {
  .ethics-box.star-bank {
    padding: 43px 238px 44px 39px;
  }
}
@media (max-width: 768px) {
  .ethics-box.star-bank {
    padding-right: 175px;
  }
}
@media (max-width: 768px) {
  .ethics-box.star-bank .text {
    font-size: 15px;
  }
  .ethics-box.star-bank .text strong {
    font-size: 15px;
  }
  .ethics-box.star-bank {
    padding: 33px 39px 34px;
    background-image: none;
  }
  .ethics-list-text::before {
    width: 3px;
    height: 3px;
    background: #000;
  }
  .ethics-box.star-bank + .ethics-list.star-bank {
    margin-top: 28px;
  }
  .ethics-list.star-bank + .slide-box-area.star-bank {
    margin-top: 38px;
  }
}
@media (max-width: 768px) {
  .stat-bank.tablet-viewbox {
    display: none;
  }
  .stat-bank.mobile-viewbox {
    display: block;
  }
  .stat-bank.pc-viewbox {
    display: none;
  }
}
@media (max-width: 768px) {
  .management-philosophy-box.star-bank dd.box-style01,
  .management-philosophy-box.star-bank dd.box-style03 {
    margin-top: 9px;
  }
}
/* 별첨 다운로드 박스  */
.box-style05 {
  width: 100%;
  margin-top: 15px;
  padding: 10px 30px 18px;
  background: #f7f7f7;
}

.box-style05 .down-list {
  margin-top: 15px;
}

.box-style05 .down-list:first-child {
  margin-top: 0;
}

.box-style05 .down-list .title {
  display: inline-block;
  margin-right: 15px;
  font-size: 14px;
  font-weight: 500;
}

.box-style05 .down {
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  padding-left: 25px;
  background: url(/img/hss_content/bg_download.png) no-repeat;
  background-size: 14px;
  font-size: 14px;
}

@media (max-width: 1200px) {
  .box-style05 .down {
    background-size: 12px;
  }
}
/* 체크카드 팝업 */
.card-info .card-wrap {
  position: relative;
}

.card-info .scroll-box {
  max-height: 690px;
  overflow-y: auto;
}

.card-info .popup-body02 {
  max-height: inherit;
  text-align: left;
  padding: 30px 30px 60px;
  min-height: 150px;
  overflow-y: auto;
  background: var(--bg-clr2);
}

.card-info .body-box {
  margin-top: 35px;
}

.card-info .body-box:first-child {
  margin-top: 0;
}

.card-info .tit-des {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
}

.card-info .sub-des {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.card-info .notice-list .font-088 {
  padding-top: 20px;
  line-height: 23px;
}

.card-info .notice-list .notice-i-list {
  margin-top: 0;
}

.card-info .notice-list li .notice-i-list {
  padding-left: 0;
}

.card-info .notice-i-list {
  margin-top: 20px;
  color: var(--body-clr);
}

.card-info .nostyle-list {
  max-width: 1200px;
  margin: 0 auto;
}

.card-info .nostyle-list li {
  margin-top: 3px;
  font-size: 14px;
  line-height: 22px;
}

.card-info .nostyle-list li:first-child {
  margin-top: 0;
}

.card-info .notice-box {
  margin-top: 30px;
  padding: 25px 20px;
  background: #f7f7f7;
}

.card-info .notice-box .sub-des {
  margin-top: 0;
}

.card-info .notice-box .notice-list {
  padding-top: 0;
}

.card-info .notice-box .notice-list li {
  margin-top: 0;
  padding-left: 10px;
  font-size: 12px;
}

.card-info .notice-box .notice-list li a {
  display: inline;
  font-weight: 500;
}

.card-info .notice-box .nostyle-list li {
  font-size: 12px;
}

.card-info .notice-box .notice-i-list {
  margin-top: 0;
  font-size: 12px;
}

.card-info .notice-box .notice-i-list::before {
  margin-left: -10px;
}

.card-info .step-ux {
  margin-top: 30px;
  padding: 30px 60px;
  background: #f7f7f7;
}

.card-info .step-ux ul {
  display: table;
  width: 100%;
}

.card-info .step-ux ul li {
  position: relative;
  display: table-cell;
  vertical-align: top;
  width: 25%;
  text-align: center;
}

.card-info .step-ux ul li::before {
  content: "";
  display: block;
  width: 16px;
  height: 29px;
  position: absolute;
  top: 40px;
  right: -8px;
  background: url(/img/mypage/card_check_arrow.png) no-repeat center;
}

.card-info .step-ux ul li:last-child::before {
  display: none;
}

.card-info .step-ux ul li p {
  padding-top: 128px;
  font-size: 14px;
  line-height: 25px;
  background-repeat: no-repeat;
  background-position: center top;
}

.card-info .step-ux ul li p.step-t01 {
  background-image: url(/img/mypage/card_check_step01.png);
  padding-top: 120px;
}

.card-info .step-ux ul li p.step-t02 {
  background-image: url(/img/mypage/card_check_step02.png);
}

.card-info .step-ux ul li p.step-t03 {
  background-image: url(/img/mypage/card_check_step03.png);
}

.card-info .step-ux ul li p.step-t04 {
  background-image: url(/img/mypage/card_check_step04.png);
}

.card-info .table-type04 th {
  width: 160px;
}

.card-info .table-type04 td {
  padding: 14px 10px 13px 10px;
}

.card-info td .notice-list {
  margin-left: 10px;
}

.checkcash-cards + .card-info {
  margin-top: 30px;
}

.popup-foot01.foot-style01 {
  padding: 30px 0 40px;
}

.table-title + .table-wrap {
  margin-top: 15px;
}

.notice-list + .popup-top-number {
  margin-top: 20px;
}

@media (max-width: 1200px) {
  .card-info .step-ux {
    padding: 30px 10px;
  }
  .card-info {
    margin-top: 30px;
  }
}
/* 요약공시 */
.common-stit {
  position: relative;
  margin-top: 52px;
  font-size: 22px;
  font-weight: 700;
}

.common-text02 {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
  line-height: 24px;
}

.searchselect-wrap {
  width: 100%;
  margin-top: 25px;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: right;
}

.searchselect-wrap .btn-basic {
  width: 150px;
  min-width: 150px;
  height: 40px;
  padding: 0;
  background: #666;
  color: var(--bg-clr2);
  font-size: 16px;
  font-weight: 700;
  line-height: 15px;
  text-decoration: none;
}

.searchselect-wrap .datebox {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
}

.searchselect-wrap .datebox .datebox-interval {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.searchselect-wrap .datebox .datebox-interval02 {
  display: inline-block;
  vertical-align: middle;
}

.searchselect-wrap .datebox .datebox-interval select {
  min-width: 150px;
  padding: 0 30px 0 10px;
  color: #666;
}

.tbl-wrap {
  margin-top: 10px;
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid var(--disable-clr);
}

.tbl-style02 {
  width: 100%;
}

.tbl-style02 th {
  height: 40px;
  padding: 0 10px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
  word-break: break-all;
  border: 1px solid #eee;
  border-bottom: none !important;
}

.tbl-style02 td {
  height: auto;
  padding: 17px 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: middle;
  word-break: break-all;
  border: 1px solid #eee;
  border-bottom: none !important;
}

.tbl-style02 th.sub-text {
  color: #666;
  font-size: 14px;
}

.tbl-style02 thead tr {
  width: 100%;
  background: #f7f7f7;
}

.tbl-style02 td a {
  color: #666;
  text-decoration: underline;
}

.tbl-style02 td a:hover {
  color: #00397c;
}

.tbl-style02.type02 th {
  height: 70px;
}

@media (max-width: 768px) {
  .temp-view-tbl {
    position: relative;
    overflow: hidden;
    margin-top: 16px;
  }
  .temp-view-tbl::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    display: block;
    width: 20px;
    height: 100%;
    border-radius: 10px 0 0 10px/50% 0 0 50%;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
  }
  .temp-view-tbl .tbl-wrap {
    overflow-x: auto;
    margin: 0;
  }
  .temp-view-tbl .tbl-wrap table {
    width: 680px;
  }
  .temp-view-tbl .tbl-wrap table.wide-tbl {
    width: 900px;
  }
  .common-stit {
    margin-top: 25px;
    font-size: 15px;
  }
  .common-text02 {
    font-size: 12px;
    line-height: 20px;
  }
  .searchselect-wrap {
    margin-top: 10px;
    text-align: left;
  }
  .searchselect-wrap .btn-basic {
    width: 100%;
  }
  .searchselect-wrap .datebox {
    width: 100%;
  }
  .searchselect-wrap .datebox .datebox-interval {
    width: 100%;
    margin-right: 0;
  }
  .searchselect-wrap .datebox .datebox-interval select {
    width: 100%;
  }
  .searchselect-wrap .datebox .datebox-interval02 {
    width: 100%;
    margin-top: 10px;
  }
  .info-box .text {
    margin-top: 10px;
  }
  .info-box .left {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
  }
  .info-box .right {
    display: block;
    width: 100%;
    margin-top: 10px;
  }
  .info-box .text {
    font-size: 12px;
  }
  .tbl-style02 th,
  .tbl-style02 td {
    height: auto;
    padding: 12px 5px;
    font-size: 12px;
    line-height: 18px;
  }
}
/* 한화저축은행 계열사소개 페이지 스타일 2019.09.16 김재원 */
.group-info {
  background-image: url(/img/hss_companycontent/hanhwa_content/bg_group_info.jpg) !important;
}

.group-info .text .text-point {
  font-size: 30px !important;
}

.group-info .text .ty01 {
  color: var(--bg-clr2);
  font-size: 30px;
  line-height: 45px !important;
}

.group-info-text {
  color: #666;
  font-size: 18px;
  margin-top: 45px;
  line-height: 30px !important;
}

@media (max-width: 1200px) {
  .group-info .text .text-point {
    font-size: 25px !important;
  }
  .group-info .text .ty01 {
    color: var(--bg-clr2);
    font-size: 25px;
    line-height: 35px !important;
  }
}
@media (max-width: 768px) {
  .group-info .text .text-point {
    font-size: 20px !important;
  }
  .group-info .text .ty01 {
    color: var(--bg-clr2);
    font-size: 20px;
    line-height: 30px !important;
  }
}
/*금융상품_신용카드*/
.credInfo-wp .cred-title {
  padding: 55px 0 17px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.25px;
}

.cInfo-top {
  position: relative;
  padding: 45px 330px 50px 40px;
  background-color: #f7f7f7;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cInfo-top::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: calc(50% - 62px);
  right: 40px;
  width: 192px;
  height: 124px;
  background: url(/img/hss_companycontent/dream_content/bg_fincred.png) no-repeat;
}

.cInfo-top .title {
  max-width: 600px;
  padding: 0;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -0.25px;
}

.cInfo-top .cInfo-img {
  position: absolute;
  right: 46px;
  top: 20px;
}

.cred-kinds p {
  color: #666;
  font-size: 16px;
  letter-spacing: -0.25px;
}

.cred-list {
  border-top: 1px solid #00397c;
}

.cred-list li {
  display: table;
  width: 100%;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--line-clr3);
}

.cred-list li .thumb {
  display: table-cell;
  vertical-align: top;
  width: 270px;
  padding: 40px 0 0 45px;
}

.cred-list li .info {
  display: table-cell;
  vertical-align: top;
  width: auto;
  padding: 50px 0 0 20px;
}

.cred-list li .info strong {
  display: block;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.25px;
}

.cred-list li .info p {
  color: #666;
  font-size: 14px;
  line-height: 26px;
  letter-spacing: -0.25px;
}

.cred-infoWp .btn-wp {
  text-align: center;
  padding: 40px 0 0 0;
}

.cred-infoWp .btn-wp button {
  width: 180px;
  padding: 0;
}

.save-infoWp .tbl-wrap {
  margin: 0 0 5px;
}

.save-infoWp table th.wh {
  background: var(--bg-clr2);
  border-right: 1px solid var(--line-clr3);
}

.save-infoWp table th.wh.last {
  border-right: 0;
}

.save-infoWp .tbl-style03 th {
  text-align: center;
}

.save-infoWp .tbl-style03 td {
  text-align: center;
}

.save-infoWp > p {
  color: #666;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.25px;
}

.save-mInfo {
  display: none;
}

.caution-wp {
  margin-top: 55px;
}

.c-detailWp {
  padding: 0 20px 20px;
}

.c-detailWp strong.ctit {
  display: block;
  padding: 25px 0 15px;
  font-size: 16px;
  letter-spacing: -0.25px;
}

.c-detailWp .ctxt ul.bul li {
  position: relative;
  padding-left: 13px;
  color: #666;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.25px;
}

.c-detailWp .ctxt ul.bul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  background: url(../img/common/bul02.gif) no-repeat left top;
}

.c-detailWp .ctxt ul.bul li p {
  position: relative;
  color: #666;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.25px;
  padding-left: 13px;
}

.c-detailWp .ctxt ul.bul li p::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0px;
}

.c-detailWp .ctxt ul.bul li strong {
  color: var(--body-clr);
  font-weight: 400;
}

.c-detailWp .ctxt ul.str li {
  position: relative;
  padding-left: 13px;
  color: #666;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.25px;
}

.c-detailWp .ctxt ul.str li::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0px;
}

.c-detailWp .ctxt ul.str li span {
  color: var(--body-clr);
  margin-right: 5px;
}

.c-detailWp .ctxt ul.str li p {
  padding-left: 40px;
  color: #666;
  text-indent: -40px;
}

.c-detailWp .ctxt ul.str li p.point {
  color: var(--body-clr);
  font-size: 14px;
  letter-spacing: -0.25px;
}

.bank-cInfoWp .tbl-wrap {
  margin-top: 0;
}

.bank-cInfoWp table th {
  text-align: center;
}

.bank-cInfoWp table th.thr {
  border-right: 1px solid #b5c7de;
}

.bank-cInfoWp table td span {
  display: inline-block;
  line-height: 17px;
  border-bottom: 1px solid #bcbcbc;
  color: #666;
}

@media (max-width: 1200px) {
  /* 상단 infobox */
  .fin-infobox {
    min-height: auto;
    margin: 0 -18px 0;
    padding: 18px 16px;
  }
  .fin-infobox::after {
    display: none;
  }
  /*금융상품_신용카드*/
  .credInfo-wp .cred-title {
    font-size: 14.6px;
    padding: 20px 0 11px;
  }
  .save-infoWp .tbl-wrap {
    display: none;
  }
  .save-mInfo {
    display: block;
  }
  .save-mInfo dl {
    padding-bottom: 5px;
  }
  .save-mInfo dt {
    display: block;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: #f7f7f7;
    font-size: 14px;
    font-weight: 700;
  }
  .save-mInfo dd {
    padding-left: 10px;
  }
  .save-mInfo ul li {
    margin-bottom: 10px;
  }
  .save-mInfo ul li strong {
    display: block;
    font-size: 13.3px;
    margin-bottom: 5px;
  }
  .save-mInfo ul li p {
    color: #666;
    font-size: 12px;
    line-height: 20px;
  }
  .save-infoWp > p {
    margin-left: 10px;
    padding-left: 15px;
    font-size: 11px;
    line-height: 20px;
    text-indent: -15px;
  }
  .cInfo-top {
    margin-top: 30px;
    padding: 25px 15px;
  }
  .cInfo-top::after {
    display: none;
  }
  .cInfo-top strong {
    font-size: 14px;
    line-height: 20px;
  }
  .cInfo-top strong br {
    display: none;
  }
  .cInfo-top .cInfo-img {
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -30px;
  }
  .cInfo-top .cInfo-img img {
    width: 110px;
    height: 61px;
  }
  .cInfo-top .title {
    font-size: 14px;
    line-height: 22px;
  }
  .cred-kinds p {
    font-size: 13px;
  }
  .cred-list li {
    width: 100%;
    padding-bottom: 15px;
  }
  .cred-list li .thumb {
    width: 100px;
    padding: 15px 10px 0 10px;
  }
  .cred-list li .thumb img {
    width: 100%;
  }
  .cred-list li .info {
    padding: 20px 0 0 0;
  }
  .cred-list li .info strong {
    display: block;
    padding-bottom: 5px;
    font-size: 13px;
    line-height: 20px;
  }
  .cred-list li .info p {
    font-size: 12px;
    line-height: 20px;
  }
  .cred-infoWp .btn-wp {
    overflow: hidden;
    margin: 0;
    padding: 15px 0 0 0;
    text-align: center;
  }
  .cred-infoWp .btn-wp span {
    float: left;
    width: 50%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .cred-infoWp .btn-wp span:first-of-type {
    padding-right: 6px;
  }
  .cred-infoWp .btn-wp span:last-of-type {
    padding-left: 6px;
  }
  .cred-infoWp .btn-wp button {
    vertical-align: top;
    width: inherit;
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0;
    min-width: inherit;
    font-size: 12px;
  }
  .caution-wp {
    margin-top: 25px;
  }
  .c-detailWp {
    padding: 0 16px 10px;
  }
  .c-detailWp strong.ctit {
    display: block;
    padding: 15px 0 5px;
    font-size: 13.3px;
  }
  .c-detailWp .ctxt ul.bul li {
    font-size: 13.3px;
    line-height: 22px;
    padding-left: 10px;
  }
  .c-detailWp .ctxt ul.bul li::before {
    content: "";
    top: 4px;
    width: 3px;
    height: 3px;
    background-size: 3px 3px;
  }
  .c-detailWp .ctxt ul.bul li p {
    padding-left: 10px;
    font-size: 13.3px;
    line-height: 22px;
  }
  .c-detailWp .ctxt ul.bul li p::before {
    content: "-";
    top: 0px;
  }
  .c-detailWp .ctxt ul.str li {
    margin-bottom: 5px;
    padding-left: 10px;
    font-size: 13.3px;
    line-height: 22px;
  }
  .c-detailWp .ctxt ul.str li p {
    text-indent: -30px;
    padding-left: 30px;
  }
  .c-detailWp .ctxt ul.str li p.point {
    font-size: 13.3px;
  }
  .bank-cInfoWp table th {
    padding: 7px 10px 6px;
    text-align: center;
    font-size: 13px;
  }
  .bank-cInfoWp table td {
    padding: 7px 10px 6px;
    font-size: 13px;
    line-height: 20px;
  }
  .bank-cInfoWp table th.thr {
    border-right: 1px solid #b5c7de;
  }
  .bank-cInfoWp table td span {
    display: inline-block;
    line-height: 14px;
    border-bottom: 1px solid #bcbcbc;
    color: #666;
  }
}
.tbl-style03 {
  width: 100%;
}

.tbl-style03 tr {
  border-bottom: 1px solid #dfdfdf;
}

.tbl-style03 th {
  padding: 12px 20px 11px;
  background: #eff7f9;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  line-height: 28px;
  word-break: keep-all;
}

.tbl-style03 td {
  padding: 12px 20px 11px;
  border-right: 1px solid #dfdfdf;
  font-size: 16px;
  color: #666;
  line-height: 28px;
  word-break: break-all;
}

.tbl-style03 tr td:last-child {
  border-right: none;
}

.tbl-style03 tr:last-child {
  border-bottom: none;
}

.tbl-style03 tr:last-child td {
  border-bottom: none;
}

.tbl-style03 th label {
  font-weight: 700;
}

@media (max-width: 1200px) {
  .tbl-style03 .common-desc-i {
    margin: 10px 0 0 0;
  }
}
.cardinfo-wrap {
  overflow: hidden;
  margin-top: 40px;
  border-top: 1px solid #9eb5d3;
  border-bottom: 1px solid var(--line-clr3);
  padding: 20px 0 21px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cardinfo-divide {
  display: table;
  float: left;
  width: calc(100% - 402px);
}

.cardinfo-design {
  display: table-cell;
  min-width: 236px;
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}

.cardinfo-btn {
  width: 100%;
  max-width: 236px;
  text-align: center;
}

.cardinfo-detail {
  display: table-cell;
  width: 351px;
  padding-right: 10px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cardinfo-title {
  padding-top: 25px;
  color: var(--body-clr);
  font-size: 21px;
  font-weight: 700;
}

.cardinfo-text {
  margin-top: 10px;
  color: #666666;
  font-size: 12px;
  line-height: 18px;
}

.cardinfo-annualfee {
  display: table;
  width: 296px;
  height: 44px;
  margin-top: 35px;
  border: 1px solid var(--disable-clr);
  border-radius: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cardinfo-annualfee-title {
  display: table-cell;
  width: 62px;
  padding-top: 2px;
  color: var(--body-clr);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
  text-align: center;
}

.cardinfo-annualfee-text {
  position: relative;
  display: table-cell;
  width: 137px;
  color: #666666;
  font-size: 12px;
  line-height: 18px;
  vertical-align: middle;
  text-align: center;
}

.cardinfo-annualfee-text::after {
  content: "";
  display: block;
  position: absolute;
  top: 7px;
  left: 0;
  width: 1px;
  height: 29px;
  background: #d5d5d5;
}

.cardinfo-annualfee-title + .cardinfo-annualfee-text {
  width: 95px;
}

.saleinfo-list-wrap {
  display: table;
  float: right;
  width: 402px;
  border-left: 1px solid #f1f1f1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.saleinfo-list-wrap li {
  position: relative;
  display: table-cell;
  width: 50%;
  height: 200px;
  padding-top: 57px;
  vertical-align: top;
  text-align: center;
}

.saleinfo-list-wrap li .saletext {
  height: 40px;
  color: #00397c;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}

.saleinfo-list-wrap li .saleinfo {
  color: #666666;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 24px;
}

.saleinfo-list-wrap li:first-child::after {
  content: "";
  display: block;
  position: absolute;
  top: 104px;
  right: 0;
  width: 1px;
  height: 72px;
  margin-top: -36px;
  background: var(--disable-clr);
}

@media (max-width: 1200px) {
  .cardinfo-wrap {
    margin: 40px -18px;
    padding: 20px 0 21px 0;
  }
  /* .first-gap-style {margin-top:-20px;} */
  .cardinfo-divide {
    display: block;
    float: none;
    width: 100%;
  }
  .cardinfo-design {
    display: block;
    width: 100%;
    text-align: center;
  }
  .cardinfo-detail {
    display: block;
    width: 100%;
    padding: 0 22px;
  }
  .cardinfo-title {
    padding-top: 25px;
    text-align: center;
  }
  .cardinfo-text {
    margin-top: 5px;
    text-align: center;
  }
  .cardinfo-annualfee {
    width: 100%;
    margin-top: 15px;
  }
  .cardinfo-btn {
    max-width: 100%;
  }
  .saleinfo-list-wrap {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
  .saleinfo-list-wrap li {
    position: relative;
    display: table-cell;
    width: 50%;
    height: 120px;
    padding-top: 20px;
    vertical-align: top;
    text-align: center;
  }
  .saleinfo-list-wrap li:first-child::after {
    content: "";
    display: block;
    position: absolute;
    top: 54px;
    right: 0;
    width: 1px;
    height: 72px;
    margin-top: -36px;
    background: var(--disable-clr);
  }
  .saleinfo-list-wrap li .saletext {
    height: 30px;
    font-size: 20px;
  }
}
/* [공통] 유의사항 */
.common-noticebox-wrap {
  position: relative;
  margin: 60px 0 0;
  padding: 24px 20px 18px;
  background: #f7f7f7;
}

.common-noticebox-title {
  padding-left: 21px;
  background: url(/img/hss_content/bg_att_i.png) no-repeat 0 2px;
  color: #f15757;
  font-size: 16px;
  font-weight: 700;
}

.common-noticebox-list {
  margin-top: 8px;
}

.common-noticebox-list > li {
  padding-left: 20px;
  color: #666;
  font-size: 16px;
  line-height: 30px;
}

.common-noticebox-list > li::before {
  content: "";
  position: relative;
  top: -3px;
  left: 0;
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 5px;
  background: #666;
  border-radius: 50%;
}

.common-noticebox-list li .link {
  color: #666;
  font-weight: 700;
}

.common-noticebox-in-list {
  margin-left: 15px;
}

.common-noticebox-in-list li {
  color: #666;
  font-size: 16px;
  line-height: 30px;
}

/* [공통] 아코디언 내부 타이틀,텍스트,테이블 스타일 */
.common-accordion-gapstyle-wrap {
  padding: 26px 20px 25px;
}

.common-subtitle-wrap01 {
  margin-top: 23px;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.common-subtitle-wrap01:first-child {
  margin: 0;
}

.common-subtext-wrap01 {
  margin-top: 11px;
  color: #666666;
  font-size: 16px;
  line-height: 1.5;
}

.common-subtext-wrap01.type01 {
  margin-top: 0;
}

.common-subtable-wrap01 {
  margin-top: 15px;
  border-top: 1px solid var(--line-clr3);
  border-bottom: 1px solid var(--line-clr3);
}

.common-subtable-wrap01 .common-subtable {
  width: 100%;
  border-top: 1px solid var(--line-clr3);
  background: var(--bg-clr2);
}

.common-subtable-wrap01 .common-subtable thead th {
  height: 45px;
  border-left: 1px solid var(--line-clr3);
  color: var(--body-clr);
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}

.common-subtable-wrap01 .common-subtable thead th:first-child {
  border-left: none;
}

.common-subtable-wrap01 .common-subtable tbody td {
  height: 74px;
  padding: 0 10px 0 18px;
  border-left: 1px solid var(--line-clr3);
  border-top: 1px solid var(--line-clr3);
  color: var(--body-clr);
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  vertical-align: middle;
}

.common-subtable-wrap01 .common-subtable tbody td:first-child {
  border-left: none;
}

.common-subtable-wrap01 .common-subtable tbody td.al-l {
  text-align: left;
}

/* [공통] 모바일 스타일 */
@media (max-width: 1200px) {
  .common-noticebox-title {
    padding-left: 18px;
    background: url(/img/hss_content/bg_att_i.png) no-repeat 0 1px;
    font-size: 14px;
  }
  .caution-wp + .cardinfo-wrap {
    margin-top: 20px;
  }
  .common-noticebox-wrap {
    margin: 20px -18px 0;
  }
  .common-noticebox-list > li {
    padding-left: 0;
    font-size: 12px;
    line-height: 15px;
  }
  .common-noticebox-list > li::before {
    content: "";
    position: relative;
    top: -3px;
    left: 0;
    display: inline-block;
    width: 2px;
    height: 2px;
    margin-right: 5px;
    background: #666;
    border-radius: 50%;
  }
  .common-noticebox-in-list li {
    font-size: 12px;
    line-height: 15px;
  }
  .common-btn-mobile-style01 {
    width: 176px;
    margin: 0 auto;
  }
  .common-caution-text {
    font-size: 12px;
  }
  ul.common-caution-text li {
    font-size: 12px;
  }
}
.common-btn-style01 {
  display: inline-block;
  height: 30px;
  padding: 0 17px;
  border: 1px solid var(--disable-clr);
  border-radius: 5px;
  color: #666666;
  font-size: 12px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.common-btn-bullet-down {
  display: inline-block;
  padding: 1px 24px 0 0;
  background: url(/img/hss_common/bul_down.png) no-repeat right 1px top 7px;
  color: #666666;
  font-size: 12px;
  font-weight: 700;
}

/* 진주 ci 소개 */
.sub-text03 {
  color: #666;
  font-size: 16px;
  line-height: 28px;
}

.cibg-wrap {
  width: 100%;
  height: auto;
  margin-top: 30px;
}

.cibg-wrap .logo {
  width: 100%;
}

.ci-color-listbox {
  margin-top: 32px;
}

.ci-color-listbox::after {
  content: "";
  clear: both;
  display: block;
}

.ci-color-listbox .color-list {
  float: left;
  height: 140px;
  margin-right: 30px;
}

.ci-color-listbox .color-list:last-child {
  margin-right: 0;
}

.ci-color-listbox li .color {
  display: block;
}

.ci-color-listbox li .color-text {
  display: block;
  color: var(--cap-clr);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.ci-color-listbox li .color-text:nth-child(2) {
  margin-top: 8px;
}

/* 진주 도서문화 상품권 */
.talent-icon-list.jinju-bank {
  margin-top: 40px;
}

.talent-icon-list.jinju-bank .talent-icon-list-item::before {
  background-image: none;
  background-color: var(--bg-clr2);
}

.talent-icon-list.jinju-bank .talent-icon-list-item-type1::before {
  background-image: url(/img/hss_companycontent/jinju_content/content/bookcard-icon_39.jpg);
}

.talent-icon-list.jinju-bank .talent-icon-list-item-type2::before {
  background-image: url(/img/hss_companycontent/jinju_content/content/bookcard-icon_41.png);
}

.talent-icon-list.jinju-bank .talent-icon-list-item-type3::before {
  background-image: url(/img/hss_companycontent/jinju_content/content/bookcard-icon_44.jpg);
}

.talent-icon-list.jinju-bank .talent-icon-list-item-type4::before {
  background-image: url(/img/hss_companycontent/jinju_content/content/bookcard-icon_46.jpg);
}

.sub-text03 + .table-wrap01 {
  margin-top: 13px;
}

/* 민원처리절차 */
.arrow-list {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 70px;
}

.arrow-list li {
  position: relative;
  width: 300px;
  background: var(--bg-clr2);
}

.arrow-list li::after {
  content: "";
  position: absolute;
  right: -55px;
  top: 50%;
  width: 32px;
  height: 20px;
  margin-top: -10px;
  display: block;
  background: url(/img/common/icon_titlearrow.png) no-repeat center;
}

.arrow-list li:last-child::after {
  display: none;
}

.arrow-tit {
  padding: 20px;
  background: #0B9444;
  color: var(--bg-clr2);
  text-align: center;
  font-size: 21px;
}

.arrow-txt {
  text-align: center;
  padding: 10px;
  border: 1px solid #0B9444;
}

/* ci 소개 (진주저축은행) */
.color-chip-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 35px;
  margin-top: 20px;
}

.color-chip-item {
  width: 350px;
  background: #455465;
  padding: 20px;
  border-radius: 0 0 110px 0;
}

.color-chip-item.jade {
  background: #60A786;
}

.color-chip-item.brown {
  background: #eda65d;
}

.color-chip-item.beige {
  background: #b7a99a;
}

.color-chip-item.pink {
  background: #f14b5d;
}

.color-chip-item.green {
  background: #009c4e;
}

.color-chip-item .color-tit {
  display: inline-block;
  width: 200px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bg-clr2);
  font-size: 20px;
  color: var(--bg-clr2);
}

.color-chip-item .color-txt {
  font-size: 18px;
  color: #eee;
}

.color-chip-item .color-txt strong {
  color: var(--bg-clr2);
  font-weight: 500 !important;
}

@media (max-width: 768px) {
  .color-chip-list {
    grid-template-columns: repeat(1, 1fr);
  }
  .color-chip-item {
    width: 100%;
  }
}
/*검색결과 없을때 페이지 공통*/
.nosearch-wp {
  border-top: 1px solid var(--main-clr);
  padding: 260px 0 100px;
  background: #f7f7f7 url(/img/hss_common/ico-point.png) no-repeat center 100px;
  text-align: center;
}

.nosearch-wp p {
  font-size: 30px;
  line-height: 26px;
  letter-spacing: -0.25px;
  font-weight: 400;
}

.nosearch-wp .btn-wp {
  margin-top: 35px;
}

.nosearch-wp.type01 {
  padding: 112px 0 100px;
}

.nosearch-wp.type01 {
  background: #f7f7f7;
}

.nosearch-wp.type01 p {
  font-weight: 400;
}

/* hps_002.html */
.new-thumbWp {
  border-top: 1px solid var(--main-clr);
}
.new-thumbWp .new-thumb-list {
  margin: 0;
}

ul.new-thumb-list {
  overflow: hidden;
  margin: 0 -32px;
}

.new-thumb-list .thumb-wp img {
  width: 100%;
  height: 100%;
}

.thumb-wp {
  overflow: hidden;
}

ul.new-thumb-list li {
  float: left;
  width: 324px;
  margin: 0 32px;
  padding-top: 40px;
}

ul.new-thumb-list li > a {
  display: block;
  border: 1px solid var(--disable-clr);
  text-decoration: none;
}

ul.new-thumb-list li .thumb-wp {
  width: 322px;
  height: 348px;
}

.new-thumbWp.tmb-type02 ul.new-thumb-list li .thumb-wp {
  height: 216px;
}

.new-thumbWp.tmb-type02 ul.new-thumb-list li .txt-wp {
  border-top: 1px solid var(--disable-clr);
}

ul.new-thumb-list li .txt-wp {
  padding: 17px 20px;
  min-height: 115px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul.new-thumb-list li .tit {
  display: block;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.25px;
}

ul.new-thumb-list li .txt-wp .date {
  display: block;
  color: #666;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.25px;
  margin-top: 18px;
}

ul.new-thumb-list li .cmt {
  overflow: hidden;
  display: block;
  height: 48px;
  word-break: break-all;
}

/* hps_005.html */
.store-searchWp {
  margin: 30px auto;
  overflow: hidden;
}

.store-searchWp::after {
  display: block;
  content: "";
  clear: both;
}

.search-tabWp {
  float: left;
  width: 478px;
  min-height: 800px;
  border: 1px solid var(--line-clr3);
  border-radius: 12px;
  overflow: hidden;
}

.sr-listWp {
  background: var(--bg-clr2);
}

.sr-listWp ul li a {
  display: flex;
  align-items: normal;
  gap: 15px;
  padding: 20px 40px 20px 10px;
  background: url(/img/hss_content/hps/ico-map.png) no-repeat right 20px center;
  border: 2px solid transparent;
  border-radius: 12px;
  outline-offset: -2px;
}

.sr-listWp ul li a.active {
  background-color: var(--bg-clr1);
  border-color: var(--main-clr);
}

.sr-listWp ul li .t-logo {
  width: 140px;
  padding: 10px;
}

.sr-listWp ul li .s-info {
  width: 250px;
}

.sr-listWp ul li .s-info .tit {
  display: block;
  color: #666;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.25px;
}

.sr-listWp ul li .s-info p.add,
.sr-listWp ul li .s-info p.add02,
.sr-listWp ul li .s-info p.add03 {
  color: #666;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.25px;
  margin-top: 5px;
}

.sr-listWp ul li.on {
  position: relative;
  border: 2px solid var(--main-clr);
  border-radius: 14px;
}

.sr-listWp ul li.on::before {
  display: none;
}

.sr-listWp ul li.on::after {
  display: none;
}

.sr-listWp ul li .t-logo img {
  width: 120px;
  vertical-align: top;
}

.sr-listWp .paging-wrap a {
  margin-top: 30px;
}

.store-mapWp {
  float: left;
  padding-left: 60px;
  width: 560px;
  min-height: 800px;
}

.map-area {
  width: 560px;
  min-height: 800px;
}

@media (max-width: 1200px) {
  .tab-basic-buttons {
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    text-align: center;
    border-bottom: 1px solid var(--line-clr3);
  }
  .tab-basic-buttons-list {
    display: inline-block;
    vertical-align: top;
    padding: 0 15px;
    width: auto;
  }
  .tab-basic-buttons-item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 0 6px;
    border: 0;
    font-size: 13px;
    line-height: 35px;
  }
  .tab-basic-buttons-item + .tab-basic-buttons-item::before {
    display: none;
  }
  .tab-basic-buttons-item::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 2px solid var(--main-clr) !important;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  .tab-basic-buttons-item.js-tabpanel-active,
  .tab-basic-buttons-item.is-tab-basic-active {
    background: none;
    color: var(--main-clr);
  }
  .tab-basic-buttons-item.js-tabpanel-active::after,
  .tab-basic-buttons-item.is-tab-basic-active::after {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  .tab-basic-buttons-item + .tab-basic-buttons-item {
    margin-left: 12px;
  }
  .tab-basic .tab-basic-buttons-item {
    font-size: 14px !important;
  }
  .tab-basic .tab-basic-buttons {
    width: 100% !important;
  }
  .tab-basic {
    margin-top: 20px;
  }
}
/* common */
/* 다운로드 박스 */
.version-download-box .btn-style01 {
  padding: 0 18px;
  background: url(/img/hss_content/hps/ico_down.png) no-repeat right 20px top 10px;
  text-align: left;
  border-radius: 0 !important;
  vertical-align: -1px;
}
.version-download-box .select-basic {
  margin-right: 10px;
}

/* [공통] 컨텐츠 타이틀 */
.common-title {
  color: var(--body-clr);
  font-size: 40px;
  font-weight: 700;
}

/* [공통] 버튼정렬 */
.btnalign-box {
  position: relative;
  margin-top: 40px;
  text-align: center;
}

/* [공통] 리스트 */
.common-list02 {
  width: 100%;
  margin-top: 20px;
  border-top: 1px solid var(--main-clr);
}
.common-list02 > li {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 77px;
  padding: 14px 20px 13px 0;
  border-bottom: 1px solid var(--line-clr3);
}
.common-list02 > li .number,
.common-list02 > li .name {
  width: 107px;
  font-size: 14px;
  text-align: center;
  color: #666;
}
.common-list02 > li .info .title a {
  display: block;
  width: 983px;
  padding: 4px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  word-break: break-all;
  color: var(--body-clr);
}
.common-list02 > li .info .title a:hover, .common-list02 > li .info .title a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.common-list02 > li .info .title a.link01 {
  width: 803px;
}
.common-list02 > li .info .title a.link02 {
  width: 883px;
}
.common-list02 > li .info .title a.link03 {
  width: 913px;
}
.common-list02 > li .info .date {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #666;
}
.common-list02 > li .state {
  width: 110px;
  margin-left: auto;
  text-align: center;
}
.common-list02 > li .snsbox {
  position: relative;
  width: 80px;
  text-align: center;
  overflow: hidden;
}
.common-list02 > li .snsbox .btn-downlist {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background: url(/img/hss_common/button/btn_down02.gif) no-repeat 0 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.common-list02 > li .snsbox .tooltip-layerpopup {
  position: absolute;
  top: 52px;
  right: -400px;
  width: 389px;
  height: 118px;
  padding: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--bg-clr2);
  -webkit-box-shadow: 9px 9px 43px -1px rgb(227, 227, 227);
  -moz-box-shadow: 9px 9px 43px -1px rgb(227, 227, 227);
  box-shadow: 9px 9px 43px -1px rgb(227, 227, 227);
  z-index: 100;
}
.common-list02 > li .snsbox .tooltip-layerpopup::after {
  position: absolute;
  top: -9px;
  right: 68px;
  content: " ";
  display: block;
  width: 15px;
  height: 9px;
  background: url(/img/hss_common/bg_tooltip.gif) no-repeat 0 0;
}
.common-list02 > li .snsbox .tooltip-layerpopup-close {
  position: absolute;
  top: -50px;
  right: 57px;
  width: 40px;
  height: 40px;
  background: url(/img/hss_common/button/btn_close.gif) no-repeat 0 0;
  font-size: 0;
  line-height: 0;
  z-index: 100;
}
.common-list02 > li .snsbox .tooltip-scroll-wrap {
  position: relative;
  width: 387px;
  height: 116px;
}
.common-list02 > li .snsbox .tooltip-scroll {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: 5px;
  right: 5px;
  left: 5px;
  text-align: left;
}
.common-list02 > li .snsbox .tooltip-scroll .scroller {
  position: absolute;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}
.common-list02 > li .snsbox .tooltip-scroll .scroller .list {
  padding: 14px 0;
}
.common-list02 > li .snsbox .tooltip-scroll .scroller .list li {
  margin-top: 8px;
}
.common-list02 > li .snsbox .tooltip-scroll .scroller .list li:first-child {
  margin-top: 0;
}
.common-list02 > li .snsbox .tooltip-scroll .scroller .list li a {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.common-list02 > li .snsbox.scroll-type {
  overflow: unset;
}
.common-list02 > li .snsbox.scroll-type .tooltip-layerpopup {
  right: -38px;
}
.common-list02 > li .btn-style01 {
  width: 112px;
  background-position: right 14px top 11px;
}
.common-list02 .btn-style01 {
  width: 112px;
  margin-left: auto;
  margin-right: 20px;
  background: url(/img/hss_content/hps/ico_down.png) no-repeat right 20px top 10px/auto;
  text-align: left;
  margin-top: 10px;
  margin-right: 0;
}

.common-list02.style01 > li .info .link05 {
  width: 693px;
}
.common-list02.style01 > li .info .link06 {
  width: 818px;
}
.common-list02.style01 > li .number {
  max-width: 90px;
}
.common-list02.style01 > li .state {
  width: 160px;
}
.common-list02.style01 > li .snsbox {
  width: 175px;
}

.common-list02.style01 li {
  position: relative;
}
.common-list02.style01 li .info {
  width: 80%;
}

.common-list02.style01 li .btn-style01 span {
  font-size: 12px;
}

@media (max-width: 1200px) {
  .common-list02 > li .info {
    display: flex;
    align-items: normal;
    flex-direction: column;
  }
  .common-list02 > li .snsbox .tooltip-layerpopup {
    width: 320px;
    height: 118px;
  }
  .common-list02 > li .snsbox.scroll-type .tooltip-layerpopup {
    right: 0;
  }
  .common-list02 > li .snsbox .tooltip-scroll-wrap {
    width: 320px;
  }
  .common-list02 > li .number,
  .common-list02 > li .name {
    width: 65px;
  }
  .common-list02 > li .info .title a {
    width: auto !important;
    white-space: inherit;
    line-height: normal;
    padding: 0;
  }
  .common-viewtitle .title {
    width: auto;
  }
  .common-viewattachments .title {
    padding: 0 30px 0 20px;
  }
  .common-list02.type01 > li {
    position: relative;
    padding-top: 60px;
  }
  .common-list02.type01 > li .state {
    position: absolute;
    top: 20px;
    left: 0;
    text-align: left;
  }
}
/* [공통] 상세 */
.common-viewtitle {
  padding: 20px 0 20px 20px;
  border-top: 1px solid var(--main-clr);
  border-bottom: 1px solid var(--line-clr3);
}
.common-viewtitle::after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.common-viewtitle .title {
  float: left;
  width: 1010px;
  color: var(--body-clr);
  font-size: 20px;
  font-weight: 700;
}
.common-viewtitle .title .badge {
  margin-right: 5px;
  vertical-align: 2px;
}
.common-viewtitle .date {
  display: block;
  margin-top: 15px;
  color: #666;
  font-size: 14px;
}
.common-viewtitle .snsbox {
  position: relative;
  float: right;
  width: 64px;
}
.common-viewtitle .snsbox .tooltip-layerpopup {
  display: none;
  position: absolute;
  top: 46px;
  right: -48px;
  width: 381px;
  height: 148px;
  padding: 40px 0;
  border: 1px solid #000;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--bg-clr2);
}
.common-viewtitle .snsbox .tooltip-layerpopup::after {
  position: absolute;
  top: -9px;
  right: 67px;
  content: " ";
  display: block;
  width: 15px;
  height: 9px;
  background: url(/img/hss_common/bg_tooltip.gif) no-repeat 0 0;
}
.common-viewtitle .snsbox .tooltip-layerpopup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: #3399ff;
  z-index: 100;
}
.common-viewtitle .snsbox .snslink-view {
  display: block;
  overflow: hidden;
  width: 64px;
  height: 30px;
  background: url(/img/hss_content/com/icon_share.png) no-repeat right 20px center;
  font-size: 0;
  line-height: 0;
}

.tab-basic-contents .common-viewtitle {
  margin-top: 40px;
}

.common-viewdetail {
  padding: 40px 20px;
  border-bottom: 1px solid var(--line-clr3);
  color: #666;
  font-size: 16px;
  line-height: 30px;
}
.common-viewdetail p {
  margin-top: 35px;
  color: #666;
  font-size: 16px;
  line-height: 30px;
}
.common-viewdetail p:first-child {
  margin: 0;
}

.common-viewattachments {
  display: table;
  width: 100%;
  border-bottom: 1px solid var(--line-clr3);
}
.common-viewattachments .title {
  display: table-cell;
  height: 77px;
  padding: 0 0 0 20px;
  background: #f7f7f7;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 700;
  vertical-align: middle;
}
.common-viewattachments .list {
  display: table-cell;
  padding: 20px;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 700;
  vertical-align: middle;
}
.common-viewattachments .list li {
  margin-top: 5px;
}
.common-viewattachments .list li:first-child {
  margin-top: 0;
}

/* [공통] 테이블 이전글,다음글 보기 */
.common-previous-next {
  width: 100%;
  margin-top: 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.common-previous-next::after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.common-previous-next li {
  float: left;
  width: 50%;
  height: 78px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.common-previous-next li .link {
  position: relative;
  display: block;
  height: 78px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.common-previous-next li .link:hover,
.common-previous-next li .link:focus {
  background: #f7f6ed;
}

.common-previous-next li .type {
  position: absolute;
  top: 25px;
  right: 20px;
  display: inline-block;
  padding: 7px 34px 5px 0;
  color: #666;
  font-size: 16px;
  font-weight: 700;
}

.common-previous-next li .text {
  position: absolute;
  top: 30px;
  right: 115px;
  width: 410px;
  color: #666;
  font-size: 16px;
}

.common-previous-next li:first-child {
  border-right: 1px solid var(--line-clr3);
}

.common-previous-next li:first-child .type {
  position: absolute;
  top: 25px;
  right: auto;
  left: 20px;
  display: inline-block;
  padding: 5px 0 5px 43px;
}

.common-previous-next li:first-child .text {
  position: absolute;
  top: 30px;
  right: auto;
  left: 128px;
  width: 410px;
  color: #666;
  font-size: 16px;
}

/* [공통] 뱃지 */
.badge {
  display: inline-block;
  width: 70px;
  height: 22px;
  padding-top: 3px;
  border-radius: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #f15757;
  color: var(--bg-clr2);
  font-size: 11px;
  text-align: center;
  line-height: 16px;
  font-weight: 700;
}

.badge.style01 {
  background: #efedee;
  border: 1px solid var(--disable-clr);
  color: var(--cap-clr);
}

.badge.style02 {
  width: 43px;
  background: var(--bg-clr2);
  border: 1px solid #18a33e;
  color: #18a33e;
}

/* [공통] 커스텀 iscroll 디자인스타일 */
.iScrollVerticalScrollbar {
  position: absolute;
  z-index: 9999;
  width: 6px;
  bottom: 0;
  top: 0;
  right: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--disable-clr);
}

.iScrollVerticalScrollbar.iScrollBothScrollbars {
  bottom: 0;
}

.iScrollIndicator {
  position: absolute;
  border-radius: 8px;
}

.iScrollVerticalScrollbar .iScrollIndicator {
  width: 100%;
  background: var(--main-clr);
}

/* fs_newfnewpres_0100.html */
.pressreleases-list {
  margin-top: 23px;
  border-top: 1px solid var(--main-clr);
}

.pressreleases-list li {
  border-bottom: 1px solid var(--line-clr3);
}

.pressreleases-list li .link {
  display: table;
  overflow: hidden;
  width: 100%;
  padding: 40px 20px 40px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.pressreleases-list li .img-box {
  display: table-cell;
  padding-right: 57px;
}

.pressreleases-list li .img-box img {
  width: 325px;
}

.pressreleases-list li .info {
  display: table-cell;
  vertical-align: middle;
}

.pressreleases-list li .info .title {
  width: 1080px;
  color: var(--body-clr);
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pressreleases-list li .info .title .date {
  display: block;
  margin-top: 15px;
  color: #666666;
  font-size: 12px;
}

.pressreleases-list li .img-box + .info .title {
  width: 660px;
}

.pressreleases-list li .text {
  margin-top: 30px;
  color: #666666;
  font-size: 16px;
  line-height: 30px;
}

/* tooltip 이미지 */
.common-viewtitle .snsbox .tooltip-layerpopup .kakao {
  background: url(/img/hss_content/com/bul_kakao_off.png) no-repeat 50% 0;
}

.common-viewtitle .snsbox .tooltip-layerpopup .instagram {
  background: url(/img/hss_content/com/bul_insta_off.png) no-repeat 50% 0;
}

.common-viewtitle .snsbox .tooltip-layerpopup .facebook {
  background: url(/img/hss_content/com/bul_facebook_off.png) no-repeat 50% 0;
}

.common-viewtitle .snsbox .tooltip-layerpopup .urlcopy {
  background: url(/img/hss_content/com/bul_url_off.png) no-repeat 50% 0;
}

.common-viewtitle .snsbox .tooltip-layerpopup .sns {
  display: inline-block;
  width: 79px;
  padding-top: 65px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #666;
}

.common-viewtitle .snsbox .tooltip-layerpopup .tooltip-layerpopup-close {
  background: url(/img/hss_content/com/bg_close.png);
  font-size: 0;
}

.common-viewtitle .snsbox .tooltip-layerpopup .kakao:hover {
  background-image: url(/img/hss_content/com/bul_kakao_on.png);
}

.common-viewtitle .snsbox .tooltip-layerpopup .instagram:hover {
  background-image: url(/img/hss_content/com/bul_insta_on.png);
}

.common-viewtitle .snsbox .tooltip-layerpopup .facebook:hover {
  background-image: url(/img/hss_content/com/bul_facebook_on.png);
}

.common-viewtitle .snsbox .tooltip-layerpopup .urlcopy:hover {
  background-image: url(/img/hss_content/com/bul_url_on.png);
}

.common-previous-next .link.prev::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 20px;
  top: 26px;
  width: 14px;
  height: 25px;
  background: url(/img/hss_content/com/bul_leftarrow_off.png) no-repeat 0 0;
  background-size: cover;
}

.common-previous-next .link.next::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 20px;
  top: 26px;
  width: 14px;
  height: 25px;
  background: url(/img/hss_content/com/bul_rightarrow_off.png) no-repeat 0 0;
  background-size: cover;
}

.common-previous-next .link.prev:hover::after {
  background-image: url(/img/hss_content/com/bul_leftarrow_on.png);
}

.common-previous-next .link.next:hover::after {
  background-image: url(/img/hss_content/com/bul_rightarrow_on.png);
}

/*팝업- 위치정보 검색결과 화면 팝업*/
.loca-pop01 {
  width: 700px;
}

.loca-pop01 .info-boxWp {
  padding: 30px 30px;
  position: relative;
  border-bottom: 1px solid var(--disable-clr);
}

.loca-pop01 .info-boxWp li {
  display: table;
  vertical-align: top;
  width: 100%;
}

.loca-pop01 .info-boxWp li > strong {
  position: relative;
  display: table-cell;
  vertical-align: top;
  width: 100px;
  padding-left: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.25px;
}

.loca-pop01 .info-boxWp li .l-info {
  display: table-cell;
  vertical-align: top;
  width: auto;
  padding-right: 60px;
}

.loca-pop01 .info-boxWp li .l-info p {
  font-size: 16px;
  line-height: 36px;
  letter-spacing: -0.25px;
}

.loca-pop01 .btn-go-map a {
  position: absolute;
  right: 30px;
  top: 40px;
  width: 55px;
  height: 54px;
  background: url(/img/hss_common/ico-map-p.png) no-repeat top;
  padding-top: 60px;
}

.loca-pop01 .btn-go-map a span {
  display: block;
  color: #666;
  font-size: 12px;
  letter-spacing: -0.25px;
  text-align: center;
}

.pop-table-wp {
  padding: 40px 30px 30px;
}

.tbl-wrap.type02 {
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid var(--disable-clr);
  margin-top: 0;
}

.tbl-wrap.type02 th {
  background: #f7f7f7;
  font-size: 14px;
  border-right: 1px solid var(--disable-clr);
}

.pop-btn-wp {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
}

.pop-btn-wp button {
  width: 220px;
  height: 50px;
}

.pop-btn-wp button:first-child {
  margin-right: 5px;
}

/*팝업-위치정보레이어팝업*/
.str-searPop {
  position: relative;
  width: 500px;
}

.store-popWp {
  padding: 75px 0px 60px;
  text-align: center;
}

.store-popWp strong.info {
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.25px;
}

.store-popWp .pop-btn-wp {
  margin: 35px 0 0;
}

.store-popWp .pop-btn-wp button {
  width: 150px;
  height: 40px;
}

.layer-container button.layer-close {
  position: absolute;
  right: 30px;
  top: 20px;
  width: 23px;
  height: 23px;
  font-size: 0;
  text-indent: -9999em;
  background: url(/img/hss_common/layer-close.png) no-repeat center;
}

.layout-container::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: -999999px;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 900;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

html.js-html-layer-opened .layout-container::before {
  left: 0;
  opacity: 0.8;
}

html.js-html-layer-closed-animate .layout-container::before {
  opacity: 0;
}

.pr-roomWp .common-tblinfobox {
  margin-bottom: 20px;
}

/* 영상 */
.prroom-media {
  margin-top: 40px;
}

.media-wp {
  height: 460px;
  background: #f3f9e8;
  padding: 40px 20px 35px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 60px;
}

.media-area {
  overflow: hidden;
}

.media-area .media {
  float: left;
  width: 620px;
  height: 320px;
}

.media-txtWp {
  float: left;
  width: 380px;
  height: 350px;
  padding: 0px 0px 0 40px;
  overflow-y: scroll;
}

.media-txtWp strong.mtit {
  display: block;
  font-size: 22px;
  letter-spacing: -0.25px;
  padding-top: 5px;
}

.media-txtWp .m-txt {
  padding-top: 40px;
}

.media-txtWp .m-txt p {
  color: #666;
  font-size: 16px;
  letter-spacing: -0.25px;
  line-height: 28px;
}

.media-wp .m-str {
  color: #666;
  font-size: 14px;
  letter-spacing: -0.25px;
  margin-top: 18px;
}

ul.new-thumb-list li > a {
  display: block;
  border: 1px solid var(--disable-clr);
  text-decoration: none;
}

.new-thumbWp.media ul.new-thumb-list li .t-media-wp {
  width: 322px;
  height: 180px;
}

.new-thumbWp.media ul.new-thumb-list li .t-media-wp img {
  height: 180px;
  vertical-align: top;
}

.new-thumbWp.media ul.new-thumb-list li .txt-wp {
  border-top: 1px solid var(--disable-clr);
  padding: 17px 20px;
  height: 80px;
  box-sizing: border-box;
  min-height: inherit;
}

ul.new-thumb-list li .tit {
  display: block;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.25px;
}

/* 게시판 */
.common-list02.style01 .state {
  font-size: 14px;
  color: #666;
}

/* 글씨 색상 */
.f-color07 {
  color: var(--main-clr) !important;
}

.f-color08 {
  color: red !important;
}

/* FAQ 게시판 */
.slide-box-area.only-top .slide-box-top {
  border-bottom: 1px solid var(--disable-clr);
  border-top: 0 !important;
}

.slide-box-area.bottom {
  margin-bottom: 50px;
}

.slide-box-top h3 {
  margin: 20px 0;
  color: var(--cap-clr);
}

.radio-agree-wrap label {
  margin-right: 40px;
}

.radio-agree-wrap label:last-child {
  margin-right: 0;
}

.btn-right-wrap {
  float: right;
  position: relative;
}

.btn-slide {
  background: url("/img/hss_common/icon_select_fff.png") no-repeat center var(--body-clr);
  width: 60px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.slide-box-txt h4,
.slide-box-txt p {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.7;
}

.slide-box-area.type02 .agree-n .label-wrap:last-child::after {
  display: none;
}

.slide-box-area.type02 .agree-n .label-wrap:first-child::before {
  display: none;
}

.slide-box-area.type02 .chk-agree .label-wrap:first-child::before,
.slide-box-area.type02 .chk-agree .label-wrap:first-child::after {
  display: none;
}

.faq-tab .slide-box-area.type02.qna .slide-box-top .sub-title {
  margin: 23px 0;
}

.slide-box-top::after {
  display: block;
  content: "";
  clear: both;
}

.btn-slide-active .sub-title {
  color: var(--cap-clr) !important;
}

/*연력탭*/
.tab-basic.fsb-style .tab-basic-buttons {
  width: 460px;
  margin: 0 auto;
}

.tab-basic.fsb-style .tab-basic-buttons-item {
  border: 0;
  font-size: 28px;
}

.tab-basic.fsb-style .tab-basic-buttons-item + .tab-basic-buttons-item::before {
  top: 11px;
  bottom: 11px;
  margin-left: -19px;
  border-left: 1px solid var(--disable-clr);
}

.tab-basic.fsb-style .tab-basic-buttons-item.js-tabpanel-active {
  position: relative;
  background-color: var(--bg-clr2);
  color: var(--main-clr);
}

.tab-basic.fsb-style .tab-basic-buttons-item.js-tabpanel-active::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 3px solid var(--main-clr);
}

/*연력*/
.history-box {
  width: 1200px;
  margin-top: 40px;
  padding: 70px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #efefef;
}

.history-box::after {
  content: "";
  display: table;
  clear: both;
}

.history-box ul {
  position: relative;
  overflow: hidden;
  z-index: 0;
  padding-bottom: 15px;
}

.history-box ul::after {
  content: "";
  display: table;
  clear: both;
}

.history-box li {
  clear: both;
  width: 520px;
  margin-bottom: -15px;
}

.history-box li > div {
  position: relative;
  padding: 20px;
  background: var(--bg-clr2);
}
.history-box li > div div {
  display: flex;
  align-items: start;
  gap: 8px;
}

.history-box li > div::before {
  content: "";
  display: block;
  position: absolute;
  border: 0 solid transparent;
  border-width: 7px 10px;
  top: 0;
  border-top-color: var(--bg-clr2);
}

.history-box li > div::after {
  content: "";
  display: block;
  position: absolute;
  border: 5px solid var(--main-clr);
  border-radius: 100%;
  top: 0;
  width: 13px;
  height: 13px;
  background: var(--bg-clr2);
}

.history-box li:nth-child(2n) {
  float: left;
}

.history-box li:nth-child(2n) > div::before {
  left: 100%;
  border-left-color: var(--bg-clr2);
}

.history-box li:nth-child(2n) > div::after {
  left: 100%;
  margin-left: 28px;
}

.history-box li:nth-child(2n+1) {
  float: right;
}

.history-box li:nth-child(2n+1) > div::before {
  right: 100%;
  border-right-color: var(--bg-clr2);
}

.history-box li:nth-child(2n+1) > div::after {
  right: 100%;
  margin-right: 28px;
}

.history-box li:last-child {
  position: relative;
}

.history-box li:nth-child(2n):last-child::before {
  left: auto;
  right: -42px;
}

.history-box li:last-child::before {
  content: "";
  display: block;
  position: absolute;
  top: -8000px;
  bottom: 100%;
  left: -42px;
  border-left: 4px solid var(--main-clr);
  z-index: -1;
}

.history-box .year {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--main-clr);
  margin-bottom: 8px;
}

.history-box .month {
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}

.history-box .text {
  font-size: 14px;
  line-height: 24px;
}

@media (max-width: 1200px) {
  .history-box .text {
    width: 100%;
  }
}
/* 안내문구 - 리스트 스타일 */
.popup-body01 .notice-list-wrap {
  margin-top: 30px;
}
.popup-body01 .notice-list-wrap:first-child {
  margin-top: 0;
}

.notice-list-wrap .sub-text {
  font-size: 14px;
}

.notice-list-wrap + .tab-basic {
  margin-top: 35px;
}

.product-view + .notice-list-wrap {
  margin-top: 20px;
}

.table-wrap01 + .notice-list-wrap {
  margin-top: 20px;
}

.info-table-area + .notice-list-wrap {
  margin-top: 40px;
}

.sub-text + .notice-list {
  margin-top: 10px;
}

.tts + .notice-list-wrap {
  margin-top: 40px;
}

.notice-list-wrap + .tab-basic.pt50 {
  margin-top: -50px;
}

.notice-list-wrap.type02 {
  background-color: transparent;
}

.notice-list-wrap.type02 .notice-list {
  background: transparent;
}

.notice-list-wrap.type02 .notice-list li {
  padding-left: 0;
}

.notice-list-wrap.type02 .notice-list li::before {
  display: none;
}

.notice-list-in li {
  padding-left: 0;
}

.notice-list-in li:first-child {
  margin-top: 5px;
}

.notice-list-in li::before {
  display: none;
}

.textform-style01 {
  margin: 47px 0 -5px;
  text-align: center;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
}

.table-titlestyle01 {
  margin-top: 9px;
  font-weight: 500;
}

.table-textstyle01 {
  margin-top: 5px;
  font-size: 14px;
  line-height: 23px;
}

.common-viewdetail {
  padding: 40px 20px;
  border-bottom: 1px solid var(--line-clr3);
  color: #666;
  font-size: 16px;
  line-height: 30px;
}

.common-viewdetail p {
  margin-top: 35px;
  color: #666;
  font-size: 16px;
  line-height: 30px;
}

.common-viewdetail p:first-child {
  margin: 0;
}

/* 190613 수정 */
.table-area .btn-area.style01 {
  margin-top: -10px;
  padding-top: 0;
}

.search-table-area .btn-area.type02,
.info-table-area .btn-area.type02 {
  margin-top: 40px !important;
  padding-top: 0;
}

/* event list */
.event-info {
  margin-top: 40px;
}

.event-info dt,
.event-info dd {
  display: inline-block;
  margin-top: 15px;
  vertical-align: top;
}

.event-info .title {
  width: 7%;
  margin-top: 19px;
  margin-right: 15px;
  font-size: 14px;
  font-weight: 700;
  color: var(--body-clr);
}

.event-info .text {
  width: 90%;
  font-size: 14px;
  color: var(--body-clr);
  line-height: 25px;
}

.event-info .text strong {
  font-weight: 700;
}

.event-info .text.type01,
.event-info .title.type01 {
  margin-top: 18px;
  vertical-align: top;
}

.event-info .title.type01 {
  margin-top: 22px;
}

.event-info .btn-sm-wh {
  margin-left: 15px;
}

.event-list li {
  font-size: 14px;
  color: var(--body-clr);
  line-height: 28px;
  font-weight: 400;
}

/* 모바일 페이징 */
.paging-wrap {
  margin-top: -20px;
  text-align: center;
}

.paging-wrap a {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-top: 50px;
  padding-top: 11px;
  vertical-align: top;
  border: 1px solid #efefef;
  font-size: 14px;
  color: #666;
  font-weight: 700;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.paging-wrap .prev {
  background: url(/img/hss_common/page_left.png) no-repeat 50% 50%;
  border: 0;
  font-size: 0;
}

.paging-wrap .next {
  background: url(/img/hss_common/page_right.png) no-repeat 50% 50%;
  border: 0;
  font-size: 0;
}

.paging-wrap .on {
  background: var(--cap-clr);
  color: var(--bg-clr2);
  border-color: var(--cap-clr);
}

.paging-wrap a + a {
  margin-left: 2px;
}

/*소식 - 홍보자료실 -영상 */
.prroom-media {
  margin-top: 40px;
}

.media-wp {
  height: 460px;
  margin-bottom: 60px;
  padding: 40px 20px 35px 40px;
  background: #f3f9e8;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.media-area {
  overflow: hidden;
}

.media-area .media {
  float: left;
  width: 620px;
  height: 320px;
}

.media-scroll-wrap {
  float: left;
  position: relative;
  width: 380px;
  height: 350px;
  padding: 0;
}

.media-scroll {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: 5px;
  right: 5px;
  left: 5px;
  text-align: left;
}

.media-scroll .scroller {
  position: absolute;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}

.media-scroll .scroller p {
  padding-right: 20px;
}

.media-area .mtit {
  display: block;
  font-size: 22px;
  letter-spacing: -0.25px;
  padding-top: 5px;
}

.media-scroll .m-txt {
  padding-top: 40px;
}

.media-scroll .m-txt p {
  color: #666;
  font-size: 16px;
  letter-spacing: -0.25px;
  line-height: 28px;
}

.media-wp .m-str {
  margin-top: 18px;
  color: #666;
  font-size: 14px;
  letter-spacing: -0.25px;
}

.new-thumbWp.media ul.new-thumb-list li .t-media-wp {
  width: 322px;
  height: 180px;
}

.new-thumbWp.media ul.new-thumb-list li .t-media-wp img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  /*임시 : 동영상 올리고나중에 삭제해야함 */
}

.new-thumbWp.media ul.new-thumb-list li .txt-wp {
  height: 80px;
  border-top: 1px solid var(--disable-clr);
  padding: 17px 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  min-height: inherit;
}

/* [공통] 검색영역 */
.searchbox-wrap {
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

.searchbox-wrap .input-text {
  width: 400px;
  height: 47px;
  padding: 0 50px 0 11px;
  border: 1px solid var(--disable-clr);
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.6;
  border-radius: 10px;
  box-sizing: border-box;
}

.searchbox-wrap .search-send {
  display: inline-block;
  width: 40px;
  height: 47px;
  margin-left: -50px;
  background: url(/img/common/icon_search.png) right 12px center/22px 22px no-repeat;
}

/* [공통] 테이블 상단 total/search 영역 */
.common-tblinfobox {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.common-tblinfobox .totalbox-wrap {
  margin-right: auto;
  font-size: 16px;
  font-weight: 400;
}

.common-tblinfobox .searchbox-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.common-tblinfobox .searchbox-wrap:only-child {
  margin-left: auto;
}
.common-tblinfobox .searchbox-wrap .input-text {
  height: 47px;
}
.common-tblinfobox .searchbox-wrap .search-box {
  padding: 0;
}
.common-tblinfobox .searchbox-wrap .select-basic {
  padding: 10px;
  background-size: 10px;
  line-height: normal;
}

.searchbox-wrap.type01 input {
  width: 300px;
  font-weight: 400;
}

@media (max-width: 1200px) {
  .common-tblinfobox {
    flex-direction: column;
  }
}
/* 셀렉트박스 있을때 */
/* .common-tblinfobox.style01 .search-box {float:right;width:187px;margin-right: 13px;} */
.common-tblinfobox.style01 .search-box {
  display: inline-block;
  width: 187px;
}

.common-tblinfobox.style01 .select-basic {
  min-height: 40px;
}

/* Q&A */
.essential-box {
  margin-bottom: 10px;
  text-align: right;
}

.essential-box .essential {
  margin-right: 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--body-clr);
}

.essential::before {
  content: "*";
  color: var(--neg-clr);
  padding: 3px;
}

.email-box select {
  margin-left: 10px;
  vertical-align: middle;
}

textarea {
  width: 100%;
  border: 1px solid var(--disable-clr);
  height: 270px;
  padding: 10px;
  resize: none;
  overflow-y: auto;
}

.org-accord-wp {
  margin-top: 60px;
}

.org-info-wp {
  padding: 28px 20px;
}

.org-info {
  padding-bottom: 15px;
}

.org-info p {
  display: inline-block;
  font-size: 16px;
  letter-spacing: -0.5px;
}

.org-info p strong {
  display: inline-block;
  margin-right: 5px;
  font-weight: 700;
}

.org-txt {
  display: table;
  width: 100%;
}

.org-txt .wtit {
  display: table-cell;
  vertical-align: top;
  width: 75px;
  padding-top: 5px;
}

.org-txt .wtit strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.25px;
}

.org-txt .wtxt {
  display: table-cell;
  vertical-align: top;
  width: auto;
}

.org-txt .wtxt li {
  position: relative;
  padding-left: 13px;
  color: #666;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: -0.25px;
}

.noitce-wrap {
  margin-top: 8px;
}

.noitce-wrap > li {
  padding: 0 10px 0 36px;
  font-size: 16px;
  color: var(--body-clr);
  font-weight: 400;
  line-height: 32px;
  text-indent: -15px;
  word-break: keep-all;
}

.noitce-wrap li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-top: 11px;
  margin-right: 10px;
  background: var(--cap-clr);
  border-radius: 50%;
  vertical-align: top;
}

.notice-tit {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--neg-clr);
}

.notice-tit::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 15px;
  background: url(/img/hss_common/bul-notice.png) no-repeat;
  vertical-align: middle;
  filter: brightness(2) opacity(0.85);
}

/* input-width */
.maxw-none {
  max-width: inherit !important;
}

.w320 {
  max-width: 320px !important;
}

.pro-accordion-item {
  position: relative;
}

.pro-accordion-head {
  position: relative;
}

.pro-accordion-text {
  display: block;
  padding: 0 20px;
  background-color: var(--bg-clr2);
  font-size: 16px;
  font-weight: 700;
  line-height: 50px;
  color: var(--body-clr);
}

.pro-accordion-opener {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid var(--disable-clr);
}

.pro-accordion-layer {
  height: 0;
  display: none;
  background: #f7f7f7;
}

.pro-accordion-layer .component-layer-close-button {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

.pro-accordion-list {
  /* border-bottom:1px solid var(--disable-clr); */
  border-left: 0;
  border-right: 0;
}

.pro-accordion-opener {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/img/hss_common/ico-accor.png) no-repeat 100% center;
}

.js-accordion-opened .pro-accordion-opener {
  background: url(/img/hss_common/ico-accor-on.png) no-repeat 100% center;
  border-top: 1px solid var(--disable-clr);
  border-bottom: 1px solid var(--disable-clr);
}

.js-accordion-opened .pro-accordion-text {
  background-color: #f7f7f7;
}

.pro-infoBox {
  padding: 0 20px 30px;
}

.pro-infoBox p.info-txt {
  padding: 28px 80px 28px 0;
  color: #666;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.25px;
}

.table01-wrap {
  background: var(--bg-clr2);
  border-top: 1px solid var(--line-clr3);
  border-bottom: 1px solid var(--line-clr3);
}

.table01-wrap table th {
  background: var(--bg-clr2);
  border-right: 1px solid var(--line-clr3);
}

.table01-wrap table th.vam {
  vertical-align: middle;
}

.ui-accordion-list.style01 {
  margin-top: 20px;
}

.terms-wrap {
  padding: 20px 20px 15px;
  font-size: 14px;
}

.terms-wrap .terms-box {
  margin-top: 7px;
}

.terms-wrap .terms-box li,
.terms-wrap .terms-box p {
  font-weight: 400;
  line-height: 24px;
}

/* 레이아웃 관련 */
.sub-title-area::after {
  content: "";
  display: block;
  clear: both;
}

.sub-title-area {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.sub-title-area + .table-wrap01,
.sub-title-area + .com-msgbox,
.sub-title-area + .steplist-box {
  margin-top: 20px;
}

.sub-title-area .notice-subtext {
  margin-top: 15px;
}

.sub-title-area + .notice-list-wrap {
  margin-top: 15px;
}

.sub-title {
  display: inline-block;
  width: auto;
  padding-right: 15px;
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
}
.sub-title.accoBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sub-text {
  font-size: 16px;
  font-weight: 500;
}

.btn-list {
  width: 26px;
  height: 22px;
}

.btn-list::after {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  margin: auto;
  background: url(/img/common/iconbox_account_list.png) no-repeat 0 2px/100%;
}

.btn-calender {
  width: 26px;
  height: 23px;
  background: url(/img/common/iconbox_account_list.png) 0 100%/100% no-repeat;
}

.btn-calender::after {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  margin: auto;
  background: url(/img/common/icon/icon_calendar.png) no-repeat center/contain;
}

.content .info-table-area:first-child {
  padding-top: 0;
}

.content .info-table-area + .notice-subtext {
  margin-top: 30px;
}

.info-table-area.gap-type01 .common-text01 {
  margin-top: 15px;
}

.info-table-area.gap-type01 .btn-thin.resize {
  margin-top: 10px;
}

.tts + .sub-title-area {
  margin-top: 40px;
}

@media (max-width: 1200px) {
  .info-table-area + .info-table-area {
    margin-top: 40px;
  }
  .sub-title-area .notice-subtext {
    margin-top: 0;
  }
  .sub-title {
    font-size: 18px;
  }
}
.common-text04 {
  color: #666;
  font-size: 16px;
  line-height: 24px;
}

/* text _ 16px #666 */
.common-text01 {
  font-weight: 400;
}

.common-text01.other-txt {
  margin-top: 30px;
}

.common-text01.dot {
  padding-left: 15px;
}

.common-text01.dot::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: -2px 5px 0 -9px;
  border-radius: 50%;
  background: #666;
  vertical-align: middle;
}

.common-text01,
.common-text01 strong {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
  line-height: 23px;
}

.common-text01.sm-indent {
  padding-left: 17px;
  text-indent: -14px;
}

.common-text01 a {
  color: #666;
  text-decoration: underline;
}

.common-text01 a:hover {
  color: #18a33e;
}

.common-text01 + .common-stit02 {
  margin-top: 30px;
}

.common-text01 + .com-list01 {
  margin-top: 30px;
}

.common-text01 + .com-list04 {
  margin-top: 33px;
}

.common-text01 + .table-wrap01 {
  margin-top: 35px;
}

.common-text01 + .sub-title-area {
  margin-top: 30px;
}

.common-stit02 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 15px;
}

.common-text01 .link {
  display: inline-block;
}

.common-text03 {
  padding-left: 16px;
}

/* text _ 14px #666 */
.common-text02 {
  font-size: 14px;
  color: #666;
  line-height: 23px;
}

.table-wrap01 + .common-text02 {
  margin-top: 15px;
}

.btn-area + .common-text01 {
  margin-top: 15px;
}

/* list _ 16px #666 */
/* .common-list01 {margin:8px 0 29px;} */
.common-list01 {
  margin: 8px 0 0;
}

.common-list01 li {
  margin-top: 3px;
  font-size: 14px;
  color: #666;
  line-height: 23px;
  font-weight: 400;
}

.common-list01 li p {
  font-weight: 400;
}

.common-list01.dot > li {
  padding-left: 15px;
}

.common-list01.dot > li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: -2px 5px 0 -9px;
  border-radius: 50%;
  background: #666;
  vertical-align: middle;
}

/* 개인정보 처리방침 */
.version-download-box {
  margin-top: 53px;
}

@media (max-width: 1200px) {
  .version-download-box {
    margin-top: 20px;
  }
  .info-table-area.first-area {
    padding-top: 30px;
  }
}
.com-list01 li {
  margin-top: 11px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}

.com-list02 li {
  margin-top: 0;
  padding-left: 17px;
  font-size: 14px;
  color: #666;
  line-height: 23px;
}

.com-list03 li {
  margin-top: 0;
  font-size: 14px;
  color: #666;
  line-height: 23px;
  font-weight: 400;
}

.com-list04 li {
  margin-top: 10px;
  font-size: 16px;
  color: #666;
  line-height: 28px;
  font-weight: 400;
}

.com-list04 li p {
  font-weight: 400;
  line-height: 28px;
  color: #666;
}

.com-list04 li > p.com-msg02 {
  padding-left: 17px;
  text-indent: 0;
}

.com-list05 {
  margin-top: 33px;
}

.com-list05 li {
  margin-top: 8px;
  font-size: 16px;
  color: #666;
  line-height: 28px;
  font-weight: 400;
}

/* 햇살론 근저당권  */
.notice-type01 {
  margin-left: 15px;
  font-size: 16px;
}

.notice-type01 .title {
  margin-top: 9px;
  font-size: 16px;
  font-weight: 500;
}

.notice-type01 .text {
  line-height: 30px;
  font-weight: 400;
}

.notice-subtext strong {
  font-weight: 500;
}

.notice-subtext {
  padding-left: 15px;
  text-indent: -15px;
  font-size: 14px;
  line-height: 23px;
}

.notice-subtext::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-top: 8px;
  margin-right: 10px;
  background: var(--cap-clr);
  border-radius: 50%;
  vertical-align: top;
}

.notice-type01 .notice-list.style02 li {
  padding-bottom: 0;
  padding-left: 0;
  line-height: 24px;
}

.notice-type01 .notice-list.style02 li .text {
  margin-top: 2px;
  font-weight: 400;
  line-height: 24px;
}

.notice-type01 .notice-list.style02 li::before {
  display: none;
}

.table-wrap01 + .notice-list {
  padding-top: 15px;
}

.table-wrap01 + .notice-subtext {
  padding-top: 15px;
}

.table-type04.style01 td,
.table-type04.style01 th {
  width: auto !important;
}

.table-type04.style01 td {
  font-size: 14px;
  font-weight: 400;
}

.table-type04.style01 .notice-list li p,
.table-type04.style01 .notice-list li,
.table-type01.style01 .notice-list li {
  font-size: 14px;
  font-weight: 400;
}

.table-type04.style01 .notice-list li p,
.table-type01.style01 .notice-list li {
  line-height: 24px;
}

.table-type04.style01 .notice-list .btn-sm-wh {
  margin-top: 2px;
}

.table-type01.style01 td,
.table-type01.style01 th {
  line-height: 24px;
}

/* otp */
.bg-otpimg {
  margin-top: 50px;
  padding: 30px;
  background: #f7f7f7 url(/img/common/bg_otpimg.png) no-repeat right 80px center;
  background-size: 20%;
}

.bg-otpimg .warn-title {
  width: 70%;
}

.bg-otpimg .warn-title::after {
  content: "";
}

.bg-otpimg .warn-txt {
  width: 70%;
}

.bg-otpimg + .info-table-area {
  padding-top: 50px;
}

.icon-btr {
  width: 40px;
  height: 16px;
  background: url(/img/common/icon_btr.png) no-repeat center center/28px;
  display: inline-block;
  vertical-align: inherit;
}

.icon-lobat {
  width: 224px;
  height: 132px;
  background: url(/img/common/MRT-700nP_low.gif) no-repeat 50% 50%;
  display: inline-block;
  vertical-align: inherit;
}

.warn-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.warn-txt {
  font-size: 16px;
  line-height: 24px;
}

.icon-otpex {
  width: 540px;
  height: 168px;
  position: relative;
  top: 0;
  left: 0;
  background: url(/img/hss_content/com/MRT-700nP_otplay.gif) no-repeat center center;
  margin: 10px 0 10px 10px;
}

.icon-otpbg {
  position: absolute;
  top: 0;
  left: 10px;
  background: url(/img/hss_content/com/icon_otpbgimg.png);
  width: 100%;
  height: 100%;
}

/*190311 PEY 추가*/
.icon-list-box {
  width: 100%;
}

.icon-list-box > li {
  height: auto;
  min-height: 393px;
  /*20190531 수정*/
  padding: 40px 22px;
  width: 25%;
  border-right: 1px solid #efefef;
  float: left;
  text-align: center;
}

.icon-list-box > li:last-child {
  border-right: none;
}

.icon-list-txt {
  font-weight: bold;
  font-size: 16px;
  padding: 20px 0;
}

.icon-list01,
.icon-list02,
.icon-list03,
.icon-list04 {
  width: 107px;
  height: 97px;
  background: url(/img/hss_content/com/icon_list01.png);
}

.icon-list02 {
  background: url(/img/hss_content/com/icon_list02.png);
}

.icon-list03 {
  background: url(/img/hss_content/com/icon_list03.png);
}

.icon-list04 {
  background: url(/img/hss_content/com/icon_list04.png);
}

.notice-list.nolist-type2 li {
  font-size: 14px;
}

.notice-list.sm li {
  padding-bottom: 10px;
  font-size: 14px;
}

.notice-list li:last-child {
  padding-bottom: 0;
}

@media (max-width: 1200px) {
  .m-none {
    display: none;
  }
  .w-none {
    display: block;
  }
  .content .m-gap-none {
    margin-top: 0;
  }
  .common-title {
    display: none;
  }
  .common-stit {
    margin-top: 21px;
    /*font-size:15px;*/
  }
  .common-text01,
  .common-text01 strong {
    font-size: 12px;
  }
  .common-text02 {
    font-size: 12px;
    line-height: 19px;
  }
  .common-list01 li {
    font-size: 14px;
    line-height: 21px;
  }
  .common-list01.dot > li {
    line-height: 21px;
  }
  .common-titlestyle01 {
    font-size: 19px;
  }
  /* 테이블 */
  .table-type04.style01 td,
  .table-type04.style01 th {
    width: auto !important;
  }
  /*버튼*/
  .btn-box-wrap {
    margin-top: 15px;
  }
  .btn-box {
    text-align: center;
  }
  /*테이블*/
  .tbl-style03 th {
    min-width: 80px;
  }
  /*링크탭*/
  .tab-basic-buttons.link {
    display: none;
  }
  .tab-select {
    display: block;
  }
  .tab-select .sel-basic {
    width: 100%;
  }
  .tab-select ~ .fin-infobox {
    margin-top: 30px;
  }
  /* fs_fsbdire_0100 _ 오시는길 */
  .fsb-bus-list > li {
    width: auto;
    padding-right: 20px;
  }
  .fsb-bus-list .bus-badge {
    width: 48px;
    margin-right: 5px;
    font-size: 12px;
  }
  th.fsb-transport img {
    width: 60px;
  }
  /* fs_fingold_0100 _ 상단 infobox */
  .fin-infobox {
    min-height: auto;
    margin: 0 -18px 0;
    padding: 18px 16px;
  }
  .fin-infobox::after {
    display: none;
  }
  .fin-infobox .title {
    font-size: 17px;
  }
  .fin-infobox .text {
    font-size: 16px;
    line-height: 23px;
  }
  /* fs_compoly_0101 (개인정보처리방침) */
  .version-download-box .sel-basic {
    width: 100%;
  }
  .version-download-box .btn-style01 {
    width: 100%;
    margin: 15px 0 0 0;
  }
  .version-download-box.flex .btn-style01 {
    width: auto;
    margin: 0;
  }
  /* fs_fsbintresta_0100 _ 설립 및 주요업무 */
  .fsb-bg-textbox {
    background: transparent;
  }
  .fsb-msg01 {
    font-size: 15px;
    line-height: 22px;
  }
  /*주요목적리스트*/
  .fsb-purpose-list > li {
    float: none;
    width: 100%;
    min-height: 150px;
    padding: 15px 0 15px;
    border-left: none;
    border-top: 1px solid var(--line-clr3);
  }
  .fsb-purpose-list > li:first-child {
    border-top: none;
  }
  .fsb-purpose-list > li .title::before,
  .fsb-purpose-list li:nth-child(2) .title::before,
  .fsb-purpose-list li:nth-child(3) .title::before,
  .fsb-purpose-list li:nth-child(4) .title::before {
    width: 100%;
    height: 100px;
    background-size: 70px;
  }
  .fsb-purpose-list .title {
    float: left;
    width: 115px;
    text-align: center;
  }
  .fsb-purpose-list .common-list01 {
    float: left;
    width: calc(100% - 130px);
    margin: 0;
  }
  /*연력*/
  .history-box {
    width: 100%;
    padding: 17px;
  }
  .history-box li {
    width: calc(100% - 52px);
    margin-bottom: 10px;
  }
  .history-box li:nth-child(2n) {
    float: right;
  }
  .history-box li:nth-child(2n) > div::before {
    right: 100%;
    left: auto !important;
    border-left-color: transparent !important;
    border-right-color: var(--bg-clr2);
  }
  .history-box li:nth-child(2n) > div::before {
    right: 100%;
    border-right-color: var(--bg-clr2);
  }
  .history-box li:nth-child(2n) > div::after {
    left: unset;
    right: 100%;
    margin: 0 28px 0 0;
  }
  .history-box li:nth-child(2n):last-child::before {
    left: -42px;
    right: auto;
  }
  /* fs_fsbethicode_0100 _ 상단 infobox _윤리강령행동지침 */
  .fsb-infobox {
    min-height: auto;
    margin: 0 -18px 0;
    padding: 18px 16px;
  }
  .fsb-infobox::after {
    display: none;
  }
  .fsb-infobox .title {
    font-size: 17px;
  }
  .fsb-infobox .text {
    font-size: 16px;
    line-height: 23px;
  }
  .common-viewtitle .snsbox .tooltip-layerpopup {
    right: -3px;
    width: 193px;
    height: 62px;
    padding: 19px 0 40px 0;
  }
  .common-viewtitle .snsbox .tooltip-layerpopup::after {
    right: 20px;
  }
  .common-viewtitle .snsbox .tooltip-layerpopup .kakao,
  .common-viewtitle .snsbox .tooltip-layerpopup .instagram,
  .common-viewtitle .snsbox .tooltip-layerpopup .facebook,
  .common-viewtitle .snsbox .tooltip-layerpopup .urlcopy {
    background-size: 80%;
    line-height: 0;
  }
  .common-viewtitle .snsbox .tooltip-layerpopup .sns {
    width: 32px;
    padding-top: 34px;
    font-size: 0;
  }
  /* [공통] 버튼정렬 */
  .btnalign-box {
    margin-top: 15px;
  }
  /* [공통] 상세 */
  .common-viewtitle .title {
    width: auto;
    padding-right: 10px;
    font-size: 18px;
    line-height: 1.5;
  }
  .common-viewtitle .date {
    margin-top: 5px;
    font-size: 12px;
  }
  .common-viewdetail {
    padding: 20px 10px;
    border-bottom: 1px solid var(--line-clr3);
    color: #666;
    font-size: 16px;
    line-height: 30px;
  }
  .common-viewdetail p {
    margin-top: 15px;
    color: #666;
    font-size: 16px;
    line-height: 30px;
  }
  /* [공통] 테이블 이전글,다음글 보기 */
  .common-previous-next {
    margin-top: 30px;
  }
  .common-previous-next li {
    height: 40px;
  }
  .common-previous-next li .link {
    height: 40px;
  }
  .common-previous-next li .text {
    display: none;
  }
  .common-previous-next li .type {
    top: 6px !important;
  }
  .common-previous-next li:first-child {
    border-top: none;
  }
  .common-previous-next .link.next::after {
    top: 7px;
  }
  .common-previous-next .link.prev::after {
    top: 7px;
  }
  .common-previous-next li:first-child .type {
    padding-top: 7px;
  }
  /* [공통] 검색영역 */
  .searchbox-wrap {
    display: inline-block;
    width: 100%;
    max-width: 480px;
    font-size: 0;
    line-height: 0;
  }
  .searchbox-wrap .input-text {
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--main-clr);
    border-radius: 10px 0 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
    font-size: 16px;
    line-height: 1.6;
  }
  .searchbox-wrap .search-send {
    width: 47px;
    height: 47px;
    min-width: 47px;
    display: inline-block;
    margin-left: -10px;
    border-radius: 0 10px 10px 0;
    background: var(--main-clr) url(/img/hss_common/button/btn_search.gif) no-repeat 50%;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
  }
  .searchbox-wrap.type01 input {
    width: 300px;
    font-weight: 400;
  }
  .searchbox-wrap .input-text {
    width: 100%;
  }
  .common-tblinfobox.style01 .search-box {
    float: none;
    width: 30%;
  }
  .common-tblinfobox.style01 .select-basic {
    border: 1px solid var(--main-clr);
  }
  /*소식 _ 홍보자료실 _목록 */
  .pr-roomWp {
    margin: 0;
  }
  .pr-roomWp .tab-basic-buttons {
    margin: 15px 0 20px;
  }
  .searchbox-wrap.type01 {
    position: relative;
    width: 100%;
    padding-right: 41px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .searchbox-wrap.type01 input {
    width: 100%;
  }
  .searchbox-wrap.type01 button {
    position: absolute;
    right: 0;
    top: 0;
  }
  .pr-roomWp .common-tblinfobox {
    margin-top: 15px;
    padding: 0 16px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  ul.new-thumb-list {
    margin: 0;
    /*padding:0 10px;*/
  }
  ul.new-thumb-list li > a {
    border: 0;
  }
  ul.new-thumb-list li {
    width: 100%;
    margin: 0;
    padding: 20px 16px 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid var(--disable-clr);
  }
  ul.new-thumb-list li:last-child {
    border-bottom: 0;
  }
  ul.new-thumb-list li .thumb-wp {
    text-align: center;
    width: inherit;
    height: inherit;
  }
  ul.new-thumb-list li .thumb-wp img {
    width: 100%;
    height: auto;
  }
  ul.new-thumb-list li .txt-wp {
    padding: 13px 0px 16px;
    min-height: inherit;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  ul.new-thumb-list li .tit {
    color: var(--body-clr);
    font-size: 14.6px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: -0.25px;
  }
  ul.new-thumb-list li .txt-wp .date {
    display: block;
    margin-top: 15px;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.25px;
  }
  .new-thumbWp.tmb-type02 ul.new-thumb-list li .txt-wp {
    border-top: 0;
  }
  /* 2개노출
  ul.new-thumb-list {margin:0 -5px;/*padding:0 10px;*/
  /*}
  ul.new-thumb-list li {width:calc(50% - 10px);margin:0 5px;padding-top:20px;}
  ul.new-thumb-list li .thumb-wp {text-align:center;width:inherit;height:inherit;}
  ul.new-thumb-list li .thumb-wp img {width:100%;height:auto;}
  ul.new-thumb-list li .txt-wp {padding:10px 13px;min-height:80px;box-sizing:border-box;-webkit-box-sizing:border-box;}
  ul.new-thumb-list li .tit{color:var(--body-clr);font-size:14.6px;font-weight: $bold;line-height:22px;letter-spacing:-.25px;}
  ul.new-thumb-list li .txt-wp .date{display:block;color:#666;font-size:12px;font-weight: $bold;letter-spacing:-.25px;margin-top:15px;}
  */
  /*저축은행 - 사회공헌활동 list */
  .social-cont {
    margin: 20px -16px;
  }
  .new-thumbWp.tmb-type02 ul.new-thumb-list li .thumb-wp {
    width: 100%;
    height: auto;
  }
  .new-thumbWp.tmb-type02 ul.new-thumb-list li .thumb-wp img {
    width: 100%;
    height: auto;
    vertical-align: top;
  }
  .social-cont .common-tblinfobox {
    margin-top: 15px;
    padding: 0 16px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  /*소식 - 저축은행지 - 목록 */
  .bankNews-cont {
    margin: 15px -16px 0;
  }
  .new-thumbWp.tmb-type03 ul.new-thumb-list li {
    padding-bottom: 20px;
  }
  .new-thumbWp.tmb-type03 ul.new-thumb-list li .thumb-wp {
    width: 100%;
    height: auto;
  }
  .new-thumbWp.tmb-type03 ul.new-thumb-list li .thumb-wp img {
    width: 100%;
    height: auto;
    vertical-align: top;
  }
  .new-thumbWp.tmb-type03 ul.new-thumb-list li .info .tit {
    padding: 11px 0 16px;
  }
  .new-thumbWp.tmb-type03 ul.new-thumb-list li .info .btn-wp {
    width: 100%;
  }
  .new-thumbWp.tmb-type03 ul.new-thumb-list li .info .btn-wp > button {
    width: inherit;
    min-width: inherit;
    height: 33px;
    width: calc(50% - 5px);
    margin: 0;
    vertical-align: top;
    font-size: 12px;
    line-height: 33px;
  }
  .new-thumbWp.tmb-type03 ul.new-thumb-list li .info .btn-wp .btn-style01 .down {
    margin: 0 3px;
    padding: 0 25px 0 0;
    background: url(../img/common/button/btn_down.png) no-repeat right center;
    background-size: 15px 15px;
  }
  .new-thumbWp.tmb-type03 ul.new-thumb-list li .info .btn-wp .qview {
    display: inline-block;
    padding: 0 24px 0 0;
    background: url(../img/common/button/btn_search.png) no-repeat right center;
    background-size: 15px 15px;
  }
  /*소식 - 홍보자료실 -영상 */
  .prroom-media {
    margin-top: 20px;
  }
  .media-wp {
    height: inherit;
    margin-bottom: 20px;
    padding: 20px 20px 18px 20px;
    background: #f3f9e8;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .media-area .media {
    float: inherit;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
  .media-area .media img {
    width: 100%;
    /* 임시 나중에 동영상 넣으면 삭제*/
  }
  .media-scroll-wrap {
    float: inherit;
    position: relative;
    width: 100%;
    height: 150px;
    padding: 0px 10px 0 10px;
    margin-left: 0px;
  }
  .media-scroll {
    overflow: hidden;
    position: absolute;
    z-index: 1;
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    text-align: left;
  }
  .media-scroll .scroller p {
    padding-right: 20px;
  }
  .media-scroll strong.mtit {
    display: block;
    padding-top: 5px;
    font-size: 17px;
  }
  .media-scroll .m-txt {
    padding-top: 20px;
  }
  .media-scroll .m-txt p {
    color: #666;
    font-size: 11px;
    letter-spacing: -0.25px;
    line-height: 20px;
  }
  .media-wp .m-str {
    color: #666;
    font-size: 10px;
    letter-spacing: -0.25px;
    margin-top: 10px;
  }
  .new-thumbWp.media ul.new-thumb-list li {
    padding-bottom: 6px;
  }
  .new-thumbWp.media ul.new-thumb-list li .t-media-wp {
    width: 100%;
    height: auto;
  }
  .new-thumbWp.media ul.new-thumb-list li .t-media-wp img {
    width: 100%;
    height: auto;
    vertical-align: top;
    /*임시 : 동영상 올리고나중에 삭제해야함 */
  }
  .new-thumbWp.media ul.new-thumb-list li .txt-wp {
    min-height: inherit;
    height: inherit;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 13.3px 0 6px;
  }
  /*저축은행찾기_빠른검색*/
  .store-searchWp {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    gap: 20px;
    margin: 0;
    overflow: inherit;
  }
  .store-optWp {
    float: inherit;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .store-mapWp {
    float: none;
    width: 100%;
    height: initial;
    min-height: initial;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .map-area {
    width: 100%;
    height: 250px;
    min-height: initial;
    margin: 0;
    /*지도 영역 높이 임시*/
  }
  .map-area img {
    width: 100%;
    height: inherit;
  }
  /*나중에 지도 넣으면 삭제*/
  .s-inp-optWp {
    height: inherit;
    padding: 0 16px;
  }
  .store-optWp .check-optWp {
    padding: 26px 0 20px;
  }
  .store-optWp .check-optWp .chk-wrap {
    display: inline-block;
    width: 32.5%;
    margin-bottom: 13px;
  }
  .search-tabWp {
    width: 100%;
    height: inherit;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .search-tabWp .tab-basic-buttons-item {
    padding: 9px 10px 8px;
    font-size: 13.3px;
  }
  .sr-listWp ul {
    padding: 0;
  }
  .ser-result {
    padding: 11px 16px 17px;
  }
  .ser-result p {
    font-size: 13.3px;
    letter-spacing: -0.25px;
    line-height: 20px;
  }
  .ser-result p strong {
    color: #18a33e;
  }
  .sr-listWp :not(.on) + li {
    border-top: 1px solid var(--line-clr3);
  }
  .sr-listWp ul li a {
    padding: 20px 10px 20px 5px;
    background: none;
  }
  .sr-listWp ul li .t-logo {
    width: 90px;
    border: 0;
  }
  .sr-listWp ul li .t-logo img {
    width: 100%;
  }
  .sr-listWp ul li .s-info {
    flex-grow: 1;
  }
  .sr-listWp ul li .s-info .tit {
    font-size: 14px;
    font-weight: 700;
  }
  .sr-listWp ul li .s-info p.add,
  .sr-listWp ul li .s-info p.add02,
  .sr-listWp ul li .s-info p.add03 {
    margin-top: 3px;
    font-size: 12px;
    line-height: 20px;
  }
  /*저축은행찾기_지역검색*/
  .regionS .r-info {
    font-size: 13px;
    padding: 15px 10px;
  }
  .r-opt-wp {
    height: inherit;
    background: var(--bg-clr2);
  }
  .rlist-opt li button {
    height: 35px;
    padding: 7px 0;
    text-align: center;
  }
  .rlist-opt li button span {
    display: inline-block;
    font-size: 13px;
    letter-spacing: -0.25px;
  }
  /* select box */
  .mobile-viewbox .search-box .select-basic {
    margin-bottom: -10px;
    border-color: var(--main-clr);
  }
  /* Q&A */
  /* .noitce-wrap li {padding: 0 10px 0 35px;;font-size:13px;line-height:21px;}
  .noitce-wrap li::before {margin-top:7px;}
  .notice-tit {margin-top:13px;font-size:12px;} */
  .noitce-wrap {
    display: none;
  }
  .notice-tit {
    display: none;
  }
  .essential-box {
    display: none;
  }
  .email-box .input-basic {
    width: 47% !important;
  }
  .email-box span {
    margin: 3px !important;
  }
  .phone-box .input-basic,
  .phone-box .select-basic {
    max-width: 31% !important;
  }
  .phone-box .select-basic {
    padding: 2px 40px 0 15px;
  }
  .phone-box .phone-mid {
    margin: 1px !important;
  }
  .form-box {
    display: table;
    position: relative;
    width: 100%;
    margin-top: 10px;
    table-layout: fixed;
  }
  .form-box select {
    width: 100%;
    height: 50px;
    padding: 2px 53px 0 15px;
    border: 1px solid var(--disable-clr);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: var(--bg-clr2) url(/img/common/bullet/bul_select.png) no-repeat right 50%;
    background-size: 38px 13px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--cap-clr);
    font-size: 17px;
  }
  .form-box input[type=text],
  .form-box input[type=date],
  .form-box input[type=month],
  .form-box input[type=password],
  .form-box input[type=tel] {
    width: 100%;
    height: 50px;
    padding: 0 10px 0 10px;
    border: 1px solid var(--disable-clr);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--body-clr);
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 10px;
    transition: border-color 0.15s ease;
  }
  .form-box input[type=text]::-webkit-input-placeholder,
  .form-box input[type=date]::-webkit-input-placeholder,
  .form-box input[type=month]::-webkit-input-placeholder,
  .form-box input[type=password]::-webkit-input-placeholder,
  .form-box input[type=tel]::-webkit-input-placeholder {
    color: var(--cap-clr);
    font-size: 15px;
  }
  .form-box input[type=text][disabled],
  .form-box input[type=date][disabled],
  .form-box input[type=month][disabled],
  .form-box input[type=password][disabled],
  .form-box input[type=tel][disabled] {
    background: #f5f5f5;
  }
  .form-box input[type=text][readonly],
  .form-box input[type=date][readonly],
  .form-box input[type=month][readonly],
  .form-box input[type=password][readonly],
  .form-box input[type=tel][readonly] {
    color: var(--cap-clr);
    background: #ebebeb;
  }
  .form-box input[type=text].readonly,
  .form-box input[type=date].readonly,
  .form-box input[type=month].readonly,
  .form-box input[type=password].readonly,
  .form-box input[type=tel].readonly {
    background: var(--bg-clr2) !important;
  }
  .form-box input[type=text]:focus,
  .form-box input[type=date]:focus,
  .form-box input[type=month]:focus,
  .form-box input[type=password]:focus,
  .form-box input[type=tel]:focus {
    border-color: #215a8f;
  }
  .form-box .clearinput {
    padding-right: 40px !important;
  }
  .form-box .clearbtn {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 40px;
    height: 48px;
    border: 0;
    background-color: var(--bg-clr2);
    text-indent: -10000px;
    overflow: hidden;
  }
  .form-box .clearbtn::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 13px;
    width: 13px;
    height: 13px;
    background: url(/img/has_common/bul_delete.png) no-repeat 0 0;
    background-size: auto 13px;
  }
  .form-box .division-box {
    display: table-cell;
    position: relative;
    vertical-align: top;
  }
  .form-box .division-box.calendar input[type=text].readonly {
    background: url(/img/common/icon/icon_calendar.png) no-repeat right 12px center/23px !important;
  }
  .form-box .letter-box {
    display: table-cell;
    width: 26px;
    font-size: 30px;
    text-align: center;
    vertical-align: middle;
  }
  /* 변경가능성때문에 별도 클래스분리 */
  .form-box .letter-box img {
    width: 26px;
  }
  .form-box .search-box {
    display: table-cell;
    width: 65px;
    padding-left: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
  }
  .form-box .search-box button {
    margin-bottom: 0;
  }
  .form-box .search-box02 {
    position: relative;
    display: table-cell;
    vertical-align: top;
  }
  .form-box .search-box02 input {
    padding-right: 70px !important;
  }
  .form-box .search-box02 .btn-search {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 18px;
    height: 20px;
    border: 0;
    background: url(/img/common/button/btn_search.png) no-repeat 0 0;
    background-size: 18px 20px;
    font-size: 0;
    line-height: 0;
  }
  .form-box .search-box02 .clearbtn {
    right: 35px;
  }
  .form-box .select-box {
    display: table-cell;
    width: 113px;
    padding-right: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
  }
  .form-box .license-box {
    display: table-cell;
    position: relative;
    width: 29%;
    padding-right: 5px;
    vertical-align: top;
  }
  .form-box .license-box .clearbtn {
    right: 6px;
  }
  .form-box .price-txt,
  .form-box .count-txt {
    margin-top: 10px;
    font-size: 17px;
    text-align: right;
  }
  .form-box .tel-box {
    display: table-cell;
    width: 109px;
    padding-right: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
  }
  .form-box .tel-box02 {
    display: table-cell;
    width: 95px;
    padding-right: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
  }
  .form-box .btn-box02 {
    display: table-cell;
    width: 115px;
    padding-left: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
  }
  .form-box .btn-box03 {
    display: table-cell;
    width: 110px;
    padding-left: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
  }
  .form-box .tax-box {
    display: table-cell;
    width: 120px;
    padding-right: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
  }
  .form-box.addr {
    box-sizing: border-box;
  }
  .form-box.addr .search-box {
    width: 110px;
  }
  .form-box .select,
  .form-box input[type=text][readonly].select {
    display: block;
    width: 100%;
    height: 50px;
    padding: 15px 30px 13px 15px;
    border: 1px solid var(--disable-clr);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: var(--bg-clr2) url(/img/common/bullet/bul_select.png) no-repeat right 50%;
    background-size: 30px 10px;
    color: var(--cap-clr);
    font-size: 15px;
  }
  .form-box + .form-box {
    margin-top: 15px;
  }
  .form-box + .common-stit {
    margin-top: 20px;
  }
  /* [공통] 타이틀 */
  .sub-title01 {
    font-size: 17px;
    text-align: center;
  }
  .common-stit {
    position: relative;
    margin-top: 30px;
    font-size: 17px;
  }
  /* 바디 서브타이틀 */
  .common-stit .sub-sort {
    display: block;
    padding-bottom: 3px;
    color: #215a8f;
    font-size: 15px;
    font-weight: 500;
  }
  .common-stit .sub-sort.none {
    margin-bottom: -3px;
    padding-bottom: 0;
    font-weight: 400;
  }
  .common-stit .tip-text {
    position: absolute;
    top: -3px;
    right: 0;
  }
  .common-titmenu {
    margin-top: 30px;
    color: var(--body-clr);
    font-size: 15px;
    letter-spacing: 0;
  }
  /* 타이틀 메뉴 */
  .common-titmenu .number-txt {
    display: inline-block;
    padding: 0 2px 0 3px;
  }
  .common-stit + .common-stit {
    margin-top: 15px;
  }
  .common-stit + .common-noresult {
    margin-top: 7px;
  }
  .common-stit + .search-info {
    margin-top: 15px;
  }
  .common-stit + .common-btngroup {
    margin-top: 12px;
  }
  .common-stit + .common-btn {
    margin-top: 15px;
  }
  /* 더보기 버튼 */
  .btn-area {
    margin: 30px 0;
  }
  /* small accodion */
  .small-accordion-list.type01 {
    margin-top: 20px;
  }
  .terms-wrap {
    padding: 0;
  }
  /* 검색결과 없을때 */
  .common-list-noresult {
    padding: 80px 0;
    border-top: 1px solid var(--line-clr3);
    border-bottom: 1px solid var(--line-clr3);
    text-align: center;
    font-size: 20px;
    font-weight: 400;
  }
  /* 셀렉트 박스 글씨 크기 */
  .common-tblinfobox.style01 .select-basic {
    font-size: 14px;
  }
  .common-tblinfobox.style01 .totalbox-wrap {
    font-size: 14px;
  }
  /* otp */
  .bg-otpimg {
    margin-top: 20px;
    padding: 24px 16px;
    background-image: none;
  }
  .bg-otpimg .warn-title {
    width: 100%;
    margin-bottom: 15px;
    font-size: 20px;
  }
  .bg-otpimg .warn-txt {
    width: 100%;
    font-size: 13px;
  }
  .bg-otpimg + .info-table-area {
    padding-top: 30px;
  }
  .icon-lobat {
    width: 100%;
    height: auto;
    padding-top: 58.92%;
    background-size: 100%;
  }
  .icon-otpex {
    width: 100%;
    height: auto;
    padding-top: 31.11%;
    background-size: auto 100%;
  }
  .icon-otpbg {
    background-size: 100%;
  }
  .icon-list-box > li {
    float: none;
    width: 100%;
    min-height: auto;
    padding: 30px 25px;
    border-top: 1px solid #efefef;
    border-right: 0;
  }
  .icon-list-box > li:first-child {
    border-top: 0;
  }
  .common-list02 li .snsbox .tooltip-layerpopup-close {
    right: 19px;
  }
  .common-list02 li .snsbox .tooltip-layerpopup::after {
    right: 31px;
  }
  .notice-subtext.topnone {
    padding-top: 20px !important;
  }
  .common-text01.dot {
    margin-top: 20px;
  }
}
b {
  font-weight: 700;
  vertical-align: baseline;
}

/*=====================================================
	guide_temp
=======================================================*/
/*==========================
	 가로형 테이블 추가
===========================*/
.table-type005 {
  width: 100%;
}

.table-type005 tr:last-child th,
.table-type005 tr:last-child td {
  border-bottom-width: 0px;
}

/*모바일*/
@media (max-width: 1200px) {
  html.responsive .table-type03-w {
    display: none;
  }
  html.responsive .table-type03-m {
    display: table;
  }
  .table-type03-m,
  .table-type04 {
    width: 100%;
  }
  .table-type03-m tr:first-child {
    border-top: 1px solid var(--body-clr);
  }
  .table-type04 th,
  .table-type04 td {
    font-size: 12px;
    border-bottom: 1px solid var(--disable-clr);
  }
  .table-type03-m th,
  .table-type04 th {
    background: #f7f7f7;
    font-weight: 700;
    border-right: 1px solid var(--disable-clr);
  }
  .table-type005 {
    width: 100%;
  }
  .table-type005 tr:last-child th,
  .table-type005 tr:last-child td {
    border-bottom-width: 0px;
  }
}
/*=====================================
POPUP
DATE : 2019-02-11
WRITER : HJY
=======================================*/
/*POPUP 01********************************/
.dim-contents .info-box {
  border-top: 1px dashed #d4d4d4;
}

.dim-contents .info-box {
  padding-top: 20px;
}

.dim-contents .info-box .bank-sign {
  vertical-align: middle;
  margin-left: 10px;
}

.dim-contents .content-foot {
  font-size: 0;
}

.dim-contents .footer-info {
  position: relative;
  display: inline-block;
  padding: 0 12px 0 10px;
  margin-top: 14px;
}

.dim-contents .footer-info:last-child::after {
  display: none;
}

.dim-contents .footer-info dt {
  margin-right: 8px;
}

/* 유경추가 - 테이블 마진 */
.popup .info-table-area.b0 {
  padding-bottom: 0;
}

.layer-wrap.scroll-type01 .dim-contents .btn-close-l {
  font-size: 0;
}

.division-box {
  position: relative;
}

/* MOBILE ONLY */
@media (max-width: 768px) {
  .dim-contents .notice-list li::before {
    margin-top: 5px;
  }
  .dim-contents .content-wrap,
  .dim-contents .content-box-wrap,
  .dim-contents .content-box {
    padding-left: 2.78%;
    padding-right: 2.78%;
  }
  .dim-contents .content-table {
    font-size: 13px;
  }
  .dim-contents .content-table .th {
    width: 80px;
  }
  .dim-contents .content-table .td {
    width: calc(100% - 80px);
    width: -webkit-calc(100% - 80px);
    width: -moz-calc(100% - 80px);
    width: -o-calc(100% - 80px);
    width: -ms-calc(100% - 80px);
  }
  .layer-wrap.scroll-type01 .layer-container {
    min-width: 100%;
    padding: 0 20px;
    background: none;
  }
  .layer-wrap.scroll-type01 .dim-contents {
    width: auto;
    max-height: inherit;
  }
  .layer-wrap.scroll-type01 .popup-body02 {
    max-height: 800px;
    padding: 30px;
    overflow: auto;
  }
}
/*POPUP 02
  POPUP MD********************************/
.dim-contents .popup-body01 .notice-list {
  padding-bottom: 0;
  background: transparent;
}

.dim-contents .popup-body01 .notice-list li:last-child {
  padding-bottom: 0;
}

/* MOBILE ONLY */
@media (max-width: 768px) {
  .dim-contents .popup-body01 .notice-list li::before {
    margin-top: 4px;
  }
}
/*POPUP 03********************************/
.dim-contents .popup-body01 .body-msg.type01 {
  padding-top: 90px;
  background: url(/img/content/sbt/img_danger_msg.png) no-repeat top center/60px;
}

.dim-contents .popup-body01 .body-msg span {
  font-weight: 700;
}

/*POPUP 05*/
/* MOBILE ONLY */
@media (max-width: 768px) {
  .dim-contents .popup-body01 .body-msg {
    font-size: 16px;
  }
}
/* 공과금 팝업 */
.dim-contents .document-area {
  border: 0;
  margin-bottom: 0;
  padding: 0;
}

/* 체크카드 팝업 */
.dim-contents.card-layer .card-wrap {
  position: relative;
}

.dim-contents.card-layer .scroll-box {
  max-height: 690px;
  overflow-y: auto;
}

.dim-contents.card-layer .body-box {
  margin-top: 35px;
}

.dim-contents.card-layer .body-box:first-child {
  margin-top: 0;
}

.dim-contents.card-layer .tit-des {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
}

.dim-contents.card-layer .sub-des {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.dim-contents.card-layer .notice-list .font-088 {
  padding-top: 20px;
  line-height: 23px;
}

.dim-contents.card-layer .notice-list .notice-i-list {
  margin-top: 0;
}

.dim-contents.card-layer .notice-list li .notice-i-list {
  line-height: 23px;
}

.dim-contents.card-layer .notice-i-list {
  margin-top: 20px;
  color: var(--body-clr);
}

.dim-contents.card-layer .nostyle-list {
  max-width: 1200px;
  margin: 0 auto;
}

.dim-contents.card-layer .nostyle-list li {
  min-height: inherit;
  margin-top: 3px;
  padding: 0 0 0 20px;
  font-size: 14px;
  line-height: 22px;
  border-bottom: 0;
  background: none;
}

.dim-contents.card-layer .nostyle-list li:first-child {
  margin-top: 0;
}

.dim-contents.card-layer .notice-list {
  padding-bottom: 0;
  background: transparent;
}

.dim-contents.card-layer .notice-list li {
  font-size: 14px;
  text-align: left;
}

.dim-contents.card-layer .notice-box {
  margin-top: 30px;
  padding: 25px 20px;
  background: #f7f7f7;
}

.dim-contents.card-layer .notice-box .sub-des {
  margin-top: 0;
}

.dim-contents.card-layer .notice-box .notice-list {
  padding-top: 0;
}

.dim-contents.card-layer .notice-box .notice-list li {
  margin-top: 0;
  padding-left: 10px;
  font-size: 14px;
}

.dim-contents.card-layer .notice-box .notice-list li a {
  display: inline;
  font-weight: 500;
}

.dim-contents.card-layer .notice-box .nostyle-list li {
  font-size: 12px;
}

.dim-contents.card-layer .notice-box .notice-i-list {
  margin-top: 0;
  font-size: 12px;
}

.dim-contents.card-layer .notice-box .notice-i-list::before {
  margin-left: -10px;
}

.dim-contents.card-layer .step-ux {
  margin-top: 30px;
  padding: 30px 60px;
  background: #f7f7f7;
}

.dim-contents.card-layer .step-ux ul {
  display: table;
  width: 100%;
}

.dim-contents.card-layer .step-ux ul li {
  position: relative;
  display: table-cell;
  vertical-align: top;
  width: 25%;
  text-align: center;
}

.dim-contents.card-layer .step-ux ul li::before {
  content: "";
  display: block;
  width: 16px;
  height: 29px;
  position: absolute;
  top: 40px;
  right: -8px;
  background: url(/img/mypage/card_check_arrow.png) no-repeat center;
}

.dim-contents.card-layer .step-ux ul li:last-child::before {
  display: none;
}

.dim-contents.card-layer .step-ux ul li p {
  padding-top: 128px;
  font-size: 14px;
  line-height: 25px;
  background-repeat: no-repeat;
  background-position: center top;
}

.dim-contents.card-layer .step-ux ul li p.step-t01 {
  background-image: url(/img/mypage/card_check_step01.png);
  padding-top: 120px;
}

.dim-contents.card-layer .step-ux ul li p.step-t02 {
  background-image: url(/img/mypage/card_check_step02.png);
}

.dim-contents.card-layer .step-ux ul li p.step-t03 {
  background-image: url(/img/mypage/card_check_step03.png);
}

.dim-contents.card-layer .step-ux ul li p.step-t04 {
  background-image: url(/img/mypage/card_check_step04.png);
}

.dim-contents.card-layer .table-wrap01 + .mt20 {
  margin-top: 20px;
}

.dim-contents.card-layer .table-type04 th {
  width: 160px;
}

.dim-contents.card-layer .table-type04 td {
  padding: 14px 10px 13px 10px;
}

.dim-contents.card-layer td .notice-list {
  margin-left: 10px;
}

.dim-contents .popup-foot01.foot-style01 {
  padding: 30px 0 40px;
}

.dim-contents .table-title + .table-wrap {
  margin-top: 15px;
}

.dim-contents .notice-list + .popup-top-number {
  margin-top: 20px;
}

.dim-contents.paybooc-layer .popup-body02 {
  max-height: inherit;
}

.dim-contents.paybooc-layer .popup-foot01 {
  padding: 40px 30px;
}

@media (max-height: 768px) {
  .dim-contents.card-layer {
    max-height: 560px;
  }
  .dim-contents.paybooc-layer .popup-body02 {
    max-height: 420px;
  }
}
.popup-close {
  height: 50px;
  padding: 15px 30px;
  background: #666;
}

i.chk-w {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url(/img/common/checkbox-w.png) no-repeat center/contain;
  display: table-cell;
}

.chk-basic.white:checked ~ i {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url(/img/common/check_card.png) no-repeat center/contain;
}

.chk-label.white {
  font-size: 14px;
  color: var(--bg-clr2);
  display: table-cell;
  padding-left: 10px;
  line-height: 1.2;
  text-align: left;
  vertical-align: middle;
}

.popup-close-btn {
  float: right;
  padding: 2px 20px 0 0;
  color: var(--bg-clr2);
  background: url(/img/common/icon_popup_close.png) no-repeat right center;
  font-size: 16px;
}

.btn-sm-wh.resize {
  max-width: none;
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.btn-sm-wh.small {
  max-width: 50px;
}

.btn-sm-wh.ico_down {
  padding-right: 50px;
  background: url(/img/hss_common/ico_down.png) no-repeat calc(100% - 15px) center;
}

.sec-box .code-img {
  width: 480px;
  border-radius: 10px;
  overflow: hidden;
}

.sec-box .code-img {
  width: 100%;
}

.wide-table td {
  padding: 20px 10px;
}

/*=====================================================
	박유경
	guide_item
=======================================================*/
/*mso-icon********************************/
.btn-mso-s {
  width: 16px;
  height: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-mso {
  width: 54px;
  height: 54px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*btn-close********************************/
.btn-close {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-close-l {
  width: 23px;
  height: 23px;
  background-image: url("/img/hss_common/btn_close_l.png");
}

.btn-close-s {
  width: 10px;
  height: 10px;
  background-image: url("/img/hss_common/btn_close_s.png");
}

/*notice i 모바일*/
@media (max-width: 1200px) {
  /*ovvi 조회 팝업 2*/
  .dim-contents .popup-foot01 .right {
    margin-left: 0;
  }
}
/*datepicker******************************/
.ui-widget-content {
  background: #f7f7f7;
  color: var(--body-clr);
}

.ui-widget.ui-widget-content {
  border: 1px solid #999;
}

.ui-datepicker {
  width: 307px !important;
  padding: 10px 24px;
  /**/
}

.ui-widget-header {
  background: none;
  border: 0;
}

.ui-datepicker .ui-datepicker-title {
  font-weight: 700;
  width: 72%;
  margin: 0 auto;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 40%;
}

.ui-datepicker table {
  font-size: 14px;
}

.ui-datepicker select.ui-datepicker-year {
  margin-right: 20px;
  margin-left: 10px;
}

/*버튼*/
.ui-datepicker-next.ui-corner-all,
.ui-datepicker-prev.ui-corner-all {
  display: none;
}

/*요일*/
.ui-datepicker th span {
  color: var(--cap-clr) !important;
}

/*일*/
.ui-state-default,
.ui-widget-content .ui-state-default {
  background: none;
  border: 0;
}

/*오늘*/
.ui-widget-content .ui-state-highlight {
  border: 1px solid var(--neg-clr);
}

/*선택일*/
.ui-state-active,
.ui-widget-content .ui-state-active {
  color: var(--bg-clr2);
  position: relative;
}

.ui-state-active::after {
  content: "";
  width: 30px;
  height: 30px;
  background: var(--neg-clr);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: -5;
  border-radius: 50%;
}

.ui-datepicker td span,
.ui-datepicker td a {
  padding: 10px 5px;
  text-align: center;
  border-radius: 50%;
}

/*년*/
/*월*/
.ui-state-default,
.ui-widget-content .ui-state-default {
  padding: 10px 0px !important;
  cursor: pointer !important;
}

.mtz-monthpicker .ui-state-active {
  background: transparent;
  color: var(--bg-clr2);
  position: relative;
  z-index: 10;
}

.mtz-monthpicker .ui-state-active::after {
  content: "";
  width: 30px;
  height: 30px;
  background: var(--neg-clr);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: -5;
  border-radius: 50%;
}

/* tool 추가*/
.tool-number {
  text-decoration: underline;
}

/*=====================================================
	guide_item
	writer : PEY;
=======================================================*/
.h-title {
  font-size: 24px;
  margin: 20px 0;
  font-weight: 700;
}

.h-sub {
  font-size: 14px;
  font-weight: 700;
  margin: 10px 0;
  width: 100%;
}

/*---------input-style(은영)--------*/
.input-basic.xxxs,
.select-basic.xxxs {
  max-width: 75px;
}

.input-basic.xxss,
.select-basic.xxss {
  max-width: 90px;
}

.input-basic.xxs,
.select-basic.xxs {
  max-width: 125px;
}

.input-basic.xs,
.select-basic.xs {
  max-width: 150px;
}

.input-basic.sm,
.select-basic.sm {
  max-width: 200px;
}

.input-basic.md,
.select-basic.md {
  max-width: 300px;
}

.input-basic.w167,
.select-basic.w167 {
  max-width: 167px !important;
}

.input-basic.w270,
.select-basic.w270 {
  max-width: 270px !important;
}

.input-basic.w285,
.select-basic.w285 {
  max-width: 285px;
}

.input-basic.w340,
.select-basic.w340 {
  min-width: 340px;
}

.input-basic.w410,
.select-basic.w410 {
  max-width: 410px;
}

.input-basic.w195,
.select-basic.w195 {
  max-width: 195px;
}

.input-basic.w290,
.select-basic.w290 {
  max-width: 290px !important;
}

.input-basic.w525,
.select-basic.w525 {
  max-width: 525px !important;
}

.input-basic.w115,
.select-basic.w115 {
  max-width: 115px !important;
}

.input-basic.w930,
.select-basic.w930 {
  max-width: 930px !important;
}

.input-basic.w380,
.select-basic.w380 {
  max-width: 380px;
}

.input-basic.w400,
.select-basic.w400 {
  max-width: 400px !important;
}

.input-basic.w-jumin {
  max-width: 270px;
}

.input-basic.w-bnum {
  max-width: 175px;
}

/* // modified by HJY - 190220 */
.input-basic::placeholder {
  color: var(--body-clr);
}

.input-active {
  border-color: var(--body-clr);
}

/*.vitualKeyCheck { float: left; }*/
.input-www.input-basic {
  padding-right: 30px;
}

.input-basic::placeholder {
  color: var(--cap-clr);
}

.input-basic:-ms-input-placeholder {
  color: var(--cap-clr);
}

.input-basic::-ms-input-placeholder {
  color: var(--cap-clr);
}

.input-basic::-moz-placeholder {
  color: var(--cap-clr);
}

.select-active {
  color: var(--body-clr);
  border-color: var(--body-clr);
}

.date-box2::after {
  content: "";
  display: block;
  clear: both;
}

.date-box2 {
  width: 100%;
  max-width: 400px;
}

.date-box2 * {
  float: left;
  margin-right: 0 !important;
}

.text-basic.readonly,
.text-basic.disable,
.text-basic.error {
  resize: none;
}

/*---------button-style(은영)--------*/
@media (max-width: 1200px) {
  .input-basic,
  .select-basic {
    max-width: none;
    font-size: 13px;
  }
  .text-basic {
    font-size: 14px;
    max-width: none;
    padding: 10px 3.7%;
    resize: none;
  }
  .radio-basic {
    width: 60px;
    font-size: 13px;
    padding: 8px 0;
    background-color: #eeeff1;
    border: 0;
    color: #363636;
  }
  .btn-radio:checked + .radio-basic {
    background-color: var(--bg-clr2);
  }
  .date-basic {
    background: var(--bg-clr2) url(/img/common/icon_date.png) no-repeat right 3.7% center/19px;
  }
  .date-basic2 {
    position: relative;
    width: calc(50% - 12px);
    background: var(--bg-clr2) url(/img/common/icon_date.png) no-repeat right 8.7% center/19px;
  }
  .datemid {
    display: inline-block;
    width: 24px;
    line-height: 40px;
    font-size: 14px;
  }
  .btn-show-list {
    display: inline-block;
    border: 1px solid var(--body-clr);
    padding: 8px 8.52%;
    color: var(--body-clr);
    font-size: 15px;
    width: auto;
    height: auto;
  }
  .btn-show-list.option {
    width: 100%;
    color: #363636;
    border: 1px solid #bbb;
  }
  .btn-show-list.option span {
    display: inline-block;
    vertical-align: middle;
  }
  .btn-show-list.option .icon-list {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    background: url(/img/common/icon_list.png) no-repeat center/contain;
  }
  .btn-show-list::before {
    display: none;
  }
  .btn-show-list::after {
    display: none;
  }
  .chk-label {
    margin-left: 0;
    color: #666666;
    font-size: 12px;
    padding-left: 5px;
  }
  .trn-buttonwrap button {
    max-width: 60px;
    font-size: 13px;
    padding: 8px 0;
    background: #eeeff1;
    border: 0;
  }
  .tooltips {
    left: 68px;
  }
  .tooltips li {
    margin-bottom: 4px;
    line-height: 20px;
  }
  .tooltips li a {
    /*max-width: 120px;*/
    word-break: break-all;
    text-decoration: underline;
    text-underline-position: under;
    font-size: 10px;
  }
  .tooltips span {
    display: none;
  }
  /* 190312 현정 h3 타이틀 설명폰트 크기추가 */
  .table-exp.fr {
    font-size: 12px;
    text-align: left;
    float: left !important;
  }
  /* 190527 추가 */
  .date-box2 .input-area {
    max-width: 83%;
  }
  .date-box2 .datemid + .input-area {
    display: block;
  }
  .icon-print,
  .icon-down,
  .icon-add {
    width: 25px;
    height: 25px;
    margin-right: 5px;
    background-size: auto 25px;
  }
}
/*---------radio-style(은영)--------*/
.btn-radio {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.btn-radios {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.btn-radios:focus + label,
.btn-radio:focus + label {
  outline: -webkit-focus-ring-color auto 5px;
  outline: 1px dashed #000;
}

.btn-radios:focus + label,
.btn-radio:focus + label {
  outline: 1px dashed #000;
}

.btn-show-list::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--body-clr);
  position: absolute;
  top: 46%;
  right: 20px;
  display: block;
}

.btn-show-list::after {
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid var(--body-clr);
  border-left: 2px solid var(--body-clr);
  position: absolute;
  top: 36%;
  right: 20px;
  transform: rotate(225deg);
  display: block;
}

.btn-show-list.option span {
  display: inline-block;
  vertical-align: middle;
}

.btn-show-list.option .icon-list {
  display: none;
}

.chk-wrap {
  display: inline-block;
  vertical-align: middle;
}

.label-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.chk-basic {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
}

.chk-basic.type01 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  cursor: pointer;
  top: initial;
  left: initial;
  opacity: 1;
  z-index: 1;
  background: initial;
}

.chk-out {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.chk-out.type01 {
  font-size: 0;
}

.chk-basic:focus + .chk-out {
  outline: -webkit-focus-ring-color auto 5px;
}

i.icon-chk {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url(/img/hss_common/icon_chk_off.png) no-repeat center/contain;
  display: table-cell;
}

input[type=checkbox].disable ~ i {
  opacity: 0.5;
}

input[type=checkbox].disable ~ .chk-label {
  color: var(--cap-clr);
}

/*mso-icon********************************/
.btn-mso-s {
  width: 16px;
  height: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-mso {
  width: 54px;
  height: 54px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*btn-close********************************/
.btn-close {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-close-l {
  width: 23px;
  height: 23px;
  background-image: url("/img/hss_common/btn_close_l.png");
}

.btn-close-s {
  width: 10px;
  height: 10px;
  background-image: url("/img/hss_common/btn_close_s.png");
}

/*
.tool-under{ content: ''; position: absolute; bottom: -2px; left: 0; width:100%; height: 1px; border-bottom:1px solid var(--body-clr); }
.under-active{ border-bottom: 1.5px solid var(--body-clr); }
.tool-active{ font-weight: $bold; }*/
.trn-notice-i-list02 {
  line-height: 40px;
  white-space: nowrap;
}

.wide-table th {
  padding: 22px 10px;
}

.wide-table td {
  padding: 22px 10px;
}

.trn-buttonwrap {
  width: 100%;
  clear: both;
}

/*-------------미디어쿼리-------------*/
@media (max-width: 1200px) {
  .btn-sm-wh {
    max-width: none;
  }
  .btn-radio:checked + .radio-basic {
    background-color: var(--bg-clr2);
  }
  .btn-reset {
    display: none;
  }
  .btn-show-list.option {
    width: 100%;
    color: #363636;
    border: 1px solid #bbb;
  }
  .btn-show-list.option span {
    display: inline-block;
    vertical-align: middle;
  }
  .btn-show-list::before {
    display: none;
  }
  .btn-show-list::after {
    display: none;
  }
  .tooltips {
    left: 68px;
  }
  .tooltips span {
    display: none;
  }
}
/*===============================
	시영
================================*/
.btn-mso-txt {
  min-height: 20px;
}

/*===============================
	유경
	fullcalendar
=================================*/
/* wrap */
.calendar-content {
  border-top: 1px solid #000;
}

.fc-toolbar.fc-header-toolbar {
  margin-bottom: 0;
}

.fc-header-toolbar .fc-center {
  vertical-align: bottom;
}

/*전체 텍스트 left*/
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
  float: none;
  font-weight: bold;
}

.fc td,
.fc th {
  text-align: left;
  border: 0;
}

/*전체 border*/
th.fc-day-header,
td.fc-day {
  position: relative;
}

th.fc-day-header::after,
td.fc-day::after {
  content: "";
  width: 150px;
  height: 1px;
  background: var(--disable-clr);
  position: absolute;
  left: 0;
  bottom: 0;
}

/* top (년, 월) */
.fc-toolbar.fc-header-toolbar {
  background: #f7f7f7;
  padding: 15px 20px;
  position: relative;
}

/*<>버튼*/
.fc-state-default {
  border: 0;
  background-color: transparent;
  background-image: url("/img/hss_common/icon_select_333.png");
  background-position: center;
  background-repeat: no-repeat;
  border-color: none;
  box-shadow: none;
}

.fc-state-default span.fc-icon {
  display: none;
}

button.fc-prev-button.fc-button.fc-state-default {
  width: 30px;
  height: 20px;
  position: absolute;
  left: 20px;
  top: 30%;
  transform: rotate(90deg) translateY(-50%);
}

button.fc-next-button.fc-button.fc-state-default {
  width: 30px;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 30%;
  transform: rotate(-90deg) translateY(-50%);
}

/*요일*/
.fc-day-header.fc-widget-header {
  padding: 16px 7px 8px 0;
}

.fc-sun span {
  color: var(--neg-clr);
}

td.fc-day-top {
  padding: 10px 2px 0 0;
}

.fc-content {
  margin-bottom: 10px;
}

.fc-title.money {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-title > span {
  color: inherit;
}

.fc-event,
.fc-event-dot {
  background: transparent;
  border-color: transparent;
}

.fc-unthemed td.fc-today {
  background: none;
}

.fc-day.fc-widget-content.fc-thu.fc-today::before {
  content: "";
  display: block;
  width: 150px;
  height: 100%;
  background-color: #f7f7f7;
  position: absolute;
  left: 0;
  top: 0;
}

/*===============================
	유경
	guide_temp
	약관동의샘플
=================================*/
.radio-agree-wrap label {
  margin-right: 40px;
}

.radio-agree-wrap label:last-child {
  margin-right: 0;
}

@media (max-width: 1200px) {
  .radio-agree-wrap label {
    margin-right: 20px;
    font-weight: 700;
  }
  .radio-agree-wrap {
    padding: 15px;
  }
  .radio-agree-wrap label:last-child {
    margin-right: 0;
  }
  .btn-slide {
    width: 50px;
    background-size: 17px;
  }
}
/*input max-170*/
.input-basic.max170 {
  max-width: 170px;
}

/* 2채널 인증 관련 스타일 추가 */
.list-style {
  color: #666;
}

.list-style li::before {
  content: "";
  float: left;
  margin-right: 10px;
  margin-top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #999;
}

.btn-sm-wh.btn-qrcode {
  margin-top: 10px;
  font-weight: 400;
}

.tooltips.qrcode {
  display: none;
  bottom: inherit;
  top: 60px;
  left: -10px;
  transform: none;
  padding: 30px 30px 20px;
}

.tooltips.qrcode::after {
  bottom: inherit;
  top: -5px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 0;
  border-right: 0;
}

.tooltips.qrcode img {
  width: 90px;
  height: auto;
}

.btn-sm-wh.btn-qrcode:hover ~ .tooltips.qrcode,
.btn-sm-wh.btn-qrcode:active ~ .tooltips.qrcode,
.btn-sm-wh.btn-qrcode:focus ~ .tooltips.qrcode {
  display: block;
}

.sub-box-wrap::after,
.sub-box::after {
  content: "";
  display: block;
  clear: both;
}

.sub-box-wrap {
  padding: 20px;
}

.sub-box {
  background-color: #f7f7f7;
  padding: 20px;
}

.sub-box-wrap.option-td {
  display: none;
  width: 680px;
  clear: both;
  padding: 15px 0 0;
}

.sub-box-wrap.option-td .sub-box {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.sub-box-num,
.sub-box-btn {
  display: table-cell;
  vertical-align: middle;
}

.sub-box-num {
  width: 410px;
  padding: 10px 0 10px 20px;
}

.sub-box-btn {
  width: 270px;
}

.doc-box02 {
  width: 50%;
  float: left;
  font-size: 0;
  text-align: center;
}

.doc-box02:first-child {
  border-right: 1px solid var(--disable-clr);
}

.doc-box02 button {
  vertical-align: middle;
  margin-left: 20px;
}

/*약관동의 추가하기*/
.slide-box-area.only-top .slide-box-top {
  border-bottom: 1px solid var(--disable-clr);
  border-top: 0 !important;
}

/*약관동의 네모체크박스*/
.check-agree-wrap {
  padding: 21px;
}

.check-agree-wrap .label-wrap:nth-of-type(5) {
  margin-right: 0;
}

.check-agree-wrap .label-wrap span.chk-label {
  font-weight: 700;
  color: #666;
}

.check-agree-wrap .check-span {
  font-weight: 700;
  color: #666;
  margin: 3px;
}

/*input max-185*/
.input-basic.max185 {
  max-width: 185px;
}

/*체크박스 여백*/
.check-box-wrap .label-wrap {
  margin-right: 40px;
}

/*190227 박은영 추가*/
.mr11 {
  margin-right: 12px;
}

.hyphen {
  float: left;
  margin-right: 10px;
  line-height: 40px;
}

/*190228 박은영 추가*/
.input-basic.xxxs,
.select-basic.xxxs {
  max-width: 70px;
}

.mln30 {
  margin-left: -30px;
}

.info-subtxt {
  padding-top: 20px;
  line-height: 20px;
}

.info-address {
  text-decoration: underline;
  display: inline-block;
}

.table-clone .table-top {
  width: 250px;
  padding: 15px 20px;
  border-right: 1px solid var(--disable-clr);
}

.chk-out {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mymenu-box-top {
  width: 100%;
  background: var(--bg-clr2);
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid var(--disable-clr);
}

.mymenu-box-wrap {
  width: 100%;
  padding-left: 20px;
  border-bottom: 1px solid #f7f7f7;
}

.list-left-wrap {
  padding: 22px 0;
}

.deg180 {
  transform: rotate(180deg);
}

.list-left-wrap li {
  float: left;
}

.list-left-wrap li:last-child {
  font-weight: bold;
}

.list-left-wrap li::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--disable-clr);
  border-right: 2px solid var(--disable-clr);
  float: left;
  transform: rotate(45deg);
  margin: 3px 10px;
}

.list-left-wrap li:first-child::after {
  display: none;
}

.check-box-wrap02 .label-wrap {
  margin-right: 18px;
}

/* 페이징 pagination */
.pagination {
  text-align: center;
}

.pagination > li {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 0 2px;
}

.pagination > li:last-child {
  margin-right: 0;
}

.pagination > li a {
  display: table;
  width: 100%;
  height: 100%;
}

.pagination .active-page .page {
  background: #959595;
  color: var(--bg-clr2);
  font-weight: 700;
}

.pagination .prev a {
  background: url(/img/hss_common/page_left.png) no-repeat center;
}

.pagination .next a {
  background: url(/img/hss_common/page_right.png) no-repeat center;
}

/* 오류 페이지 / error_page02.html */
html.error {
  font-size: 20px;
}

html.error #_FSBcontainer {
  min-height: calc(100vh - 225px);
  min-height: -webkit-calc(100vh - 225px);
  min-height: -moz-calc(100vh - 225px);
  min-height: -o-calc(100vh - 225px);
  background: var(--bg-clr2);
}

.error-wrap.type02 {
  width: 100%;
  max-width: 700px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  text-align: center;
}

@media (max-width: 1200px) {
  html.error {
    font-size: 16px;
  }
  .error-wrap.type02 {
    width: calc(100% - 40px);
    margin: auto;
  }
}
/* 테이블 슬라이드 다운 - 반응형 190308 */
.table-type01 .child {
  /*display: none;*/
  background: #efefef;
}

/*잠시 개발로 display:none 주석*/
.table-type01 .child .td-wrap {
  padding: 40px 130px;
}

.table-type01 .child td {
  padding: 0;
}

.table-type01 .child .table {
  width: 100%;
  margin-bottom: 20px;
}

.table-type01 .child .table:last-child {
  margin-bottom: 0;
}

.table-type01 .child .table-cell {
  width: 50%;
  text-align: left;
}

.table-type01 .child .td-wrap {
  margin: auto;
}

.table-type01 .child .table-cell.left {
  padding-right: 20px;
}

.table-type01 .child .table-cell.right {
  padding-left: 20px;
}

.table-type01 .child .btn-area {
  border-top: 1px solid var(--line-clr3);
  padding-top: 20px;
  margin-top: 20px;
}

.table-type01 .child .table .input-basic {
  max-width: 100%;
}

.pc-viewbox {
  display: block !important;
}

.tablet-viewbox {
  display: none !important;
}

.mobile-viewbox {
  display: none !important;
}

.main-page-section-top-banner .pc-viewbox {
  display: flex !important;
}

.main-page-section-top-banner .tablet-viewbox {
  display: none !important;
}

.main-page-section-top-banner .mobile-viewbox {
  display: none !important;
}

@media (max-width: 1200px) {
  .page-title {
    margin-top: 20px;
    font-size: 0;
  }
  .pc-viewbox {
    display: none !important;
  }
  .tablet-viewbox {
    display: block !important;
  }
  .mobile-viewbox {
    display: none !important;
  }
  .main-page-section-top-banner .tablet-viewbox {
    display: flex !important;
  }
  .main-page-section-top-banner .pc-viewbox {
    display: none !important;
  }
  .main-page-section-top-banner .mobile-viewbox {
    display: none !important;
  }
  .table-type01 .child .table {
    display: block !important;
    margin-bottom: 0;
  }
  .table-type01 .child .td-wrap {
    padding: 32px 7.5%;
  }
  .table-type01 .child .table-cell {
    display: block !important;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
  }
  .table-type01 .child .btn-area {
    padding: 0;
    margin-top: 0;
    border-top: 0;
  }
  .table-type01 .child .btn-area button {
    margin: 0;
  }
  .tbl-style01 {
    border-top: 1px solid var(--body-clr);
  }
  .tbl-style01 li {
    border-bottom: 1px solid var(--disable-clr);
  }
  .tbl-style01 li .link {
    display: block;
    padding: 20px 18px;
  }
  .tbl-style01 li .link .thema {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
  }
  .tbl-style01 li .link .date,
  .tbl-style01 li .link .name {
    margin-top: 5px;
    color: #666;
    font-size: 12px;
  }
  .tbl-style01 li .link .btn {
    margin-top: 15px;
  }
  .event-info .title {
    width: 100%;
  }
  .event-info .text {
    width: 100%;
    margin-top: 5px;
    color: #666;
  }
  .event-info dd:first-of-type {
    margin-top: 5px;
  }
  .event-info .btn-sm-wh {
    margin: 0;
  }
  .ico-internet,
  .ico-smartphone,
  .ico-notice,
  .ico-event,
  .ico-etc,
  .ico-shop {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 11px 1px;
  }
  .btn-support,
  .btn-download {
    width: 112px;
    height: 32px;
  }
  a.btn-support,
  a.btn-download {
    margin-left: 0;
  }
  a.btn-download.type01 {
    width: initial;
    height: initial;
  }
  .table-type04.type03 th {
    padding: 0 12px;
    font-size: 13px;
    word-break: keep-all;
  }
  .table-type04.type03 td {
    font-size: 13px;
    font-weight: 400;
  }
  .btn-area button {
    margin: 0;
  }
  .btn-area {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .pc-viewbox {
    display: none !important;
  }
  .tablet-viewbox {
    display: none !important;
  }
  .mobile-viewbox {
    display: block !important;
  }
  .main-page-section-top-banner .mobile-viewbox {
    display: flex !important;
  }
  .main-page-section-top-banner .pc-viewbox {
    display: none !important;
  }
  .main-page-section-top-banner .tablet-viewbox {
    display: none !important;
  }
}
/*190311 PEY 추가*/
.table-wrap01 .table-type04 .icon-list-wrap {
  padding: 0;
}

/*인증번호 input timer*/
.input-timer-wrap {
  position: relative;
  width: 525px;
  margin-right: 10px;
}

.input-timer-wrap .timer {
  position: absolute;
  top: 0;
  right: -10px;
}

.table-type03-w {
  table-layout: fixed;
}

.table-type04 th label,
.table-type03-w th label {
  font-weight: 700;
}

/* 190625 추가 */
@media (max-width: 1200px) {
  .product-box .product-text .btn-thin {
    max-width: 75px;
    margin-left: 20px;
  }
}
/* 링크 */
.terms-link {
  display: inline-block;
  color: var(--body-clr);
  text-decoration: underline;
}

/* 수수료 단위 */
.sub-title-area .unitdate {
  float: right;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 11px;
  color: var(--body-clr);
  font-weight: 400;
}

/* .notice-subtext + .info-table-area {padding-top:30px} */
.table-title + .unitdate {
  margin-top: 0;
}

.unitdate {
  margin-top: 38px;
  margin-bottom: 20px;
  font-size: 11px;
  color: var(--body-clr);
  font-weight: 400;
  text-align: right;
}

.notice-subtext.topnone {
  margin-top: 0;
}

.tts + .info-table-area .notice-subtext.topnone {
  margin-top: 20px;
}

.tts + .notice-subtext.topnone {
  margin-top: 30px;
}

.table-title {
  font-size: 19px;
  text-align: center;
  font-weight: 500;
  color: var(--body-clr);
}

/* product-box */
.product-box {
  margin-top: 40px;
  border-top: 1px solid #000;
}

.product-box .product-title {
  padding: 23px 20px;
  background: #f7f7f7;
  border-top: 1px solid var(--disable-clr);
  border-bottom: 1px solid var(--disable-clr);
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

.product-box .product-text {
  padding: 18px 20px;
  border-bottom: 1px solid #efefef;
  font-size: 14px;
  font-weight: 400;
}

.product-box .product-text .btn-thin {
  margin-left: 20px;
  padding: 6px 0 4px;
}

.product-box .product-title + .product-text {
  border-bottom: 0;
}

@media (max-width: 768px) {
  .product-box {
    margin-top: 0;
  }
}
/* table-type04 */
/* .table-type04 {table-layout:fixed} */
.media-scroll-wrap * {
  word-break: break-all;
}

/* 윤리경영 */
.ethics-list-box {
  margin: 47px 0 0 3px;
}

.ethics-list-box .ethics-list {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 400;
  color: var(--body-clr);
  line-height: 42px;
}

.ethics-list-box .ethics-list:first-child {
  margin-top: 0;
}

.ethics-list-box .ethics-list .title {
  margin-top: 47px;
  font-size: 22px;
  font-weight: 500;
  color: var(--body-clr);
}

.ethics-list-box .ethics-list .title:first-child {
  margin-top: 0;
}

.ethics-list-box .ethics-list .title .point-title {
  color: var(--main-clr);
  font-weight: 500;
}

.ethics-list-box .ethics-list .title02 {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
}

.ethics-list-box .ethics-list .text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.ethics-list-box .ethics-list .termlist-box .ethics-list {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.ethics-sign {
  margin: 18px 0 0 3px;
  font-size: 22px;
  color: var(--main-clr);
  font-weight: 400;
}

.ethics-sign .text {
  color: var(--main-clr);
  font-size: 16px;
  font-weight: 400;
}

@media (max-width: 768px) {
  .ethics-list-box {
    margin-top: 25px;
  }
  .ethics-list-box .ethics-list {
    font-size: 14px;
    line-height: 22px;
  }
  .ethics-list-box .ethics-list:first-child {
    margin-top: 0;
  }
  .ethics-list-box .ethics-list .title {
    margin-bottom: 10px;
    font-size: 17px;
  }
  .ethics-sign {
    font-size: 18px;
  }
  .ethics-sign .text {
    font-size: 14px;
  }
  .table-title {
    margin-top: 20px;
  }
  .table-title + .unitdate {
    margin-top: 20px;
  }
}
/*부동산담보대출버튼*/
.btn-linebox {
  margin-top: 15px;
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid #d3d3d3;
  padding: 10px 28px;
}

.btn-linebox .btn-style01 {
  padding: 0 48px 0 19px;
  border-radius: 0;
  border-bottom-width: 2px;
  background: url(/img/hss_content/hps/ico_down.png) no-repeat right 20px top 10px;
  text-align: left;
}

.certification-agency-box {
  margin-top: 18px;
}

.certification-agency-box::after {
  content: "";
  display: block;
  clear: both;
}

.certification-agency-box .l-box {
  float: left;
  width: 50%;
}

.certification-agency-box .r-box {
  float: right;
  width: 50%;
  text-align: right;
}

.certification-agency-box .bank {
  height: 21px;
  font-size: 14px;
}

.certification-agency-box .text {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}

.certification-agency-box .logo-box {
  margin-top: -2px;
}

.certification-agency-box .logo-box img {
  width: 105px;
}

.btn-area02 {
  margin-top: 20px;
  text-align: right;
}

.btn-area02 .btn-style08 {
  display: inline-block;
  min-width: 120px;
  height: 40px;
  padding-left: 38px;
  border: 1px solid var(--disable-clr);
  border-bottom-width: 2px;
  background: url(/img/hss_content/bul_printer.png) no-repeat left 28px top 10px;
  font-size: 14px;
  text-align: center;
  color: #666;
}

/*골드바*/
.w-none {
  display: none;
}

@media (max-width: 1200px) {
  .m-none {
    display: none;
  }
  .w-none {
    display: block;
  }
  /* 모바일 더보기버튼 있는 테이블 */
  .table-wrap01 {
    position: relative;
  }
  .tbl-style04 {
    width: calc(100% - 30px);
    margin-left: 30px;
  }
  .tbl-style04 th,
  .tbl-style04 td {
    padding: 5px 10px;
    font-size: 15px;
    line-height: 28px;
  }
  .tbl-style04 th {
    font-weight: 700;
    text-align: left;
  }
  .tbl-style04 td {
    color: #666;
    line-height: 28px;
  }
  .btn_tablemore {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 38px;
    height: 38px;
    background: url(/img/hss_common/button/btn_plus.png) no-repeat 50% 50%;
    background-size: 18px 18px;
  }
  .table-accordion-item.js-accordion-opened .btn_tablemore {
    background-image: url(/img/hss_common/button/btn_minus.png);
  }
  /* table accordion */
  .table-accordion-layer.js-ui-accordion-layer {
    position: relative;
    height: 228px;
    overflow: hidden;
  }
  .table-accordion-layer .component-layer-close-button {
    display: none;
    position: absolute;
    width: 38px;
    height: 38px;
    top: 0;
    left: 0;
  }
  .table-accordion-item.js-accordion-opened .table-accordion-layer .component-layer-close-button {
    display: block;
  }
}
@media (max-width: 768px) {
  .certification-agency-box .l-box,
  .certification-agency-box .r-box {
    float: none;
    width: 100%;
  }
  .certification-agency-box .r-box {
    text-align: left;
    margin-top: 20px;
  }
  .btn-area02 .btn-style08 {
    display: none;
  }
}
.notice-date {
  margin-top: 10px;
  text-align: right;
  font-size: 14px;
}

.common-titlestyle01 + .table-wrap01 {
  margin-top: 15px;
}

.notice-subtext.topnone + .table-wrap01 {
  margin-top: 35px;
}

/*대출 상품*/
.txt-total.loan {
  display: inline-block;
  margin-bottom: 15px;
}

.txt-total.loan::after {
  content: "";
  display: block;
  float: none;
  clear: both;
}

.txt-total.loan .item {
  float: left;
  font-weight: 500;
  margin-right: 10px;
}

.table-type01.loan .se-td {
  border: 0;
}

.table-type01.loan th.w-44 {
  width: 44%;
}

.table-type01.loan th.w-21 {
  width: 21%;
}

.table-type01.loan th.w-130 {
  min-width: 130px;
}

.table-type01.loan .se-td:first-child {
  text-align: left;
  padding: 30px 35px;
}

.table-type01 td .td-wrap .link {
  display: inline-block;
}

.ico-wrap {
  font-size: 11px;
}

/*상품테이블 상품명*/
.product-title {
  font-size: 24px;
  font-weight: 500;
  padding-top: 30px;
  padding-bottom: 15px;
}

.product-txt {
  font-size: 16px;
  line-height: 1.3;
}

.loan-p-wrap {
  padding: 20px 0;
  background: #f7f7f7;
  /* min-height: 112px; */
}

.loan-p-wrap.one {
  padding: 40px 0px;
}

.loan-p-wrap .loan-p-txt {
  font-size: 16px;
  word-break: keep-all;
  display: block;
  margin-bottom: 10px;
}

.loan-p-wrap .loan-p-txt.pc-none {
  display: none;
}

.loan-p-wrap .loan-p-txt:last-child {
  margin-bottom: 0;
}

.loan-p-wrap .loan-p-point {
  font-size: 30px;
  color: var(--neg-clr);
  font-weight: 500;
  line-height: 1.2;
}

.loan-p-info {
  font-size: 20px;
  line-height: 1.3;
  padding-top: 10px;
  display: inline-block;
}

.product-list {
  overflow: hidden;
  width: 100%;
  border-top: 1px solid var(--body-clr);
}

.product-list > li {
  overflow: hidden;
  width: 100%;
  padding: 30px 3.7%;
  position: relative;
  border-bottom: 1px solid #efefef;
}

.product-list > li .product-list-l {
  float: left;
  width: 47%;
  height: 100%;
}

.product-list > li .product-list-tit {
  font-size: 24px;
  float: left;
  width: 380px;
  padding-top: 37px;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.product-list > li .product-list-exp {
  width: 100%;
  float: left;
  line-height: 1.5;
  font-size: 16px;
  padding-top: 15px;
}

.product-list > li .product-list-classi {
  position: absolute;
  top: 30px;
  left: 40px;
  font-size: 11px;
}

.product-list-btn.margin .btn-small {
  margin-bottom: 10px;
}

.product-list > li .product-list-irate {
  width: 38.2%;
  display: table;
  text-align: center;
  float: left;
  margin-top: 21px;
}

.product-list > li .product-list-irate > li {
  display: table-cell;
  width: 50%;
  border-left: 1px solid #efefef;
  margin-left: 40px;
  height: 90px;
  text-align: center;
  font-size: 14px;
  letter-spacing: -0.07em;
}

.product-list > li .product-list-irate > li:first-child {
  width: 125px;
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}

.product-list > li .product-list-irate > li em {
  display: block;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  padding: 10px 0;
}

.product-list > li .product-list-irate > li em i {
  display: inline;
  width: auto;
  color: var(--neg-clr);
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
}

.product-list > li .product-list-btn {
  float: left;
  /* top:30px; right:40px;*/
  width: 14.8%;
  margin-top: 17px;
}

.product-list > li .product-list-btn button {
  margin-bottom: 10px;
}

.no-item {
  min-height: 178px;
  text-align: center;
  font-weight: 500;
  font-size: 22px;
  line-height: 117px;
}

.product-view {
  width: 100%;
  border-top: 1px solid var(--body-clr);
  border-bottom: 1px solid var(--disable-clr);
  padding-top: 25px;
}

.product-view .product-list-l {
  position: relative;
  padding: 0 40px;
}

.product-view .ico-internet,
.product-view .ico-smartphone,
.product-view .ico-shop {
  display: inline-block;
}

.product-view .product-view-tit {
  font-size: 24px;
  display: inline-block;
  width: 100%;
  padding-top: 25px;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.product-view .product-view-exp {
  width: 100%;
  line-height: 1.5;
  font-size: 16px;
  display: inline-block;
  padding-top: 15px;
}

.product-view .product-view-sns {
  float: right;
}

.product-view .product-view-sns a {
  float: left;
  margin-right: 5px;
}

.product-view .product-view-sns A:last-child {
  margin-right: 0;
}

.product-view-dl {
  overflow: hidden;
  width: 100%;
  margin-top: 35px;
  padding: 40px;
  border-top: 1px solid #efefef;
}

.product-view-dl > li {
  display: table;
  width: 100%;
  padding-top: 15px;
}

.product-view-dl > li:first-child {
  padding-top: 0px;
}

.product-view-dl .notice {
  padding-left: 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.product-view-dl .notice::before {
  content: "";
  float: left;
  margin-left: -15px;
  margin-top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #999;
}

.product-view-dl .product-view-dt {
  font-weight: 500;
  display: table-cell;
  width: 165px;
  padding-left: 15px;
  padding-right: 20px;
  vertical-align: top;
  font-size: 14px;
  line-height: 32px;
  word-break: keep-all;
}

.product-view-dl .product-view-dt::before {
  content: "";
  float: left;
  margin-left: -15px;
  margin-top: 13px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #999;
}

.product-view-dl .product-view-dt.type02 {
  width: 100%;
}

.product-view-dl .product-view-dt span {
  display: block;
  margin-top: -12px;
  font-weight: 500;
}

.product-view-dl .list {
  overflow: hidden;
  padding-top: 20px;
}

.product-view-dl + .product-view-dl {
  margin-top: 0;
}

.product-view-dd .btn-thin.resize {
  display: inline-block;
  padding: 4px 8px 3px;
  vertical-align: 1px;
  line-height: 20px;
}

.product-view-dl .product-view-dd .notice-list-wrap {
  margin-top: 5px;
}

.product-view-dl .product-view-dd .notice-list-wrap + .notice-list-wrap {
  margin-top: 10px;
}

.product-view-dl .product-view-dd .table-wrap01 {
  margin-top: 10px;
}

.product-view-dl .product-view-dd .table-wrap01 + .notice-list-wrap {
  margin-top: 15px;
}

.product-view-dl .product-view-dd .table-type04 th {
  width: 145px;
}

.product-view-dl .product-view-dd .table-type04 td {
  width: auto;
  border-right: 1px solid #efefef;
}

.product-view-dl .product-view-dd .table-type04 td:last-child {
  border-right: 0;
}

.product-view-dl .product-view-dd .img-wrap {
  margin-top: 10px;
}

.product-view-dl .product-view-dd .img-wrap img {
  width: 100%;
}

.bbs-headinfo .snsbox,
.product-list-l .snsbox {
  position: relative;
  float: right;
  right: -22px;
  width: 64px;
}

.bbs-headinfo .snsbox .snslink-view,
.product-list-l .snsbox .snslink-view {
  display: block;
  overflow: hidden;
  width: 64px;
  height: 30px;
  margin-top: -3px;
  background: url(/img/common/icon_share.png) no-repeat right 20px top;
  font-size: 0;
  line-height: 0;
}

.bbs-headinfo .snsbox .tooltip-layerpopup,
.product-list-l .snsbox .tooltip-layerpopup {
  display: none;
  position: absolute;
  top: 50px;
  right: -48px;
  width: 300px;
  height: 148px;
  padding: 40px 0;
  border: 1px solid #000;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--bg-clr2);
}

.bbs-headinfo .snsbox .tooltip-layerpopup-close,
.product-list-l .snsbox .tooltip-layerpopup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background: #3399ff;
  z-index: 100;
}

.bbs-headinfo .snsbox .tooltip-layerpopup::after,
.product-list-l .snsbox .tooltip-layerpopup::after {
  position: absolute;
  top: -9px;
  right: 67px;
  content: " ";
  display: block;
  width: 15px;
  height: 9px;
  background: url(/img/common/bg_tooltip.gif) no-repeat 0 0;
}

.bbs-headinfo .bbs-head.style01::after,
.product-list-l .bbs-head.style01::after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* tooltip 이미지 */
.bbs-headinfo .snsbox .tooltip-layerpopup .kakao,
.product-list-l .snsbox .tooltip-layerpopup .kakao {
  background: url(/img/common/bul_kakao_off.png) no-repeat 50% 0;
}

.bbs-headinfo .snsbox .tooltip-layerpopup .instagram,
.product-list-l .snsbox .tooltip-layerpopup .instagram {
  background: url(/img/common/bul_insta_off.png) no-repeat 50% 0;
}

.bbs-headinfo .snsbox .tooltip-layerpopup .facebook,
.product-list-l .snsbox .tooltip-layerpopup .facebook {
  background: url(/img/common/bul_facebook_off.png) no-repeat 50% 0;
}

.bbs-headinfo .snsbox .tooltip-layerpopup .urlcopy,
.product-list-l .snsbox .tooltip-layerpopup .urlcopy {
  background: url(/img/common/bul_url_off.png) no-repeat 50% 0;
}

.bbs-headinfo .snsbox .tooltip-layerpopup .sns,
.product-list-l .snsbox .tooltip-layerpopup .sns {
  display: inline-block;
  width: 79px;
  padding-top: 65px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #666;
}

.bbs-headinfo .snsbox .tooltip-layerpopup .tooltip-layerpopup-close,
.product-list-l .snsbox .tooltip-layerpopup .tooltip-layerpopup-close {
  background: url(/img/common/bg_close.png) no-repeat center;
  font-size: 0;
}

.btn-area.type03 {
  margin-top: 20px !important;
  padding: 30px 20px !important;
  text-align: left;
  background: #f7f7f7;
}

.btn-sm-wh.ico_down {
  display: inline-block;
  min-width: 240px;
  height: 40px;
  padding: 0 40px 0 15px;
  background: var(--bg-clr2) url(/img/common/ico_down.png) no-repeat 95% center;
  text-align: left;
  line-height: 40px;
}

.btn-area + .notice-subtext {
  margin-top: 30px;
}

.product-list-l .common-text01 + .btn-thin {
  margin-top: 20px;
}

@media (max-width: 1200px) {
  .btn-area.type03.retouch-m {
    padding: 25px 16px !important;
  }
  .pv-kdic .pv-kdic-txt {
    font-size: 12px;
    line-height: 20px;
  }
}
@media (max-width: 1200px) {
  .product-list > li {
    padding: 20px 16px 35px;
  }
  .product-list > li .product-list-l {
    width: 100%;
  }
  .product-list > li .product-list-classi {
    left: 16px;
    top: 26px;
    font-size: 11px;
  }
  .product-list > li .product-list-exp {
    width: 100%;
    font-size: 13px;
    color: #666;
  }
  .product-list .product-list-irate {
    position: relative;
    left: 0px;
    top: 10px;
    width: 100% !important;
    margin-top: 0;
    background: #efefef;
  }
  .product-list > li .product-list-tit {
    font-size: 16px;
  }
  .product-list .product-list-irate > li {
    height: auto;
    width: 50%;
    padding: 25px 0;
    margin: 0;
    font-size: 11px;
    border-left: 1px solid var(--disable-clr) !important;
  }
  .product-list .product-list-irate > li:first-child {
    border: 0 !important;
  }
  .product-list .product-list-irate > li .m-bold {
    font-size: 13px;
    font-weight: 500;
  }
  .product-list .product-list-irate > li em {
    font-size: 18px;
  }
  .product-list .product-list-irate > li em i {
    font-size: 24px;
    vertical-align: middle;
  }
  .product-list > li .product-list-btn {
    position: relative;
    right: 0;
    top: 10px;
    width: 100%;
    display: inline-block;
    margin-top: 25px;
  }
  .product-list > li .product-list-btn button {
    width: 100%;
  }
  .no-item {
    padding-bottom: 16px !important;
    font-size: 19px;
    line-height: 138px;
  }
  .txt-total {
    display: inline-block;
    padding: 20px 0 0 16px;
    font-size: 11px;
    color: #666;
  }
  .product-view.mt50 {
    margin-top: 15px !important;
  }
  .product-view .product-view-tit {
    padding-top: 0;
    font-size: 20px;
  }
  .product-view .product-list-l {
    padding: 0 5px;
  }
  .product-view .product-view-dl {
    padding: 20px 5px;
    margin-top: 20px;
  }
  .product-view .product-view-exp {
    font-size: 14px;
  }
  .pv-kdic {
    padding: 16px;
  }
  .pv-kdic .pv-kdic-logo {
    display: inline-block;
    margin-top: 7px;
    margin-right: 20px;
    padding-right: 0;
    min-width: 100px;
  }
  .pv-kdic .pv-kdic-logo img {
    max-width: 100%;
  }
  .product-view-dl li {
    overflow: hidden;
  }
  .product-view-dl .product-view-dt {
    display: block;
    width: 100%;
    padding-left: 10px;
    line-height: 20px;
  }
  .product-view-dl .product-view-dt::before {
    margin-top: 8px;
    margin-left: -10px;
  }
  .product-view-dl .product-view-dt span {
    display: inline;
  }
  .product-view-dl .product-view-dd {
    width: 100%;
  }
  .product-view-dl .product-view-dd .table-type03-w {
    display: table;
  }
  .product-view-dl .product-view-dd .img-wrap img {
    max-width: 100%;
  }
  .product-view-dl .product-view-dd .notice-list-wrap {
    padding: 0;
  }
  .notice-list-wrap + .tab-basic.pt50 {
    margin-top: 0;
  }
  .notice-list li,
  ul .common-liststyle01 {
    font-size: 12px;
    line-height: 18px;
    padding-bottom: 6px;
    padding-left: 8px;
  }
  .notice-list li {
    padding: 0;
  }
  .notice-list li::before,
  ul .common-liststyle01::before {
    margin-left: -8px;
    margin-top: 8px;
    width: 2px;
    height: 2px;
    background-color: var(--body-clr);
  }
  .notice-list-wrap + .tab-basic {
    margin-top: 0;
  }
  /*상세페이지*/
  .notice-list.bg {
    background: var(--bg-clr2);
    padding: 30px 20px;
    margin-bottom: -30px;
  }
  .btn-area.retouch-m .btn-sm-wh {
    width: 100%;
  }
  .ico-wrap {
    font-size: 11px;
  }
  .product-title {
    font-size: 16px;
    padding-top: 25px;
    padding-bottom: 10px;
  }
  .product-txt {
    font-size: 13px;
  }
  .loan-p-wrap {
    text-align: center;
    padding: 30px 0 0px;
  }
  .loan-p-info {
    width: 100%;
    background: #f7f7f7;
    text-align: center;
    font-size: 11px;
    padding-bottom: 20px;
  }
  .loan-p-wrap .loan-p-txt {
    font-size: 16px;
    font-weight: 700;
  }
  .loan-p-wrap .loan-p-point {
    font-size: 24px;
  }
  .loan-p-wrap .loan-p-txt.pc-none {
    display: block;
  }
  .table-type01.loan .se-td .td-wrap button {
    margin-bottom: 10px;
  }
  .full-content {
    margin: 0 -18px !important;
  }
  .full-content .btn-area {
    padding: 0 18px !important;
  }
  /* 툴팁 미디어 쿼리 */
  .snsbox .tooltip-layerpopup {
    right: -3px;
    width: 155px;
    height: 62px;
    padding: 19px 0 40px 0;
  }
  .snsbox .tooltip-layerpopup::after {
    right: 20px;
  }
  .snsbox .tooltip-layerpopup .kakao,
  .snsbox .tooltip-layerpopup .instagram,
  .snsbox .tooltip-layerpopup .facebook,
  .snsbox .tooltip-layerpopup .urlcopy {
    background-size: 80%;
    line-height: 0;
  }
  .snsbox .tooltip-layerpopup .sns {
    width: 32px;
    padding-top: 34px;
    font-size: 0;
  }
  /* 버튼 여백 */
  .btn-area {
    margin-top: 25px;
  }
}
/*대출 상품*/
.txt-total.loan {
  display: inline-block;
  margin-bottom: 15px;
}

.txt-total.loan::after {
  content: "";
  display: block;
  float: none;
  clear: both;
}

.txt-total.loan .item {
  float: left;
  font-weight: 500;
  margin-right: 10px;
}

.table-type01.loan .se-td {
  border: 0;
}

.table-type01.loan th.w-44 {
  width: 44%;
}

.table-type01.loan th.w-21 {
  width: 21%;
}

.table-type01.loan th.w-130 {
  min-width: 130px;
}

.table-type01.loan .se-td:first-child {
  text-align: left;
  padding: 30px 35px;
}

.ico-wrap {
  font-size: 11px;
}

/*상품테이블 상품명*/
.product-txt {
  font-size: 16px;
  line-height: 1.3;
}

.loan-p-wrap {
  padding: 20px 0;
  background: #f7f7f7;
  /* min-height: 112px; */
}

.loan-p-wrap.one {
  padding: 40px 0px;
}

.loan-p-wrap .loan-p-txt {
  font-size: 16px;
  word-break: keep-all;
  display: block;
  margin-bottom: 10px;
}

.loan-p-wrap .loan-p-txt.pc-none {
  display: none;
}

.loan-p-wrap .loan-p-txt:last-child {
  margin-bottom: 0;
}

.loan-p-wrap .loan-p-point {
  font-size: 30px;
  color: var(--neg-clr);
  font-weight: 500;
  line-height: 1.2;
}

.loan-p-info {
  font-size: 20px;
  line-height: 1.3;
  padding-top: 10px;
  display: inline-block;
}

.product-list-btn.margin .btn-small {
  margin-bottom: 10px;
}

@media (max-width: 1200px) {
  .ico-wrap {
    font-size: 11px;
  }
  .table-type01.loan th {
    display: none !important;
  }
  .table-type01.loan .se-td::before {
    display: none;
  }
  .table-type01.loan .se-td {
    display: block;
    border: 0;
    width: 100%;
  }
  .table-type01.loan .se-td:first-child {
    border-top: 1px solid var(--body-clr);
  }
  .table-type01.loan .se-td .td-wrap {
    padding-bottom: 0;
  }
  .table-type01.loan .se-td:last-child .td-wrap {
    padding-bottom: 20px;
  }
  .product-title {
    font-size: 16px;
    padding-top: 25px;
    padding-bottom: 10px;
  }
  .product-txt {
    font-size: 13px;
  }
  .loan-p-wrap {
    text-align: center;
    padding: 30px 0 0px;
  }
  .loan-p-info {
    width: 100%;
    background: #f7f7f7;
    text-align: center;
    font-size: 11px;
    padding-bottom: 20px;
  }
  .loan-p-wrap .loan-p-txt {
    font-size: 16px;
    font-weight: 700;
  }
  .loan-p-wrap .loan-p-point {
    font-size: 24px;
  }
  .loan-p-wrap .loan-p-txt.pc-none {
    display: block;
  }
  .table-type01.loan .se-td .td-wrap button {
    margin-bottom: 10px;
  }
}
.ceo-info-wrap {
  padding: 0 100px;
}

.ceo-info {
  text-align: center;
}

.ceo-img-box {
  height: 450px;
  background: url(/img/hss_content/com/img_ceo.jpg);
}

.ceo-img-box + .ceo-info-wrap {
  margin-top: 70px;
}

.ceo-info .title {
  font-size: 30px;
  color: var(--body-clr);
  line-height: 38px;
  word-break: keep-all;
}

.ceo-info .text {
  margin-top: 30px;
  font-size: 18px;
  color: #666;
  text-align: left;
  line-height: 30px;
}

.ceo-info-wrap .ceo-text {
  margin-top: 74px;
  font-size: 18px;
  color: #666;
  text-align: right;
  line-height: 30px;
}

.ceo-info-wrap .ceo-text span {
  display: block;
  color: #666;
  line-height: 50px;
}

.ceo-info-wrap .ceo-sign {
  margin-top: 36px;
  text-align: right;
}

.ceo-img-wrap .ceo-sign.type2 {
  margin-top: 36px;
  text-align: right;
}

/*김재원*/
/* .ceo-info-wrap .ceo-sign img {margin:0 -21px -19px 21px} */
.ceo-info-wrap .ceo-sign span {
  font-size: 18px;
  color: var(--body-clr);
  line-height: 30px;
}

.ceo-info-wrap.anyang-bank {
  padding: 0 60px;
}

/* 안양 저축은행 */
.ceo-info-wrap.anyang-bank .text-point {
  color: #007b00;
}

/* 경영이념 신규스타일  */
.ethics-info {
  text-align: center;
}

.ethics-info .title {
  font-size: 30px;
  color: var(--body-clr);
  line-height: 38px;
  word-break: keep-all;
}

.ethics-info .title .title-comment {
  display: block;
  padding: 50px 0;
  font-size: 18px;
  color: #666;
  line-height: 30px;
}

/*장현철*/
.ethics-info .ethics-img img {
  width: 100%;
}

.ethics-info .ethics-img .ethics-img-pc {
  display: block;
}

.ethics-info .ethics-img .ethics-img-m {
  display: none;
}

.ethics-info .txt {
  font-size: 18px;
  letter-spacing: -0.25px;
  color: #666;
  line-height: 30px;
  margin: 100px 0;
}

/* 20200901 이예빈 추가 */
/* 고려저축은행 */
.organize-box.goryeo-bank img {
  max-width: 760px;
}

/* 기업문화 인성 저축은행 */
.insung-bank .ethics-info .title .title-comment {
  display: block;
  margin: 25px 0;
  font-size: 30px;
  color: var(--body-clr);
  line-height: 42px;
  letter-spacing: -0.5px;
}

.insung-bank .ethics-info .point-color01 {
  color: #0c6fb3 !important;
  font-weight: bold;
}

.insung-bank .ethics-info .point-color02 {
  color: #2eb1d2 !important;
  font-weight: bold;
}

/* [공통]  ceo 인사말 가로형 */
.ceo-img-box {
  display: table;
  width: 100%;
  padding: 0 0 0 49px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
}

.ceo-img-box .text {
  display: table-cell;
  position: relative;
  font-size: 30px;
  color: var(--bg-clr2);
  line-height: 52px;
  vertical-align: middle;
}

/* .ceo-img-box .text::before {display:block;content:'';position:absolute;top:134px;left:0;width:60px;height:4px;background:#008ed8;} */
.ceo-img-box .text span {
  display: block;
  color: var(--bg-clr2);
  line-height: 52px;
}

.ceo-img-box .text .text-point {
  display: inline-block;
}

.ceo-img-box.hanhwa-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/hanhwa_content/bg_ceo.jpg);
}

/* 한화저축은행  */
.ceo-img-box.koreatuja-bank {
  height: 451px;
  background-image: url(/img/hss_companycontent/koreatuja_content/bg_ceo.jpg);
}

/* 한국투자저축은행  */
.ceo-img-box.koreatuja-bank .text .text-point {
  color: #71a3ea;
}

.ceo-img-box.kiumyes-bank {
  height: 330px;
  background-image: url(/img/hss_companycontent/kiumyes_content/bg_ceo.jpg);
}

/* 키움예스저축은행  */
.ceo-img-box.kiumyes-bank .text::before {
  top: 50px;
  background: #008ed8;
}

.ceo-img-box.jinju-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/jinju_content/bg_ceo.jpg);
}

/* 진주저축은행  */
.ceo-img-box.jinju-bank .text .ty01 strong {
  color: var(--bg-clr2);
  font-weight: 500;
}

.ceo-img-box.yungchang-bank {
  height: 330px;
  background-image: url(/img/hss_companycontent/yungchang_content/bg_ceo.jpg);
}

/* 융창저축은행  */
.ceo-img-box.yungchang-bank .text .text-point {
  color: #00a3d9;
}

.ceo-img-box.out-bank {
  height: 330px;
  background-image: url(/img/hss_companycontent/out_content/bg_ceo.jpg);
}

/* 오투저축은행  */
.ceo-img-box.out-bank .text .text-point {
  color: #00b4f1;
}

.ceo-img-box.ms-bank {
  height: 330px;
  background-image: url(/img/hss_companycontent/ms_content/bg_ceo.jpg);
}

/* 엠에스 저축은행  */
.ceo-img-box.ms-bank .text .text-point {
  font-weight: 700;
  color: #008db2;
}

.ceo-img-box.anyang-bank {
  height: 332px;
  background-image: url(/img/hss_companycontent/anyang_content/bg_ceo.jpg);
}

/* 안양 저축은행  */
.ceo-img-box.baro-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/baro_content/bg_ceo.jpg);
}

/* 바로 저축은행  */
.ceo-info-wrap.baro-bank {
  padding: 0;
}

.ceo-img-box.sky-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/sky_content/bg_ceo.jpg);
}

/* 스카이	저축은행  */
.ceo-img-box.smart-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/smart_content/bg_ceo.jpg);
}

/* 스마트	저축은행  */
.ceo-img-box.central-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/central_content/bg_ceo.jpg);
}

/* 센트럴 저축은행  */
.ceo-img-box.central-bank .text strong {
  color: var(--bg-clr2);
}

.ceo-img-box.samho-bank {
  height: 449px;
  background-image: url(/img/hss_companycontent/samho_content/bg_ceo.jpg);
}

/* 삼호 저축은행  */
.ceo-img-box.burim-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/burim_content/bg_ceo.jpg);
}

/* 부림 저축은행  */
.ceo-info-wrap.burim-bank .text .ty01 {
  display: block;
  color: #ed1260;
  font-weight: 700;
}

.ceo-img-box.minguk-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/minguk_content/bg_ceo.jpg);
}

/* 민국 저축은행  */
.ceo-img-box.raon-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/raon_content/bg_ceo.jpg);
}

/* 라온 저축은행  */
.ceo-img-box.dream-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/dream_content/bg_ceo.jpg);
}

/* 드림 저축은행  */
.ceo-img-box.dongyang-bank {
  height: 240px;
  background-image: url(/img/hss_companycontent/dongyang_content/bg_ceo.jpg);
}

/* 동양 저축은행  */
.ceo-img-box.dobble-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/dobble_content/bg_ceo.jpg);
}

/* 더블 저축은행  */
.ceo-img-box.daehan-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/daehan_content/bg_ceo.jpg);
}

/* 대한 저축은행  */
.ceo-img-box.daewon-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/daewon_content/bg_ceo.jpg);
}

/* 대원 저축은행  */
.ceo-img-box.daea-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/daea_content/bg_ceo.jpg);
}

/* 대아 저축은행  */
.ceo-img-box.daeback-bank {
  height: 240px;
  background-image: url(/img/hss_companycontent/daeback_content/bg_ceo.jpg);
}

/* 대백 저축은행  */
.ceo-img-box.goryeo-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/goryeo_content/bg_ceo.jpg);
}

/* 고려 저축은행  */
.ceo-img-box.gangwon-bank {
  height: 240px;
  background-image: url(/img/hss_companycontent/gangwon_content/bg_ceo.jpg);
}

/* 강원 저축은행  */
.ceo-img-box.dh-bank {
  height: 449px;
  background-image: url(/img/hss_companycontent/dh_content/bg_ceo.jpg);
}

/* dh 저축은행  */
.ceo-img-box.star-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/star_content/img_stceo.png);
}

/* 스타 저축은행  */
.ceo-img-box.yuanta-bank {
  height: 330px;
  background-image: url(/img/hss_companycontent/yuanta_content/bg_ceo.jpg);
}

/* 유안타 저축은행  */
.ceo-img-box.woolee-bank {
  height: 450px;
  background-image: url(/img/hss_companycontent/woolee_content/bg_ceo.jpg);
}

/* 우리저축은행  */
.ceo-img-box.woolee-bank > .text {
  text-align: center;
  font-family: "NanumMyeongjo";
}

/* 우리저축은행  */
.ceo-img-box.woolee-bank > .text strong {
  font-size: 40px;
  color: var(--bg-clr2);
  font-family: "NanumMyeongjo";
}

/* 우리저축은행  */
.ceo-info-wrap.woolee-bank {
  padding: 0;
}

/* 우리저축은행  */
.ceo-img-box.insung-bank {
  height: 340px;
  background-image: url(/img/hss_companycontent/insung_content/bg_ceo.jpg);
}

/* 인성저축은행  */
.ceo-info-wrap.insung-bank {
  padding: 0;
}

.ceo-info-wrap.insung-bank .ceo-sign {
  margin: 50px 0;
  text-align: left;
}

/* [공통] ceo 인사말  세로형 */
.ceo-img-wrap {
  padding-left: 357px;
  background-repeat: no-repeat;
  background-position: 58px 132px;
}

.ceo-info-box02 .title {
  font-size: 30px;
  text-align: left;
  line-height: 46px;
}

.ceo-info-box02 .text,
.ceo-info-box02 .text-box li {
  color: #666;
  font-size: 18px;
  line-height: 29px;
}

.ceo-info-box02 .title + .text {
  margin-top: 39px;
}

.ceo-info-box02 .text,
.ceo-info-box02 .text-box {
  margin-top: 30px;
}

.ceo-img-wrap .ceo-info-sign {
  margin-top: 66px;
}

.ceo-info-box02 .title span {
  display: block;
  line-height: 46px;
}

.ceo-info-box02 .title .text-point {
  display: inline-block;
}

/* ceo 인사말 세로형(사진과 내용 순서 반대) 19.09.24 김재원 */
.ceo-img-wrap-type02 {
  padding-left: 0px;
  padding-right: 357px;
  background-position: 850px 132px;
}

.ceo-info-box03 .title {
  font-size: 30px;
  text-align: left;
  line-height: 46px;
}

.ceo-info-box03 .text,
.ceo-info-box03 .text-box li {
  color: #666;
  font-size: 18px;
  line-height: 29px;
}

.ceo-info-box03 .title + .text {
  margin-top: 39px;
}

.ceo-info-box03 .text,
.ceo-info-box03 .text-box {
  margin-top: 30px;
}

.ceo-img-wrap-type02 .ceo-info-sign {
  margin-top: 66px;
}

.ceo-info-box03 .title span {
  display: block;
  line-height: 46px;
}

.ceo-info-box03 .title .text-point {
  display: inline-block;
}

.ceo-img-wrap.pyeongtaek-bank {
  background-image: url(/img/hss_companycontent/pyeongtaek_content/img_pyeongtaekceo.jpg);
}

/* 평택 */
.ceo-img-wrap.cheongju-bank {
  background-image: url(/img/hss_companycontent/cheongju_content/bg_cheongjuceo.jpg);
}

/* 키움yes 저축은행 */
.ceo-img-wrap.incheon-bank {
  background-image: url(/img/hss_companycontent/incheon_content/bg_incheonceo.jpg);
}

/* 인천 저축은행 */
.ceo-img-wrap.osung-bank {
  background-image: url(/img/hss_companycontent/osung_content/bg_osungceo.jpg);
}

/* 오성 저축은행 */
.ceo-img-wrap.asan-bank {
  padding-left: 0;
  background-image: none;
}

/* 아산 저축은행 */
.ceo-img-wrap.samjung-bank {
  background-image: url(/img/hss_companycontent/samjung_content/bg_ceo.jpg);
}

/* 삼정 저축은행 */
.ceo-img-wrap.moa-bank {
  background-image: url(/img/hss_companycontent/moa_content/bg_ceo.jpg);
}

/* 모아 저축은행 */
.ceo-img-wrap.daehan-bank {
  background-image: url(/img/hss_companycontent/daehan_content/bg_ceo.jpg);
}

/* 대한 저축은행 */
.ceo-img-wrap.daemyung-bank {
  background-image: url(/img/hss_companycontent/daemyung_content/bg_ceo.jpg);
}

/* 대명 저축은행 */
.ceo-img-wrap.namyang-bank {
  padding-left: 427px;
  background-image: url(/img/hss_companycontent/namyang_content/bg_ceo.jpg);
  background-size: 409px;
  background-position: 0 0;
}

/* 남양저축은행 */
.ceo-img-wrap.namyang-bank .ceo-info-sign {
  margin-top: 49px;
}

.ceo-img-wrap.kuemhwa-bank {
  background-image: url(/img/hss_companycontent/kuemhwa_content/bg_ceo.jpg);
}

/* 금화 저축은행 */
.ceo-img-wrap.yungchang-bank {
  padding-left: 427px;
  background-image: url(/img/hss_companycontent/yungchang_content/bg_ceo.jpg);
  background-size: 409px;
  background-position: 0 0;
}

/* 융창저축은행 */
.ceo-img-wrap.yungchang-bank-ceo {
  background-image: url(/img/hss_companycontent/yungchang_content/bg_yungchang_ceo.jpg);
  background-size: 200px auto;
}

/* 조은 저축은행 */
.ceo-img-wrap.choeun-bank {
  background: url(/img/hss_companycontent/choeun_content/img_ceo.jpg) no-repeat top left/contain;
}

@media (max-width: 1200px) {
  /* CEO 인사말 */
  .ceo-img-wrap {
    margin-top: 20px;
    padding-top: 272px;
    padding-left: 0;
    background-position: 50% top;
  }
  .ceo-info-box02 .title {
    font-size: 20px;
    line-height: 27px;
  }
  .ceo-info-box02 .title + .text {
    margin-top: 14px;
  }
  .ceo-info-box02 .text,
  .ceo-info-box02 .text-box li {
    font-size: 15px;
    line-height: 22px;
  }
  /* CEO 인사말 13.09.24 김재원 */
  .ceo-img-wrap-type02 {
    margin-top: 20px;
    padding-top: 272px;
    padding-right: 0;
    background-position: 50% top;
  }
  .ceo-info-box03 .title {
    font-size: 20px;
    line-height: 27px;
  }
  .ceo-info-box03 .title + .text {
    margin-top: 14px;
  }
  .ceo-info-box03 .text,
  .ceo-info-box03 .text-box li {
    font-size: 15px;
    line-height: 22px;
  }
  /* CEO 인사말 13.09.24 김재원 */
  .ceo-img-wrap-type02 {
    margin-top: 20px;
    padding-top: 272px;
    padding-left: 0;
    background-position: 50% top;
  }
  .ceo-info-box03 .title {
    font-size: 20px;
    line-height: 27px;
  }
  .ceo-info-box03 .title + .text {
    margin-top: 14px;
  }
  .ceo-info-box03 .text,
  .ceo-info-box03 .text-box li {
    font-size: 15px;
    line-height: 22px;
  }
  /* CEO 인사말 */
  .ceo-img-box {
    height: 200px !important;
    padding-left: 0;
    background-size: 100% 100%;
  }
  /* .ceo-img-box .text {position:relative;top:0;left:0px;margin-top:10px;font-size:18px;text-align:center;line-height:34px;font-weight: $bold;color:var(--body-clr);} */
  .ceo-img-box .text {
    display: none;
  }
  .ceo-img-box .title span {
    display: inline-block;
  }
  .ceo-img-box .text::before {
    display: none;
  }
  .ceo-info-wrap {
    padding: 0;
  }
  .ceo-info-wrap.anyang-bank {
    padding: 0 18px;
  }
  .ceo-img-box + .ceo-info-wrap {
    margin-top: 15px;
    line-height: 40px;
  }
  .ceo-info .title {
    font-size: 20px;
    line-height: 28px;
  }
  .ceo-info .text {
    margin-top: 20px;
    font-size: 13px;
    line-height: 26px;
  }
  .ceo-info-wrap .ceo-text {
    margin-top: 20px;
    font-size: 13px;
  }
  .ceo-img-wrap.namyang-bank {
    padding-top: 270px;
    padding-left: 0;
    background-size: 210px;
    background-position: 50% 20px;
  }
  .ceo-img-wrap.moa-bank {
    padding-top: 300px;
    background-size: 200px;
  }
  .ceo-img-wrap.choeun-bank {
    background-size: 185px;
  }
  /* 경영이념 신규스타일  */
  .ethics-info .title {
    font-size: 20px;
    line-height: 28px;
  }
  .ethics-info .title .title-comment {
    display: block;
    padding: 20px 0;
    font-size: 13px;
    line-height: 26px;
  }
  .ethics-info .ethics-img .ethics-img-pc {
    display: none;
  }
  .ethics-info .ethics-img .ethics-img-m {
    display: block;
  }
  .ethics-info .txt {
    font-size: 36px;
    line-height: 58px;
    margin: 50px 20px;
  }
  /* 20200901 이예빈 추가 */
  /* 우리은행  */
  .ceo-img-box.woolee-bank > .text {
    display: block;
    font-size: 13px;
    line-height: 26px;
  }
  /* 우리저축은행  */
  .ceo-img-box.woolee-bank > .text strong {
    font-size: 16px;
  }
  /* 우리저축은행  */
  .ceo-img-box.woolee-bank {
    padding-top: 55px;
  }
  /* 우리저축은행  */
  /* 기업문화 인성 저축은행 */
  .insung-bank .ethics-info .title .title-comment {
    font-size: 50px;
    line-height: 68px;
    margin: 25px 50px;
  }
}
@media (max-width: 768px) {
  /* 경영이념 신규스타일  */
  .ethics-info .txt {
    font-size: 18px;
    line-height: 29px;
    margin: 50px 0;
  }
  /* 20200901 이예빈 추가 */
  /* 기업문화 인성 저축은행 */
  .insung-bank .ethics-info .title .title-comment {
    font-size: 25px;
    line-height: 34px;
  }
}
/* 채권추심업무 */
.tts + .bond-infobox {
  margin-top: 40px;
}

.bond-infobox .bond-title {
  color: var(--main-clr);
  font-size: 22px;
  font-weight: 700;
  line-height: 27px;
}

.bond-textstyle01 {
  padding-left: 16px;
  color: var(--body-clr);
  font-size: 16px;
  text-indent: -14px;
  line-height: 24px;
}

.bond-textstyle01::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: #999;
  vertical-align: 3px;
}

.info-boxstyle {
  padding: 20px 18px 9px;
  margin-top: 34px;
  background: #f7f7f7;
}

.info-boxstyle .title {
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 700;
}

.bond-list01 {
  margin-top: 16px;
}
.bond-list01 li {
  font-size: 14px;
  color: var(--cap-clr);
  text-indent: 14px;
}
.bond-list01 .bond-textstyle01 {
  margin-top: 13px;
  font-size: 16px;
  text-indent: -14px;
  color: var(--body-clr);
}

.bond-list01 .bond-textstyle01:first-child {
  margin-top: 0;
}

.bond-infobox .bond-title:first-child {
  margin-top: 0;
}

.bond-infobox .bond-title {
  margin-top: 36px;
}

.bond-list02 {
  margin-top: 14px;
}

.bond-list02 .bond-textstyle01 {
  line-height: 34px;
}

.bond-infobox .bond-title + .bond-textstyle01 {
  margin-top: 16px;
}

.bond-list03 {
  margin-top: 11px;
}

.bond-list03 .text {
  font-size: 14px;
  margin-top: 10px;
  padding-left: 17px;
  text-indent: -17px;
  line-height: 25px;
}

.bond-list03 .text:first-child {
  margin-top: 0;
}

.bond-textstyle01 + .notice-tit {
  margin-top: 32px;
}

@media (max-width: 1200px) {
  .bond-infobox .bond-title:first-child {
    margin-top: 20px;
  }
}
.gnb-depth2-opener {
  display: none;
}

/* 콘텐츠 이미지 감싸는 div */
.contents-image-wrap {
  padding: 40px 0 60px;
  font-size: 0;
  line-height: 0;
}

.contents-image-wrap img {
  width: 100%;
}

/* 한국투자 금융상품 */
.sub-infotxt-wrap {
  text-align: right;
}

.sub-title-area .sub-infotxt {
  float: right;
}

.sub-infotxt {
  font-size: 11px;
}

.sub-title-area .sub-text {
  margin-top: 13px;
  font-size: 14px;
  line-height: 23px;
}

.product-view-dl li + .notice-i-list {
  margin-top: 30px;
}

.loan-call-txt {
  display: inline-block;
  padding: 5px 10px;
  margin-top: 10px;
  font-size: 14px;
  color: #666;
  line-height: 23px;
  border: 1px solid var(--disable-clr);
}

/*여백 추가*/
.common-titlestyle02 + .notice-list-wrap {
  margin-top: 10px;
}

.common-titlestyle02 + .common-text01 {
  margin-top: 10px;
}

.notice-list-wrap + .notice-i-list-wrap {
  margin-top: 10px;
}

.notice-i-list-wrap + .ui-accordion-list {
  margin-top: 30px;
}

.btn-area + .box-style02 {
  margin-top: 40px;
}

.btn-area.type04 {
  padding-top: 15px;
}

.ui-accordion-layer + .common-text01 {
  margin-top: 20px;
}

.content .common-titlestyle02:first-child {
  margin-top: 0;
}

.notice-i-list-wrap + .table-wrap01 {
  margin-top: 20px;
}

@media (max-width: 1200px) {
  .content .common-titlestyle02:first-child {
    margin-top: 30px;
  }
  .btn-area.type04 {
    padding-top: 0;
  }
}
/*약관 css*/
.termsconditions_textbox .termsconditions_thema01 {
  margin-top: 40px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
}

.tts + .termsconditions_textbox .termsconditions_thema01:first-child {
  margin-top: 40px;
}

.termsconditions_textbox .termsconditions_thema01:first-child {
  margin-top: 0;
}

.termsconditions_textbox .termsconditions_thema02 {
  margin-top: 50px;
  font-size: 18px;
  font-weight: 500;
}

.termsconditions_textbox .termsconditions_title01 {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
}

.termsconditions_textbox .termsconditions_title02 {
  font-size: 14px;
  font-weight: 500;
}

.termsconditions_textbox .termsconditions_text01,
.termsconditions_textbox .termsconditions_caution {
  margin-top: 15px;
  font-size: 16px;
  line-height: 28px;
}

.termsconditions_textbox .termsconditions_text02 {
  font-size: 14px;
  line-height: 20px;
}

.termsconditions_textbox .termsconditions_list > li {
  margin-top: 5px;
  font-size: 16px;
  line-height: 28px;
}

.termsconditions_textbox .termsconditions_in_list li {
  font-size: 15px;
  line-height: 28px;
  padding-left: 15px;
}

.termsconditions_thema01 + .termsconditions_text01 {
  margin-top: 20px;
}

.termsconditions_textbox .termsconditions_title01 + .termsconditions_text01 {
  margin-top: 0;
}

.termsconditions_textbox .info-table-area {
  padding-top: 10px !important;
}

/* 190418 김유빈 에디터영역, 표 영역 추가 */
.editor {
  margin-top: 20px;
  padding: 23px 40px 0;
  border-top: 1px solid var(--disable-clr);
  font-size: 14px;
  line-height: 23px;
}

.editor * {
  font-size: 14px;
  line-height: 23px;
}

.editor th,
.editor td {
  border: 1px solid #000 !important;
}

.editor.type02 {
  margin-top: 35px;
  padding-top: 40px;
}

.editor.type02 th,
.editor.type02 td {
  border: 1px solid #000 !important;
}

/* 190829  */
.overview-img-box {
  margin-top: 30px;
  text-align: center;
}

.overview-img-box img {
  width: 100%;
  max-width: 800px;
}

/**/
.common-btn.type04 {
  margin-top: 20px;
}

.common-btn.type04 .common-text01 {
  display: inline-block;
  margin-right: 10px;
}

.common-btn.type04 .link {
  vertical-align: 3px;
}

/* 한화 상품 바로가기 */
.link-list {
  overflow: hidden;
  margin-top: 20px;
  /*background: url(/img/hss_common/bg_border.png);*/
}

.link-list li {
  display: table;
  float: left;
  width: 100px;
  height: 70px;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid var(--disable-clr);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.link-list li a {
  display: table-cell;
  font-size: 14px;
  font-weight: 500;
  vertical-align: middle;
  text-align: center;
}

.link-list li a:hover {
  background: #666;
  color: var(--bg-clr2);
}

.link-list li a span {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
}

.link-list li a:hover span {
  color: var(--bg-clr2);
}

/* 금융소비자보호우수사례 */
.box-style04 {
  padding: 51px 214px 51px 40px;
  background: url(/img/hss_common/bg_consumer01.png) no-repeat right 40px top 50%;
  border: 1px solid var(--line-clr3);
}

.box-style04 .title {
  color: var(--body-clr);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
}

.box-style04 .text {
  display: inline-block;
  margin-top: 11px;
  color: #666;
  font-size: 16px;
  line-height: 24px;
}

.financial-list-wrap {
  position: relative;
  margin-top: 50px;
  padding-left: 124px;
}

.financial-list-wrap .title {
  position: absolute;
  top: 5px;
  left: 0;
  color: var(--main-clr);
  font-size: 28px;
  font-weight: 500;
}

.financial-list-text {
  margin-top: 9px;
  padding-left: 17px;
  font-size: 16px;
  font-weight: 500;
  text-indent: -17px;
  line-height: 28px;
}

.financial-list-text:first-child {
  margin-top: 0;
}

.financial-list-text .subtext {
  display: block;
  margin-top: 8px;
  padding-left: 13px;
  font-size: 16px;
  text-indent: -13px;
  line-height: 24px;
}

.financial-list-text::before {
  display: inline-block;
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 10px;
  background: #999;
  border-radius: 50%;
  vertical-align: 4px;
}

@media (max-width: 1200px) {
  .box-style04 {
    margin-top: 30px;
  }
}
@media (max-width: 768px) {
  .box-style04 {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  .box-style04 {
    padding: 35px 32px;
    background: none;
  }
  .financial-list-wrap {
    margin-top: 30px;
    padding-left: 0;
  }
  .financial-list-wrap .title {
    position: relative;
    font-size: 22px;
  }
  .financial-list-wrap .financial-list {
    margin-top: 20px;
  }
}
/* 사회공헌활동 */
.common-title01 {
  margin-top: 32px;
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
}

.common-title02 {
  margin-top: 30px;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.common-text04 {
  margin-top: 8px;
  color: #666;
  font-size: 16px;
  line-height: 28px;
}

.social-contribution-list {
  width: 100%;
}

.social-contribution-list::after {
  content: "";
  clear: both;
  display: block;
}

.social-contribution-list .list {
  float: left;
  width: calc(50% - 10px);
  margin-top: 20px;
  background: red;
}

.social-contribution-list .list:nth-child(2n-1) {
  margin-right: 20px;
}

.social-contribution-list .list img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 330px;
}

@media (max-width: 768px) {
  .social-contribution-list .list {
    width: 100%;
    margin-right: 0;
  }
}
/* 약관 이미지 박스 */
.terms-img-box {
  width: 100%;
  margin-top: 10px;
}

.terms-img-box img {
  width: 100%;
  height: auto;
}

/* 중앙회 팝업 css 소스 */
.str-searPop {
  position: relative;
  width: 500px;
}

.store-popWp {
  padding: 75px 0px 60px;
  text-align: center;
}

.store-popWp strong.info {
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.25px;
}

.store-popWp .pop-btn-wp {
  margin: 35px 0 0;
}

.store-popWp .pop-btn-wp button {
  width: 150px;
  height: 40px;
}

.store-popWp.type01 {
  padding: 0;
}

.popup-btn-wrap {
  height: 40px;
  background: #000;
}

.layer-popup {
  font-size: 0;
}

.layer-popup img {
  width: 100%;
  min-width: 360px;
}

.chk-wrap.style01 {
  float: left;
  margin: 9px 0 0 20px;
}

.chk-wrap.style01 .chk-label {
  color: var(--bg-clr2);
  font-size: 13px;
}

.layer-container .layer-close.type01 {
  position: static;
  width: auto;
  height: 100%;
  padding-right: 17px;
  background: none;
  color: var(--bg-clr2);
  font-size: 13px;
  text-indent: 0;
}

.window-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.window-popup img {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.popup-btn-wrap {
  position: fixed;
  width: 100%;
  bottom: 0;
}

.layer-close.type01 {
  float: right;
  position: static;
  width: auto;
  height: 100%;
  padding-right: 17px;
  background: none;
  color: var(--bg-clr2);
  font-size: 13px;
  text-indent: 0;
}

/* table border */
.br-ef {
  border-right: 1px solid #efefef !important;
}

/* 이벤트 팝업 css */
.event-window-popup {
  width: 988px;
  height: 814px;
  padding: 40px 0 0 44px;
  background: url(/img/hss_common/bg_windowpopup.jpg);
}

.event-window-wrap {
  width: 900px;
  height: 724px;
  padding: 40px 30px 40px 40px;
  background: url(/img/hss_common/bg_windowpopup02.jpg);
}

.event-window-wrap .event-box:first-child {
  margin-top: 0;
}

.event-window-wrap .event-box:nth-child(2) {
  margin-top: 0;
}

.event-window-wrap .info-text {
  margin-top: 10px;
  font-size: 16px;
}

.event-box {
  display: inline-block;
  width: 393px;
  margin-top: 69px;
  margin-right: 40px;
  text-align: center;
}

.event-box:nth-child(2n) {
  margin-right: 0;
}

.event-box .img01 {
  width: 145px;
  height: 58px;
}

.event-list {
  margin-top: 20px;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.event-list .list {
  padding: 10px 0;
  border-top: 1px solid var(--disable-clr);
}

.event-list .list:first-child {
  border-top: 0;
}

.event-list .list .title {
  display: inline-block;
  width: 160px;
  font-size: 20px;
  font-weight: 500;
  text-align: left;
}

.event-list .list .link01,
.event-list .list .link02 {
  display: inline-block;
  width: 110px;
  height: 45px;
  color: var(--bg-clr2);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  line-height: 45px;
}

.event-list .list .link01 {
  margin-right: 7px;
  background: #587780;
}

.event-list .list .link02 {
  background: #0a97b9;
}

/* 19.09.18 김재원 */
.lifeplus-img-box.hanhwa-bank {
  display: block !important;
}

.lifeplus-img-box.hanhwa-bank img {
  display: block;
  width: 100% !important;
}

.lifeplus-btn-wrap {
  width: 100% !important;
}

.lifeplus-btn:first-child {
  margin-left: 50px !important;
}

.lifeplus-btn {
  display: inline-block;
  width: 115px;
  margin-left: 60px !important;
}

@media (max-width: 400px) {
  .lifeplus-btn {
    display: inline-block;
    width: 115px;
    margin-left: 30px !important;
  }
  .lifeplus-btn:first-child {
    margin-left: 30px !important;
  }
}
/* 19.09.20 김재원 */
.table-text-align {
  text-align: left !important;
}

/* 파란색 버튼  */
.btn-thin.resize.type01 {
  border-color: rgb(0, 57, 123) !important;
  background-color: rgb(0, 57, 123) !important;
  color: var(--bg-clr2);
}

/*191011 김재원*/
.com-box01 {
  margin-top: 3px;
  padding: 10px 10px 9px;
  border: 1px solid var(--disable-clr);
  word-break: keep-all;
}

.com-box01 .tit {
  font-size: 14px;
  font-weight: 500;
}

/* 190228 추가 - 체크카드 발급신청 */
.slide-box-area .sub-title,
.slide-box-area.type02 .sub-title {
  color: var(--body-clr);
  font-size: 22px;
}

.btn-slide-active .sub-title {
  color: var(--cap-clr) !important;
}

.slide-box-area.type02 .btn-right-wrap::after {
  content: "";
  clear: both;
  float: none;
  display: block;
}

.slide-box-area .btn-slide,
.slide-box-area .btn-slide-active .btn-slide,
.slide-box-area.type02 .btn-slide,
.slide-box-area.type02 .btn-slide-active .btn-slide {
  position: static;
  padding: 0;
  height: 60px;
  float: right;
  border-left: 1px solid var(--disable-clr);
  background: #b5b5b5 url("/img/common/icon_select_fff_up.png") no-repeat center;
}

.slide-box-area .btn-slide-active .btn-slide,
.slide-box-area.type02 .btn-slide-active .btn-slide {
  background: #f7f7f7 url("/img/common/icon_select_333.png") no-repeat center;
  transform: none;
}

.slide-box-txt,
.slide-box-txt p:last-child {
  margin-bottom: 0;
}

.table .table-cell {
  vertical-align: middle;
}

.slide-box-area.type02 .table-cell p {
  margin-bottom: 10px;
}

.slide-box-area.type02 .table-cell p:last-child {
  margin-bottom: 0;
}

.slide-box-area.type02 .label-wrap {
  margin-right: 20px;
  position: relative;
}

.slide-box-area.type02 .label-wrap:last-child {
  margin-right: 0;
  padding-right: 10px;
}

.slide-box-area.type02 .label-wrap:first-child::before {
  position: absolute;
  left: -12px;
  top: 3px;
  content: "( ";
}

.slide-box-area.type02 .label-wrap:last-child::after {
  position: absolute;
  right: 0px;
  top: 3px;
  content: " )";
}

.slide-box-area.type02 .slide-box-top .label-wrap:first-child::before {
  display: none;
}

.slide-box-area.type02 .slide-box-top .label-wrap:last-child::after {
  display: none;
}

.slide-box-area.type02 .slide-box-top .label-wrap .chk-label {
  color: #666;
  font-weight: 500;
}

.slide-box-area .btn-downlode,
.slide-box-area.type02 .btn-downlode {
  display: none;
  border-right: 0;
  padding: 23px 20px 23px 40px;
}

.phone-mark {
  display: block;
  float: left;
  margin-right: 10px;
  line-height: 43px;
}

.slide-box-area .table {
  display: table;
}

.slide-box-area .table .table-cell {
  display: table-cell;
}

.slide-box-area .table .table-cell .radio-box + .radio-box {
  margin-left: 40px;
}

.table-clone .table-cell:first-child {
  font-size: 16px;
  font-weight: 500;
}

/* 율강복지재단 */
.cStyle .tab-basic-buttons-item.js-tabpanel-active,
.cStyle .tab-basic-buttons-item.is-tab-basic-active {
  background-color: #22b24c;
}

.cStyle .tab-basic-buttons-item.js-tabpanel-active,
.cStyle .tab-basic-buttons-item.js-tabpanel-active::before,
.cStyle .tab-basic-buttons-item.js-tabpanel-active + .tab-basic-buttons-item::before,
.cStyle .tab-basic-buttons-item.is-tab-basic-active,
.cStyle .tab-basic-buttons-item.is-tab-basic-active::before,
.cStyle .tab-basic-buttons-item.is-tab-basic-active + .tab-basic-buttons-item::before {
  border-color: #22b24c;
}

.cStyle .info-table-area::after {
  content: "";
  clear: both;
  display: block;
}

.cStyle .intro-yul {
  height: 168px;
  margin-bottom: 50px;
  background: url(/img/hss_companycontent/asan_content/bg_intro_yul.jpg) no-repeat center center;
}

.cStyle .img-yul01 {
  background-image: url(/img/hss_companycontent/asan_content/img_intro_yul01.jpg);
}

.cStyle .img-yul02 {
  background-image: url(/img/hss_companycontent/asan_content/img_intro_yul02.jpg);
}

.cStyle .box-yul {
  margin-top: 55px;
}

.cStyle .box-yul:first-of-type {
  margin-top: 0;
}

.cStyle .box-left {
  float: left;
  width: 50%;
  padding-right: 20px;
}

.cStyle .box-right {
  float: right;
  width: 50%;
  height: 560px;
  background-repeat: no-repeat;
  background-position: center center;
}

.cStyle .greeting-sTit {
  display: block;
  margin-top: 15px;
  font-size: 30px;
  color: var(--body-clr);
}

.cStyle .greeting-text {
  margin-top: 35px;
  font-size: 18px;
  color: #666;
  line-height: 1.5;
}

.cStyle .sub-title-area + .greeting-text {
  margin-top: 15px;
}

.cStyle .greeting-list {
  margin-top: 5px;
  padding-left: 10px;
  font-size: 18px;
  color: #666;
  line-height: 1.5;
  position: relative;
}

.cStyle .greeting-list:first-of-type {
  margin-top: 15px;
}

.cStyle .greeting-list::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0px;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #666;
}

.cStyle .box-history {
  position: relative;
  margin-top: 40px;
}

.cStyle .history-years {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 22px;
  color: #22b24c;
  font-weight: 700;
}

.cStyle .history-lists {
  padding-left: 270px;
}

.cStyle .history-lists dl {
  position: relative;
  padding-left: 90px;
  padding-bottom: 40px;
}

.cStyle .history-lists dl::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -3px;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22b24c;
}

.cStyle .history-lists dl::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  display: block;
  width: 1px;
  height: 100%;
  background: #22b24c;
}

.cStyle .history-lists dl:last-of-type {
  padding-bottom: 0;
}

.cStyle .history-lists dl:last-of-type::after {
  height: 90%;
}

.cStyle .history-lists .list-tit {
  font-size: 16px;
  color: var(--body-clr);
  font-weight: 700;
}

.cStyle .history-lists .list-txt {
  margin-top: 20px;
  padding-left: 75px;
  font-size: 16px;
  color: var(--body-clr);
}

.cStyle .history-lists .list-txt + .list-txt {
  margin-top: 10px;
}

@media (max-width: 1200px) {
  .cStyle .tab-basic-buttons-item.js-tabpanel-active,
  .cStyle .tab-basic-buttons-item.is-tab-basic-active {
    background: none;
    color: #22b24c;
  }
  .cStyle .tab-basic-buttons-item::after {
    border-color: #22b24c;
  }
  .cStyle .intro-yul {
    height: 155px;
    margin-bottom: 25px;
  }
  .cStyle .box-yul {
    margin-top: 30px;
  }
  .cStyle .info-table-area {
    padding-bottom: 40px;
  }
  .cStyle .box-left {
    float: none;
    width: 100%;
    padding-right: 0;
    margin-top: 20px;
  }
  .cStyle .box-right {
    float: none;
    width: 100%;
    height: 350px;
  }
  .cStyle .greeting-sTit {
    font-size: 22px;
  }
  .cStyle .greeting-text {
    margin-top: 15px;
    font-size: 14px;
  }
  .cStyle .greeting-list {
    padding-left: 8px;
    font-size: 14px;
  }
  .cStyle .greeting-list:first-of-type {
    margin-top: 8px;
  }
  .cStyle .greeting-list::after {
    top: 8px;
  }
  .cStyle .box-history {
    margin-top: 25px;
  }
  .cStyle .history-years {
    position: relative;
    font-size: 18px;
  }
  .cStyle .history-lists {
    margin-top: 15px;
    padding-left: 5px;
  }
  .cStyle .history-lists dl {
    padding-left: 25px;
  }
  .cStyle .history-lists dl::before {
    top: 4px;
  }
  .cStyle .history-lists .list-tit {
    font-size: 14px;
  }
  .cStyle .history-lists .list-txt {
    padding-left: 20px;
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .cStyle .box-right {
    height: 220px;
    background-size: 100%;
  }
  .cStyle .history-lists dl {
    padding-left: 15px;
  }
  .cStyle .history-lists .list-txt {
    padding-left: 15px;
    margin-top: 15px;
  }
  .cStyle .history-lists .list-txt + .list-txt {
    margin-top: 7px;
  }
}
/* 김재원 추가 */
.margin-b {
  margin-bottom: 40px !important;
}

/* 상품설명 style 추가 */
.list-wrap01 {
  width: 100%;
  margin-top: 20px;
  border-top: 1px solid var(--body-clr);
}

.list-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 20%;
  border-bottom: 1px solid var(--disable-clr);
}

.list-item-tit {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0px;
  width: 100%;
  max-width: 20%;
  background: #f7f7f7;
  border-right: 1px solid var(--disable-clr);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.list-item-txt {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 16px 18px;
  font-size: 16px;
}

.list-item-box {
  width: 100%;
  height: 100%;
  padding: 18px;
  border-bottom: 1px solid var(--disable-clr);
}

@media (max-width: 768px) {
  .list-item-tit,
  .list-item-txt {
    font-size: 14px;
  }
}
/* 스마트 간편한도조회 버튼 추가 */
.btn-smart-wrap {
  position: relative;
  float: left;
  width: 175px;
  margin-left: 10px;
  background: #ff9358;
  height: 45px;
  text-align: center;
  line-height: 48px;
  border-radius: 30px;
  transition: all 0.5s ease;
}

.btn-smart-wrap:hover {
  margin-left: 20px;
  box-shadow: -10px 0 0 #aaa;
}

.btn-smart {
  color: var(--bg-clr2);
  font-size: 19px;
}

@media (max-width: 1200px) {
  html.responsive .btn-smart-wrap {
    display: none;
  }
  html.responsive .result-info-area {
    padding: 155px 16px 60px;
  }
}
/* 접속 대기 화면 */
.dim-white {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-clr2);
  z-index: 900;
  opacity: 0.6;
}

.loading-wrap {
  width: 600px;
  position: fixed;
  top: 50% !important;
  left: 50%;
  padding: 30px 60px;
  background: var(--bg-clr2);
  border: 2px solid var(--disable-clr);
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10000;
}

.loading-bar-wrap {
  width: 100%;
  height: 20px;
  margin-bottom: 15px;
  border-radius: 10px;
  background: var(--disable-clr2);
  overflow: hidden;
}

.loading-bar {
  height: 100%;
  background: var(--pos-clr);
}

.loading-wrap span img {
  vertical-align: middle;
  margin-right: 5px;
}

@media (max-width: 768px) {
  .loading-wrap {
    width: 80%;
    padding: 30px 20px;
  }
  .loading-wrap .flex2 {
    width: 100% !important;
    flex-direction: column;
  }
}
.msb-basic {
  font-size: 14px;
  font-weight: 500;
}

.msb-basic.dot::before {
  content: "";
  background: var(--disable-clr);
  width: 5px;
  height: 5px;
  margin-right: 5px;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
}

.ceo-info-wrap.star-bank .ceo-info .text {
  text-align: center;
}

.ceo-info-wrap.star-bank .ceo-sign img {
  margin: 0;
}

.ceo-info-wrap.star-bank .ceo-sign {
  margin-top: 75px;
}

.ethics-box.star-bank {
  width: 100%;
  padding: 55px 291px 56px 39px;
  background: #f7f7f7 url(/img/star_content/bg_ethics.png);
}

.ethics-box.star-bank .text {
  color: #333;
  font-size: 18px;
  line-height: 30px;
}

.ethics-box.star-bank .text strong {
  font-size: 18px;
}

.ethics-box.star-bank .text + .text {
  margin-top: 5px;
}

.ethics-box.star-bank + .ethics-list.star-bank {
  margin-top: 38px;
}

.ethics-list-text {
  margin-top: 10px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 18px;
  text-indent: -20px;
}

.ethics-list-text::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 15px;
  background: #999;
  border-radius: 50%;
  vertical-align: 3px;
}

.ethics-list-text:first-child {
  margin-top: 0;
}

.slide-box-area.star-bank .slide-box-top {
  padding: 23px 15px 20px;
}

.slide-box-area.star-bank .slide-box-top .sub-title {
  color: #333;
  font-size: 18px;
}

.slide-box-area.star-bank .slide-box-txt {
  height: 213px;
}

.slide-box-area.star-bank .slide-box-txt p {
  font-size: 14px;
}

.slide-box-area.star-bank .slide-box-txt .title {
  margin-bottom: 0;
  font-weight: 500;
}

.slide-box-area.star-bank .slide-box-txt .text {
  margin-top: 28px;
  margin-bottom: 0;
  line-height: 26px;
}

.ethics-list.star-bank + .slide-box-area.star-bank {
  margin-top: 58px;
}

.management-philosophy-box.star-bank .management-philosophy dt {
  font-size: 14px;
  font-weight: 500;
}

.management-philosophy-box.star-bank dd.box-style01 {
  height: auto;
  padding: 30px 20px 29px;
}

.management-philosophy-box.star-bank dd.box-style01 .sub-title {
  margin-top: 0;
  line-height: 22px;
}

.management-philosophy-box.star-bank dd.box-style02 {
  height: auto;
  padding: 26px 20px 24px;
}

.management-philosophy-box.star-bank dd.box-style02 .sub-style01 {
  margin-top: 0;
  font-size: 14px;
  line-height: 23px;
}

.management-philosophy-box.star-bank dd.box-style03 {
  padding: 19px 20px 17px;
  background: #fff;
  border: 1px solid #014c9a;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  line-height: 18px;
}

.organize-box img {
  width: 100%;
}

.gnb-link:hover,
.gnb-link:focus {
  color: #339dd7;
}

.stat-bank.pc-viewbox {
  display: block;
}

.stat-bank.tablet-viewbox {
  display: none;
}

.stat-bank.mobile-viewbox {
  display: none;
}

.header-tab-item.is-active .header-tab-link {
  color: #339dd7;
}

/* .header-count-time-number {color:#229adc;} 230320 접근성으로 삭제*/
@media (max-width: 1200px) {
  .swiper-active-switch .main-page-service-tab-button {
    width: 53px;
    background-color: #339dd7;
  }
}
@media (max-width: 1200px) and (max-width: 1200px) {
  .stat-bank.tablet-viewbox {
    display: block;
  }
  .stat-bank.mobile-viewbox {
    display: none;
  }
  .stat-bank.pc-viewbox {
    display: none;
  }
}
@media (max-width: 1200px) and (max-width: 1200px) {
  .ethics-box.star-bank {
    padding: 43px 238px 44px 39px;
  }
}
@media (max-width: 1200px) and (max-width: 768px) {
  .ethics-box.star-bank {
    padding-right: 175px;
  }
}
@media (max-width: 1200px) and (max-width: 768px) {
  .ethics-box.star-bank .text {
    font-size: 15px;
  }
  .ethics-box.star-bank .text strong {
    font-size: 15px;
  }
  .ethics-box.star-bank {
    padding: 33px 39px 34px;
    background-image: none;
  }
  .ethics-list-text::before {
    width: 3px;
    height: 3px;
    background: #000;
  }
  .ethics-box.star-bank + .ethics-list.star-bank {
    margin-top: 28px;
  }
  .ethics-list.star-bank + .slide-box-area.star-bank {
    margin-top: 38px;
  }
}
@media (max-width: 1200px) and (max-width: 768px) {
  .stat-bank.tablet-viewbox {
    display: none;
  }
  .stat-bank.mobile-viewbox {
    display: block;
  }
  .stat-bank.pc-viewbox {
    display: none;
  }
}
@media (max-width: 1200px) and (max-width: 480px) {
  .management-philosophy-box.star-bank dd.box-style01,
  .management-philosophy-box.star-bank dd.box-style03 {
    margin-top: 9px;
  }
}
/* .search-select-area */
.txt-result01 {
  display: block;
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--main-clr);
}

.txt-result01 + .txt-result02 {
  margin-top: 10px;
}

.txt-result01 + .txt-result03 {
  margin-top: 15px;
}

.txt-result02 {
  display: block;
  margin-top: 20px;
  font-size: 16px;
  line-height: 19px;
  color: #666;
}

.txt-result02.type02 {
  margin-top: 30px;
}

.txt-result03 {
  font-size: 14px;
  line-height: 16px;
}

/* 오뱅 추가*/
.radio-init {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
}

i.icon-radio {
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: url(/img/common/btn_radio_off.png) no-repeat center/contain;
  display: table-cell;
}

.radio-init:checked ~ i {
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: url(/img/common/btn_radio_click.png) no-repeat center/contain;
  filter: invert(46%) sepia(79%) saturate(4498%) hue-rotate(166deg) brightness(100%) contrast(97%);
}

.icn-alert::after {
  content: "";
  width: 18px;
  height: 13px;
  margin-top: 0;
  background: url("/img/common/notice_icon_m.png") no-repeat 100% center;
  background-size: 13px;
  display: inline-block;
  vertical-align: middle;
}

.icn-tooltip::after {
  content: "";
  width: 18px;
  height: 13px;
  margin-top: 0;
  background: url("/img/common/tooltip_icon_m.png") no-repeat 100% center;
  background-size: 13px;
  display: inline-block;
  vertical-align: middle;
}

.page-title.resize {
  max-width: 100%;
}

/* 이용안내 swiper */
.ob-guide-wrap {
  position: relative;
  margin-top: 50px;
}

.ob-guide-wrap .swiper-wrapper,
.ob-guide-wrap .swiper-slide {
  height: auto !important;
}

.ob-guide-wrap .swiper-button-play-text,
.ob-guide-wrap .swiper-button-pause-text {
  display: block;
  position: absolute;
  z-index: -1;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  color: transparent;
  font-size: 1px;
  line-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ob-guide-wrap .swiper-button-next,
.ob-guide-wrap .swiper-button-prev {
  position: absolute;
  top: 270px;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  border: 1px solid #fff;
  opacity: 0.5;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  overflow: hidden;
}

.ob-guide-wrap .swiper-button-next::before,
.ob-guide-wrap .swiper-button-prev::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  padding-left: 2px;
  padding-bottom: 2px;
  border: 0 solid #fff;
  border-top-width: 2px;
  border-right-width: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.ob-guide-wrap .swiper-button-next::before {
  -webkit-transform: translate(-75%, -50%) rotate(45deg);
  transform: translate(-75%, -50%) rotate(45deg);
}

.ob-guide-wrap .swiper-button-prev::before {
  -webkit-transform: translate(-25%, -50%) rotate(-135deg);
  transform: translate(-25%, -50%) rotate(-135deg);
}

.ob-guide-wrap .swiper-button-next:hover,
.ob-guide-wrap .swiper-button-prev:hover {
  opacity: 1;
}

.ob-guide-wrap .swiper-button-next {
  right: -60px;
}

.ob-guide-wrap .swiper-button-prev {
  left: -60px;
}

.ob-guide-wrap .swiper-button-next-text,
.ob-guide-wrap .swiper-button-prev-text {
  display: block;
  position: absolute;
  z-index: -1;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  color: transparent;
  font-size: 1px;
  line-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ob-guide-wrap .swiper-scrollbar {
  height: 4px;
  border-radius: 2px;
  background: #fbfbfb;
  overflow: hidden;
}

.ob-guide-wrap .swiper-scrollbar-drag {
  height: 100%;
  border-radius: 2px;
  background: var(--main-clr);
}

.ob-guide-wrap .ob-guideSwipe-control {
  position: absolute;
  top: 309px;
  left: 103px;
  z-index: 1;
}

.ob-guide-wrap .swiper-pagination {
  display: inline-block;
  vertical-align: top;
}

.ob-guide-wrap .swiper-pagination-switch {
  display: inline-block;
  vertical-align: top;
  width: 11px;
  height: 11px;
  border-radius: 8px;
  background: #888;
  margin-right: 10px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  cursor: pointer;
  transition: all 0.5s ease;
}

.ob-guide-wrap .swiper-pagination-switch.swiper-active-switch {
  background-color: var(--main-clr);
  width: 20px;
}

.ob-guide-wrap .swiper-button-play,
.ob-guide-wrap .swiper-button-pause {
  position: relative;
  vertical-align: top;
  width: 18px;
  height: 16px;
  margin-top: -2px;
  box-sizing: border-box;
  border: 1px solid #666;
  overflow: hidden;
}

.ob-guide-wrap .swiper-button-play::before,
.ob-guide-wrap .swiper-button-pause::before {
  content: "";
  display: block;
  border: 0 solid #666;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.ob-guide-wrap .swiper-button-play {
  margin-right: 5px;
}

.ob-guide-wrap .swiper-button-play::before {
  width: 5px;
  height: 5px;
  border-top-width: 1px;
  border-right-width: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  -webkit-transform: translate(-75%, -50%) rotate(45deg);
  transform: translate(-75%, -50%) rotate(45deg);
}

.ob-guide-wrap .swiper-button-pause::before {
  width: 2px;
  height: 8px;
  border-left-width: 1px;
  border-right-width: 1px;
}

.chk-wrap.acco .label-wrap .chk-label {
  color: #666;
  font-weight: 500;
}

/* 220106 css 추가 */
.tab-area {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 15px 0;
}

.tab-area > li {
  flex: 1;
  min-width: fit-content;
  padding-bottom: 0;
  border: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--cap-clr);
  text-align: center;
  cursor: pointer;
}

.tab-area > li.selected {
  color: var(--main-clr);
}

.tab-area > li + li {
  border-left: 1px solid var(--line-clr3);
}

/* .tab-area > li:last-child {
  border-right: 1px solid #ccc;
}

.tab-area > li.selected {
  border: 1px solid #00397b;
  border-bottom: 0;
  color: #00397b;
} */
.tab-area > li > a {
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* 다른금융선택 */
.sel-finance {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid #ddd;
  margin: 100px 0 70px 0;
}

.sel-finance > .dl {
  position: relative;
  width: 33.3333333333%;
  border-right: 1px solid #ddd;
  padding: 220px 20px 70px 20px;
  text-align: center;
}

.sel-finance > .dl:last-child {
  border: 0;
}

.sel-finance > .dl::before {
  content: "";
  position: absolute;
  top: 70px;
  left: 50%;
  width: 120px;
  height: 120px;
  border-radius: 10px;
  background: var(--bg-clr1);
  transform: translate(-50%, 0);
}

.sel-finance > .dl:nth-of-type(1)::before {
  background: var(--bg-clr1) url(/img/openbank/icon_fin1.png) no-repeat center center;
  background-size: 80%;
}

.sel-finance > .dl:nth-of-type(2)::before {
  background: var(--bg-clr1) url(/img/openbank/icon_fin2.png) no-repeat center center;
  background-size: 75%;
}

.sel-finance > .dl:nth-of-type(3)::before {
  background: var(--bg-clr1) url(/img/openbank/icon_fin3.png) no-repeat 60% center;
  background-size: 80%;
}

.sel-finance > .dl > .dt {
  color: #666;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

.sel-finance > .dl > .dd {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* DH 추가*/
.dh-bank .ceo-info-img-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.dh-bank .ceo-info-img-wrap .ceo-info-text-box {
  margin-bottom: 30px;
}

.dh-bank .ceo-info-img-wrap .ceo-info-img {
  width: 350px;
}

.dh-bank .ceo-info-img-wrap .title {
  margin-top: 30px;
  font-size: 30px;
  line-height: 1.5;
  color: #3ab54a;
}

.dh-bank .ceo-info-img-wrap .sub-title {
  margin-bottom: 5px;
  font-size: 26px;
}

.dh-bank .ceo-info-img-wrap .text {
  margin-top: 30px;
  font-size: 18px;
  line-height: 30px;
  color: #666;
  text-align: left;
}

.dh-bank .ceo-info-img-wrap + .ceo-info .text:first-child {
  margin-top: 10px;
}

.dh-bank .ceo-info-sign {
  font-size: 18px;
}

.dh-bank .ceo-info-sign strong {
  margin-left: 10px;
  font-size: 20px;
  font-family: "궁서체", GungsuhChe, sans-serif;
}

@media (max-width: 1200px) {
  .dh-bank .ceo-info-img-wrap .ceo-info-text-box {
    margin-bottom: 20px;
  }
  .dh-bank .ceo-info-img-wrap .title {
    font-size: 26px;
    color: #3ab54a;
  }
  .dh-bank .ceo-info-img-wrap .sub-title {
    font-size: 20px;
  }
  .dh-bank .ceo-info-img-wrap .text {
    font-size: 13px;
    line-height: 26px;
  }
}
@media (max-width: 768px) {
  .dh-bank .ceo-info-img-wrap {
    flex-direction: column-reverse;
    gap: 20px;
  }
  .dh-bank .ceo-info-img-wrap .ceo-info-img,
  .dh-bank .ceo-info-img-wrap .ceo-info-text-box {
    width: 100%;
  }
  .dh-bank .ceo-info-img-wrap .title {
    margin-top: 0;
    font-size: 18px;
    color: #3ab54a;
  }
  .dh-bank .ceo-info-img-wrap .sub-title {
    font-size: 16px;
  }
  .dh-bank .ceo-info-sign {
    font-size: 16px;
  }
  .dh-bank .ceo-info-sign strong {
    font-size: 18px;
  }
  .version-download-box.flex .btn-style01 {
    width: 100%;
    margin: 0;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  || 프리뱅킹 안내
\*----------------------------------------*/
.free-info-wrap {
  border-top: 1px solid var(--body-clr);
}
.free-info-wrap .free-info {
  display: table;
  width: 100%;
  border-top: 1px solid var(--disable-clr);
}
.free-info-wrap .free-info:first-child {
  border-top: none;
}
.free-info-wrap .free-info:last-child {
  border-bottom: 1px solid var(--disable-clr);
}
.free-info-wrap .free-info li {
  display: table-cell;
  height: 100px;
  font-size: 14px;
  vertical-align: middle;
}
.free-info-wrap .free-info .bank-name {
  width: 290px;
  padding-left: 22px;
  border-right: 1px solid var(--disable-clr);
}
.free-info-wrap .free-info .bank-address {
  padding-left: 29px;
}
.free-info-wrap .free-info .bank-address .number {
  margin-top: 30px;
}
.free-info-wrap .free-info .bank-address .number .tel {
  display: inline-block;
  width: 400px;
}

/*----------------------------------------*\
  || 상품공시이용메뉴얼 / 뱅킹관리 안내 / 보안센터 안내 / 프리뱅킹 안내 / 평생계좌서비스 안내
\*----------------------------------------*/
.product-manual-top {
  padding: 59px 273px 51px 41px;
  margin-top: 40px;
  background: #eeeff1 url("/img/hss_content/bg_hand.png") no-repeat right 50%;
  color: var(--body-clr);
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
  border-radius: 20px;
}
.product-manual-top:first-child {
  margin-top: 0;
}
.product-manual-top .str {
  display: inline-block;
  color: var(--main-clr);
  font-weight: 700;
}
.product-manual-top.bank-info {
  padding: 59px 385px 51px 41px;
  background: #eeeff1 url("/img/common/bg_notebook.png") no-repeat right 50%;
  color: var(--body-clr);
  font-weight: 700;
  line-height: 28px;
}
.product-manual-top.bank-info .str {
  display: inline-block;
  color: var(--main-clr);
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
}
.product-manual-top.security-info {
  padding: 59px 385px 51px 41px;
  background: #eeeff1 url("/img/common/bg_key.png") no-repeat right 50%;
  color: var(--body-clr);
  font-weight: 700;
  line-height: 28px;
}
.product-manual-top.security-info .str {
  display: inline-block;
  color: var(--main-clr);
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
}
.product-manual-top.free-info {
  font-weight: 400;
}
.product-manual-top.lifetime-info {
  padding: 40px 273px 38px 41px;
  background: #eeeff1;
}
.product-manual-top.koreatuja-bank .str {
  display: inline-block;
  color: var(--main-clr);
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
}

.product-manual-box {
  margin-top: 50px;
  border-top: 1px solid #000;
}
.product-manual-box li {
  padding: 30px 0 30px 220px;
  min-height: 180px;
  border-bottom: 1px solid #efefef;
}
.product-manual-box li:first-child {
  background: url("/img/hss_content/bg_manualimg01.png") no-repeat 0px 50%;
}
.product-manual-box li:nth-child(2) {
  background: url("/img/hss_content/bg_manualimg02.png") no-repeat 0px 50%;
}
.product-manual-box li:nth-child(3) {
  background: url("/img/hss_content/bg_manualimg03.png") no-repeat 0px 50%;
}
.product-manual-box li:nth-child(4) {
  background: url("/img/hss_content/bg_manualimg04.png") no-repeat 0px 50%;
}
.product-manual-box li:nth-child(5) {
  background: url("/img/hss_content/bg_manualimg05.png") no-repeat 0px 50%;
}
.product-manual-box li:nth-child(6) {
  background: url("/img/hss_content/bg_manualimg06.png") no-repeat 0px 50%;
  border-bottom: 1px solid var(--disable-clr);
}
.product-manual-box li .text {
  font-size: 16px;
  color: var(--body-clr);
  font-weight: 700;
  line-height: 25px;
}
.product-manual-box li .shortcut {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  color: var(--body-clr);
}
.product-manual-box li .shortcut + .shortcut {
  margin-left: 20px;
}
.product-manual-box li .link {
  display: inline-block;
  width: 72px;
  margin-left: 20px;
  padding: 5px 10px;
  border: 1px solid var(--disable-clr);
}
.product-manual-box.bank-info li {
  padding: 30px 0 30px 220px;
  min-height: 180px;
  border-bottom: 1px solid #efefef;
}
.product-manual-box.bank-info li:first-child {
  background: url("/img/common/bg_bank_info01.png") no-repeat 0px 50%;
}
.product-manual-box.bank-info li:nth-child(2) {
  background: url("/img/common/bg_bank_info02.png") no-repeat 0px 50%;
}
.product-manual-box.bank-info li:nth-child(3) {
  background: url("/img/common/bg_bank_info03.png") no-repeat 0px 50%;
}
.product-manual-box.bank-info li:nth-child(4) {
  background: url("/img/common/bg_bank_info04.png") no-repeat 0px 50%;
}
.product-manual-box.bank-info li:nth-child(5) {
  background: url("/img/common/bg_bank_info05.png") no-repeat 0px 50%;
}
.product-manual-box.bank-info li:nth-child(6) {
  background: url("/img/common/bg_bank_info06.png") no-repeat 0px 50%;
}
.product-manual-box.bank-info li:nth-child(7) {
  background: url("/img/common/bg_bank_info07.png") no-repeat 0px 50%;
}
.product-manual-box.bank-info li:nth-child(8) {
  background: url("/img/common/bg_bank_info08.png") no-repeat 0px 50%;
}
.product-manual-box.bank-info li:nth-child(9) {
  background: url("/img/common/bg_bank_info09.png") no-repeat 0px 50%;
  border-bottom: 1px solid var(--disable-clr);
}
.product-manual-box.security-info li:first-child {
  background: url("/img/common/bg_security_info01.png") no-repeat 0px 50%;
}
.product-manual-box.security-info li:nth-child(2) {
  background: url("/img/common/bg_security_info02.png") no-repeat 0px 50%;
}
.product-manual-box.security-info li:nth-child(3) {
  background: url("/img/common/bg_security_info03.png") no-repeat 0px 50%;
}
.product-manual-box.security-info li:nth-child(4) {
  background: url("/img/common/bg_security_info04.png") no-repeat 0px 50%;
}
.product-manual-box.security-info li:nth-child(5) {
  background: url("/img/common/bg_security_info05.png") no-repeat 0px 50%;
}
.product-manual-box.security-info li:nth-child(6) {
  background: url("/img/common/bg_security_info06.png") no-repeat 0px 50%;
  border-bottom: 1px solid var(--disable-clr);
}
.product-manual-box.koreatuja-bank {
  padding: 59px 385px 51px 41px;
  background: #eeeff1 url("/img/hss_content/bg_hand.png") no-repeat right 50%;
  color: var(--body-clr);
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
}
.product-manual-box.koreatuja-bank li:first-child {
  background: url("/img/hss_content/bg_manualimg02.png") no-repeat 0px 50%;
}
.product-manual-box.koreatuja-bank li:nth-child(2) {
  background: url("/img/hss_content/bg_manualimg03.png") no-repeat 0px 50%;
}
.product-manual-box.koreatuja-bank li:nth-child(3) {
  background: url("/img/hss_content/bg_manualimg04.png") no-repeat 0px 50%;
}
.product-manual-box.koreatuja-bank li:nth-child(4) {
  background: url("/img/hss_content/bg_manualimg05.png") no-repeat 0px 50%;
}
.product-manual-box.koreatuja-bank li:nth-child(5) {
  background: url("/img/hss_content/bg_manualimg06.png") no-repeat 0px 50%;
  border-bottom: 1px solid var(--disable-clr);
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  .product-manual-top.koreatuja-bank {
    padding: 33px 41px 29px 41px;
    background-image: none;
    font-size: 14px;
    line-height: 23px;
  }
  .product-manual-top.koreatuja-bank .str {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
  }
  .product-manual-box {
    margin-top: 20px;
  }
  .product-manual-box.koreatuja-bank li:first-child {
    background-position: 50% 20px;
  }
  .product-manual-box.koreatuja-bank li:nth-child(2) {
    background-position: 50% 20px;
  }
  .product-manual-box.koreatuja-bank li:nth-child(3) {
    background-position: 50% 20px;
  }
  .product-manual-box.koreatuja-bank li:nth-child(4) {
    background-position: 50% 20px;
  }
  .product-manual-box.koreatuja-bank li:nth-child(5) {
    background-position: 50% 20px;
    border-bottom: 1px solid var(--disable-clr);
  }
  .product-manual-box li,
  .product-manual-box.bank-info li,
  .product-manual-box.security-info li {
    min-height: auto;
    padding: 20px;
    background: none !important;
  }
  .product-manual-box li .shortcut,
  .product-manual-box.bank-info li .shortcut,
  .product-manual-box.security-info li .shortcut {
    display: block;
  }
  .product-manual-box li .shortcut + .shortcut,
  .product-manual-box.bank-info li .shortcut + .shortcut,
  .product-manual-box.security-info li .shortcut + .shortcut {
    margin-left: 0;
  }
  .product-manual-box li .shortcut .link,
  .product-manual-box.bank-info li .shortcut .link,
  .product-manual-box.security-info li .shortcut .link {
    display: block;
    margin: 10px 0 0 0;
  }
}
/*----------------------------------------*\
  || Medium
\*----------------------------------------*/
@media (max-width: 768px) {
  .product-manual-top {
    padding: 33px 41px 29px 41px;
    background-image: none;
    font-size: 18px;
    line-height: 31px;
  }
  .product-manual-top.bank-info {
    padding: 33px 41px 29px 41px;
    background-image: none;
    font-size: 14px;
    line-height: 23px;
  }
  .product-manual-top.bank-info .str {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
  }
  .product-manual-top.security-info {
    padding: 33px 41px 29px 41px;
    background-image: none;
    font-size: 14px;
    line-height: 23px;
  }
  .product-manual-top.security-info .str {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
  }
  .product-manual-top.koreatuja-bank {
    padding: 33px 41px 29px 41px;
    background-image: none;
    font-size: 14px;
    line-height: 23px;
  }
  .product-manual-top.koreatuja-bank .str {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
  }
}
/*----------------------------------------*\
  || 보안매체 정보입력
\*----------------------------------------*/
.sec-box-wrap {
  padding: 30px 20px 20px 20px;
  border-top: 1px solid var(--disable-clr);
  border-bottom: 1px solid var(--disable-clr);
}

.sec-box-wrap02 {
  padding: 30px 20px;
  border-top: 1px solid #000;
  border-bottom: none;
}

.sec-table02 {
  display: table;
  width: 100%;
  background: #f7f7f7;
  padding: 45px 75px;
}

.sec-table-row02:first-child {
  margin-bottom: 20px;
}

.sec-table-cell02 {
  display: table-cell;
  vertical-align: middle;
}
.sec-table-cell02:first-child {
  width: 380px;
  font-size: 20px;
}

.sec-box.left {
  width: 550px;
  padding-right: 30px;
}
.sec-box.right {
  width: 510px;
  padding-left: 30px;
}
.sec-box.right .txt-des {
  display: inline-block;
  padding-top: 15px;
  font-size: 11px;
}
.sec-box .notice-i-list {
  display: inline-block;
  color: var(--body-clr);
  line-height: 16px;
  padding: 20px 0 15px 16px;
  margin-left: 0;
}
.sec-box .notice-list li {
  padding-bottom: 0;
  line-height: 28px;
  font-size: 14px;
}
.sec-box .code-img {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.code-img {
  position: relative;
}
.code-img .mark {
  position: absolute;
  top: 125px;
  left: 405px;
  display: block;
  width: 22px;
  height: 18px;
  background: #f0b2b2;
  border: 1px solid var(--neg-clr);
}
.code-img .mark.box02 {
  top: 160px;
  left: 165px;
}

.sec-table {
  display: table;
  width: 100%;
  background: #f7f7f7;
  padding: 55px 75px;
}
.sec-table .sec-table-row:first-child .sec-table-cell .btn-mouse,
.sec-table .sec-table-row:first-child .sec-table-cell .icon-mouse {
  margin-left: -35px;
}

.sec-table-cell {
  display: table-cell;
  vertical-align: middle;
}
.sec-table-cell:first-child {
  width: 190px;
  font-size: 20px;
}
.sec-table-cell .btn-mouse,
.sec-table-cell .icon-mouse {
  margin-left: -30px;
}
.sec-table-cell .input-basic {
  margin-right: 5px;
}
.sec-table-cell .input-basic.double, .sec-table-cell .input-basic.single {
  float: left;
  font-size: 22px;
  color: var(--body-clr);
  font-weight: 700;
  text-align: center;
  padding: 5px 10px;
}
.sec-table-cell .input-basic.double {
  max-width: 90px;
  height: 47px;
  text-align: left;
  padding: 5px 30px 5px 12px;
}
.sec-table-cell .input-basic.single {
  max-width: 40px;
  height: 47px;
}
.sec-table-cell .input-basic.single:disabled {
  color: var(--body-clr);
}

/*----------------------------------------*\
  || PEY 추가
\*----------------------------------------*/
.attention-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.attention {
  width: 220px;
  font-size: 14px;
  display: block;
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
}

.warn-area {
  margin-top: 50px;
  padding: 30px;
  background: #f7f7f7 url(/img/common/bg_warning.png) no-repeat right 80px center;
}
.warn-area + .notice-list-wrap {
  padding-top: 43px;
}

.warn-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.warn-txt {
  font-size: 16px;
  line-height: 24px;
}

.bg-content-wrap {
  padding-bottom: 60px;
}

.bg-img-wrap {
  display: table;
  width: 100%;
  margin-top: 40px;
  padding: 60px 20px;
  background-color: #eeeff1;
  text-align: center;
}
.bg-img-wrap .img-box {
  display: table-cell;
  vertical-align: middle;
}

.step-list-wrap {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  padding-top: 60px;
}

.step-list-box {
  position: relative;
  margin-bottom: 12px;
}
.step-list-box:last-child {
  margin-bottom: 0;
}
.step-list-box:last-child:before {
  display: none;
}
.step-list-box:before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--disable-clr);
  position: absolute;
  top: 0;
  left: 12px;
  z-index: 0;
}

.step-circle-box {
  width: 280px;
  height: auto;
  background: transparent;
  position: relative;
  float: left;
  min-height: 50px;
  height: auto;
}

.step-circle:first-child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 24px;
  height: 34px;
  color: var(--bg-clr2);
  background: var(--bg-clr2);
  text-align: center;
  padding-top: 6px;
  font-size: 16px;
}
.step-circle:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  width: 24px;
  height: 24px;
  background: var(--body-clr);
  transform: translateX(-50%);
  border-radius: 50%;
}

.step-list-content {
  width: 820px;
  display: inline-block;
  padding-bottom: 48px;
}
.step-list-content .img-list {
  display: flex;
  justify-content: space-between;
}
.step-list-content .img-list li:last-child {
  margin-right: 0;
}
.step-list-content .img-list li img {
  display: inline-block;
  width: 100%;
  border: 1px solid var(--disable-clr);
}
.step-list-content .img-type2 li {
  width: 100%;
  height: auto;
}
.step-list-content .img-type3 li {
  width: 100%;
  height: auto;
  float: left;
  margin-top: 20px;
  margin-right: 20px;
}
.step-list-content .img-type3 li:frist-child {
  margin-top: 0;
}
.step-list-content .img-type4 li:first-child {
  width: 100%;
  height: auto;
}
.step-list-content .img-list li,
.step-list-content .img-type2 li,
.step-list-content .img-type4 li {
  width: 100%;
  margin-right: 20px;
}
.step-list-content .img-title {
  text-align: center;
  display: block;
  padding-top: 16px;
  font-size: 16px;
}
.step-list-content .notice-list li::before {
  margin-top: 4px;
}

.step-txt02 {
  font-weight: 500;
  padding-left: 40px;
  display: block;
  margin-bottom: 16px;
  padding-top: 4px;
  font-size: 18px;
}

.step-subtxt {
  display: block;
  padding-bottom: 10px;
  padding-left: 40px;
  font-size: 16px;
}

.img-content .img-circle {
  width: 20px;
  display: inline-block;
  height: 20px;
  border-radius: 50%;
  background: #7a8999;
  color: var(--bg-clr2);
  text-align: center;
  padding-top: 4px;
  vertical-align: top;
  margin-right: 10px;
  font-size: 14px;
}
.img-content .img-subtxt {
  display: inline-block;
  line-height: 22px;
  width: calc(100% - 30px);
  font-size: 16px;
}

.page-title .title-arrow {
  font-size: 48px;
  font-weight: 700;
  word-break: keep-all;
}
.page-title .title-arrow:after {
  content: "";
  float: right;
  width: 60px;
  height: 40px;
  background: url(/img/common/icon_titlearrow.png) no-repeat center center;
}

.sub-title-area .sub-infotxt {
  font-size: 11px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .bg-content-wrap {
    padding: 15px 16px 0;
    background-color: var(--bg-clr2);
  }
  html.responsive .bg-img-wrap .img-box img {
    width: 100%;
  }
  html.responsive .bg-img-wrap > img {
    width: 100%;
  }
  html.responsive .step-list-wrap {
    margin-top: 15px;
    padding: 50px 16px 0;
    background-color: var(--bg-clr2);
  }
  html.responsive .step-list-box:before {
    display: none;
  }
  html.responsive .step-circle:first-child {
    background: initial;
  }
  html.responsive .step-txt02,
  html.responsive .step-subtxt {
    display: inline-block;
  }
  html.responsive .step-subtxt {
    padding-left: 15px;
  }
  html.responsive .step-list-content {
    width: 100%;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
/*----------------------------------------*\
  || 공과금 : 납부고지서
\*----------------------------------------*/
.document-area {
  border: 1px solid var(--disable-clr);
  padding: 40px;
}

.docu-title-area {
  position: relative;
  width: 100%;
  text-align: center;
}

.mark {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 10px;
  border: 1px solid var(--neg-clr);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

.docu-title {
  font-weight: 500;
  font-size: 20px !important;
}
.docu-title.top {
  margin-bottom: 40px;
}
.docu-title.btm {
  margin: 40px 0 15px;
  text-align: center;
  font-size: 18px !important;
}
.docu-title.btm .docu-title {
  font-size: 18px;
}

.sign-area .com-td {
  display: table;
  font-size: 14px;
}
.sign-area .com-td > span {
  display: table-cell;
  vertical-align: middle;
}
.sign-area .com-td .name {
  padding-right: 20px;
}
.sign-area .com-td .name.name02 {
  text-align: right;
  line-height: 1.5;
}
.sign-area .com-td .sign {
  width: 78px;
  height: 78px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border: 2px dashed #c00;
  border-radius: 50%;
  position: relative;
}
.sign-area .com-td .sign > span {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
}
.sign-area .com-td .sign > span:last-child {
  margin-bottom: 0;
}
.sign-area .com-td .sign .date02 {
  font-weight: 500;
  margin-bottom: 12px;
}
.sign-area .com-td .sign .bank {
  word-break: keep-all;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

/*----------------------------------------*\
  || 공과금 : 지방세 납부
\*----------------------------------------*/
.table-infolist {
  padding-top: 10px;
}
.table-infolist li {
  float: left;
  font-size: 13px;
}
.table-infolist li:last-child {
  position: relative;
  margin-left: 15px;
  padding-left: 15px;
}
.table-infolist li:last-child::before {
  position: absolute;
  top: 1px;
  /*20190530  top:3에서 1로 수정*/
  left: 0;
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--body-clr);
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
/*----------------------------------------*\
  || 즉시이체 정보입력 레이아웃
\*----------------------------------------*/
.transfer {
  display: flex;
  gap: 80px;
}
.transfer__form {
  width: 820px;
}
.transfer__summary {
  width: 300px;
  padding-top: 44px;
}
.transfer__summary .basic-btn-wrap {
  margin: 20px auto;
}
.transfer__summary .basic-btn {
  width: 100%;
}
.transfer__banner {
  width: 100%;
  padding: 24px;
  margin-bottom: 20px;
  background-color: #fcfefe;
  border: 1px solid var(--line-clr2);
  border-radius: 10px;
}
.transfer__banner .title {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  color: var(--tit-clr);
}
.transfer__banner .text {
  font-size: 12px;
  line-height: 150%;
  color: var(--body-clr);
}
.transfer__banner--alert {
  background: #fef6f6 url(/img/content/trn/img_banner_alert.png) no-repeat center right 12px/80px 60px;
  border-color: #fef6f6;
}
.transfer__banner--alert .title {
  color: var(--neg-clr);
}

.transfer-list {
  display: flex;
  flex-direction: column-reverse;
  counter-reset: list-counter;
}
.transfer-list__item {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-clr2);
  opacity: 1;
  overflow: hidden;
  counter-increment: list-counter;
  animation: transferExpand 0.6s cubic-bezier(0.74, -0.01, 0.49, 0.9);
}
@keyframes transferExpand {
  from {
    max-height: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 1;
  }
  to {
    max-height: 260px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-width: 1px;
    opacity: 1;
  }
}
.transfer-list__item::before {
  display: flex;
  align-items: center;
  justify-content: center;
  content: counter(list-counter);
  width: 18px;
  min-height: 18px;
  aspect-ratio: 1;
  margin-bottom: 8px;
  background-color: var(--bg-clr1);
  border: 1px solid var(--line-clr2);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--body-clr2);
}
.transfer-list__item:first-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  animation: none;
}
.transfer-list__item--collapse {
  max-height: 0;
  opacity: 0;
}
.transfer-list__item--collapse, .transfer-list__item--collapse:first-child + li {
  margin-bottom: 0;
  padding-bottom: 0;
  border-width: 0;
  transition: max-height 0.6s cubic-bezier(0.74, -0.01, 0.49, 0.9), opacity 0.6s cubic-bezier(0.74, -0.01, 0.49, 0.9), margin-bottom 0.6s cubic-bezier(0.74, -0.01, 0.49, 0.9), padding-bottom 0.6s cubic-bezier(0.74, -0.01, 0.49, 0.9), border-width 0.6s cubic-bezier(0.74, -0.01, 0.49, 0.9);
}
.transfer-list__item .details-list {
  margin-top: 4px;
}
.transfer-list__item .btn--chevron-down {
  order: 1;
  margin-top: 12px;
  margin-left: auto;
}
.transfer-list__item .btn--chevron-down + .details-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.transfer-list__item .btn--chevron-down[aria-expanded=true] + .details-list {
  max-height: 180px;
}
.transfer-list__item .del-btn {
  position: absolute;
  top: 0;
  right: 0;
}

/*----------------------------------------*\
  || Sign Wrap 납부영수증
\*----------------------------------------*/
.sign-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100px;
  height: 100px;
  border: 3px solid #ef4b56;
  border-radius: 50%;
  text-align: center;
}
.sign-wrap .title {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: #ef4b56;
}
.sign-wrap .date {
  display: block;
  width: 100%;
  margin: 7px 0 4px;
  padding: 7px 0;
  border-top: 2px solid #ef4b56;
  border-bottom: 2px solid #ef4b56;
  font-size: 13px;
  line-height: 15px;
  color: var(--tit-clr);
}
.sign-wrap .bank {
  font-size: 10px;
  line-height: 12px;
  color: #666;
}

/*----------------------------------------*\
  || Card List
\*----------------------------------------*/
.card-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  max-height: 260px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  overflow: auto;
}
.card-list::-webkit-scrollbar {
  width: 32px;
}
.card-list::-webkit-scrollbar-thumb {
  background: var(--line-clr);
  background-clip: padding-box;
  border: 12px solid transparent;
  border-radius: 16px;
}
.card-list::-webkit-scrollbar-track {
  background: #f6fafa;
  background-clip: padding-box;
  border: 12px solid transparent;
  border-radius: 16px;
}

.card-item {
  width: 100%;
  height: auto;
  position: relative;
  max-height: 110px;
}
.card-item input {
  width: 100%;
  height: 100%;
  position: absolute;
}
.card-item input:checked + label {
  border-color: var(--main-clr);
  box-shadow: 0 0 0 1px var(--main-clr) inset, 0 6px 12px rgba(0, 162, 156, 0.06);
  background-color: #e5f5f5;
}
.card-item input:hover {
  cursor: pointer;
}
.card-item.empty {
  background: #f2f3f8 url(/img/common/logo_sb_gray.png) no-repeat 50%;
  border: 1px solid var(--line-clr2);
  border-radius: 10px;
}

.card-item-label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 80px;
  padding: 12px 16px;
  background: var(--bg-clr2);
  border: 1px solid var(--line-clr2);
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}
.card-item-label:has(.sub) .ico-bi {
  top: 12px;
}
.card-item-label .ico-bi {
  position: absolute;
  right: 16px;
  width: 32px;
  height: 32px;
}
.card-item-label .wrap {
  display: flex;
  align-items: normal;
  flex-direction: column;
}
.card-item-label .wrap .name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--tit-clr);
}
.card-item-label .wrap .bank,
.card-item-label .wrap .sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--body-clr2);
}
.card-item-label .wrap .sub {
  margin-top: 12px;
}

.page-main-txt .ico-bi-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px);
  justify-content: center;
  margin-left: -24px;
}
.page-main-txt .ico-bi {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto 24px;
}
.page-main-txt .ico-bi:not(.total)::before {
  box-shadow: 0 0 0 1px inset var(--line-clr2);
  border-radius: 50%;
}
.page-main-txt .ico-bi.total {
  font-size: 18px;
  line-height: 64px;
  font-weight: 700;
  background: var(--bg-clr2);
  color: var(--main-clr);
  border: 1px solid var(--main-clr);
  border-radius: 50%;
}

/*----------------------------------------*\
  || Amount Wrap
\*----------------------------------------*/
.amount-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.amount-wrap .basic-btn {
  min-width: 71px;
  height: 38px;
  border-radius: 10px;
}

.amount-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #f2f4f6;
  border: 1px solid var(--line-clr3);
  border-radius: 10px;
  overflow: hidden;
}

.amount-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
}
.amount-item + .amount-item::before {
  width: 1px;
  height: 17px;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--line-clr3);
  transform: translateY(-50%);
}

.amount-btn {
  width: 100%;
  height: 100%;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: var(--tit-clr);
  transition: all 0.15s ease;
  outline-offset: -2px;
}
.amount-btn:active {
  background-color: #e6e8e9;
}

/*----------------------------------------*\
  || 혼합식적금 입금구분
\*----------------------------------------*/
.acco-mixed-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
}
.acco-mixed-wrap .basic-radio-wrap {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}
.acco-mixed-wrap li.on ~ .basic-radio-wrap {
  opacity: 1;
  visibility: visible;
}

/*----------------------------------------*\
  || Transfer Result
\*----------------------------------------*/
.transfer-result-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 10px;
  width: 100%;
  margin-top: 20px;
  padding: 12px 50px;
  background-color: #f1f4f6;
}
.transfer-result-wrap .list {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: fit-content;
}
.transfer-result-wrap .list:first-child {
  gap: 17px;
}
.transfer-result-wrap .title {
  font-size: 14px;
  line-height: 150%;
  color: var(--cap-clr);
}
.transfer-result-wrap .txt {
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  color: var(--cap-clr);
}

/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.trn-buttonwrap {
  width: 100%;
  clear: both;
}

.trn-notice {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.trn-notice .date-box2 {
  margin-right: 10px;
}

/* 즉시이체 : 받는분 추가표시*/
.table-name {
  font-size: 11px;
  float: left;
  margin-top: 7px;
  margin-bottom: -7px;
}

/* 즉시이체 : 삭제버튼*/
.thin-center {
  float: none !important;
  margin-right: 0 !important;
}

/*----------------------------------------*\
  || PayInfo : 자동이체 통합관리
\*----------------------------------------*/
.box-style01 {
  width: 100%;
  padding: 20px;
  margin-top: 35px;
  background: #efefef;
  border-radius: 14px;
}
.box-style01 .text {
  color: #e60012;
  font-size: 16px;
  line-height: 22px;
}

.box-style03 {
  width: 100%;
  margin-top: 50px;
  padding: 46px 470px 109px 45px;
  background: #efefef url("/img/common/bg_payinfo.png") no-repeat right 60px top 50%;
}
.box-style03 .title {
  font-size: 22px;
  font-weight: 500;
  line-height: 27px;
}
.box-style03 .text {
  display: inline-block;
  margin-top: 23px;
  font-size: 16px;
  line-height: 24px;
}

.payinfo-wrap {
  display: table;
  width: 100%;
  margin-top: 43px;
  border: 1px solid var(--line-clr3);
  border-radius: 20px;
}
.payinfo-wrap li {
  padding: 46px 46px 50px 46px;
  border-right: 1px solid var(--line-clr3);
}
.payinfo-wrap li:last-child {
  border-right: 0;
}

.payinfo-box {
  display: table-cell;
  width: 50%;
}
.payinfo-box .title {
  font-size: 22px;
  font-weight: 500;
  line-height: 25px;
}
.payinfo-box .text {
  margin-top: 10px;
  font-size: 16px;
  line-height: 27px;
}
.payinfo-box .sub-text {
  display: block;
  margin-top: 2px;
  color: #949494;
}

.payinfo-img {
  margin-top: 60px;
}

.slide-payinfobox {
  display: table;
  width: 100%;
  padding: 25px 0;
}
.slide-payinfobox .payinfo-list:first-child {
  padding-right: 20px;
}
.slide-payinfobox .payinfo-list:nth-child(2n) {
  padding-left: 24px;
}

.payinfo-list {
  display: table-cell;
  width: 50%;
}
.payinfo-list .title {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
}
.payinfo-list .title + .payinfo-notice {
  margin-top: 15px;
}
.payinfo-list .title + .payinfo-notice li:first-child {
  padding-top: 15px;
}

.payinfo-notice .list {
  margin-bottom: 10px;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.5;
  text-indent: -14px;
  word-break: keep-all;
}
.payinfo-notice .list:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 10px;
  background: #999;
  border-radius: 50%;
  vertical-align: 3px;
}

/*----------------------------------------*\
  || Trn Row Box
\*----------------------------------------*/
.trn-rowbox {
  clear: both;
  width: 100%;
}
.trn-rowbox .input-basic {
  max-width: 250px;
}
.trn-rowbox .input-www {
  max-width: 280px;
}
.trn-rowbox .btn-sm-wh {
  max-width: 120px;
}
.trn-rowbox label:not(.vitualKeyCheck) {
  display: inline-block;
  vertical-align: middle;
  line-height: 40px;
}

.trn-rowbox .chk-wrap,
.phone-wrap .chk-wrap {
  line-height: 40px;
  margin-left: 5px;
}

/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  html.responsive .trn-buttonwrap button {
    max-width: 60px;
    font-size: 13px;
    padding: 8px 0;
    background: #eeeff1;
    border: 0;
  }
}
/*----------------------------------------*\
  || App Guide 앱탈퇴가이드
\*----------------------------------------*/
.app-guide-wrap {
  display: flex;
  align-items: normal;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 65px;
  margin-left: 30px;
}
.app-guide-wrap + .app-guide-wrap {
  margin-top: 90px;
}
.app-guide-wrap .text {
  width: 450px;
}
.app-guide-wrap .text .num {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  font-size: 36px;
  line-height: 43px;
  color: var(--main-clr);
}
.app-guide-wrap .text .num::after {
  width: 100%;
  height: 3px;
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--main-clr);
  border-radius: 10px;
}
.app-guide-wrap .text .title {
  display: block;
  margin-bottom: 22px;
  font-size: 30px;
  line-height: 34px;
  color: var(--tit-clr);
}
.app-guide-wrap .img {
  display: flex;
  align-items: center;
  margin-top: 55px;
}
.app-guide-wrap .img img {
  max-height: 410px;
}
.app-guide-wrap .img img:last-child {
  display: none;
}

@media (max-width: 1200px) {
  .app-guide-wrap {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .app-guide-wrap {
    gap: 15px;
    margin-top: 25px;
    margin-left: 0;
  }
  .app-guide-wrap .text {
    width: 100%;
  }
  .app-guide-wrap .text .num {
    font-size: 26px;
    font-weight: 500;
    line-height: 31px;
  }
  .app-guide-wrap .text .num::after {
    border-radius: 0;
  }
  .app-guide-wrap .text .title {
    margin-bottom: 14px;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
  }
  .app-guide-wrap .img {
    margin-top: 0;
  }
  .app-guide-wrap .img img {
    display: none;
    width: 100%;
    max-height: none;
  }
  .app-guide-wrap .img img:last-child {
    display: block;
  }
}
/*=============================================*/
/*==================== OLD ====================*/
/*=============================================*/
/*----------------------------------------*\
  || Uncategorized
\*----------------------------------------*/
.sub-newtitle {
  color: var(--body-clr);
  font-size: 22px;
  font-weight: 700;
}

.info-newsubtxt {
  margin-top: 13px;
  color: var(--body-clr);
  font-size: 16px;
  line-height: 25px;
}

.info-subtxt {
  padding-top: 20px !important;
  font-size: 16px;
  line-height: 20px;
}

.info-address {
  text-decoration: underline;
  display: inline-block;
}

.event-link img {
  display: inline-block;
  width: 100%;
  height: 100%;
}

/*----------------------------------------*\
  || 게시판 BBS
\*----------------------------------------*/
.bbs-top {
  margin: 50px 0 10px;
  overflow: hidden;
}
.bbs-top .bbs-info {
  float: left;
  margin-top: 26px;
  font-weight: 400;
}
.bbs-top .total {
  font-size: 14px;
  font-weight: 400;
}
.bbs-top .total .num {
  font-weight: 700;
}

.bbs-search {
  display: table;
  float: right;
}
.bbs-search.style01 {
  width: 100%;
  max-width: 370px;
}

.search-box {
  display: table-cell;
  width: 180px;
  padding-right: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
}
.search-box .division-box {
  display: table-cell;
  position: relative;
  vertical-align: top;
}
.search-box .division-box .input-basic {
  padding-right: 45px !important;
}
.search-box .btn-search {
  height: 43px;
  white-space: nowrap;
  text-indent: -10000px;
  overflow: hidden;
  outline-offset: -2px;
}

.bbs-list::after {
  display: block;
  content: "";
  clear: both;
}
.bbs-list .table-style01 {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.bbs-list .table-style01 th {
  padding: 15px 20px;
  border: 0;
}
.bbs-list .table-style01 td {
  padding: 15px 20px;
  background-color: var(--bg-clr2);
}
.bbs-list .table-style01 tbody tr td:first-child {
  border-left: none;
}
.bbs-list .table-style01 tbody tr td:last-child {
  border-right: none;
}
.bbs-list .table-style01 .ico-category {
  display: inline-block;
  min-width: 47px;
  margin: 0 4px 0 0;
  padding: 6px 8px;
  text-align: center;
}
.bbs-list .table-style01 .link {
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  vertical-align: top;
  font-weight: 400;
}

.bbs-view {
  margin-top: 50px;
}

.tts + .bbs-view {
  margin-top: 20px;
}

.common-text01 + .bbs-view {
  margin-top: 40px;
}

.bbs-head-wrap {
  padding: 19px 33px 18px 20px;
  background-color: #f7f7f7;
  border-radius: 14px;
}

.bbs-head {
  display: flex;
  align-items: center;
  position: relative;
}
.bbs-head.style01 .title {
  float: left;
  width: 1010px;
  color: var(--body-clr);
  font-size: 20px;
  font-weight: 700;
}
.bbs-head.style01 .title .badge {
  margin-right: 5px;
  vertical-align: 2px;
}
.bbs-head.style01 .date {
  display: inline-block;
  vertical-align: middle;
  font-weight: 400;
}
.bbs-head.style01 .snsbox {
  display: inline-block;
  vertical-align: middle;
  width: fit-content;
  height: 22px;
}
.bbs-head.style01 .snsbox .snslink-view {
  display: block;
  overflow: hidden;
  width: 64px;
  height: 30px;
  margin-top: -3px;
  background: url("/img/common/icon_share.png") no-repeat right 20px top;
  font-size: 0;
  line-height: 0;
}
.bbs-head.style01 .snsbox .tooltip-layerpopup {
  display: none;
  position: absolute;
  top: 50px;
  right: -48px;
  width: 381px;
  height: 148px;
  padding: 40px 0;
  border: 1px solid #000;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--bg-clr2);
}
.bbs-head.style01 .snsbox .tooltip-layerpopup::after {
  position: absolute;
  top: -9px;
  right: 67px;
  content: " ";
  display: block;
  width: 15px;
  height: 9px;
  background: url("/img/common/bg_tooltip.gif") no-repeat 0 0;
}
.bbs-head.style01 .snsbox .tooltip-layerpopup .kakao {
  background: url("/img/common/bul_kakao_off.png") no-repeat 50% 0;
}
.bbs-head.style01 .snsbox .tooltip-layerpopup .instagram {
  background: url("/img/common/bul_insta_off.png") no-repeat 50% 0;
}
.bbs-head.style01 .snsbox .tooltip-layerpopup .facebook {
  background: url("/img/common/bul_facebook_off.png") no-repeat 50% 0;
}
.bbs-head.style01 .snsbox .tooltip-layerpopup .urlcopy {
  background: url("/img/common/bul_url_off.png") no-repeat 50% 0;
}
.bbs-head.style01 .snsbox .tooltip-layerpopup .sns {
  display: inline-block;
  width: 79px;
  padding-top: 65px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #666;
}
.bbs-head.style01 .snsbox .tooltip-layerpopup .tooltip-layerpopup-close {
  background: url("/img/common/bg_close.png");
  font-size: 0;
}
.bbs-head.style01 .snsbox .tooltip-layerpopup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: #3399ff;
  z-index: 100;
}
.bbs-head .subject {
  font-size: 14px;
  font-weight: 700;
  vertical-align: bottom;
}
.bbs-head .ico-category {
  display: inline-block;
  width: auto;
  margin-right: 12px;
  padding: 2px 6px 0;
  line-height: 22px;
  text-align: center;
}
.bbs-head .ico-category .subject {
  overflow: hidden;
  width: 100%;
  padding-right: 254px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  vertical-align: bottom;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.bbs-head .ico-category .subject.type01 {
  padding-right: 142px;
}
.bbs-head .ico-category .subject.type02 {
  padding-right: 0;
}
.bbs-head .ico-category .subject.type03 {
  padding-right: 320px;
}
.bbs-head .ico-category .subject.type04 {
  padding-right: 80px;
}
.bbs-head .bbs-headinfo {
  margin-left: auto;
  min-width: fit-content;
}
.bbs-head .views {
  margin-left: 40px;
}
.bbs-head .name {
  overflow: hidden;
  width: 190px;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 20px;
}
.bbs-head .name,
.bbs-head .date,
.bbs-head .views {
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  vertical-align: bottom;
}

.bbs-headinfo .snsbox,
.product-list-l .snsbox {
  position: relative;
  float: right;
  right: -22px;
  width: 64px;
}
.bbs-headinfo .snsbox .snslink-view,
.product-list-l .snsbox .snslink-view {
  display: block;
  overflow: hidden;
  width: 64px;
  height: 30px;
  margin-top: -3px;
  background: url("/img/common/icon_share.png") no-repeat right 20px top;
  font-size: 0;
  line-height: 0;
}
.bbs-headinfo .snsbox .tooltip-layerpopup,
.product-list-l .snsbox .tooltip-layerpopup {
  display: none;
  position: absolute;
  top: 50px;
  right: -48px;
  width: 300px;
  height: 148px;
  padding: 40px 0;
  border: 1px solid #000;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--bg-clr2);
}
.bbs-headinfo .snsbox .tooltip-layerpopup::after,
.product-list-l .snsbox .tooltip-layerpopup::after {
  position: absolute;
  top: -9px;
  right: 67px;
  content: " ";
  display: block;
  width: 15px;
  height: 9px;
  background: url("/img/common/bg_tooltip.gif") no-repeat 0 0;
}
.bbs-headinfo .snsbox .tooltip-layerpopup-close,
.product-list-l .snsbox .tooltip-layerpopup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 17px;
  height: 17px;
  padding: 5px;
  z-index: 100;
  background-repeat: no-repeat;
  background-position: center;
}

.bbs-headinfo .bbs-head.style01:after,
.product-list-l .bbs-head.style01:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.ico-category.ico-notice.type01 {
  margin-right: 15px;
}

.bbs-cont {
  min-height: 250px;
  padding: 25px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: var(--bg-clr2);
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
}
.bbs-cont * {
  line-height: 150%;
}
.bbs-cont th,
.bbs-cont td {
  border: 1px solid #000;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.bbs-cont.type02 {
  position: relative;
}
.bbs-cont .event-button-box {
  position: absolute;
  top: 25px;
  left: 20px;
  right: 20px;
}
.bbs-cont .common-layerpopup__title {
  text-align: left;
}

.bbs-nav {
  margin-top: 50px;
}
.bbs-nav a {
  display: inline-block;
  width: 100%;
  padding-right: 235px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  font-weight: 400;
}
.bbs-nav .ico-category {
  width: auto;
  margin-right: 12px;
  padding: 0 6px;
}
.bbs-nav .link {
  display: inline-block;
  width: auto;
  font-size: 14px;
  line-height: 22px;
}
.bbs-nav .table-wrap01 {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.bbs-nav .table-type04 th {
  width: 20%;
  font-weight: 700;
}

.snsbox {
  position: relative;
  float: right;
  right: -22px;
  width: 64px;
}
.snsbox .snslink-view {
  display: block;
  overflow: hidden;
  width: 64px;
  height: 30px;
  margin-top: -3px;
  background: url("/img/common/icon_share.png") no-repeat right 20px top;
  font-size: 0;
  line-height: 0;
}
.snsbox .tooltip-layerpopup {
  display: none;
  position: absolute;
  top: 50px;
  right: -48px;
  width: 300px;
  height: 148px;
  padding: 40px 0;
  border: 1px solid #000;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--bg-clr2);
}
.snsbox .tooltip-layerpopup::after {
  position: absolute;
  top: -9px;
  right: 67px;
  content: " ";
  display: block;
  width: 15px;
  height: 9px;
  background: url("/img/common/bg_tooltip.gif") no-repeat 0 0;
}
.snsbox .tooltip-layerpopup .kakao {
  background: url("/img/common/bul_kakao_off.png") no-repeat 50% 0;
}
.snsbox .tooltip-layerpopup .instagram {
  background: url("/img/common/bul_insta_off.png") no-repeat 50% 0;
}
.snsbox .tooltip-layerpopup .facebook {
  background: url("/img/common/bul_facebook_off.png") no-repeat 50% 0;
}
.snsbox .tooltip-layerpopup .urlcopy {
  background: url("/img/common/bul_url_off.png") no-repeat 50% 0;
}
.snsbox .tooltip-layerpopup .sns {
  display: inline-block;
  width: 79px;
  padding-top: 65px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #666;
}
.snsbox .tooltip-layerpopup .tooltip-layerpopup-close {
  background: url("/img/common/bg_close.png");
  font-size: 0;
}

.tooltip-layerpopup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: #3399ff;
  z-index: 100;
}

.common-viewdetail {
  padding: 40px 20px;
  border-bottom: 1px solid var(--line-clr3);
  color: #666;
  font-size: 16px;
  line-height: 30px;
}
.common-viewdetail p {
  margin-top: 35px;
  color: #666;
  font-size: 16px;
  line-height: 30px;
}
.common-viewdetail p:first-child {
  margin: 0;
}

.product-list-l .snsbox {
  right: -5px;
}

/*----------------------------------------*\
  || 고객센터 / FAQ
\*----------------------------------------*/
.result-none-area {
  width: 100%;
  height: auto;
  padding: 125px 0 65px;
  text-align: center;
  background: var(--bg-clr2) 50% 64px/auto no-repeat;
  font-size: 16px;
  font-weight: 400;
}
.result-none-area.success {
  background-image: url("/img/common/icon_alert.png");
}

.input-timer span {
  position: absolute;
  top: 0;
  right: 295px;
  color: #cd0606;
}

/*----------------------------------------*\
  || Notice
\*----------------------------------------*/
.notice-content-wrap {
  padding-top: 50px;
}

.notice-cont-top {
  width: 100%;
  padding: 25px 20px;
  border-top: 1px solid var(--body-clr);
  background: #f7f7f7;
}
.notice-cont-top span {
  font-size: 14px;
}

.notice-cont-box {
  padding: 30px 20px;
  border-top: 1px solid var(--disable-clr);
  border-bottom: 1px solid var(--disable-clr);
  min-height: 288px;
}

.notice-content {
  max-width: 100%;
}
.notice-content span {
  line-height: 25px;
  font-size: 14px;
}

.box-provisio .slide-box-txt {
  min-height: 324px;
}
.box-provisio .sub-title {
  margin: 14px 0px;
  color: var(--body-clr);
}

/*----------------------------------------*\
  || SNS Box
\*----------------------------------------*/
.snsbox .tooltip-layerpopup .kakao {
  background: url("/img/common/bul_kakao_off.png") no-repeat 50% 0;
}
.snsbox .tooltip-layerpopup .instagram {
  background: url("/img/common/bul_insta_off.png") no-repeat 50% 0;
}
.snsbox .tooltip-layerpopup .facebook {
  background: url("/img/common/bul_facebook_off.png") no-repeat 50% 0;
}
.snsbox .tooltip-layerpopup .urlcopy {
  background: url("/img/common/bul_url_off.png") no-repeat 50% 0;
}
.snsbox .tooltip-layerpopup .sns {
  display: inline-block;
  width: 79px;
  padding-top: 65px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #666;
}
.snsbox .tooltip-layerpopup .tooltip-layerpopup-close {
  background: url("/img/common/bg_close.png");
  font-size: 0;
}

/*----------------------------------------*\
  || Event
\*----------------------------------------*/
.event-info {
  margin-top: 40px;
}
.event-info dt,
.event-info dd {
  display: inline-block;
  margin-top: 15px;
  vertical-align: top;
}
.event-info .title {
  width: 7%;
  margin-top: 19px;
  margin-right: 15px;
  font-size: 14px;
  font-weight: 700;
  color: var(--body-clr);
}
.event-info .title.type01 {
  margin-top: 22px;
}
.event-info .text {
  width: 90%;
  font-size: 14px;
  color: var(--body-clr);
  line-height: 25px;
}
.event-info .text strong {
  font-weight: 700;
}
.event-info .text.type01,
.event-info .title.type01 {
  margin-top: 18px;
  vertical-align: top;
}
.event-info .btn-sm-wh {
  margin-left: 15px;
}

.event-list li {
  font-size: 14px;
  color: var(--body-clr);
  line-height: 28px;
  font-weight: 400;
}

@media (max-width: 1200px) {
  html.responsive .bbs-view {
    margin-top: 20px;
  }
  html.responsive .bbs-nav {
    margin-top: 0;
  }
  html.responsive .bbs-top {
    margin-top: 10px;
  }
  html.responsive .bbs-head .name {
    display: block;
  }
  html.responsive .bbs-head .subject {
    margin-top: 5px;
    padding: 0;
  }
  html.responsive .bbs-head .bbs-headinfo {
    float: none;
    margin-top: 5px;
  }
  html.responsive .bbs-head.style01 .snsbox {
    position: absolute;
    right: 10px;
    top: 26px;
  }
  html.responsive .event-info .title {
    width: 100%;
  }
  html.responsive .event-info .text {
    width: 100%;
    margin-top: 5px;
    color: #666;
  }
  html.responsive .event-info dd:first-of-type {
    margin-top: 5px;
  }
  html.responsive .event-info .btn-sm-wh {
    margin: 0;
  }
  .snsbox .tooltip-layerpopup {
    right: -3px;
    width: 155px;
    height: 62px;
    padding: 19px 0 40px 0;
  }
  .snsbox .tooltip-layerpopup:after {
    right: 20px;
  }
  .snsbox .tooltip-layerpopup .kakao,
  .snsbox .tooltip-layerpopup .instagram,
  .snsbox .tooltip-layerpopup .facebook,
  .snsbox .tooltip-layerpopup .urlcopy {
    background-size: 80%;
    line-height: 0;
  }
  .snsbox .tooltip-layerpopup .sns {
    width: 32px;
    padding-top: 34px;
    font-size: 0;
  }
  .bbs-head.style01 .snsbox .tooltip-layerpopup:after {
    right: 13px;
  }
}
@media (max-width: 768px) {
  .bbs-view {
    margin-top: 0;
  }
  .bbs-top {
    margin-top: 10px;
  }
  .bbs-head-wrap {
    padding: 15px;
  }
  .bbs-head {
    flex-direction: column;
    align-items: normal;
  }
  .bbs-head .subject {
    display: flex;
    align-items: center;
    padding: 0;
  }
  .bbs-head .ico-category {
    min-width: fit-content;
    margin-top: 0;
    margin-bottom: auto;
  }
  .bbs-head .bbs-headinfo {
    margin: 5px auto 0 0;
  }
  .bbs-head .views {
    margin-left: 20px;
  }
  .bbs-head .snsbox {
    display: none;
  }
}
/*====================================================*/
/*==================== RESPONSIVE ====================*/
/*====================================================*/
/*----------------------------------------*\
  || Huge
\*----------------------------------------*/
@media (max-width: 1200px) {
  .bbs-search.style01 {
    width: auto;
  }
}
/*# sourceMappingURL=main_new.css.map */