@charset "utf-8";
#wrap {position:relative; min-width:320px; width:calc(100% - 150px); margin-left:150px; overflow-x:hidden;}

#headLeft {position:fixed; z-index:51; left:0; top:0; width:150px; height:100vh; padding:40px 0; background:#FFF; display:flex; justify-content:space-between; align-items:center; flex-direction:column;}
#headLeft .logo {display:block; width:97px; height:57px; background:url('../img/logo_head.png') no-repeat center center/contain; overflow:hidden; text-indent:-999px;}
#headLeft .btnMenu {position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:center; width:32px; height:32px; transition:.2s ease-out;}
#headLeft .btnMenu .line {width:100%; height:3px; background:#000;}
#headLeft .btnMenu:hover {padding:5px 0;}
#headLeft .contentInfo {position:relative; display:flex; justify-content:center; align-items:center; width:100px; height:100px; font-size:16px; font-weight:700; transform:rotate(-90deg);}

#allMenu {pointer-events:none; position:fixed; z-index:100; left:0; top:0; width:100%; height:100vh; transition:.3s ease-in-out;}
#allMenu .lang {opacity:0; position:absolute; z-index:102; top:0; right:120px; height:100px; display:flex; justify-content:center; align-items:center; color:#FFF; font-size:18px; font-weight:500; transition-delay:.5s;}
#allMenu .bgAllMenu {position:fixed; z-index:99; left:-100%; top:0; width:100%; height:100vh; background:url('../img/bg_allMenu.jpg') no-repeat center center/cover;}
#allMenu .allMenuHead {position:absolute; z-index:100; left:0; top:0; width:150px; height:100vh; padding:40px 0; display:flex; justify-content:space-between; align-items:center; flex-direction:column;}
#allMenu .allMenuHead .temp {width:97px; height:57px;}
#allMenu .allMenuHead .btnClose {position:absolute; width:32px; height:32px; padding:5px 0;}
#allMenu .allMenuHead .btnClose .line {transition:.3s ease-out;}
#allMenu .allMenuHead .btnClose .line:nth-child(1) {position:absolute; left:50%; top:25%; width:100%; height:3px; background:#FFF; transform:translate(-50%, -50%);}
#allMenu .allMenuHead .btnClose .line:nth-child(2) {position:absolute; left:50%; top:75%; width:100%; height:3px; background:#FFF; transform:translate(-50%, -50%);}
#allMenu .allMenuHead .contentInfo {position:relative; display:flex; justify-content:center; align-items:center; width:100px; height:100px; color:#FFF; font-size:16px; font-weight:700; transform:rotate(-90deg)}
#allMenu .contAllMenu {opacity:0; position:relative; z-index:101; display:flex; justify-content:center; align-items:center; height:100%; transition-delay:.1s;}
#allMenu .contAllMenu .gnb {position:relative; display:flex; justify-content:center;}
#allMenu .contAllMenu .gnb > ul {display:flex; justify-content:center;}
#allMenu .contAllMenu .gnb > ul li {overflow:hidden;}
#allMenu .contAllMenu .gnb > ul li a {transform:translateY(30px); opacity:0; transition:.7s ease-out;}



#allMenu .contAllMenu .gnb > ul > li + li {margin-left:70px;}
#allMenu .contAllMenu .gnb > ul > li a {color:#FFF; font-size:30px; line-height:30px; font-weight:700;}
#allMenu .contAllMenu .gnb > ul > li .depth {margin-top:40px;}
#allMenu .contAllMenu .gnb > ul > li .depth > li + li {margin-top:40px;}
#allMenu .contAllMenu .gnb > ul > li .depth > li > a {position:relative; display:inline-block; color:#FFF; font-size:18px; line-height:30px; font-weight:700;}
#allMenu .contAllMenu .gnb > ul > li .depth > li > a:after {content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:#CC1420; transition:.3s ease-out;}


#allMenu .contAllMenu .gnb > ul > li .depth > li > a:hover {color:#CC1420;}
#allMenu .contAllMenu .gnb > ul > li .depth > li > a:hover:after {width:100%;}
#allMenu .contAllMenu .gnb > ul > li .depth2 {margin-top:20px;}
#allMenu .contAllMenu .gnb > ul > li .depth2 > li + li {margin-top:20px;}
#allMenu .contAllMenu .gnb > ul > li .depth2 > li a {display:inline-block; color:#aaa; font-size:18px; line-height:18px; font-weight:500;}
#allMenu .contAllMenu .gnb > ul > li .depth2 > li > a:hover {color:#CC1420;}

