/*메인 영상*/
#intro{ position:relative; height:calc(100vh - 8rem); max-height:97rem;}
#intro video{ width:100%; height:100%;  -webkit-object-fit: cover; object-fit: cover; }
#intro .scroll_area{ z-index:11; position:absolute; bottom:3rem; left:3rem; }
#intro .scroll_area b{ position:absolute; bottom:calc(100% + 1rem); left:1.8rem; font-size:1.1rem; color:rgba(255,255,255,.6); font-weight:300; white-space: nowrap; 
    -webkit-transform-origin:left bottom; -moz-transform-origin:left bottom; transform-origin:left bottom;
    -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); transform:rotate(-90deg);
}
#intro .scroll_area span.ico{ position:relative; display:inline-block;  width:1.5rem; height:2.4rem; margin-right:1rem; border:2px solid #fff; border-radius:.75rem; }
#intro .scroll_area span.ico:after{ content:""; position:absolute; top:20%; left:50%; width:.3rem; height:.3rem; background:#fff; border-radius:100%;  animation: 1s linear infinite visualScroll;
    -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%);
}

#intro_v{ position:absolute; bottom:3rem; right:3rem; width:4.5rem; height:4.5rem; font-size:0; border:1px solid #cecece; background-color:transparent;  background-repeat:no-repeat; background-position:center; background-size:1.8rem;  background-image:url('../_img/main/main_intro_mute.png');  outline:none; 
    -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;
}
#intro_v.on{ background-image:url('../_img/main/main_intro_unmute.png'); border-color:#fff; }

@keyframes visualScroll{
    0%{ top:20%;}
    50%{ top:60%; }
    100%{ top:20%; }
}

@media all and (max-width:1199.98px) {
	#intro{ max-height:70rem; }
}

@media all and (max-width:991.98px) {
	#intro{ max-height:50rem; }
}


/*company*/
#company{ padding:12rem 0; background:#161b26 url('../_img/main/main_company_bak.jpg') center / cover; text-align:center;   }
#company *{ color:#fff;}

#company .top_area{ margin-bottom:10rem;}
#company .top_area strong{ display:block; font-size:3.6rem;}
#company .top_area strong:after{ content:""; display:block; margin:1rem auto; width:1px; height:3rem; background:rgba(255,255,255,.2); }
#company .top_area p{ font-size:1.8rem; font-weight:300;}

#company .tit_area h2{ margin-bottom:3rem; font-size:6rem; font-weight:700; }
#company .tit_area p{ margin-bottom:5rem;  font-size:2.8rem; font-weight:300; line-height:1.5;  }
#company .tit_area p b{ font-weight:700; color:#009cff; }

#company .company_list01{ display:flex; flex-wrap:wrap; text-align:left; margin-bottom:-3rem; }
#company .company_list01 li{ position:relative; width:50%; margin-bottom:3rem; padding-top:1rem; font-size:1.8rem; color:#c0c0c0; padding-right:15px;   }
#company .company_list01 li:after{ content:""; position:absolute; top:0; left:0; width:2rem; height:1px; background:#fff;}

#company .company_list02{ display:flex; flex-wrap:wrap; margin-top:8rem; }
#company .company_list02 li{ width:12.5%;}
#company .company_list02 li button{ width:100%;  background:none; border:none; padding:0; outline:none;  }
#company .company_list02 li .ico_area{ display:inline-block; width:12rem; height:12rem; margin-bottom:2rem; background-color:rgba(255,255,255, .1); border-radius:100%; background-position:center; background-size:100%;  
    -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;
}
#company .company_list02 li .ico_area01{ background-image:url('../_img/main/main_company_ico01.png');}
#company .company_list02 li .ico_area02{ background-image:url('../_img/main/main_company_ico02.png');}
#company .company_list02 li .ico_area03{ background-image:url('../_img/main/main_company_ico03.png');}
#company .company_list02 li .ico_area04{ background-image:url('../_img/main/main_company_ico04.png');}
#company .company_list02 li .ico_area05{ background-image:url('../_img/main/main_company_ico05.png');}
#company .company_list02 li .ico_area06{ background-image:url('../_img/main/main_company_ico06.png');}
#company .company_list02 li .ico_area07{ background-image:url('../_img/main/main_company_ico07.png');}
#company .company_list02 li .ico_area08{ background-image:url('../_img/main/main_company_ico08.png');}
#company .company_list02 li:hover .ico_area01{ background-image:url('../_img/main/main_company_ico01_on.png');}
#company .company_list02 li:hover .ico_area02{ background-image:url('../_img/main/main_company_ico02_on.png');}
#company .company_list02 li:hover .ico_area03{ background-image:url('../_img/main/main_company_ico03_on.png');}
#company .company_list02 li:hover .ico_area04{ background-image:url('../_img/main/main_company_ico04_on.png');}
#company .company_list02 li:hover .ico_area05{ background-image:url('../_img/main/main_company_ico05_on.png');}
#company .company_list02 li:hover .ico_area06{ background-image:url('../_img/main/main_company_ico06_on.png');}
#company .company_list02 li:hover .ico_area07{ background-image:url('../_img/main/main_company_ico07_on.png');}
#company .company_list02 li:hover .ico_area08{ background-image:url('../_img/main/main_company_ico08_on.png');}
#company .company_list02 li strong{ display:block; font-size:1.6rem; font-weight:300; 
    -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;
}
#company .company_list02 li:hover strong{ color:#009cff; }

