@charset "utf-8";

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/* center */
.center{margin: 0 auto; max-width: 1200px;}

/****************************** 메인 ******************************/
.main-sec-title {font-size: 35px; margin-bottom: 35px;}
.main-section {margin-top: 100px;}

.section1 {height: 830px; margin-top: -90px;}
/* .section1 .main-bg {background-image: url(../images/main_bg.png); background-repeat: no-repeat; position: absolute; background-size: cover; top: 0; left: 0; width: 100%; height: 830px; z-index: -1;} */
.section1 .main-bg {background-image: url(../images/main_reform_bg.png); background-repeat: no-repeat; position: absolute; background-size: cover; top: 0; left: 0; width: 100%; height: 830px; z-index: -1;}
.section1 p {color: #fff; margin: 0 auto; text-align: center;}
.section1 .main-text {font-size: 55px; margin-bottom: 40px; font-weight: 800;}
.section1 .sub-text {font-size: 22px; font-weight: 500; line-height: 135%;}

.section2 .main-sec-title {max-width: 1200px; margin: 0 auto 35px;}
.section2 .bn-wrap .swiper-container, .section2 .bn-wrap .swipe
r-wrapper, .section2 .bn-wrap .swiper-slide {width: 100%; height: 650px; position: relative;}
.section2 .bn-wrap .swiper-slide {height: 650px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.section2 .bn-wrap .swiper-slide .text-wrap {color: #fff; width: 100%;}
.section2 .bn-wrap .swiper-slide .text-wrap .title {font-size: 45px; font-weight: 700; margin-bottom: 20px;}
.section2 .bn-wrap .swiper-slide .text-wrap .sub-title {font-size: 30px; font-weight: 600; margin-bottom: 20px;}
.section2 .bn-wrap .swiper-slide .text-wrap .text {font-size: 18px; line-height: 135%; margin-bottom: 30px;}
.section2 .bn-wrap .swiper-slide .text-wrap .btn-more {padding: 0 25px; border-radius: 25px; width: 150px; height: 42px; line-height: 40px; border: 1px solid #fff; box-sizing: border-box;}
.section2 .bn-wrap .swiper-slide .text-wrap .btn-more img {margin-left: 10px;}
.section2 .bn-wrap .swiper-slide .text-wrap .btn-more:hover {background-color: #fff; color: #333; transition: .3s all ease;}
.slide1 {background-image: url(../images/main_bn_01.png);}
.slide2 {background-image: url(../images/main_bn_02.png);}
.slide3 {background-image: url(../images/main_bn_03.png);}
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {right: 18.45%;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: auto; left: auto; width: auto; display: none;}
.swiper-pagination-bullet {position: relative; width: 5px; height: 60px; background-color: rgba(256, 256, 256); border-radius: 0;}
.swiper-pagination-bullet-active {background-color: #fff;}
.swiper-pagination .swiper-pagination-bullet::after {position: absolute; display: block; color: #fff; top: 50%; left: -70px; transform: translateY(-50%);}
.swiper-pagination .swiper-pagination-bullet:nth-child(1)::after {content: 'COCOA';}
.swiper-pagination .swiper-pagination-bullet:nth-child(2)::after {content: 'KIWI';}
.swiper-pagination .swiper-pagination-bullet:nth-child(3)::after {content: 'EV ECO';}
.swiper-slide:not(.swiper-slide-active) {opacity: 0!important;}


/* 메인페이지 홈페이지 개편*/
.main-section .bn-wrap{}
.main-section .bn-wrap .text{color: white;}
/* EV-ECO */
.main-section .bn-wrap .bn-con .eveco{background: url(../images/main_bn_03.png) no-repeat; width: 100%; height: 400px;  margin-bottom: 50px; background-size: cover;}
.main-section .bn-wrap .bn-con .eveco .ev-text{color: white; padding-top: 115px;}
.main-section .bn-wrap .bn-con .eveco .ev-text .ev-logo{background: url(../images/eveco_logo.png) no-repeat; width: 198px; height: 46px; margin-bottom: 35px;}
.bn-wrap .bn-con .viewMore{display: inline-block; width: 150px; height: 42px; border: 1px solid white; border-radius: 50px; text-align: center; line-height: 42px; float: right;}
.bn-wrap .bn-con .viewMore:hover{background: white; color: #333; transition: 0.25s;}
.main-section .bn-wrap .bn-con .eveco .ev-text .ev-ex h3{font-size: 25px; margin-bottom: 10px;}
.main-section .bn-wrap .bn-con .eveco .ev-text .ev-ex p{line-height: 1.3; font-size: 18px; float: left;}

/* KIWI */
.main-section .bn-wrap .bn-con .kiwi{background: url(../images/main_bn_02.png) no-repeat; width: 100%; height: 400px;  margin-bottom: 50px; background-size: cover;}
.main-section .bn-wrap .bn-con .kiwi .kiwi-text{color: white; padding-top: 115px;}
.main-section .bn-wrap .bn-con .kiwi .kiwi-text .kiwi-logo{background: url(../images/kiwi-logo.png)no-repeat; width: 140px; height: 58px; margin-bottom: 35px;}
.main-section .bn-wrap .bn-con .kiwi .kiwi-text .kiwi-ex h3{font-size: 25px; margin-bottom: 10px;}
.main-section .bn-wrap .bn-con .kiwi .kiwi-text .kiwi-ex p{line-height: 1.3; font-size: 18px; float: left;}

/* robot */
.main-section .bn-wrap .bn-con .robot{background: url(../images/main_bn_04.png) no-repeat; width: 100%; height: 400px;  margin-bottom: 50px; background-size: cover;}
.main-section .bn-wrap .bn-con .robot .robot-text{color: white; padding-top: 110px;}
.main-section .bn-wrap .bn-con .robot .robot-text .robot-logo{background: url(../images/robot_logo.png) no-repeat; width: 211px; height: 73px; margin-bottom: 35px;}
.main-section .bn-wrap .bn-con .robot .robot-text .robot-ex h3{font-size: 25px; margin-bottom: 10px;}
.main-section .bn-wrap .bn-con .robot .robot-text .robot-ex p{line-height: 1.3; font-size: 18px; float: left;}

/* 공공기관(kcs) */
.main-section .bn-wrap .bn-con .kcs{background: url(../images/main_bn_05.png) no-repeat; width: 100%; height: 400px; background-size: cover; margin-bottom: 50px;}
.main-section .bn-wrap .bn-con .kcs .kcs-text{color: white;  padding-top: 110px;}
.main-section .bn-wrap .bn-con .kcs .kcs-text .kcs-logo{background: url(../images/kcs-logo.png) no-repeat; width: 264px; height: 114px;}
.main-section .bn-wrap .bn-con .kcs .kcs-text .kcs-ex h3{font-size: 25px; margin-bottom: 10px;}
.main-section .bn-wrap .bn-con .kcs .kcs-text .kcs-ex p{line-height: 1.3; font-size: 18px; float: left;}

/* cocoa */
.main-section .bn-wrap .bn-con .cocoa{background: url(../images/main_bn_01_ver2.png) no-repeat; width: 100%; height: 400px; background-size: cover;}
.main-section .bn-wrap .bn-con .cocoa .cocoa-text{color: white; padding-top: 120px;}
.main-section .bn-wrap .bn-con .cocoa .cocoa-text .cocoa-logo{background: url(../images/cocoa-logo-ver2.png) no-repeat; width: 191px; height: 58px; margin-bottom: 35px;}
.main-section .bn-wrap .bn-con .cocoa .cocoa-text .cocoa-ex h3{font-size: 25px; margin-bottom: 10px;}
.main-section .bn-wrap .bn-con .cocoa .cocoa-text .cocoa-ex p{line-height: 1.3; font-size: 18px; float: left;}




.section3 {margin-bottom: 120px;}
.section3 .main-sec-title {display: flex; justify-content: space-between; align-items: center;}
.section3 .main-sec-title .btn-more {font-size: 16px; color: #999; font-weight: 500;}
.section3 .news-list {display: flex; justify-content: space-between;}
.section3 .news-list li {width: 32%;}
.section3 .news-list li .list-thumb {width: 100%; height: 220px; background-color: #f5f5f5; margin-bottom: 22px; background-size: contain; background-position: center; background-repeat: no-repeat;}
.section3 .news-list li .list-text .title {font-size: 16px; margin-bottom: 10px; line-height: 135%; word-break: keep-all;}
.section3 .news-list li .list-text .title .tag {color: #ef4036;}
.section3 .news-list li .list-text .date {color: #999; font-size: 14px;}

/****************************** sub 공통 ******************************/
.page-title-wrap {margin-bottom: 40px;}
.page-title {font-size: 60px; font-weight: 800; margin-bottom: 10px;}
.page-sub-title strong {color: #ef4036;}
.sub-bn-wrap {position: relative;}
.sub-bn {width: 75%; height: 300px; background-repeat: no-repeat; background-size: cover; background-position: center; border-top-right-radius: 250px; border-bottom-right-radius: 250px; margin-bottom: 70px;}
.sub-bn-wrap .deco {position: absolute; top: -150px; right: 0; width: 45%; height: 300px; float: right; background-color: #fcd9d7; border-top-left-radius: 250px; border-bottom-left-radius: 250px; z-index: -1;}

/****************************** company ******************************/
.comp-sec-title {font-size: 35px; font-weight: 700; position: relative; display: inline-block; margin-bottom: 100px;}
.comp-sec-title::after {position: absolute; display: block; content: ''; background-color: #ef4036; width: 10px; height: 10px; top: -3px; right: -10px; border-radius: 100%;}
.comp-1 {display: flex; align-content: center; padding-top: 100px; padding-bottom: 100px;}
.comp-1 > div {width: 50%;}
.comp-1 .left p {font-size: 40px; font-weight: 700; margin-bottom: 40px; line-height: 135%;}
.comp-1 .left .btn-down {display: inline-block; background-color: #ef4036; color: #fff; border-radius: 25px; padding: 0 25px; height: 45px; line-height: 45px; border: none; font-size: 16px;}
.comp-1 .right p {line-height: 135%;}

.comp-2 {padding-top: 70px; padding-bottom: 70px;}
.list-area {display: flex; flex-wrap: wrap; position: relative; margin-left: 0; margin-right: 0;}
.list-area::after {content: ''; position: absolute; top: 45%; left: 50%; width: 80px; height: 100px; transform: translate(-50%, -50%); background-color: #fff;}
.list-area li {display: flex; align-items: center; border: 2px solid transparent; border-right-color: #f3f3f3; border-bottom-color: #f3f3f3; padding-bottom: 70px; flex: 0 0 50%; max-width: 50%; box-sizing: border-box; width: 100%; position: relative; padding-left: 0; padding-right: 0;;}
.list-area li:nth-child(2n) {border-right: 0;}
.list-area li:nth-child(n+3) {padding-top: 70px; border-bottom: 0;}
.list-area li img {width: 120px; margin-right: 70px; box-sizing: border-box; flex: 0 0 120px;}
.list-area li:nth-child(2n) img {margin-left: 60px;}
.list-area li div h5 {margin-bottom: 20px; font-size: 22px;}
.list-area li div p {line-height: 135%;}

.comp-3 {padding-top: 80px; padding-bottom: 80px; background-color: #fdebea;}
.list-value {display: flex; justify-content: space-between; align-items: center;}
.list-value li {width: 360px; height: 360px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #fff; border-radius: 100%; text-align: center;}
.list-value li h5 {font-size: 35px; font-weight: 700; margin-bottom: 35px;}
.list-value li p {line-height: 135%; width: 70%; word-break: keep-all;}

.comp-4 {padding-top: 100px; padding-bottom: 100px;}
.comp-4 .comp-sec-title {margin-bottom: 30px;}
.map-wrap {width: 100%; height: 500px; background-color: #f0f0f0; margin-bottom: 15px;}
.map-wrap iframe {width: 100%; height: 100%;}
.map-info p {font-size: 16px; line-height: 135%;}
.map-info p strong {display: inline-block; width: 10%; font-weight: 700;}

/****************************** history ******************************/
.history-wrap {display: flex; height: auto; position: relative;}
.history-wrap > div {width: 50%;}
.year {height: 300px; position: sticky; top: 135px; display: block;}
.list-year li {margin-bottom: 60px; font-size: 28px; font-weight: 800;}
.list-year li:last-child {margin-bottom: 0;}
.list-year li.active {color: #ef4036;}
.list-year li:hover {color: #ef4036; transition: .3s all ease;}

.detail {margin-bottom: 100px; height: auto;}
.detail h4 {position: relative; font-size: 26px; line-height: 1; margin-bottom: 20px;}
.detail h4::before {content: ''; position: absolute; left: -35px; top: 50%; width: 10px; height: 10px; background-color: #ef4036; transform: translateY(-50%); box-sizing: border-box;}
.detail div {position: relative; padding: 0 0 30px 40px;}
.detail div::before {content: ''; position: absolute; left: 8px; top: 0; height: 100%; border-left: 2px solid #ddd;;}
.detail div:first-child::before {top: 10px; height: calc(100% - 10px);}
.detail ol {padding: 20px - 70px;}
.detail li {font-size: 16px; margin-bottom: 15px;}
.detail li:last-child {margin-bottom: 0;}

/****************************** works ******************************/
.fadein {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */}

.back-blue {background-color: #fdfdfd;} /* f1faff*/
.back-yellow {background-color: #fff7e4;}

.list-board {display: flex; flex-wrap: wrap;}
.list-board li {width: 32%; margin-right: 2%; margin-bottom: 60px; flex: 0 0 32%;}
.list-board li:nth-child(3n) {margin-right: 0;}
.work-thumb {width: 100%; height: 250px; margin-bottom: 20px; background-size: 80%; cursor: pointer; background-repeat: no-repeat; background-position: center; box-shadow: 0 0 10px #ddd; border-radius: 5px;}
.work-title .work-sub {color: #999; font-weight: 500; font-size: 16px; cursor: pointer; margin-bottom: 8px;}
.work-title .work-main {color: #333; font-weight: 600; font-size: 24px; cursor: pointer;}

.board-detail-top .btn-back {height: 55px; transform: rotate(180deg); background-color: transparent; margin-top: 20px; border: none; cursor: pointer;}
.board-detail-top .board-detail-title {font-size: 36px; font-weight: 700; margin-bottom: 20px; transition: 0.3s;}
.board-detail-top .board-sub-title {font-weight: 300; color: #666; line-height: 135%; font-size: 22px; margin-bottom: 50px;}

.main-img {background-repeat: no-repeat; background-size: cover; background-position: center; height: 450px;}

.board-sec {padding: 10rem 0; margin: 0 auto; border-bottom: 1px solid #ddd;}
.sec-wrap {position: relative;}
.con-board {margin-left: auto; margin-right: auto; max-width: 1300px;}
.sec-title {font-size: 33px; font-weight: 700; margin-bottom: 25px; line-height: 40px;}
.sec-info {word-break: keep-all; font-size: 18px; line-height: 135%;}
.last-sec {text-align: center; padding: 7rem 0;} 
.last-sec p {color: #fff; font-weight: 700; font-size: 40px; line-height: 145%;}
.last-sec button {margin-top: 30px; background-color: #fff; border-radius: 25px; padding: 13px 60px; box-sizing: border-box; font-weight: 600; font-size: 18px; border: none; cursor: pointer;}

/*********** 클라우드 ***********/
.tab-sec {padding: 3rem 0;}
.sec-wrap .board-img {width: 50%;}
.sec-wrap .board-img img {height: 280px; box-shadow: 0px 0px 10px #ccc;; border-radius: 20px;}
.sec-wrap .board-info {width: 40%;}
.sec-title.cloud {color: #042760;}
.last-sec.cloud {background-color: #5a76ad;}
.last-sec.cloud button {color: #5a76ad;}
.tab-sec.cloud {background-color: #d4e2ff;}
.tab-menu.cloud > ul li {font-size: 20px; padding: 10px 25px; color: #a0a0a0; margin-right: 20px; font-weight: 600;}
.tab-menu.cloud > ul li:last-child {margin-right: 0;}
.tab-menu.cloud > ul li.active {color: #042760; box-shadow: none; background-color: #fff; border-radius: 25px; font-weight: 700;}
.sec-link {margin-top: 20px; border: 3px solid #5a76ad; display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 10px 25px; border-radius: 7px; text-align: center; font-weight: 600; background-color: #fff; color: #333;}

/*********** 전기차 ***********/
/* 24-04-08 로봇 페이지 복사 및 수정 추가 */
.board-sec.eveco {padding: 12rem 0;}
.sec-title.eveco span {color: #02ad96;}
.deco .deco-circle {position: absolute; border-radius: 100%; background-color: #e5f6f4; transition: 0.3s ease-in; z-index: -2;}
/* 로봇 데코 동그라미 색상 변경 추가 */
.deco .deco-circle.blue {position: absolute; border-radius: 100%; background-color: #ebf5ff; transition: 0.3s ease-in; z-index: -2;}
.deco .circle01 {width: 370px; height: 370px; left: -300px; top: 0;}
.deco .circle02 {width: 100px; height: 100px; right: -240px; top: 120px;}
.deco .circle03 {width: 210px; height: 210px; right: -180px; top: 250px;}
.tab-menu > ul li {display: inline-block; box-sizing: border-box; padding: 8px 22px; font-size: 17px; cursor: pointer;}
.tab-menu > ul li.active {font-weight: 500; border-radius: 8px; box-shadow: 0 0 8px #ddd; color: #02ad96;}
/* robot 탭 메뉴 색상 추가 수정*/
.Rtab-menu > ul li.active {font-weight: 500; border-radius: 8px; box-shadow: 0 0 8px #ddd; color: #4282ea;}
.tab-con > div {display: none;}
.tab-con > div.on {display: block;}
.tab-con-div {padding-top: 40px;}
.tab-con-div > p {font-size: 16px; margin-bottom: 40px;}
.tab-con-div > img {width: 60%;}
/* robot 탭 이미지 사이즈 조정 및 클래스 추가 */
.robot-con-div > img {width: 50%;}
.tab-con-div:nth-child(6) > img {width: 40%;}
.sec-img {margin-top: 70px;}
.step li {position: relative; width: 180px; padding: 30px 0; margin-right: 30px; background-color: #fff; border-radius: 20px; box-sizing: border-box;}
.step li::after {position: absolute; content: ''; display: block; right: -33px; top: 50%; transform: translateY(-50%); border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #02ad96; border-right: 10px solid transparent;;}
.step li:last-child {margin-right: 0;}
.step li:last-child::after {display: none;}
.step li .step-img {height: 70px; width: auto;}
.step li p {margin-top: 15px;}
.last-sec.eveco {background-color: #02ad96; padding: 7rem 0;}
.last-sec.robot {background-color: #4282ea; padding: 7rem 0;}
.last-sec.eveco button {color: #02ad96}
.last-sec.robot button{color: #4282ea;}

/* 24-04-09 로봇 조직도 추가 */
.organization-chart{}
.organization-chart img{float: right; position: relative; bottom: 197px;}
.chart2 img{float: right; position: relative; bottom: 215px;}

/* 23-12-15 ocpp 인증 추가 */
.hmm{padding: 12rem 0;}
.hmm .hmm_title{font-size: 33px; font-weight: 700; margin-bottom: 25px;}
.hmm .hmm_title span{color: #02ad96;}
.hmm .hmm_info{margin-bottom: 70px; font-size: 18px;}

/*********** 코코아 ***********/
.board-sec.cocoa {padding: 12rem 0;}
.sec-title.cocoa {color: #5c3600;}

/* 24-04-09 코코아 조직도 추가 */
.chart4{}
.chart4 img{position: absolute; right: 0; top: -24px;}

/* 24-04-09 공공기관 조직도 추가 */
.chart5{}
.chart5 img{position: absolute; right: 0; top: 0;}

.board-sec.cocoa.sec01 {padding: 10rem 0 12rem;}
.board-sec.cocoa.sec01 .sec-title+p {font-size: 16px;}
.board-sec.cocoa .circle-wrap {margin: 50px auto 0; width: 80%;}
.board-sec.cocoa .circle-wrap .map01 {display: flex; justify-content: center;}
.board-sec.cocoa .circle-wrap .map02 {display: flex; justify-content: space-around; align-items: center; margin: 90px 0;}
.board-sec.cocoa .circle-wrap .map03 {display: flex; justify-content: space-around;}
.board-sec.cocoa .circle-wrap .map-el {position: relative;}
.board-sec.cocoa .circle-wrap .map-el::after {content: ''; display: block; position: absolute;  border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #5c3600; border-left: 10px solid transparent;}
.board-sec.cocoa .circle-wrap .map01 .map-el::after {bottom: -50px; left: 50%; transform: rotate(90deg) translateX(-50%);}
.board-sec.cocoa .circle-wrap .map02 .map-el:nth-child(1):after {top: 50%; right: -80px; transform: translateY(-50%)}
.board-sec.cocoa .circle-wrap .map02 .map-el:nth-child(3):after {top: 50%; left: -80px; transform: translateY(-50%) rotate(-180deg)}
.board-sec.cocoa .circle-wrap .map03 .map-el:nth-child(1):after {top: -15%; right: -80px; transform: translateY(-50%) rotate(-45deg)}
.board-sec.cocoa .circle-wrap .map03 .map-el:nth-child(2):after {top: -15%; left: -80px; transform: translateY(-50%) rotate(-135deg)}
.board-sec.cocoa .circle-wrap .map-el span {width: 160px; background-color: #ffebbc; color: #5c3600; font-weight: 500; font-size: 18px; text-align: center; display: inline-block; border-radius: 10px; padding: 8px 0; box-sizing: border-box; font-weight: 600;}
.board-sec.cocoa .circle-wrap .map01 .map-el span, .board-sec.cocoa .circle-wrap .map01 .map-el p {margin-left: 10px;}
.board-sec.cocoa .circle-wrap .map-el p {margin-top: 10px; font-size: 15px;}
.board-sec.cocoa .circle-wrap .center {width: 220px; height: 220px; border-radius: 100%; background-color: #5c3600; position: relative;}
.board-sec.cocoa .circle-wrap .center .center02 {width: 180px; height: 180px; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #eead12;}
.board-sec.cocoa .circle-wrap .center .center02 .center03 {width: 140px; height: 140px; border-radius: 100%; background-color: #fff;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;}
.board-sec.cocoa .circle-wrap .center .center02 .center03 img {width: 80%;}

.board-sec.cocoa .left {width: 60%;}
.board-sec.cocoa .title {font-size: 24px; font-weight: 700; color: #666; margin-bottom: 20px;}
.board-sec.cocoa .left ul li {display: flex; justify-content: space-between; width: 100%; margin-bottom: 15px; align-items: center;}
.board-sec.cocoa .left ul li:last-child {margin-bottom: 0;}
.board-sec.cocoa .left ul li div {width: 30%; background-color: #fff; border-radius: 7px; text-align: center; height: 50px; line-height: 50px; font-size: 18px; color: #333; font-weight: 500;}
.board-sec.cocoa .left ul li p {width: 65%; text-align: left; font-size: 17px; word-break: keep-all;}

.board-sec.cocoa .arrow {width: 10%;}
.board-sec.cocoa .arrow img {height: 80px;}

.board-sec.cocoa .right {width: 30%;}
.board-sec.cocoa .right > div span {display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; border-radius: 100%; text-align: center; font-weight: 600; font-size: 18px; color: #5c3600;}
.board-sec.cocoa .right > div:nth-child(1) span:nth-child(1), .board-sec.cocoa .right > div:nth-child(2) span:nth-child(2) {background-color: #fff;}
.board-sec.cocoa .right > div:nth-child(1) span:nth-child(2), .board-sec.cocoa .right > div:nth-child(2) span:nth-child(1) {background-color: #ffebbc;}

.board-sec.cocoa .flow-line {position: absolute; left: 50%; transform: translateX(-50%); width: 55%;}
.board-sec.cocoa .flow-line p {text-align: center; font-size: 16px; color: #333; font-weight: 500; margin-bottom: 10px;}
.board-sec.cocoa .flow-line .line {height: 3px; background-color: #5c3600; width: 100; position: relative;}
.board-sec.cocoa .flow-line .line::before {content: ''; display: block; position: absolute;  border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #5c3600; border-left: 10px solid transparent; top: 50%; transform: translateY(-50%); left: -15px;}
.board-sec.cocoa .flow {width: 100%; align-items: flex-end; position: relative;}
.board-sec.cocoa .flow li {margin: 0 auto; display: flex; flex-direction: column; align-items: center;}
.board-sec.cocoa .flow li .circle {width: 200px; height: 200px; border-radius: 100%; background-color: #fff7e4; display: flex; align-items: center; justify-content: center;;}
.board-sec.cocoa .flow li:nth-child(7) .circle {background-color: #5c3600;}
.board-sec.cocoa .flow li .circle.small {width: 120px; height: 120px; background-color: #fff; border: 2px solid #5c3600;}
.board-sec.cocoa .flow li:nth-child(1) .circle img {width: 140px;}
.board-sec.cocoa .flow li:nth-child(3) .circle img {width: 50px;}
.board-sec.cocoa .flow li:nth-child(5) .circle img {width: 50px;}
.board-sec.cocoa .flow li:nth-child(7) .circle img {width: 100px;}
.board-sec.cocoa .flow div.arrow img {height: 40px; position: absolute; top: 50%; transform: translateY(-50%);}
.board-sec.cocoa .flow li p {text-align: center; margin-top: 20px; font-size: 18px; color: #333; font-weight: 500;}

.board-sec.cocoa .service {flex-wrap: wrap;}
.board-sec.cocoa .service li {width: 100%;}
.board-sec.cocoa .service li:nth-child(1) {margin-bottom: 30px;}
.board-sec.cocoa .service li div {width: 48%; background-color: #fff; box-sizing: border-box; padding: 25px; border-radius: 15px;}
.board-sec.cocoa .service li .service-title {color: #eead12; font-weight: 600; margin-bottom: 20px; font-size: 18px;}
.board-sec.cocoa .service li .service-info {line-height: 165%; color: #333; font-size: 17px;}

.board-sec.cocoa.last-sec {padding: 7rem 0;}
.board-sec.cocoa.last-sec button {color: #fff; width: 200px; padding: 13px 0; margin-top: 0;}
.board-sec.cocoa.last-sec button:nth-child(1) {margin-right: 15px; background-color: #eead12;}
.board-sec.cocoa.last-sec button:nth-child(2) {background-color: #5c3600;}

/****************************** news ******************************/
.news-category {display: flex; flex-wrap: wrap;  margin-bottom: 15px;}
.news-category li {margin-right: 15px; cursor: pointer; margin-bottom: 28px;}
.news-category li span {border: 1.5px solid rgb(219, 222, 226); border-radius: 25px; box-sizing: border-box; padding: 8px 20px;}
.news-category li:hover span, .news-category li.active span {background-color: #ffdad8; color: #ef4036; border: 1px solid #ffdad8;}

.list-news li {margin-bottom: 25px;}
.list-news li a {width: 100%; display: flex; box-sizing: border-box;}
.list-news li a .news-thumb {width: 35%; height: 220px; padding: 10px; box-shadow: -2px 1px 12px #ddd; box-sizing: border-box; margin-right: 30px; text-align: center; background-repeat: no-repeat; background-size: contain; background-position: center;}
.list-news li a .news-text {width: 65%; display: flex; flex-direction: column; justify-content: center;}
.list-news li a .news-text .tag {font-size: 15px; font-weight: 600; color: #ef4036;}
.list-news li a .news-text .title {font-size: 18px; font-weight: 600; margin-bottom: 10px;}
.list-news li a .news-text .content {font-size: 16px; color: #aaa; line-height: 135%; margin-bottom: 10px;}
.list-news li a .news-text .date {font-size: 14px; color: #666; font-weight: 500;}

/****************************** contact ******************************/
.bg-red {background-color: #d0433a; color: #fff; text-align: center; padding: 80px 0 70px;}
.request-info {font-size: 18px; font-weight: 300; margin-bottom: 70px; line-height: 135%;}
.request-info .bold {font-weight: 600;}
.request-slogan {font-size: 20px; margin-bottom: 50px;}
.request-slogan em {font-style: italic;}
.contact ul {display: flex; justify-content: center;}
.contact ul li {position: relative; width: 150px; height: 150px; margin-right: 110px; background-color: rgba(255,255,255,0.2); text-align: center;}
.contact ul li::before {display: inline-block; content: ''; height: 80%; width: 1px; vertical-align: middle;}
.contact ul li:last-child {margin-right: 0;}
.contact ul li p {margin-top: -15px; font-size: 14px; color: #fff;}
.contact ul li img {width: 75px; height: 75px; vertical-align: middle;}

.bg-white {background-color: #fff; position: relative;}
.bg-white::before {content: ''; position: absolute; width: 0; height: 0; top: 0; left: 50%; transform: translate(-50%,0); border-top: 20px solid #d0433a; border-bottom: 20px solid transparent; border-right: 20px solid transparent; border-left: 20px solid transparent;}
.icon-wrap {padding: 70px 0;}
.icon-wrap ul {display: flex; justify-content: center;}
.icon-wrap ul li .icon-el {width: 250px; height: 150px; text-align: center;}
.icon-wrap ul li img {display: block; margin: 0 auto; height: 65px;}
.icon-wrap ul li .icon-el .icon-title {font-size: 17px; color: #d0433a; padding-top: 15px;}
.icon-wrap ul li .icon-el .icon-info {font-size: 15px; color: #333; padding-top: 8px; line-height: 135%;}

.detail-wrap {position: relative; width: 100%; overflow-x: hidden; padding-bottom: 70px;}
.contact-1, .contact-2 {position: relative; width: 100%; height: 350px; display: flex;}
.contact-1 {margin-bottom: 80px;}
.contact-1 .detail-info {background-color: rgba(247,245,245,0.8); padding: 65px 18.5vw;}
.contact-1 .detail-info .detail-info-title {position: relative; font-size: 19px; color: #333; font-weight: 600; z-index: 1; margin-bottom: 20px;}
.contact-1 .detail-info .detail-info-title::after {content: ''; position: absolute; top: -3px; left: -12px; z-index: -1; background-color: #ffdad8; border-radius: 11px; width: 22px; height: 22px;}
.contact-1 .detail-info .detail-info-lang span {background-color: #333; color: #fff; font-size: 15px; padding: 5px; margin-right: 8px; line-height: 40px;}
.contact-1 .detail-img {position: absolute; right: 18%; top: 5%; width: 593px; height: 350px; box-shadow: 7px 7px 10px 0px #ccc;}
.contact-1 .detail-img img {width: auto; height: 350px;}

.contact-2 {justify-content: flex-end;}
.contact-2 .detail-img {position: absolute; left: 18%; top: 10%;}
.contact-2 .detail-img img {height: 305px;}
.contact-2 .detail-info {background-color: rgba(247,244,249,0.8); padding: 90px 17vw 90px 25vw;}
.contact-2 .detail-info .detail-info-title {position: relative; font-size: 19px; color: #333; font-weight: 600; z-index: 1; margin-bottom: 30px;}
.contact-2 .detail-info .detail-info-title::after {content: ''; position: absolute; top: -3px; left: -12px; z-index: -1; background-color: #ecd8ff; border-radius: 11px; width: 22px; height: 22px;}
.contact-2 .detail-info .detail-info-hp {font-size: 16px; color: #555; line-height: 28px;}
.contact-2 .detail-info .detail-info-hp img {display: block; height: 50px; margin-top: 15px;}

.bg-purple {width: 100%; background-color: #4b3466;}
.bg-wrap {background: url('/images/contact/process_bg.png') no-repeat center center/cover; z-index: 1; padding: 40px 0 70px;}
.process-wrap {display: block;}
.mo-process-wrap {display: none;}
.process-wrap .process-title {font-size: 19px; font-weight: 500; margin-bottom: 15px; color: #fff;}
.process-wrap ul {display: flex; width: 100%;}
.process-wrap ul li {position: relative; width: 16.666667%; height: 265px; margin-right: 20px; background-color: #fff; border-radius: 10px; padding: 25px 15px;}
.process-wrap ul li:last-child {margin-right: 0;}
.process-wrap ul li::after {position: absolute; content: ''; right: -19px; top: 50%; transform: translate(0,-50%); border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #fff; border-right: 10px solid transparent;}
.process-wrap ul li:last-child::after {border: none;}
.process-wrap ul li .step-num {position: relative; font-size: 15px; font-weight: 600; color: #4b3466;}
.process-wrap ul li .step-num::before {position: absolute; content: ''; background-color: #4b3466; width: 40%; height: 2px; top: -7px;}
.process-wrap ul li .step-title {display:flex; align-items: center; justify-content: center; height: 45px; text-align: center; margin-top: 30px; font-size: 16px; font-weight: 600; color: #666;}
.process-wrap ul li img {display: block; margin: 0 auto; margin-top: 40px; height: 50px;}

@media all and (max-width:1024px) {
    /****************************** main ******************************/
    .main-sec-title {font-size: 30px; margin-bottom: 20px;}

    .main-section {margin-top: 50px;}
    .section1 {height: 100vh; margin-top: -70px;}
    .section1 .main-bg {height: 100vh;}
    .section1 .main-text {font-size: 50px;}
    .section1 .sub-text {font-size: 20px;}

    .section2 .main-sec-title {padding: 0 25px; margin: 0 auto 20px;}
    .section2 .bn-wrap .swiper-container, .section2 .bn-wrap .swiper-wrapper, .section2 .bn-wrap .swiper-slide {height: 500px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .title {font-size: 40px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .sub-title {font-size: 25px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .text {font-size: 16px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .btn-more {width: 145px; height: 35px; line-height: 33px; font-size: 15px;}
    .swiper-pagination-bullet {width: 4px; height: 55px;}
    .swiper-pagination .swiper-pagination-bullet::after {font-size: 15px;}
    .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {right: 2.2%;}

    .section3 {margin-bottom: 80px;}
    .section3 .news-list li .list-thumb {height: 200px; margin-bottom: 18px;}

    .main-section .bn-wrap .bn-con .eveco .ev-text{padding: 115px 20px 0 20px;}
    .main-section .bn-wrap .bn-con .kiwi .kiwi-text{padding: 115px 20px 0 20px;}
    .main-section .bn-wrap .bn-con .robot .robot-text{padding: 110px 20px 0 20px;}
    .main-section .bn-wrap .bn-con .kcs .kcs-text{padding: 110px 20px 0 20px;}
    .main-section .bn-wrap .bn-con .cocoa .cocoa-text{padding: 120px 20px 0 20px;}

    /****************************** sub 공통 ******************************/
    .page-title {font-size: 48px;}
    .sub-bn {height: 230px; margin-bottom: 30px;}
    .sub-bn-wrap .deco {height: 230px; top: -115px;}
    .comp-sec-title {font-size: 28px; margin-bottom: 50px;}

    /****************************** company ******************************/
    .comp-1 {padding-top: 80px; padding-bottom: 80px;}
    .comp-1 .left p {font-size: 26px; margin-bottom: 30px;}
    .comp-1 .left .btn-down {height: 40px; line-height: 40px; font-size: 15px;}
    .comp-1 .right p {font-size: 15px;}

    .comp-2 {padding-top: 50px; padding-bottom: 50px;}
    .list-area li img {width: 85px; flex: 0 0 85px; margin-right: 30px;}
    .list-area li:nth-child(2n) img {margin-left: 20px;}
    .list-area li div h5 {margin-bottom: 16px; font-size: 20px;}
    .list-area li div p {font-size: 15px;}

    .comp-3 {padding-top: 60px; padding-bottom: 60px;}
    .list-value li {width: 250px; height: 250px;}
    .list-value li h5 {font-size: 28px; margin-bottom: 25px;}
    .list-value li p {font-size: 15px; width: 80%;}

    .comp-4 {padding-top: 80px; padding-bottom: 80px;}
    .map-wrap {height: 400px;}
    .map-info p {font-size: 15px;}

    /****************************** history ******************************/
    .history-wrap .year {width: 30%;}
    .history-wrap .detail {width: 70%;}
    .list-year li {font-size: 25px; margin-bottom: 45px;}
    .detail h4 {font-size: 22px;}
    .detail li {line-height: 120%; font-size: 15px;}

    /****************************** works ******************************/
    .board-wrap {margin-top: 60px;}
    .list-board li {margin-bottom: 40px;}
    .work-thumb {height: 200px;}
    .work-title .work-sub {font-size: 14px;}
    .work-title .work-main {font-size: 22px;}

    .board-detail-top .board-detail-title {font-size: 28px;}
    .board-detail-top .board-sub-title {font-size: 18px; margin-bottom: 35px;}
    .main-img {height: 240px;}
    .board-sec {padding: 7rem 0;}
    
    .sec-wrap .board-img img {height: 200px;}
    
    .sec-title {font-size: 26px; margin-bottom: 15px;}
    .sec-info {font-size: 14px;}
    .last-sec {padding: 4rem 0;}
    .last-sec p {font-size: 26px;}
    .last-sec button {padding: 6px 50px; font-size: 16px;}

    /*********** cloud ************/
    .tab-sec {padding: 2.5rem 0;}
    .tab-menu.cloud > ul li {font-size: 18px; padding: 10px 25px;}
    .sec-link {margin-top: 15px; padding: 6px 22px; border-radius: 5px; font-size: 14px;}

     /* cloud 조직도 반응형 */
     .chart2 img{width: 35%; bottom: 197px;}

    /*********** 전기차 ***********/
    .board-sec.eveco {padding: 7rem 0;}
    .deco .circle01 {left: -200px;}
    .deco .circle02 {right: 50px;}
    .deco .circle03 {right: 110px;}
    .tab-menu > ul li {font-size: 15px;}
    .sec-img {width: 60%;}
    .step {width: 80%; margin: 0 auto;}
    .last-sec.eveco {padding: 5rem 0;}

    /* 전기차 조직도 반응형 */
    .organization-chart img{width: 30%; bottom: 150px;}

    /* 23-12-15 ocpp 인증 추가 */
    .hmm{padding: 7rem 0;}
    .hmm .hmm_title{font-size: 26px; margin-bottom: 15px;}
    .hmm .hmm_info{font-size: 14px;}
    .hmm .hmm_img{width: 70%;}
    .hmm .copyright-img{width: 80%;}

    /* 24-04-09 공공기관 조직도 추가 */
    .chart5 img{width: 33%;}

    /*********** 코코아 ***********/
    .board-sec.cocoa {padding: 7rem 0;}
    .board-sec.cocoa.last-sec {padding: 5rem 0;}

    /* 24-04-09 코코아 반응형 */
    .chart4 img{width: 30%; top: -20px;}

    /****************************** news ******************************/
    .list-news li a .news-thumb {width: 40%; height: 180px;}
	.list-news li a .news-text .tag {font-size: 13px;}
	.list-news li a .news-text .title {font-size: 16px;}
	.list-news li a .news-text .content {font-size: 14px;}
	.list-news li a .news-text .date {font-size: 12px;}

    /****************************** contact ******************************/
    .request-info {font-size: 16px;}
	.request-slogan {font-size: 18px;}
	.contact ul li {width: 135px; height: 135px; margin-right: 55px;}
	.contact ul li img {width: 55px; height: 55px;}
	.contact ul li p {font-size: 12px;}

	.bg-white::before {top: -1px;}
	.icon-wrap ul {width: 80%; margin: 0 auto; display: block;}
	.icon-wrap ul::after {content: ''; display: block; clear: both;}
	.icon-wrap ul li {float: left; width: 50%;}
	.icon-wrap ul li .icon-el {width: 220px; height: 150px; margin: 0 auto 23px;}
	.icon-wrap ul li:nth-child(3) .icon-el, .icon-wrap ul li:nth-child(4) .icon-el {margin: 0 auto;}
	.icon-wrap ul li img {height: 50px;}
	.icon-wrap ul li .icon-el .icon-title {font-size: 16px;}
	.icon-wrap ul li .icon-el .icon-info {font-size: 14px;}

	.contact-1, .contact-2 {height: 305px;}
	.contact-1 .detail-info {padding: 65px 26.5vw 65px 5vw;}
	.contact-1 .detail-img {top: 7%; right: 6%; width: 449px; height: 264px;}
	.contact-1 .detail-img img {height: 264px;}

	.contact-2 .detail-img {top: 16%; left: 7%}
	.contact-2 .detail-img img {height: 220px;}
	.contact-2 .detail-info {padding: 65px 5.5vw 65px 27.8vw;}

	.tab-process-wrap ul li {height: 235px; padding: 25px 9px; margin-right: 10px;}
	.process-wrap ul li .step-title {font-size: 14px;}
	.process-wrap ul li img {margin-top: 25px;}	
}

/* cloud 조직도 반응형 추가 */
/* @media all and (max-width:895px){
    
    .chart2 img{content: url('../images/orChart2-img-small.png'); width: 20%; bottom: 177px;}

} */

@media all and (max-width:768px) {
    /****************************** main ******************************/
    .main-sec-title {font-size: 25px; margin-bottom: 20px;}
    .main-section {margin-top: 50px;}

    .section1 {margin-top: -65px;}
    .section1 .main-text {font-size: 45px; margin-bottom: 25px;}
    .section1 .sub-text {font-size: 18px;}

    .section2 .main-sec-title {padding: 0 20px;}
    .section2 .bn-wrap .swiper-container, .section2 .bn-wrap .swiper-wrapper, .section2 .bn-wrap .swiper-slide {height: 400px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .title {font-size: 30px; margin-bottom: 16px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .sub-title {font-size: 22px; margin-bottom: 16px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .text {font-size: 14px; margin-bottom: 25px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .btn-more {width: 140px; height: 32px; line-height: 30px; font-size: 14px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .btn-more img {height: 14px;}
    .swiper-pagination-bullet {height: 50px;}
    .swiper-pagination .swiper-pagination-bullet::after {font-size: 14px;}

    .section3 .news-list li .list-thumb {height: 150px; margin-bottom: 10px;}
    .section3 .news-list li .list-text .title {font-size: 15px; margin-bottom: 6px; line-height: 125%;}
    .section3 .news-list li .list-text .date {font-size: 13px;}

    /* 전기차 반응형 */
    .main-section .bn-wrap .bn-con .eveco{height: 359px;}
    .main-section .bn-wrap .bn-con .eveco .ev-text .ev-logo{background: url(../images/eveco_logo_767.png) no-repeat; width: 165px; height: 39px; margin-bottom: 25px;}
    .main-section .bn-wrap .bn-con .eveco .ev-text .ev-ex h3{font-size: 23px;}
    .main-section .bn-wrap .bn-con .eveco .ev-text .ev-ex p{font-size: 17px;}

    /* 키위 반응형 */
    .main-section .bn-wrap .bn-con .kiwi .kiwi-text .kiwi-logo{background: url(../images/kiwi-logo-767.png) no-repeat; width: 136px; height: 58px; margin-bottom: 25px;}
    .main-section .bn-wrap .bn-con .kiwi .kiwi-text .kiwi-ex h3{font-size: 23px;}
    .main-section .bn-wrap .bn-con .kiwi .kiwi-text .kiwi-ex p{font-size: 17px;}
    .main-section .bn-wrap .bn-con .kiwi{height: 359px;}
    .main-section .bn-wrap .bn-con .kiwi .kiwi-text{padding: 108px 20px 0 20px;}

    /* 로봇 반응형 */
    .main-section .bn-wrap .bn-con .robot .robot-text .robot-logo{background: url(../images/robot-logo-767.png) no-repeat; width: 173px; height: 58px; margin-bottom: 25px;}
    .main-section .bn-wrap .bn-con .robot .robot-text .robot-ex h3{font-size: 23px;}
    .main-section .bn-wrap .bn-con .robot .robot-text .robot-ex p{font-size: 17px;}
    .main-section .bn-wrap .bn-con .robot{height: 359px;}
    .main-section .bn-wrap .bn-con .robot .robot-text{padding: 105px 20px 0 20px;}

    /* 공공기관 반응형 */
    .main-section .bn-wrap .bn-con .kcs .kcs-text .kcs-logo{background: url(../images/kcs-logo-767.png) no-repeat; width: 187px; height: 74px; margin-bottom: 25px;}
    .main-section .bn-wrap .bn-con .kcs .kcs-text .kcs-ex h3{font-size: 23px;}
    .main-section .bn-wrap .bn-con .kcs .kcs-text .kcs-ex p{font-size: 17px};
    .main-section .bn-wrap .bn-con .kcs .kcs-text{padding: 99px 20px 0 20px;}
    .main-section .bn-wrap .bn-con .kcs{height: 359px;}

    /* 코코아 반응형 */
    .main-section .bn-wrap .bn-con .cocoa{height: 359px;}
    .main-section .bn-wrap .bn-con .cocoa .cocoa-text .cocoa-logo{background: url(../images/cocoa-logo-767.png) no-repeat; width: 165px; height: 50px; margin-bottom: 25px;}
    .main-section .bn-wrap .bn-con .cocoa .cocoa-text .cocoa-ex h3{font-size: 23px;}
    .main-section .bn-wrap .bn-con .cocoa .cocoa-text .cocoa-ex p{font-size: 17px;}
    .main-section .bn-wrap .bn-con .cocoa .cocoa-text{padding: 110px 20px 0 20px;}
    
    /****************************** sub 공통 ******************************/
    .page-title-wrap {margin-bottom: 25px;}
    .page-title {font-size: 36px;}
    .page-sub-title {font-size: 15px;}
    .sub-bn {height: 160px; margin-bottom: 20px;}
    .sub-bn-wrap .deco {height: 160px; top: -80px;}
    .comp-sec-title {font-size: 24px; margin-bottom: 35px;}

    .bn-wrap .bn-con .viewMore{width: 120px; height: 39px; line-height: 39px; font-size: 15px;}

    /****************************** company ******************************/
    .comp-1 {padding-top: 40px; padding-bottom: 40px; display: block;}
    .comp-1 > div {width: 100%; margin: 0 auto; text-align: center;}
    .comp-1 .left {margin-bottom: 20px;}
    .comp-1 .left p {font-size: 22px; margin-bottom: 20px;}
    .comp-1 .left .btn-down {height: 35px; line-height: 35px; font-size: 13px; padding: 0 20px;}
    .comp-1 .right p {font-size: 14px;}

    .comp-2 {padding-top: 40px; padding-bottom: 40px;}
    .list-area li img {width: 80px; flex: 0 0 80px; margin-right: 20px;}
    .list-area li:nth-child(2n) img {margin-left: 15px;}
    .list-area li div h5 {margin-bottom: 8px; font-size: 15px;}
    .list-area li div p {font-size: 13px;}

    .comp-3 {padding-top: 40px; padding-bottom: 40px;}
    .list-value li {width: 200px; height: 200px;}
    .list-value li h5 {font-size: 22px; margin-bottom: 15px;}
    .list-value li p {font-size: 13px; width: 80%;}

    .comp-4 {padding-top: 40px; padding-bottom: 40px;}
    .map-wrap {height: 300px;}
    .map-info p {font-size: 14px;}
    .map-info p strong {width: 15%;}

    /****************************** history ******************************/
    .list-year li {font-size: 22px; margin-bottom: 35px;}
    .detail {margin-bottom: 60px;}
    .detail div {padding: 0 0 20px 30px;}
    .detail h4 {font-size: 20px;}
    .detail h4::before {left: -25px;}
    .detail li {font-size: 14px; margin-bottom: 12px;}

    /****************************** works ******************************/
    .board-wrap {margin-top: 40px;}
    .list-board li {margin-bottom: 30px;}
    .work-thumb {height: 150px; margin-bottom: 15px;}
    .work-title .work-sub {font-size: 13px;}
    .work-title .work-main {font-size: 18px;}

    .sec-title {font-size: 20px;}
    .sec-info {font-size: 13px; line-height: 130%;}
    .sec-wrap .board-info {width: 45%;}
    .sec-wrap .board-img img {height: auto; width: 80%;}

    .last-sec {padding: 3.5rem 0;}
    .last-sec p {font-size: 22px;}
    .last-sec button {margin-top: 15px; font-size: 14px; padding: 4px 30px;}

    /*********** cloud ***********/
    .tab-sec {padding: 2rem 0;}
    .tab-menu.cloud > ul li {font-size: 16px; padding: 8px 22px;}
    .sec-link {border: 2px solid #5a76ad; padding: 6px 18px; font-size: 13px; margin-top: 10px;}

    /* 24-04-09 cloud 조직도 추가 */
    .chart2 img{content: url('../images/orChart2-img-small.png'); width: 22%; bottom: 170px;}

    /*********** 전기차 ***********/
    .deco .circle01 {width: 300px; height: 300px; left: -200px;}
    .deco .circle02 {width: 80px; height: 80px; right: 10px;}
    .deco .circle03 {width: 160px; height: 160px; right: 50px; top: 200px;}
    .tab-menu > ul li {padding: 5px 18px; font-size: 14px;}
    .tab-con-div {padding-top: 30px;}
    .tab-con-div > p {font-size: 14px; margin-bottom: 30px;}
    .step li {background-color: transparent;}
    .step li .step-img {height: 60px;}
    .step li p {word-break: keep-all;}
    .step li::after {border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #02ad96; border-right: 7px solid transparent;}
    .sec-img {margin-top: 50px;}
    .last-sec.eveco {padding: 4rem 0;}

    /* 23-12-15 ocpp 인증 추가 */
    .hmm{padding: 4rem 0;}
    .hmm .hmm_title{font-size: 20px; margin-bottom: 15px;}
    .hmm .hmm_info{font-size: 14px; margin-bottom: 50px; }

    /* 24-04-09 전기차 조직도 추가 */
    .organization-chart img{content: url('../images/orChart-img-small.png'); width: 22%; bottom: 92px;}


    /*24-04-09 로봇 조직도 추가 */
    /*************로봇************/
    .organization-chart img{content: url('../images/orChart3-img-small.png'); width: 20%; bottom: 142px;}


    /* 24-04-09 공공기관 조직도 추가 */
    .chart5 img{content: url('../images/orChart5-img-small.png'); width: 18%; top: 12px; right: 18px;}


    /*********** 코코아 ***********/
    /* 24-04-09 코코아 조직도 추가 */
    .chart4 img{content: url('../images/orChart4-img-small.png'); width: 20%; top: -7px; right: 10px;}
    .board-sec.cocoa .circle-wrap {width: 100%;}
    .board-sec.cocoa .circle-wrap .center {width: 160px; height: 160px;}
    .board-sec.cocoa .circle-wrap .center .center02 {width: 140px; height: 140px;}
    .board-sec.cocoa .circle-wrap .center .center02 .center03 {width: 120px; height: 120px;}
    .board-sec.cocoa .circle-wrap .map02 .map-el:nth-child(1):after {right: -35px;}
    .board-sec.cocoa .circle-wrap .map02 .map-el:nth-child(3):after {left: -35px;}
    .board-sec.cocoa .circle-wrap .map03 .map-el:nth-child(1):after {right: -35px;}
    .board-sec.cocoa .circle-wrap .map03 .map-el:nth-child(2):after {left: -35px;}
    .board-sec.cocoa .circle-wrap .map-el span {width: 120px; font-size: 15px; padding: 6px 0; border-radius: 7px;}
    .board-sec.cocoa .circle-wrap .map-el p {font-size: 13px;}
    
    .board-sec.cocoa .title {font-size: 20px;}
    .board-sec.cocoa .left ul li div {height: 35px; line-height: 35px; font-size: 15px;}
    .board-sec.cocoa .left ul li p {font-size: 14px;}
    .board-sec.cocoa .right > div span {width: 110px; height: 110px; font-size: 15px;}
    .board-sec.cocoa .arrow img {height: 50px;}

    .board-sec.cocoa .flow li .circle {width: 120px; height: 120px;}
    .board-sec.cocoa .flow li .circle.small {width: 80px; height: 80px;}
    .board-sec.cocoa .flow li:nth-child(1) .circle img {width: 80%;}
    .board-sec.cocoa .flow li:nth-child(3) .circle img, .board-sec.cocoa .flow li:nth-child(5) .circle img, .board-sec.cocoa .flow li:nth-child(7) .circle img {width: 50%;}
    .board-sec.cocoa .flow li p {font-size: 15px;}
    .board-sec.cocoa .flow div.arrow img {height: 20px;}
    .board-sec.cocoa .flow-line p {font-size: 14px; margin-bottom: 6px;;}
    .board-sec.cocoa .flow-line .line {height: 2px;}
    .board-sec.cocoa .flow-line .line::before {border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid transparent; border-right: 7px solid #5c3600;}

    .board-sec.cocoa .service li div {padding: 20px; border-radius: 12px;}
    .board-sec.cocoa .service li .service-title {font-size: 16px; margin-bottom: 10px;}
    .board-sec.cocoa .service li .service-info {font-size: 14px;}
    .board-sec.cocoa.last-sec {padding: 4rem 0;}
    .board-sec.cocoa.last-sec button {width: 150px;}

    /****************************** news ******************************/
    .news-category {padding-top: 15px; margin-bottom: 10px;}
	.news-category li {margin-bottom: 20px; margin-right: 10px;}
	.news-category li span {font-size: 13px; padding: 6px 15px;}
    .list-news li a .news-thumb {margin-right: 20px;}

    /****************************** contact *******************************/
    .bg-wrap {padding: 40px 0;}
    .contact-1, .contact-2 {height: 250px;}
	.contact-1 .detail-info {padding: 45px 20.5vw 45px 4vw;}
	.contact-1 .detail-info .detail-info-title {margin-bottom: 5px;}
	.contact-1 .detail-info .detail-info-lang span {font-size: 14px; margin-right: 3px; line-height: 33px;}
	.contact-1 .detail-img {top: 9%; right: 4%; width: 340px; height: 200px;}
	.contact-1 .detail-img img {height: 200px;}

	.contact-2 .detail-img {top: 24%; left: 2.5%}
	.contact-2 .detail-img img {height: 145px;}
	.contact-2 .detail-info {padding: 45px 3vw 45px 24vw;}

}

@media all and (max-width:568px) {
    /****************************** main ******************************/
    .main-sec-title {font-size: 20px; margin-bottom: 15px;}
    .main-section {margin-top: 30px;}

    .section1 {margin-top: -50px;}
    .section1 .main-text {font-size: 32px; margin-bottom: 20px;}
    .section1 .sub-text {font-size: 14px; width: 60%; word-break: keep-all;}

    .section2 .main-sec-title {padding: 0 12px; margin: 0 auto 15px;}
    .section2 .bn-wrap .swiper-container, .section2 .bn-wrap .swiper-wrapper, .section2 .bn-wrap .swiper-slide {height: 250px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .title {font-size: 24px; margin-bottom: 10px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .sub-title {font-size: 16px; margin-bottom: 10px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .text {font-size: 13px; margin-bottom: 15px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .btn-more {width: 115px; height: 30px; line-height: 28px; font-size: 13px; padding: 0 15px;}
    .section2 .bn-wrap .swiper-slide .text-wrap .btn-more img {height: 14px;}
    .swiper-pagination {display: none;}

    .section3 {margin-top: 50px; margin-bottom: 50px;}
    .section3 .news-list {display: block;}
    .section3 .news-list li {width: 100%; margin-bottom: 15px;}
    .section3 .main-sec-title .btn-more {font-size: 13px;}
    .section3 .news-list li .list-text .title {font-size: 14px; margin-bottom: 6px; line-height: 120%;}
    .section3 .news-list li .list-text .date {font-size: 12px;}


    /* 전기차 반응형 */
    .main-section .bn-wrap .bn-con .eveco .ev-text .ev-logo{background: url(../images/eveco_logo_500.png) no-repeat; width: 123px; height: 29px;}
    .main-section .bn-wrap .bn-con .eveco .ev-text .ev-ex h3{font-size: 20px;}
    .main-section .bn-wrap .bn-con .eveco .ev-text .ev-ex p{font-size: 14px; margin-bottom: 20px;}
    .main-section .bn-wrap .bn-con .eveco .ev-text{padding: 90px 20px 0 20px;}
    .main-section .bn-wrap .bn-con .eveco{height: 330px;}
    .main-section .bn-wrap .bn-con .eveco .ev-text .ev-ex p{float: none;}


    /* 키위 반응형 */
    .main-section .bn-wrap .bn-con .kiwi{height: 330px;}
    .main-section .bn-wrap .bn-con .kiwi .kiwi-text .kiwi-ex h3{font-size: 20px;}
    .main-section .bn-wrap .bn-con .kiwi .kiwi-text .kiwi-ex p{font-size: 14px; float: none; margin-bottom: 20px;}
    .main-section .bn-wrap .bn-con .kiwi .kiwi-text .kiwi-logo{background: url(../images/kiwi-logo-500.png) no-repeat; width: 113px; height: 47px;}
    .main-section .bn-wrap .bn-con .kiwi .kiwi-text{padding: 80px 20px 0 20px;}


    /* 로봇 반응형  */
    .main-section .bn-wrap .bn-con .robot .robot-text .robot-logo{background: url(../images/robot-logo-500.png) no-repeat; width: 143px; height: 47px;}
    .main-section .bn-wrap .bn-con .robot .robot-text .robot-ex h3{font-size: 20px;}
    .main-section .bn-wrap .bn-con .robot .robot-text .robot-ex p{font-size: 14px; float: none; margin-bottom: 20px;}
    .main-section .bn-wrap .bn-con .robot{height: 330px;}
    .main-section .bn-wrap .bn-con .robot .robot-text{padding: 76px 20px 0 20px;}


    /* 관세청 반응형 */
    .main-section .bn-wrap .bn-con .kcs .kcs-text{padding: 80px 20px 0 20px;}
    .main-section .bn-wrap .bn-con .kcs{height: 330px;}
    .main-section .bn-wrap .bn-con .kcs .kcs-text .kcs-ex h3{font-size: 20px;}
    .main-section .bn-wrap .bn-con .kcs .kcs-text .kcs-ex p{font-size: 14px; float: none; margin-bottom: 20px;}
    .main-section .bn-wrap .bn-con .kcs .kcs-text .kcs-logo{background: url(../images/kcs-logo-500.png) no-repeat; width: 155px; height: 61px;}


    /* 코코아 반응형 */
    .main-section .bn-wrap .bn-con .cocoa .cocoa-text .cocoa-logo{background: url(../images/cocoa-logo-500.png) no-repeat; width: 133px; height: 40px;}
    .main-section .bn-wrap .bn-con .cocoa .cocoa-text .cocoa-ex h3{font-size: 20px;}
    .main-section .bn-wrap .bn-con .cocoa .cocoa-text .cocoa-ex p{font-size: 14px; float: none; margin-bottom: 20px;}
    .main-section .bn-wrap .bn-con .cocoa{height: 330px;}
    .main-section .bn-wrap .bn-con .cocoa .cocoa-text{padding: 83px 20px 0 20px;}

    /****************************** sub 공통 ******************************/
    .page-title-wrap {margin-bottom: 15px;}
    .page-title {font-size: 28px;}
    .page-sub-title {font-size: 14px;}
    .sub-bn {width: 100%; height: 200px; margin-bottom: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0;}
    .sub-bn-wrap .deco {display: none;}
    .comp-sec-title {font-size: 20px; margin-bottom: 30px; margin-top: 15px;}

    .bn-wrap .bn-con .viewMore{width: 97px; height: 35px; line-height: 35px; font-size: 13px; float: none;}

    /****************************** company ******************************/
    .comp-1 {padding-top: 20px; padding-bottom: 20px;}
    .comp-1 .left {margin-bottom: 15px;}
    .comp-1 .left p {font-size: 20px; margin-bottom: 15px;}
    .comp-1 .left .btn-down {height: 30px; line-height: 30px; font-size: 12px; padding: 0 20px;}
    .comp-1 .right p {font-size: 13px; line-height: 125%;}

    .comp-2 {padding-top: 20px; padding-bottom: 20px;}
    .list-area {display: block;}
    .list-area::after {display: none;}
    .list-area li {width: 100%; max-width: 100%; border-right-color: transparent; padding-bottom: 30px; margin-bottom: 30px;}
    .list-area li:nth-child(n+3) {padding-top: 0; border-bottom: 1px solid #f3f3f3;}
    .list-area li:last-child {margin-bottom: 0; border-bottom: 0;}
    .list-area li img {width: 70px; flex: 0 0 70px; margin-right: 30px;}
    .list-area li:nth-child(2n) img {margin-left: 0px;}

    .comp-3 {padding-top: 20px; padding-bottom: 20px;}
    .list-value {display: block}
    .list-value li {width: 100%; height: auto; padding: 30px 0; border-radius: 10px; margin-bottom: 10px;}
    .list-value li:last-child {margin-bottom: 0;}
    .list-value li h5 {font-size: 20px; margin-bottom: 12px;}
    .list-value li p {font-size: 14px; width: 85%;}

    .comp-4 {padding-top: 20px; padding-bottom: 20px;}
    .map-wrap {height: 200px;}
    .map-info p {font-size: 13px; line-height: 135%;}
    .map-info p strong {width: 25%;}

    /****************************** history ******************************/
    .year {display: none;}
    .history-wrap .detail {width: 100%;}
    .detail {margin-bottom: 50px;}
    .detail h4 {font-size: 20px; margin-bottom: 12px;}
    .detail li {margin-bottom: 10px;}

    /****************************** works ******************************/
    .board-wrap {margin-top: 30px;}
    .list-board {display: block;}
    .list-board li {width: 100%; margin-bottom: 20px; margin-right: 0;}
    .work-thumb {margin-bottom: 10px; border-radius: 6px; background-size: 60%;}

    .board-detail-top {margin-left: 0; padding: 0 15px;}
    .board-detail-top .btn-back {display: none;}
    .board-detail-top .board-detail-title {line-height: 125%; word-break: keep-all; font-size: 24px; margin-bottom: 10px;}
    .board-detail-top .board-sub-title {font-size: 14px; margin-bottom: 25px;}
    .main-img {height: 180px;}
    .board-sec {padding: 3rem 0;}
    .board-sec.cloud .sec-wrap {flex-direction: column;}
    .sec02.board-sec.cloud .sec-wrap, .sec04.board-sec.cloud .sec-wrap {flex-direction: column-reverse;}
    .sec-wrap {padding: 0 15px;}
    .sec-wrap .board-img, .sec-wrap .board-info {width: 100%; justify-content: center; align-items: center;}
    .sec-wrap .board-img img {width: 100%;}
    .sec-wrap .left {margin-bottom: 40px;}
    .sec02 .sec-wrap .left, .sec04 .sec-wrap .left {margin-bottom: 0;}
    .sec02 .sec-wrap .right, .sec04 .sec-wrap .right {margin-bottom: 40px;}
    .sec-title {font-size: 21px; width: 100%; margin-bottom: 20px; line-height: 130%;}
    .sec-info {font-size: 14px;}
    .kcs-info{width: 100%;}

    /*********** cloud ***********/
    .tab-sec {padding: 1rem 0;}
    .tab-menu.cloud > ul li {font-size: 15px; padding: 8px 20px; margin-right: 8px; margin-bottom: 0;}
    .sec-link {margin-top: 20px; justify-content: flex-start; border-radius: 3px; }

    .chart2 img{bottom: 47px;}

    /*********** 전기차 ***********/
    .board-sec.eveco {padding: 4rem 0;}
    .sec-title.eveco span {display: block;}
    .tab-menu > ul li {margin-bottom: 10px;}
    .tab-con-div > p {word-break: keep-all; line-height: 135%; margin-bottom: 20px;}
    .sec-img, .tab-con-div > img {width: 100%; margin-top: 30px;}
    .last-sec.eveco {padding: 2rem 0;}

    .organization-chart img{width: 23%; bottom: 47px; right: 3px;}

    /* 공공기관 */
    .chart5 img{width: 20%; top: 69px; right: 18px ;}

    /*********** 코코아 ***********/
    .board-sec.cocoa.sec01 {padding: 4rem 0 4rem;}
    .board-sec.cocoa.sec01 .sec-title+p {font-size: 14px;}
    .board-sec.cocoa .circle-wrap .map02, .board-sec.cocoa .circle-wrap .map03 {display: block; margin: -0;}
    .board-sec.cocoa .circle-wrap .center {display: none;}
    .board-sec.cocoa .circle-wrap .map-el {margin: 0 auto 25px; width: 100%;}
    .board-sec.cocoa .circle-wrap .map-el::after {display: none;}
    .board-sec.cocoa .circle-wrap .map01 .map-el span, .board-sec.cocoa .circle-wrap .map01 .map-el p {margin-left: 0;}
    .board-sec.cocoa .circle-wrap .map-el span {width: 100%; font-size: 16px; padding: 8px 0;}
    .board-sec.cocoa .circle-wrap .map-el p {font-size: 15px;}

    .board-sec.cocoa .service li {display: block;}
    .board-sec.cocoa .service li:nth-child(1) {margin-bottom: 0;}
    .board-sec.cocoa .service li div {width: 100%; margin-bottom: 15px;}
    .board-sec.cocoa.sec02 .sec-wrap {display: block;}
    .board-sec.cocoa.sec02 .sec-wrap > div {width: 100%;}
    .board-sec.cocoa.sec02 .sec-wrap > div.left {margin-bottom: 0px;}
    .board-sec.cocoa.sec02 .left ul li div {border-radius: 3px; width: 35%; font-size: 14px;}
    .board-sec.cocoa.sec02 .left ul li p {width: 62%; font-size: 13px;}
    .board-sec.cocoa.sec02 .arrow {margin: 20px 0;}
    .board-sec.cocoa.sec02 .arrow img {height: 30px; transform: rotate(90deg);}
    .board-sec.cocoa.sec02 .right > div span {width: 140px; height: 140px; font-size: 16px;}

    .board-sec.cocoa .flow {display: block;}
    .board-sec.cocoa .flow-line {right: -65%; transform: translateX(-50%) rotate(90deg); width: 90%; top: 50%; left: auto;}
    .board-sec.cocoa .flow li {margin: 0 auto 10px;}
    .board-sec.cocoa .flow li p {margin-top: 10px;}
    .board-sec.cocoa .flow .arrow {width: auto;}
    .board-sec.cocoa .flow div.arrow img {position: relative; transform: rotate(90deg);}
    .board-sec.cocoa.last-sec {padding: 2rem 0;}

    /****************************** news ******************************/
    .list-news li a {display: block;}
	.list-news li a .news-thumb {width: 100%; margin-bottom: 15px;}
	.list-news li a .news-text {width: 100%;}
	.list-news li a .news-text .tag {font-size: 12px;}
	.list-news li a .news-text .title {font-size: 15px; margin-bottom: 5px;}
	.list-news li a .news-text .content {font-size: 13px; margin-bottom: 5px;}

    /****************************** contact *******************************/
    .request-wrap {margin-left: 0;}
	.bg-red {padding: 80px 20px 20px;}
	.request-info {font-size: 16px; margin-bottom: 50px;}
	.request-slogan {font-size: 18px; margin-bottom: 15px;}

	.contact ul {flex-direction: column;}
	.contact ul li {width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; margin-bottom: 8px; margin-right: 0;}
	.contact ul li img {width: 35px; height: 35px; margin-right: 35px;}
	.contact ul li p {margin-top: 0; margin-right: 35px; font-size: 14px; width: 100px; text-align: start;}

	.bg-white::before {border-top: 12px solid #d0433a; border-bottom: 12px solid transparent; border-left: 12px solid transparent; border-right: 12px solid transparent;}

	.icon-wrap {padding: 33px 0;}
	.icon-wrap ul {flex-direction: column; width: 100%; display: flex; margin: 0;}
	.icon-wrap ul li {float: none; width: 100%;}
	.icon-wrap ul li .icon-el {width: 100%; height: auto; margin-bottom: 23px;}
	.icon-wrap ul li:last-child .icon-el {margin-bottom: 0px;}
    .icon-wrap ul li:nth-child(3) .icon-el, .icon-wrap ul li:nth-child(4) .icon-el {margin-bottom: 23px;}
	.icon-wrap ul li .icon-el .icon-title {font-weight: 600; padding-top: 10px;}
	.icon-wrap ul li .icon-el .icon-info {padding-top: 3px;}

	.detail-wrap {padding-top: 33px; padding-bottom: 0;}
	.contact-1 {flex-direction: column-reverse; height: auto;}
	.contact-1 .detail-info {padding: 18px 9.5vw;}
	.contact-1 .detail-info .detail-info-title, .contact-2 .detail-info .detail-info-title {font-size: 16px; position: absolute; top: -30px;}
	.contact-1 .detail-info .detail-info-lang {text-align: center;}
	.contact-1 .detail-info .detail-info-lang span {line-height: 36px; margin-right: 6px;}
	.contact-1 .detail-img {position: relative; width: 85%; height: auto; margin: 0 auto 18px; top: auto; right: auto; box-shadow: 0 0 5px 0 #ccc;}
	.contact-1 .detail-img img, .contact-2 .detail-img img {width: 100%; height: auto;}

	.contact-2 {flex-direction: column; height: auto;}
	.contact-2 .detail-info {padding: 20px 9.5vw;}
	.contact-2 .detail-info .detail-info-hp {font-size: 14px; text-align: center; line-height: 24px;}
	.contact-2 .detail-info .detail-info-hp img {height: 46px; margin: 15px auto 0;}
	.contact-2 .detail-img {position: relative; width: 90%; height: auto; margin: 0 auto 20px; top: auto; left: auto;}

	.con {width: auto;}
	.bg-wrap {padding: 28px 0;}
	.process-wrap {display: none;}
	.mo-process-wrap {display: block;}
	.mo-process-wrap .process-title {position: relative; z-index: 0; margin-bottom: 20px; font-size: 16px; padding: 0 9.5vw;}
	.mo-process-wrap .process-title::after {content: ''; position: absolute; top: -5px; left: 25px; z-index: -1; background-color: #b89ae2; border-radius: 11px; width: 22px; height: 22px;}
	.mo-process-wrap ul {flex-direction: column; width: 100%;}
	.mo-process-wrap ul li {height: 52px; width: 85%; display: flex; justify-content: space-between; align-items: center; margin: 0 auto 11px; padding: 16px 14px; border-radius: 7px;}
	.mo-process-wrap ul li::after {top: 97%; right: 46%; transform: translate(0,0); border-top: 8px solid #fff; border-bottom: 8px solid transparent; border-left: 8px solid transparent; border-right: 8px solid transparent;}
	.mo-process-wrap ul li img {height: 30px; margin: 0;}
	.mo-process-wrap ul li .step-title {margin-top: 0; height: auto; font-size: 15px;}
	.mo-process-wrap ul li .step-num {font-size: 14px;}
	.mo-process-wrap ul li .step-num::before {top: -4px;}
	.mo-process-wrap ul li:last-child {margin-right: auto;}
}


@media all and (max-width:320px) {
    
}