@charset 'utf-8';
:root {
    --bs-body-bg:#f9f9fb;
}


* {font-size:12px; margin:0; padding:0; font-family:'NotoSans', 'Noto Sans', 'Gothic', '본고딕', '맑은 고딕', '고딕', 'sans serif'}


*::-webkit-scrollbar-track{background-color:transparent}
*::-webkit-scrollbar-thumb{background: rgba(135, 139, 144, 0.5);}
*::-webkit-scrollbar-thumb:hover{background: rgba(135, 139, 144, 0.5); width:8px}

body {min-height:100vh; overflow-x:hidden}


form {display:inline-block; width:100%}
ul {margin:0; padding:0}
ul li {list-style:none}
img {width:100%}

a {display:inline-block; cursor:pointer; color:inherit}
a:not(.link, .btn) {text-decoration:none; }


input {border-radius:5px}
input:not([type=checkbox],[type=radio]), 
select, textarea, [type=button],
:where(ol,ul) li {margin-bottom:0}



button{display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow }
button:hover{box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5)}


/*버튼 컬러*/
/*.btn .material-symbols-outlined {float:left; margin-right:3px}*/
.btn.btn-custom-light {background-color: #e9ecf2; border: 1px solid #dee2e6; box-shadow: none; color: #6c757d}
.btn.btn-custom-light:hover {background-color: #f34b7e26; border-color: #f34b7e0d; color: #f34b7e}
.btn.btn-soft-primary { background-color: #306fd626; border-color: #306fd64d; color: #306fd6!important}
.btn.btn-soft-primary:hover { background-color: #306fd640; border-color: #306fd699}
.btn.btn-gradient-primary:hover,.btn.btn-outline-primary:hover,.btn.btn-primary:hover {box-shadow: 0 4px 10px 0 #1d438040}
.btn.btn-soft-secondary {background-color: #5e6e8626; border-color: #5e6e864d; color: #5e6e86!important}
.btn.btn-soft-secondary:hover { background-color: #5e6e8640; border-color: #5e6e8699}
.btn.btn-gradient-secondary:hover,.btn.btn-outline-secondary:hover,.btn.btn-secondary:hover { box-shadow: 0 4px 10px 0 #38425040}
.btn.btn-soft-success { background-color: #22cdc626; border-color: #22cdc64d; color: #22cdc6!important}
.btn.btn-soft-success:hover {background-color: #22cdc640; border-color: #22cdc699}
.btn.btn-gradient-success:hover,.btn.btn-outline-success:hover,.btn.btn-success:hover {box-shadow: 0 4px 10px 0 #147b7740}

.btn.btn-soft-info {background-color: #1fc2fb26; border-color: #1fc2fb4d; color: #1fc2fb!important}
.btn.btn-soft-info:hover {background-color: #1fc2fb40; border-color: #1fc2fb99}
.btn.btn-gradient-info:hover,.btn.btn-info:hover,.btn.btn-outline-info:hover {box-shadow: 0 4px 10px 0 #13749740}
.btn.btn-soft-orange {border-color: #ff94534d; color: #ff9453!important}
.btn.btn-soft-orange:hover {background-color: #ff945340; border-color: #ff945399}
.btn.btn-gradient-orange:hover,.btn.btn-orange:hover,.btn.btn-outline-orange:hover {box-shadow: 0 4px 10px 0 #99593240}
.btn.btn-soft-purple {background-color: #a05ee826; border-color: #a05ee84d; color: #a05ee8!important}
.btn.btn-soft-purple:hover {background-color: #a05ee840; border-color: #a05ee899}
.btn.btn-gradient-purple:hover,.btn.btn-outline-purple:hover,.btn.btn-purple:hover { box-shadow: 0 4px 10px 0 #60388b40}
.btn.btn-soft-warning {background-color: #e9ce1b26; border-color: #e9ce1b4d;color: #e9ce1b!important}
.btn.btn-soft-warning:hover {background-color: #e9ce1b40; border-color: #e9ce1b99}
.btn.btn-gradient-warning:hover,.btn.btn-outline-warning:hover,.btn.btn-warning:hover {box-shadow: 0 4px 10px 0 #8c7c1040}
.btn.btn-soft-danger {background-color: #f34b7e26; border-color: #f34b7e4d; color: #f34b7e!important}
.btn.btn-soft-danger:hover {background-color: #f34b7e40; border-color: #f34b7e99}
.btn.btn-danger:hover,.btn.btn-gradient-danger:hover,.btn.btn-outline-danger:hover {box-shadow: 0 4px 10px 0 #922d4c40}
.btn.btn-soft-light {background-color: #e9ecf226; border-color: #e9ecf24d; color: #e9ecf2!important }
.btn.btn-soft-light:hover {background-color: #e9ecf240; border-color: #e9ecf299}
.btn.btn-gradient-light:hover,.btn.btn-light:hover,.btn.btn-outline-light:hover {box-shadow: 0 4px 10px 0 #8c8e9140}
.btn.btn-soft-dark {background-color: #283b5c26; border-color: #283b5c4d; color: #283b5c!important }
.btn.btn-soft-dark:hover {background-color: #283b5c40; border-color: #283b5c99 }
.btn.btn-dark:hover,.btn.btn-gradient-dark:hover,.btn.btn-outline-dark:hover {box-shadow: 0 4px 10px 0 #18233740}
.btn.btn-gradient-primary {background-image: linear-gradient(90deg,#6e9ae2 0,#f781a5 50%,#6e9ae2); background-size: 250% auto; color: #fff; transition: .5s}
.btn.btn-gradient-primary:hover {background-position: 100%; color: #fff}
.btn.btn-gradient-secondary {background-image: linear-gradient(90deg,#8e9aaa 0,#afb7c3 50%,#8e9aaa); background-size: 250% auto; color: #fff; transition: .5s}
.btn.btn-gradient-secondary:hover {background-position: 100%; color: #fff }
.btn.btn-gradient-success {background-image: linear-gradient(90deg,#64dcd7 0,#598cde 50%,#64dcd7); background-size: 250% auto; color: #fff; transition: .5s}
.btn.btn-gradient-success:hover {background-position: 100%; color: #fff }
.btn.btn-gradient-warning {background-image: linear-gradient(90deg,#f0dd5f 0,#f781a5 50%,#f0dd5f); background-size: 250% auto; color: #fff; transition: .5s}
.btn.btn-gradient-warning:hover {background-position: 100%; color: #fff }
.btn.btn-gradient-purple {background-image: linear-gradient(90deg,#bd8eef 0,#f781a5 50%,#bd8eef); background-size: 250% auto; color: #fff;transition: .5s}
.btn.btn-gradient-purple:hover {background-position: 100%; color: #fff }
.btn.btn-gradient-orange {background-image: linear-gradient(90deg,#ffb487 0,#f56f98 50%,#ffb487); background-size: 250% auto; color: #fff; transition: .5s}
.btn.btn-gradient-orange:hover {background-position: 100%; color: #fff }
.btn.btn-gradient-danger {background-image: linear-gradient(90deg,#f781a5 0,#6e9ae2 50%,#f781a5); background-size: 250% auto; color: #fff;transition: .5s}
.btn.btn-gradient-danger:hover {background-position: 100%; color: #fff }
.btn.btn-gradient-info { background-image: linear-gradient(90deg,#62d4fc 0,#6e9ae2 50%,#62d4fc); background-size: 250% auto; color: #fff; transition: .5s}
.btn.btn-gradient-info:hover {background-position: 100%; color: #fff }
.btn.btn-gradient-light { background-image: linear-gradient(90deg,#f0f2f6 0,#bfc5cf 50%,#f0f2f6); background-size: 250% auto; color: #fff; transition: .5s}
.btn.btn-gradient-light:hover {background-position: 100%; color: #fff }
.btn.btn-gradient-light { color: #283b5c!important }
.btn.btn-gradient-dark {background-image: linear-gradient(90deg,#69768d 0,#8e9aaa 50%,#69768d); background-size: 250% auto; color: #fff; transition: .5s }
.btn.btn-gradient-dark:hover { background-position: 100%; color: #fff}



.navbar,
.navbar-toggler {display:flex !important}
.navbar-vertical {position:fixed; display:inline-block; z-index:999999; top:80px; padding:0; width:1200PX; background:var(--bs-white); border-right:1px solid var(--bs-border-color)}
.navbar-vertical .navbar-collapse .navbar-vertical-footer {height:80px; padding:0 20px}
.navbar-vertical .navbar-collapse.collapsing .navbar-vertical-content, 
.navbar-vertical .navbar-collapse.show .navbar-vertical-content {height: calc(100vh - 80px); padding:20px}


.accordion {--bs-accordion-active-bg:var(--bs-gray-100); --bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(206, 212, 218, 0.25)}

header {position:fixed; left:0; width:100%; height:80px; padding:10px 30px; text-align:center;  border-bottom:1px solid var(--bs-border-color); background-color:var(--bs-white); box-shadow:0 1px 3px rgba(0,0,0,.15); z-index:9}
header .logo {float:left}
header .logo img{height:60px; width:auto; margin-top:5px; filter:grayscale(70%) brightness(0)}
header .gnb li {display:inline-block; line-height:30px; padding:10px 20px 30px}
header .gnb a {font-size:16px}
header .gnb + div > * {float:right}
header .gnb + div .btn-light {position:absolute; width:37px; height:37px; line-height:32px; border-radius:50%; right:15px; top:23px}
header .gnb + div .btn.navbar-toggler{display:none !important}

main {min-height:calc(100vh); padding:80px 0 20px}


section {background-color:var(--bs-body-bg)}

.wrap {max-width:1800px; width:100%; margin:0 auto}
.wrap h1 {padding:60px 10px 40px; text-align:center; font-size:40px; font-weight:bold}
.content {width:1300px; margin:0 auto}
.content[id] {padding-top:80px}
.content h2 {padding:60px 10px 50px; text-align:center; font-size:36px; font-weight:bold}
.content h2 span {font-weight:normal}

.required {position:relative}
.required input {padding-right:20px}
.required .form-label {padding-bottom:5px; display:block}
.required .form-label ~ .text-danger {position:absolute; right:10px; top:35px}


.swiper-pagination-bullet-active {background-color:var(--bs-dark)}

.swiper_wrap {position:relative}
.main_swiper .swiper-slide{height:600px; border-radius:40px; overflow:hidden}
.main_swiper .swiper-slide video {width:100%; height:100%; object-fit:cover}
.main_swiper .swiper-slide .img {display:flex; height:600px; align-items:center; justify-content:center}
.main_swiper .swiper-slide .txt {position:absolute; left:150px; top:150px; color:var(--bs-white)}
.main_swiper .swiper-slide .txt * {text-shadow: 2px 2px 5px rgba(0, 0, 0, 1)}
.main_swiper .swiper-slide .txt strong {font-size:30px; display:block; padding-bottom:10px}
.main_swiper .swiper-slide .txt p {font-size:16px}

.main_swiper .swiper-button-next, 
.main_swiper .swiper-button-prev {top:unset; bottom:60px; color:var(--bs-white)}
.main_swiper .swiper-button-next:after, 
.main_swiper .swiper-button-prev:after {font-size:20px}
.main_swiper .swiper-button-prev {left:80px}
.main_swiper .swiper-button-next {left:130px}
.main_swiper .swiper-pagination {top:unset; width:calc(100% - 1000px); bottom:80px; left:250px; right:100px}
.main_swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color:var(--bs-white)}
.swiper_btn {position:absolute; right:0; bottom:0px; width:600px; height:80px; padding-right:15px; background-color:var(--bs-body-bg); border-radius:40px 40px 0 0; z-index:99999}
.swiper_btn:after {position:absolute; content:''; width:50px; height:50px; background:radial-gradient(circle at 0 0, transparent 71%, var(--bs-body-bg) 72%); bottom:0; left:0px; transform:translateX(-100%)}

.swiper_btn a {width:calc(50% - 15px); margin:15px 0 15px 15px; height:65px; line-height:50px; border-radius:25px; text-align:center; float:left; font-size:14px}
.swiper_btn a span.material-symbols-outlined {vertical-align:sub}


#history .timeliny {margin-bottom:0 !important}
#history .timeliny .timeliny-dot {white-space:pre; line-height:1.7}
#history .timeliny .timeliny-dot:hover:after {background-color:var(--bs-body-bg); z-index: 999; padding:5px; /*box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.16)*/}


#business .box {position:relative; width:calc(100% - 30px); height:280px; border-radius:50px; min-height:100px; background-color:var(--bs-white); box-shadow:2rem 2rem 4rem 0px rgba(0,0,0,0.05); transition: all 0.3s ease-in-out;  transform-style:preserve-3d; cursor:pointer;}
#business .box > * {width:100%; height:100%; border-radius:50px; display:flex; flex-direction:column; overflow:hidden; -webkit-transform:translateZ(0); backface-visibility:hidden; align-items:center; text-align:center; justify-content:center}
#business .box .front {position:relative}
#business .box .front .material-symbols-outlined {font-size:30px; color:var(--bs-secondary-color)}
#business .box .front strong {margin:30px auto 5px; font-size:18px}
#business .box .back {position:absolute; top:0; left:0; transform:rotateY(180deg); background-color:var(--bs-dark); color:#fff; padding:30px}
#business .box .back {text-align:left; align-items:start}
#business .box .back p{position:relative; padding-left:20px; font-size:13px}
#business .box .back p:before {content:'\002d'; position:absolute; left:0}
#business .box:hover {transform:rotateY(180deg)}


#portfolio .pf_swiper {padding-bottom:50px}
#portfolio .swiper-slide {border-radius:20px; overflow:hidden}
#portfolio .swiper-slide .box {transition:all 0.3s ease-in-out; transform-style:preserve-3d; box-shadow:2rem 2rem 4rem 0px rgba(0,0,0,0.05)}

#portfolio .swiper-slide img {cursor:pointer}
#portfolio .swiper-slide .bg {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; background-color:var(--bs-dark); color:var(--bs-white); align-items: center; justify-content: center; transform:rotateY(180deg); backface-visibility:hidden; opacity:.7; cursor:pointer}
#portfolio .swiper-slide .bg strong {font-size:18px}
#portfolio .swiper-slide-active .box {transform:rotateY(180deg)}
#portfolio .swiper-slide:hover img {transition-duration:.3s; transform:scale(1.25)}



#lbt-headertop > *:not(#lbt-close_lightbox) {display:none}
#lbt_next, #lbt_previous {background-color: transparent; width:60px;}
#lbt_next {padding-right:25px; padding-left:0}

#form .card {width:800px; margin:0 auto}
#form .card textarea {min-height:200px; resize:none}
#form .card .captcha > div {width:304px; min-height:80px}


#customer .bn_swiper {text-align:center; padding:0 30px 40px; background-color:var(--bs-body-bg)}
#customer .swiper-slide {display:inline-block; background-color:var(--bs-white); padding:5px; border:1px solid var(--bs-border-color); border-radius:3px; overflow:hidden; position: relative;}
#customer .swiper-button-next, 
#customer .swiper-button-prev {top:unset; bottom:50px; color:var(--bs-dark)}
#customer .swiper-button-next {right:0}
#customer .swiper-button-prev {left:0}
#customer .swiper-button-next:after, 
#customer .swiper-button-prev:after {font-size:30px}


#customer .img {height:50px; width:auto; text-align:center; display:flex; justify-content:center; align-items:center; overflow:hidden}
#customer .img img{width:auto; height:100%; display:block;}


footer {padding:30px; width:100%; border-top:1px solid var(--bs-border-color); background-color:var(--bs-gray-dark)}
footer * {color:var(--bs-gray-400); font-size:11px}
footer .logo {width:100px; margin-bottom:20px}
footer .logo img {filter:grayscale(0) brightness(80%)}
footer div > span {display:inline-block}

.btn_fix {position:fixed; right:80px; bottom:100px; width:50px; height:50px; border-radius:10px; overflow:hidden}



.modal-title {font-weight:bold}
.modal-body {max-height:70vh; overflow-y:auto}


[data-bs-theme='dark'] {
    --bs-white : var(--bs-body-bg);
    .btn-light {--bs-btn-bg:#424649; --bs-btn-border-color:#424649; --bs-btn-hover-bg:#51585e; --bs-btn-hover-border-color:#51585e; color:#ffff}
    .btn-light:hover {box-shadow:none}
    header .logo img {filter:grayscale(0) brightness(80%)}
    
    .timeliny .timeliny-dot:before,
    .timeliny .timeliny-dot:after {color:#fff !important}

    .accordion {--bs-accordion-active-color:var(--bs-gray-500); --bs-accordion-active-bg:var(--bs-body-bg); --bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(206, 212, 218, 0.25)}
    .accordion-button::after {--bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");}

    .swiper-pagination-bullet {background-color:var(--bs-gray-300)}

    #business .box .front {background-color:var(--bs-gray-800)}
    #business .box .back {background-color:var(--bs-gray-700)}

    #customer .swiper-slide .img {background-color:#fff}

    #portfolio .swiper-slide .bg {background-color:var(--bs-gray-300)}

    form a.link.text-dark {color:#fff !important}
    form .btn-dark {background-color:#424649;}
    form .btn-dark:hover {background-color:#51585e}
    
}

@media (max-width: 1799px) {  
    .wrap {max-width:100%; padding:0 15px}  
}

@media (max-width: 1299px) {  
    .content {width:100%}
    .main_swiper .swiper-pagination {width:calc(60% - 300px)}
    .swiper_wrap .swiper_btn {width:40%}

    #lbt-thumbnails {width:100%; overflow-x:auto}

}

@media (max-width: 1024px) {  
    header {padding:10px 0}
    .main_swiper .swiper-slide,
    .main_swiper .swiper-slide .img {height:500px}
    .main_swiper .swiper-pagination {display:none}
    .swiper_wrap .swiper_btn {width:55%}

    #business .col-3 {width:50% !important}
    #business .col-3:nth-child(3),
    #business .col-3:nth-child(4) {margin-top:30px}
    #business .box {width:100%}
    #customer .img {width:100%}

    #form .card {width:80%}

}

@media (max-width: 768px) {    
    header .gnb {display:none; width:calc(100% - 200px)}
    header .gnb + div button {margin-top:18px}
    header .gnb + div .btn.navbar-toggler{display:flex !important}
    header .gnb + div .btn-light {position:unset; float:right; background:none; border:none; margin:12px 10px 0 0}
    
    header .gnb + div span {font-size:24px}

    .main_swiper .swiper-slide, 
    .main_swiper .swiper-slide .img {height:300px}
    .main_swiper .swiper-button-prev {left:40px}
    .main_swiper .swiper-button-next {left:80px}
    .swiper_wrap .swiper_btn {width:40%}
    .swiper_btn a span + span {display:none}
    .main_swiper .swiper-slide .txt {left:50px; top:80px}

    #business .col-3 {width:100% !important}
    #business .col-3:nth-child(2) {margin-top:30px}

    #form .card {width:100%}

}

@media (max-width: 480px) {    
    .content[id] {padding-top:60px}
    .wrap h1,
    .content h2 {padding:40px 10px 30px; font-size:28px}
    .main_swiper .swiper-slide .txt {left:50px; top:50px}
}


@media (max-width: 440px) {    
    .main_swiper .swiper-slide .txt {left:30px}
    .main_swiper .swiper-slide .txt strong {font-size:21px}
    .main_swiper .swiper-slide .txt p {font-size:14px}

    .main_swiper .swiper-button-prev {left:30px}
    .main_swiper .swiper-button-next {left:70px}

}