@charset "utf-8";


/*회사소개*/
/*개요*/
.companyVisu{position:relative; padding-top:140px;}
.companyVisu .visualBg{position:absolute; right:-94px;/* background:url('../../images/company.gif')no-repeat 0% 50%;*/}
.companyVisu .visualBg img{position:absolute; top:-55px; right:-33px; border:0px; overflow:hidden;}
.companyVisu p{width:670px;}
.companyInfo{height:300px; background:url('../../images/company_info_bg.png'); color:#fff; margin-top:-80px}
.companyInfo>article{display: flex; justify-content: center; align-items:center;}
.companyInfo ul{display:flex; justify-content:space-between; align-items: center; width:100%; }
.companyInfo p{display:inline-block; margin-right:28px; font-size:1.8rem; font-weight: 200; color:rgba(255,255,255,0.5); vertical-align:middle;}
.companyInfo strong{display:inline-block; font-size:4rem; vertical-align:middle; letter-spacing: -0.04em;}
/*연결*/
.connecting{height:900px; padding-top:140px; background: #f7fcff;}
.connecting article{display:flex;}
.connecting article>div{flex:2;}
.connecting ul{display:flex; flex-wrap: wrap; width:440px; margin-left:auto; }
.connecting ul li{flex:2; text-align: center; font-size:2rem; font-weight: 500; margin-bottom: 50px; max-width:50%;}
.connecting ul li:nth-child(odd){margin-right:20px;}
.connecting ul div.icon{position:relative; width:150px; height:150px; margin:0px auto 15px; overflow:hidden;}
.connecting ul div.icon>img{position:absolute; top:50%; left:50%; transform:translateX(-50%)translateY(-50%); z-index:4;}
.connecting ul .iconBg{position:relative; width:150px; height:150px;}
.connecting ul li:nth-of-type(2) .iconBg{transform:rotate(-90deg);}
.connecting ul li:nth-of-type(3) .iconBg{transform:rotate(-180deg);}
.connecting ul li:nth-of-type(4) .iconBg{transform:rotate(-180deg);}
.connecting ul li:nth-of-type(6) .iconBg{transform:rotate(-90deg);}
.connecting ul .iconBg::before{content:""; position:absolute; display:block; width:75px; height:75px; z-index:2; transition:0.8s ease-in-out;}
.connecting ul .iconBg::after{content:"";position:absolute;display:block;width: 50%;height: 50%;background: #F7FCFE;z-index: 2;top: 0px;left: -2px;}
.connecting ul .iconBg1::before{bottom:0px; right:0px; transform-origin:bottom left; transform:rotate(-90deg); background:url('../../images/mo_bsns_move.png')no-repeat; }
.connecting ul .iconBg1::after{top:50%;}
.connecting ul .iconBg1 .mainImg{transform:rotateX(180deg);}
.connecting ul .iconBg2::before{top:0px; right:0px; transform-origin:top left; transform:rotate(90deg); background:url('../../images/mo_bsns_move2.png')no-repeat; }
.connecting ul .iconBg .mainImg{position:relative;z-index: 3;}
.connecting ul .iconBg .subImg{position:absolute;right:0;bottom:0px;z-index: 1;}
.connecting ul .iconBg2 .subImg{top:0px; transform: rotate(-450deg);}
.connecting ul li.on .iconBg::before{z-index: 2; transform:rotate(0deg); }


/*조직도*/
.group{background:#172356;height: 850px;/* padding: 30px 0px; */}
.group article{width:1456px;/* height:100%; */margin:0 auto;}
/*.group article::before{content:"";position:absolute;top:50%;display:block;width:1456px;height:800px;background:url('../../images/chart.gif')no-repeat;transform: translateY(-50%);}*/
.group article .animation{content:"";position:absolute;top:50%;display:block;width:1456px;height:800px;transform: translateY(-50%);background:url('../../images/chart.gif')no-repeat;}
.group article *{display:none;}
.group h4 div{background:rgba(89, 199, 247,0.1); padding:35px; border-radius:50%; display:block; margin-bottom:12px;}
.group h4{position:relative; display:inline-block; font-size:2rem; text-align:center; color:#000;}
.group .topGr h4:nth-of-type(1)::before{content:"";display:block; width:9.4px;height:9.4px;background:#f26b55;border-radius:50%;left: 50%;position: absolute;transform: translateX(-50%);bottom: 33px;}
.group .topGr h4:nth-of-type(1)::after{content:"";display:block;position:absolute;width:1px;height: 340px;background:#000;opacity:0.2;left:50%;top:153px;left:50%;transform:translateX(-50%);}
.group>article>ul:nth-of-type(1){position:absolute; top:158px; left:295px;}
.group>article>ul:nth-of-type(1)::after{content:""; position:absolute; right:-29.5px; top:40px; display:block; width:1px; height:184px; background:rgba(0,0,0,0.2);}
.group>article>ul:nth-of-type(1) li img{padding:20px; background:rgba(89,199,247,0.07); border-radius:50%; margin-left:18px; max-width:87px; }
.group>article>ul:nth-of-type(1) li{position:relative; text-align:right; font-size:1.8rem; color:#000; margin-bottom:3px; line-height:87px;}
.group>article>ul:nth-of-type(1) li::after{content:""; position:absolute; right:-31.5px; top:50%; transform:translateY(-50%); display:inline-block; width: 31.5px; height:1px; background:rgba(0,0,0,0.2);}
.group>article>ul:nth-of-type(1) li:nth-of-type(2)::after{width:235px; right:-235px;}
.group>article>ul:nth-of-type(1) li::before{content:""; position:absolute; right:-31.5px; top:50%; transform:translateY(-50%); display:block; width:7.1px; height:7.1px; background:#59c7f7; border-radius:50%; }
.group .topGr{position:absolute; display:flex; left:640.5px; width:550px; justify-content:space-between;}
.group .topGr::after{content:""; position:Absolute; left:50%; top:39%; transform:translateX(-50%)translateY(-50%); width:245px; height:1px; background:#000; opacity:0.2;}
.group>article>ul:nth-of-type(2){position:absolute;left:38px;top: 494px;display:flex;width:1358px;justify-content:space-between;}
.group>article>ul:nth-of-type(2)::before{content:""; position:absolute; display:block; width:1156px; height:1px; background:#000; opacity:0.2; left:50%; top:0px; transform:translateX(-50%);}
.group>article>ul:nth-of-type(2) ul{position:absolute; width:100%; top:0px; padding-top:123px; opacity:0.6; color:#fff; text-align:center; height:0px; transition-duration:0.3s; overflow:hidden; font-size:1.4rem; font-weight:200;}
.group>article>ul:nth-of-type(2) li:hover ul{height:300px;}
.group>article>ul:nth-of-type(2) li:hover::after{width:100%; border-radius:105px; background:#0c2ba8; height:300px; z-index:1;}
.group>article>ul:nth-of-type(2)>li{position:relative; top:0px; width:210px; text-align:center; font-weight:500; font-size:1.8rem; color:#000; transition-duration:0.3s;}
.group>article>ul:nth-of-type(2)>li:hover{top:-51px; }
.group>article>ul:nth-of-type(2) span::before{content:""; position:relative; display:block; width:88px; height:88px; margin:0 auto 15px; border-radius:50%; transition-duration:0.3s; z-index:2;}
.group>article>ul:nth-of-type(2) span{position:relative;}
.group>article>ul:nth-of-type(2) li:hover span{color:#59c7f7; font-size:1.6rem;}
.group>article>ul:nth-of-type(2) *{z-index:2;}
.group>article>ul:nth-of-type(2) ol{position:relative; left:-11px;}
.group>article>ul:nth-of-type(2) ol::before{content:""; position:absolute; top:3px; left:89px; width:1px; height:28px; background:#fff; opacity:0.2; }
.group>article>ul:nth-of-type(2) ol li::before{content:""; display:inline-block; width:9px; height:1px; vertical-align:middle; background:#fff; opacity:0.2; margin-right:3px; margin-top:-3px;}

.group>article>ul:nth-of-type(2)>li::before{content:""; display:block; width:1px; margin:0 auto; height:32px; background:#000; opacity:0.2;}
.group>article>ul:nth-of-type(2)>li::after{content:""; position:absolute; top:-3.5px; left:50%; transform:translateX(-50%); display:block; width:7px; height:7px; border-radius:50%; background:#59c7f7; transition-duration:0.3s;}
.group>article>ul:nth-of-type(2) li:nth-of-type(1) span::before{background:rgba(89, 199, 247,0.1) url('../../images/group_6.png')no-repeat 50% 50%; }
.group>article>ul:nth-of-type(2) li:nth-of-type(2) span::before{background:rgba(89, 199, 247,0.1) url('../../images/group_7.png')no-repeat 50% 50%;}
.group>article>ul:nth-of-type(2) li:nth-of-type(3) span::before{background:rgba(89, 199, 247,0.1) url('../../images/group_8.png')no-repeat 50% 50%;}
.group>article>ul:nth-of-type(2) li:nth-of-type(4) span::before{background:rgba(89, 199, 247,0.1) url('../../images/group_9.png')no-repeat 50% 50%;}
.group>article>ul:nth-of-type(2) li:nth-of-type(5) span::before{background:rgba(89, 199, 247,0.1) url('../../images/group_10.png')no-repeat 50% 50%;}
.group>article>ul:nth-of-type(2) li:hover span::before{width:100%; height:52px; margin:0px auto 10px;}
.group>article>ul:nth-of-type(2) li:nth-of-type(1):hover span::before{width:100%; height:52px; background:url('../../images/group_6.png')no-repeat 50% 50%;}
.group>article>ul:nth-of-type(2) li:nth-of-type(2):hover span::before{background-size:100%; background:url('../../images/group_7.png')no-repeat 50% 50%;}
.group>article>ul:nth-of-type(2) li:nth-of-type(3):hover span::before{width:100%; height:52px; background:url('../../images/group_8.png')no-repeat 50% 50%;}
.group>article>ul:nth-of-type(2) li:nth-of-type(4):hover span::before{background-size:100%; background:url('../../images/group_9.png')no-repeat 50% 50%;}
.group>article>ul:nth-of-type(2) li:nth-of-type(5):hover span::before{background-size:100%; background:url('../../images/group_10.png')no-repeat 50% 50%;}
/*.group .path{display:none; position:absolute; opacity:0.1;}
.group .path1{width:937px;height:888px;background:url('../../images/group_path1.png')no-repeat;top: -180px;left: -580px; transform:translate(-75%,-75%);}
.group .path2{width:595px;height:564px;background:url('../../images/group_path2.png')no-repeat;bottom: -150px;right: -200px; transform:translate(75%,-75%); animation-delay:1s;}
.group .path3{width:595px;height:564px;background:url('../../images/group_path3.png')no-repeat;bottom: -150px;right: -390px; transform:translate(75%,75%);}
.group .path4{width:937px;height:888px;background:url('../../images/group_path4.png')no-repeat;top: -180px;left: -280px; transform:translate(-75%,75%); animation-delay:1s;}
.group.on .path1{animation-duration: 1s; animation-name: path1; animation-fill-mode: forwards;}
.group.on .path4{animation-duration: 1s; animation-name: path4; animation-fill-mode: forwards;}
.group.secondOn .path2{animation-duration: 1s; animation-name: path2; animation-fill-mode: forwards;}
.group.secondOn .path3{animation-duration: 1s; animation-name: path3; animation-fill-mode: forwards;}*/

@keyframes path1{
    0%{transform:translate(-75%,-75%);}
    100%{transform:translate(0%,0%);}
}
@keyframes path2{
    0%{transform:translate(75%,-75%);}
    100%{transform:translate(0%,0%);}
}
@keyframes path3{
    0%{transform:translate(75%,75%);}
    100%{transform:translate(0%,0%);}
}
@keyframes path4{
    0%{transform:translate(-75%,75%);}
    100%{transform:translate(0%,0%);}
}

/*성장*/
.growth{position:relative; padding-top:140px;}
.growth .chart{width:100%;}
.growth .chart>div{height:735px; padding: 70px 0; background:#030921;}
.growth .inChart{position:relative; background: url(../../images/chart_bg.png)no-repeat 50%;  background-size:100% 100%;}
.growth .inChart ol{width:83%; height: 95%; position: absolute; bottom: 11px; left:51%; margin-left: -40%; display: flex; justify-content: space-between;}/*0729*/
.growth .inChart li{display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 2.2rem;}
.growth .inChart span{color:#fff; order: 1; margin-top: 10px;}
.growth .inChart div{width:35px; height:0; background:#59c7f7; border-radius: 20px 20px 0 20px; transition: .7s ease-in-out;}
.growth .inChart em{color:#59c7f7; margin-bottom: 10px; opacity: 0; transition-duration: .5s;}/*0729*/
.growth .inChart li.new em{color: #f98500;}
.growth .inChart li.on em{opacity: 1;}
.growth .inChart li.new div{background: #f98500;}
.growth .inChart li.on:nth-child(1) div{height: 58%;}/*0729*/
.growth .inChart li.on:nth-child(2) div{height: 63%;}/*0729*/
.growth .inChart li.on:nth-child(3) div{height: 67%;}/*0729*/
.growth .inChart li.on:nth-child(4) div{height: 77%;}/*0729*/
.growth .inChart li.on:nth-child(5) div{height: 76%;}/*0729*/
.growth .inChart li.on:nth-child(6) div{height: 85%;}/*0729*/
.growth .inChart li.on:nth-child(7) div{height: 79%;}/*0729*/

/*사업장*/
.way{position:relative; padding-top:140px;}
.way article{z-index:999;}
.way .mapList{display:flex; margin:135px 0px 150px;}
.way .mapList.mobile{display:none;}
.way .mapList li{width:20%; padding-bottom:30px; text-align:center; font-size:2rem; font-weight:500; box-shadow:inset 0px -1px #b2b2b2;}
.way .mapList li.on{color:#0033ff; box-shadow:inset 0px -2px #0033ff}
.way .mapInfo{position:absolute; top:440px; width:570px; padding: 50px 55px;background:rgba(0,51,255,0.9);color:#fff; transition-duration:0.5s;}
.way .mapInfo strong{font-size:2.8rem;}
.way .mapInfo ul{margin-top:30px;}
.way .mapInfo li{display: flex; align-items: center; font-size:1.6rem; font-weight: 200; line-height:2; letter-spacing: -0.01em;}
.way .mapInfo li::before{content:""; display:inline-block; width:24px; height:24px; margin-right:20px; vertical-align:top; background:url('../../images/icon_sprite.png')no-repeat;}
.way .mapInfo li:nth-child(1)::before{background-position:-5px -256px}
.way .mapInfo li:nth-child(2)::before{background-position:-35px -256px}
.way .mapInfo li:nth-child(3)::before{background-position:-3px -281px}
.way .mapInfo.cn li:nth-child(3)::before{background:url(../../images/company_chinaMail.png)3px 5px no-repeat;}
.way .mapInfo li:nth-child(4)::before{background-position:-39px -281px}
.way .map{width:100%; height:660px;}
.way .map.cn1>div,.way .map.cn2>div,.way .map.cn3>div{display:none;}
.way .map.cn1{background:url('../../images/china1.png')no-repeat !important;}
.way .map.cn2{background:url('../../images/china2.png')no-repeat !important;}
.way .map.cn3{background:url('../../images/china3.png')no-repeat !important;}
.way+footer{margin-top:0;}


/*회사소개*/
.companyVisu .visualBg,.companyVisu .visualBg div{position:absolute;}
.companyVisu .visualBg{right:-97px; top:48%; transform:translateY(-50%); width:50%; height:100%;}
.companyVisu .visualBg *{width:976px; height:758px;}
/*.companyVisu iframe{position:absolute; transform:rotate(-45deg); display:none;}
.companyVisu iframe.on{display:block;}*/
.companyVisu .visualBg.secondOn iframe:nth-of-type(1){opacity:0;}
.companyVisu .path1{top:59px; right: 1px;width: 100%;height:100%;/*background:url('../images/company_visual.png')-265px -177px no-repeat;*/ transform:translate(-5%,5%); transition-duration:0.5s;}
.companyVisu .path2{top:0px; right:-307px; width:100%; height:100%; /*background:url('../images/company_visual.png')no-repeat;*/ transform:translate(5%,-5%); transition-duration:0.5s;}
.companyVisu .visualBg.on .path1,.companyVisu .visualBg.on .path2{ transform:translate(0px);}