/* #262729 #9ecdbb*/

/* sub_title-img */

.sub-title-img {
    position: relative;
    }
    
.sub-title-text {
    position: absolute;
    top: 50%;    
    transform: translateY( -50%);
    text-align: center;
    width:100%;
    }
    
.sub-title-text h2 {
    font-size:34pt; 
    font-weight:700; 
    margin-bottom:10px; 
    display: inline-block;
    color:#262729;
    margin-right:1px;
    text-transform: lowercase;
    }

.sub-tab {
    font-size:0;
    position: absolute;
    bottom:0;
    width:100%;
    text-align: center;
    margin-left: -1px;   
    border-top-left-radius: 20px;
    z-index: 99;
    
    }

.sub-tab-ul {
    box-shadow: 0px -5px 5px rgba(0,0,0,0.05);
    display: inline-block;
    background: #fff; 
    margin-bottom: -1px;
    padding:0 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    }


.sub-tab li {
    display: inline-block;
    font-size:13px;
    margin-left: 0px;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    color:#262729;
    padding:24px 30px 12px;    
    font-family: '나눔바른고딕', 'Nanum Barun Gothic';
    }  

.sub-tab li:after {
    content: '';
    display: block;
    background: transparent;
    width:0%;
    height:2px;
    margin: 3px auto 0px;
    transition: all .3s ease;
    text-align: center
    }

.sub-tab li:hover:after {
    background: #bbb; 
    width:100%;
    }


.company-sub {
    position: relative;
    }
    
#company-01, #company-02, #company-03, #company-04 {
    position: absolute;
    top:-90px;
    }
    
/* about eyeon */

.mini-logo {
    display: block;
    margin:0 auto 60px;
    text-align: center;
    }
    

.title2 {
    text-align: center;
    }
    
.title2 h3 {
    font-size:28px; 
    font-weight:400;
    text-align:center;
    display: block;
    }    
    
.title2 h3:after {
    content: '';
    width: 80px;
    height:4px;
    background-color: #c5cacd;
    display: block;
    margin:40px auto 30px;   
    }
                
.title2 p {
    font-size: 13px;
    line-height: 23px;
    text-align: center;
    }
    
.about-3img {
    position: relative;
    margin-top: 60px;
    }
        
.about-caption h3 {
    transition : all .3s ease;
    margin: -13px 0 20px;
    font-weight: 600;
    padding: 0 25px 0 15px;
    z-index: 2;
    }

.about-caption p {

    padding: 0 25px 0 15px;    
    }
    
.about-3img > div {
    height:320px;
    }

.about-3img > div:hover .about-caption h3 {
    margin: -40px 0 30px;
    color: #fff;
    }
    
.about-img {
    position: relative;
    z-index: -1;
    }
        
.blind2 {
    position: absolute;
    top:50px;
    bottom:50px;
    left:0px;
    right:0px;
    background:rgba(0,0,0,0);
    transition: all .2s ease;
    }

    
.about-3img > div:hover .blind2 {
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.3);
    z-index: 1;
    }
    
        @media (max-width:1200px){
        .sub-img {
            background-position:top center !important;
            background-attachment: inherit !important;
            }
        
        .sub-title-text h2 {
            font-size:28pt;
            margin-top: 40px;
            }
            
        .sub-tab {
            margin-top: -20px;
            }
        
         
        }
    
    @media (max-width: 1200px) and (min-width: 768px) {
        .about-3img > div {
            padding-left: 8px;
            padding-right: 8px;
        }
    }


    @media (max-width:767px) { 
        #company-01, #company-02, #company-03, #company-04 {
            position: absolute;
            top:-57px;
            }
    
 
        .sub-title-text h2 {
             font-size:22pt;
             margin-top: 30px;                 
            }


        .sub-tab  li {
            font-size: 11px;
            padding: 18px 12px 6px; 
            }               

        .title2 h3  {
            font-size:21px; 
            }

        .title2 h3:after {
            content: '';
            width: 60px;
            height:3px;
            background-color: #c5cacd;
            display: block;
            margin:25px auto 15px;   
            }

        .title2 p {
            font-size: 11px;
            line-height: 20px;
            }

        .about-caption h3 {
            font-size: 22px;
            margin: -13px 0 10px;
            }

        .about-3img .col-xs-12 {
            margin-bottom:30px;
            }

        .about-3img > div {
            height:auto !important;
            }

        }
        
    