@media all and (max-width:1430px) {
    #company .company_list01 li br{ display:none; }
}

@media all and (max-width:1199.98px) {
    #company{ padding:10rem 0;}
    #company .top_area{ margin-bottom:8rem;}
    #company .top_area strong{ font-size:3rem;}
    #company .top_area p{ font-size:1.6rem; }

    #company .tit_area h2{ font-size:5rem; }
    #company .tit_area p{ font-size:2rem;}

    #company .company_list01 li{ font-size:1.6rem;}

    #company .company_list02{ margin-top:6rem;}
    #company .company_list02 li .ico_area{ margin-bottom:1rem; width:9rem; height:9rem;}
    #company .company_list02 li strong{ font-size:1.5rem;}
}

@media all and (max-width:991.98px) {
    #company{ padding:8rem 0;}
    #company .top_area{ margin-bottom:6rem;}
    #company .top_area strong{ font-size:2.5rem;}
    #company .top_area strong:after{ height:2rem; }

    #company .tit_area h2{ margin-bottom:1.5rem; font-size:4rem; }

    #company .company_list02{ margin-top:4rem; margin-bottom:-2rem;}
    #company .company_list02 li{ width:25%; margin-bottom:2rem; }
}

@media all and (max-width:767.98px) {
    #company .top_area p br{ display:none; }

    #company .tit_area h2{ font-size:3.5rem; }
    #company .tit_area p br{ display:none;  }

    #company .company_list01 li{ width:100%; padding-right:0; }
}

@media all and (max-width:360px) {
    #company .company_list02 li{ width:33.33%; }
}



/*business*/
#business{ 
    background-color:#171b23; 
    background-image:url('../_img/main/main_business_bak.png'), url('../_img/main/main_business_bak02.png'); 
    background-repeat:no-repeat;  
    background-position:right top, left bottom; background-size:100%;  
}
#business ul li{ display:flex; flex-wrap:wrap;}
#business ul li:nth-child(even){ flex-direction:row-reverse;}
#business ul li > div{ width:50%; }
#business ul li .img_area{ min-height:60rem; background-position:center; background-size:cover; background-repeat:no-repeat; }
#business ul #filter .img_area{ background-image:url('../_img/main/main_business_img01.jpg');}
#business ul #communicator .img_area{ background-image:url('../_img/main/main_business_img02.jpg');}
#business ul #mobilizer .img_area{ background-image:url('../_img/main/main_business_img03.jpg');}
#business ul #coordinator .img_area{ background-image:url('../_img/main/main_business_img04.jpg');}
#business ul #adaptor .img_area{ background-image:url('../_img/main/main_business_img05.jpg');}
#business ul #agent .img_area{ background-image:url('../_img/main/main_business_img06.jpg');}
#business ul #matchmaker .img_area{ background-image:url('../_img/main/main_business_img07.jpg');}
#business ul #combiner .img_area{ background-image:url('../_img/main/main_business_img08.jpg');}
#business ul li .txt_area{ max-width:715px; padding-top:9rem; padding-bottom:9rem;  }
#business ul li .txt_area *{ color:#fff; }
#business ul li:nth-child(odd) .txt_area{ padding-left:8rem; padding-right:15px;}
#business ul li:nth-child(even) .txt_area{ padding-right:8rem; padding-left:15px; }
#business ul li .txt_area small{ display:block; margin-bottom:.5rem; font-size:2rem;}
#business ul li .txt_area h2{ margin-bottom:3rem; font-size:4.6rem; font-weight:700; }
#business ul li .txt_area p{ font-size:1.7rem; color:#c9c9c9; font-weight:300;}

