@charset 'utf-8';


#header_pc { position: absolute; background: transparent; }


main { font-family: 'Noto Sans KR',  sans-serif !important;}
main p { word-break: keep-all;}
#visual { overflow:hidden; position: relative; padding-bottom: 56.25%; }
#visual .slogun { position: absolute; z-index: 10;top: 50%; transform: translateY(-50%);  width: 100%;}
#visual .slogun p { color: #fff;}
#visual .slogun .p1 { padding: 0 0 12px; font-size: 90px; font-family: 'GmarketSans'; font-weight: bold; line-height: 1.1555; }
#visual .slogun .p2 { font-size: 30px; line-height: 1.666; line-height: -0.59em;}
#visual #video1 { position: absolute; left: 0; top: 0; width: 100%}

main h2 { padding-left: 10px; padding-right: 10px;}

#business { position: relative; }
#business h2 { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 700; }
#business h2 a { display: block; position: relative; padding: 59px 106px 9px 11px; line-height: 1.444; letter-spacing: -0.05em; color: #fff; background: #0473EA;}
#business h2 a i { position: absolute; right: 15px; bottom: 10px; transform: rotate(90deg); }
#business h2 a:hover i {animation:more_move  1s .3s infinite both ease-in-out }

#business h2 span { display: block;}
#business ul { flex-wrap:wrap; }
#business ul li { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 25%; height: 480px; background-repeat: no-repeat; background-size: cover; background-position: center; color: #fff;}
#business ul li:nth-of-type(1) { background-image: url('/img/hd/bg_main_bus1.png');}
#business ul li:nth-of-type(2) { background-image: url('/img/hd/bg_main_bus2.png');}
#business ul li:nth-of-type(3) { background-image: url('/img/hd/bg_main_bus3.png');}
#business ul li:nth-of-type(4) { background-image: url('/img/hd/bg_main_bus4.png');}
#business ul li:nth-of-type(5) { background-image: url('/img/hd/bg_main_bus5.png');}
#business ul li:nth-of-type(6) { background-image: url('/img/hd/bg_main_bus6.png');}
#business ul li:nth-of-type(7) { background-image: url('/img/hd/bg_main_bus7.png');}
#business ul li:nth-of-type(8) { background-image: url('/img/hd/bg_main_bus8.png');}
#business ul li h3 { padding-top: 160px; font-size: 24px; font-weight: 700; color: #FFF; line-height: 1; background-repeat: no-repeat;  background-position: top center; transition:.5s; }
#business ul li:hover h3 { margin-top: -10px; padding-bottom: 15px;}
#business ul li:nth-of-type(1) h3 {background-image: url('/img/hd/ico_main_bus1.png'); }
#business ul li:nth-of-type(2) h3 {background-image: url('/img/hd/ico_main_bus2.png'); }
#business ul li:nth-of-type(3) h3 {background-image: url('/img/hd/ico_main_bus3.png'); }
#business ul li:nth-of-type(4) h3 {background-image: url('/img/hd/ico_main_bus4.png'); }
#business ul li:nth-of-type(5) h3 {background-image: url('/img/hd/ico_main_bus5.png'); }
#business ul li:nth-of-type(6) h3 {background-image: url('/img/hd/ico_main_bus6.png'); }
#business ul li:nth-of-type(7) h3 {background-image: url('/img/hd/ico_main_bus7.png'); }
#business ul li:nth-of-type(8) h3 {background-image: url('/img/hd/ico_main_bus8.png'); }
#business ul li:nth-of-type(1):hover h3 {background-image: url('/img/hd/ico_main_bus1_1.png'); }
#business ul li:nth-of-type(2):hover h3 {background-image: url('/img/hd/ico_main_bus2_1.png'); }
#business ul li:nth-of-type(3):hover h3 {background-image: url('/img/hd/ico_main_bus3_1.png'); }
#business ul li:nth-of-type(4):hover h3 {background-image: url('/img/hd/ico_main_bus4_1.png'); }
#business ul li:nth-of-type(5):hover h3 {background-image: url('/img/hd/ico_main_bus5_1.png'); }
#business ul li:nth-of-type(6):hover h3 {background-image: url('/img/hd/ico_main_bus6_1.png'); }
#business ul li:nth-of-type(7):hover h3 {background-image: url('/img/hd/ico_main_bus7_1.png'); }
#business ul li:nth-of-type(8):hover h3 {background-image: url('/img/hd/ico_main_bus8_1.png'); }
#business ul li p { opacity: 0; display: block;  height: 0;   font-size: 16px; text-align: center; line-height: 1.75; letter-spacing: -0.025em; transition: 0.3s; word-break: keep-all;}
#business ul li:hover p { opacity: 1; padding-top: 20px; height: 3em; }


