@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');



* {padding: 0; margin: 0; border: 0; box-sizing: border-box;}
li {list-style: none;}
a {text-decoration: none; color: inherit;}
img {vertical-align: top; max-width: 100%; filter: none;}
button {background-color: inherit; cursor: pointer; color: #000;}
html, body {font-family: 'Noto Sans KR', sans-serif; color: #000; overflow-x: hidden;}
li, input, select, button, textarea {font-family: 'Noto Sans KR', sans-serif;}




/* common */
.title {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px;}
.title p {font-size: 18px; line-height: 18px; color: #00a99d; text-align: center;}
.title h2 {font-size: 36px; line-height: 36px; font-weight: 500; color: #00a99d; text-align: center;}
.title.white_title p {color: #fff;}
.title.white_title h2 {color: #fff;}





/* header */
header {position: fixed; top: 0; left: 0; width: 100%; background-color: #fff;  box-shadow: 0px 10px 15px rgba(0,0,0,0.1); z-index: 1000;}
header .inner {max-width: 1280px; width: 100%; margin: 0 auto;}
header .inner .top {display: flex; justify-content: right; align-items: center; gap: 25px; height: 50px;}
header .inner .top > a {font-size: 21px; line-height: 21px; font-weight: 900; color: #2e3192;}
header .inner .top .sns_box {display: flex; align-items: center; gap: 15px;}
header .inner .top .sns_box a img {width: 35px; height: 35px;}
header .inner .bottom {display: flex; justify-content: space-between; align-items: flex-end; height: 70px;}
header .inner .bottom h1 {position: relative; top: -5px;}
header .inner .bottom h1 a img {width: 150px;}
header .inner .bottom .gnb {display: flex;}
header .inner .bottom .gnb li {width: 140px; height: 50px;}
header .inner .bottom .gnb li a {display: block; width: 100%; height: 100%; text-align: center; color: #999; line-height: 48px; font-size: 18px;}
header .inner .bottom .gnb li.active {background-color: #2e3192;}
header .inner .bottom .gnb li.active a {color: #fff; font-weight: 500;}
header .inner .bottom .gnb li:hover {background-color: #2e3192;}
header .inner .bottom .gnb li:hover a {color: #fff; font-weight: 500;}

.ham {position: absolute; top: 17.5px; right: 16px; width: 35px; cursor: pointer; display: none;}





/* aside */
aside {position: fixed; top: -100%; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 1001;}
aside .top {position: relative; width: 100%; height: 70px; display: flex; justify-content: center; align-items: center;}
aside .top img {width: 120px;}
aside .top .close {position: absolute; top: 17.5px; right: 16px; width: 35px; cursor: pointer;}
aside .gnb {display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); gap: 35px;}
aside .gnb li {font-size: 20px; line-height: 20px; font-weight: 700; color: #00a99d;}
aside .sns_box {position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px;}
aside .sns_box img {width: 35px;}






/* main_slide */
.main_slide {width: 100%; height: 650px; margin-top: 120px;}
.main_slide .swiper-slide {width: 100%; height: 100%;}
.main_slide .swiper-pagination {position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; align-items: center;}
.main_slide .swiper-pagination-bullet {width: 15px; height: 15px; border: 1px solid #fff; background-color: transparent; margin-right: 6px; opacity: 1;}
.main_slide .swiper-pagination-bullet:last-child {margin-right: 0px;}
.main_slide .swiper-pagination-bullet-active {background-color: #fff;}





/* company */
#company {width: 100%; padding: 100px 0;}
#company .title {margin-bottom: 100px;}
#company .contents {display: flex; justify-content: center; align-items: center; gap: 200px;}
#company .contents img {width: 200px;}
#company .contents .right {max-width: 705px; width: 100%;}
#company .contents .right h3 {font-size: 24px; line-height: 24px; color: #00a99d;}
#company .contents .right h2 {font-size: 48px; line-height: 48px; color: #00a99d; margin: 20px 0 40px;}
#company .contents .right p {font-size: 21px; line-height: 36px; color: #4d4d4d; word-break: keep-all;}





/* tech */
.tech {width: 100%; padding: 100px 0; background: linear-gradient(45deg, #22b573 0%,#2e3192 90%);}
.tech .inner {max-width: 1400px; width: 100%; margin: 0 auto;}
.tech .inner .title {margin-bottom: 60px;}


.number_contents {display: flex; justify-content: space-between; max-width: 1000px; width: 100%; margin: 0 auto;}
.number_contents .contents {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.number_contents .contents p {font-size: 24px; line-height: 24px; text-align: center; color: #fff; margin-bottom: 10px;}

.odometer {display: flex; justify-content: center; align-items: flex-end; color: #fff;}
.odometer .digit {font-size: 90px; width: 55px; height: 110px; line-height: 100px; overflow: hidden; font-weight: 900;}
.odometer .digit.text_box {font-size: 45px; width: 45px; line-height: 140px; font-weight: 700;}
.odometer .digit.digitDot {width: 32px;}
.odometer .digit.digitCom {width: 32px;}

.odometer.on .digit .digit-thousand {-webkit-animation: slide 5s 1 ease; animation: slide 5s 1 ease;}
.odometer.on .digit .digit-hundred {-webkit-animation: slide 5s 1 ease-out; animation: slide 5s 1  ease-out;}
.odometer.on .digit .digit-ten {-webkit-animation: slide 5s 1 ease-in-out; animation: slide 5s 1 ease-in-out;}
.odometer.on .digit .digit-one {-webkit-animation: slide 5s 1 linear; animation: slide 5s 1 linear;}


@-webkit-keyframes slide {
    0% {
        -webkit-transform: translateY(-10em);
    }
    40% {
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes slide {
    0% {
        transform: translateY(-10em);
    }
    40% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}


.number_contents_h2 {font-size: 18px; line-height: 18px; text-align: center; color: #fff; margin: 25px auto 40px;}


.swiper_inner {position: relative; width: 100%;}
.swiper_inner .btn_box {max-width: 1300px; width: 100%; position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);}
.swiper_inner .btn_box > img {position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; cursor: pointer;}
.swiper_inner .prev_btn {left: -40px;}
.swiper_inner .next_btn {right: -40px;}
.tech_slide {max-width: 1300px; width: 100%; margin: 0 auto;}
.tech_slide .swiper-slide {width: 240px;}
.tech_slide .swiper-slide img {width: 100%; height: 340px; object-fit: cover;}
.tech_slide .swiper-slide h2 {font-size: 18px; text-align: center; color: #fff; margin-top: 5px; word-break: keep-all;}





/* youtube */
#youtube {width: 100%; padding: 100px 0; background-color: #1a1a1a;}
#youtube .youyou {max-width: 1280px; width: 100%; margin: 50px auto 35px;}
#youtube .youyou div {position: relative; padding-bottom: 56.25%; overflow: hidden;}
#youtube .youyou div iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#youtube .inner > a {display: block; width: 240px; height: 80px; border-radius: 15px; background-color: #00a99d; color: #fff; text-align: center; line-height: 78px; font-size: 20px; font-weight: 500; margin: 0 auto;}





/* specific */
#specific {width: 100%; padding: 100px 0;}
#specific .inner {max-width: 1280px; width: 100%; margin: 0 auto;}
#specific .inner .specific {display: flex; justify-content: space-between; margin-top: 120px;}
#specific .inner .specific .left {max-width: 600px; width: 100%; padding-top: 30px;}
#specific .inner .specific .left h3 {font-size: 24px; line-height: 24px; color: #00a99d;}
#specific .inner .specific .left h2 {font-size: 48px; line-height: 48px; color: #00a99d; margin: 20px 0 40px;}
#specific .inner .specific .left p {font-size: 21px; line-height: 36px; color: #4d4d4d; word-break: keep-all;}

#specific .inner .specific .right {display: flex; flex-direction: row; flex-wrap: wrap; max-width: 520px; width: 100%; gap: 20px;}
#specific .inner .specific .right .contents {width: 250px; height: 250px; border-radius: 15px; border: 3px solid #00a99d; color: #00a99d; position: relative;}
#specific .inner .specific .right .contents h2 {position: absolute; top: 50px; left: 50%; transform: translateX(-50%); font-size: 24px; line-height: 24px; text-align: center; width: 100%;}
#specific .inner .specific .right .contents p {position: absolute; top: 90px; left: 50%; transform: translateX(-50%); font-size: 14px; line-height: 14px; font-weight: 500; text-align: center; width: 100%;}
#specific .inner .specific .right .contents img {position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); width: 122px; height: 80px;}





/* perforated */
.perforated {width: 100%; padding: 100px 0; background-color: #f2f2f2;}
.perforated .inner {max-width: 1280px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between;}
.perforated .inner .left {display: flex; gap: 30px;}
.perforated .inner .left .contents {width: 250px; color: #999; cursor: pointer; transition: all 0.3s;}
.perforated .inner .left .contents h2 {font-size: 24px; line-height: 24px; text-align: center; margin-bottom: 20px;}
.perforated .inner .left .contents img {width: 100%; height: 250px; border-radius: 50%;}
.perforated .inner .left .contents h3 {font-size: 18px; line-height: 18px; text-align: center; margin: 20px auto;}
.perforated .inner .left .contents p {font-size: 14px; line-height: 28px; text-align: center; word-break: keep-all;}
.perforated .inner .left .contents:hover {color: #2e3192;}

.perforated .inner .right h3 {font-size: 24px; line-height: 24px; color: #2e3192;}
.perforated .inner .right h2 {font-size: 48px; line-height: 48px; color: #2e3192; margin: 20px 0 40px;}
.perforated .inner .right p {font-size: 21px; line-height: 36px; color: #4d4d4d; word-break: keep-all;}





/* reference */
#reference {width: 100%; padding: 100px 0; background: linear-gradient(45deg, #22b573 0%,#2e3192 90%);}
#reference .contents_box {max-width: 1500px; width: 100%; margin: 60px auto 100px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 30px;}
#reference .contents_box .contents {width: 480px;}
/* #reference .contents_box .contents:nth-child(-n+6) {margin-bottom: 40px;} */
#reference .contents_box .contents img {width: 100%; height: 320px; border-radius: 15px; object-fit: cover;}
#reference .contents_box .contents .txt_box {display: flex; justify-content: space-between; align-items: center; padding: 0 20px; margin-top: 15px; color: #fff;}
#reference .contents_box .contents .txt_box h2 {font-size: 18px; width: calc(100% - 140px); position: relative; top: -1px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#reference .contents_box .contents .txt_box div {position: relative; width: 120px; height: 35px; border-radius: 5px; border: 1px solid #fff;}
#reference .contents_box .contents .txt_box div h3 {position: absolute; top: 7px; left: 50%; transform: translateX(-50%); font-size: 18px; line-height: 18px; text-align: center; width: 100%;}
#reference > a {display: block; width: 240px; height: 80px; border-radius: 15px; border: 2px solid #fff; color: #fff; text-align: center; line-height: 76px; font-size: 20px; font-weight: 500; margin: 0 auto;}

#reference .contents_box .contents.sub_refer .txt_box {color: #4d4d4d;}
#reference .contents_box .contents.sub_refer .txt_box div {border: 1px solid #4d4d4d;}
#reference > a.sub_refer_btn {background-color: #333; border: none;}

#notice .inner > a.sub_refer_btn {background-color: #333; border: none;}





/* sub - referance, notice */
.search_box {margin: 40px auto;}
.search_box p {font-size: 18px; line-height: 18px; color: #999; margin-bottom: 20px; text-align: center;}
.search_box div {display: flex; justify-content: center; align-items: center;}
.search_box div input {appearance: none; outline: none; width: 320px; height: 60px; border: 1px solid #ddd; border-right: none; padding: 0 20px;}
.search_box div button {display: flex; justify-content: center; align-items: center; background-color: #000; width: 60px; height: 60px;}

.cate_box {display: flex; justify-content: center; align-items: center; gap: 14px;}
.cate_box a {display: block; width: 100px; height: 36px; border-radius: 5px; border: 2px solid #00a99d; text-align: center; line-height: 32px; font-size: 14px; color: #00a99d;}
.cate_box a.on {background-color: #00a99d; color: #fff; font-weight: 700;}


.refer_detail {max-width: 1280px; width: 100%; margin: 120px auto 0;}
.refer_title {display: flex; justify-content: space-between; margin-bottom: 40px;}
.refer_title div {display: flex; gap: 30px; width: calc(100% - 160px);}
.refer_title div h2 {width: 120px; height: 36px; border: 1px solid #4d4d4d; border-radius: 5px; text-align: center; line-height: 34px; font-size: 18px;}
.refer_title div h3 {font-size: 24px; font-weight: 500; color: #4d4d4d; word-break: keep-all; width: calc(100% - 150px);}
.refer_title p {font-size: 24px; font-weight: 500; color: #4d4d4d; width: 160px; text-align: right;}
.refer_detail .contents img {display: block; margin: 30px auto;}
.refer_detail .contents p {font-size: 20px; line-height: 40px; font-weight: 500; color: #999; word-break: keep-all;}

.board_bottom {display: flex; justify-content: space-between; align-items: center; margin: 100px auto 0;}
.board_bottom a {display: block; width: 120px; height: 36px; border-radius: 5px; border: 1px solid #666; text-align: center; line-height: 33px; font-size: 16px; color: #4d4d4d;}


.board_title {display: flex; align-items: center; padding: 25px 20px; border-top: 2px solid #000; border-bottom: 1px solid #ccc; margin: 100px auto 40px;}
.board_title h2 {font-size: 24px; font-weight: 500; color: #4d4d4d; word-break: keep-all; width: calc(100% - 160px);}
.board_title p {font-size: 24px; font-weight: 500; color: #4d4d4d; width: 160px; text-align: right;}
.board_contents {padding: 0 3%;}
.board_contents .contents img {display: block; margin: 30px auto;}
.board_contents p {font-size: 20px; line-height: 40px; font-weight: 500; color: #999; word-break: keep-all;}
.board_contents div b {font-size: 20px; line-height: 40px; font-weight: 500; color: #999; word-break: keep-all;}
.attached {padding: 25px 20px; border-top: 2px solid #000; border-bottom: 2px solid #000; margin-top: 80px;}
.attached div {display: flex; align-items: center; gap: 20px;}
.attached div p {font-size: 18px; word-break: keep-all; position: relative; top: -1px;}











/* request */
#request {width: 100%; padding: 100px 0;}
#request .contents_box {max-width: 960px; width: 100%; margin: 100px auto 0; padding-bottom: 80px; border-bottom: 1px solid #1a1a1a;}
#request .contents_box .contents {display: flex; margin-bottom: 60px;}
#request .contents_box .contents:last-child {margin-bottom: 0;}
#request .contents_box .contents > h2 {font-size: 21px; line-height: 21px; width: 300px; color: #2e3192;}
#request .contents_box .contents > h2.light {font-weight: 400;}
#request .contents_box .contents.top_contents > h2 {position: relative; top: 22px;}
#request .contents_box .contents .right {width: calc(100% - 300px); display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap;}

#request .contents_box .contents .right input {outline: none; width: 100%; height: 70px; border: 1px solid #b3b3b3; background-color: #fff; border-radius: 5px; font-size: 16px; padding: 0 15px;}
#request .contents_box .contents .right input::placeholder {color: #b3b3b3;}
#request .contents_box .contents .right select {appearance: none; outline: none; width: 100%; height: 70px; border: 1px solid #b3b3b3; border-radius: 5px; font-size: 16px; color: #b3b3b3; padding-left: 15px; background: #fff url(../img/select-arrow.png) no-repeat 98%;}

#request .contents_box .contents .right button {width: 175px; height: 55px; border-radius: 5px; background-color: #2e3192; color: #fff; font-size: 21px; font-weight: 500;}
#request .contents_box .contents:last-child {align-items: center;}
#request .contents_box .contents:last-child .right {justify-content: space-between; align-items: center;}
#request .contents_box .contents:last-child .right .ch_box {width: auto;}
#request .contents_box .contents:last-child .right input[type="checkbox"] {appearance: none; outline: none; width: 25px; height: 25px; border: 1px solid #b3b3b3; border-radius: 0; padding: 0;}
#request .contents_box .contents:last-child .right input[type="checkbox"]:checked {background-color: #2e3192; border: 1px solid #2e3192;}
#request .contents_box .contents:last-child .right a {display: block; width: 175px; height: 55px; line-height: 53px; border-radius: 5px; background-color: #b3b3b3; color: #fff; font-size: 21px; font-weight: 500; text-align: center;}

#request .contents_box .contents .right label {display: flex; align-items: center; gap: 5px; width: 30%;}
#request .contents_box .contents .right.label04 label {width: 25%;}
#request .contents_box .contents .right label input[type="radio"] {appearance: none; outline: none; width: 25px; height: 25px; border: 1px solid #b3b3b3; border-radius: 0; padding: 0;}
#request .contents_box .contents .right label input[type="radio"]:checked {background-color: #2e3192; border: 1px solid #2e3192;}
#request .contents_box .contents .right label span {font-size: 21px; line-height: 21px; font-weight: 500; color: #b3b3b3; position: relative; top: -1px;}

#request .contents_box .three_contents {display: flex; justify-content: space-between;}
#request .contents_box .three_contents div:nth-child(1) {width: 270px;}
#request .contents_box .three_contents div:nth-child(2) {width: 460px;}
#request .contents_box .three_contents div:nth-child(3) {width: 170px;}
#request .contents_box .three_contents div h2 {font-size: 21px; line-height: 21px; color: #2e3192; margin-bottom: 20px;}
#request .contents_box .three_contents div input {outline: none; width: 100%; height: 70px; border: 1px solid #b3b3b3; border-radius: 5px; font-size: 16px; padding: 0 15px;}
#request .contents_box .three_contents div input::placeholder {color: #b3b3b3;}
#request .contents_box .three_contents div select {appearance: none; outline: none; width: 100%; height: 70px; border: 1px solid #b3b3b3; border-radius: 5px; font-size: 16px; color: #b3b3b3; padding-left: 15px; background: #fff url(../img/select-arrow.png) no-repeat 96%;}

#request .contents_box .contents .right .iconIn {position: relative; width: 310px; display: flex; justify-content: center; align-items: center;}
#request .contents_box .contents .right .iconIn img {position: absolute; top: 50%; left: 15px; transform: translateY(-50%);}
#request .contents_box .contents .right .iconIn input {padding: 0; padding-left: 55px; appearance: none;}
#request .contents_box .contents .right .iconIn input::-webkit-calendar-picker-indicator {position: absolute; right: -3000px; top: 0; transform: translateX(-10px); padding-left: 3000px; height: 100%;}

#request .submit {display: block; width: 240px; height: 80px; border-radius: 15px; border: 2px solid #333; font-size: 20px; font-weight: 500; margin: 60px auto 0;}





/* realtime */
.realtime {width: 100%; padding: 100px 0; background: linear-gradient(45deg, #22b573 0%,#2e3192 90%);}
.realtime .inner {max-width: 960px; width: 100%; margin: 0 auto;}
.realtime .inner .contents_box {width: 100%; margin: 50px auto 0;}
.realtime .inner .contents_box .contents {width: 100%; height: 60px; border: 1px solid #fff; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; padding: 0 50px; margin-bottom: 13px;}
.realtime .inner .contents_box .contents:last-child {margin-bottom: 0;}
.realtime .inner .contents_box .contents li {font-size: 18px; line-height: 18px; color: #fff; font-weight: 500; text-align: left;}
.realtime .inner .contents_box .contents li:nth-child(1) {width: 110px;}
.realtime .inner .contents_box .contents li:nth-child(2) {width: 70px;}
.realtime .inner .contents_box .contents li:nth-child(3) {width: 120px;}
.realtime .inner .contents_box .contents li:nth-child(4) {width: 60px;}
.realtime .inner .contents_box .contents li:nth-child(5) {width: 70px;}





/* network */
.network {position: relative; width: 100%; height: 620px;}
.network .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.55;}
.network .txt_box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; color: #fff;}
.network .txt_box p {font-size: 24px; line-height: 24px; margin-bottom: 15px;}
.network .txt_box h2 {font-size: 48px; line-height: 48px;}
.network .txt_box span {display: block; font-size: 20px; line-height: 20px; font-weight: 300; margin: 20px auto 40px;}
.network .txt_box a {display: block; width: 240px; height: 60px; border: 2px solid #fff; border-radius: 10px; font-size: 24px; line-height: 54px; font-weight: 500; margin: 0 auto;}





/* notice */
#notice {width: 100%; padding: 100px 0;}
#notice .inner {max-width: 1320px; width: 100%; margin: 0 auto;}
#notice .inner .notice_table {width: 100%; border-top: 2px solid #000; margin: 50px auto 0;}
#notice .inner .notice_table .top_table {display: flex; height: 80px; background-color: #f7f7f7; border-bottom: 1px solid #ccc;}
#notice .inner .notice_table .top_table li {height: 100%; line-height: 78px; text-align: center; font-size: 18px; width: 15%;}
#notice .inner .notice_table .top_table li:first-child {width: 70%;}
#notice .inner .notice_table .contents_table a {display: flex; width: 100%; height: 110px; border-bottom: 1px solid #ccc;}
#notice .inner .notice_table .contents_table a > div {display: flex; align-items: center; gap: 5px; width: 70%;}
#notice .inner .notice_table .contents_table a p {font-size: 18px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#notice .inner .notice_table .contents_table a span {display: flex; justify-content: center; align-items: center; font-size: 18px; line-height: 18px; text-align: center; width: 15%;}

.notice_pagination {display: flex; justify-content: center; align-items: center; margin: 70px auto 60px;}
.notice_pagination > a {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%;}
.notice_pagination > a img {width: 20px;}
.notice_pagination .num {display: flex;}
.notice_pagination .num a {display: block; width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 48px; font-size: 16px; color: #999;}
.notice_pagination .num a.on {background-color: #000; color: #fff;}

#notice .inner > a {display: block; width: 240px; height: 60px; background-color: #000; color: #fff; border-radius: 10px; font-size: 20px; line-height: 58px; font-weight: 500; margin: 0 auto; text-align: center;}





/* bottom_fix */
.bottom_fix {position: fixed; bottom: 0; left: 0; z-index: 500; width: 100%;}
.bottom_fix .top {width: 180px; height: 50px; border-radius: 10px 10px 0 0; background-color: #00a99d; color: #fff; line-height: 50px; text-align: center; font-size: 16px; font-weight: 500; margin: 0 auto; position: relative; top: 1px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); z-index: 99; cursor: pointer;}
.bottom_fix .bottom {width: 100%; height: 150px; background-color: #00a99d; position: relative; z-index: 100; display: flex; justify-content: center; align-items: center; height: 0;}
.bottom_fix .bottom .inner {max-width: 700px; width: 100%; margin: 0 auto; display: none;}
.bottom_fix .bottom .inner div {display: flex; justify-content: space-between; height: 50px;}
.bottom_fix .bottom .inner div input {width: 240px; height: 100%; background-color: #fff; border-radius: 10px; font-size: 16px; padding: 0 15px; outline: none;}
.bottom_fix .bottom .inner div button {width: 180px; height: 100%; background-color: #333; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 300;}
.bottom_fix .bottom .inner label {display: flex; gap: 5px; cursor: pointer; margin-top: 13px; padding-left: 10px;}
.bottom_fix .bottom .inner label input[type="checkbox"] {outline: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #fff;}
.bottom_fix .bottom .inner label input[type="checkbox"]:checked {background-color: #fff;}
.bottom_fix .bottom .inner label h2 {font-size: 14px; line-height: 14px; font-weight: 500; color: #fff; position: relative; top: -1px;}





/* mob_bottom_fix */
.mob_bottom_fix {position: fixed; bottom: 0; left: 0; z-index: 500; width: 100%; display: none;}
.mob_bottom_fix .top {width: 180px; height: 50px; border-radius: 10px 10px 0 0; background-color: #00a99d; color: #fff; line-height: 50px; text-align: center; font-size: 16px; font-weight: 500; margin: 0 auto; position: relative; top: 1px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); z-index: 99; cursor: pointer;}
.mob_bottom_fix .bottom {width: 100%; height: 280px; background-color: #00a99d; position: relative; z-index: 100; display: flex; justify-content: center; align-items: center; height: 0;}
.mob_bottom_fix .bottom .inner {max-width: 700px; width: 100%; margin: 0 auto; padding: 0 16px; display: none;}
.mob_bottom_fix .bottom .inner div {display: flex; flex-direction: column; gap: 10px;}
.mob_bottom_fix .bottom .inner div input {width: 100%; height: 50px; background-color: #fff; border-radius: 10px; font-size: 16px; padding: 0 15px; outline: none;}
.mob_bottom_fix .bottom .inner div button {display: block; width: 180px; height: 50px; background-color: #333; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 300; margin: 0 auto;}
.mob_bottom_fix .bottom .inner label {display: flex; justify-content: center; gap: 5px; cursor: pointer; margin-top: 13px; padding-left: 10px;}
.mob_bottom_fix .bottom .inner label input[type="checkbox"] {outline: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #fff; padding: 0;}
.mob_bottom_fix .bottom .inner label input[type="checkbox"]:checked {background-color: #fff;}
.mob_bottom_fix .bottom .inner label h2 {font-size: 14px; line-height: 14px; font-weight: 500; color: #fff; position: relative; top: -1px;}





/* footer */
footer {width: 100%; padding: 50px 0; background-color: #212121; position: relative; z-index: 501; color: #fff;}
footer .inner {display: flex; justify-content: center; align-items: flex-start; gap: 60px;}
footer .inner img {width: 80px;}
footer .inner .center {width: 400px;}
footer .inner .center .linked {display: flex; align-items: center; gap: 15px;}
footer .inner .center .linked a {font-size: 14px; line-height: 14px;}
footer .inner .center .linked span {display: block; width: 2px; height: 14px; background-color: #fff;}
footer .inner .center > i {display: block; width: 100%; height: 3px; background-color: #fff; margin: 15px 0;}
footer .inner .center .information {display: flex; flex-direction: row; flex-wrap: wrap; color: #9d9d9d;}
footer .inner .center .information p {font-size: 13px; line-height: 13px;}
footer .inner .center .information p:nth-child(2) {margin: 0 4px;}
footer .inner .center .information p:nth-child(4) {margin-top: 10px;}
footer .inner .right div {display: flex; align-items: center; margin-bottom: 10px;}
footer .inner .right div:last-child {margin-bottom: 0;}
footer .inner .right div h2 {font-size: 12px; line-height: 12px; width: 80px;}
footer .inner .right div p {font-size: 12px; line-height: 12px;}





.news-view{width: 100%; height:50px; line-height: 50px; box-sizing: border-box; border-top: 1px solid #999; border-bottom: 1px solid #ccc;  padding-left: 15px; color: #666;font-size: 14px;margin-top: 25px;}
.news-view::after{clear: both;content: '';display: block;}
.news-view .title{float: left; width: 70%; font-weight: 900;}
.info_wrap01{text-align: left; width: 650px;height: 605px; position: fixed;margin-left: -325px;margin-top: -300px;top: 50%;left: 50%;background: #fff;padding: 5px 15px;border-radius: 25px;z-index: 9999;background: #fff;display: none;border: 1px solid #333;box-sizing: border-box;}
.info_wrap02{text-align: left; width: 650px;height: 605px; position: fixed;margin-left: -325px;margin-top: -300px;top: 50%;left: 50%;background: #fff;padding: 5px 15px;border-radius: 25px;z-index: 9999;background: #fff;display: none;border: 1px solid #333;box-sizing: border-box;}
.info_wrap03{text-align: left; width: 650px;height: 605px; position: fixed;margin-left: -325px;margin-top: -300px;top: 50%;left: 50%;background: #fff;padding: 5px 15px;border-radius: 25px;z-index: 9999;background: #fff;display: none;border: 1px solid #333;box-sizing: border-box;}
.info_wrap04{text-align: left; width: 650px;height: 605px; position: fixed;margin-left: -325px;margin-top: -300px;top: 50%;left: 50%;background: #fff;padding: 5px 15px;border-radius: 25px;z-index: 9999;background: #fff;display: none;border: 1px solid #333;box-sizing: border-box;}
.info_wrap05{text-align: left; width: 650px;height: 605px; position: fixed;margin-left: -325px;margin-top: -300px;top: 50%;left: 50%;background: #fff;padding: 5px 15px;border-radius: 25px;z-index: 9999;background: #fff;display: none;border: 1px solid #333;box-sizing: border-box;}
.view-detail {width: 100%}
.info_close_btn {width: 20px; height: 20px; position: absolute; right: 25px; top: 47px; cursor: pointer;}
.info_close_btn img{ display: block;}
.news-view .title {display: block;}





























/* 반응형 시작 */
@media(max-width:1650px){

    

}

@media(max-width:1600px){

    #reference .contents_box {max-width: 1200px; margin: 60px auto; gap: 60px;}
    #reference .contents_box .contents {width: 360px;}
    #reference .contents_box .contents img {height: 240px;}
    #reference .contents_box .contents .txt_box {padding: 0;}
    #reference .contents_box .contents .txt_box h2 {width: calc(100% - 105px);}
    #reference .contents_box .contents .txt_box div {width: 100px;}

}

@media(max-width:1500px){

    

}

@media(max-width:1440px){

    #company {padding: 100px 16px;}
    .tech {padding: 100px 16px;}
    #youtube {padding: 100px 16px;}
    #specific {padding: 100px 16px;}
    .perforated {padding: 100px 16px;}
    #reference {padding: 100px 16px;}
    #request {padding: 100px 16px;}
    .realtime {padding: 100px 16px;}
    #notice {padding: 100px 16px;}


    .tech_slide {max-width: 1035px;}
    .swiper_inner .btn_box {max-width: 1035px;}

}

@media(max-width:1350px){

    header .inner .top {display: none;}
    header .inner .bottom .gnb {display: none;}
    header .inner .bottom h1 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    header .inner .bottom h1 {width: 120px; height: 35px;}
    header .inner .bottom h1 a img {width: 120px; height: 35px;}
    .ham {display: block;}


    .main_slide {height: 550px; margin-top: 70px;}
    .main_slide .swiper-pagination {bottom: 20px;}

}

@media(max-width:1240px){

    #reference .contents_box {max-width: 1000px; gap: 40px;}
    #reference .contents_box .contents {width: 480px;}
    #reference .contents_box .contents img {height: 320px;}
    #reference .contents_box .contents .txt_box {padding: 0;}
    #reference .contents_box .contents .txt_box h2 {width: calc(100% - 140px);}
    #reference .contents_box .contents .txt_box div {width: 120px;}


    .cate_box {max-width: 670px; flex-direction: row; flex-wrap: wrap; margin: 0 auto;}

}

@media(max-width:1200px){

    #company .contents {flex-direction: column; gap: 60px;}
    #company .contents .right {text-align: center;}


    .number_contents {max-width: 770px;}
    .odometer .digit {font-size: 60px; width: 40px; height: 70px; line-height: 65px;}
    .odometer .digit.digitDot {width: 25px;}
    .odometer .digit.digitCom {width: 25px; line-height: 58px;}

    .tech_slide {max-width: 770px;}
    .swiper_inner .btn_box {max-width: 770px;}


    #specific .inner .specific {flex-direction: column; justify-content: center; align-items: center; gap: 50px; margin-top: 60px;}
    #specific .inner .specific .left {padding: 0; text-align: center;}


    .perforated .inner {flex-direction: column; justify-content: center; align-items: center; gap: 60px;}
    .perforated .inner .right {text-align: center;}

}

@media(max-width:1100px){

    

}

@media(max-width:1080px){

    footer .inner {flex-direction: column; justify-content: center; align-items: center; gap: 25px; padding: 0 16px;}
    footer .inner .center .linked {justify-content: center;}
    footer .inner .center .information {flex-direction: column;}
    footer .inner .center .information p {margin-top: 10px; text-align: center;}
    footer .inner .center .information p:first-child {margin-top: 0;}
    footer .inner .center .information p:nth-child(2) {display: none;}
    footer .inner .right div {flex-direction: column;}
    footer .inner .right div h2 {width: auto; margin-bottom: 5px;}

    .network {height: 400px;}
    .network .txt_box p {font-size: 18px; line-height: 18px; margin-bottom: 10px;}
    .network .txt_box h2 {font-size: 30px; line-height: 30px;}
    .network .txt_box span {font-size: 14px; line-height: 14px; margin: 10px auto 20px;}
    .network .txt_box a {width: 160px; height: 40px; border-radius: 10px; line-height: 36px; font-size: 14px;}

}

@media(max-width:1053px){

    

}

@media(max-width:1024px){

    .main_slide {height: 450px;}


    #reference .contents_box {max-width: 750px; margin: 60px auto; gap: 30px;}
    #reference .contents_box .contents {width: 360px;}
    #reference .contents_box .contents img {height: 240px;}
    #reference .contents_box .contents .txt_box {padding: 0;}
    #reference .contents_box .contents .txt_box h2 {width: calc(100% - 105px);}
    #reference .contents_box .contents .txt_box div {width: 100px;}


    #request .contents_box .contents {flex-direction: column;}
    #request .contents_box .contents.contents_none {flex-direction: row;}
    #request .contents_box .contents > h2 {margin-bottom: 20px;}
    #request .contents_box .contents.top_contents > h2 {position: unset;}
    #request .contents_box .contents {margin-bottom: 60px;}
    #request .contents_box .three_contents {margin-bottom: 0;}
    #request .contents_box .three_contents div {margin-bottom: 60px;}
    #request .contents_box .three_contents div:nth-child(1) {width: 100%;}
    #request .contents_box .three_contents div:nth-child(2) {width: 100%;}
    #request .contents_box .three_contents div:nth-child(3) {width: 100%;}
    #request .contents_box .contents .right {width: 100%;}
    #request .contents_box .contents.contents_none .right {width: calc(100% - 300px);}
    #request .contents_box .contents.contents_none > h2 {margin-bottom: 0;}
    #request .contents_box .contents .right .iconIn {width: 49%;}

}

@media(max-width:939px){

    

} 

@media(max-width:926px){

    .number_contents {flex-direction: row; flex-wrap: wrap; max-width: 400px;}
    .number_contents .contents {width: 200px;}
    .number_contents .contents:nth-child(1) {margin-bottom: 30px;}
    .number_contents .contents:nth-child(2) {margin-bottom: 30px;}

    .tech_slide {max-width: 505px;}
    .swiper_inner .btn_box {max-width: 505px;}

} 

@media(max-width:854px){

    .main_slide {height: 400px;}

}

@media(max-width:810px){

    

}

@media(max-width:768px){

    .bottom_fix {display: none;}
    .mob_bottom_fix {display: block;}

    .info_wrap01 {width: 343px; margin: 0; transform: translate(-50%, -50%);}
    .info_wrap02 {width: 343px; margin: 0; transform: translate(-50%, -50%);}
    .info_wrap03 {width: 343px; margin: 0; transform: translate(-50%, -50%);}


    .title {gap: 10px;}
    .title p {font-size: 14px; line-height: 14px;}
    .title h2 {font-size: 24px; line-height: 24px;}


    .main_slide {height: 300px;}
    .main_slide .swiper-pagination {bottom: 10px;}
    .main_slide .swiper-pagination-bullet {width: 8px; height: 8px;}


    #company .title {margin-bottom: 60px;}
    #company .contents {gap: 40px;}
    #company .contents img {width: 100px;}
    #company .contents .right h3 {font-size: 18px; line-height: 18px;}
    #company .contents .right h2 {font-size: 28px; line-height: 28px; margin: 10px auto 25px;}
    #company .contents .right p {font-size: 14px; line-height: 28px;}


    .number_contents {max-width: 300px;}
    .number_contents .contents {width: 150px;}
    .number_contents .contents p {font-size: 16px; line-height: 16px;}
    .odometer .digit {font-size: 40px; width: 25px; height: 60px; line-height: 50px;}
    .odometer .digit.digitCom {font-size: 35px; width: 12px; line-height: 55px;}
    .odometer .digit.digitDot {font-size: 35px; width: 12px; line-height: 55px;}
    .number_contents_h2 {font-size: 14px; line-height: 14px;}
    .number_contents .contents:nth-child(1) {margin-bottom: 15px;}
    .number_contents .contents:nth-child(2) {margin-bottom: 15px;}


    #youtube .inner > a {width: 160px; height: 50px; border-radius: 10px; line-height: 48px; font-size: 14px;}


    #specific .inner .specific .left h3 {font-size: 18px; line-height: 18px;}
    #specific .inner .specific .left h2 {font-size: 28px; line-height: 28px; margin: 10px auto 25px;}
    #specific .inner .specific .left p {font-size: 14px; line-height: 28px;}

    #specific .inner .specific .right {max-width: 343px; gap: 15px;}
    #specific .inner .specific .right .contents {width: 164px; height: 164px;}
    #specific .inner .specific .right .contents h2 {font-size: 16px; line-height: 16px; top: 25px;}
    #specific .inner .specific .right .contents p {font-size: 12px; line-height: 12px; top: 50px;}
    #specific .inner .specific .right .contents img {width: 80px; height: 52px; bottom: 20px;}


    .perforated .inner .left {gap: 23px;}
    .perforated .inner .left .contents {width: 160px;}
    .perforated .inner .left .contents h2 {font-size: 20px; line-height: 20px; margin-bottom: 15px;}
    .perforated .inner .left .contents img {height: 160px;}
    .perforated .inner .left .contents h3 {font-size: 16px; line-height: 16px; margin: 15px auto 10px; letter-spacing: -1px;}
    .perforated .inner .left .contents p {font-size: 12px; line-height: 24px;}

    .perforated .inner .right h3 {font-size: 18px; line-height: 18px;}
    .perforated .inner .right h2 {font-size: 28px; line-height: 28px; margin: 10px auto 25px;}
    .perforated .inner .right p {font-size: 14px; line-height: 28px;}


    #reference .contents_box {max-width: 500px; gap: 20px;}
    #reference .contents_box .contents {width: 240px;}
    #reference .contents_box .contents img {height: 160px;}
    #reference .contents_box .contents .txt_box {padding: 0;}
    #reference .contents_box .contents .txt_box h2 {font-size: 12px; width: calc(100% - 70px);}
    #reference .contents_box .contents .txt_box div {width: 60px; height: 25px;}
    #reference .contents_box .contents .txt_box div h3 {font-size: 12px; line-height: 12px; top: 5px;}
    #reference > a {width: 160px; height: 50px; border-radius: 10px; line-height: 48px; font-size: 14px;}


    #request .submit {width: 160px; height: 50px; border-radius: 10px; line-height: 46px; font-size: 14px;}


    .realtime .inner .contents_box {margin: 35px auto 0;}
    .realtime .inner .contents_box .contents {padding: 0 15px;}
    .realtime .inner .contents_box .contents li {font-size: 12px;}
    .realtime .inner .contents_box .contents li:nth-child(1) {width: 75px;}
    .realtime .inner .contents_box .contents li:nth-child(2) {width: 50px;}
    .realtime .inner .contents_box .contents li:nth-child(3) {width: 80px;}
    .realtime .inner .contents_box .contents li:nth-child(4) {width: 45px;}
    .realtime .inner .contents_box .contents li:nth-child(5) {width: 50px;}


    .network {height: 350px;}


    #notice .inner .notice_table .top_table {height: 60px;}
    #notice .inner .notice_table .top_table li {line-height: 58px; font-size: 12px;}
    #notice .inner .notice_table .contents_table a {height: 80px;}
    #notice .inner .notice_table .contents_table a p {font-size: 12px; line-height: 12px;}
    #notice .inner .notice_table .contents_table a span {font-size: 12px; line-height: 12px;}
    #notice .inner .notice_table .contents_table a div img {width: 13px;}

    #notice .inner > a {width: 160px; height: 50px; border-radius: 10px; line-height: 48px; font-size: 14px;}


    .refer_detail {margin: 60px auto 0;}
    .refer_title div {gap: 10px; width: calc(100% - 120px);}
    .refer_title div h2 {width: 80px; height: 30px; font-size: 12px; line-height: 28px;}
    .refer_title div h3 {font-size: 18px; width: calc(100% - 90px);}
    .refer_title p {font-size: 18px; width: 115px;}

    .refer_detail .contents p {font-size: 14px; line-height: 28px;}


    .board_title h2 {font-size: 18px; width: calc(100% - 115px);}
    .board_title p {font-size: 18px; width: 115px;}
    .board_contents p {font-size: 14px; line-height: 28px;}
    .board_contents div b {font-size: 14px; line-height: 28px;}
    .attached div {gap: 10px;}
    .attached div img {width: 13px;}
    .attached div p {font-size: 14px;}


    
    #request .contents_box .contents.contents_none:last-child {flex-direction: column; align-items: unset;}
    #request .contents_box .contents.contents_none:last-child h2 {margin-bottom: 20px;}
    #request .contents_box .contents.contents_none .right {justify-content: space-between; width: 100%;}
    #request .contents_box .contents.contents_none:nth-last-child(2) {justify-content: space-between;}
    #request .contents_box .contents.contents_none:nth-last-child(2) .right {width: 175px;}
    #request .contents_box .contents.contents_none:nth-last-child(2) h2 {margin-bottom: 0;}

}

@media(max-width:710px){

    .cate_box {max-width: 430px; gap: 10px;}

}

@media(max-width:676px){

    

}

@media(max-width:630px){

    

}

@media(max-width:600px){

    .tech_slide {max-width: 240px;}
    .swiper_inner .btn_box {max-width: 240px;}


    #request .contents_box {margin: 50px auto 0; padding-bottom: 50px;}
    #request .contents_box .contents {margin-bottom: 40px;}
    #request .contents_box .three_contents div {margin-bottom: 40px;}

    #request .contents_box .contents > h2 {font-size: 16px;}
    #request .contents_box .three_contents div h2 {font-size: 16px; width: 150px;}
    #request .contents_box .contents .right label span {font-size: 13px; line-height: 13px;}
    #request .contents_box .contents.contents_none {justify-content: space-between;}
    #request .contents_box .contents.contents_none h2 {margin-bottom: 20px; width: auto;}
    #request .contents_box .contents.contents_none:last-child {flex-direction: column; align-items: unset;}
    #request .contents_box .contents.contents_none .right {justify-content: space-between; width: 100%;}
    #request .contents_box .contents.contents_none:nth-last-child(2) .right {width: 175px;}
    #request .contents_box .contents.contents_none:nth-last-child(2) h2 {margin-bottom: 0;}

    #request .contents_box .contents .right label input[type="radio"] {width: 20px; height: 20px;}
    #request .contents_box .contents:last-child .right input[type="checkbox"] {width: 20px; height: 20px;}

    #request .contents_box .three_contents div input {height: 50px; font-size: 13px;}
    #request .contents_box .three_contents div select {height: 50px; background: #fff url(../img/select-arrow.png) no-repeat 98%/20px; font-size: 13px;}
    #request .contents_box .contents .right select {height: 50px; background: #fff url(../img/select-arrow.png) no-repeat 98%/20px; font-size: 13px;}
    #request .contents_box .contents .right input {height: 50px; font-size: 13px;}

    #request .contents_box .contents .right button {font-size: 16px;}
    #request .contents_box .contents:last-child .right a {font-size: 16px;}

    #request .contents_box .contents .right .iconIn img {width: 20px;}
    #request .contents_box .contents .right .iconIn input {padding-left: 45px;}


    #notice .inner .notice_table .top_table li:first-child {width: 65%;}
    #notice .inner .notice_table .top_table li:last-child {width: 20%;}
    #notice .inner .notice_table .contents_table a span:last-child {width: 20%;}
    #notice .inner .notice_table .contents_table a > div {width: 65%;}


    .notice_pagination > a {width: 35px; height: 35px;}
    .notice_pagination .num a {width: 35px; height: 35px; line-height: 33px;}


    .refer_title {flex-direction: column; gap: 10px;}
    .refer_title div {width: 100%;}
    .refer_title p {margin-left: auto;}

}

@media(max-width:540px){

    .main_slide {height: 250px;}


    #reference .contents_box {max-width: 343px; gap: 13px;}
    #reference .contents_box .contents {width: 165px;}
    #reference .contents_box .contents img {height: 110px;}
    #reference .contents_box .contents .txt_box {flex-direction: column-reverse; gap: 5px; margin-top: 10px;}
    #reference .contents_box .contents .txt_box h2 {width: 100%;}

}

@media(max-width:480px){

    .main_slide {height: 200px;}


    .realtime .inner .contents_box .contents {padding: 0 10px; height: 50px;}
    .realtime .inner .contents_box .contents li {font-size: 10px;}
    .realtime .inner .contents_box .contents li:nth-child(1) {width: 65px;}
    .realtime .inner .contents_box .contents li:nth-child(2) {width: 35px;}
    .realtime .inner .contents_box .contents li:nth-child(3) {width: 65px;}
    .realtime .inner .contents_box .contents li:nth-child(4) {width: 35px;}
    .realtime .inner .contents_box .contents li:nth-child(5) {width: 40px;}


    .network {height: 300px;}


    #notice .inner .notice_table .top_table li {font-size: 10px;}
    #notice .inner .notice_table .contents_table a p {font-size: 10px; line-height: 10px;}
    #notice .inner .notice_table .contents_table a span {font-size: 10px; line-height: 10px;}
    #notice .inner .notice_table .contents_table a div img {width: 10px;}


    .search_box p {font-size: 14px; line-height: 14px;}
    .search_box div input {width: 240px;}


    .board_bottom a {width: 100px; font-size: 14px;}

}

@media(max-width:440px){

    footer .inner .center {width: 100%;}

}

@media(max-width:390px){



}