@charset "utf-8";


*{
    margin:0px;
    padding:0px;
    position: relative;    
}

html,
body{
  width:100%;
  overflow-x: hidden;
}

/*header 완료 후 시간남으면 최상단고정구현*/
.header,
#about p,
#about-promise .container{  
  z-index: 1;    
}

video, 
#about img {max-width:100%}

/*메인페이지*/
  #first{              
      height: 1080px;                        
      background: #1d4a8f;  /* fallback for old browsers */      
        background: -webkit-linear-gradient(to bottom, #1d4a8f, #153676);  /* Chrome 10-25, Safari 5.1-6 */        
            background: linear-gradient(to bottom, #1d4a8f, #153676); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
            background: radial-gradient(circle at 100% 0%,  #296AB8, #153676 );
                  
  }

  #first .container{   
      height:72.5%;
      display: flex;
      align-items: center;          
           
    }


  #total-media{
    width:100%;
    height: 100%;
    display: flex;    
    background: #123266;
}

#total-media .container{
  z-index: 1;
  margin-top:170px;
  margin-bottom:160px;
}


#total-media .works{
  margin-top:85px;
}

#total-media .total-scroll{
  margin-bottom: 20px;
  background: #ec1e24;
  color:#fff;
  text-align: center;
  line-height: 60px;
}


/*어바웃페이지*/

video, .vid-text h2,
#about-com .container,
#about-us .container,
#about-dif .container,
#about-flow .container,
#about-cooperation .container,
#about-us p{
  z-index:1;
}
  
  #about-top{
    display: inline-block;
    width:100%;
    background: #011128;
  }
  

  #about-top .container{
    padding:0;
  }

  /*
  #about-top .vid-text{ 
    position: absolute;     
    left:0;   
    right:0;  
    bottom:0;
  }
  */

  #about-com {
    display: flex;
    width:100%;  
    background: #343797; /*old browser*/
    background: linear-gradient(to bottom,#343797,#1F204A);
  }
  
  #about-com .container{
    margin-top:145px;
    margin-bottom:165px; 
    text-align: center;   
  }

  #about-us{width:100%; background: #2561AC;height: 1080px; display: flex;}
  #about-us .container{
  margin-top:165px;
  margin-bottom:165px;
}

  #about-pic{display: flex;background: #2C305F;}
  #about-pic img {width: 100%;}
  
  #about-service{
    display: flex;
    width:100%;
    background: #1E4D93; /*old browser*/
    background: linear-gradient(to bottom, #235BA4, #194083);
  }
  #about-service .container{
    margin-top:165px;
    margin-bottom:165px;
  }

  #about-service .service-set01{left:10%;}
  #about-service .service-set02{left:20%;}
  #about-service .service-set03{left:30%;}
  #about-service .service-set04{left:40%;}
  #about-service .service-set05{left:50%;}

  
  #about-dif{width:100%;background: #2C305F;display: flex;}
  #about-dif .container{
  margin-top:165px;
  margin-bottom:165px;
}


#about-flow{
  width:100%;
  background: linear-gradient(to bottom, #1d4a8f, #153676);  
  display: flex;
    }

    #about-flow .container{  
      margin-top:165px;
      margin-bottom:165px;    
      }
    
      .about-flow .headline{
        margin-bottom: 165px;
      }
    
    #about-promiseBG
    {width:100%; background: #1EA5D1;}

    #about-promise .container{
      position:absolute;
      top:145px;
      left:0;
      right:0;
      bottom:0;
    }
    
  #about-cooperation{
    width:100%;
    height: 100%;
    background: #343797; /*old browser*/
    background: linear-gradient(to bottom,#343797,#1F204A);
    display: flex;
  }

  #about-cooperation .container{
    margin-top:165px;
    margin-bottom:165px;
  }

  #about-cooperation .headline{
    margin-bottom: 165px;
  }

/*design page*/
#design {
  display: inline-block;
  vertical-align: top;
  width:100%;
  background: #1d4a8f;  /* fallback for old browsers */      
  background: -webkit-linear-gradient(to bottom, #1d4a8f, #153676);  /* Chrome 10-25, Safari 5.1-6 */        
  background: linear-gradient(to bottom, #1d4a8f, #153676); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
      
}

#design .container{
  z-index: 1;
  width:1300px;
  margin-bottom: 100px;
}


/*contact page*/

#contact-slogan{
  width:100%;
}

#contact-slogan .container{
  margin-top:95px;
}

#contact-slogan{
  height: 653px;
  background: #222354;
  background: linear-gradient(to bottom,#2a2b6f,#1b1c44);
  
}

#contact-us{
  display: flex;
  flex-direction: column;
  width:100%;
  background: #1d4a8f;
  background: linear-gradient(to bottom,#2969B7, #194183);  
}

