@import url(https://use.fontawesome.com/releases/v5.15.2/css/all.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@charset "utf-8";

/* Reset CSS  */
html { height: 100%; overflow-y:scroll;}
body { font-size: 13px; color:#000;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none;  font-family:"Pretendard"}
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#000;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; height:auto; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 1.6;}
td strong {font-weight: 100;	font-size: 5px;vertical-align: bottom;}
a:hover{text-decoration:none;}
ul:after{content:""; display:block; clear:both;}

.container { max-width: 1410px; width:100%; margin: 0 auto; position: relative; box-sizing: border-box; padding:0 15px;}
.container:after {content: ""; display: block; clear: both;}

/*formmail*/
#select-form{border:1px solid #ddd; width:100%; padding:15px 10px; font-size:15px}
.fields{position:relative; max-width: 1400px; margin: 50px auto 150px; box-shadow: 0 0 5px 2px #ddd; border-radius: 50px; padding: 0 70px 50px;}
.fields fieldset {padding-top: 50px; font-size: 18px;}
.fields li{display:flex;border-bottom:1px solid #ddd;  align-items:center; padding:30px 15px;}
.fields .lbl{width:200px;font-size:15px; cursor:text}
.fields .desc{width:100%;}
.fields .desc input {width:100%; padding: 15px 10px; border: 1px solid #ddd;}
.fields .desc textarea {width:100%; padding: 15px 10px; border: 1px solid #ddd;}
.fields .input{border:1px solid #ddd; padding:15px 10px; box-sizing:border-box; width:100%}
.fields .input.full{width:100%}
.fields .btn-group{margin-top:34px; text-align:center}
.fields .btn-group span{font-size:16px; color:#999;}
.fields .btn-group a{font-size:16px; color:#000; font-weight:bold;}
.fields .btn-group a:hover{text-decoration:underline}
input[id="agree-check"] + label {display: inline-block; width: 20px; height: 20px; border: 1px solid #bbb; cursor: pointer;margin: 0 4px 4px 0;}
input[id="agree-check"]:checked + label {border-color:#0b4ea2; background:url('../img/agree_check.png') no-repeat center center;}
input[id="agree-check"] {display: none;}
.fields .btn-submit{background:#0b4ea2; color:#fff; font-size:16px; font-weight:bold; padding: 15px 47px; border:none; outline:none; margin-top:35px;}
.btn-group .more_btn {width: 160px; padding: 15px 0; font-size: 16px; height: auto; line-height: 1.3; background: #0c294a; color: #fff;}


/*header*/
#header {background: rgba(255,255,255,0.8); position: absolute; z-index: 99; width: 100%; padding: 10px 20px; top: 0;}
#header .hd_wrap {display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto;}
#header .hd_logo {}
#header .gnb ul li {float: left;}
#header .gnb > ul::before {content: ""; position: absolute;left: 0; top: 85px; width: 100%; height: 70px; background: #fff; display: none; border-top: 2px solid #0c294a; z-index: 9;}
#header .gnb > ul:hover::before {display: block;}
#header .gnb .lnb {display: none; position: absolute; top: 80px; z-index: 9;}
#header .gnb .lnb:hover {display: block;}
#header .gnb .lnb a {font-size: 16px; padding: 25px; display: block;}
#header .gnb > ul > li:hover .lnb {display: block; z-index: 9;}
#header .gnb > ul > li > a {font-size: 18px; padding: 25px; display: block;}


/*mobile*/
#header .menu_btn {display: none; position: absolute; top: 27px; right: 5px; width: 40px; height: 25px; z-index: 9;}
#header .menu_btn span {width: 30px; height: 3px; background: #fff; display: block; position: absolute; transition: all 0.4s;}
#header .menu_btn span:nth-child(1) {top: 0;}
#header .menu_btn span:nth-child(2) {top: 10px;}
#header .menu_btn span:nth-child(3) {bottom: 0;}
#header .menu_btn.active span {background: #333; position: fixed; top: 40px;}
#header .menu_btn.active span:nth-child(1) {-webkit-transform: translateY(14px) rotate(-45deg); transform: translateY(14px) rotate(-45deg); top: 18px;}
#header .menu_btn.active span:nth-of-type(2) {opacity: 0;}
#header .menu_btn.active span:nth-of-type(3) {-webkit-transform: translateY(-8px) rotate(45deg);transform: translateY(-8px) rotate(45deg);}


.menu:before {}
.menu {width: 80%; height: 100%; position: fixed; top: 0; right: 0; background: #fff; border-radius: 20px 0 0 20px; display: none; box-shadow: 0 0 15px 5px #ddd;}
.menu .menu_wrap {width: 100%; height: 100%;}
.menu .close {font-size: 25px; position: absolute; top: 15px; right: 25px;}
#header .menu .gnb {float: none!important; padding-top: 0;}
.menu .gnb > ul > li {width: 100%; margin-right: 0!important; border-top: 1px solid #ddd; padding-bottom: 5px;}
.menu .gnb > ul > li:first-child {border-top: none;}
#header .menu .gnb .lnb {padding: 0px; display: block; position: static;}
#header .menu .gnb > ul > li > a {color: #0c294a; font-size: 18px; padding: 20px 20px 10px; font-weight: 600;}
#header .menu .gnb > ul > li ul li {padding-bottom: 15px; float: none;}
#header .menu .gnb > ul > li ul li a {font-size: 14px; margin-bottom: 5px; padding: 0 20px;}
#header .menu .lang {position: absolute; right: 5%; bottom: 5%;}
#header .menu .lang a {color: #333; border: 1px solid #333; border-radius: 25px; padding: 5px 10px; transition: all 0.3s;}

#header .right {display: flex; justify-content: space-between; align-items: center;}
#header .right .login_out {margin-left: 40px;}



/*index*/
#main {overflow: hidden;}
#main section {position: relative; margin-bottom: 200px;}

#main .section01 {height: 937px;}
#main .section01 .swiper {height: 100%;}
#main .section01 .swiper-slide {background: url(../img/m_banner01.png) no-repeat center/cover;}

#main .section01 .title {position: absolute; right: 0; top: 30%; text-align: right; background: rgba(255,255,255,0.7); padding: 100px 10vw 100px 5vw; border-radius: 100px 0 0 100px; color: #0c294a; width: 50vw;}
#main .section01 .title h2 {font-size: 22px; font-weight: 400;}
#main .section01 .title h1 {font-size: 60px;}
#main .section01 .title h3 {font-size: 20px; font-weight: 400;}

#main .section02 > div {display: flex; justify-content: space-between; position: relative;}
#main .section02 > div > div {width: 50%;}
#main .section02 .text {text-align: center; padding: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#main .section02 h2 {font-size: 48px; margin-bottom: 20px; color: #0c294a;}
#main .section02 p {font-size: 20px; margin-bottom: 30px; word-break: keep-all; color: #0c294a;}
#main .section02 p span {text-decoration: underline;}
#main .section02 .more_bt {border: 1px solid #0c294a; padding: 15px 70px; border-radius: 30px; font-size: 18px; transition: all 0.3s;}
#main .section02 .more_bt:hover {background: #0c294a; color: #fff;}

#main .section02 .con01 .back {position: absolute; bottom: 0; left: 0;}
#main .section02 .con02 .back {position: absolute; top: 0; right: 0; z-index: -1;}

#main .section03 .title {text-align: center; margin-bottom: 100px;}
#main .section03 .title h1 {font-size: 40px;}
#main .section03 .title p {font-size: 18px; margin-bottom: 50px;}
#main .section03 .title span {background: #0c294a; color: #fff; padding: 10px 60px; border-radius: 30px; font-size: 18px;}
#main .section03 .map_info {position: relative;}
#main .section03 .info {width: 25%; background: #0c294a; position: absolute; top: 0; right: 0; height: 100%;}
#main .section03 .info .info_wrap {background: #fff; position: absolute; right: 20px; top: -20px; width: 100%; height: 100%; box-shadow: 0px 0px 5px 0px #919191; text-align: center; display: flex; flex-direction: column; justify-content: center; padding: 20px;}
#main .section03 .info .info_wrap li {margin-bottom: 40px;}
#main .section03 .info .info_wrap li:last-child {margin-bottom: 0;}
#main .section03 .info .info_wrap b {font-size: 28px; margin-bottom: 10px; display: block; font-weight: 600;}
#main .section03 .info .info_wrap p {font-size: 20px; word-break: keep-all;}
#main .section03 .map iframe {width: 75%; height: 700px;}

#main .section04 ul {display: flex; justify-content: space-between;}
#main .section04 ul:after {display: none;}
#main .section04 ul li {border:1px solid #0c294a; padding: 35px; width: 31%; height: 220px; position: relative;}
#main .section04 li a {color: #0c294a;}
#main .section04 ul li h2 {font-size: 30px; margin-bottom: 10px;}
#main .section04 ul li p {font-size: 18px; margin-bottom: 60px; color: #0c294a;}
#main .section04 ul li span {font-size: 16px;}
#main .section04 .arrow {position: absolute; top: 10%; right: 5%;}
#main .section04 .arrow:nth-child(2) {display: none;}
#main .section04 ul li .back {position: absolute; right: 5%; bottom: 5%;}
#main .section04 ul li .back {}
#main .section04 ul li .back:nth-child(2) {display: none;}
#main .section04 ul li:hover {background: #0c294a;}
#main .section04 ul li:hover a {color: #fff;}
#main .section04 ul li:hover p {color: #fff;}
#main .section04 ul li:hover .arrow:nth-child(1), #main .section04 ul li:hover .back:nth-child(1) {display: none;}
#main .section04 ul li:hover .arrow:nth-child(2), #main .section04 ul li:hover .back:nth-child(2) {display: block;}
#main .section04 > img {position: absolute; top: -92%; z-index: -1;}


/*sub*/
.visual {background: no-repeat center / cover; height: 480px; padding-top: 200px; position: relative; z-index: 20; text-align: center; margin-bottom: 0;}
.visual.bg1 {background-image: url(../img/sub_banner_1.png);}
.visual.bg2 {background-image: url(../img/sub_banner_2.png);}
.visual.bg3 {background-image: url(../img/sub_banner_3.png);}
.visual .visual-wrap {color: #fff;}
.visual .visual-title {font-size: 65px; font-weight: 400;}
.snb {position: absolute; line-height: 70px; height: 70px; background: #ededed; text-align: center; bottom: -30px; left: 0; right: 0; width: 50%; margin: 0 auto; border-radius: 50px;}
.snb ul {display: inline-block; vertical-align: bottom; border-width: 0 1px;}
.snb li {border-right: 1px solid rgba(255,255,255,0.3); position: relative;}
/* .snb li::before {content: ""; width: 2px; height: 20px; background: #7c7c7c; position: absolute; top: 35%; right: 5px;} */
.snb li:last-child:before {display: none;}
.snb .float-wrap>* {float: left;}
.snb a {display: block; width: 150px; font-size: 17px; color: #7c7c7c; position: relative;}
.snb a.active {color: #0c294a; font-weight: 500;}
.snb a.active:after {content: ""; width: 70%; height: 2px; background: #0c294a; position: absolute; left: 50%; transform: translate(-50%); bottom: 10px;}

.sub-page .con01 {margin-top: 150px;}
.sub-page > div:last-child {margin-bottom: 150px;}

/*sub0101*/
#sub0101 {overflow: hidden;}
#sub0101 > div {margin-bottom: 300px;}
#sub0101 > div:last-child {margin-bottom: 150px;}
#sub0101 .title {font-size: 65px; text-align: center; color: #0c294a;}
#sub0101 .title2 {font-size: 40px; text-align: center; color: #0c294a;}
#sub0101 .con01 .con {margin-top: 200px; display: flex; justify-content: space-between;}
#sub0101 .con01 .left {width: 30%;}
#sub0101 .con01 .right {width: 65%;}
#sub0101 .con01 .right .up {color: #0c294a;}
#sub0101 .con01 .right .up h3 {font-size: 40px; margin-bottom: 55px;}
#sub0101 .con01 .right .up p {font-size: 22px; margin-bottom: 25px; line-height: 35px;}
#sub0101 .con01 .right .bottom span {font-size: 22px; margin-right: 20px; vertical-align: bottom;}
#sub0101 .con01 .right .bottom b {font-size: 40px; font-weight: 600; color: #0c294a; margin-right: 20px; vertical-align: bottom;}

#sub0101 .con02 .title {margin-bottom: 100px;}
#sub0101 .con02 .back {position: absolute; top: 170px; left: -20%;}
#sub0101 .con02 .back:last-child {position: absolute; top: auto; bottom: 0; left: auto; right: -20%;}

#sub0101 .con03 {background: url(../img/sub0101_back2.png) no-repeat center/cover;}
#sub0101 .con03 .title2 {color: #fff; padding: 70px 0;}
#sub0101 .con03 img {padding-bottom: 85px;}

#sub0101 .con04 .title2 {margin-bottom: 90px;}
#sub0101 .con04 iframe {width: 100%; height: 70vh;}
#sub0101 .con04 .info {width: 80%; margin: 90px auto 0;}
#sub0101 .con04 .info li {width: 48%; height: 250px; background: #f5f8fa; margin-right: 1.5vw; padding: 80px; margin-bottom: 30px; float: left; text-align: center; border-radius: 10px 50px; position: relative; box-shadow: 1px 1px 5px 0px #ddd;}
#sub0101 .con04 .info li:nth-child(2n) {margin-right: 0;}
#sub0101 .con04 .info li:after {content: ""; background: #fff; position: absolute; width: 15px; height: 15px; right: 5%; top: 25px; border-radius: 20px; box-shadow: inset 1px 1px 3px #bbb;}
#sub0101 .con04 .info li b {font-size: 24px; margin-bottom: 3vh; display: block;}
#sub0101 .con04 .info li b img {margin-right: 10px;}
#sub0101 .con04 .info li p {font-size: 18px; font-weight: 300;}

/*sub0102*/
#sub0102 {position: relative;}
#sub0102 .back {position: absolute; bottom: -60px; width: 100%; height: 400px; background: #0c294a; overflow: hidden;}
#sub0102 .con01 {margin-bottom: 200px;}
#sub0102 .con01 .container {display: flex; align-items: center;}
#sub0102 .right .container {overflow: hidden;}
#sub0102 .title {font-size: 65px; text-align: center; color: #0c294a;}
#sub0102 .left {float: left; width: 21%; padding: 0;}
#sub0102 .left h1 {font-size: 38px; color: #0c294a; position: absolute; top: 40%; left: 0;}
#sub0102 .right {width: 78%; display: inline-block;}
#sub0102 .swiper {width: 100%; height: 100%; margin-left: auto; margin-right: auto;}
#sub0102 .swiper-slide {font-size: 18px; background: #fff; height: 290px; display: flex; align-items: center;justify-content: center; flex-direction: column; border: 1px solid #dfe5eb; box-shadow: 2px 2px 5px 1px #d7d7d7; padding: 40px; box-sizing: border-box;}
#sub0102 .swiper-slide .text_wrap {text-align: left;}
#sub0102 .right .swiper-slide span {position: absolute; top: 2%; right: 5%; font-size: 45px; font-weight: 600; color: #0c294a;}
#sub0102 .right .swiper-slide h3 {font-size: 24px; color: #0c294a; margin-bottom: 20px; font-weight: 600;}
#sub0102 .right .swiper-slide p {font-size: 18px; font-weight: 400; margin-bottom: 10px; word-break: keep-all;}
#sub0102 .right .up .swiper-slide {margin-bottom: 50px;}
#sub0102 .right .down .swiper-slide {margin-top: 50px; box-shadow: 2px 2px 4px 1px #000;}
#sub0102 .swiper-button-prev:after,#sub0102 .swiper-button-next:after {display: none;}
#sub0102 .swiper-button-prev,#sub0102 .swiper-button-next {top: 55%; color: #fff;}
#sub0102 .swiper-button-next {right: auto; left: 80px;}

#sub0102 .con02 h1 {font-size: 40px; color: #0c294a; margin-bottom: 50px;}
#sub0102 .con02 ul {display: flex; justify-content: space-between;}
#sub0102 .con02 ul:after {display: none;}
#sub0102 .con02 ul li {width: 25%; border: 1px solid #ddd;}

/* #sub0202 h1 {font-size: 36px; text-align: center; *margin-top: 150px;} */
#sub0202 .title {margin-top: 150px;}
#sub0202 h1 {font-size: 36px; text-align: center;}
#sub0202 .con01 {margin-top: 100px;}
#sub0202 > div {margin-bottom: 150px;}
#sub0202 > div h2 {font-size: 25px; font-weight: 500; text-align: center;}
#sub0202 > div h2:after {content: ""; width: 100%; height: 1px; display: block; background: #0c294a; margin: 30px 0 50px;}

#sub0301 .banner {display: block; margin: 0 auto; margin-top: 200px;}
#sub0302 .banner {display: block; margin: 0 auto; margin-top: 100px;}
#sub0303 .banner {display: block; margin: 0 auto; margin-top: 200px;}



/*Footer*/
#footer {background: #1e1e1e; width: 100%; color: #fff;}
#footer .ft_wrap {max-width: 1400px; margin: 0 auto;}
#footer .up {padding: 50px 0;}
#footer .up .ft_wrap {display: flex; justify-content: space-between;}
#footer .up .left p {color: #a5a5a5; font-size: 16px; font-weight: 300; margin-bottom: 10px;}
#footer .up .left p:first-child {font-weight: 500;}
#footer .right .gnb ul li {margin-bottom: 10px;}
#footer .right .gnb ul li a {color: #a5a5a5; font-size: 15px;}
#footer .right .gnb > ul > li > a {font-weight: bold;}
#footer .right .gnb > ul > li ul {margin-top: 10px;}
#footer .right .gnb > ul > li {float: left; margin-right: 80px; position: relative;}
#footer .right .gnb > ul > li:after {content: ""; position: absolute; top: 0; right: -40px; background: #3a3a3a; width: 1px; height: 110px; margin-left: 79px;}
#footer .right .gnb > ul > li:last-child::after {display: none;}
#footer .down {padding: 20px 0; background: #131313;}
#footer .down p {color: #909090;}


.mobile_only {display: none!important;}


@media (max-width: 1199px) {

  #main .section01 .title {padding: 10vh 5vw; width: 75%; border-radius: 50px 0 0 50px;}
  #main .section02 > div {display: block;}
  #main .section02 > div > div {width: 100%;}
  #main .section02 > div > div img {display: none;}
  #main .section03 .info {width: 35%;}

  #sub0101 .con01 .con {display: block; text-align: center; margin-top: 150px;}
  #sub0101 .con01 .left {width: 100%; margin-bottom: 50px;}
  #sub0101 .con01 .right {width: 100%;}
  #sub0101 .con04 .info {width: 90%;}

  #sub0102 .con01 .container {display: block;}
  #sub0102 .left {width: 100%; margin-bottom: 100px; text-align: center;}
  #sub0102 .left h1 {position: static;}
  #sub0102 .swiper-button-next,   #sub0102 .swiper-button-prev {top: 10%; color: #333;}
  #sub0102 .swiper-button-next {left: 56%;}
  #sub0102 .swiper-button-prev {left: 40%;}
  #sub0102 .right {width: 100%;}

  .snb a {width: 105px; font-size: 14px;}

  #footer .up {padding: 50px 20px;}
  #footer .down {padding: 20px;}
}



@media (max-width: 768px) {
  #header {background: none;}
  #header .hd_logo h1 a img {width: 75%;}
  #header .gnb > ul::before {display: none!important;}
  .pc_only {display: none!important;}
  .mobile_only {display: block!important;}
  #header .menu_btn {display: block;}
  #main section {margin-bottom: 100px;}
  #main .section01 {height: 100vh;}
  #main .section01 .title {left: 50%; transform: translate(-50%); right: auto; width: 95%; text-align: center; border-radius: 50px; padding: 10vw;}
  #main .section01 .title h1 {font-size: 38px; margin: 10px 0 20px;}
  #main .section01 .title h3 {font-size: 18px;}
  #main .section02 > div {margin-bottom: 100px;}
  #main .section02 .text {padding: 7vw;}
  #main .section02 h2 {font-size: 36px;}
  #main .section02 p {font-size: 18px;}
  #main .section02 .more_bt {font-size: 14px;}
  #main .section03 .map {width: 95%; margin: 0 auto;}
  #main .section03 .map iframe {width: 100%; height: 50vh;}
  #main .section03 .info {width: 95%; position: static; margin: 50px auto; background: transparent;}
  #main .section03 .info .info_wrap {position: sticky; padding: 50px 20px;}
  #main .section03 .info .info_wrap b {font-size: 24px;}
  #main .section03 .info .info_wrap p {font-size: 18px;}

  .snb {display: none;}
  .visual {height: 250px; padding-top: 100px;}
  .visual .visual-title {font-size: 3em;}

  #sub0101 .title {font-size: 48px;}
  #sub0101 .title2 {font-size: 32px;}
  #sub0101 > div {margin-bottom: 150px;}
  #sub0101 .con01 .con {margin-top: 100px;}
  #sub0101 .con01 .con .left img {width: 80%;}
  #sub0101 .con01 .right .up p {font-size: 16px; line-height: 30px; word-break: keep-all;}
  #sub0101 .con01 .right .bottom span {font-size: 18px;}
  #sub0101 .con01 .right .bottom b {font-size: 30px;}
  #sub0101 .con01 .right .bottom img {margin: 30px auto; width: 50%; display: block;}
  #sub0101 .con04 iframe {height: 50vh;}
  #sub0101 .con04 .info {width: 100%; }
  #sub0101 .con04 .info li {width: 100%; height: 200px; margin-right: 0; padding: 30px; display: flex; flex-direction: column; justify-content: center;}
  #sub0101 .con04 .info li p {word-break: keep-all; font-size: 16px;}

  #sub0102 .con01 .up .container {padding: 0;}
  #sub0102 .con01 .down .container {padding: 0;}
  #sub0102 .con02 h1 {text-align: center;}
  #sub0102 .con02 ul {display: block;}
  #sub0102 .con02 ul li {width: 90%; margin: 50px auto; border: none; text-align: center;}
  #sub0102 .swiper-slide {height: 260px; padding: 20px; margin-top: 10px!important;}
  #sub0102 .right .swiper-slide h3 {font-size: 22px;}
  #sub0102 .right .swiper-slide p {font-size: 16px;}
  #sub0102 .back {height: 350px;}

  #sub0301 .banner {display: none;}
  #sub0302 .banner {display: none;}
  #sub0303 .banner {display: none;}

  .fields {padding: 0 5vw 50px;}


  #footer .up {padding: 30px 20px;}
  #footer .up .ft_wrap {display: block;}
  #footer .up .left p {font-size: 14px;}
  #footer .up .ft_wrap .right {display: none;}
}



@media (max-width: 600px) {
  #main .section04 ul {display: block;}
  #main .section04 ul li {width: 100%; margin-bottom: 20px;}
}



@media (max-width: 425px) {
  #main .section01 .title h2 {font-size: 4vw;}
  #main .section01 .title h1 {font-size: 7vw;}
  #main .section01 .title h3 {font-size: 5vw;}
}