/* company - history*/

#company-history {
    position: relative;
    }
    
#company-history tt {
    display:block !important;
    }
    
.company-h {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    }
    
.company-h > div > div {
    display: inline-block;
    text-align: center;
    padding:0 10px;
    }
    
.company-h h3 {
    font-weight: 600;
    font-size:28px;
    }
    
.company-h h5 {
    margin-top: 15px;
    font-size:12px;
    line-height: 18px;
    }
    
.line {
    width:15px;
    border-top:1px solid rgba(0,0,0,0.5);
    margin-bottom: 60px;    
    }
    
    
    
     @media (max-width: 1200px) {
        .company-h {
            left: 50%;
            transform: translate(-50% , -50%);
           }
           
        .company-h .col-md-7 {
            width:100%;
            text-align: center;
            }  
 
        .history-blind {
            position: absolute;
            top: 0;
            bottom:0;
            left:0;
            right:0;
            background-color: rgba(0,0,0,0.3);
            }
            
        .company-h h3, .company-h h5 {
            color:#fff;
            }
            
        .line {
            border-top:1px solid rgba(255,255,255,0.5);
            }            
        }
     
     @media (max-width:767px){  
        #company-history tt {
            display:none !important;
            }
            
       .mini-logo {
            display: block;
            margin: 0 auto 30px;
            width: 100px;
        }

        #company-history {
            position: relative;
            }
        
        #company-history div.thumb {
            background-attachment: inherit !important;
            background-position: 70% 90% !important;
            background-size: 210% !important;
            }       
        
        .company-h > div > div {
            display: block;
            text-align: left;
            padding:0;
            padding-left: 5px;
            }
            
        .company-h {
            text-align: left;
            top: 50%;
            left: 50%;
            transform: translate(-50% , -50%);
           }

        .company-h h3 {
            font-size: 20px;
            display: inline-block;
            }
            
        .company-h h5 {
            font-size: 11px;
            padding-bottom:0px;
            display: inline-block;
            padding-left: 15px;
            margin:0;
            }
            
        .line {
            width:1px;
            border-top:0;
            margin: 6px 24px 10px;   
            border-right:1px solid rgba(255,255,255,0.5);
            height:13px;
            } 
        }
        
        
/* company-brand4 */

.company-b4 {
    overflow: hidden;
    position: relative;
    transition: all .4s ease;
    }
    
.green-line {
        display:block;
        background: #e4ece9;
        width:18%;
        height:500px;
        position: absolute;
        top:0;
        left:0;
        }
        
#company-brand4 .row > div  {
    position: relative;
    padding-bottom:30px;
    overflow: hidden;
    }

    
#company-brand4 .company-brand4-caption h3 {
    position: absolute;
    top:48%;
    left:12%;
    transform: translateY(-120%);
    color:#262729;
    font-weight: 500;
    z-index: 3;
    transition: all .4s ease;
    font-size:25px;
    }
    
#company-brand4 .row > div:hover .company-brand4-caption h3 {
    transform: translateY(-220%);
    }

#company-brand4 .company-brand4-caption p {
    font-size:13px;
    position: absolute;
    top:50%;
    left: 12%;
    transform: translateY(-10%);
    color:#444;
    font-weight: 300;
    transition: all .3s ease .2s;
    }

#company-brand4 .row > div:hover .company-brand4-caption p {
    transform: translateY(-130%);
    color:#262729;

    }
        
#company-brand4 .btn-primary {
    display: block !important;
    position: absolute;
    top:50%;
    left:-500px;
    transform: translateY(60%);
    background: transparent;
    border-radius: 60px;
    border:2px solid #262729;
    padding: 5px 13px 4px;
    font-size: 10px;
    color:#262729;
    font-weight: 800;
    z-index: 2;
    opacity: 0;
    transition: all .4s ease .2s;
    }
    
#company-brand4 .row > div:hover .company-brand4-caption .btn-primary {
    transform: translateY(-0%);
    left:12%;
    opacity: 1;
    }