#client { padding: 100px 0; background: #f5f5f5;}
#client h2 { padding: 0 0 10px; font-size: 70px; line-height: 1; text-align: center; color: #000; font-weight: 700; }
#client h2 b { color: #0473ea; }
#client h2 + p { padding: 27px 0 87px; font-size: 20px; text-align: center; line-height: 1.7; color: #000;}
#client .wrap { max-width: 1200px;}
#client .wrap ul { display: flex; flex-wrap:wrap; margin: -6px -7px; align-items: center; }
#client .wrap ul li {width: 16.66%;  padding: 6px 7px;  }
#client .wrap ul li a { display: block; position: relative;  background: #fff; text-align: center; border: 1px solid #e1e1e1; ;}
#client .wrap ul li .client-group2 { height: 155px; min-height: 155px; display: flex; align-items: center; text-align: center; justify-content: center;}
#client .wrap ul li a:after { opacity: 0; content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); transition: 0.2s;}
#client .wrap ul li a:hover:after { opacity: 1}
#client .wrap ul li a img {width: 100%; }
#client .wrap ul li .client-group { padding:20px 0; background: #0e1d44; color: #fff; font-size: 17px; letter-spacing: -1px;;}

#contact { padding: 100px 0; background: url('/img/hd/bg_main_contact.jpg') no-repeat center / cover;}
#contact header { padding: 0 40px 60px; }
#contact header p { padding: 0 0 10px 10px; font-size: 24px; line-height: 1; color: #fff;  }
#contact header h2 { text-align: left; font-size: 70px; line-height: 1; color: #fff; font-weight: 700;}
#contact .wrap { display: flex;}
#contact .wrap .maps-wrap {overflow:hidden; position: relative; width: 61.363%;  height: 628px;}
#contact .wrap .maps-wrap .root_daum_roughmap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#contact .wrap .contact-wrap { flex:1; padding: 0 40px; }
#contact .wrap .contact-wrap > p { padding: 0 0 30px; font-size: 20px; color: #fff; line-height: 1.45; }


@media(max-width:1660px){
    #business ul li { padding: 10px;}
    #business ul li p br { display: none;}
}

@media(max-width:1199px){
    #business h2 a { padding: 40px 106px 9px 11px; }
    #business ul li { padding: 10px;}
    #business ul li h3 { padding-top: 150px; background-size: 100px;}
    #business ul li:hover h3 { margin-top: -50px;}
    #business ul li:hover p { height: 6em;}

}
@media(max-width:991px){
    #business h2 a { display: none;}
    #business ul { justify-content: left;}
    #business ul li { width: 50%; height: 360px;}
    #business ul li h3 { padding-top: 120px; background-size: 80px;}
    #business ul li:hover h3 { margin-top: 0;}
    #business ul li p { opacity: 1; padding-top: 20px; height: auto; font-size: 14px;}
    #business ul li p br { display: block; }

    #client, #contact { padding: 90px 0;}
    #client h2, #contact header h2 { font-size: 64px; }
    #client h2 + p { padding: 25px 0 70px; font-size: 18px;}
    #contact .wrap .maps-wrap { width: 56%;}
    #contact .wrap .contact-wrap { padding: 0 0 0 20px;}

	#client .wrap ul li .client-group {font-size:16px;}

}

@media(max-width:768px){
    #visual { padding-bottom: 70%;}
    #visual #video1 { width: auto; height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); }

    #business ul li { height: 350px;}
    #business ul li h3 { padding-top: 105px; background-size: 70px;}
    #business ul li p { height: 7em;}
    #business ul li p br { display: none; }

    #client, #contact { padding: 80px 0;}
    #client h2, #contact header h2 { font-size: 56px; }
    #client h2 + p { padding: 25px 0 60px;}
    #client .wrap ul { margin: -5px;}
    #client .wrap ul li { padding: 5px; /*width: 25%;*/ width: 33.33%;}

    #contact header { padding: 0 0 50px; }
    #contact .wrap { flex-direction: column;}
    #contact .wrap .maps-wrap { width: 100%; height: 400px;}
    #contact .wrap .contact-wrap { padding: 55px 0 0;}
}

@media(max-width:576px){
    #business ul li { height: 320px;}
    #business ul li h3 { padding-top: 85px; font-size: 18px; background-size: 52px;}
    #business ul li p { padding-top: 15px; height: 8em; font-size: 12px;}
    #business ul li p br { display: none; }

    #client, #contact { padding: 70px 0;}
    #client h2, #contact header  h2 { font-size: 52px; }

    #client h2 + p { padding: 20px 0 50px; font-size: 15px;}
    #client .wrap ul { margin: -5px;}
    #client .wrap ul li { padding: 5px;}

    #contact header p { font-size: 20px; }
    #contact .wrap .maps-wrap { width: 100%; height: 300px; }
    #contact .wrap .contact-wrap > p { font-size: 18px;}

	#client .wrap ul li .client-group { padding: 18px 0; }

}
@media(max-width:440px){
    #client h2 + p br { display: none;}
    #client .wrap ul li  { width: 33.33%;}

}
@media(max-width:380px){
    #business ul li { width: 100%; height: 260px;}
    #business ul li p { height: 5em;}


    #client h2, #contact header  h2 { font-size: 46px; }

    #client .wrap ul li  { width: 50%;}

    #contact header p { font-size: 18px;}
    #contact .wrap .contact-wrap > p { padding: 0 0 20px; font-size: 15px; }
}

#visual{background: url(/_eng/img/hd/visual.jpg); background-size: cover; background-repeat: no-repeat; background-position: bottom;;}




@keyframes more_move {
    0%, 100% { right: 15px;}
    50% { right: 5px; }
}