@charset "utf-8";

h1{
    font-size: 38px;
    color: #213a8f;
    font-weight: 700;
}
.blue{
    color: #213a8f;
}
.orange{
    color: #e8600b;
}
.inquiry_wrap .orange{font-size: 40px;line-height: 0;}
.sub_bg{
     background: url(/img/sub/sub_bg.jpg) center center;
    height: 720px;
    position: absolute;
    top: 0;
    width: 100%;
}
.sub_bg2{
    height: 720px;
    position: absolute;
    top: 0;
    width: 100%;
}
.sub_txt{
    padding-top: 360px;
}
.sub_txt span{
        font-size: 24px;
    color: #213a8f;
    font-weight: 600;
    display: block;
    padding-bottom: 10px;
}
.sub_txt p{
        font-weight: 500;
    line-height: 1.4;
    font-size: 23px;
    padding-top: 50px;
}
/*01회사소개*/
.metaphora{
    text-align: center;
}
.metaphora_img{
    display: flex;
    align-items: center;
    justify-content: center;
}
.metaphor_mean{
   margin: 600px 0 160px;
}
.metaphor_mean2{
    margin: 450px 0 0;
 
}
.metaphor_mean3{
    margin: 440px 0 200px;
}
.metaphor_mean_txt{
    font-size: 20px;
    line-height: 1.4;
    padding-top: 50px;
}

.mid_bg{
    background: #e8600b;
    width: 100%;
    height: 300px;
}
.can{
    margin: 160px 0 200px;
    color: #213a8f;
}
.can_txt_wrap{
    display: flex;
    justify-content: space-between;
    padding-top: 100px;
}
.can_title p{
    font-size: 20px;
    padding-bottom: 10px;
    font-weight: 500;
}
.can_title h2{
    font-size: 36px;
    font-weight: 700;
}
.can_txt h2{
    font-size: 50px;
    font-weight: 700;
}
.can_txt h3{
    font-size: 30px;
    font-weight: 600;
}
.can_txt p{
    font-size: 18px;
    padding-top: 50px;
    line-height: 1.4;
    color: #333;
}
.can_txt{
    width: 30%;
}
.with h2{
    font-size: 36px;
    font-weight: 700;
      color: #213a8f;
    display: flex;
    align-items: center;
}
.with h2 img{padding-left: 20px;}

.with_img_wrap{
    display: flex;
    overflow: hidden;
    padding-left: 9rem;
    margin: 50px 0 80px;
}
.with_img_wrap img{
    animation: logo_right 120s linear infinite;
}

