@charset "UTF-8";

@font-face {
  font-family: 'Noto+Sans+KR';
  src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* 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,button{margin:0;padding:0;word-break: keep-all;}
fieldset,img{border:0 none}
dl,ul,ol,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;font-size:100%}
button{border:0 none;background-color:transparent;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
body{-webkit-text-size-adjust:none} /* 뷰포트 변환시 폰트크기 자동확대 방지. */
input:checked[type='checkbox']{background-color:#666;-webkit-appearance:checkbox}
input[type='text'],input[type='password'],input[type='submit'],input[type='search'],input[type='tel'],input[type='email'],html input[type='button'],input[type='reset']{-webkit-appearance:none;border-radius:0}
input[type='search']::-webkit-search-cancel-button{-webkit-appearance:none}
body{background:#fff;-webkit-font-smoothing: antialiased;}
body,th,td,input,select,textarea,button{font-size:14px;line-height:1.5;font-family:'Noto Sans Kr', verdana, '돋움', '맑은 고딕','Pretendard',sans-serif;font-weight:bold;color:#444}
a{color:#000;text-decoration:none}
a:active, a:hover{text-decoration:none}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
html, body{height:100%;}

/*공통*/
.flx{display: flex;}
.flx-ct-ct{display: flex;align-items: center;justify-content: center;}
.flx-ct-btw{display: flex;align-items: center;justify-content: space-between;}
.flx-st-btw{display: flex;align-items: start;justify-content: space-between;}
.flx-btw{display: flex;justify-content: space-between;}
.flx-st{display: flex;align-items: start;}
.flx-column {display: flex;flex-direction: column;}

.gap50{gap: 50px;}

.w70p{width: 70%;}
.w72p{width: 72%;}
.w80p{width: 80%;}

.m0a{margin: 0 auto;}

.pc-cont{display: block;}
.m-cont{display: none;}

header{width: 100%;position: fixed;top: 0;z-index: 11;background: #fff;}
header > div{width: 90%;height: 70px;margin: 0 auto;border-bottom: 1px solid #dedede;}
header h1 {display: flex; align-items: center;}
header h1 img {width: 300px;}
header .goto {background: #fafafa;height: 20px;padding: 7px 10px;border-radius: 5px;border: 1px solid #9b9b9b;font-size: 13px;margin-top: 17px;}
.nav-inner {width: 500px;margin: 0 auto;display: flex;align-items: center;}
.nav-inner ul {width: 500px;display: flex;justify-content: space-between;}


.menu {margin-top: 16px;}

.menu > li {
  width: 150px; /*20*5=100%*/
  float: left;
  text-align: center;
  line-height: 40px;
}

.menu a {
  color: #000;
}

.submenu > li {
  line-height: 50px;
  background-color: #fff;
}

.submenu {
  height: 0; /*ul의 높이를 안보이게 처리*/
  overflow: hidden;
}
.menu > li:hover {
  background-color: #fff;
  transition-duration: 0.5s;
}

.menu > li:hover .submenu {
  height: 100px; /*서브메뉴 li한개의 높이 50*5*/
  transition-duration: 1s;}

.menu > li:nth-child(1):hover .submenu {
  height: 50px !important; /*서브메뉴 li한개의 높이 50*5*/
  transition-duration: 1s;}

/*본문*/
.contents {margin-top: 70px;background: #f7f7fd;}

section h3{border-bottom: 1px solid #d2d2e6;padding-bottom: 35px;line-height: 45px;margin-bottom: 150px !important;text-align: center;}
section h3 p{font-size: 45px;color:#000;font-family: "IBM Plex Sans KR", sans-serif;}
section h3 span{font-size: 14px;font-weight: 500;letter-spacing: 1px;color: #00d5fd;}

.section01 {height: 100%;position: relative;}
.section01 .visual-content {width: 100%;background: url(../images/vi-img.jpg) no-repeat 50% 0%;background-size: cover;height: 100vh;}
.section01 .txt-inner {color: #fff;width: 80%;margin: 0 auto;position: relative;top: calc(50% - 100px);transform: translateY(-50%);}
.section01 .txt-inner p{font-size: 20px;font-weight: 300;margin-bottom: 30px;line-height: 55px;color: #f17b22;}
.section01 .txt-inner p strong{font-size: 50px;font-family: 'IBM Plex Sans KR', sans-serif;color: #fff;line-height: 90px;}
.section01 .txt-inner p strong img{width: 215px;}
.section01 .txt-inner span{font-size: 20px;font-weight: 300;line-height: 45px;}

.section01 .kpti-info {margin-top: 50px;}
.section01 .kpti-info p{color: #fff;font-size: 16px;font-weight: 500;line-height: 30px;}
.section01 .kpti-info p strong{font-size: 25px;line-height: 30px;letter-spacing: 2px;}


.section02 {padding: 150px 0 100px 0; background: url(../images/process-bg.jpg) no-repeat 50%;background-size: cover;}
.section02 h3{border-bottom: 1px solid #475063;}
.section02 h3 span{color:#f17b22;}
.section02 h3 p{color:#fff;}
/* .section02 div{gap: 5px;display: grid;} */
.section02 div div .cont-box{}
/*.section02 div div .cont-box:nth-child(1){border-left: 2px solid #16cbeb;position: relative;}
 .section02 div div .cont-box:nth-child(1)::after{content: '';position: absolute;top: 90px;left: 0;background: url('../images/section03-arrow.png') no-repeat 0;background-size:100%; width: 100%;height: 300px;} */
.section02 div div .cont-box:nth-child(2){border-left: 2px solid #164feb;}
.section02 div .cont-box img{width: 100%;}

.process-cont > div{width: 35%;}
.process-cont > div p{font-size: 22px;font-weight: 400;line-height: 38px;color: #fff;margin-top: 40px;}
.process-cont > div > .flx-st{gap: 30px;}
.process-cont > div > .flx-st img {width: 40%; position: relative;}
.process-cont > div > .flx-st img:nth-child(2){width: 30%;}
.process-cont > div > .flx-st img:nth-child(1)::before {content: ''; width: 1px; height: 30px;background: #fff;position: absolute;top: 0; left: 0;}
.section02 .process-cont .process-box {width: 65%;background: rgba(0, 0, 0, 0.5);border-radius: 20px;backdrop-filter: blur(7px);padding: 30px;}
.section02 .process-cont .process-box img{width: 100%;}


.section03 {padding: 150px 0 100px 0;background: #f17b22 url(../images/section-bg.png) no-repeat 50% 0;}
.section03 h3{border-bottom: 1px solid #f5a263;}
.section03 h3 span{color:#1c305c;}
.section03 h3 p{color:#fff;}
.section03 .cont-box{padding: 0;}
.section03 .cont-box > p {margin-bottom: 50px;font-size: 22px; font-weight: 400; text-align: center; color: #fff;}
.section03 .cont-box div img{width: 100%;}



.section04{border: 20px solid;border-image: linear-gradient(to right, #1c305c 50%, #f17f29 50%);border-image-slice: 1;padding: 150px 0 100px 0;}
.section04 h3{border-bottom: 1px solid #d2d2e6;}
.section04 h3 span{color:#f17b22;}
.section04 h3 p{color:#1c305c;}
.section04 > div > div {display: grid;gap: 200px;}
.section04 .cont-box h4{font-size: 35px;color:#2d2d2d;font-family: "IBM Plex Sans KR", sans-serif;position: relative;}
.section04 .cont-box p{font-size: 27px;font-weight: 300;color: #6b6b6b;margin: 30px 0 50px;}
.section04 .cont-box > div > div{display: flex;flex-direction: column;font-size: 18px;font-weight: 400;line-height: 35px;}
.section04 .cont-box{display: flex;}
.section04 .cont-box > div{width: 50%;}
.section04 > div > div .cont-box:nth-child(1) h4::before{content: '01';background: #1c305c;color: #fff;width: 50px;height: 50px;position: absolute;top: -55px;left: 0;
  border-radius: 60px;font-size: 16px;display: flex;align-items: center;justify-content: center;}
.section04 > div > div .cont-box:nth-child(2) h4::before{content: '02';background: #f17f29;color: #fff;width: 50px;height: 50px;position: absolute;top: -55px;left: 0;
  border-radius: 60px;font-size: 16px;display: flex;align-items: center;justify-content: center;}
.section04 > div > div .cont-box:nth-child(3) h4::before{content: '03';background: #1c305c;color: #fff;width: 50px;height: 50px;position: absolute;top: -55px;left: 0;
  border-radius: 60px;font-size: 16px;display: flex;align-items: center;justify-content: center;}
.section04 > div > div .cont-box:nth-child(4) h4::before{content: '04';background: #f17f29;color: #fff;width: 50px;height: 50px;position: absolute;top: -55px;left: 0;
  border-radius: 60px;font-size: 16px;display: flex;align-items: center;justify-content: center;}
.section04 .cont-box > div > img{width:calc(100% - 20px);border: 10px solid #e7e7ee;}

footer {
    position: relative;
    min-width: auto;
    background-color: #303030;;
}
footer p{color: #fff;font-size: 14px;font-weight: 300;line-height: 30px;text-align: center;width: 100%;}
footer .ft-company-info {width: 100%;border-top: 1px solid #6f798e;display: flex;justify-content: center;padding: 20px 0;}
footer .ft-company-info p span {position: relative;margin: 0 20px;}
footer .ft-company-info p span:after {content: "";width: 1px;height: 17px;background: #6d7992;position: absolute;top: 5px;left: -2px;}





/*반응형*/
@media screen and (max-width: 1920px) {
  .section01 .item {top: 80%;}
  .blog-slider__img {width: 50%;}
  .blog-slider__pagination {right: calc(50% - 235px);}
}

@media screen and (max-width: 1400px) {
  .section01 .video-box {width: 100%;}
  .section01 .item {top: 80%;}
  .blog-slider__img {width: 60%;}
  .blog-slider__pagination {right: calc(50% - 235px);top: -150px;}
  .blog-slider__content {margin: 0 0 0 40px;}
  .color-textbox {left: -270px;}
  .section04 .footer-list-box {padding: 20px;}
  .section04 .procedure-box div {width: 100%;gap: 20px;}
  .section04 .procedure-box {padding: 10px;}
  .qr ul {gap: 20px;}
  .qr ul li div {width: 70px;}
  .qr ul li div img{width: 70px;}
}

@media screen and (max-width: 1024px) {
  .w80p {width: 95%;}
  section h3 {padding-bottom: 20px;line-height: 35px;margin-bottom: 20px !important;}
  section h3 p {font-size: 30px;}
  section h3 span {font-size: 12px;}

  .nav-inner ul{display: none;}

  header h1 {/*position: absolute;*/}

  .section01 {}
  .section01 .visual-content {background: url(../images/vi-m-img.jpg) no-repeat 50% 50%;background-size: cover;}
  .section01 .item {display: none;}
  .section01 .txt-inner {top: 50%;transform: translateY(-50%);left: 10px;}
  .section01 .txt-inner p {font-size: 11px;line-height: normal;margin-bottom: 10px;}
  .section01 .txt-inner p strong {font-size: 17px;}
  .section01 .txt-inner span {font-size: 13px;font-weight: 300;line-height: 25px;}

  .section01 .video-box {width: 90%;top: 190px;}
  .section01 .video-box > div {display: block;}
  .section01 .video-box > div > div {border: 1px solid #09142b;border-radius: 10px;}
  .section01 .video-box > div > div:nth-child(1) {width: 100%;}
  .section01 .video-box > div > div:nth-child(2) {width: 24%;position: absolute;top: 50px;right: 0;}
  .section01 .video-box p {font-size: 20px;}
  .section01 .video-box p span {font-size: 14px;}

  .section02 {display: block;padding: 10px 0;}
  .section02 .m-flx{display: flex;}
  .section02 div div .cont-box {}
  /* .section02 div div .cont-box:nth-child(1) {border-left: 0;border-top: 2px solid #16cbeb;}
  .section02 div div .cont-box:nth-child(2) {border-left: 0;border-top: 2px solid #164feb;} */

  .section03 .function b {font-size: 20px;}
  .section03 .function-txtbox p {font-size: 22px;font-weight: bold;}
  .section03 .function .tab-box {padding: 80px 10px;}
  .section03 .function-txtbox {margin-top: 50px;}
  .section03 .function-txtbox span {margin-bottom: 10px;}

  .section03 .system b{font-size: 20px;}
  .section03 .system-txtbox p {font-size: 22px;font-weight: bold;}
  .section03 .system .tab-box {padding: 80px 10px;}
  .section03 .system-txtbox {margin-top: 50px;}
  .section03 .system-txtbox span {margin-bottom: 10px;}

  .section03 .push-box > p{font-size: 17px;font-weight: 500;}
  .section03 .push-box ul {display: grid;gap: 30px;}

  .tab_item {width: calc(70% / 2);height: 40px;line-height: 40px;}
  .tab_content {padding: 20px 0px 0;}

  .section04 h3 {margin-bottom: 70px !important;}
  .section04 > div > div {gap: 100px;}
  .section04 .txt-inner p {font-size: 22px;}
  .section04 .cont-box {gap: 10px;display: grid;}
  .section04 .cont-box > div {width: 100%;}
  .section04 .cont-box h4 {font-size: 20px;}
  .section04 .cont-box p {font-size: 17px;margin: 10px 0 10px;}
  .section04 .cont-box > div > div {font-size: 14px;line-height: 25px;}
  .section04 .cont-box > div > img {width: calc(100% - 10px);border: 5px solid #e7e7ee;}

  .section04 .footer-list-box {display: block;padding: 20px;}
  .section04 .footer-list-box .flx{display: block;}
  .qr {margin: 20px 0;margin-right: 0px;}
  .qr ul {gap: 0px;}
  .qr ul li {width: 33.333%;}
  .qr ul li p {font-size: 14px;font-weight: 500;margin-bottom: 5px;}
  .qr ul li div {padding: 3px;border: 1px solid #bdbdbd;border-radius: 5px;width: 33.33333%;}
  .qr ul li div img{width: 100%;}

  footer p {font-size: 13px;}
  footer .ft-company-info p span {margin: 0 5px;}
  footer .ft-company-info p span:after {height: 11px;background: #6b6b6b;top: 5px;}
}


@media screen and (max-width: 800px) {

  .w80p {width: 95%;}
  section h3 {padding-bottom: 20px;line-height: 35px;margin-bottom: 20px !important;}
  section h3 p {font-size: 30px;}
  section h3 span {font-size: 12px;}

  .nav-inner ul{display: none;}

  header h1 {/*position: absolute;*/}

  .section01 {}
  .section01 .item {display: none;}
  .section01 .txt-inner {top: 50%;transform: translateY(-50%);left: 10px;}
  .section01 .txt-inner p {font-size: 11px;line-height: normal;margin-bottom: 10px;}
  .section01 .txt-inner p strong {font-size: 17px;}
  .section01 .txt-inner span {font-size: 13px;font-weight: 300;line-height: 25px;}

  .section01 .video-box {width: 90%;top: 190px;}
  .section01 .video-box > div {display: block;}
  .section01 .video-box > div > div {border: 1px solid #09142b;border-radius: 10px;}
  .section01 .video-box > div > div:nth-child(1) {width: 100%;}
  .section01 .video-box > div > div:nth-child(2) {width: 24%;position: absolute;top: 50px;right: 0;}
  .section01 .video-box p {font-size: 20px;}
  .section01 .video-box p span {font-size: 14px;}

  .section02 {display: block;padding: 10px 0;}
  .section02 .m-flx{display: flex;}
  .section02 div div .cont-box {}
  /* .section02 div div .cont-box:nth-child(1) {border-left: 0;border-top: 2px solid #16cbeb;}
  .section02 div div .cont-box:nth-child(2) {border-left: 0;border-top: 2px solid #164feb;} */

  .section03 .function b {font-size: 20px;}
  .section03 .function-txtbox p {font-size: 22px;font-weight: bold;}
  .section03 .function .tab-box {padding: 80px 10px;}
  .section03 .function-txtbox {margin-top: 50px;}
  .section03 .function-txtbox span {margin-bottom: 10px;}

  .section03 .system b{font-size: 20px;}
  .section03 .system-txtbox p {font-size: 22px;font-weight: bold;}
  .section03 .system .tab-box {padding: 80px 10px;}
  .section03 .system-txtbox {margin-top: 50px;}
  .section03 .system-txtbox span {margin-bottom: 10px;}

  .section03 .push-box > p{font-size: 17px;font-weight: 500;}
  .section03 .push-box ul {display: grid;gap: 30px;}

  .tab_item {width: calc(70% / 2);height: 40px;line-height: 40px;}
  .tab_content {padding: 20px 0px 0;}

  .section04 h3 {margin-bottom: 70px !important;}
  .section04 > div > div {gap: 100px;}
  .section04 .txt-inner p {font-size: 22px;}
  .section04 .cont-box {gap: 10px;display: grid;}
  .section04 .cont-box > div {width: 100%;}
  .section04 .cont-box h4 {font-size: 20px;}
  .section04 .cont-box p {font-size: 17px;margin: 10px 0 10px;}
  .section04 .cont-box > div > div {font-size: 14px;line-height: 25px;}
  .section04 .cont-box > div > img {width: calc(100% - 10px);border: 5px solid #e7e7ee;}

  .section04 .footer-list-box {display: block;padding: 20px;}
  .section04 .footer-list-box .flx{display: block;}
  .qr {margin: 20px 0;margin-right: 0px;}
  .qr ul {gap: 0px;}
  .qr ul li {width: 33.333%;}
  .qr ul li p {font-size: 14px;font-weight: 500;margin-bottom: 5px;}
  .qr ul li div {padding: 3px;border: 1px solid #bdbdbd;border-radius: 5px;width: 33.33333%;}
  .qr ul li div img{width: 100%;}

  footer p {font-size: 13px;}
  footer .ft-company-info p span {margin: 0 5px;}
  footer .ft-company-info p span:after {height: 11px;background: #6b6b6b;top: 5px;}
}


@media screen and (max-width: 450px) {
  .pc-cont{display: none;}
  .m-cont{display: block;}

  .w80p {width: 95%;}
  .w70p {width: 90%;}
  section h3 {padding-bottom: 20px;line-height: 35px;margin-bottom: 20px !important;}
  section h3 p {font-size: 30px;}
  section h3 span {font-size: 12px;}

  .nav-inner ul{display: none;}

  header h1 {/*position: absolute;*/}

  header h1 img {width: 200px;}

  .section01 {}
  .section01 .item {display: none;}
  .section01 .txt-inner {top: 50%;transform: translateY(-50%);width: 90%;}
  .section01 .txt-inner p {font-size: 13px;line-height: normal;margin-bottom: 10px;}
  .section01 .txt-inner p strong {font-size: 25px;line-height: 40px;}
  .section01 .txt-inner p strong img {width: 85px;}
  .section01 .txt-inner span {font-size: 15px;font-weight: 300;line-height: 25px;}

  .section01 .video-box {width: 90%;top: 190px;}
  .section01 .video-box > div {display: block;}
  .section01 .video-box > div > div {border: 1px solid #09142b;border-radius: 10px;}
  .section01 .video-box > div > div:nth-child(1) {width: 100%;}
  .section01 .video-box > div > div:nth-child(2) {width: 24%;position: absolute;top: 50px;right: 0;}
  .section01 .video-box p {font-size: 20px;}
  .section01 .video-box p span {font-size: 14px;}

  .section02 {display: block;padding: 10px 0;height: 100vh;}
  .section02 .m-flx .flx-st-btw{display: block;}
  .section02 .process-cont > div {width: calc(100% - 20px) !important;padding: 10px !important;}
  .section02 div div .cont-box {padding: 10px;}
  /* .section02 div div .cont-box:nth-child(1) {border-left: 0;border-top: 2px solid #16cbeb;}
  .section02 div div .cont-box:nth-child(2) {border-left: 0;border-top: 2px solid #164feb;} */

  .process-cont > div p {font-size: 15px;margin-top: 15px;line-height: 26px;}

  .section03 {padding: 20px 0 100px 0;}
  .section03 .function b {font-size: 20px;}
  .section03 .function-txtbox p {font-size: 22px;font-weight: bold;}
  .section03 .function .tab-box {padding: 80px 10px;}
  .section03 .function-txtbox {margin-top: 50px;}
  .section03 .function-txtbox span {margin-bottom: 10px;}

  .section03 .system b{font-size: 20px;}
  .section03 .system-txtbox p {font-size: 22px;font-weight: bold;}
  .section03 .system .tab-box {padding: 80px 10px;}
  .section03 .system-txtbox {margin-top: 50px;}
  .section03 .system-txtbox span {margin-bottom: 10px;}

  .section03 .push-box > p{font-size: 17px;font-weight: 500;}
  .section03 .push-box ul {display: grid;gap: 30px;}
  .section03 .cont-box {background-size: 380%;}

  .tab_item {width: calc(70% / 2);height: 40px;line-height: 40px;}
  .tab_content {padding: 20px 0px 0;}

  .section04 h3 {margin-bottom: 70px !important;}
  .section04 > div > div {gap: 100px;}
  .section04 .txt-inner p {font-size: 22px;}
  .section04 .cont-box {gap: 10px;display: grid;}
  .section04 .cont-box > div {width: 100%;}
  .section04 .cont-box h4 {font-size: 20px;}
  .section04 .cont-box p {font-size: 17px;margin: 10px 0 10px;}
  .section04 .cont-box > div > div {font-size: 14px;line-height: 25px;}
  .section04 .cont-box > div > img {width: calc(100% - 10px);border: 5px solid #e7e7ee;}

  .section04 .footer-list-box {display: block;padding: 20px;}
  .section04 .footer-list-box .flx{display: block;}
  .qr {margin: 20px 0;margin-right: 0px;}
  .qr ul {gap: 0px;}
  .qr ul li {width: 33.333%;}
  .qr ul li p {font-size: 14px;font-weight: 500;margin-bottom: 5px;}
  .qr ul li div {padding: 3px;border: 1px solid #bdbdbd;border-radius: 5px;width: 33.33333%;}
  .qr ul li div img{width: 100%;}

  footer p {font-size: 13px;}
  footer .ft-company-info p span {margin: 0 5px;}
  footer .ft-company-info p span:after {height: 11px;background: #6b6b6b;top: 5px;}
}