@charset "UTF-8";  

html {scroll-behavior: smooth;}
body {width: 100%;height: 100%;}
.header {width: 100%;height: 100px;background-color: #383554;position: sticky;top: 0; z-index: 100;}
.header .inner {width:95%;height:100%;margin: 0 auto;display: flex;align-items: center;}
.header .inner .logo {display: flex;align-items: center;}
.header .inner .logo h1 {font-size: 24px;color: #fff;margin-left:10px;}
.header .inner .logo .logo-img {width: 37px;height: 39px;margin-right:12px;object-fit: contain;}
.header .inner .logo .logo-text {width: 157px;height: 18px;object-fit: contain;}
.header .inner .nav {padding-left: 150px;}
.header .inner .nav ul {display: flex;}
.header .inner .nav ul li a {display: inline-block; position:relative; font-size: 18px; color: #fff; margin-left: 30px;}
.header .inner .nav ul li a::after {content: '';width: 0%;left: 50%;height: 3px;display: block;position: absolute;margin-top: 3px;border-bottom: 3px solid #fff;transition:all .3s ease;}
.header .inner .nav ul li a:hover::after {content: '';width: 100%;left: 0px;height: 3px;display: block;position: absolute;margin-top: 3px;border-bottom: 3px solid #fff;transition:all .3s ease;}
.header .inner .nav input[type=checkbox] {display: none;cursor: pointer;}
/* 회사소개 */
article {width: 100%;height: 100%; position: relative;}
article #company {position:relative;width: 100%; height: 400px;}
article #company .inner_bg {width: 100%;height: 100%;}
article #company .inner_bg img{width: 100%;height: 100%;filter: brightness(35%);object-fit: cover;}
article #company .line{position:absolute;top: 50px; width: 300px;height: 5px; background-color: #fff;}
article #company .title {padding:0 75px; position: absolute;top: 20%; box-sizing: border-box;} 
article #company .title h1 {position:relative;margin-bottom:50px;color:#fff; font-size: 24px;font-weight: 600;}
article #company .title h1:after {content: '';width: 100px;top:30px;left: 0;height: 2px;display: block;position: absolute;border-bottom: 2px solid #fff;transition:all .3s ease;}
article #company .title p {color: #fff; font-size: 18px;margin-bottom: 10px;}
article #company .title p span {font-size:20px; font-weight: bold; padding-right: 2px;}
/* 사업분야 */
article #business {position:relative; width: 100%; background-color: #263553;}
article #business .line {position:absolute;top: 50px; width: 300px;height: 5px; background-color: #3B497D;}
article #business .inner {padding:50px 75px; box-sizing: border-box;}
article #business .inner .title h1 {position:relative;margin-top:40px;margin-bottom:15px;color:#fff; font-size: 24px;font-weight: 600;}
article #business .inner .title h1:after {content: '';width: 100px;top:30px;left: 0;height: 2px;display: block;position: absolute;border-bottom: 2px solid #fff;transition:all .3s ease;}
article #business .inner .title span {color: #fff;font-size: 16px;}
article #business .inner .text-list {width: 100%;margin-top:40px ; display: flex;  gap: 20px 2%; justify-content: space-between;  flex-wrap: wrap;}
article #business .inner .text-list .text-item {display:flex;align-items: center;justify-content: center; width: calc(33.3333% - 30px);height: 155px;padding: 20px;margin-bottom: 15px;background-color: #020C39;box-sizing: border-box;border-radius: 5px;}
article #business .inner .text-list .text-item div {display: flex;align-self: center;}
article #business .inner .text-list .text-item p {display:block;color: #fff;font-size: 16px;text-align: center;word-break: keep-all;}
article #business .inner .text-list .text-item p span {display: inline-block;}
/* list-progress_bar */
article #business .inner .list-box {width: 100%; display: flex; margin-top:30px; gap: 20px 2%; justify-content: space-between; flex-wrap: wrap;}
article #business .inner .list-box li {width: calc(25% - 70px); padding: 20px; background-color: #fff; border-radius: 5px;}
article #business .inner .list-box li .title {height: 40px; display: block;padding-bottom:25px;font-size: 18px;font-weight: 600;text-align: center;word-break: keep-all;}
article #business .inner .list-box li .sub {display: block;height: 30px;font-size: 18px;text-align: center;word-break: keep-all;}
article #business .inner .list-box li .circular-progress {display: flex;align-items: center;justify-content: center; position: relative;height: 100px;width: 100px;border-radius: 50%;background: conic-gradient(#74B1FA 3.6deg, #dedede 0deg);margin: 20px auto 0;}
article #business .inner .list-box li .circular-progress1 {background-color: #79CCF3;}
article #business .inner .list-box li .circular-progress::before {content:""; position:absolute; width: 80px;height: 80px;background-color: #fff;border-radius: 50%;}
article #business .inner .list-box li .circular-progress .progress-value {position: relative; font-size: 20px;font-weight: 600;color: #333;}
/* 주력사업 */
article #main-business {position:relative;width: 100%; height: 510px;}
article #main-business .inner_bg {width: 100%;height: 100%;}
article #main-business .inner_bg img{width: 100%;height: 100%;filter: brightness(30%);object-fit: cover;}
article #main-business .line{position:absolute;top: 50px; width: 300px;height: 5px; background-color: #fff;}
article #main-business .content {width: 100%;}
article #main-business .content .title {padding:0 75px; position: absolute;top: 25%; box-sizing: border-box;} 
article #main-business .content .title h1 {position:relative;margin-bottom:50px;color:#fff; font-size: 24px;font-weight: 600;}
article #main-business .content .title h1:after {content: '';width: 100px;top:30px;left: 0;height: 2px;display: block;position: absolute;border-bottom: 2px solid #fff;transition:all .3s ease;}
article #main-business .content .title p {color: #fff; font-size: 20px;margin-bottom: 10px;}
article #main-business .content .title .qr-link {display: flex;align-items: end;margin-top: 50px;}
article #main-business .content .title .qr-link .app-qr-img { width:100px;height: 100px;margin-right: 15px;}
article #main-business .content .title .qr-link .app-qr-img img {width: 100%; height: 100%; object-fit: contain;}
article #main-business .content .title .qr-link a {display: inline-block; height: 48px; background-color: white; padding: 15px 20px; border-radius: 5px; box-sizing: border-box;}
article #main-business .content .imgbox {display: flex;}
article #main-business .content .imgbox .nodazi-logo {position: absolute; top:30%; right: 75px; width: 185px;height: 185px;}
article #main-business .content .imgbox .nodazi-logo .bg {display: flex;flex-direction: column; align-items: center;justify-content: center; width: 100%;height: 100%;background-color: #433C2A;border-radius: 5px;}
article #main-business .content .imgbox .nodazi-logo .bg img {width: 90px;height: 90px;object-fit: contain;}
article #main-business .content .imgbox .nodazi-logo .bg span {margin-top: 8px; font-size: 22px;color:#fff;font-weight: bold;}

/* contact */
article #contact {position:relative; width: 100%; background-color: #fff;}
article #contact .line {position:absolute;top: 50px; width: 300px;height: 5px; background-color: #3B497D;}
article #contact .inner {padding:50px 75px; box-sizing: border-box;}
article #contact .inner .title h1 {position:relative;margin-top:40px;margin-bottom:15px;color:#000; font-size: 24px;font-weight: 600;}
article #contact .inner .title h1:after {content: '';width: 150px;top:30px;left: 0;height: 2px;display: block;position: absolute;border-bottom: 2px solid #000;transition:all .3s ease;}
article #contact .inner .contact-container {width: 100%;display: flex;margin-top: 50px;}
article #contact .inner .contact-container .mapbox {width: 50%;height: 400px;}
article #contact .inner .contact-container .mapbox img {width: 100%;height: 100%; object-fit: cover;}
article #contact .inner .contact-container .information {margin-left:50px;width:50%;display: flex;flex-direction: column;justify-content: space-between;}
article #contact .inner .contact-container .information .text-content div {margin-bottom: 10px;}
article #contact .inner .contact-container .information .text-content div .txt {display: inline-block; width: 100px; font-size: 18px; font-weight: bold;}
article #contact .inner .contact-container .information .text-content div span {font-size: 18px;}
article #contact .inner .contact-container .information .kakao-content {margin-left:auto;display:flex;align-items: center;}
article #contact .inner .contact-container .information .kakao-content span {font-size:18px;font-weight: 500;}
article #contact .inner .contact-container .information .kakao-content img {margin-left:10px;width: 120px;height: 120px;object-fit: contain;image-rendering: pixelated;}
article #contact .inner .contact-container .information .kakao-content .btn {display:none;align-self: end;}
article #contact .inner .contact-container .information .kakao-content .btn img{height:50px;image-rendering: pixelated;}
/* footer */
.footer {display:flex;align-items: start; width: 100%;height: 100%;padding:50px 75px; background-color: #383554;box-sizing: border-box;}
.footer .footer-logo {display: flex;align-items: center;}
.footer .footer-logo .logo-img {width: 37px;height: 39px;margin-right:12px;object-fit: contain;}
.footer .footer-logo .logo-text {width: 157px;height: 18px;object-fit: contain;}
.footer .footer-content {margin-left:70px;padding-top:10px;}
.footer .footer-content p {font-size:14px;color:#fff}
.footer .footer-content div {margin:10px 0;}
.footer .footer-content div span {font-size:14px;color: #fff;}
.footer .footer-content .link {display: inline-block;margin-bottom:10px;font-size: 14px; color: #fff;}
.footer .footer-content .link:hover {font-weight: bold;}

#popup_layer {position:fixed;top:0;left:0;z-index: 10000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);}
/*팝업 박스*/
.popup_box{position: relative;top:50%;left:50%; width:550px;transform:translate(-50%, -50%);z-index:1002;box-sizing:border-box;background:#fff;box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-webkit-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);}
/*컨텐츠 영역*/
.popup_box .popup_cont {padding:50px;line-height:1.4rem;font-size:14px;word-break: keep-all;}
.popup_box .popup_cont h2 {padding:10px 0;color:#333;margin:0;font-size: 20px; font-weight: bold;}
.popup_box .popup_cont p{ border-top: 1px solid #666;padding-top: 25px;}
/*버튼영역*/
.popup_box .popup_btn {display:table;table-layout: fixed;width:100%;height:70px;background:#5d5d5d;word-break: break-word;}
.popup_box .popup_btn a {position: relative; display: table-cell; height:70px; color:#fff; font-size:17px;text-align:center;vertical-align:middle;text-decoration:none; background:#102c5c;}
.popup_box .popup_btn a:before{content:'';display:block;position:absolute;top:26px;right:29px;width:1px;height:21px;background:#fff;-moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.popup_box .popup_btn a:after{content:'';display:block;position:absolute;top:26px;right:29px;width:1px;height:21px;background:#fff;-moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.popup_box .popup_btn a.close_day {background:#5d5d5d;}
.popup_box .popup_btn a.close_day:before, .popup_box .popup_btn a.close_day:after{display:none;}

/*개인정보처리방침 팝업*/
.bottom-link-popup {width: 100%;height: 100%;}
.bottom-link-popup .popup_container {padding:15px;box-sizing: border-box;}
.bottom-link-popup .popup_container .content h2 {color:#333;margin:0;font-size: 20px; font-weight: bold;}
.bottom-link-popup .popup_container .content .day {padding:15px 0 25px;box-sizing: border-box;}
.bottom-link-popup .popup_container .content .title {font-weight: bold;} 
.bottom-link-popup .popup_container .content p {margin-bottom: 20px;font-size: 16px;word-break: break-word; line-height: 20px;}


@media all and (min-width:768px) and (max-width:1024px) {
.header .inner .nav {padding-left:100px;}
article #business .inner .text-list .text-item {width: calc(50% - 20px);}
article #business .inner .list-box {gap: 40px 2%;}
article #business .inner .list-box li {width: calc(50% - 60px);}
article #contact .inner .contact-container .mapbox img {height: auto;}
article #contact .inner .contact-container .mapbox {height: 300px;}
/* article #main-business {height: 665px;} */
article #main-business .content .imgbox .nodazi-logo {top: 55%;}

}

@media all and (min-width:320px) and (max-width:767px) {
.popup_box {width: 400px;}
.popup_box .popup_btn {height: 50px;}
.popup_box .popup_btn a{height: 50px; font-size: 15px;}
.popup_box .popup_btn a:before,
.popup_box .popup_btn a:after { display: none;}
body {overflow-x: hidden;}
.header {height: 80px;}
.header .inner {max-width: 100%;justify-content: space-between;padding: 0 10px;box-sizing: border-box;}
.header .inner .logo .logo-text {width: 145px;height: 16px;}
.header .inner .nav {margin-left:auto;padding-left:0;}
.header .inner .nav ul {display: none;width: 100%;position:absolute;top:80px;left:0;padding:15px 0px;align-items: center;background-color: #383554;flex-direction: column;border-top: 1px solid #fff;transition:all .35s;}
.header .inner .nav ul li {width: 100%;text-align: center;margin: 10px 0;}
.header .inner .nav ul li:hover{background-color: rgba(255, 255, 255, 0.5);}
.header .inner .nav ul li a {margin-left: 0;padding: 8px 0;}
.header .inner .nav ul li a::after {display: none;}
.header .inner .nav ul li a:hover::after {display: none;}

.header .inner .nav input[id="menuicon"] {display: none;}
.header .inner .nav input[id="menuicon"] + label {display:block;width:30px;height: 22px;position:relative;cursor: pointer;}
.header .inner .nav input[id="menuicon"] + label span {display:block;position: absolute;width: 100%;height: 3px;border-radius: 30px;background-color: #fff;transition: all .35s;}
.header .inner .nav input[id="menuicon"] + label span:nth-child(1) {top:0;}
.header .inner .nav input[id="menuicon"] + label span:nth-child(2) {top:50%;transform: translateY(-50%);}
.header .inner .nav input[id="menuicon"] + label span:nth-child(3) {bottom: 0;}
.header .inner .nav input[id="menuicon"]:checked + label {z-index: 2;}
.header .inner .nav input[id="menuicon"]:checked + label span {background-color: #fff;}
.header .inner .nav input[id="menuicon"]:checked + label span:nth-child(1) {top:50%;transform: translateY(-50%) rotate(45deg);}
.header .inner .nav input[id="menuicon"]:checked + label span:nth-child(2) {opacity: 0;}
.header .inner .nav input[id="menuicon"]:checked + label span:nth-child(3) {bottom:50%;transform: translateY(50%) rotate(-45deg);}
.header .inner .nav input[id="menuicon"]:checked~.menuitems{display: block;}

article #company {height: 500px;}
article #company .line{width: 200px;}
article #company .title {padding:0 30px;} 
article #company .title h1 {font-size:22px}
article #company .title h1:after {width: 80px;}
article #company .title p {display: inline; font-size: 18px; line-height: 25px; word-break: keep-all;}
article #company .title p span {font-size:18px;}

article #business .line {width: 200px;}
article #business .inner {padding:50px 30px;} 
article #business .inner .title h1{font-size:22px}
article #business .inner .title h1:after {top:27px; width: 90px;}
article #business .inner .title span {font-size: 18px;}
article #business .inner .text-list .text-item {width: 100%;}
article #business .inner .text-list .text-item p {font-size: 18px;}
article #business .inner .list-box {margin-top:20px;gap: 40px 2%;}
article #business .inner .list-box li {width: 100%;}

article #main-business {height: 650px;}
article #main-business .line {width: 200px;}
article #main-business .content .title {padding: 0 30px;top:15%;}
article #main-business .content .title h1 {font-size:22px;}
article #main-business .content .title h1:after {width:90px;}
article #main-business .content .title p{display:inline;font-size:18px;line-height: 25px;word-break: keep-all;}
article #main-business .content .title .qr-link {margin-top: 40px;}
article #main-business .content .imgbox .nodazi-logo {left: 30px;top: 67%;}


article #contact .inner {padding:50px 30px;}
article #contact .line {width: 200px;}
article #contact .inner .title h1 {font-size:22px;}
article #contact .inner .title h1:after {width: 140px;}
article #contact .inner .contact-container {flex-direction: column;}
article #contact .inner .contact-container .mapbox {width: 100%;height: auto;image-rendering: pixelated;}
article #contact .inner .contact-container .information {margin-left:0;width: 100%;}
article #contact .inner .contact-container .information .text-content {margin-top:30px;}
article #contact .inner .contact-container .information .text-content div .txt {display:inline;width:85px;font-size: 16px;}
article #contact .inner .contact-container .information .text-content div span {font-size:16px;}
article #contact .inner .contact-container .information .kakao-content {padding-top:15px;}
article #contact .inner .contact-container .information .kakao-content .qrimg {display: none;}
article #contact .inner .contact-container .information .kakao-content .btn {display: block;}
article #contact .inner .contact-container .information .kakao-content .btn img {height: 45px;}

.footer {display: block;padding:40px 30px;}
.footer .footer-logo .logo-text {width: 148px;height: 15px;}
.footer .footer-logo .logo-img {width: 28px;height: 33px;}
.footer .footer-content {margin-left:0;padding:20px 0;}
}


@media (max-width:380px) {
  article #main-business {height: 750px;}
  article #main-business .content .imgbox .nodazi-logo {top: 69%;}
}