@keyframes logo_right{
  from   { transform: translate(0%);}
  99%,to { transform: translate(-1100%);}   
}
.map{margin: 140px 0;     color: #213a8f; }
.map h2{
    font-size: 36px;
    font-weight: 700;
}
.root_daum_roughmap{width: 100% !important; padding-top: 80px;}

.map_wrap{display: flex; justify-content: space-between; padding-top: 80px;}
.map_wrap div{width: 33.333333%}
.map_wrap div:last-child{width: 28%}
.map_wrap h5{ font-size: 30px; font-weight: 700; margin-bottom: 40px;}
.map_wrap p{ color: #333; font-size: 18px;margin-bottom: 10px; }
.map_wrap p span{padding-right: 5px; font-weight: 700;}
.map_wrap .ph{margin-top: 20px;}
.op0{opacity: 0;}


/*02업무분야*/
.work01{margin-bottom: 120px}
.work02{padding: 120px 0 ; margin-bottom: 0; background: #f3f3f3;}
.work02_ing{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 30px;}
.work02_ing_wrap{width: 48%; height: 300px; background: #fff;margin: 2% 0;}
.work01_img img{width: 100%;}
.work01_ing{display: flex;justify-content: space-between; padding-top: 100px;flex-wrap: wrap; align-items: center;}
.work01_ing_wrap{width: 15%; background: #f3f3f3; padding: 25px 20px; height: 280px;}
.work03 .work01_ing_wrap height: 180px;}
.work01_ing img{width: 12px;}
.work01_ing_wrap:last-child{display: none;}
.work01_ing_wrap h2 {
    font-size: 45px;
    font-weight: 700;
        color: #213a8f;
}
.last_wrap{    background: #213a8f;
    color: #fff;
}

.work01_ing_wrap h3 {
    font-size: 25px;
    font-weight: 600;
        color: #213a8f;
    height: 70px;
}
.work01_ing_wrap p {
    font-size: 18px;
    padding-top: 30px;
    line-height: 1.4;
}
.d_n2{display: none;}
.last_wrap h2{color: #fff}
.last_wrap h3{color: #fff}
/*03포토폴리오*/
.port_bg{     background: #f3f3f3;
    padding: 150px 0 200px;}
.port_bg2{
    padding: 150px 0 200px;}
.center_slide{
margin: 0 100px;
}
.port_title{     font-size: 32px;
    font-weight: 600;
    color: #213a8f;
 margin-bottom: 60px;
}
.center .slick-center{  
    opacity: 1; transition: all .3s;
}
.center .slick-center{width: 100%;}

.center .slick-center .cs_b{  
display: block; transition: all .3s;
}
.cs_b{padding-top: 30px; font-size: 16px; display: none;transition: all .3s;}
.cs_b1 img{width: 40px !important;}
.cs_b1 h3{font-size: 30px; font-weight: 600; color: #213a8f }
.cs_b1{    display: flex;
    justify-content: space-between;
    align-items: center;
border-bottom: 2px solid #213a8f; padding-bottom: 15px;padding-top: 6px;
}
.cs_b2{display: flex; justify-content: space-between; padding-top: 15px;}
.cs_b2 span{display: block; text-align: right; color: #666;}
.portb img{margin: 30px 0 20px;}


.portfolio_cate{
    display: flex;
    justify-content: space-between;
    color: #e8600b;
    flex-wrap: wrap;
    margin-bottom: 150px;
}
.portfolio_cate span{
    width: 20%;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
}
.portfolio_wrap{
    display: flex;
    flex-wrap: wrap
}
.portfolio_con{
    width: calc(100% / 3);
      position: relative;
    transition: all .5s;
}
.portfolio_con img{
    width: 100%;
}
.portfolio_con::after{
    content: '';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
      background:#213a8f;
    opacity: 0.7;
}
.portfolio_con:hover.portfolio_con::after{
    display: block;
}
/*포토폴리오 사이트설명*/



.port_info_wrap{
    display: flex;
    margin: 100px auto ;
    justify-content: space-between;
}
.port_info{
    width: 30%;
}
.port_info_t{
    font-weight: 600;
    border-bottom: 2px solid;
    font-size: 22px;  
    padding-bottom: 15px;
}
.port_info_b{
    font-size: 20px;
    padding-top: 15px;
}
.sub_bg2 a{
    display: flex;
    align-items: center;
    font-size: 26px;
    font-weight: 600;
    color: #213a8f;
}
.sub_bg2 a img{
    width: 45px;
    margin-left: 15px;
    transition: all .3s;
}
.sub_bg2 a img:hover{
   margin-left: 30px;
}

/*견적문의*/
.wrt_board label{
    font-size: 22px;
    font-weight: 600;
}
.wrt_board{display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;}
.mdrop{width: 46%;margin-bottom: 60px;display: flex;align-items: center;border-bottom: 1px solid #d5d5d5;padding-bottom: 15px;}
.mdrop:nth-child(4){opacity: 0;}
.mdrop input[type=text]:focus .mdrop{border-bottom: 1px solid #e8600b;}
.mdrop dd{width: 70%;margin-left: 2%;}
.mdrop2{width: 100%;border-bottom: 1px solid #d5d5d5;}
.mdrop2 .textarea_wrap{margin-bottom: 10px;}
.btn-area{display: flex;justify-content: space-between;margin-top: 60px;}
.label span{display: block;
    margin-top: 5px;
    font-size: 15px;
    font-weight: 300;
    color: #666;}
.label{display: inline-block;
    font-size: 20px;
    margin-left: 10px;
    font-weight: 600;}
.label button{font-size: 20px; font-weight: 600; border-bottom: 1px solid #000}
.agree_check{position: relative;}
.agree_check .checkbox{
    width: 18px;height: 18px;position: relative;    appearance: none; top: -28px;
}
.agree_check .checkbox::before{
        content: '';
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid #000;
    box-sizing: border-box;
    transition: 0.2s border-color ease;
}
.agree_check .checkbox::after{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: transparent;
    transform: translate(-50%,-50%);
    transition: 0.3s background-color ease;
}
.agree_check .checkbox:checked::after{
    background-color: #e8600b;
}
#btn_write{    padding: 12px 50px;
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    background: #e8600b;
    color: #fff;}


/*업종별 마케팅*/
.area_l h2{ font-size: 36px;     color: #213a8f;
    font-weight: 700; margin-bottom: 50px;}
.area_wrap{padding: 150px 9rem !important;}
.area_bg{background: #f3f3f3; padding: 150px 0 50px;}
.area_l li{      display: flex;
    font-size: 26px;
    font-weight: 600;
    align-items: center; margin-bottom: 25px;}
.area_l li img{width: 80px;}
.area_l li span{ padding: 0 10px;}
.area_l {position: sticky; top: 150px;}
.area_r{    width: 60%;    position: relative;
    top: -200px;
    margin-left: 40%;}
.area_r div{background: #f3f3f3; padding: 40px; margin-bottom: 80px;}
.area_r ul{display: flex; justify-content: space-between; align-items: center;}
.area_r li{background: #fff; width: 20%; height: 150px;}
.area_bg01{background:#213a8f !important; }
.area_bg02{background:#e8600b !important; }


.area_r h5{font-size: 28px; color: #213a8f;
    font-weight: 600; margin-bottom: 35px;}

.area_wrap2 .area_l h2{color: #e8600b !important; }
.area_wrap2 .area_r h5{color: #e8600b ; }
.area_wrap2 .area_r div{background: #fff ; }
.area_wrap2 .area_r li{background: #f3f3f3 !important; }

.area_r p{font-size: 20px;}

.area_bg01 h5, .area_bg02 h5{ color: #fff !important;}
.area_bg01 p, .area_bg02 p{ background: #fff; width: 100%; height: 300px;}
@media (max-width: 1440px){
 h1{
    font-size: 36px;
     font-weight: 600;
}
    .work01_ing_wrap{width: 26%;    margin: 20px 0; height: 250px;}
    .d_n{display: none;}
    .d_n2{display: block; opacity: 0;}
    .map_wrap div:last-child{width: 33.333333%}
    .map_wrap p{font-size: 17px;}
    
}
@media (max-width: 1024px){
    .map h2{font-size: 30px;}
    .map_wrap{flex-direction: column;}
    .map_wrap h5{margin-bottom: 30px; font-size: 26px;}
    .map_wrap p{font-size: 16px;}
    .map_wrap div{ padding-bottom: 50px; width: 100%;}
    .map_wrap div:last-child{ padding-bottom: 0px; width: 100%;}
    
 h1{
    font-size: 33px;
}
  
    .sub_txt span{
        font-size: 22px;
}
     .can_txt h3{
        font-size: 26px;
    }
     .can_txt p{font-size: 16px;}
       .can_title p{font-size: 16px;}
    .metaphor_mean_txt{font-size: 18px;}
    .can_txt h2{font-size: 45px;}
    .metaphora_img{
        width: 20%;
        margin: 0 auto;
    }
    .metaphora_img img:first-child{
        width: 80%
    }
    .metaphora_img img:nth-child(2){
        width: 40%
    }
    .metaphora_img img{
        width: 100%;
    }
    .can_title h2{font-size: 30px;}
    .with h2{font-size: 30px;}
    .can_txt h3{font-size: 28px;}
    .sub_txt p{font-size: 20px;}
       .port_info_t{font-size: 20px;}
    .port_info_b{font-size: 18px;}
    .sub_bg2 a{font-size: 24px;}
    .sub_bg2 a img{width: 40px;}
    .wrt_board label{
    font-size: 20px;
}
       .work01_ing_wrap h2{font-size: 40px;}
       .work01_ing_wrap h3{font-size: 22px;}
    .work01_ing_wrap p{font-size: 16px;}
   input[type=text], input[type=file], input[type=password]{font-size: 18px;}
        #cmt{font-size: 18px;}
    .label{font-size: 18px;}
    .label button{font-size: 18px;}
       #btn_write{font-size: 18px;}
}
@media (max-width: 810px){
     h1{
    font-size: 30px;
}
    .can{
        margin: 100px 0;
    }
    .mdrop{
           width: 100%;
    margin-bottom: 50px;
    padding-bottom: 8px;
    }
    .mdrop:nth-child(4){display: none;}
        .metaphor_mean {
    margin: 680px 0 100px;
}
    .portfolio_con{
        width: calc(100% / 2)
    }
    .can_txt_wrap{
        flex-direction: column;
        padding-top: 70px;
    }
    .can_txt{
        width: 100%;
        margin-bottom: 50px;
    }
       .wrt_board label{
    font-size: 18px;
}
    .work01_ing_wrap{width: 100%; height: auto;}
    .work01_ing img{margin: 0 auto;    transform: rotate(90deg);}
    .d_n{display: block;}
    .d_n2{display: none;}
    .work01_ing_wrap h3{height: auto;}
    .work01_ing{padding-top: 70px;}
    
    .mdrop2 {margin-top: 10px;}
      input[type=text], input[type=file], input[type=password]{font-size: 16px;}
    #cmt{font-size: 16px;}
    .btn-area{flex-direction: column;margin-top: 40px;}
      .label{font-size: 16px;margin-left: 6px;}
     .label button{font-size: 16px;}
    .label span{font-size: 14px;}
    .agree_check .checkbox{width: 16px;height: 16px; top: -24px;}
    .agree_check .checkbox::before{width: 16px; height: 16px;}
    .board_btn{text-align: right;margin-top: 30px;}
    #btn_write{font-size: 16px;}
}
@media (max-width: 550px){
    .root_daum_roughmap{padding-top: 70px;}
    .map h2{font-size: 26px;}
    .metaphor_mean {
    margin: 600px 0 100px;
}
    .map{margin: 100px 0 120px;}
    .map_wrap{padding-top: 60px;}
    .map_wrap h5{font-size: 22px; margin-bottom: 20px;}
    .map_wrap p{margin-bottom: 8px; font-size: 15px}
    .map_wrap .ph{margin-top: 15px;}
    .map_wrap div{padding-bottom: 40px;}
    .root_daum_roughmap .wrap_map{height: 300px !important;}

     h1{
    font-size: 27px;
}
    .with_img_wrap img{
 width: 400%;
}
    .can_txt h3{
        font-size: 22px;
    }
    .work01_ing_wrap h2{font-size: 35px;}
    .work01_ing_wrap h3{font-size: 18px;}
    .work01_ing_wrap p{font-size: 15px; padding-top: 30px;}
       .sub_txt span{
        font-size: 20px;
}
    .can_txt p{font-size: 15px;padding-top: 30px;}
     .can_txt h2{font-size: 40px;}
    .can_title h2{font-size: 26px;}
    .with h2{font-size: 26px;}
    .can_title p{font-size: 16px;}
    .sub_txt p{font-size: 17px;}
        .port_info_t{font-size: 18px;padding-bottom: 12px;}
    .port_info_b{font-size: 16px;padding-top: 12px;}
    .sub_bg2 a{font-size: 22px;}
     .sub_bg2 a img{width: 35px;}
    .metaphor_mean_txt{font-size: 15px;}
    .sub_txt {
        padding-top: 250px;
    }

    .metaphora_img{
        width: 30%;
    }
    .sub_bg{height: 600px;}
.port_info_wrap{
    margin: 50px auto ;
  flex-direction: column;
}
.port_info{
    width: 100%;
    margin-bottom: 35px;
}
    .port_info_t{
        border-bottom: 1px solid;
    }
    .metaphor_mean2{
    height: 150px;
}
          .wrt_board label{
    font-size: 16px;
}
    .mdrop{margin-bottom: 20px;padding-bottom: 0;}
    input[type=text], input[type=file], input[type=password]{font-size: 14px;}
    #cmt{font-size: 14px;}
        .label{font-size: 14px;}
     .label button{font-size: 14px;}
       #btn_write{font-size: 14px;}
    .label span{font-size: 12px;}
}