#company-brand4 .row > div:hover .company-b4 {
    box-shadow: 0px 10px 35px rgba(0,0,0,.2);
    }



     @media (max-width: 1200px) {    
        #company-brand4 .row {
            margin-right:-12px;
            margin-left:-12px;
        
            }
            
        #company-brand4 .row > div:hover .company-b4 {
            box-shadow: 0px 10px 35px rgba(0,0,0,0);
            }
    
                    
        #company-brand4 .col-sm-6 {
            padding:8px !important;
         }
        
        #company-brand4 .company-brand4-caption h3 {
            left:10%;
            top:30%;
            transform:none;                   
            font-size:20px;
            }
         
        #company-brand4 .row > div:hover .company-brand4-caption h3 {
            transform: none;
            }
    
        #company-brand4 .company-brand4-caption p {
            font-size: 12px;
            position: absolute;
            top: 42%;
            left: 10%;
            color: #585858;
            font-weight: 300;
            transform:none;
            }
        #company-brand4 .row > div:hover .company-brand4-caption p {
            transform: none;
            }
        
        #company-brand4 .btn-primary {
            opacity: 1 ;
            transform: none;
            left:10%;
            top:60%;
            padding: 4px 12px 3px;
            border:1.5px solid #262729;
            font-weight: 500;
            }

        #company-brand4 .row > div:hover .company-brand4-caption .btn-primary {
            transform: none;
            left:10%;
            }
        }
        
#company-oc img {
    width:862px;
    margin: 0 auto;
    text-align: center;
    display: block;
    }
    
@media (max-width: 991px) {   
#company-oc img {
    width:100%;
    }
}


/* news */

#news .media > div {
    padding-bottom:70px !important;
    }
    
  
/* brand */

.brand-sub {
    padding:50px 0 80px;
    position:relative;
    }

#brand-01, #brand-02,  #brand-03, #brand-04 {
    position:absolute; 
    top:-40px;
    }
    
.brand-story .story-01 {
    height:calc(100vh - 90px)  ;
    padding:0;   
    overflow: hidden;
    }
    
.story-bg, .story-bg02, .story-bg03, .story-bg04 {
    background:url('../img/story-bg01_20231031.jpg');
    background-position: center;
    background-size:cover;
    transition: all 1s ease;
    height:calc(100vh - 90px)  ;    
    }

.story-bg02 {
    background:url('../img/story-bg02_20231031.jpg'); 
    background-position: center;
    background-size:cover;
    }

.story-bg03 {
    background:url('../img/story-bg03_20231031.jpg'); 
    background-position: center;
    background-size:cover;
    }

.story-bg04 {
    background:url('../img/story-bg04_.jpg'); 
    background-position: center;
    background-size:cover;
    }

.brand-story .story-01:hover .story-bg, .brand-story .story-01:hover .story-bg02, .brand-story .story-01:hover .story-bg03, .brand-story .story-01:hover .story-bg04  {
    transform: scale(1.03,1.03) ;
    opacity: .7;    
    filter: grayscale(70%) blur(3px);
    }

.story-01 {
    position: relative;
    }
    
.brand-text {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    left:10%;
    color:#262729;
    }

.brand-text h3 {
    font-size: 40px;
    font-weight: 700;
    }


.brand-text h5 {
    font-size: 18px;
    margin: 10px 0 30px;
    line-height: 24px;
    font-weight: 400;
    }

.story-02 {
    box-shadow: 0 0 0 50px #F1F6F9 inset;
    height:calc(100vh - 90px) ;
    position: relative;
    padding:0;     
    }

.brand-text2 {
    text-align: center;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    margin: 0 auto;
    width:100%;
    }

.brand-text2 > div {
    margin-bottom: 30px;
    text-align: center;    
    }

.brand-text2 img {
    margin: 0 auto;
    }
    
.brand-text2 h2 {
    margin: 20px 0 70px;
    font-size: 18px;
    letter-spacing: -1px;
    font-weight:300;  
    }   
    
.brand-text2 h3 {
    margin-bottom:20px;
    font-size:21px;
    font-weight: 800;
    }
    
.brand-text2 h3:after {
    content: '';
    width: 6px;
    height:6px;
    background-color: #9ECDBB;
    display: inline-block;
    margin-left:8px;
}


.brand-text2 h4 {
    font-size:13px;
    display: inline-block;
    margin-left: 10px;
    color:#666;    
    }

.brand-text2 a, .brand-text2 a:hover {
    text-decoration:none;
    color:#262729
    }

.brand-text2 .icon {
    display: inline-block;
    margin: 0 auto;
    }
    
.brand-text2 .icon > li  {
    text-align: left;
    }
    