.openAllMenu {overflow:hidden;}
.openAllMenu #headLeft {opacity:0;}
.openAllMenu #allMenu {pointer-events:all;}
.openAllMenu #allMenu .lang {opacity:1;}
.openAllMenu #allMenu .contAllMenu {opacity:1; transition-delay:0s;}
.openAllMenu #allMenu .btnClose .line:nth-child(1) {top:50%; transform:translate(-50%, -50%) rotate(45deg);}
.openAllMenu #allMenu .btnClose .line:nth-child(2) {top:50%; transform:translate(-50%, -50%) rotate(-45deg);}
.openAllMenu #allMenu .contAllMenu .gnb > ul li a {transform:translateY(0); opacity:1;}

.swpMaVisual {position:relative; width:100%; height:100vh;}
.swpMaVisual .swpVideo {position:relative; width:100%; height:100%; object-fit:cover;}
.swpMaVisual .swpItem {position:relative; width:100%; height:100vh; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.swpMaVisual .swpItem .cont {position:absolute; left:0; top:0; z-index:1; margin-left:150px; width:100%; height:100%;}
.swpMaVisual .swpItem .cont .tit {position:absolute; left:20px; top:40%; color:#FFF; font-size:60px; font-weight:700; line-height:75px;}
.swpMaVisual .swpNav .btnPrev {position:absolute; z-index:2; left:50px; top:50%; width:23px; height:42px; margin-top:-21px; background:url('../img/btn_left_white.png') no-repeat center center/contain; cursor:pointer;}
.swpMaVisual .swpNav .btnNext {position:absolute; z-index:2; right:50px; top:50%; width:23px; height:42px; margin-top:-21px; background:url('../img/btn_right_white.png') no-repeat center center/contain; cursor:pointer;}

#headTop {position:fixed; z-index:51; left:0; top:0; display:flex; justify-content:space-between; align-items:center; width:100%; height:100px; padding:0 120px 0 150px; transition:.3s ease-out;}
#headTop .logo {opacity:0; display:block; width:97px; height:57px; background:url('../img/logo_head.png') no-repeat center center/contain; overflow:hidden; text-indent:-999px; transform:translate(-130px,20px); transition:.3s ease-out;}
#headTop > ul {display:flex; justify-content:flex-end; align-items:center; height:100%;}
#headTop > ul > li {position:relative; height:100%;}
#headTop > ul > li:after {content:''; position:absolute; left:50%; top:20px; width:8px; height:8px; border-radius:8px; background:#CC1420; opacity:0; transform:translate(-50%, -10px); transition:.3s ease-out;}
#headTop > ul > li + li {margin-left:70px;}
#headTop > ul > li a {display:flex; align-items:center; justify-content:center; height:100%; color:#FFF; font-size:18px; font-weight:500;}
#headTop > ul > li .depth {position:absolute; left:50%; top:100%; min-width:200px; padding:20px; transform:translate(-50%, 50px); opacity:0; visibility:hidden; background:rgba(255,255,255,.95); transition:.3s ease-out; box-shadow:10px 10px 30px rgba(0, 0, 0, 0.5);}
#headTop > ul > li .depth li {text-align:center;}
#headTop > ul > li .depth li + li {margin-top:20px;}
#headTop > ul > li .depth li a {position:relative; display:inline-block; color:#000; font-size:16px; line-height:30px; font-weight:500; white-space:nowrap;}
#headTop > ul > li .depth li a:after {content:''; position:absolute; left:0; bottom:0; width:0; height:3px; background:#cc1420; transition:.5s ease-out;}
#headTop > ul > li .depth li a:hover {color:#cc1420;}
#headTop > ul > li .depth li a:hover:after {width:100%;}
#headTop > ul > li:hover .depth {opacity:1; visibility:visible; transform:translate(-50%,0);}
#headTop > ul > li:hover:after {opacity:1; transform:translate(-50%,0);}
#headTop > ul > li.curr:after {opacity:1; transform:translate(-50%,0);}

#foot {padding:70px 0; background:#222;}
#foot .address {color:#f3f3f3; font-size:16px; line-height:30px;}
#foot .address a {color:#F3F3F3;}
#foot .address em {font-weight:500;}
#foot .copyright {color:#F3F3F3; font-size:16px; line-height:30px; opacity:.5;}

.scroll #headLeft .logo {opacity:0;}
.scroll #headTop {z-index:99; height:70px; background:#FFF; box-shadow:0 0 5px #eee;}
.scroll #headTop .logo {opacity:1; width:80px; transform:translate(-120px,0);}
.scroll #headTop > ul > li a {color:#000;}

.br_pc {display:block;}

.btnMore {display:inline-flex; align-items:center;}
.btnMore .btnTxt {color:#222; font-size:16px; line-height:18px; font-weight:500;}
.btnMore .btnIcon {position:relative; width:91px; margin-left:20px;}
.btnMore .btnIcon:after {content:''; position:absolute; z-index:1; right:0; top:50%; width:46px; height:46px; margin-top:-23px; border-radius:100%; background:#cd1521; transition:.3s ease-out;}
.btnMore .btnIcon:before {content:''; position:absolute; z-index:2; left:0; top:50%; width:72px; height:14px; margin-top:-7px;}
.btnMore.black .btnIcon:before {background:url('../img/icon_btn_arror_right_black_on.png') no-repeat center center/contain;}
.btnMore.white .btnIcon:before {background:url('../img/icon_btn_arror_right_white.png') no-repeat center center/contain;}
.btnMore.white .btnTxt {color:#FFF;}
.btnMore:hover .btnIcon:before {animation:fadeInLeft .5s .2s;}

/*MAIN*/
.maContainer {width:1300px; margin:0 auto;}
.maCompanyFacts {padding:150px 0; overflow:hidden;}
.maCompanyFacts .headBox {display:flex; justify-content:space-between;}
.maCompanyFacts .headBox .tit {flex:0 0 50%; color:#000; font-size:60px; line-height:60px; font-weight:700;}
.maCompanyFacts .headBox .txt {flex:0 0 50%; margin-top:0px; color:#000; font-size:18px; line-height:32px; font-weight:400;}
.maCompanyFacts .contBox ul {display:flex; justify-content:space-between; align-items:center; margin-top:60px;}
.maCompanyFacts .contBox ul li {flex:1; text-align:center;}
.maCompanyFacts .contBox ul li .tit {color:#CC1420; font-size:18px; line-height:18px; font-weight:700;}
.maCompanyFacts .contBox ul li .txt {margin-top:20px; color:#222222; font-size:65px; line-height:65px; font-weight:700;}

.maSolution {position:relative; padding:220px 0 180px; overflow:hidden;}
.maSolution .bgSolution {position:absolute; z-index:0; left:0; top:0; width:100%; height:60%; background:#f3f3f3;}
.maSolution .headBox .tit {color:#222; font-size:60px; line-height:60px; font-weight:700;}
.maSolution .headBox .txt {margin-top:50px; color:#333; font-size:18px; line-height:32px; font-weight:400;}
.maSolution .layoutSolution {position:relative; z-index:1; display:flex; justify-content:space-between; flex-wrap:wrap;}
.maSolution .layoutSolution .item {flex:0 0 45%; margin-bottom:100px;}
.maSolution .layoutSolution .item:nth-child(3) {position:relative; top:-300px;}
.maSolution .layoutSolution .img {position:relative; display:block; width:100%; height:0; padding-bottom:95%; background-repeat:no-repeat; background-position:center center; background-size:cover; cursor:default;}
.maSolution .layoutSolution .img .txt {position:absolute; left:50px; bottom:50px; color:#FFF; font-size:30px; line-height:30px; font-weight:500;}
.maSolution .btnMore {margin-top:32px;}

.maProductIntro {position:relative; height:700px; overflow:hidden;}
.maProductIntro .bgBox {position:absolute; left:0; top:0; width:100%; height:100%; background:url('../img/img_bg_ma_product.jpg') no-repeat center center/cover;}
.maProductIntro .contBox {position:relative; z-index:1; display:flex; align-items:center; height:100%;}
.maProductIntro .contBox .tit01 {color:#FFF; font-size:18px; line-height:18px; font-weight:700;}
.maProductIntro .contBox .tit02 {margin-top:40px; color:#FFF; font-size:55px; line-height:70px; font-weight:700;}
.maProductIntro .contBox .btnMore {margin-top:50px;}

.maNews {margin-top:180px; padding:160px 0; background:#f9f9f9; overflow:hidden;}
.maNews .inner {position:relative;}
.maNews .headBox {position:absolute; z-index:2; background:#f9f9f9; left:0; top:0; width:410px; height:100%;}
.maNews .headBox:before {content:''; position:absolute; left:0; width:1000px; height:100%; background:#F9F9F9; transform:translateX(-100%);}
.maNews .headBox .tit {margin-top:70px; color:#222; font-size:60px; line-height:60px; font-weight:700;}
.maNews .headBox .txt {margin-top:50px; color:#333; font-size:18px; line-height:32px; font-weight:400;}
.maNews .headBox .btnMore {margin-top:50px;}
.maNews .contBox {margin-left:470px;}
.maNews .swpMaNews .swpItem {width:440px;}
.maNews .swpMaNews .swpItem .img {display:block; width:100%; height:0; padding-bottom:72%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.maNews .swpMaNews .swpItem .tit {display:block; margin-top:36px; color:#000; font-size:20px; line-height:32px; font-weight:500;}
.maNews .swpMaNews .swpItem .date {display:block; margin-top:24px; color:#000; font-size:16px; line-height:16px; font-weight:300;}
.maNews .swpMaNews .swiper-container {overflow:visible;}
.maNews .swpMaNews .swiper-slide {width:auto; margin-right:60px;}
.maNews .swpMaNews .swiper-pagination {position:relative; margin-top:32px; line-height:12px; text-align:left;}
.maNews .swpMaNews .swiper-pagination-bullet {width:12px; height:12px; margin:0; border-radius:12px;}
.maNews .swpMaNews .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:18px;}
.maNews .swpMaNews .swiper-pagination-bullet-active {background:#333;}

.maCustomer {padding:150px 0; overflow:hidden;}
.maCustomer .headBox .tit {color:#000; font-size:60px; line-height:60px; font-weight:700;}
.maCustomer .contBox {position:relative; margin-top:80px;}
.maCustomer .contBox:before {content:''; z-index:2; position:absolute; left:-100%; width:100%; height:100%; background:#FFF;}
.swpMaCustomer .swiper-container {overflow:visible;}
.swpMaCustomer .swiper-slide {width:auto; margin-right:88px;}
/*MAIN END*/

/*Sub*/
.subMenu + #subContent {padding-top:40px;}
#subContent {overflow:hidden; padding:160px 0;}
.subContainer {width:1300px; margin:0 auto;}
.subBanner {position:relative; width:100%; height:600px; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.subBanner .contBanner {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
.subBanner .tit {color:#FFF; font-size:40px; line-height:44px; font-weight:700;}
.subMenu {display:flex; justify-content:center; align-items:center; height:160px;}
.subMenu ul {overflow:hidden;}
.subMenu ul li {float:left;}
.subMenu ul li + li {margin-left:50px;}
.subMenu ul li a {position:relative; display:block; padding:0 4px; color:#000; font-size:18px; line-height:36px; font-weight:700;}
.subMenu ul li a:after {content:''; position:absolute; left:0; bottom:0; width:0; height:3px; background:#CC1420; transition:.3s ease-out;}
.subMenu ul li a:hover {color:#CC1420;}
.subMenu ul li.on a {color:#CC1420;}
.subMenu ul li.on a:after {width:100%;}

.companyIntro {padding:0 0 160px; overflow:hidden;}
.companyIntro .headBox {display:flex; justify-content:space-between;}
.companyIntro .headBox .tit {flex:0 0 50%; color:#000; font-size:60px; line-height:75px; font-weight:700;}
.companyIntro .headBox .txt {flex:0 0 50%; color:#000; font-size:18px; line-height:32px; font-weight:400;}
.companyIntro .contBox {margin-top:100px;}
.companyIntro .swpCompanyIntro .swiper-container {overflow:visible;}
.companyIntro .swpCompanyIntro .swiper-slide {width:auto; margin-right:50px;}
.companyIntro .swpCompanyIntro .swpItem {width:600px;}
.companyIntro .swpCompanyIntro .swpItem .img {display:block; width:100%; height:0; padding-bottom:70%; background-repeat:no-repeat; background-position:center center; background-size:cover;}

.overview {padding:150px 0; background:#F9F9F9; text-align:center;}
.overview .headBox .tit {color:#222; font-size:30px; line-height:33px; font-weight:700;}
.overview .contBox {margin-top:40px;}
.overview .contBox ul {display:flex;}
.overview .contBox ul li {flex:1; text-align:center;}
.overview .contBox ul li .img {display:flex; align-items:center; justify-content:center; width:100%; height:80px;}
.overview .contBox ul li .tit {margin-top:10px; color:#CC1420; font-size:20px; line-height:22px; font-weight:700;}
.overview .contBox ul li .txt {margin-top:20px; color:#000; font-size:18px; line-height:28px; font-weight:400;}

.employee {padding:160px 0;}
.employee .layoutEmployee {display:flex;}
.employee .layoutEmployee .headBox {flex:0 0 50%;}
.employee .layoutEmployee .contBox {flex:0 0 50%;}
.employee .headBox .tit {color:#000; font-size:60px; line-height:75px; font-weight:700;}
.employee .headBox .txt {margin-top:40px; color:#333; font-size:18px; line-height:32px; font-weight:400;}
.employee .chartBox {display:flex; width:100%; align-items:center;}
.employee .chartBox .chart {flex:0 0 50%;}
.employee .chartBox .chartInfo {flex:0 0 50%;}
.employee .chartBox .chartInfo ul {display:flex;}
.employee .chartBox .chartInfo ul li {flex:1; text-align:center;}
.employee .chartBox .chartInfo ul li .tit {color:#000; font-size:40px; line-height:40px; font-weight:700;}
.employee .chartBox .chartInfo ul li .txt {display:flex; justify-content:center; align-items:center; margin-top:34px; color:#000; font-size:18px; line-height:18px; font-weight:400;}
.employee .chartBox .chartInfo ul li .txt .colorCircle {display:block; width:20px; height:20px; border-radius:100%; margin-right:10px;}
.employee .chartBox .chartInfo ul li .txt .colorCircle.blue {background:#2d383f;}
.employee .chartBox .chartInfo ul li .txt .colorCircle.red {background:#aa1f1f;}


.organization {padding:160px 0 120px; background:#F9F9F9; text-align:center;}
.organization .headBox .tit {color:#000; font-size:30px; line-height:33px; font-weight:700;}
.organization .contBox {margin-top:30px;}
.organization .orgBox {position:relative; display:block; width:100%; max-width:1192px; height:0; margin:0 auto; padding-bottom:70%; background:url('../img/bg_org.png') no-repeat 0 0/100% 100%;}
.organization .orgBox .txtLv1 {position:absolute; left:40%; top:0; display:flex; align-items:center; justify-content:center; width:20%; height:27%; color:#FFF; font-size:18px; line-height:24px; flex-wrap:wrap;}
.organization .orgBox .txtLv2 {position:absolute; left:80%; top:28%; display:flex; align-items:center; justify-content:center; width:20%; height:7%; color:#FFF; font-size:18px; line-height:24px; flex-wrap:wrap;}
.organization .orgBox em {font-weight:700;}
.organization .orgBox .txtStyle02 {display:flex; align-items:center; justify-content:center; width:20%; height:7%; color:#000; font-size:18px; line-height:24px; flex-wrap:wrap;}
.organization .orgBox .txtLv301 {position:absolute; left:0; top:46.4%;}
.organization .orgBox .txtLv302 {position:absolute; left:26.5%; top:46.4%;}
.organization .orgBox .txtLv303 {position:absolute; left:53.5%; top:46.4%;}
.organization .orgBox .txtLv304 {position:absolute; left:80%; top:46.4%;}

.organization .orgBox .txtLv401 {position:absolute; left:0; top:56.5%;}
.organization .orgBox .txtLv402 {position:absolute; left:26.5%; top:56.5%;}
.organization .orgBox .txtLv403 {position:absolute; left:53.5%; top:56.5%;}
.organization .orgBox .txtLv404 {position:absolute; left:80%; top:56.5%;}

.organization .orgBox .txtLv501 {position:absolute; left:0; top:65.5%;}
.organization .orgBox .txtLv502 {position:absolute; left:26.5%; top:65.5%;}
.organization .orgBox .txtLv503 {position:absolute; left:53.5%; top:65.5%;}
.organization .orgBox .txtLv504 {position:absolute; left:80%; top:65.5%;}

.organization .orgBox .txtLv601 {position:absolute; left:0; top:74.5%;}
.organization .orgBox .txtLv602 {position:absolute; left:26.5%; top:74.5%;}
.organization .orgBox .txtLv603 {position:absolute; left:53.5%; top:74.5%;}

.organization .orgBox .txtLv701 {position:absolute; left:0; top:83.6%;}
.organization .orgBox .txtLv702 {position:absolute; left:26.5%; top:83.6%;}

.organization .orgBox .txtLv801 {position:absolute; left:0; top:92.7%;}
.organization .orgBox .txtLv802 {position:absolute; left:26.5%; top:92.7%;}
/*Sub end*/

/*chart*/
.pieChart--center--innerCircle { fill:#FFF;}
.pieChart--center--text { font-size:28px;}
.pieChart--center--outerCircle { fill:rgba(255, 255, 255, 0.75);}
.pieChart--detail--divider { stroke:adjust-lightness(#333, 30); stroke-width:1;}
.pieChart--detail--percentage { font-size:40px; font-weight:700; fill:#000; stroke-width:1px;}
.pieChart--detail__left { text-align:left;}
.pieChart--detail__right { text-align:right;}
.pieChart__blue { fill:#2d383f;}
.pieChart__red { fill:#aa1f1f;}

.chart .txt {color:#000; font-size:18px; line-height:20px; font-weight:400; text-align:center;}
#pieChart {position:relative;}
#pieChart .per100 {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); color:#666; font-size:30px; line-height:30px; font-weight:700;}
#pieChart .perBlue {position:absolute; left:35px; top:35%; color:#FFF; font-size:18px; line-height:18px; font-weight:700;}
#pieChart .perRed {position:absolute; right:35px; bottom:35%; color:#FFF; font-size:18px; line-height:18px; font-weight:700;}
/*chart end*/

/*news*/
.newsList ul {overflow:hidden; margin:-64px 0 0 -26px;}
.newsList ul li {float:left; width:calc(33.33% - 26px); margin:64px 0 0 26px;}
.newsList ul li .img {display:block; width:100%; height:0; padding-bottom:70%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.newsList ul li .tit {display:block; height:72px; margin-top:40px; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#000; font-size:20px; line-height:36px; font-weight:500;}
.newsList ul li .date {margin-top:20px; color:#000; font-size:16px; line-height:16px; font-weight:300;}

.newsDetail .headBox {padding-bottom:36px; border-bottom:1px solid #000;}
.newsDetail .headBox .tit {color:#000; font-size:30px; line-height:40px; font-weight:500;}
.newsDetail .headBox .date {margin-top:36px; color:#000; font-size:16px; line-height:16px; font-weight:300;}
.newsDetail .contBox {padding:80px 0; font-size:18px; line-height:34px; font-weight:300;}
.navBox {display:flex; justify-content:center; align-items:center; margin-top:100px;}
.navBox .btnNav {display:flex; justify-content:center; align-items:center; width:160px; height:56px; }
.navBox .list { color:#CC1420; font-size:20px; line-height:20px; font-weight:500; border:2px solid #CC1420; border-radius: 40px;}
/*news end*/

/*paging*/
.paging {margin-top:60px; display:flex; justify-content:center; align-items:center;}
.paging a {display:flex; width:36px; height:36px; margin:0 8px; justify-content:center; align-items:center; color:#000; font-size:20px; line-height:22px; font-weight:500; background:#f3f3f3;}
.paging a.on {background:#2c2c2c; color:#FFF;}
/*paging end*/





    /*  팝업레이어 */
    #hd_pop .hd_pops .hd_pops_con {
        height:auto !important;
    }
    /*  팝업레이어 */




#top {position:fixed; z-index:1000; right:70px; bottom:60px; width:43px; height:43px; background:url('../img/btn_top.jpg') no-repeat center center/contain; overflow:hidden; text-indent:-999px;}

@media screen and (max-width:1620px){
    /*#headLeft {opacity:.7;}*/
}


@media screen and (max-width:1450px){
    #wrap {}
    .maContainer {width:100%; padding:0 25px;}
    .subContainer {width:100%; padding:0 25px;}
    .maSolution .layoutSolution .item:nth-child(3) {top:-150px;}
}

#headMobile {display:none;}
#allMenuMobile {display:none;}
.organization .imgOrg {display:none;}
@media screen and (max-width:1024px){
    #wrap {margin-left:0; width:100%;}
    .br_m {display:block;}
    #headMobile {position:fixed; z-index:100; left:0; top:0; display:flex; width:100%; height:50px; justify-content:space-between; align-items:center; background:#FFF; padding:0 12px;}
    #headMobile .logo {display:block; width:49px; height:28px; background:url('../img/logo_head.png') no-repeat center center/contain; overflow:hidden; text-indent:-999px;}
    #headMobile .btnMenu {display:block; width:24px; height:24px; background:url('../img/icon_menu_mobile.png') no-repeat center center/contain; overflow:hidden; text-indent:-999px;}
    #headLeft {display:none;}
    #headTop {display:none;}
    #allMenuMobile {transform:translateX(100%); transition:.5s ease-out; position:fixed; z-index:1000; right:0; top:0; width:calc(100% - 25px); max-width:670px; height:100vh; display:block; background:#FFF;}
    #allMenuMobile .headAllMenuMobile {display:flex; justify-content:space-between; align-items:center; height:50px; padding:0 25px;}
    #allMenuMobile .headAllMenuMobile .lang {overflow:hidden;}
    #allMenuMobile .headAllMenuMobile .lang li {float:left; position:relative;}
    #allMenuMobile .headAllMenuMobile .lang li + li {margin-left:10px; padding-left:10px;}
    #allMenuMobile .headAllMenuMobile .lang li + li:before {content:''; position:absolute; left:0; top:0; height:100%; width:1px; background:#ccc;}
    #allMenuMobile .headAllMenuMobile .lang li a {position:relative; color:#000; font-size:13px; line-height:13px; font-weight:700;}
    #allMenuMobile .headAllMenuMobile .lang li.on a:after {content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:#000;}
    #allMenuMobile .headAllMenuMobile .btnClose {display:block; width:12px; height:12px; background:url('../img/icon_close_black.png') no-repeat center center/contain; overflow:hidden; text-indent:-999px;}
    #allMenuMobile .contAllMenuMobile {height:calc(100vh - 50px); padding:20px 0; overflow-y:auto;}
    #allMenuMobile .contAllMenuMobile .gnb > ul > li > a {position:relative; display:block; padding:0 25px; color:#000; font-size:16px; line-height:45px; font-weight:700;}
    #allMenuMobile .contAllMenuMobile .gnb > ul > li > a:after {content:''; position:absolute; top:50%; right:25px; width:11px; height:11px; background:url('../img/icon_plus.png') no-repeat center center/contain;}
    #allMenuMobile .contAllMenuMobile .depth {display:none; padding:20px 45px; background:#f9f9f9; overflow:hidden;}
    #allMenuMobile .contAllMenuMobile .depth > li > a {display:inline-block; color:#000; font-size:13px; line-height:26px; font-weight:700;}
    #allMenuMobile .contAllMenuMobile .depth2 {display:block; margin-bottom:30px;}
    #allMenuMobile .contAllMenuMobile .depth2 > ul > li > a {display:inline-block; color:#000; font-size:12px; line-height:24px; font-weight:400;}
    
    .openAllMenuMobile {overflow:hidden;}
    .openAllMenuMobile #allMenuMobile {transform:translateX(0);}
    
    .swpMaVisual .swpNav {display:none;}
    .swpMaVisual .swpItem .cont {padding:0 25px; margin-left:0;}
    .swpMaVisual .swpItem .cont .tit {position:relative; left:0; font-size:30px; line-height:35px;}
    
    .maCompanyFacts {padding:80px 0;}
    .maCompanyFacts .headBox {flex-direction:column;}
    .maCompanyFacts .headBox .tit {font-size:30px; line-height:35px;}
    .maCompanyFacts .headBox .txt {margin-top:15px; font-size:12px; line-height:22px;}
    .maCompanyFacts .contBox ul {flex-wrap:wrap; margin-top:40px; margin-bottom:-40px;}
    .maCompanyFacts .contBox ul li {flex:0 0 50%; margin-bottom:40px;}
    .maCompanyFacts .contBox ul li .tit {font-size:12px; line-height:22px;}
    .maCompanyFacts .contBox ul li .txt {font-size:33px; line-height:33px;}
    .maSolution {padding:80px 0;}
    .maSolution .headBox .tit {font-size:30px; line-height:35px;}
    .maSolution .headBox .txt {margin-top:20px; font-size:12px; line-height:22px;}
    .maSolution .layoutSolution {flex-wrap:wrap; margin-bottom:-20px;}
    .maSolution .layoutSolution .item {flex:0 0 100%; margin-bottom:40px;}
    .maSolution .layoutSolution .item:nth-child(3) {top:0;}
    .maSolution .layoutSolution .img .txt {left:20px; bottom:20px; font-size:15px; line-height:15px; font-weight:400;}
    .maSolution .btnMore {margin-top:20px;}
    
    .btnMore .btnTxt {font-size:12px; line-height:12px;}
    .btnMore .btnIcon {width:46px; margin-left:10px;}
    .btnMore .btnIcon:before {width:36px; height:7px; margin-top:-4px;}
    .btnMore .btnIcon:after {width:23px; height:23px; margin-top:-12px;}
    
    .maProductIntro {height:370px;}
	.maProductIntro .bgBox {position:absolute; left:0; top:0; width:100%; height:100%; background:url('../img/img_bg_ma_product_m.jpg') no-repeat center center/cover;}
    .maProductIntro .contBox .tit01 {font-size:12px; line-height:12px;}
    .maProductIntro .contBox .tit02 {margin-top:20px; font-size:20px; line-height:30px;}
    .maProductIntro .contBox .btnMore {margin-top:40px;}
    
    .maNews {margin-top:80px; padding:80px 0;}
    .maNews .headBox {position:relative; width:100%; height:auto; margin-bottom:30px;}
    .maNews .headBox .tit {margin-top:0; font-size:30px; line-height:35px;}
    .maNews .headBox .txt {margin-top:20px; font-size:12px; line-height:22px;}
    .maNews .headBox .btnMore {margin-top:20px;}
    .maNews .contBox {margin-left:0;}
    .maNews .swpMaNews .swiper-slide {margin-right:30px;}
    .maNews .swpMaNews .swpItem {width:220px;}
    .maNews .swpMaNews .swpItem .tit {margin-top:20px; font-size:12px; line-height:22px;}
    .maNews .swpMaNews .swpItem .date {margin-top:10px; font-size:10px; line-height:12px;}
    .maNews .swpMaNews .swiper-pagination {display:none;}
    
    .maCustomer {padding:80px 0;}
    .maCustomer .headBox .tit {font-size:30px; line-height:35px;}
	.swpMaCustomer .swiper-slide {margin-right:30px;}
    
    #foot {padding:40px 0;}
    #foot .address {font-size:12px; line-height:22px;}
    #foot .copyright {font-size:12px; line-height:22px;}
    
    #top {display:none;}
    
    #subContent {padding:40px 0;}
    .subBanner {height:0; margin-top:50px; padding-bottom:65%;}
    .subBanner .tit {font-size:20px; line-height:22px;}
    .subMenu {display:none;}
    .companyIntro {padding:0 0 80px;}
    .companyIntro .headBox {flex-wrap:wrap;}
    .companyIntro .headBox .tit {flex:0 0 100%; font-size:30px; line-height:36px;}
    .companyIntro .headBox .txt {flex:0 0 100%; margin-top:30px; font-size:12px; line-height:22px;}
    .companyIntro .contBox {margin-top:25px;}
    .companyIntro .swpCompanyIntro .swiper-slide {margin-right:20px;}
    .companyIntro .swpCompanyIntro .swpItem {width:215px;}
    .overview {padding:50px 0;}
    .overview .headBox .tit {font-size:15px; line-height:17px;}
    .overview .contBox ul {flex-wrap:wrap; margin-bottom:-40px;}
    .overview .contBox ul li {flex:0 0 50%; margin-bottom:40px;}
    .overview .contBox ul li .tit {margin-top:5px; font-size:14px; line-height:16px;}
    .overview .contBox ul li .txt {margin-top:10px; font-size:12px; line-height:16px;}
    .overview .contBox ul li .img {height:50px;}
    .overview .contBox ul li .img img {height:26px;}
    
    .employee {padding:80px 0;}
    .employee .headBox .tit {font-size:30px; line-height:36px;}
    .employee .layoutEmployee {flex-wrap:wrap;}
    .employee .layoutEmployee .headBox {flex:0 0 100%;}
    .employee .layoutEmployee .contBox {flex:0 0 100%;}
    .employee .headBox .txt {margin-top:20px; font-size:12px; line-height:22px;}
    .employee .chartBox {flex-wrap:wrap; margin-top:30px;}
    .employee .chartBox .chart {flex:0 0 100%;}
    .employee .chartBox .chartInfo {flex:0 0 100%;}
    .employee .chartBox .chartInfo ul {width:100%; justify-content:center; margin-top:20px;}
    .employee .chartBox .chartInfo ul li .tit {font-size:20px; line-height:20px;}
    .employee .chartBox .chartInfo ul li .txt {margin-top:17px; font-size:12px; line-height:12px;}
    .employee .chartBox .chartInfo ul li .txt .colorCircle {width:12px; height:12px; margin-right:5px;}
    .employee .chartBox .chartInfo ul li {flex:0 0 30%;}
    
    .organization {padding:80px 0 60px;}
    .organization .headBox .tit {font-size:15px; line-height:15px;}
    .organization .orgBox {display:none;}
    .organization .imgOrg {display:block; width:100%; max-width:584px; margin:0 auto;}
    
    .newsList ul {margin:-24px 0 0 -12px;}
    .newsList ul li {width:calc(50% - 12px); margin:24px 0 0 12px;}
    .newsList ul li .tit {font-size:14px; line-height:24px; height:48px; margin-top:20px; font-weight:400;}
    .newsList ul li .date {margin-top:10px; font-size:12px; line-height:12px;}
    
    .newsDetail .headBox {padding-bottom:20px;}
    .newsDetail .headBox .tit {font-size:18px; line-height:28px;}
    .newsDetail .headBox .date {margin-top:20px; font-size:12px; line-height:12px;}
    .newsDetail .contBox {padding:40px 0; font-size:12px; line-height:22px;}
    .newsDetail .contBox img {width:100%;}
    
    .navBox {margin-top:20px;}
    .navBox .btnNav {width:100px; height:40px;}
    .navBox .list {font-size:14px; line-height:14px;}
    
    .paging a {width:28px; height:28px; margin:0 4px; font-size:12px; line-height:12px;}
    
    .chart .txt {font-size:12px; line-height:14px;}



    /*  팝업레이어 */
    #hd_pop .hd_pops .hd_pops_con {
        height:auto !important;
    }
    /*  팝업레이어 */
}


@media screen and (max-width:640px){
    /*  팝업레이어 */
    #hd_pop {
        width:100%;
    }

    #hd_pop .hd_pops {
        width:96%;
        position: initial;
        margin: auto auto;
        margin-top: 10px;
    }

    #hd_pop .hd_pops .hd_pops_con {
        width:auto !important;
        height:auto !important;
    }
    /*  팝업레이어 */
}