dbnt.co.kr2023/css/custom.css

509 lines
17 KiB
CSS

/* Add here all your CSS customizations */
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700&display=swap');
html.sticky-header-active #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a, #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a{color:#fff;}
html.sticky-header-active #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a:hover, #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a:hover{color:#fff;}
.logo_b{display:none;}
html.sticky-header-active .logo_w{display:none;}
html.sticky-header-active .logo_b{display:block;}
a:hover {
color: #007eff;
}
p{color:rgba(255, 255, 255,0.8);font-size:16px;}
@media (min-width: 992px){
#header .header-nav.header-nav-links nav > ul > li > a.active {color: #007eff;}
html.sticky-header-active #header .header-nav.header-nav-links nav > ul > li > a.active {color: #007eff;}
html.sticky-header-active #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a:hover {color: #007eff;}
#header .header-nav.header-nav-links nav > ul li:hover > a {color: #007eff;}
#header .header-nav-main nav > ul > li > a{font-size:14px;}
#header .header-nav.header-nav-dropdowns-dark nav > ul > li.dropdown .dropdown-menu {background: #1a3c8a; margin-top: 0;}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a{color:#fff;}
#header .header-nav-main nav > ul > li.dropdown:hover .dropdown-menu li a{ background: #1a3c8a;}
.dropdown-item{color:#fff;background: #1a3c8a;}
.dropdown-item:focus, .dropdown-item:hover{color:#fff;background: #1a3c8a;}
.dropdown-menu a{font-size:13px;min-width: 100px;}
}
h6{letter-spacing:1px;color:rgba(255, 255, 255, 1);font-size:30px;font-family: 'Raleway', sans-serif ! important;font-weight:300;margin-bottom:40px;}
.page-header{margin-bottom:0px;}
.main_wrapbg{background: rgba(3, 77, 152, 0.9);}
.rev_slider li.slide-overlay .slotholder:after {opacity: 0.5;}
section.ptm{padding:85px 0px;}
section h3{font-size:1.2rem;color:rgba(255, 255, 255, 0.8);}
section h4{font-size:1.2rem;color:rgba(255, 255, 255, 0.8);}
.page_main p, .page_bottom p{color:rgba(255, 255, 255, 0.6);font-size:16px;font-weight:400;}
.blue_bg{background: rgba(3, 77, 152, 0.9);}
.dark_blue_bg{background: rgba(3, 77, 152, 0.9);}
.qna_bg{background: rgba(3, 77, 152, 0.9);}
#footer{border:none;}
#footer .footer-copyright{background:#01031b;}
.footer-border{border-bottom:1px solid #777;}
.footer-list{
list-style: none;
width: 100%;
padding-left: 0;
display: block;
text-align:center;
white-space: nowrap;
min-height: 120px;
margin-bottom:0;
}
.footer-list > li{ position:relative; }
.footer-sub{
float: left;
padding-top: 5px;
list-style: none;
display: none;
left: 0;
text-align: left;
position: absolute;
/* width: 100%; */
background-color: #01031b;
padding-left:0;
}
.footer-sub li{padding:2px 0;}
@media (max-width:575px){
.footer-list{white-space:normal;}
.footer-list li{width:100% !important;text-align:center;margin-bottom:10px;}
.footer-sub{padding-left:0;}
.right_img img.img-fluid {
width: 100% !important;
}
}
@media (max-width:991px){
.solution-icon-img{margin-bottom:10px;}
.solution-box .solution-arrow img{transform: rotate(90deg);}
.solution-box .solution-arrow{top:53%;}
.solution-box .solution-arrow p{top:-10%;font-size: 14px;
transform: translate(-50%, -50%);}
.mobile-m-b-50{margin-bottom:50px;}
.solution2-section .solution-arrow{ left: 50% !important;
top: 105% !important;}
.order-991-1{order:1;margin-bottom:30px;}
.order-991-2{order:2;}
.footer-list{min-height:auto;}
#footer .container{text-align:center;}
.sticky-header-enabled .line-slow{display:none !important;}
}
.footer-li:hover .footer-sub{display:block;}
.footer-sub > li a{font-size:.9em;}
.footer-list > li{display:inline-block; /* width:19%; */ font-size:1.1em;cursor: context-menu;}
.footer-list > li:not(:last-child){ margin-right:1.2em !important; }
.footer-list > li:hover{color:#fff;transition:.3s all;}
.more_btn{position:relative;width:400px;height:50px;display:inline-block;}
.more_btn img{-webkit-transition: all 300ms linear 0s;
-o-transition: all 300ms linear 0s;
transition: all 300ms linear 0s;}
.more_btn:hover img{padding-left:180px;}
.more_btn span{display:none;position:absolute;left:0px;bottom:5px;width:300px;color:#fff;font-size:15px;-webkit-transition: all 200ms linear 0s;
-o-transition: all 200ms linear 0s;
transition: all 200ms linear 0s;opacity: 0.3;}
.more_btn:hover span{display:inline-block;width:300px;opacity: 1;}
.btn-point{
border: 1px solid #fff;
color: #fff;
padding: 12px 30px;}
.btn-point:hover{color:#000b26 important;background-color:#fff;}
@media (max-width:991px){
.footer-li:first-child:hover{ height:116px; }
.footer-li:last-child:hover{ height:87px; }
.footer-li .footer-sub{ width:100px; }
}
@media (max-width:575px){
.sm-m-b-30{margin-bottom:30px !important;}
.footer-li .footer-sub{
position:relative;
float:none;
text-align:center;
width:100%;
}
}
/*메인*/
.eng_txt{letter-spacing:0px;font-family: 'Raleway', sans-serif ! important;display:block;color:#568dff;}
.blue_text{color:#568dff! important;}
/*sub 곹통*/
h2{font-weight:300;}
.page-header.page-header-modern h1{font-size:42px;}
.page-header.page_main.page-header-modern.page-header-background.page-header-background-md{padding:150px 0px;}
.page-header.page_main1.page-header-modern.page-header-background.page-header-background-md{padding:0px 0px;}
.main_wrap{padding:0px 0px;background:#000b26;}
html .overlay-color-dark:not(.no-skin):before {background-color: #040b23 !important;}
.main_con{padding:150px 0px;background:#000b26;}
.sub_bg{background:#000b26;padding:100px 0px;}
.left_bg{position:relative;}
.left_img{position:absolute;left:0px;top:-150px;}
.left_img img.img-fluid{width:65%;}
.right_bg{position:relative;}
.right_img{position:absolute;right:-300px;top:-150px;}
.right_img img.img-fluid{width:70%;}
.right_bg1{position:relative;}
.right_bg1 .right_img{position:absolute;right:-280px;top:-350px;}
.right_bg1 .right_img img.img-fluid{width:78%;}
.text_bg{background:#000b26 url('../image/text_bg3.png') no-repeat left top;}
.mb-80{margin-bottom:80px;}
.p-t-100{padding-top:100px;}
.p-t-20{padding-top:20px;}
.p-y-20{padding:20px 0;}
.m-b-20{margin-bottom:20px;}
.p-t-50{padding-top:50px;}
.p-t-25{padding-top:25px;}
.p-b-25{padding-bottom:25px;}
.m-b-30{margin-bottom:30px;}
.m-b-45{margin-bottom:45px;}
.m-t-100{margin-top:100px;}
.m-t-15{margin-top:15px;}
.left-100{left:100% !important;}
@media (max-width: 767px){
.col-xs-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.sm-p-b-80{padding-bottom:80px !important;}
}
.p-relative{position:relative;}
/*INDEX*/
@media (max-width:1199px){
.left_img{left:-100px;}
.right_img{right:-300px;}
}
@media (max-width:767px){
.mobile-mb-15{margin-bottom:15px;}
.right_img{ right: 0;}
.right_img img{width:100%;}
.left_img{left:0}
.left_img img{width:80% !important;}
}
.main_p{padding:200px 0;}
@media (max-width:767px){
.main_p{padding-bottom:0;}
}
/*ABOUT*/
.big-text{font-size:10em;font-weight:600;display:inline-block;margin-right:15px;margin-bottom: 0;}
.about1_span{font-size:16px;display:inline-block;font-weight:300;color:rgba(255, 255, 255,0.8);}
.about_box .col-md-4{margin-top:35px;}
.about_box{margin-top:30px;}
.about_box_1{margin-top:30px;}
.about_box_1 h2{color:#fff;margin-bottom:10px;font-size:2em;font-weight:500;}
.about_box_1 p{color:rgba(255, 255, 255,0.8);margin-bottom:0;margin-left:7px}
.about_box_1 span{margin-left:-7px;}
.about_box_1 div{padding: 30px;
border: 1px solid rgba(255,255,255,0.1);}
.about_box_1 i{
font-size: .9em;
vertical-align: 2px;
color: #568dff! important;}
.right_img2{position:absolute;right:-80px;top:100px;}
.right_img2 img.img-fluid{width:78%;}
.right_img3{position:absolute;right:-100px;}
.right_img3 img.img-fluid{width:70%;}
.history_box{padding:80px 0 0 0;}
.history_box h1{font-size:8em;font-weight:600;line-height: initial;margin-bottom:0;font-style: italic;text-shadow: 5px 5px 3px rgba(255,255,255,0.1);}
.history_box p{margin-bottom:10px;}
.history_text{margin-bottom:50px;}
.about3_box{padding:80px 0 40px 0;border-bottom: 1px solid rgba(255,255,255,0.2);}
.about3_box:last-child{padding-bottom:0;border:none;}
.about3_box img{width:100%;}
.about3_box h2{color:#fff;}
.about3_box p{font-size:16px;margin-bottom:0;}
@media (max-width:767px){
.m-b-767-30{margin-bottom:30px;}
.about3_box .col-md-10{margin-top:15px;text-align:center;}
}
.d-inline{display:inline-block;}
.mission-img img{margin-bottom:10px;width:100%;}
/*PRODUCT*/
.product_box .col-md-4{margin-top:35px;}
.box_wrap h3{font-weight:400;font-size:1.3rem;line-height:1.3;margin-bottom:5px;text-transform: none;}
.box_wrap h4{font-weight:400;font-size:1.1rem;line-height:1.5;letter-spacing:0px;}
.box_wrap p{font-weight:400;line-height:1.5;word-break:keep-all;letter-spacing:0px;}
.thumb-info.thumb-info-slide-info-hover .thumb-info-wrapper:after {background: rgba(0, 9, 27, 1);}
.thumb-info.thumb-info-slide-info-hover .thumb-info-wrapper img{opacity: 0.6;transition: transform 0.2s, transform 0.2s;
transform: scale(1);}
.thumb-info.thumb-info-slide-info-hover .thumb-info-wrapper:hover img{cursor:pointer;transform: scale(1.15);}
.thumb-info-action a{color:#fff;font-weight:400;font-size:0.9rem ! important;padding-left:22px;padding-right:22px;}
.slider-container{background: #000b26;}
.rev_slider li.slide-overlay .slotholder:after{background: #000b26;}
@media all and (min-width:992px) and (max-width:2500px){
section h2 span, section h3 span, section h4 span{display:block;}
}
.box_wrap{position: absolute;
z-index: 100;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
padding: 0 15px;
width: 100%;}
/*.thumb-info.thumb-info-no-borders img{*/
/* opacity: .8;*/
/* background: black;}*/
.thumb-info-no-borders img::after{background: rgba(33, 37, 41, 0.8);
transition: all 0.3s;}
.thumb-info:hover .box_wrap{display:none;transition:.3s all;}
/*SOLUTION*/
.solution-box{padding:80px 0;border-bottom: 1px solid rgba(255,255,255,.3);}
.solution-box:last-child{border-bottom:none;}
.solution_box{border:1px solid rgba(255,255,255,.1);padding:30px;text-align:center;}
.solution_box p{font-size:13px;line-height: 1.5;}
.solution_icon i{margin-right:5px;color:rgba(255, 255, 255,0.5)}
.solution-text h5{
font-size: 1.5em;
color: #fff;
font-weight: 300;
margin-bottom: 10px;}
.solution-arrow{position: absolute;
top: 50%;
z-index: 1;
left: 50%;
transform: translate(-50%, -50%);
}
.solution2-section .solution-arrow{top:50%;left:100%;}
.solution-arrow img{
width: 75px;
height: 35px;
}
.solution-arrow p{
position: absolute;
line-height:1.3;
margin: 0;
z-index: 1;
font-size:14px;
width:100%;
text-align:center;
left: 47%;
transform: translate(-50%, 0);
}
.solution_box h5{
font-size: 1.2em;
color: #fff;
font-weight: 300;
margin-bottom: 20px;
max-width: 300px;
line-height: 25px;
margin: 0 auto 20px auto;
}
.solution-icon{position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 35px;
right: -3%;
color: #fff;
}
.solution-icon2{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 35px;
right: -1.8%;
color: #fff;
}
.solution-icon-img{width:50px;}
.solution-arrow1 img{
width: 35px;
height: 60px;}
.solution-arrow1 {
position: absolute;
top: 78%;
text-align:center;
z-index: 1;
left: 50%;
transform: translate(-50%, -50%);
}
.solution-arrow2{
position: absolute;
top: -12%;
text-align: center;
z-index: 1;
left: 50%;
transform: translate(-50%, -50%);}
.solution-arrow2 img{width:35px;height:60px;}
.solution-arrow2 p{font-size:14px;}
.solution-arrow1 p{font-size:14px;}
.solution2-section .solution_box{min-height:420px;}
.solution2-section .solution_box img{width:100%;}
.solution_arrow1{
position: absolute;
right: 0;
bottom: -50%;
}
.solution_arrow2{
position: absolute;
right: 30%;
bottom: -50%;
}
.solution_arrow3{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -40%;
}
.solution_arrow4{
position: absolute;
top: -135%;
left: -30%;
}
.solution_arrow5{
position: absolute;
bottom: -50%;
}
.solution-new-arrow{
position: absolute;
top: 50%;
right: -11%;
transform: translateY(-50%);
z-index: 1;}
.solution-new-arrow2{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -11%;
z-index: 1;}
.solution-new-arrow img,.solution-new-arrow2 img{width:70%;}
@media (min-width:1200px){
.solution_box{min-height:210px;}
}
@media (max-width:1199px) and (min-width:992px){
.solution_arrow3 img{width:100%;}
.solution_box{min-height:210px;}
.solution_arrow5{left:0;}
.solution_arrow1{right:0;}
}
.mobile-d-block{display:none;}
@media (max-width:991px){
.solution2-section .solution_box h5{font-size:1em;line-height: 18px;word-break:keep-all;}
.mobile-d-block{display:block;}
.mobile-d-none{display:none;}
.solution-new-arrow{
position: absolute;
top: 113%;
right: auto;
left: 50%;
transform: translateX(-50%) rotate(90deg);
z-index: 1;
}
.solution-new-arrow2{
position: absolute;
top: 113%;
right: auto;
left: 50%;
transform: translateX(-50%) rotate(90deg);
z-index: 1;
}
.mobile-mb-30{margin-bottom:30px;}
}
.solution4-box img{width:100%;}
.solution4-box{text-align:center;}
.big-size img{width:110px;}
.big-size h5{
font-size: 1.5em;
font-weight: 600;
}
.big-size p{font-size:15px;}
.big-size{ border: 1px solid rgba(255,255,255,.3);}
button.close{color:#fff !important;text-shadow:none; z-index: 99999;position:absolute;right: 5%;top: 3%;}
.modal-body{padding:0;}
.modal-dialog{max-width:100%;padding-top:50px;}
.modal-content{border:none;}
.modal-open .modal {
/* 230823 index에서 팝업 모달이 배경을 가려서 주석처리. */
/* background-color: #000b27; */
}
.modal-popup{width:480px;}
@media (max-width:575px){
.mobile-style{
width: 120px;
margin: 0 auto 30px auto;
}
}
/*CAREER*/
.rotate{ transform: rotate( 90deg );}
.career-icon{display:inline-block;}
.career-icon i{
font-size: 1.5em;
vertical-align: sub;
padding: 0 2px;}
.card-body p{margin-left:15px;margin-bottom:5px;}
.card-body h3{margin-bottom:20px;font-weight:600;}
.m-b-20{margin-bottom:20px !important;}
.career-text{padding:50px 0;}
.career-text{font-size:20px;}
.career-border{border-bottom: 1px solid rgba(255,255,255,0.2);}
.career-text2 h3{margin-bottom:20px;}
.card{background-color:transparent !important;}
.card.card-default{border-bottom: 1px solid rgba(255,255,255,0.2) !important;}
.accordion .card-title{border-bottom: 1px solid rgba(255,255,255,0.2) !important;}
.accordion .card-header a{padding:20px 0;}
.card-body p:last-child{margin-bottom:0;}
.card-body h3:last-child{margin-bottom:0;}
/*CONACTUS*/
.contact-text p{margin-bottom:0;font-size:1.2em;}
.contact-text i{margin-right:5px;color:#568dff! important;}
@media (max-width: 991px){
.fas.fa-angle-down{display:none;}
#header .header-nav-main.header-nav-main-mobile-dark:before {background-color: #000b26;}
#header .header-nav-main nav > ul li.dropdown.open > .dropdown-menu{ margin-left:0px;}
#header .header-nav-main.header-nav-main-mobile-dark nav > ul > li .dropdown-menu > li a{color:#fff;}
#header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:hover, #header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:focus, #header .header-nav-main.header-nav-main-mobile-dark nav > ul li a:active
{background-color: transparent;}
#header .header-nav-main.header-nav-main-mobile-dark nav > ul li{ border-bottom: 1px solid #e8e8e8; }
}
@media(max-width:645px){
.right_img{top:-170px;}
.product_text{margin-top:150px;}
.solution_text{margin-top:80px;}
}
@media(max-width:640px){
.page-header.page_main.page-header-modern.page-header-background.page-header-background-md{padding:75px 0px;}
.main_con{padding:75px 0px;}
.page-header.page-header-modern.page-header-background.page-header-background-md{padding:75px 0px;}
h6{font-size:20px;}
.left_img img.img-fluid{width:100%;}
section h3{font-size:1.0rem;letter-spacing:-1px;}
section h4{font-size:1.0rem;letter-spacing:-1px;}
}
.transform-none{text-transform:none;}
.dropdown-toggle{ cursor: context-menu;}
.mission-img{text-align:center;}
.mission-img p{font-size:15px; word-break: break-all;}
/*en*/
@media (min-width:1200px){
.en_css1 .solution_box{min-height:320px;}
}
@media (max-width:1199px) and (min-width:992px){
.en_css1 .solution_box{min-height:320px;}
}
.en_css1 .solution-arrow p{width:150%;}
.en_css2 .solution_box{min-height:450px;}
.about1_vision{
display: inline-block;
margin: 0 1px 0 3px;
}
.keep-all{word-break:keep-all !important;}
.initial{ text-transform: initial;}
/*mobile*/
@media (max-width:767px){
.page-header.page-header-modern h1{font-size:36px;}
h2{font-size:28px}
}
.width-auto{
width:auto!important;
}
#popupImg:hover{
cursor: pointer;
}