.brand-text2 .icon > li:after {
    content: '';
    display: block;
    width:100%;
    border-top: 1px solid #ddd;
    margin:15px auto;
}

.brand-text2 .icon > li:last-child:after {
    display: none;
    }

.icon i {
    margin: 0 auto;
    background: #666;
    padding: 5px;
    border-radius: 60px;
    display: inline-block; 
    transition: all .2s ease;
    width:25px;
    height:25px;
    text-align: center;
    color:#fff;
    }

.icon li:hover i.fa-home{
    background: #222;
    }
    
.icon li:hover i.fa-facebook{
    background: #3B5998;
    }

.icon li:hover i.fa-instagram{
    background: #BD3381;
    }
    
.icon li:hover i.fa-plus{
    background: #FEDD3D;
    }
    
.brand-sub .owl-theme .owl-dots .owl-dot span {
    margin: 5px;
    background: transparent;
    border-radius: 30px;
    border:2px solid #272729;
    transition:all .2s ease;
    }

.brand-sub .owl-theme .owl-dots .owl-dot.active span, .brand-owl .owl-theme .owl-dots .owl-dot:hover span {
    background: #272729;
    }
        
.brand-sub .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    }

.brand-owl {
    margin: -100px 0 2px;
    }
    
.brand-sub .owl-theme .owl-nav {
    margin: 0;
    }

.goods {
    margin-left:-1px;
    margin-right:-1px;
    }

.goods > div {
    padding-left:1px;
    padding-right:1px;
    position: relative;   
    }
    
.goods-text {
    text-align: center;
    width:100%;    
    }

.goods-text h6, .goods-text h4 {
    position: absolute;   
    width:100%;
    }
    
.goods-text h6 {        
    bottom:19%;
    font-size:14px;
    font-weight:500;
    }

.goods-text h4 {    
    bottom:12%;
    font-size:11px;
    font-family: 'helvetica', 'dotum';
    }

.story-line {
    display: block;
    width:50px;
    height:1px;
    margin:20px auto 20px 0;
    border-top: 1px solid #aaa;    
    }
    
    @media (max-width:991px) {
            .goods > div {
                padding-bottom:2px;
                }
        
            .brand-owl {
                margin: -55px 0 2px;
                }
            }
     
    
    @media (max-width:767px) {
        #brand-01, #brand-02,  #brand-03, #brand-04 {
            position:absolute; 
            top:0px;
            }    
                
        .brand-text {           
            left: auto;
            color: #262729;
            text-align: center;
            width: 100%;
            }
            
        .brand-story .story-01, .brand-story .story-02 {
            height:calc(100vh - 57px) ;
            }
            
        .story-bg, .story-bg02, .story-bg03, .story-bg04 {
            transform: scale(1.03,1.03) ;
            opacity: .5;    
            filter: grayscale(0%) blur(4px);
            height:100vh ;    
            }        

        .brand-story .story-01:hover .story-bg  {
            transform: scale(1.03,1.03) ;
            opacity: .5;    
            filter: grayscale(0%) blur(4px);
            height:100vh ;
            }
            
        .brand-text h3 {
            font-size: 26px;
            }

        .brand-text h5 {
            font-size: 16px;
            margin: 8px 0 25px;
            }
            
        .story-02 {
            box-shadow: 0 0 0 20px #F1F6F9 inset;
            }
        
        .brand-text2 .ci img {   
            width:30%;
            }
            
        .brand-text2 h2 {
            margin: 15px 0 45px;
            font-size: 14px;
            letter-spacing: -1px;
            font-weight: 500;
            }
        
        .brand-text2 h3 {
            font-size: 16px;
            }
        
        .brand-text2 .icon img {
            width: 20px;
            height: 20px;
            }
            
        .brand-text2 h4 {
            font-size: 11px;
            display: inline-block;
            margin-left: 10px;
            color: #666;
            }
                    
        .story-line {
            width:1px;
            height:50px;
            margin:20px auto 15px;
            border:0;
            border-left: 1px solid #aaa;            
            }   
        
         .brand-sub .owl-theme .owl-dots .owl-dot span {
            width: 8px;
            height: 8px;
            margin: 4px ;
            }

         .brand-sub .owl-dots {
            bottom: 4px ;
            }
            
         .icon i {
            width: 20px;
            height: 20px;
            font-size: 11px;
            }
            
        .brand-text2 .icon > li:after {
            margin: 10px auto;
            }
        }
        
        
