@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset{border:0 none;}
img{border:0 none;vertical-align:top;}
dl,ul,ol,nav-menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none}
input,select,textarea,button {vertical-align: middle}
input, select, option, textarea {font-family: 'noto sans KR'; font-weight: 600;}
button {background:none; cursor: pointer; font-family: 'noto sans KR'; cursor:pointer; outline: none;}
body {background: #fff;}
body,th,td,input,select,textarea,button {font-family: 'noto sans KR'; font-size: 21px; color: #000; font-weight: 600;}
a {color:#000; text-decoration:none}
address,caption,cite,code,dfn,var {font-style:normal; font-weight:normal}
em{font-style:normal;}
.blind,legend,caption,#accessibility {width: 0px; height: 0px; position: absolute; overflow: hidden; font-size: 0px; line-height: 0px; z-index:-1; visibility: hidden;}
.hidden{visibility:hidden;}

select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
select option[value=""][disabled] {display: none;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

input::placeholder {color: #000;}
input::-webkit-input-placeholder {color: #000;}
input:-ms-input-placeholder {color: #000;} /* IE */
input:-mos-input-placeholder {color: #000;} /* Firefox */

* {box-sizing: border-box;}
#wrap {position: relative; overflow-y: auto; width: 100%;height: 100%;}
.container {width: 100%; height: 100%;}
.inner {position: relative; max-width: 1920px; width: 100%; margin: 0 auto; box-sizing: border-box;}

/* 공통 */
img {max-width: 100%;}
input {background: transparent; border: none; outline: none;}
button {background: transparent; border: none; outline: none;}
table, table th, table td {border-spacing: 0;}

/* header */
#header {position: fixed; left: 0; top: 0; width: 100%; height: auto; max-height: 100px; background: #fff; box-sizing: border-box; z-index: 999;}
#header .inner {overflow: hidden; max-width: 100%;}
#header .logo {float: left; width: 25%; min-width: 270px;}
#header .nav {position: relative; float: right; padding: 35px; padding-left: 0;}
#header .nav .nav-menu {overflow: hidden;}
#header .nav .nav-menu li {float: left; margin-right: 28px;}
#header .nav .nav-menu li:last-child {margin-right: 0;}
#header .nav .btn-nav-mobile {display: none; position: absolute; right: 30px; top: 35%; width: 33px; height: 28px;}
#header .nav .btn-nav-mobile span {display: inline-block; width: 33px; height: 4px; background: #000; vertical-align: top;}
#header .nav .btn-nav-mobile::before {position: absolute; left: 0; top: 12px; content: ''; width: 33px; height: 4px; background: #000;}
#header .nav .btn-nav-mobile::after {position: absolute; left: 0; top: 24px; content: ''; width: 33px; height: 4px; background: #000;}
#header .nav.active .nav-menu {display: block;}
#header .nav.active .btn-nav-mobile span {display: none;}
#header .nav.active .btn-nav-mobile::before {transform: rotate(45deg);}
#header .nav.active .btn-nav-mobile::after {top: 12px; transform: rotate(-45deg);}

/* content */
/* main */
.content {padding-top: 100px;}
.content .section-top {overflow: hidden; background: #3B5999;}
.content .section-top .inner {max-width: 100%;}
.content .section-top .inner>div {position: relative; float: left; max-height: 830px;}
.content .section-top .sec-left {width: 40%; min-height: 450px; padding-bottom: 43.616%; background: #3b5999; color: #fff;}
.content .section-top .sec-right {width: 60%;}
.content .section-top .sec-right img {position: absolute; left: 0; top: 0; width: 100%;}
.content .section-top .sec-left .txt1 {position: absolute; left: 10%; top: 19.3%;}
.content .section-top .sec-left .txt2 {position: absolute; left: 37%; bottom: 20.5%; width: 344px; text-align: center;}
.content .section-top .sec-left .txt2 .txt-box {width: 100%; padding: 3.5% 0; background: #fff; border-radius: 6px; text-align: center; font-size: 30px; color: #3b5999; line-height: 34px;}
.content .section-top .sec-left .txt2 .txt-box + p {margin-top: 10px; font-size: 19px;}
.content .section-top .sec-left .txt1 h2 {margin-bottom: 35px; font-size: 40px;}

.content .section-center {z-index: 1;}
.content .section-center .inner {max-width: 1340px; max-height: 303px; margin-top: -6.3%; background: #fff;}
.content .section-center .icon-list {overflow: hidden; padding: 2.3% 5.5%;}
.content .section-center .icon-list li {float: left; width: 16.603%; margin-right: 4.2%;}
.content .section-center .icon-list li:last-child {margin-right: 0;}

.content .section-qna {}
.content .section-qna .inner {max-width: 1340px; padding: 3.4% 2.1%;}
.content .section-qna h3 {margin-left: -4.75%; font-size: 50px;}
.content .section-qna .qna-list .list-item {padding: 1.2%; border-bottom: 1px solid #000; font-size: 22px; cursor: pointer;}
.content .section-qna .qna-list .list-item .list-a {display: none; padding: .8% 5.5% .4%; font-size: 21px;}

/* sub */
.content {}
.content .section-banner {}
.content .section-banner .title {width: 100%; max-height: 120px; margin-bottom: 20px; padding: 2% 1%; background: #3b5999; text-align: center; font-size: 31px; color: #fff;}
.content .section-banner .swiper-banner {overflow: hidden; max-height: 1045px;}
.content .section-banner .swiper-banner .swiper-navigation>div {width: 4.204%; height: 7.655%; margin-top: 22px; background: url('../images/sub/btnArrow.png') no-repeat; background-size: 100%;}
.content .section-banner .swiper-banner .swiper-button-prev {left: 4px;}
.content .section-banner .swiper-banner .swiper-button-next {right: 4px; transform: rotate(180deg);}
.content .section-banner .swiper-banner .swiper-slide {opacity: 1;}
.content .section-banner .swiper-banner .swiper-slide.on {animation: bannerAni .8s ease-in-out forwards;}

@keyframes bannerAni {
  0% {opacity: .5;}
  100% {opacity: 1;}
}

.content .section-desc {max-width: 1340px; padding: 0 2%; margin: auto;}
.content .section-desc .section-box {overflow: hidden; position: relative; margin-top: 17px; margin-bottom: 50px; color: #646464;}
.content .section-desc .section-box:last-child {margin-bottom: 35px;}
.content .section-desc .section-box .tit {margin-bottom: 22px; font-size: 30px; color: #000;}
.content .section-desc .section-box .stit {margin-bottom: 15px; font-size: 22px; color: #000;}
.content .section-desc .section-box .option-list + .stit {margin-top: 30px;}
.content .section-desc .section-box .option-list {overflow: hidden;}
.content .section-desc .section-box .option-list li {float: left; margin-bottom: 20px; word-break: keep-all;}
.content .section-desc .section-box.info-box1 {}
.content .section-desc .section-box.info-box1 .box-wrap {overflow: hidden; border-radius: 10px; border: 2px solid #e8e8e8;}
.content .section-desc .section-box.info-box1 .box-wrap>div {float: left; padding: 2%;}
.content .section-desc .section-box.info-box1 .box-wrap .box-wrap-left {width: 68%; padding: 6% 2%; border-right: 2px solid #e8e8e8;}
.content .section-desc .section-box.info-box1 .box-wrap .box-wrap-right {width: 32%;}
.content .section-desc .section-box.info-box1 .option-list li {width: 25%; margin-bottom: 0; text-align: center;}
.content .section-desc .section-box.info-box1 .option-list li span {display: block; margin-top: 10px;}
.content .section-desc .section-box.info-box1 .table-list1 {width: 100%;}
.content .section-desc .section-box.info-box1 .table-list1 th {padding: 3.5% 1.5%; text-align: left; color: #969696;}
.content .section-desc .section-box.info-box1 .table-list1 td {padding: 3.5% 1.5%; text-align: left;}
.content .section-desc .section-box.option-box1 {}
.content .section-desc .section-box.option-box1 .option-list li {width: 20%;}
.content .section-desc .section-box.option-box1 .option-list li img {margin-right: 5px; vertical-align: middle;}
.content .section-desc .section-box.option-box2 {}
.content .section-desc .section-box.option-box2 .option-list li {width: 20%;}
.content .section-desc .section-box.info-box2 {}
.content .section-desc .section-box.info-box2 .box {overflow: hidden; padding: 3% 3.5%; margin-bottom: 2.8%; background: #f8f8f8; border-radius: 10px; color: #646464;}
.content .section-desc .section-box.info-box2 .box:last-child {margin-bottom: 0;}
.content .section-desc .section-box.info-box2 .box.box1 {padding: 0; background: #fff;}
.content .section-desc .section-box.info-box2 .box.box2 {padding: 1% 3.5%;}
.content .section-desc .section-box.info-box2 .box.box1 p.notice {position: absolute; right: 0; top: 0; display: inline-block; min-width: 212px; padding: .3% 1% .4% .8%;
  background: #fef6f7; border-radius: 8px; font-size: 18px; color: #ff495f;}
.content .section-desc .section-box.info-box2 .box.box1 p.notice img {vertical-align: middle;}
.content .section-desc .section-box.info-box2 .box.box1 p.notice span {display: inline-block; margin-left: 5px; vertical-align: middle;}
.content .section-desc .section-box.info-box2 .box .option-list li {width: 11.111%; margin-bottom: 0; text-align: center;}
.content .section-desc .section-box.info-box2 .box .option-list li span {display: block;}
.content .section-desc .section-box.info-box2 .box .table-list2 {width: 100%; border-top: 2px solid #000; border-bottom: 2px solid #000; word-break: keep-all;}
.content .section-desc .section-box.info-box2 .box .table-list2 thead {}
.content .section-desc .section-box.info-box2 .box .table-list2 thead th {padding: 2% 1%; border-bottom: 2px solid #e8e8e8;}
.content .section-desc .section-box.info-box2 .box .table-list2 thead th span {color: #969696;}
.content .section-desc .section-box.info-box2 .box .table-list2 tbody td {padding: 2% 1%; text-align: center;}
.content .section-desc .section-box.info-box2 .box .table-list3 {width: 45%; word-break: keep-all;}
.content .section-desc .section-box.info-box2 .box .table-list3 thead th {padding: 5% 1%; border-bottom: 2px solid #646464; text-align: left;}
.content .section-desc .section-box.info-box2 .box .table-list3 thead th span {color: #646464;}
.content .section-desc .section-box.info-box2 .box .table-list3 tbody td {padding: 5% 1%; color: #646464;}
.content .section-desc .section-box.info-box2 .box .table-list3 tbody td:last-child {text-align: right;}
.content .section-desc .section-box.info-box2 .box .notice-list {float: left; width: 50%;}
.content .section-desc .section-box.info-box2 .box .notice-list li {margin-bottom: 1.8%;}
.content .section-desc .section-box.info-box2 .box .notice-list li:last-child {margin-bottom: 0;}


/* footer */
#footer {background: #f3f1f1;}
#footer .inner {padding: 20px 1%; text-align: center;}
#footer .inner ul {overflow: hidden; display: inline-block;}
#footer .inner li {position: relative; float: left; padding-left: 38px; font-size: 18px;}
#footer .inner li::before {position: absolute; left: 20px; top: 50%; content: ''; width: 2px; height: 20px; background: #000; transform: translateY(-50%);}
#footer .inner li:first-child::before {display: none;}

.btn-floating {position: fixed; right: 18px; bottom: 110px; width: 90px; z-index: 99;}
.btn-floating a {display: inline-block; margin-bottom: 10px;}
.btn-floating a.btn1 {display: none;}



@media (max-width: 1440px) {
  .content .section-top .inner>div {height: 620px;}
  .content .section-top .sec-left {width: 570px;}
  .content .section-top .sec-right {width: calc(100% - 570px);}
  .content .section-top .sec-left .txt1 {top: 16%;}
  .content .section-top .sec-left .txt2 {left: 50%; transform: translateX(-50%);}
  .content .section-top .sec-right img {max-width: inherit; width: auto; height: 620px;}
  .content .section-center .inner {width: 95%;}
  .content .section-qna h3 {margin-left: 0;}
}
@media (max-width: 1300px) {
  body,th,td,input,select,textarea,button,
  .content .section-qna .qna-list .list-item .list-a {font-size: 1.62vw;}
  #header .nav {padding: 2.9%; padding-left: 0;}
  #header .nav .nav-menu li {margin-right: 18px;}

  .content {padding-top: 8%;}
  .content .section-top .inner>div {height: 580px;}
  .content .section-top .sec-left {width: 44%; height: auto;}
  .content .section-top .sec-left .txt1 {left: 7.5%; top: 13%;}
  .content .section-top .sec-left .txt1 h2 {font-size: 3.1vw;}
  .content .section-top .sec-left .txt2 .txt-box {font-size: 2.3vw;}
  .content .section-top .sec-left .txt2 .txt-box + p {font-size: 1.46vw;}
  .content .section-qna h3 {margin-left: 0; font-size: 3.7vw;}
  .content .section-qna .qna-list .list-item {font-size: 1.7vw;}

  .content .section-banner .title {font-size: 2.5vw;}
  .content .section-desc .section-box .tit {font-size: 2.3vw;}
  .content .section-desc .section-box .stit {font-size: 1.65vw;}
  .content .section-desc .section-box.info-box2 .box.box1 p.notice {min-width: inherit; padding: .3% .6% .4% 1%; font-size: 1.4vw;}
  .content .section-desc .section-box.info-box2 .box.box1 p.notice img {max-width: 18%;}

  #footer .inner li {font-size: 1.4vw;}
}
@media (max-width: 1141px) {
  .content {padding-top: 85px;}
  .content .section-top .inner>div {float: none; width: 100%; height: auto; padding-bottom: 0;}
  .content .section-top .sec-left .txt2 {bottom: 11%; width: 300px;}
  .content .section-top .sec-right img {position: static; max-width: 100%; height: auto;}
}
@media (max-width: 1000px) {
  body,th,td,input,select,textarea,button {font-size: 18px;}
  #header .nav {min-height: 79px; padding: 0;}
  #header .nav .btn-nav-mobile {display: block;}
  #header .nav .nav-menu {display: none; position: fixed; left: 0; top: 79px; padding: 30px 0; width: 100%; height: 100%; background: rgba(255,255,255,.95);}
  #header .nav .nav-menu li {float: none; padding: 18px; margin: 0; text-align: center; font-size: 24px;}

  .content .section-top .sec-left .txt1 h2 {font-size: 32px}
  .content .section-top .sec-left .txt2 {width: 270px;}
  .content .section-top .sec-left .txt2 .txt-box {font-size: 24px;}
  .content .section-top .sec-left .txt2 .txt-box + p {font-size: 15px;}
  .content .section-center .icon-list {padding: 2.3%;}
  .content .section-center .icon-list li {width: 18.2%; margin-right: 2.2%;}
  .content .section-qna .inner {padding: 30px 18px;}
  .content .section-qna h3 {margin-bottom: 10px; font-size: 32px;}
  .content .section-qna .qna-list .list-item {padding: 12px 11px; font-size: 18px;}
  .content .section-qna .qna-list .list-item .list-a {font-size: 17px;}

  .content .section-banner .title {padding: 20px 18px; margin-bottom: 10px; font-size: 28px;}
  .content .section-banner .swiper-banner .swiper-button-prev {left: 18px;}
  .content .section-banner .swiper-banner .swiper-button-next {right: 18px;}
  .content .section-desc {padding: 0 18px;}
  .content .section-desc .section-box {margin-bottom: 25px;}
  .content .section-desc .section-box:last-child {margin-bottom: 25px;}
  .content .section-desc .section-box .tit {font-size: 24px;}
  .content .section-desc .section-box .stit {font-size: 19px;}
  .content .section-desc .section-box.info-box1 .box-wrap>div {float: none; width: 100% !important;}
  .content .section-desc .section-box.info-box1 .box-wrap .box-wrap-left {padding: 6% 2% 2%; border: 0;}
  .content .section-desc .section-box.info-box1 .table-list1 {max-width: 410px;}
  .content .section-desc .section-box.info-box1 .option-list li img {max-width: 40%;}
  .content .section-desc .section-box.option-box1 .option-list li img {max-width: 45%;}
  .content .section-desc .section-box.option-box2 .option-list li {width: 25%;}
  .content .section-desc .section-box.info-box2 .box {margin-bottom: 18px;}
  .content .section-desc .section-box.info-box2 .box.box1 p.notice {padding: .5% .6% .6% 1%; font-size: 16px;}
  .content .section-desc .section-box.info-box2 .box .table-list3 {width: 60%;}

  #footer .inner ul li {padding-left: 20px; font-size: 15px;}
  #footer .inner li::before {left: 10px; height: 14px;}
  #footer .inner ul.footer-top li {float: none; width: 100%;}
  #footer .inner ul.footer-top li::before {display: none;}

  .btn-floating a.btn1 {display: block;}
}
@media (max-width: 800px) {
  .content .section-desc .section-box.option-box1 .option-list li {text-align: center;}
  .content .section-desc .section-box.option-box1 .option-list li img {margin-right: 0;}
  .content .section-desc .section-box.option-box1 .option-list li span {display: block;}
  .content .section-desc .section-box.option-box2 .option-list li {width: 33.333%;}
  .content .section-desc .section-box.info-box2 .box .notice-list {float: none; width: 100%;}
  .content .section-desc .section-box.info-box2 .box .notice-list:last-child {margin-top: 5%;}

  #footer .inner ul.footer-bottom li {width: 50%;}
  #footer .inner ul.footer-bottom li:nth-child(2n-1)::before {display: none;}
}