@charset "utf-8";

.br {display:block;}

    @media screen and (max-width:999px){
        .br {display:inline;}
    }

    b {font-weight:600;}


/************************ 제품 ************************/

.product {}

.product .sec {}

.product .sec01 .infoBox {display:flex; align-items: center; flex-wrap: wrap; margin-top:60px;}
.product .sec01 .infoBox > .img {width:50%;}
.product .sec01 .infoBox > .text {width:50%; padding-left:45px; opacity:0;}
.product .sec01 .infoBox > .text > h5 {font-size:30px; font-weight:600; color:#1f2c61; margin-bottom:20px;}
.product .sec01 .infoBox > .text > p {font-size:20px; word-break:keep-all;}
.product .sec01 .infoBox > .text > p > b {font-weight:600;}
.product .sec01 .infoBox > .video {margin-top:30px; width:100%; height:auto; text-align:center;}
.product .sec01 .infoBox > .video video {width:100%; height:100%;}

    @media screen and (max-width:1399px){
        .product .sec01 .infoBox > .text > p .br {display:inline;}
    }

    @media screen and (max-width:1199px){
        .product .sec01 .infoBox > .text > h5 {font-size:28px;}
        .product .sec01 .infoBox > .text > p {font-size:18px;}
    }

    @media screen and (max-width:999px){
        .product .sec01 .infoBox {width:90%; margin:0 auto;}
        .product .sec01 .infoBox {flex-direction: column;}
        .product .sec01 .infoBox > .img {width:100%; text-align:center;}
        .product .sec01 .infoBox > .text {width:100%; padding:40px 0 20px; text-align:center;}
        .product .sec01 .infoBox > .text > h5 {font-size:160%; margin-bottom:15px;}
        .product .sec01 .infoBox > .text > p {font-size:110%;}
        .product .sec01 .infoBox > .text > p br {display:none;}
    }

    @media screen and (max-width:799px){
        .product .sec01 .infoBox {width:100%;}
        .product .sec01 .infoBox > .text > h5 {font-size:150%;}
        .product .sec01 .infoBox > .text > p {font-size:100%;}
    }

    @media screen and (max-width:799px){
        .product .sec01 .infoBox {width:100%;}
        .product .sec01 .infoBox > .text > h5 {font-size:140%;}
        .product .sec01 .infoBox > .text > p {font-size:90%;}
    }


.product .sec02 {display:flex; align-items:center; justify-content: center; position:relative; width:calc(100% + 800px); margin:75px -400px; background-image:url('../img/content/proSec02Bg.jpg'); background-size:cover; background-position:center; background-attachment:fixed; height:300px;}

    @media screen and (max-width:1199px){
        .product .sec02 {width:120%; margin:55px -10%;}
    }

    @media screen and (max-width:999px){
        .product .sec02 {height:200px;}
        .product .sec02 img {height:45px !important;}
    }

    @media screen and (max-width:799px){
        .product .sec02 {height:180px;}
    }

    @media screen and (max-width:999px){
        .product .sec02 {height:150px;}
        .product .sec02 img {height:35px !important;}
    }


.product .sec03 {}
.product .sec03 > .textBox {text-align:center; opacity:0;}
.product .sec03 > .textBox > h6 {font-size:30px; font-weight:600; margin-bottom:15px;}
.product .sec03 > .textBox > p {font-size:20px; word-break:keep-all;}
.product .sec03 > .textBox > p > b {font-weight:600;}

    @media screen and (max-width:1399px){
    }

    @media screen and (max-width:1199px){
        .product .sec03 > .textBox > h6 {font-size:28px;}
        .product .sec03 > .textBox > p {font-size:18px;}
    }

    @media screen and (max-width:999px){
        .product .sec03 > .textBox > h6 {font-size:160%;}
        .product .sec03 > .textBox > p {font-size:110%;}
    }

    @media screen and (max-width:799px){
        .product .sec03 > .textBox > h6 {font-size:150%;}
        .product .sec03 > .textBox > p {font-size:100%;}
    }

    @media screen and (max-width:499px){
        .product .sec03 > .textBox > h6 {font-size:140%;}
        .product .sec03 > .textBox > p {font-size:90%;}
    }


.product .sec03 > .tabBox {margin-top:40px; opacity:0;}
.product .sec03 > .tabBox > ul.tabs {display: flex; align-items: center; justify-content: center;}
.product .sec03 > .tabBox > ul.tabs > li {display: flex; align-items: center; justify-content: center; width:45%; max-width:450px; height:120px; font-size:30px; font-weight:600; background-color:#fff; border:1px solid #ddd; margin:0 10px; cursor:pointer;}
.product .sec03 > .tabBox > ul.tabs > li span.icon {display:block; width:60px; height:60px; background-size:contain; background-position:center; background-repeat:no-repeat; margin-right:20px;}
.product .sec03 > .tabBox > ul.tabs > li.main span.icon {background-image:url('../img/content/proMainIcon.png');}
.product .sec03 > .tabBox > ul.tabs > li.sub span.icon {background-image:url('../img/content/proSubIcon.png');}
.product .sec03 > .tabBox > ul.tabs > li.current {background-color:#1f2c61; color:#fff;}
.product .sec03 > .tabBox > ul.tabs > li.main.current span.icon {background-image:url('../img/content/proMainIconW.png');}
.product .sec03 > .tabBox > ul.tabs > li.sub.current span.icon {background-image:url('../img/content/proSubIconW.png');}
.product .sec03 > .tabBox > .tab-content {width:calc(100% + 800px); margin:0 -400px 0; background:#f8f8f8; padding:160px 0 100px; display:none; margin-top:-60px;}
.product .sec03 > .tabBox > .tab-content.current {display:block;}
.product .sec03 > .tabBox > .tab-content .wireImg {max-width:1000px; margin:0 auto;}
.product .sec03 > .tabBox > .tab-content ul.listUl {display:flex; flex-wrap: wrap; justify-content: center;}
.product .sec03 > .tabBox > .tab-content ul.listUl > li {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width:20%;}
.product .sec03 > .tabBox > .tab-content ul.listUl > li > p {margin-top:20px;  font-size:22px; font-weight:600; text-align:center; word-break:keep-all;}

    @media screen and (max-width:1399px){
        .product .sec03 > .tabBox > ul.tabs > li {height:100px; font-size:28px;}
        .product .sec03 > .tabBox > .tab-content {padding:140px 0 100px; margin-top:-50px;}
        .product .sec03 > .tabBox > .tab-content ul.listUl > li {width:18%; margin:0 1%;}
        .product .sec03 > .tabBox > .tab-content ul.listUl > li > p {font-size:20px;}
    }

    @media screen and (max-width:1199px){
        .product .sec03 > .tabBox > ul.tabs > li {font-size:26px;}
        .product .sec03 > .tabBox > .tab-content {width:120%; margin:0 -10%; margin-top:-50px; padding:100px 0 50px;}
        .product .sec03 > .tabBox > .tab-content .container {width:90% !important; margin:0 auto;}
        .product .sec03 > .tabBox > .tab-content .wireImg {width:80%;}
    }

    @media screen and (max-width:999px){
        .product .sec03 > .tabBox > ul.tabs > li {font-size:140%; height:100px;}
        .product .sec03 > .tabBox > ul.tabs > li span.icon {width:50px; height:50px;}
        .product .sec03 > .tabBox > .tab-content ul.listUl {width:80%; margin:0 auto;}
        .product .sec03 > .tabBox > .tab-content ul.listUl > li {width:31%; margin-bottom:30px;}
        .product .sec03 > .tabBox > .tab-content ul.listUl > li > p {font-size:120%; margin-top:15px; line-height:120%;}
    }

    @media screen and (max-width:799px){
        .product .sec03 > .tabBox > ul.tabs {margin:0 -5%;}
        .product .sec03 > .tabBox > ul.tabs > li {font-size:130%; height:80px; margin:0 1%;}
        .product .sec03 > .tabBox > ul.tabs > li span.icon {width:40px; height:40px; margin-right:10px;}
        .product .sec03 > .tabBox > .tab-content .wireImg {width:90%;}
        .product .sec03 > .tabBox > .tab-content ul.listUl {width:100%;}
        .product .sec03 > .tabBox > .tab-content ul.listUl > li > p {font-size:110%;}
    }

    @media screen and (max-width:499px){
        .product .sec03 > .tabBox > ul.tabs {flex-direction: column}
        .product .sec03 > .tabBox > ul.tabs > li {font-size:110%; width:90%; height:60px; margin:0;}
        .product .sec03 > .tabBox > .tab-content ul.listUl > li {width:48%;}
        .product .sec03 > .tabBox > .tab-content ul.listUl > li > p {font-size:100%;}
    }


.product .sec03 ul.subtabs {display: flex; align-items: center; justify-content: center; margin-bottom:60px;}
.product .sec03 ul.subtabs > li {display: flex; align-items: center; justify-content: center; width:45%; max-width:450px; height:80px; font-size:20px; font-weight:600; background-color:#fff; border:1px solid #ddd; margin:0 10px; text-transform:uppercase; cursor:pointer;}
.product .sec03 ul.subtabs > li.current {background-color:#1f2c61; color:#fff;}
.product .sec03 .stab-content {display:none;}
.product .sec03 .stab-content.current {display:block;}

.product .sec03 .stab-content ul.listUl {display:flex; flex-wrap: wrap; margin-top:-50px;}
.product .sec03 .stab-content ul.listUl > li {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width:20%; margin-top:50px;}
.product .sec03 .stab-content ul.listUl > li > p {margin-top:20px;  font-size:22px; font-weight:600; text-align:center; word-break:keep-all;}


/* effect */
.product .sec01 .infoBox > .text.show {animation:fadeInRight 1s forwards;}
.product .sec03 > .textBox.show {animation:fadeInDown 1s forwards;}
.product .sec03 > .tabBox.show {animation:fadeInUp 1s forwards;}



/************************ 생산라인 ************************/

.proline {display:flex; flex-wrap: wrap; justify-content: space-between;}
.proline .step {position:relative; width:33.333%; max-width:350px; color:#fff; margin:0 0 5%; opacity:0;}
.proline .step:after {position:absolute; display:block; opacity:0.5; top: calc(50% - 25px); right:-46%; content:url('../img/content/prolineArrow.png');}

    @media screen and (max-width:1649px){
        .proline .step {margin:0 0 4%;}
    }

    @media screen and (max-width:1399px){
        .proline .step {width:28%; margin:0 0 6%;}
    }

    @media screen and (max-width:799px){
        .proline .step {width:47%; margin:0 0 6%;}
        
    }


.proline .step > .num {position:absolute; top:30px; left:30px; font-size:20px; font-weight:400; z-index:2;}
.proline .step > .image {position:relative; width:100%; height:100%; top:0; left:0; z-index:1;background-color:#000;}
.proline .step > .image img {opacity:0.5;}
.proline .step > .title {display: flex; align-items: center; justify-content: center; flex-direction: column; position:absolute; width:100%; height:100%; top:0; left:0; z-index:2; padding:30px}
.proline .step > .title > .icon {}
.proline .step > .title > h5 {margin-top:20px; font-size:22px; text-align:center;}

    @media screen and (max-width:1199px){
        .proline .step > .num {top:5%; left:5%; font-size:18px;;}
        .proline .step > .title {padding:5%;}
        .proline .step > .title > h5 {font-size:20px;}
    }

    @media screen and (max-width:999px){
        .proline .step > .num {top:8%; left:8%; font-size:110%;}
        .proline .step > .title {padding:8%;}
        .proline .step > .title > h5 {font-size:110%;}
    }

    @media screen and (max-width:499px){
        .proline .step > .num {top:8%; left:8%; font-size:110%;}
        .proline .step > .title {padding:5%;}
        .proline .step > .title > img {max-height:60px;}
        .proline .step > .title > h5 {font-size:90%;}
    }


.proline .step:nth-child(1) {order: 1;}
.proline .step:nth-child(2) {order: 2;}
.proline .step:nth-child(3) {order: 3; margin-right:0;}
.proline .step:nth-child(3):after {display:none;}
.proline .step:nth-child(4) {order: 4;}
.proline .step:nth-child(5) {order: 5;}
.proline .step:nth-child(6) {order: 6;margin-right:0;}
.proline .step:nth-child(6):after {display:none;}
.proline .step:nth-child(7) {order: 7;}
.proline .step:nth-child(7):after {display:none;}
.proline .step:nth-child(8) {order: 8;}
.proline .step:nth-child(9) {order: 9; margin-right:0;}

.proline .step:hover > .image img {opacity:0.8;}
.proline .step:hover {}
.proline .step:hover > .title {justify-content: flex-end; align-items: flex-start;}
.proline .step:hover > .title > .icon {display:none;}
.proline .step:hover > .title > h5 {text-align:left;}

    @media screen and (max-width:799px){
        .proline .step:nth-child(2) {margin-right:0;}
        .proline .step:nth-child(2):after {display:none;}
        .proline .step:nth-child(3):after {display:block;}
        .proline .step:nth-child(4) {margin-right:0;}
        .proline .step:nth-child(4):after {display:none;}
        .proline .step:nth-child(6) {margin-right:0;}
        .proline .step:nth-child(6):after {display:none;}
        
    }


/* effect */
.proline .step.show {animation:fadeInLeft 1s forwards;}
.proline .step.step01.show {}
.proline .step.step02.show {animation-delay:0.2s}
.proline .step.step03.show {animation:fadeInDown 1s forwards; animation-delay:0.4s}
.proline .step.step04.show {animation:fadeInLeft 1s forwards; animation-delay:0.6s}
.proline .step.step05.show {animation:fadeInLeft 1s forwards; animation-delay:0.8s}
.proline .step.step06.show {animation:fadeInLeft 1s forwards; animation-delay:1.0s}
.proline .step.step07.show {animation:fadeInDown 1s forwards; animation-delay:1.0s}



/************************ 생산설비&시험설비 ************************/

.equipment {}
.equipment ul.equipList {display:flex; justify-content: space-between; margin-bottom:20px;}
.equipment ul.equipList > li {position:relative; cursor:pointer; opacity:0;}
.equipment ul.equipList > li > .image {position:relative; background-color:#000; z-index:1;}
.equipment ul.equipList > li > .image img {width:100%; opacity:0.3;}
.equipment ul.equipList > li > .text {display:flex; align-items: center; justify-content: center; position:absolute; width:100%; height:100%; top:0; left:0; color:#fff; text-align:center; z-index:2; padding:0 5px;}
.equipment ul.equipList > li > .text > h5 {font-size:24px; font-weight:600;}
.equipment ul.equipList > li > .text > h5 > .num {display:block; font-size:20px; font-weight:300; margin-bottom:10px; color:#007cb7;}

.equipment ul.equipList > li.current > .image {background-color:#1f2c61 !important;}
.equipment ul.equipList > li.current > .image > img {opacity:0.1 !important;}
.equipment ul.equipList > li.current > .text > h5 > .num {color:#fff !important;}

.equipment ul.equipList > li:hover > .image {background-color:none; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.equipment ul.equipList > li:hover > .image > img {opacity:1; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.equipment ul.equipList > li:hover > .text > h5 > .num {color:#fff; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

    @media screen and (max-width:1399px){
        .equipment ul.equipList > li > .text > h5 {font-size:22px;}
    }

    @media screen and (max-width:1199px){
        .equipment ul.equipList > li > .text > h5 {font-size:20px;}
        .equipment ul.equipList > li > .text > h5 > .num {font-size:18px;}
    }

    @media screen and (max-width:999px){
        .equipment ul.equipList > li > .text > h5 {font-size:120%;}
        .equipment ul.equipList > li > .text > h5 > .num {font-size:90%;}
    }

    @media screen and (max-width:799px){
        .equipment ul.equipList {flex-wrap: wrap; overflow:hidden;}
        .equipment ul.equipList > li {position:relative;width:33.333%; padding-top:35%;}
        .equipment ul.equipList > li:nth-child(4),
        .equipment ul.equipList > li:nth-child(5) {width:50%;}
        .equipment ul.equipList > li > .image {position:absolute; width:100%; height:100%; top:0; left:0;}
        .equipment ul.equipList > li > .image > img {position: absolute; width: 100% !important; height: 100% !important; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
        .equipment ul.equipList > li > .text > h5 {font-size:110%;}
    }

    @media screen and (max-width:499px){
        .equipment ul.equipList > li {position:relative;width:50%; padding-top:45%;}
        .equipment ul.equipList > li:nth-last-child(1) {width:100%;}
        .equipment ul.equipList > li > .image {position:absolute; width:100%; height:100%; top:0; left:0;}
        .equipment ul.equipList > li > .image > img {position: absolute; width: 100% !important; height: 100% !important; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
        .equipment ul.equipList > li > .text > h5 {font-size:100%;}
    }

.equipment .tab-content {display:none;}
.equipment .tab-content.current {display:block;}
.equipment .tab-content > .videoBox {display:flex; align-items: center; justify-content: center; position: relative; width: 100%; max-width: 1200px; overflow: hidden; height:350px; background-color:#000;}
.equipment .tab-content > .videoBox > video {position:relative; width: 100%; height: auto; display: block;  opacity:0.7;}
.equipment .tab-content > .videoBox > img {position: absolute; width: 102% !important; max-width:inherit !important; height: 102% !important; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.equipment .tab-content > .textBox {text-align:center; background-color:#f8f8f8; padding:60px; margin-top:20px;}
.equipment .tab-content > .textBox > h5 {font-size:30px; font-weight:600; margin-bottom:20px;}
.equipment .tab-content > .textBox > h5 > .num {color:#007cb7; font-weight:300;}
.equipment .tab-content > .textBox > p {font-size:18px; word-break:keep-all;}

.equipment .tab-content > .videoBox:hover > video {opacity:1;}

    @media screen and (max-width:1199px){
        .equipment .tab-content > .videoBox{height:300px;}
        .equipment .tab-content > .textBox > h5 {font-size:28px;}
        .equipment .tab-content > .textBox > p {font-size:16px;}
    }

    @media screen and (max-width:999px){
        .equipment .tab-content > .videoBox{height:250px;}
        .equipment .tab-content > .textBox {padding:40px 5%;}
        .equipment .tab-content > .textBox > h5 {font-size:160%;}
        .equipment .tab-content > .textBox > p {font-size:100%;}
        .equipment .tab-content > .textBox > p br {display:none;}
    }

    @media screen and (max-width:799px){
        .equipment .tab-content > .videoBox{height:180px;}
        .equipment .tab-content > .textBox > h5 {font-size:140%;}
        .equipment .tab-content > .textBox > p {font-size:100%;}
    }

    @media screen and (max-width:499px){
        .equipment .tab-content > .videoBox{height:180px;}
        .equipment .tab-content > .textBox {padding:30px 5%;}
        .equipment .tab-content > .textBox > h5 {font-size:130%;}
        .equipment .tab-content > .textBox > p {font-size:90%;}
    }


/* effect */
.equipment ul.equipList.show {}
.equipment ul.equipList.show > li {animation:fadeInLeft 1s forwards;}
.equipment ul.equipList.show > li:nth-child(2) {animation-delay:0.1s}
.equipment ul.equipList.show > li:nth-child(3) {animation-delay:0.2s}
.equipment ul.equipList.show > li:nth-child(4) {animation-delay:0.3s}
.equipment ul.equipList.show > li:nth-child(5) {animation-delay:0.4s}


      
/************************ 생산설비 ************************/

.proequip.equipment #equip-1.tab-content > .videoBox > video {width:auto; height:150%;}



/************************ 시험설비 ************************/

.testquip.equipment #equip-1.tab-content > .videoBox > video {width:auto; height:120%;}
.testquip.equipment #equip-2.tab-content > .videoBox > video {width:auto; height:150%;}
.testquip.equipment #equip-3.tab-content > .videoBox > video {width:auto; height:120%;}
.testquip.equipment #equip-4.tab-content > .videoBox > video {width:auto; height:200%; top:10%;}



/************************ 회사개요 ************************/

.overview {}
.overview .sec01 {margin-top:60px;}
.overview .sec01 .imgBox {background-image:url('../img/content/overviewBg.jpg'); background-size:cover; background-position:center; width:100%; height:350px; opacity:0;}
.overview .sec01 .infoBox {text-align:center; margin-top:75px;}
.overview .sec01 .infoBox > img {margin-bottom:40px; opacity:0;}

.overview .sec01 .infoBox > .tbWrap > table {border-top:1px solid #000;}
.overview .sec01 .infoBox > .tbWrap > table tr th,
.overview .sec01 .infoBox > .tbWrap > table tr td {border-bottom:1px solid #ddd; padding:20px; opacity:0;}
.overview .sec01 .infoBox > .tbWrap > table tr th {width:10%; background-color:#f5f5f5; text-align:center; font-weight:800; font-size:18px;}
.overview .sec01 .infoBox > .tbWrap > table tr td {width:40%; text-align:left;}

    @media screen and (max-width:1199px){
        .overview .sec01 .infoBox > .tbWrap > table tr th,
        .overview .sec01 .infoBox > .tbWrap > table tr td {padding:15px;}
        .overview .sec01 .infoBox > .tbWrap > table tr th {font-size:16px;}
    }

    @media screen and (max-width:999px){
        .overview .sec01 .infoBox > .tbWrap > table tr th {font-size:100%;}
    }

    @media screen and (max-width:599px){
        .overview .sec01 .infoBox > img {height:38px !important;}
        
        .overview .sec01 .infoBox > .tbWrap > table tr th,
        .overview .sec01 .infoBox > .tbWrap > table tr td {width:100%; padding:10px;}
        .overview .sec01 .infoBox > .tbWrap > table tr {display:flex; flex-direction: column; font-size:90%;}
        .overview .sec01 .infoBox > .tbWrap > table tr td {text-align:center;}
    }

/* effect */
.overview .sec01 .imgBox.show {animation:fadeInRight 1s forwards;}
.overview .sec01 .infoBox.show > img {animation:fadeInUp 1s forwards; animation-delay:0.2s;}
.overview .sec01 .infoBox.show > .tbWrap > table tr th {animation:fadeIn 1s forwards; animation-delay:0.3s;}
.overview .sec01 .infoBox.show > .tbWrap > table tr td {animation:fadeInLeft 1s forwards; animation-delay:0.4s;}



/************************ 인사말 ************************/

.greeting {}
/*.greeting:after {position:relative; display:block; font-size:60px; font-weight:600; letter-spacing:0.15em; white-space: nowrap;  -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #1c2d62; text-align:center; margin-top:70px; opacity:0.3; content:'BUCHEON INDUSTRIAL CO., LTD.';}*/
.greeting .sec01 h4 {font-size:24px; font-weight:600; color:#1f2c61;}
.greeting .sec01 p {font-size:20px; margin-top:30px; word-break:keep-all;}
.greeting .sec01 p.scroll-on {opacity:0;}
.greeting .sec01 p > b {font-weight:600;}
.greeting .sec01 .imgBox {background-image:url('../img/content/greetingBg.jpg'); background-size:cover; background-position:center; width:100%; height:350px;}
.greeting .sec01 .textBox {text-align:center; margin-top:40px;}
.greeting .sec01 .signBox {font-size:20px; text-align:center; margin-top:60px;}
.greeting .sec01 .signBox > b {display:block; font-size:30px; font-weight:600; margin-top:15px;}

    @media screen and (max-width:1199px){
        .greeting .sec01 h4 {font-size:22px;}
        .greeting .sec01 p {font-size:18px}
        .greeting .sec01 .imgBox {height:300px;}
        .greeting .sec01 .signBox {font-size:18px;}
        .greeting .sec01 .signBox > b {font-size:28px;}
    }

    @media screen and (max-width:999px){
        .greeting .sec01 h4 {font-size:130%;}
        .greeting .sec01 p {font-size:110%;}
        .greeting .sec01 .imgBox {height:250px;}
        .greeting .sec01 .signBox {font-size:110%; margin-top:50px;}
        .greeting .sec01 .signBox > b {font-size:160%;}
    }

    @media screen and (max-width:799px){
        .greeting .sec01 h4 {font-size:120%;}
        .greeting .sec01 p {font-size:100%; margin-top:20px;}
        .greeting .sec01 .imgBox {height:200px;}
        .greeting .sec01 .signBox {font-size:100%; margin-top:40px;}
        .greeting .sec01 .signBox > b {font-size:150%; margin-top:10px;}
    }

    @media screen and (max-width:499px){
        .greeting .sec01 h4 {font-size:110%;}
        .greeting .sec01 p {font-size:90%;}
        .greeting .sec01 .imgBox {height:150px;}
        .greeting .sec01 .signBox {font-size:90%; margin-top:30px;}
        .greeting .sec01 .signBox > b {font-size:140%;}
    }


/*effect*/
.greeting .sec01 p.show {animation:fadeInDown 1s forwards;}



/************************ 경영이념 ************************/

.philosophy .sec01 .topBox {text-align:center;}
.philosophy .container {width:1520px !important;}
.philosophy .sec01 ul.listUl {display:flex; justify-content: space-between; margin-top:60px;}
.philosophy .sec01 ul.listUl > li {width:25%; text-align:center;}
.philosophy .sec01 ul.listUl > li > .img > img {border:1px solid #ddd;}
.philosophy .sec01 ul.listUl > li > .text {margin-top:26px; padding:0 2%;}
.philosophy .sec01 ul.listUl > li > .text > h5 {font-size:28px; font-weight:800; color:#1f2c61; line-height:120%;}
.philosophy .sec01 ul.listUl > li > .text > p {font-size:18px; margin-top:10px; word-break: keep-all;}

/* effect */
.philosophy .sec01 ul.listUl.show > li:nth-child(odd) {animation:fadeInDown 1s forwards;}
.philosophy .sec01 ul.listUl.show > li:nth-child(even) {animation:fadeInUp 1s forwards;}

    @media screen and (max-width:1399px){
        .philosophy .sec01 ul.listUl > li > .text > h5 {font-size:28px;}
        .philosophy .sec01 ul.listUl > li > .text > p {font-size:18px;}
    }

    @media screen and (max-width:1199px){
        .philosophy .sec01 ul.listUl > li > .text > h5 {font-size:26px;}
        .philosophy .sec01 ul.listUl > li > .text > p {font-size:16px;}
    }

    @media screen and (max-width:999px){
        .philosophy .sec01 ul.listUl {flex-wrap: wrap;}
        .philosophy .sec01 ul.listUl > li {width:49%; margin-bottom:30px;}
        .philosophy .sec01 ul.listUl > li > .text > h5 {font-size:150%;}
        .philosophy .sec01 ul.listUl > li > .text > p {font-size:100%; line-height:140%;}
    }

    @media screen and (max-width:799px){
        .philosophy .sec01 ul.listUl > li > .text > h5 {font-size:130%;}
    }

    @media screen and (max-width:499px){
        .philosophy .sec01 ul.listUl > li {width:100%;}
        .philosophy .sec01 ul.listUl > li > .text {margin-top:16px;}
        .philosophy .sec01 ul.listUl > li > .text > h5 {font-size:130%;}
    }



/************************ 비전 ************************/

.vision .sec01 {margin-top:60px;}
.vision .sec01 .contBox {display:flex; margin-top:20px;}
.vision .sec01 .contBox:nth-child(odd) {flex-direction: row-reverse;}
.vision .sec01 .contBox > .img {width:50%;}
.vision .sec01 .contBox > .info {display:flex; justify-content: center; flex-direction: column; width:50%; background-color:#f5f5f5; padding:0 40px 0 50px;}
.vision .sec01 .contBox > .info > h5 {display: flex; align-items: center; font-size:30px; font-weight:600; color:#1f2c61;}
.vision .sec01 .contBox > .info > h5:before {position:relative; display:block; width:40px; height:40px; background-repeat:no-repeat; background-size:contain; background-position:center; margin-right:15px; content:'';}
.vision .sec01 .contBox > .info > ul.dotUl {margin-left:15px; margin-top:25px;}
.vision .sec01 .contBox > .info > ul.dotUl > li {margin-top:20px; font-size:20px;}
.vision .sec01 .contBox > .info > ul.dotUl > li:before {position:relative; display:inline-block; margin-right:6px; margin-left:-12px; content:'·';}
.vision .sec01 .contBox > .info > ul.dotUl > li:first-child {margin-top:0;}

.vision .sec01 .contBox.cont01 {margin-top:0;}
.vision .sec01 .contBox.cont01 > .info > h5:before {background-image:url('../img/content/visionIcon01.png');}
.vision .sec01 .contBox.cont02 > .info > h5:before {background-image:url('../img/content/visionIcon02.png');}
.vision .sec01 .contBox.cont03 > .info > h5:before {background-image:url('../img/content/visionIcon03.png');}
.vision .sec01 .contBox.cont04 > .info > h5:before {background-image:url('../img/content/visionIcon04.png');}

.vision .sec01 .contBox.show:nth-child(odd) > .info {animation:fadeInLeft 1s forwards;}
.vision .sec01 .contBox.show:nth-child(even) > .info {animation:fadeInRight 1s forwards;}

    @media screen and (max-width:1399px){
        .vision .sec01 .contBox > .info > h5 {font-size:28px;}
        .vision .sec01 .contBox > .info > ul.dotUl > li {font-size:18px;}
    }

    @media screen and (max-width:1199px){
        .vision .sec01 .contBox > .info {padding:0 2% 0 5%;}
        .vision .sec01 .contBox > .info > h5 {font-size:26px;}
        .vision .sec01 .contBox > .info > h5:before {width:30px; height:30px;}
        .vision .sec01 .contBox > .info > ul.dotUl {margin-top:15px;}
        .vision .sec01 .contBox > .info > ul.dotUl > li {font-size:16px; margin-top:10px;}
    }

    @media screen and (max-width:999px){
        .vision .sec01 {display: flex; flex-wrap: wrap; justify-content: space-between;}
        .vision .sec01 .contBox {flex-direction: column !important; width:49%; margin-top:0;}
        .vision .sec01 .contBox > .img {width:100%;}
        .vision .sec01 .contBox > .info {width:100%; justify-content: flex-start; min-height:270px; height:100%; padding:30px 5%;}
        .vision .sec01 .contBox > .info > h5 {font-size:150%;}
        .vision .sec01 .contBox > .info > ul.dotUl > li {font-size:100%;}
        .vision .sec01 .contBox.cont03,
        .vision .sec01 .contBox.cont04 {margin-top:20px;}
    }

    @media screen and (max-width:799px){
        .vision .sec01 .contBox {width:100%;}
        .vision .sec01 .contBox > .img {position:relative; width:100%; height:200px;}
        .vision .sec01 .contBox > .img > img {position: absolute; width: 100% !important; max-width: inherit !important; height: 100% !important; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
        .vision .sec01 .contBox > .info {min-height:inherit; height:auto;}
        .vision .sec01 .contBox > .info > h5 {font-size:140%;}
        .vision .sec01 .contBox > .info > h5:before {margin-right:10px;}
    }

    @media screen and (max-width:499px){
        .vision .sec01 .contBox > .img {position:relative; width:100%; height:150px;}
        .vision .sec01 .contBox > .info {padding:30px 5%;}
        .vision .sec01 .contBox > .info > h5 {font-size:130%;}
        .vision .sec01 .contBox > .info > ul.dotUl > li {font-size:90%;}
        .vision .sec01 .contBox > .info > h5:before {margin-right:5px;}
    }



/************************ CI ************************/

.ci h5 {font-size:30px; font-weight:600; letter-spacing:-0.025em;}
.ci p {font-size:20px; margin-top:30px; word-break:keep-all;}

    @media screen and (max-width:1199px){
        .ci h5 {font-size:28px;}
        .ci p {font-size:18px;}
    }

    @media screen and (max-width:999px){
        .ci h5 {font-size:160%;}
        .ci p {width:100%; padding:0 5%; font-size:110%;}
        .ci p .br {display:block;}
    }

    @media screen and (max-width:799px){
        .ci h5 {font-size:150%;}
        .ci p {font-size:100%; margin-top:20px;}
        .ci p .br {display:inline;}
    }

    @media screen and (max-width:499px){
        .ci h5 {font-size:130%;}
        .ci p {font-size:90%; margin-top:10px;}
    }


.ci .sec01 {background:url('../img/content/ciSec02Bg.jpg') center no-repeat; color:#fff; text-align:center; padding:125px 20px; margin-top:60px;}
.ci .sec01 > img {opacity:0;}
.ci .sec01 > p {opacity:0;}

    @media screen and (max-width:1399px){
        .ci .sec01 {padding:105px 0;}
    }

    @media screen and (max-width:1199px){
        .ci .sec01 {padding:85px 0;}
        .ci .sec01 > img {width:250px;}
    }

    @media screen and (max-width:999px){
        .ci .sec01 {padding:65px 2%;}
        .ci .sec01 > img {width:200px;}
    }

    @media screen and (max-width:799px){
        .ci .sec01 {padding:50px 2%;}
        .ci .sec01 > img {width:200px;}
    }

    @media screen and (max-width:499px){
        .ci .sec01 {padding:40px 2%;}
        .ci .sec01 > img {width:150px;}
    }

.ci .sec02 {text-align:center; margin-top:60px;}
.ci .sec02 > p {}
.ci .sec02 > ul.gridBox {display:flex; align-items: flex-start; justify-content: center; padding:104px 0; background:url('../img/content/gridBg.jpg') left top repeat; border:1px solid #ddd; margin-top:40px;}
.ci .sec02 > ul.gridBox > li {position:relative; padding:0 40px;}
.ci .sec02 > ul.gridBox > li:before {position:absolute; display:block; top:30px; left:-10px; background-size:contain; background-position:center; background-repeat:no-repeat; content:'';}
.ci .sec02 > ul.gridBox > li > span {display:block; width:100%; font-size:28px; font-weight:200; margin-top:30px; opacity:0;}
.ci .sec02 > ul.gridBox > li > span > b.color01 {color:#0b214c;}
.ci .sec02 > ul.gridBox > li > span > b.color02 {color:#00649d;}
.ci .sec02 > ul.gridBox > li:nth-child(2):before {width:25px; height:30px; background-image:url('../img/content/ciArrow.png');}
.ci .sec02 > ul.gridBox > li:nth-child(3) {padding:0 40px 0 80px;}
.ci .sec02 > ul.gridBox > li:nth-child(3):before {width:24px; height:17px; background-image:url('../img/content/ciEqual.png');}

.ci .sec02 > ul.colorBox {display:flex; justify-content: space-between; margin-top:20px;}
.ci .sec02 > ul.colorBox > li {width:49%; max-height:590px; display:flex; align-items:center; justify-content: center; color:#fff; height:60px; opacity:0;}
.ci .sec02 > ul.colorBox > li.color01 {background-color:#1f2c61;}
.ci .sec02 > ul.colorBox > li.color02 {background-color:#007cb7;}

.ci .sec02 > ul.policyBox {display:flex; justify-content: space-between; margin-top:40px;}
.ci .sec02 > ul.policyBox > li {display:flex; align-items:center; justify-content: center; width:33%; height:200px; max-width:390px; opacity:0;}
.ci .sec02 > ul.policyBox > li.color01 {background-color:#fff; border:1px solid #ddd;}
.ci .sec02 > ul.policyBox > li.color02 {background-color:#007cb7; border:1px solid #007cb7;}
.ci .sec02 > ul.policyBox > li.color03 {background-color:#1f2c61; border:1px solid #1f2c61;}

    @media screen and (max-width:1199px){
        .ci .sec02 > ul.gridBox {padding:84px 0;}
        .ci .sec02 > ul.gridBox > li > span {font-size:28px;}
        .ci .sec02 > ul.gridBox > li > img {max-height:80px;}

        .ci .sec02 > ul.policyBox > li {height:160px;}
    }

    @media screen and (max-width:999px){
        .ci .sec02 > ul.gridBox {padding:64px 0;}
        .ci .sec02 > ul.gridBox > li > span {font-size:140%;}

        .ci .sec02 > ul.policyBox > li {height:140px;}
        .ci .sec02 > ul.policyBox > li > img {width:70%;}
    }

    @media screen and (max-width:799px){
        .ci .sec02 {margin-top:40px;}
        .ci .sec02 > ul.gridBox {padding:64px 0;}
        .ci .sec02 > ul.gridBox > li{width:33.333%; padding:0;}
        .ci .sec02 > ul.gridBox > li:nth-child(2):before {width:20px; height:22px;}
        .ci .sec02 > ul.gridBox > li:nth-child(3) {padding:0;}
        .ci .sec02 > ul.gridBox > li:nth-child(3):before {width:20px; height:14px;}
        .ci .sec02 > ul.gridBox > li > span {font-size:130%;}

        .ci .sec02 > ul.colorBox > li {height:50px;}

        .ci .sec02 > ul.policyBox {margin-top:30px;}
        .ci .sec02 > ul.policyBox > li {height:100px;}
        .ci .sec02 > ul.policyBox > li > img {width:80%; max-height:60px;}
    }

    @media screen and (max-width:499px){
        .ci .sec02 > ul.gridBox {flex-direction: column; padding:20px 0;}
        .ci .sec02 > ul.gridBox > li{width:100%; padding:20px 0 !important;}
        .ci .sec02 > ul.gridBox > li:before {position:relative; width:100% !important; top:-20px; left:auto; transform: rotate(90deg);}
        .ci .sec02 > ul.gridBox > li:nth-child(2):before {width:20px; height:22px;}
        .ci .sec02 > ul.gridBox > li:nth-child(3) {padding:0;}
        .ci .sec02 > ul.gridBox > li:nth-child(3):before {width:20px; height:14px;}
        .ci .sec02 > ul.gridBox > li > span {font-size:130%; margin-top:15px;}
        .ci .sec02 > ul.gridBox > li > img {max-height:60px;}

        .ci .sec02 > ul.colorBox {flex-direction: column;}
        .ci .sec02 > ul.colorBox > li {width:100%; height:40px; font-size:90%;}

        .ci .sec02 > ul.policyBox {margin-top:30px; flex-direction: column;}
        .ci .sec02 > ul.policyBox > li {width:100%; height:80px;}
        .ci .sec02 > ul.policyBox > li > img {width:auto; max-height:30px;}
    }


.ci .sec03 {background-color:#f8f8f8; width:calc(100% + 800px); margin:75px -400px 0; text-align:center; padding:76px 0;}
.ci .sec03 ul.signBox {display:flex; justify-content: space-between; margin-top:40px;}
.ci .sec03 ul.signBox > li {width:49%; max-width:585px;}
.ci .sec03 ul.signBox > li > .box {display:flex; align-items:center; justify-content: center; height:350px; background:url('../img/content/gridBg.jpg') left top repeat; border:1px solid #ddd;}
.ci .sec03 ul.signBox > li > .title {font-size:24px; margin-top:20px;}

    @media screen and (max-width:1399px){
        .ci .sec03 ul.signBox > li > .box {height:320px;}
    }

    @media screen and (max-width:1199px){
        .ci .sec03 {width:120%; margin:75px -10% 0;}
        .ci .sec03 ul.signBox {width:90%; margin:0 auto; margin-top:40px;}
        .ci .sec03 ul.signBox > li > .box {height:280px;}
        .ci .sec03 ul.signBox > li > .box > img {max-height:145px;}
        .ci .sec03 ul.signBox > li > .title {font-size:22px;}
    }

    @media screen and (max-width:999px){
        .ci .sec03 ul.signBox > li > .title {font-size:130%; margin-top:15px;}
        .ci .sec03 ul.signBox > li > .box {height:220px;}
        .ci .sec03 ul.signBox > li > .box > img {max-width:70% !important; max-height:50%;}
    }

    @media screen and (max-width:799px){
        .ci .sec03 {padding:56px 0; margin:55px -10% 0;}
        .ci .sec03 ul.signBox > li > .title {font-size:110%;}
        .ci .sec03 ul.signBox > li > .box {height:160px;}
        .ci .sec03 ul.signBox > li > .box > img {max-height:45%;}
    }
    @media screen and (max-width:499px){
        .ci .sec03 {padding:36px 0; margin:35px -10% 0;}
        .ci .sec03 ul.signBox {margin-top:20px;}
        .ci .sec03 ul.signBox > li > .title {font-size:100%;}
        .ci .sec03 ul.signBox > li > .title > span {display:block;}
        .ci .sec03 ul.signBox > li > .box {height:120px;}
    }


/* effect */
.ci .sec01.show > img {animation:fadeInLeft 1s forwards;}
.ci .sec01.show > p {animation:fadeInRight 1s forwards;}

.ci .sec02 > p.show {animation:fadeInUp 1s forwards;}
.ci .sec02 > ul.gridBox.show > li:nth-child(1) > span {animation:fadeIn 1s forwards; animation-delay:0.2s;}
.ci .sec02 > ul.gridBox.show > li:nth-child(2) > span {animation:fadeIn 1s forwards; animation-delay:0.4s;}

.ci .sec02 > ul.colorBox.show > li {animation:fadeIn 1s forwards;}

.ci .sec02 > ul.policyBox.show > li {}
.ci .sec02 > ul.policyBox.show > li:nth-child(1) {animation:fadeInLeft 1s forwards;}
.ci .sec02 > ul.policyBox.show > li:nth-child(2) {animation:fadeInDown 1s forwards;}
.ci .sec02 > ul.policyBox.show > li:nth-child(3) {animation:fadeInRight 1s forwards;}

.ci .sec03.show  ul.signBox > li:nth-child(1) {animation:fadeInLeft 1s forwards;}
.ci .sec03.show  ul.signBox > li:nth-child(2) {animation:fadeInRight 1s forwards;}


/************************ 사업장 ************************/

.place {}
.place .mapBox {height:400px;}
.place .mapBox iframe {width:100%; height:100%;}

    @media screen and (max-width:1199px){
        .place .mapBox {height:350px;}
    }

    @media screen and (max-width:999px){
        .place .mapBox {height:250px;}
    }

.place .infoBox {display:flex; justify-content: space-between; flex-direction: row-reverse; padding:40px 33px 50px; border-bottom:1px solid #ddd;}
.place .infoBox > ul.link {display:flex;}
.place .infoBox > ul.link > li {position:relative; width:100px; height:100px; border:1px solid #1f2c61; border-radius:50%; color:#1f2c61; font-weight:700; margin-left:5px; opacity:0;}
.place .infoBox > ul.link > li > a {position:absolute; display:flex; justify-content: center; align-items: center; flex-direction: column; width:100%; height:100%; top:0; left:0; font-size:14px;}
.place .infoBox > ul.link > li span.icon {position:relative; display:block; width:30px; height:30px; margin:0 auto; background-size:contain; background-repeat:no-repeat; background-position:center; margin-bottom:2px;}
.place .infoBox > ul.link > li.google span.icon  {background-image:url('../img/content/googleIcon.png');}
.place .infoBox > ul.link > li.naver span.icon  {background-image:url('../img/content/naverIcon.png');}
.place .infoBox > ul.link > li.kakao span.icon  {background-image:url('../img/content/kakaoIcon.png');}
.place .infoBox > ul.link > li:hover {background-color:#1f2c61; color:#fff;}
.place .infoBox > .info {letter-spacing:-0.025em; opacity:0;}
.place .infoBox > .info > h5 {font-size:30px; font-weight:600; color:#000;}
.place .infoBox > .info > h5 > b {color:#1f2c61;}
.place .infoBox > .info > .engTit {font-size:24px; font-weight:400; color:#008cc2; margin-top:5px;}
.place .infoBox > .info > ul {margin-top:35px;}
.place .infoBox > .info > ul > li {font-size:20px;}
.place .infoBox > .info > ul > li.add {margin-bottom:20px;}

    @media screen and (max-width:1199px){
        .place .infoBox > .info > h5 {font-size:28px;}
        .place .infoBox > .info > .engTit {font-size:22px;}
        .place .infoBox > .info > ul > li {font-size:18px;}
    }

    @media screen and (max-width:999px){
        .place .infoBox > ul.link > li > a {font-size:90%;}
        .place .infoBox > .info > h5 {font-size:160%;}
        .place .infoBox > .info > .engTit {font-size:120%;}
        .place .infoBox > .info > ul > li {font-size:110%;}
    }

    @media screen and (max-width:799px){
        .place .infoBox {flex-direction: column-reverse; align-items: center; padding:40px 0 50px;}
        .place .infoBox > .info {text-align:center; margin-bottom:30px;}
        .place .infoBox > .info > h5 {font-size:150%;}
        .place .infoBox > .info > .engTit {font-size:110%;}
        .place .infoBox > .info > ul {margin-top:25px;}
        .place .infoBox > .info > ul > li {font-size:100%;}
        .place .infoBox > .info > ul > li.add{margin-bottom:10px;}
    }

    @media screen and (max-width:499px){
        .place .infoBox {padding:30px 0 40px;}
        .place .infoBox > ul.link > li > a {font-size:85%;}
        .place .infoBox > .info { margin-bottom:20px;}
        .place .infoBox > .info > h5 {font-size:140%;}
        .place .infoBox > .info > .engTit {font-size:100%;}
        .place .infoBox > .info > ul {margin-top:15px;}
        .place .infoBox > .info > ul > li {font-size:90%;}
    }

.place.overseas .sec {padding-top:60px;}
.place.overseas .mapBox {display:flex;}
.place.overseas .mapBox .map {position:relative; width:calc(100% - 400px);}
.place.overseas .mapBox .map > img {position: absolute; width: 100% !important; max-width: inherit !important; height: 100% !important; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.place.overseas .image {width:400px;}
.place.overseas .image > img {max-width:100%;}

.place.overseas .sec:nth-child(1) {padding-top:0;}
.place.overseas .sec:nth-child(odd) .mapBox {flex-direction: row-reverse;}
.place.overseas .sec:nth-child(5) .infoBox {justify-content: flex-end}
.place.overseas .sec:nth-child(5) .infoBox > ul.link  {display:none;}

    @media screen and (max-width:1199px){
        .place.overseas .mapBox .map {width:calc(100% - 350px);}
        .place.overseas .image {width:350px;}
    }

    @media screen and (max-width:999px){
        .place.overseas .mapBox .map {width:calc(100% - 250px);}
        .place.overseas .image {width:250px;}
    }

    @media screen and (max-width:799px){
        .place.overseas .mapBox {flex-direction: column-reverse !important; height:auto; overflow:hidden;}
        .place.overseas .mapBox .map {width:100%; height:250px;}
        .place.overseas .mapBox .map > img {position: absolute; width: 150% !important; max-width: inherit !important; height: 150% !important; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
        .place.overseas .image {position:relative; width:100%; height:250px; overflow:hidden;}
        .place.overseas .image > img {position: absolute; width: 100% !important; max-width: inherit !important; height: 120% !important; top: 50%; left: 50%; object-fit: cover;}
        .place.overseas #place01 .image > img {height: 120% !important; transform: translate(-50%, -55%);}     
        .place.overseas #place02 .image > img {height: 180% !important; transform: translate(-50%, -70%);}
        .place.overseas #place03 .image > img {height: 160% !important; transform: translate(-50%, -60%);}     
        .place.overseas #place04 .image > img {height: 180% !important; transform: translate(-50%, -70%);}          
    }

    @media screen and (max-width:499px){
        .place.overseas .mapBox .map {height:180px;}
        .place.overseas .image {height:250px;}
    }

/* effect */
.place .infoBox.show > ul.link > li:nth-last-child(1) {animation:fadeInRight 1s forwards; animation-delay:0.1s;}
.place .infoBox.show > ul.link > li:nth-last-child(2) {animation:fadeInRight 1s forwards; animation-delay:0.2s;}
.place .infoBox.show > ul.link > li:nth-last-child(3) {animation:fadeInRight 1s forwards; animation-delay:0.3s;}
.place .infoBox.show > .info {animation:fadeInDown 1s forwards;}



/************************ 인재상 ************************/

.talent {}
.talent > .sec01 > ul.circleBox {display:flex; justify-content: center; align-items: center;}
.talent > .sec01 > ul.circleBox > li {position:relative; display:block; width:330px; padding-top:330px; border:1px solid #1f2c61; border-radius:50%; margin:0 -20px; background:rgba(255,255,255,0.9);}
.talent > .sec01 > ul.circleBox > li:after {position:absolute; display:block; left:50%; bottom:-51px; width:1px; height:50px; background-color:#999; content:'';}
.talent > .sec01 > ul.circleBox > li > .text {display: flex; flex-direction: column; justify-content: center; align-items: center; position:absolute; width:100%; height:100%; top:0; left:0; opacity:0;}
.talent > .sec01 > ul.circleBox > li > .text > .icon {position:relative; display:block; width:50px; height:50px; background-size:contain; background-repeat:no-repeat; background-size:contain; background-position:center; margin-bottom:15px; content:'';}
.talent > .sec01 > ul.circleBox > li > .text > h5 {font-size:30px; font-weight:600; color:#1f2c61;}
.talent > .sec01 > ul.circleBox > li > .text > p {font-size:20px; color:#000; margin-top:15px;}

.talent > .sec01 > ul.circleBox > li:nth-child(1) > .text > .icon {background-image:url('../img/content/talentIcon01.png');}
.talent > .sec01 > ul.circleBox > li:nth-child(2) > .text > .icon {background-image:url('../img/content/talentIcon02.png');}
.talent > .sec01 > ul.circleBox > li:nth-child(3) > .text > .icon {background-image:url('../img/content/talentIcon03.png');}

.talent > .sec01 > .bottomBox {position:relative; padding-top:50px;}
.talent > .sec01 > .bottomBox:before {position:relative; display:block; width:100%; max-width:580px; height:1px; margin:0 auto; background-color:#999; margin-bottom:50px; content:'';}
.talent > .sec01 > .bottomBox .title {position:relative; display:block; width:430px; padding-top:430px; border-radius:50%; background-color:#1f2c61; background-image:url('../img/content/bcicSmallLogo.png'); background-position:center bottom; background-repeat:no-repeat; margin:0 auto;}
.talent > .sec01 > .bottomBox .title:before {position:absolute; display:block; left:50%; top:-50px; width:1px; height:50px; background-color:#999; content:'';}
.talent > .sec01 > .bottomBox .title > h5 {display: flex; flex-direction: column; justify-content: center; align-items: center; position:absolute; width:100%; height:100%; top:0; left:0; font-size:30px; font-weight:600; color:#fff; text-align:center; padding:0 20px; opacity:0;}

    @media screen and (max-width:1399px){
        .talent > .sec01 > ul.circleBox > li {width:300px; padding-top:300px;}

        .talent > .sec01 > .bottomBox:before {max-width:520px;}
        .talent > .sec01 > .bottomBox .title {width:400px; padding-top:400px;}
        .talent > .sec01 > .bottomBox .title > h5 {font-size:28px;}
    }

    @media screen and (max-width:1199px){
        .talent > .sec01 > ul.circleBox > li {width:280px; padding-top:280px;}
        .talent > .sec01 > ul.circleBox > li > .text > h5 {font-size:28px;}
        .talent > .sec01 > ul.circleBox > li > .text > p {font-size:18px;}

        .talent > .sec01 > .bottomBox:before {max-width:480px;}
        .talent > .sec01 > .bottomBox .title {width:380px; padding-top:380px;}
        .talent > .sec01 > .bottomBox .title > h5 {font-size:26px;}
    }

    @media screen and (max-width:999px){
        .talent > .sec01 > ul.circleBox > li {width:240px; padding-top:240px;}
        .talent > .sec01 > ul.circleBox > li > .text > h5 {font-size:160%;}
        .talent > .sec01 > ul.circleBox > li > .text > p {font-size:110%;}
        
        .talent > .sec01 > .bottomBox:before {max-width:400px;}
        .talent > .sec01 > .bottomBox .title {width:340px; padding-top:340px;}
        .talent > .sec01 > .bottomBox .title > h5 {font-size:150%;}
    }

    @media screen and (max-width:799px){
        .talent > .sec01 > ul.circleBox > li {width:160px; padding-top:160px; margin:0 -2%;}
        .talent > .sec01 > ul.circleBox > li > .text > .icon {width:40px; height:40px;}
        .talent > .sec01 > ul.circleBox > li > .text > h5 {font-size:130%;}
        .talent > .sec01 > ul.circleBox > li > .text > p {font-size:100%; margin-top:10px;}
        
        .talent > .sec01 > .bottomBox:before {max-width:286px;}
        .talent > .sec01 > .bottomBox .title {width:280px; padding-top:280px;}
        .talent > .sec01 > .bottomBox .title > h5 {font-size:130%;}
    }

    @media screen and (max-width:499px){
        .talent > .sec01 > ul.circleBox {flex-direction: column;}
        .talent > .sec01 > ul.circleBox > li {width:60%; padding-top:60%; margin:-4%;}
        .talent > .sec01 > ul.circleBox > li:after {display:none;}
        .talent > .sec01 > ul.circleBox > li > .text > .icon {width:20px; height:20px; margin-bottom:5px;}
        .talent > .sec01 > ul.circleBox > li > .text > h5 {font-size:110%;}
        .talent > .sec01 > ul.circleBox > li > .text > p {font-size:90%; margin-top:0;}
        
        .talent > .sec01 > .bottomBox:before {display:none;}
        .talent > .sec01 > .bottomBox .title {width:200px; padding-top:200px;}
        .talent > .sec01 > .bottomBox .title:before {top:-38px; height:38px;}
        .talent > .sec01 > .bottomBox .title > h5 {font-size:110%;}
    }


.talent > .sec02 {background-color:#f5f5f5; font-size:20px; padding:60px 20px; text-align:center; margin-top:60px;}

    @media screen and (max-width:1199px){
        .talent > .sec02 {font-size:18px; padding:50px 0; margin-top:50px;}
    }
    @media screen and (max-width:999px){
        .talent > .sec02 {font-size:110%; padding:50px 5%;}
    }
    @media screen and (max-width:799px){
        .talent > .sec02 {font-size:100%; padding:40px 5%;}
    }
    @media screen and (max-width:499px){
        .talent > .sec02 {font-size:90%; padding:30px 5%;}
    }


/* effect */
.talent > .sec01 > ul.circleBox.show > li > .text {animation:fadeInDown 1s forwards;}

.talent > .sec01 > ul.circleBox.show > li:nth-child(1) > .text {animation-delay:0.1s;}
.talent > .sec01 > ul.circleBox.show > li:nth-child(2) > .text {animation-delay:0.2s;}
.talent > .sec01 > ul.circleBox.show > li:nth-child(3) > .text {animation-delay:0.3s;}

.talent > .sec01 > .bottomBox.show .title > h5 {animation:fadeIn 1s forwards; animation-delay:0.5s;}

.talent > .sec02.show {animation:fadeInUp 1s forwards;}



/************************ 인사제도 ************************/

.system {}
.system > .sec {text-align:center; padding:120px 0;}
.system > .sec h5 {font-size:30px; font-weight:600;}
.system > .sec p {font-size:20px; margin-top:20px; word-break:keep-all;}
.system > .sec p > b {font-weight:600;}

    @media screen and (max-width:1199px){
        .system > .sec {padding:100px 0;}
        .system > .sec h5 {font-size:28px;}
        .system > .sec p {font-size:18px;}
    }

    @media screen and (max-width:999px){
        .system > .sec {padding:80px 0;}
        .system > .sec h5 {font-size:160%;}
        .system > .sec p {font-size:110%;}
    }

    @media screen and (max-width:799px){
        .system > .sec {padding:60px 0;}
        .system > .sec h5 {font-size:150%;}
        .system > .sec p {font-size:100%;}
        .system > .sec p > br {display:none;}
    }

    @media screen and (max-width:499px){
        .system > .sec {padding:40px 0;}
        .system > .sec h5 {font-size:140%;}
        .system > .sec p {font-size:90%;}
    }


.system > .sec01 {padding-top:0;}
.system > .sec01 .image {width:100%; height:252px; background:url('../img/content/sysSec01Bg.jpg') center no-repeat;}
.system > .sec01 .text {margin-top:61px;}
.system > .sec01 .text > .position {position:relative; display: flex; align-items: center; min-height:150px; margin-top:30px;}
.system > .sec01 .text > .position > .circle {position:absolute; display:block; left:0; width:150px; padding-top:150px; border-radius:50%; background-color:#1f2c61; background-image:url('../img/content/bcicSmallLogo.png'); background-position:center bottom; background-repeat:no-repeat; z-index:2;}
.system > .sec01 .text > .position > .circle > h6 {display: flex; flex-direction: column; justify-content: center; align-items: center; position:absolute; width:100%; height:100%; top:0; left:0; font-size:24px; font-weight:600; color:#fff; text-align:center;}
.system > .sec01 .text > .position > ul {position:relative; display:flex; flex-wrap: wrap; width:100%; padding-left:150px;}
.system > .sec01 .text > .position > ul:before {position:relative; display:block; width:100%; max-width:876px; height:1px; top:-47px; margin:0 auto; background-color:#ddd; content:'';}
.system > .sec01 .text > .position > ul:after {position:absolute; display:block; width:100%; height:40px; top:-7px; left:0; background-color:#f5f5f5; z-index:1; content:'';}
.system > .sec01 .text > .position > ul > li {position:relative; width:calc(100% / 6); font-size:18px; font-weight:600; z-index:2;}
.system > .sec01 .text > .position > ul > li:before {position:absolute; display:block; width:1px; height:35px; top:-47px; left:50%; background-color:#ddd; content:'';}
.system > .sec01 .text > .position > ul > li:after {position:absolute; display:block; width:10px; height:10px; top:-12px; left:calc(50% - 5px); background-color:#007cb7; border-radius:50%; overflow:hidden; content:'';}
.system > .sec01 .text > .position > ul > li > h6 {margin-top:2px; opacity:0;}

    @media screen and (max-width:1399px){
        .system > .sec01 .text > .position > ul:before {width:83.40%;}
    }

    @media screen and (max-width:1199px){
        .system > .sec01 .image {height:232px;}
        .system > .sec01 .text > .position > .circle > h6 {font-size:22px;}
        .system > .sec01 .text > .position > ul > li {font-size:16px;}
    }

    @media screen and (max-width:999px){
        .system > .sec01 .text > .position > .circle > h6 {font-size:130%;}
        .system > .sec01 .text > .position > ul > li {font-size:100%;}
    }

    @media screen and (max-width:799px){
        .system > .sec01 .image {height:212px;}
        .system > .sec01 .text {margin-top:41px;}
        .system > .sec01 .text > .position {margin-top:20px;}
        .system > .sec01 .text > .position > .circle {width:90px; padding-top:90px;}
        .system > .sec01 .text > .position > .circle > h6 {font-size:110%;}
        .system > .sec01 .text > .position > ul {padding-left:100px;}
        .system > .sec01 .text > .position > ul > li {font-size:80%;}
        .system > .sec01 .text > .position > ul:before {top:-32px;}
        .system > .sec01 .text > .position > ul > li:before {height:20px; top:-32px;}
    }

    @media screen and (max-width:499px){
        .system > .sec01 .image {height:192px;}
        .system > .sec01 .text > .position {flex-direction: column; min-height:120px;}
        .system > .sec01 .text > .position > .circle {position:relative; margin-bottom:50px;}
        .system > .sec01 .text > .position > ul {padding-left:0;}
        .system > .sec01 .text > .position > ul > li {font-size:70%;}
    }


/* effect */
.system > .sec01 .text > .position.show > ul > li > h6 {animation:fadeIn .8s forwards;}
.system > .sec01 .text > .position.show > ul > li:nth-child(1) > h6 {animation-delay:0.1s;}
.system > .sec01 .text > .position.show > ul > li:nth-child(2) > h6 {animation-delay:0.2s;}
.system > .sec01 .text > .position.show > ul > li:nth-child(3) > h6 {animation-delay:0.3s;}
.system > .sec01 .text > .position.show > ul > li:nth-child(4) > h6 {animation-delay:0.4s;}
.system > .sec01 .text > .position.show > ul > li:nth-child(5) > h6 {animation-delay:0.5s;}
.system > .sec01 .text > .position.show > ul > li:nth-child(6) > h6 {animation-delay:0.6s;}



.system > .sec02 {display:flex; align-items:center; justify-content: center; position:relative; width:calc(100% + 800px); margin:0 -400px; background-image:url('../img/content/sysSec02Bg.jpg'); background-size:cover; background-position:center; color:#fff;}
.system > .sec02 ul.circleBox {display:flex; justify-content: center; align-items: center; margin-top:60px;}
.system > .sec02 ul.circleBox > li {position:relative; display:block; width:330px; padding-top:330px; border:1px solid rgba(170,170,170,0.4); border-radius:50%; margin:0 -20px; background:rgba(0,0,0,0.4); opacity:0;}
.system > .sec02 ul.circleBox > li > .text {display: flex; flex-direction: column; justify-content: center; align-items: center; position:absolute; width:100%; height:100%; top:0; left:0; padding:0 40px;}
.system > .sec02 ul.circleBox > li > .text > .icon {position:relative; display:block; width:51px; height:50px;  background-repeat:no-repeat; background-position:center; background-size:contain; margin-bottom:15px; content:'';}
.system > .sec02 ul.circleBox > li > .text > h6 {font-size:26px; font-weight:600; color:#fff;}
.system > .sec02 ul.circleBox > li > .text > p {min-height:100px; font-size:18px; color:#fff; margin-top:15px; min-height:80px; word-break:keep-all;}

.system > .sec02 ul.circleBox > li:nth-child(1) > .text > .icon {background-image:url('../img/content/sysSec02Icon01.png');}
.system > .sec02 ul.circleBox > li:nth-child(2) > .text > .icon {background-image:url('../img/content/sysSec02Icon02.png');}
.system > .sec02 ul.circleBox > li:nth-child(3) > .text > .icon {background-image:url('../img/content/sysSec02Icon03.png');}
.system > .sec02 ul.circleBox > li:nth-child(4) > .text > .icon {background-image:url('../img/content/sysSec02Icon04.png');}

    @media screen and (max-width:1399px){
        .system > .sec02 ul.circleBox > li {width:300px; padding-top:300px;}
        .system > .sec02 ul.circleBox > li > .text > h6 {font-size:28px;}
        .system > .sec02 ul.circleBox > li > .text > p {font-size:18px;}
    }

    @media screen and (max-width:1199px){
        .system > .sec02 {width:120%; margin:0 -10%; padding-left:10%; padding-right:10%;}
        .system > .sec02 ul.circleBox > li {width:260px; padding-top:260px;}
        .system > .sec02 ul.circleBox > li > .text > h6 {font-size:24px;}
        .system > .sec02 ul.circleBox > li > .text > p {font-size:16px; margin-top:10px;}
    }

    @media screen and (max-width:999px){
        .system > .sec02 ul.circleBox {flex-wrap: wrap; width:80%; margin:0 auto; margin-top:60px;}
        .system > .sec02 ul.circleBox > li {width:48%; padding-top:48%; margin:-3%;}
        .system > .sec02 ul.circleBox > li > .text {padding:15%;}
        .system > .sec02 ul.circleBox > li > .text > h6 {font-size:140%;}
        .system > .sec02 ul.circleBox > li > .text > p {font-size:100%;}
        .system > .sec02 ul.circleBox > li > .text > p > .br {display:block;}
        .system > .sec02 ul.circleBox > li:nth-child(3) > .text > p > .br {display:inline;}
    }

    @media screen and (max-width:799px){
        .system > .sec02 ul.circleBox {width:100%;}
        .system > .sec02 ul.circleBox > li {width:48%; padding-top:48%; margin:-2%;}
        .system > .sec02 ul.circleBox > li > .text {padding:10%;}
        .system > .sec02 ul.circleBox > li > .text > .icon {margin-bottom:10px;}
        .system > .sec02 ul.circleBox > li > .text > h6 {font-size:140%;}
        .system > .sec02 ul.circleBox > li > .text > p {font-size:100%;}
        .system > .sec02 ul.circleBox > li > .text > p > .br {display:block;}
        .system > .sec02 ul.circleBox > li:nth-child(3) > .text > p > .br {display:inline;}
    }

    @media screen and (max-width:599px){
        .system > .sec02 ul.circleBox > li {width:60%; padding-top:60%;}
    }


    @media screen and (max-width:499px){
        .system > .sec02 ul.circleBox {margin-top:40px;}
        .system > .sec02 ul.circleBox > li {width:80%; padding-top:80%;}
        .system > .sec02 ul.circleBox > li > .text {padding:10% 8%;}
        .system > .sec02 ul.circleBox > li > .text > h6 {font-size:120%;}
        .system > .sec02 ul.circleBox > li > .text > p {font-size:90%; line-height:140%; min-height:auto;}
    }


/* effect */
.system > .sec02 ul.circleBox.show > li {animation:fadeIn 1s forwards;}
.system > .sec02 ul.circleBox.show > li:nth-child(odd) {animation-delay:0.2s;}
.system > .sec02 ul.circleBox.show > li:nth-child(even) {animation-delay:0.4s;}

.system > .sec03 ul.circleBox {display:flex; justify-content: center; align-items: center; margin-top:60px;}
.system > .sec03 ul.circleBox > li {position:relative; display:block; width:330px; padding-top:330px; border:1px solid #1f2c61; border-radius:50%; margin:0 -20px; background:rgba(255,255,255,0.9); opacity:0;}
.system > .sec03 ul.circleBox > li > .text {display: flex; flex-direction: column; justify-content: center; align-items: center; position:absolute; width:100%; height:100%; top:0; left:0;}
.system > .sec03 ul.circleBox > li > .text > .icon {position:relative; display:block; width:51px; height:50px; background-repeat:no-repeat; background-size:contain; background-position:center; margin-bottom:15px; content:'';}
.system > .sec03 ul.circleBox > li > .text > h6 {font-size:30px; font-weight:600; color:#1f2c61;}
.system > .sec03 ul.circleBox > li > .text > p {font-size:20px; color:#000; margin-top:15px;}

.system > .sec03 ul.circleBox > li:nth-child(1) > .text > .icon {background-image:url('../img/content/sysSec03Icon01.png');}
.system > .sec03 ul.circleBox > li:nth-child(2) > .text > .icon {background-image:url('../img/content/sysSec03Icon02.png');}
.system > .sec03 ul.circleBox > li:nth-child(3) > .text > .icon {background-image:url('../img/content/sysSec03Icon03.png');}

    @media screen and (max-width:1399px){
        .system > .sec03 ul.circleBox > li {width:300px; padding-top:300px;}
        .system > .sec03 ul.circleBox > li > .text > h6 {font-size:28px; }
        .system > .sec03 ul.circleBox > li > .text > p {font-size:18px; }
    }

    @media screen and (max-width:1199px){
        .system > .sec03 ul.circleBox > li {width:260px; padding-top:260px;}
        .system > .sec03 ul.circleBox > li > .text > h6 {font-size:24px; }
        .system > .sec03 ul.circleBox > li > .text > p {font-size:16px; margin-top:10px;}
    }

    @media screen and (max-width:999px){
        .system > .sec03 ul.circleBox > li {width:220px; padding-top:220px;}
        .system > .sec03 ul.circleBox > li > .text > h6 {font-size:140%; }
        .system > .sec03 ul.circleBox > li > .text > p {font-size:110%;}
    }

    @media screen and (max-width:799px){
        .system > .sec03 ul.circleBox {margin-top:40px;}
        .system > .sec03 ul.circleBox > li {width:160px; padding-top:160px; margin:0 -2%;}
        .system > .sec03 ul.circleBox > li > .text > .icon {margin-bottom:10px;}
        .system > .sec03 ul.circleBox > li > .text > h6 {font-size:120%;}
        .system > .sec03 ul.circleBox > li > .text > p {font-size:100%; margin-top:10px;}
    }

    @media screen and (max-width:499px){
        .system > .sec03 ul.circleBox {flex-direction: column;}
        .system > .sec03 ul.circleBox > li {width:60%; padding-top:60%; margin:-3%;}
        .system > .sec03 ul.circleBox > li > .text > .icon {width:41px; height:40px; margin-bottom:5px;}
        .system > .sec03 ul.circleBox > li > .text > h6 {font-size:110%;}
        .system > .sec03 ul.circleBox > li > .text > p {font-size:90%; margin-top:0;}
    }


/* effect */
.system > .sec03 ul.circleBox.show > li:nth-child(1) {animation:fadeInRight 1s forwards;}
.system > .sec03 ul.circleBox.show > li:nth-child(2) {animation:fadeInUp 1s forwards;}
.system > .sec03 ul.circleBox.show > li:nth-child(3) {animation:fadeInLeft 1s forwards;}



/************************ 복리후생 ************************/

.welfare {}
.welfare > .sec {margin-top:60px;}
.welfare > .sec h5 {font-size:30px; font-weight:600; color:#1f2c61;}
.welfare > .sec .infoBox {display:flex; flex-wrap: wrap; margin:30px -0.5% 0;}
.welfare > .sec .infoBox > .box {position:relative; display:block; width:24%; max-width:290px; padding-top:350px; border:1px solid #ddd; background-color:#fff; margin:0.5%; cursor:default; opacity:0;}
.welfare > .sec .infoBox > .box > .text {display: flex; flex-direction: column; justify-content: center; align-items: center; position:absolute; width:100%; height:100%; top:0; left:0; text-align:center; padding:0 10px;}
.welfare > .sec .infoBox > .box > .text > .icon {display:block; width:100%; height:65px; background-size:contain; background-repeat:no-repeat; background-position:center;}
.welfare > .sec .infoBox > .box > .text > h6 {font-size:20px; font-weight:600; margin-top:20px; word-break:keep-all;}
.welfare > .sec .infoBox > .box > .text > p {font-size:18px; margin-top:15px; word-break:keep-all;}

.welfare > .sec .infoBox > .box:hover {background-color:#1f2c61; background-image:url('../img/content/bcicSmallLogo.png'); background-position:center bottom; background-repeat:no-repeat; color:#fff;}

    @media screen and (max-width:1199px){
        .welfare > .sec .infoBox > .box {padding-top:320px;}
        .welfare > .sec .infoBox > .box > .text > h6 {font-size:18px;}
        .welfare > .sec .infoBox > .box > .text > p {font-size:16px;}
        .welfare > .sec .infoBox > .box > .text > p > .br {display:inline;}
    }

    @media screen and (max-width:999px){
        .welfare > .sec h5 {font-size:170%;}
        .welfare > .sec .infoBox {margin:20px -0.5% 0;}
        .welfare > .sec .infoBox > .box {width:32.333%; margin:0.5%; padding-top:40%;}
        .welfare > .sec .infoBox > .box > .text > h6 {font-size:110%;}
        .welfare > .sec .infoBox > .box > .text > p {font-size:100%;}
    }

    @media screen and (max-width:799px){
        .welfare > .sec h5 {font-size:150%;}
        .welfare > .sec .infoBox {margin:20px -0.5% 0;}
        .welfare > .sec .infoBox > .box {width:49%; padding-top:280px;}
        .welfare > .sec .infoBox > .box > .text {padding:0 1%;}
        .welfare > .sec .infoBox > .box > .text > h6 {font-size:100%;}
        .welfare > .sec .infoBox > .box > .text > p {font-size:90%; margin-top:10px; line-height:120%;}
    }

    @media screen and (max-width:499px){
        .welfare > .sec h5 {font-size:120%;}
        .welfare > .sec .infoBox {width:100%; justify-content: center;}
        .welfare > .sec .infoBox {margin:20px -0.5% 0;}
        .welfare > .sec .infoBox > .box {width:100%; max-width:inherit; padding-top:230px;}
        .welfare > .sec .infoBox > .box > .text > .icon {height:55px;}
        .welfare > .sec .infoBox > .box > .text > h6 {font-size:100%;}
        .welfare > .sec .infoBox > .box > .text > p {font-size:85%;}
    }

        .welfare > .sec .infoBox > .box > .text > .icon {}
/* effect */
.welfare > .sec .infoBox.show > .box {animation:fadeInLeft 1s forwards;}
.welfare > .sec .infoBox.show > .box:nth-child(1) {}
.welfare > .sec .infoBox.show > .box:nth-child(2) {animation-delay:0.1s;}
.welfare > .sec .infoBox.show > .box:nth-child(3) {animation-delay:0.2s;}
.welfare > .sec .infoBox.show > .box:nth-child(4) {animation-delay:0.3s;}
.welfare > .sec .infoBox.show > .box:nth-child(5) {animation-delay:0.4s;}
.welfare > .sec .infoBox.show > .box:nth-child(6) {animation-delay:0.5s;}
.welfare > .sec .infoBox.show > .box:nth-child(7) {animation-delay:0.6s;}
.welfare > .sec .infoBox.show > .box:nth-child(8) {animation-delay:0.7s;}

.welfare > .sec01 {margin-top:0;}
.welfare > .sec01 .box.box01 > .text > .icon {background-image:url('../img/content/welSec01Icon01.png');}
.welfare > .sec01 .box.box02 > .text > .icon {background-image:url('../img/content/welSec01Icon02.png');}
.welfare > .sec01 .box.box03 > .text > .icon {background-image:url('../img/content/welSec01Icon03.png');}
.welfare > .sec01 .box.box04 > .text > .icon {background-image:url('../img/content/welSec01Icon04.png');}
.welfare > .sec01 .box.box05 > .text > .icon {background-image:url('../img/content/welSec01Icon05.png');}
.welfare > .sec01 .box.box06 > .text > .icon {background-image:url('../img/content/welSec01Icon06.png');}

.welfare > .sec01 .box.box01:hover  > .text > .icon {background-image:url('../img/content/welSec01Icon01W.png');}
.welfare > .sec01 .box.box02:hover  > .text > .icon {background-image:url('../img/content/welSec01Icon02W.png');}
.welfare > .sec01 .box.box03:hover  > .text > .icon {background-image:url('../img/content/welSec01Icon03W.png');}
.welfare > .sec01 .box.box04:hover  > .text > .icon {background-image:url('../img/content/welSec01Icon04W.png');}
.welfare > .sec01 .box.box05:hover  > .text > .icon {background-image:url('../img/content/welSec01Icon05W.png');}
.welfare > .sec01 .box.box06:hover  > .text > .icon {background-image:url('../img/content/welSec01Icon06W.png');}

.welfare > .sec02 .box.box01 > .text > .icon {background-image:url('../img/content/welSec02Icon01.png');}
.welfare > .sec02 .box.box02 > .text > .icon {background-image:url('../img/content/welSec02Icon02.png');}
.welfare > .sec02 .box.box03 > .text > .icon {background-image:url('../img/content/welSec02Icon03.png');}
.welfare > .sec02 .box.box04 > .text > .icon {background-image:url('../img/content/welSec02Icon04.png');}
.welfare > .sec02 .box.box05 > .text > .icon {background-image:url('../img/content/welSec02Icon05.png');}
.welfare > .sec02 .box.box06 > .text > .icon {background-image:url('../img/content/welSec02Icon06.png');}
.welfare > .sec02 .box.box07 > .text > .icon {background-image:url('../img/content/welSec02Icon07.png');}
.welfare > .sec02 .box.box08 > .text > .icon {background-image:url('../img/content/welSec02Icon08.png');}

.welfare > .sec02 .box.box01:hover  > .text > .icon {background-image:url('../img/content/welSec02Icon01W.png');}
.welfare > .sec02 .box.box02:hover  > .text > .icon {background-image:url('../img/content/welSec02Icon02W.png');}
.welfare > .sec02 .box.box03:hover  > .text > .icon {background-image:url('../img/content/welSec02Icon03W.png');}
.welfare > .sec02 .box.box04:hover  > .text > .icon {background-image:url('../img/content/welSec02Icon04W.png');}
.welfare > .sec02 .box.box05:hover  > .text > .icon {background-image:url('../img/content/welSec02Icon05W.png');}
.welfare > .sec02 .box.box06:hover  > .text > .icon {background-image:url('../img/content/welSec02Icon06W.png');}
.welfare > .sec02 .box.box07:hover  > .text > .icon {background-image:url('../img/content/welSec02Icon07W.png');}
.welfare > .sec02 .box.box08:hover  > .text > .icon {background-image:url('../img/content/welSec02Icon08W.png');}

.welfare > .sec03 .box.box01 > .text > .icon {background-image:url('../img/content/welSec03Icon01.png');}
.welfare > .sec03 .box.box02 > .text > .icon {background-image:url('../img/content/welSec03Icon02.png');}
.welfare > .sec03 .box.box03 > .text > .icon {background-image:url('../img/content/welSec03Icon03.png');}
.welfare > .sec03 .box.box04 > .text > .icon {background-image:url('../img/content/welSec03Icon04.png');}

.welfare > .sec03 .box.box01:hover  > .text > .icon {background-image:url('../img/content/welSec03Icon01W.png');}
.welfare > .sec03 .box.box02:hover  > .text > .icon {background-image:url('../img/content/welSec03Icon02W.png');}
.welfare > .sec03 .box.box03:hover  > .text > .icon {background-image:url('../img/content/welSec03Icon03W.png');}
.welfare > .sec03 .box.box04:hover  > .text > .icon {background-image:url('../img/content/welSec03Icon04W.png');}



/************************ 채용절차 ************************/

.recruit {}
.recruit .sec01 {}
.recruit .sec01 .image {}

    @media screen and (max-width:999px){
        .recruit .sec01 .image {position:relative; height:auto;}
        .recruit .sec01 .image > img {position: absolute; width: 100% !important; height: 100% !important; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
    }

    @media screen and (max-width:799px){
        .recruit .sec01 .image {position:relative;}
    }

    @media screen and (max-width:499px){
        .recruit .sec01 .image {position:relative;}
    }


.recruit .sec01 .subSec {}
.recruit .sec01 .subSec h5 {font-size:30px; font-weight:600; text-align:center; margin-bottom:30px;}

.recruit .sec01 .subSec.type {margin-top:60px;}
.recruit .sec01 .subSec.type > ul {display:flex; justify-content: space-between;}
.recruit .sec01 .subSec.type > ul > li {width:49%; max-width:595px; border:1px solid #ddd; font-size:20px; padding:18px 0; text-align:center;}
.recruit .sec01 .subSec.type > ul > li > b {color:#1f2c61;}
.recruit .sec01 .subSec.process {margin-top:60px;}
.recruit .sec01 .subSec.process > ul {display:flex; justify-content: space-between; }
.recruit .sec01 .subSec.process > ul > li {position:relative; display: flex; flex-direction: column; align-items: center; max-width:20%; margin-top:20px; opacity:0;}
.recruit .sec01 .subSec.process > ul > li:nth-child(1) {z-index:4;}
.recruit .sec01 .subSec.process > ul > li:nth-child(2) {z-index:3;}
.recruit .sec01 .subSec.process > ul > li:nth-child(3) {z-index:2;}
.recruit .sec01 .subSec.process > ul > li:nth-child(4) {z-index:1;}
.recruit .sec01 .subSec.process > ul > li > .image {position:relative;}
.recruit .sec01 .subSec.process > ul > li > .image > img {position:relative; z-index:2;}
.recruit .sec01 .subSec.process > ul > li > .image:before {position:absolute; display:block; width:100%; height:1px; top:50%; right:50%; background:url('../img/content/recStepLine.png') center repeat-x; z-index:1; content:'';}
.recruit .sec01 .subSec.process > ul > li:nth-child(1) .image:before {display:none;}
.recruit .sec01 .subSec.process > ul > li > h6 {font-size:24px; font-weight:600; color:#000; margin-top:20px; text-align:center;}
.recruit .sec01 .subSec.process > ul > li > h6 > .engTit {display:block; color:#007cb7; font-weight:400; font-size:16px; text-transform:uppercase; margin-bottom:3px;}

    @media screen and (max-width:1399px){
        .recruit .sec01 .subSec.type > ul > li {font-size:18px;}
    }

    @media screen and (max-width:1199px){
        .recruit .sec01 .subSec h5 {font-size:28px;}
        
        .recruit .sec01 .subSec.type > ul > li {font-size:16px;}
        .recruit .sec01 .subSec.process > ul > li {max-width:18%;}
        .recruit .sec01 .subSec.process > ul > li > h6 {font-size:22px;}
        .recruit .sec01 .subSec.process > ul > li > h6 > .engTit {font-size:14px;}
    }

    @media screen and (max-width:999px){
        .recruit .sec01 .subSec h5 {font-size:160%;}

        .recruit .sec01 .subSec.type > ul { flex-direction: column;}
        .recruit .sec01 .subSec.type > ul > li {width:100%; max-width:inherit; font-size:100%; margin-bottom:5px;}
        .recruit .sec01 .subSec.process > ul > li > h6 {font-size:130%;}
        .recruit .sec01 .subSec.process > ul > li > h6 > .engTit {font-size:70%;}
    }

    @media screen and (max-width:799px){
        .recruit .sec01 .subSec.process > ul > li > h6 {font-size:110%;}
    }

    @media screen and (max-width:599px){
        .recruit .sec01 .subSec h5 {font-size:150%; margin-bottom:20px;}

        .recruit .sec01 .subSec.type > ul > li { padding:15px 0;}

        .recruit .sec01 .subSec.process > ul {flex-wrap: wrap;}
        .recruit .sec01 .subSec.process > ul > li {max-width:48%;}
    }

    @media screen and (max-width:499px){
        .recruit .sec01 .subSec h5 {font-size:140%;}
        
        .recruit .sec01 .subSec.type > ul > li {font-size:90%;}

        .recruit .sec01 .subSec.process > ul > li > h6 {font-size:100%;}
    }

/*effect*/
.recruit .sec01 .subSec.process > ul.show > li {animation:fadeInLeft 1s forwards;}
.recruit .sec01 .subSec.process > ul.show > li:nth-child(1) {animation-delay:0.1s;}
.recruit .sec01 .subSec.process > ul.show > li:nth-child(2) {animation-delay:0.1s;}
.recruit .sec01 .subSec.process > ul.show > li:nth-child(3) {animation-delay:0.2s;}
.recruit .sec01 .subSec.process > ul.show > li:nth-child(4) {animation-delay:0.3s;}
.recruit .sec01 .subSec.process > ul.show > li:nth-child(5) {animation-delay:0.4s;}

.recruit .sec02 {background-color:#f8f8f8; width:calc(100% + 800px); margin:79px -400px 0; text-align:center; padding:75px 0;}
.recruit .sec02 .container {display:flex; justify-content: space-between;}
.recruit .sec02 .title {width:150px;}
.recruit .sec02 .title > h5 {font-size:30px; font-weight:600; text-align:left;}
.recruit .sec02 ul.cont {width:calc(100% - 150px);}
.recruit .sec02 ul.cont > li {position:relative; border:1px solid #1f2c61; background-color:#fff; padding:30px 50px; margin-top:10px; text-align:left; opacity:0;}
.recruit .sec02 ul.cont > li:nth-child(1) {margin-top:0;}
.recruit .sec02 ul.cont > li > h6 {font-size:24px; font-weight:600;}
.recruit .sec02 ul.cont > li > h6 > .engTit {font-weight:300; color:#007cb7;}
.recruit .sec02 ul.cont > li > .textBox { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; }
.recruit .sec02 ul.cont > li > .textBox > .text {font-size:20px; font-weight:300;}
.recruit .sec02 ul.cont > li > .textBox > .text > b {font-weight:600;}
.recruit .sec02 ul.cont > li > .textBox > .type {max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; display:flex; align-items: center; justify-content: flex-end; margin-top:5px; font-size:18px; font-weight:600;}
.recruit .sec02 ul.cont > li > .textBox > .type:before {position:relative; display:block; height:19px; margin-right:10px; content:url('../img/content/recTypeIcon.png');}

.recruit .sec02 ul.cont > li.active {background-color:#1f2c61; background-image:url('../img/content/bcicSmallLogo.png');  background-repeat:no-repeat; background-position:calc(100% - 19px) 19px; color:#fff; padding:50px 50px;}
.recruit .sec02 ul.cont > li.active > h6 > .engTit {color:inherit;}
.recruit .sec02 ul.cont > li.active > .textBox {margin-top:14px; max-height: 200px; max-height 0.3s ease-in-out; }
.recruit .sec02 ul.cont > li.active > .textBox > .type {max-height: 200px; max-height 0.3s ease-in-out}
.recruit .sec02 ul.cont > li.active > .textBox > .type:before {content:url('../img/content/recTypeIconW.png');}

.recruit .sec02 .stepBtn {position:absolute; width:100%; height:100%; top:0; left:0; background:none !important; border:0; }

    @media screen and (max-width:1199px){
        .recruit .sec02 {width:110%; margin:79px -5% 0}
        .recruit .sec02 .container {padding:0 3%;}
        .recruit .sec02 .title > h5 {font-size:28px;}
        .recruit .sec02 ul.cont > li > h6 {font-size:22px;}
        .recruit .sec02 ul.cont > li > .textBox > .text {font-size:18px;}
        .recruit .sec02 ul.cont > li > .textBox > .type {font-size:16px;}
    }

    @media screen and (max-width:999px){
        .recruit .sec02 .title {width:20%;}
        .recruit .sec02 .title > h5 {font-size:160%;}
        .recruit .sec02 ul.cont {width:80%;}
        .recruit .sec02 ul.cont > li {padding:4% 6%;}
        .recruit .sec02 ul.cont > li > h6 {font-size:130%;}
        .recruit .sec02 ul.cont > li > .textBox > .text {font-size:110%;}
        .recruit .sec02 ul.cont > li > .textBox > .type {font-size:100%;}

        .recruit .sec02 ul.cont > li.active {padding:6%;}
    }

    @media screen and (max-width:799px){
        .recruit .sec02 .container {flex-direction: column;}
        .recruit .sec02 .title {width:100%; margin-bottom:20px;}
        .recruit .sec02 .title > h5 {font-size:150%;}
        .recruit .sec02 ul.cont {width:100%;}
        .recruit .sec02 ul.cont > li {padding:4%;}
        .recruit .sec02 ul.cont > li > h6 {font-size:120%;}
        .recruit .sec02 ul.cont > li > .textBox > .text {font-size:100%;}
        .recruit .sec02 ul.cont > li > .textBox > .type {font-size:90%;}

        .recruit .sec02 ul.cont > li.active {padding:6%;}
    }

    @media screen and (max-width:499px){
        .recruit .sec02 .title > h5 {font-size:140%;}
        .recruit .sec02 ul.cont > li {padding:6%;}
        .recruit .sec02 ul.cont > li > h6 {font-size:110%;}
        .recruit .sec02 ul.cont > li > .textBox > .text {font-size:90%;}
        .recruit .sec02 ul.cont > li > .textBox > .type {font-size:85%;}

        .recruit .sec02 ul.cont > li.active {padding:30px 6%;}
    }


/* effect */
.recruit .sec02.show ul.cont > li {animation:fadeInDown 1s forwards;}
.recruit .sec02.show ul.cont > li:nth-child(1) {animation-delay:0.3s;}
.recruit .sec02.show ul.cont > li:nth-child(2) {animation-delay:0.4s;}
.recruit .sec02.show ul.cont > li:nth-child(3) {animation-delay:0.5s;}
.recruit .sec02.show ul.cont > li:nth-child(4) {animation-delay:0.6s;}
.recruit .sec02.show ul.cont > li:nth-child(5) {animation-delay:0.7s;}

.recruit .sec03 {display:flex; justify-content: space-between; padding:71px 0;}
.recruit .sec03 > div {width:50%; max-width:618px;}
.recruit .sec03 > div > h5 {font-size:30px; font-weight:600; margin-bottom:30px;}
.recruit .sec03 > .portal {padding-right:45px;}
.recruit .sec03 > .portal > ul {display:flex; flex-wrap: wrap; margin-top:-10px;}
.recruit .sec03 > .portal > ul > li {width:50%; margin-top:10px; font-size:20px;}
.recruit .sec03 > .portal > ul > li:before {position:relative; display:inline-block; margin-right:5px; content:'·';}
.recruit .sec03 > .portal > ul > li > a > b {color:#1f2c61;}
.recruit .sec03 > .inquiry {padding-left:45px; border-left:1px solid #ddd;}
.recruit .sec03 > .inquiry > p {font-size:20px; word-break:keep-all;}

    @media screen and (max-width:1399px){
        .recruit .sec03 > .portal > ul > li {font-size:18px;}
        .recruit .sec03 > .inquiry > p {font-size:18px;}
    }

    @media screen and (max-width:1199px){
        .recruit .sec03 > div > h5{font-size:28px;}
        .recruit .sec03 > .portal > ul > li {font-size:16px;}
        .recruit .sec03 > .inquiry > p {font-size:16px;}
    }

    @media screen and (max-width:999px){
        .recruit .sec03 {flex-direction: column;}
        .recruit .sec03 > div {width:100%; max-width:inherit;}
        .recruit .sec03 > div > h5{font-size:160%; margin-bottom:20px;}
        .recruit .sec03 > .portal {padding-right:0;}
        .recruit .sec03 > .portal > ul > li {font-size:110%;}
        .recruit .sec03 > .inquiry {border-top:1px solid #ddd; border-left:0; padding-left:0; padding-top:30px; margin-top:30px;}
        .recruit .sec03 > .inquiry > p {font-size:110%;}
    }

    @media screen and (max-width:799px){
        .recruit .sec03 {padding:51px 0;}
        .recruit .sec03 > div > h5{font-size:150%;}
        .recruit .sec03 > .portal > ul > li {font-size:100%;}
        .recruit .sec03 > .inquiry > p {font-size:100%;}
    }

    @media screen and (max-width:499px){
        .recruit .sec03 {padding:31px 0;}
        .recruit .sec03 > div > h5{font-size:140%;}
        .recruit .sec03 > .portal > ul {flex-direction: column;}
        .recruit .sec03 > .portal > ul > li {width:100%; font-size:90%;}
        .recruit .sec03 > .inquiry > p {font-size:90%;}
    }


    
/************************ 오시는 길 ************************/

.location {display:flex; align-items: center;}
.location > .mapBox {width:50%; height:700px;}
.location > .infoBox {width:50%; padding-left:80px;}
.location > .infoBox > h5 {font-size:30px; font-weight:600; color:#000; opacity:0;}
.location > .infoBox > h5 > b {color:#1f2c61;}
.location > .infoBox > .engTit {font-size:24px; font-weight:400; color:#008cc2;}
.location > .infoBox > p {font-size:20px; margin-top:30px; opacity:0;}
.location > .infoBox > ul.infoUl {border-top:1px solid #2e3131; margin-top:20px; max-width:530px; opacity:0;}
.location > .infoBox > ul.infoUl > li {display:flex; font-weight:500; border-bottom:1px solid #ddd; padding:14px 10px 12px;}
.location > .infoBox > ul.infoUl > li > b {display:block; min-width:146px; font-weight:700; margin-right:30px;}
.location > .infoBox > ul.linkUl {display:flex; margin-top:30px;}
.location > .infoBox > ul.linkUl > li {position:relative; width:100%; height:140px; color:#2e3131; background-color:#f5f5f5; opacity:0;}
.location > .infoBox > ul.linkUl > li > .box {height:100%; display:flex; flex-direction: column; align-items:center; justify-content:center; }
.location > .infoBox > ul.linkUl > li > .box > a {position:absolute;  width:100%; height:100%; top:0; left:0;}
.location > .infoBox > ul.linkUl > li > .box > .icon {margin-bottom:20px;}
.location > .infoBox > ul.linkUl > li > .box > h6 {font-family: 'S-CoreDream', sans-serif; font-weight:500;}

    @media screen and (max-width:1199px){
        .location > .infoBox {padding-left:5%;}
        .location > .infoBox > h5 {font-size:28px;}
        .location > .infoBox > .engTit {font-size:22px;}
        .location > .infoBox > p {font-size:18px;}
        .location > .infoBox > ul.linkUl > li {height: 120px;}
        .location > .infoBox > ul.linkUl > li > .box > h6 {font-size:14px;}
    }
    @media screen and (max-width:999px){
        .location {flex-direction: column;}
        .location > .mapBox {width:100%; height:300px;}
        .location > .infoBox {width:100%; padding-left:0; margin-top:30px;}
        .location > .infoBox > h5 {font-size:160%;}
        .location > .infoBox > .engTit {font-size:130%;}
        .location > .infoBox > p {font-size:110%;}
        .location > .infoBox > ul.infoUl {max-width:inherit;}
		.location > .infoBox > ul.linkUl {justify-content: space-between;}
		.location > .infoBox > ul.linkUl > li > .box > .icon {margin-bottom:10px;}
		.location > .infoBox > ul.linkUl > li > .box > h6 {font-size:90%;}
    }
    @media screen and (max-width:799px){
        .location > .mapBox {height:250px;}
        .location > .infoBox > h5 {font-size:150%;}
        .location > .infoBox > .engTit {font-size:120%;}
        .location > .infoBox > p {font-size:100%; margin-top:20px;}
        .location > .infoBox > ul.linkUl > li {height:100px;}
    }
    @media screen and (max-width:499px){
        .location > .mapBox {height:200px;}
        .location > .infoBox > h5 {font-size:140%;}
        .location > .infoBox > .engTit {font-size:110%;}
        .location > .infoBox > p {font-size:90%;}
        .location > .infoBox > ul.infoUl {font-size:90%;}
        .location > .infoBox > ul.infoUl > li {flex-direction: column;}
        .location > .infoBox > ul.infoUl > li > b {width:100%;}
    }


/* effect */
.location > .infoBox.show > h5 {animation:fadeInLeft 1s forwards;}
.location > .infoBox.show > .engTit {animation:fadeInLeft 1s forwards;}
.location > .infoBox.show > p {animation:fadeInLeft 1s forwards;}
.location > .infoBox.show > ul.infoUl {animation:fadeInDown 1s forwards;}
.location > .infoBox.show > ul.linkUl > li {animation:fadeInUp 1s forwards;}
.location > .infoBox.show > ul.linkUl > li:nth-child(1) {animation-delay:0.1s;}
.location > .infoBox.show > ul.linkUl > li:nth-child(2) {animation-delay:0.2s;}
.location > .infoBox.show > ul.linkUl > li:nth-child(3) {animation-delay:0.3s;}