* {font-family: 'Pretendard'; color: #222;}

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #fff;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  line-height: 1.5;
  word-break: keep-all;
}

img {width: 100%;}

.font {font-family: 'yg-jalnan';}
.font2 {font-family: 'SBAggroL';}
.font3 {font-family: 'SBAggroM';}
.font4 {font-family: 'SBAggroB';}

.con-inner {padding-top: 60px; padding-bottom: 80px;}
.con-inner2 {padding: 60px 16px 100px 16px;}
.con-inner3 {padding-top: 60px; padding-bottom: 40px;}
.con-inner4 {padding: 60px 16px 40px 16px;}

/* 공통 css */

button {font-family: inherit;}
.pd-inner {padding: 0 16px;}
.btn1 {background:linear-gradient(to bottom, #58a9ff, #3262dd); height: 50px; display: flex; align-items: center; justify-content: center; width: 100%; color: #fff; z-index: 10;}
.bt-btn {position: fixed; width: calc(100% - 32px); bottom: 100px; left: 50%; transform: translateX(-50%);}
.btn2 {width: 100%; height: 50px; border: 1px solid #356EFF; border-radius: 5px; color: #356EFF;}
.btn3 {width: 100%; height: 50px;border-radius: 5px; font-weight: 600; color: #356eff; border: 1px solid #356EFF;}
.btn-wrap {padding: 20px 16px; width: 100%; bottom: 0; left: 0; position: fixed;}
.btn-wrap button {width: 100%;}

.btn-wrap2 {display: flex; gap: 10px; background-color: #fff;}
.btn-wrap2 .btn2 {width: 35%; height: 50px;}
.btn-wrap2 .btn1 {width: 65%;}

.color {color: #356EFF;}
.bold {font-weight: bold !important;}
.mt-20 {margin-top: 20px;}

/* 메인페이지 */

.main-visual { height: 280px; padding: 0 16px; position: relative;}
.visual {position: relative; border-radius: 10px;}
.visual01 {background-color: #0E2D93; background: url(../img/main-bg1.png), url(../img/main-bg2.png) #0E2D93; background-repeat: no-repeat; background-position: 0% 0%, 100% 100%;}
.visual02 {background: #C9D6FF; }
.visual-tit {text-align: left;margin: 30px 20px;}
.visual-tit h2 {color: #fff; font-size: 22px; margin-top: 10px; position: relative; z-index: 2;}
.visual01 .visual-tit span {color: #FFE032; display: inline-block; margin-right: 7px;}
.visual02 .visual-tit span {color: #7026cf; display: inline-block;}
.visual-tit p {font-size: 16px; color: rgba(256, 256, 256, .85); margin-top: 5px;}
.visual01 .vis-icon {position: absolute; bottom: 45px; right: 20px; width: 163px;}
.visual02 .vis-icon {position: absolute; bottom: 13px; right: 0px; width: 211px;}
.visual02 h2 {color: #333;}
.visual02 .visual-tit p {color: #444;}
.swiper-pagination {display: flex; width: fit-content !important; bottom: 20px !important; right: 40px !important; color: #fff; left: auto !important; padding: 3px 20px; background-color: rgb(157 157 157 / 27%); border-radius: 50px; gap: 5px;}
.swiper-pagination span {color: #fff;}
.swiper-pagination-current {font-weight: bold;}


.self-btn {border-radius: 8px; padding: 15px 20px; background: linear-gradient(to right, #356EFF, #34c1ef); display: flex; align-items: center; justify-content: space-between; margin-top: 10px; box-shadow: 0 0px 6px rgba(37, 149, 237, .50);}
.self-btn .tit-wrap p {font-size: 17px; font-weight: 600;color: #fff;}
.self-btn .tit-wrap span {color: #fff; font-weight: 300;}
.self-btn .go-btn {width: 30px; height: 30px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center;}
.self-btn .go-btn i {color: #356EFF; font-size: 12px; font-weight: bold;}

.why-info {margin-top: 45px; display: flex; flex-direction: column; align-items: center;}
.why-tit {font-size: 26px; margin-bottom: 20px;}
.why-tit p { font-weight: bold; display: flex; gap: 5px; color: #888;}
.why-tit p span { font-weight: bold; color: #356EFF;}
.why-info .info-img {width: 175px;}
.why-inner {width: 100%; background: #F3F7FF; padding: 35px 20px;}
.why-inner h3 {text-align: center; font-size: 18px; margin-bottom: 20px;}
.why-inner h3 span {display: inline-block;}
.why-inner .num-box {display: flex; flex-direction: column; gap: 10px;}
.why-inner .num-box div {padding: 15px 20px; border-radius: 10px; background: #fff; text-align: center;}
.why-inner .num-box div h4 {font-size: 16px; font-weight: bold; color: #356EFF; margin-bottom: 5px;}
.why-inner .num-box div p {color: #666;}

footer {padding: 25px 16px; display: flex; flex-direction: column; gap: 20px;}
footer .ft-logo {width: 155px; margin-bottom: 12px;}
footer ul li {color: #A1A1A1; font-size: 12px;}
footer h4 {color: #777; font-weight: 600; margin-bottom: 5px;}