@media all and (max-width:1430px) {
    #business ul li .txt_area{ padding:6rem 4rem !important; }
    #business ul li .txt_area p br{ display:none; }
}

@media all and (max-width:1199.98px) {
    #business ul li .img_area{ min-height:50rem;}
    #business ul li .txt_area small{ font-size:1.8rem; }
    #business ul li .txt_area h2{ font-size:4rem; }
    #business ul li .txt_area p{ font-size:1.6rem; }
    
}

@media all and (max-width:991.98px) {
    #business ul li .img_area{ min-height:40rem;}
    #business ul li .txt_area small{ font-size:1.6rem; }
    #business ul li .txt_area h2{ margin-bottom:2rem; font-size:3.5rem; }
}

@media all and (max-width:767.98px) {
    #business{ padding:8rem 0;}
    #business ul{ max-width:540px; padding:0 15px;  margin:0 auto;}
    #business ul li:nth-child(even){ flex-direction:row;}
    #business ul li > div{ width:100%; }
    #business ul li .img_area{ min-height:unset; padding-top:55%; }
    #business ul li .txt_area{ padding:4rem 0 !important;}
    #business ul li .txt_area h2{ font-size:3rem; }
}

/*partner*/
#partner{ max-width:1630px; margin:0 auto; padding:12rem 15px; }
#partner h2{ margin-bottom:5rem; font-size:6rem; font-weight:700; text-align:center;  }
#partner ul{ display:flex; flex-wrap:wrap; margin-bottom:-2rem;}
#partner ul li{ width:calc((100% - 10rem) / 6); margin-right:2rem; margin-bottom:2rem; border:1px solid #ddd; }
#partner ul li:nth-child(6n+6){ margin-right:0;}
#partner ul li img{ width:100%;}

@media all and (max-width:1199.98px) {
    #partner{ padding:10rem 15px; }
    #partner h2{ font-size:5rem;}
    #partner ul li{ width:calc((100% - 7.5rem) / 6); margin-right:1.5rem; margin-bottom:1.5rem; }
}

@media all and (max-width:991.98px) {
    #partner{ padding:8rem 15px; }
    #partner h2{ margin-bottom:3rem;  font-size:4rem;}
}

@media all and (max-width:767.98px) {
    #partner h2{ font-size:3.5rem;}
    #partner ul li{ width:calc((100% - 3rem) / 3); }
    #partner ul li:nth-child(6n+6){ margin-right:1.5rem;}
    #partner ul li:nth-child(3n+3){ margin-right:0;}
    
}

@media all and (max-width:575.98px) {
    #partner ul li{ width:calc((100% - 1.5rem) / 2); }
    #partner ul li:nth-child(3n+3){ margin-right:1.5rem;}
    #partner ul li:nth-child(2n+2){ margin-right:0;}
}


/*contact*/
#contact{ display:none; z-index:999; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7);}
#contact > .contact_close{ width:100%; height:100%; outline:none; background:rgba(0,0,0,.7); border:none;  }
#contact .inner_area{ position:absolute; top:50%; left:50%; width:100%; max-width:860px; max-height:100%; padding:0 15px; 
    -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
}
#contact .inner_area .contact_close{ position:absolute; top:5rem; right:-22rem; background:none; border:none; font-size:4rem; color:#fff; outline:none; padding:0; line-height:1;  }
#contact .inner_area > div{ height:100%; padding:5rem 0; overflow-y:auto; }
#contact .inner_area h2{ margin-bottom:4rem;font-size:6rem; color:#fff; font-weight:700; text-align:center;   }
#contact .inner_area input,
#contact .inner_area textarea{display:block; width:100%; border:none; border-radius:0; outline:none; font-size:1.8rem; color:#707070; }
#contact .inner_area input{ margin-bottom:1rem; height:6rem; padding:0 2rem; }
#contact .inner_area textarea{ height:24rem; padding:2rem;}
#contact .inner_area #btn_submit{ display:block; margin-top:4rem; height:6rem; line-height:6rem; font-size:1.8rem; color:#fff; background:#0089e1; text-align:center; font-weight:600;   }

@media all and (max-width:1430px) {
    #contact .inner_area .contact_close{ top:0; right:15px; font-size:3rem;}
}
@media all and (max-width:1199.98px) {
    #contact .inner_area h2{ font-size:5rem;}
}

@media all and (max-width:991.98px) {
    #contact .inner_area h2{ margin-bottom:3rem; font-size:4rem;}
}

@media all and (max-width:767.98px) {
    #contact .inner_area h2{ font-size:3.5rem;}
}