/* recurit */

#recurit-sub {
    position:relative;
    }

#recurit-01, #recurit-02, #recurit-03 {
    position:absolute; 
    top:-90px;
    }
    
.r-title h3 {
    font-size: 28px;
    margin-bottom:15px;    
    line-height: 40px;
    font-weight: 300;
    }
   
.r-title  p {
    font-size: 13px;
    line-height: 23px;
    }
        
.r-top {
    position: relative;
    }
    
.r-top .r-title {
    position: absolute;
    }

.r-01 {
    top:10%;
    right:0%;
    }
    
.r-02 {
    bottom:0;
    left:0;
    }
    
.r-02 h3 {
    margin-top:30px;  
    }
    
.grade {
    margin-top:60px;    
    }

.grade h4 {
    padding: 42px 0;
    font-size:20px;
    text-align: left;
    font-weight: 300;
    }
    
.grade .col-md-3 {
    width:20%;
    }
.fa-caret-right {
    padding-left:50px;
    }

.grade-icon i {
    background: #F1F6F9;
    padding: 29px 20px;
    border-radius: 60px;
    width: 80px;
    height: 80px;
    font-size: 24px;
    font-weight: 500;
    margin: 10px;
    }
    
.grade-icon:after {
    content: '';
    display:block;
    z-index: -1;
    width:100%;
    height:1px;
    position: absolute;
    top: 50px;
    left:0;
    border-top:1px solid #dbe5eb;
    }  
    

.welfare-owl.col-md-9 {
    width: 75% !important;
    } 
    
.welfare-box h4 {
    font-size: 20px;
    margin: 10px 0 20px;
    display: inline-block;
    font-weight: 300;
    }
    
.welfare-box span {
    display: block;
    color:#999;
    padding-left: 10px;    
    }

.welfare-box {
    border:1px solid #dbe5eb;
    border-right:0;  
    }
    
.welfare-box:hover {
    background:#eaf2f7;
    }
    
.welfare-caption {
    padding:25px;
    height: 320px;
    }
    
.welfare-img {
    width:60px !important;
    height:60px;
    background: #fff;
    border-radius: 60px;
    margin-bottom:15px;
    float: right;
    }
    
.welfare-img img {
    padding:14px;    
    }

.welfare-owl.owl-theme .owl-dots .owl-dot span {
    margin: 5px;
    background: transparent;
    border-radius: 30px;
    border:2px solid #272729;
    transition:all .2s ease;
    }

.welfare-owl.owl-theme .owl-dots .owl-dot.active span, .welfare-owl.owl-theme .owl-dots .owl-dot:hover span {
    background: #272729;
    }
        
.welfare-owl.owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    }
    
.bottom-text .r-title:after {
    display: block;
    content: '';
    width:90%;
    height: 1px;
    background: #eee;
    margin:30px 0;
    }
    
.bottom-text .r-title:last-child:after, .recurit-mobile  {
    display: none;
    }
    
.recurit-pc {
    display:block;
    }

    
    
     @media (max-width:1200px) {
        .r-title h3 {
            font-size: 22px; 
            line-height: 30px;
            }
            
        }
     @media (max-width:991px) {
        .recurit-pc {
            display:none;
            }
    
        .recurit-mobile {
            display:block;
            }
            
        .recurit-mobile .r-title {
            position: static;
            text-align: center;
            padding: 0px;
            }
        .recurit-mobile img {
            margin:40px 0;
            }
            
        .welfare-box {
            border-right:1px solid #dbe5eb;  
            } 
            
        .welfare-owl.col-xs-12 {
            width: 100% !important;
            }  
        
        .welfare-text h3 {
            text-align:center;
            }
        .welfare-text p {
            display:none;
            }  
        
        .bottom-text .r-title:last-child:after {
            display: block;
            }
        }
        
        
     @media (max-width:767px) {
        #recurit-01, #recurit-02, #recurit-03 {
            top:-57px;
            }
            
        .grade .col-xs-3 {
            width:25% !important;
            }        

        .grade .col-xs-12 {
            width:100% !important;
            }
            
        .grade-icon i {
            padding: 22px 20px;
            border-radius: 60px;
            width: 60px;
            height: 60px;
            font-size: 16px;
            margin: 10px 0;
             }
        
        .grade-icon:after {
            top: 40px;
            }
    
        .r-title h3 {
            font-size: 21px;  
            }
   
        .r-title  p {
            font-size: 11px;
            line-height: 20px;
            }
            
         .grade {
            margin-top:0
            }
            
        .grade h4 {
            padding: 20px 0 10px;
            font-size: 18px;
            text-align: center;
            }
        .fa-caret-right {
            display:none;
            }
        
         .bottom-text .r-title:after {
            width:100%;
            }   

        .welfare-img { 
            display: none;
            }
        
        .welfare-box h4 {
            font-size: 17px;
            }
        .welfare-caption {
            padding:15px;
            height: 280px;
            }  
        }
        