#contact-us .container {
  margin:165px auto;
}

#contact-us .blz-infobox1{
  padding-top:95px;  
}

#contact-us .blend{     
  background:rgba(206,5,20,0.5);  
  border: 3px solid rgba(255,255,255,0.5);
}

#contact-us .blz-infobox2{
  top:0;
  left:0;
  right:0;
  bottom:0;  
  margin:60px;
}


/*부모요소의 블렌딩 자식요소에서 제거
.blend{  
  position:relative;
  width: 100%;
  height:355px;       
}

.blend::before{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  z-index:1;  
  background:rgba(206.5,20,0.5); 
  mix-blend-mode: overlay;  
    
}

.blz-infobox2{
  display: flex;
  position: absolute;     
  z-index: 2;
}
*/

.blz-info{  
  margin-left:auto;
  margin-right:auto;
}

.ceo{left:70px;}

#contact-form{
  top:45px;
}

#contact-form iframe{padding:0 5px; width:100%;margin-top:10px;}
#contact-form table{width:100%;}

@media all and (max-width: 1234px){
  #contact .container{width:auto;}
}

@media all and (max-width: 1024px){  

  .container  {    
    margin:80px;
  }   
  
  #about-top .container,
  #design .container,
  footer .container,
  #contact-slogan .container{
    width:auto;
  }
  
  #total-media .container{margin-top: 100px; margin-bottom: 100px;}

  #about .container{margin:90px 80px;}      
  #about-top .container{margin: 35px 0;}
  #about-us .container,
  #about-service .container{
    margin-bottom:10px;
  }


  #design .container{margin-top:30px;}

  /*
  #design .container{
    width:100%;
  }
  */

  footer .container{margin:0;}

  #contact-slogan{height: 595px;}
  #contact-us .container {margin: 100px 80px;}

  #contact-us .blz-infobox2{margin: 30px; top:12px;}  
  .blz-info p{
    font-size:17px;
    margin-bottom: 40px;
  }

  .ceo{left:30px;}

  #about-service h2 {
    font-size: 40px;
    margin-bottom: 10px;
  }



  
}

@media all and (max-width: 991px){

  .container{
    margin:100px;
  }

  #first {height:auto;}

  #design .container{
    margin:45px; margin-top:0px;
  }

  #first .container{display: inline-block;}  
  #contact-form iframe{width: 100%;}
  
}

@media all and (max-width: 768px){

#design .container{
  margin:30px; margin-top:0px;
}
#first .container{width:auto;}

#about-service .service-set01{left:0%;}
#about-service .service-set02{left:10%;}
#about-service .service-set03{left:20%;}
#about-service .service-set04{left:30%;}
#about-service .service-set05{left:40%;}


/*contact*/


#contact .container{
  margin: 40px;
  margin-top: 60px;
}

#contact-slogan .container{margin-top:55px;}

#contact-slogan{
  height: 410px;
}


.blend{
  vertical-align: middle;  
}




#contact-us{
  height: 100%;
}

#contact-us .blz-infobox2 {
  margin:25px;
}

.ceo{left:0px;}

.map-box{
  display: table;
  width:100%;
  text-align: center;
}

.formmail_textarea_style{  
  max-width: 714px;
}
}

@media all and (max-width: 767px){
  .blend{text-align: center;}
}

@media all and (max-width: 425px){

  .container:not(#first .container, footer .container,#about-top .container,#about-promise .container, #design .container,
  #contact .container) {
    width: 400px;
  }    

  #first .container {margin: 28px;}
  #total-media .container{margin:60px 28px;}
  #total-media .total-scroll{
    margin-bottom: 10px;
    line-height: 30px;
  }

  #about .container{margin:60px 40px;}
  #about .container:not(
  #about-top .container,
  #about-dif .container,
  #about-flow .container){
    margin-bottom: 25px;
  }
  #about-top .container{margin:40px}
  #about-dif .container{margin-bottom: 60px;}
    
  #contact-slogan .container {
    margin-top: 30px;
  }

  
  

}

@media all and (max-width: 375px){
  #first .container {margin-top: 60px;}  

  #about .container:not(#about-top .container){
    margin:15px;
    margin-top:50px;
    margin-bottom: 50px;
  }
  #about-top .container{
    margin-top:20px;
  }

  #design .container{
    margin: 25px;
  }

  #contact-slogan .container {
    margin-top: 70px;
  }

}

@media all and (max-width: 320px){

  .container{margin-right: 0px;margin: 10px;}
  #main .container:not(#first .container, footer .container)
  {width:300px;margin-top: 45px;}    
  
  #total-media .total-scroll{
    margin-bottom: 10px;
    line-height: 30px;
  }

  #contact-slogan .container {
    margin-top: 45px;
  }
}