.recurit-top {
    position: relative;
    }
    
.recurit-top h4 {
    font-weight:300;
    line-height: 28px;
    margin-bottom:18px;
    
    }

.company-info {
    margin-top:30px;
    }
    
.company-info > li {
    font-size:13px;
    font-family: '나눔바른고딕' , 'Nanum Barun Gothic';
    }

.company-info > li:after {
    content: '';
    display:block;
    width:100%;
    height:1px;
    background: #ddd;
    margin:7px auto;
    }

.company-info > li:last-child:after {
    display:none;
    }
    
@media (max-width:991px) {
        .recurit-top .col-xs-12 {
            padding-bottom:30px;
            }
    }
    
    
@media (max-width:767px) {
        .company-info > li {
        font-size:11px;
        }
    }

.recurit-middle {
    position:relative;
    }
.recurit-middle-text {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    text-align: center;
    margin: 0 auto;
    display: block;
    width:100%;
    font-family: '나눔바른고딕' , 'Nanum Barun Gothic';
    }
    

@media (max-width:991px) {
        .recurit-middle-text h3 {
            font-size:16px;
            }
        .recurit-middle-text {
            font-size:11px;
            padding:0 20px;
            line-height: 19px
        }
       .recurit-middle .thumb {
            background-attachment: inherit !important;
            background-position: center 70% !important;
            }
    }    
    
    
    
table {
    text-align: center;
    font-size:13px;
    font-family: '나눔바른고딕' , 'Nanum Barun Gothic';
    border-color: #262729;
    color:#555;
    }

.table-title {
    font-size:18px;
    }
    
td, th {
    padding: 20px 10px;
    }

.recurit-contents .row {
    margin-left:-40px;
    margin-right:-40px;
    }
    
.recurit-contents .col-md-6 {
    padding:0 40px 80px 40px;
    }


.recurit-text h4 {
    font-weight: 300;
    background: #262729;
    color:#fff;
    display: inline-block;
    padding:5px 15px;
    }
    
.recurit-text h5 {
    font-size:15px;
    border-radius: 50px;
    border:1px solid #000;
    padding:6px 15px;
    width:80%;
    text-align: center;
    margin: 0 auto 2px;
    }

.recurit-text .col-xs-4 p {
    text-align: center;
    margin: 0 auto;
    }
    
.text-line {
    border-color: #262729;
    margin:0 0 30px;
    }

.recurit-secition {
    margin-bottom: 40px;
    }

.recurit-secition img {
    margin:0 auto;
    }
    

@media (max-width:991px) {
       .table-title, .recurit-secition h4 {
            font-size:14px;
            }
        
        td, th {
            font-size:11px;   
            }
          
        .text-line {
            border-color: #262729;
            margin:0 0 15px;
        }

        .recurit-secition .row {
            margin-left:-15px;
            margin-right:-15px;
            }
        
        .recurit-text h5 {
            font-size:12px;
            padding:3px 10px;
            width:100%;
            margin: 0 auto 2px;
            }
    }  
    
    
/* deler */


.deler {
    text-align: center;
    }
    
.deler > div {
    position: relative;
    }
    
.onoff {
    position: absolute;   
    left: 50%;
    transform: translateX(-50%);
    }
    
.onoff h4 {
    width:150px;
    height:150px;
    padding: 67px 40px;
    background:#262729;
    color:#fff;
    border-radius: 100px;
    text-align: center;     
    transition: all .5s ease;
    }

.onoff h4:after {
    content: '';
    display: block;
    width: 2px;
    height: 80px;
    background: #ddd;
    opacity: .5;
    margin: 24px auto;
    transform: rotate(0deg);
    transition: all .5s ease;
    }
    
.deler-text {
    margin-top:70px;
    background: #fff;
    border: 1px solid #F1F6F9;
    padding: 120px 0 50px;
    box-shadow: 0px 10px 35px rgba(0,0,0,.07);
    text-align: center;    
    transition: all .5s ease;
    }
.deler-text > ul {
    text-align: center;
    display: inline-block;
    }

.deler-text > ul > li {
    text-align: left;
    font-size: 16px;
    margin-top: 14px;
    letter-spacing: 1px;
    font-weight: 500;
    }
    
.deler-text > ul > li:after {
    content: '';
    display: block;
    width:100%;
    border-top: 1px solid #ddd;
    margin:15px auto;
    }

.deler-text > ul > li:last-child:after {
    display: none;
    }   

#delershop .row > div:hover .deler-text {
    box-shadow: 0px 10px 35px rgba(0,0,0,.2);
    }

#delershop .row > div:hover .onoff h4:after {
    transform: rotate(360deg)
    }
    
#delershop .row > div:hover .onoff h4 {
    background: #9ecdbb;
    }
    


    @media (max-width:767px) {
        #delershop .right {
            margin-top:50px;            
            }
            
        .deler-text > ul > li {
            font-size:13px;
            }
            
        .onoff h4 {
            width: 120px;
            height: 120px;
            padding: 55px 20px;
            }
        
        .onoff h4:after {    
            height: 50px;
            margin: 22px auto;
            }
    
        .deler-text {
            padding: 90px 0 50px;
            }
        }
 
/* contact */

#contact-sub {
    position: relative;
    }

#contact-01 {
    position: absolute;
    top:-90px;
    }

.contactus > div {
    padding:1px 0 1px 2px;
    }
    
.contact-wrap {
    position: relative;
    overflow: hidden;    
    }
    
.contact-caption {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    color:#262729;
    text-align: center;
    width:100%;
    transition: all .4s ease;
    }
    
.contact-caption p {
    color:#262729;
    }
    
.contact-caption h4 {
    font-size:28px;
    margin-bottom: 20px;
    transition: all .4s ease;
    font-weight: 500;
    }
    
.contact-caption h4:after {  
    content: '';
    width:1px;
    height: 30px;
    background: #9ecdbb;
    display: block;
    margin:5px auto;
    transition: all .4s ease;
    }   
    
    
.contact-caption ul {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    }
    
.contact-caption li {      
    text-align: left;
    font-size: 13px;
    margin-bottom: 5px;
    }

.contact-caption li i {  
    padding-right: 10px;    
    }
    
.contact-wrap .sub-img {
    transition: all .5s ease;
    opacity:1;
    }

.contact-wrap:hover .sub-img {
    background-position:center !important;
    opacity:.5;
    }

.contact-wrap:hover .contact-caption  {
    transform: translateY(-135%);
    }

.contact-wrap:hover h4:after {
    height: 0px;
    margin:0 auto;
    }

.question > div {
    text-align: center;
    }

.question h4 {
    font-weight: 300;
    font-size:21px;
    margin:20px 0 15px;
    display: inline-block; 
    }
    
.question p {
    display: inline-block; 
    padding-left:15px;
    }

.question i {
    display: inline-block; 
    padding-right: 10px;   
    }

    
    @media (max-width:1200px) {
        .contact-caption h4 {
            font-size:22px;
            }
        .question h4 {
            font-size:18px;
            display:block;
            }
        .question p {
            display: inline-block; 
            padding-left:0px;
            }
            
        .contact-wrap .sub-img {
            background-position:center !important;
            opacity:1;
            }
            
        .contact-wrap .contact-caption  {
            transform: translateY(-135%);
            }
            
        .contact-wrap h4:after {
            height: 0px;
            margin:0 auto;
            }
    
        }
        
    @media (max-width:991px) {       
         .contact-caption {
            z-index: 2;
            }
            
         .contactus  {
            margin-right: 0px;
            margin-left:  0px;
            }
            
        .contact-caption h4 {
            font-size:16px;          
            }
        
        .contact-caption p {
            display: none;        
            }

        .contact-caption li {
            font-size: 11px;      
            } 
        
        .question h4 {
            margin:30px 0 5px;
            font-size:15px;
            }   
        .contact-wrap .contact-caption {
            top:12%;
            transform: none;
            } 
         .contact-wrap:hover .contact-caption  {
            transform: none;
            }
            
        #contact-01 {
            top:-57px;
            }
        }