@charset "utf-8";

#sub #footer {border-top:1px solid #ddd;}
/* sub-visual */
.sub-visual {position:relative; height:600px; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.sub-visual01 {background-image:url('../img/sub/sub-visual01.jpg');}
.sub-visual02 {background-image:url('../img/sub/sub-visual02.jpg');}
.sub-visual03 {background-image:url('../img/sub/sub-visual03.jpg');}
.sub-visual04 {background-image:url('../img/sub/sub-visual04.jpg');}
.sub-visual .title {display:flex; align-items:center; justify-content:center; text-align:center; height:100%;}
.sub-visual .title h2 {font-family:'Poppins'; font-size:75px; color:#fff; line-height:1em; font-weight:600;}
/* lnb */
#lnb {position:absolute; bottom:0; left:0; width:100%; background:rgba(0,29,98,0.7); backdrop-filter:blur(8px); z-index:20;}
.path {display:flex; align-items:center;}
.path .home {display:flex; width:60px; height:100%;}
.path .home a {display:inline-block; height:18px;}
.path .submenu {border-right:1px solid rgba(255,255,255,0.1); position:relative;}
.path .submenu01 {border-left:1px solid rgba(255,255,255,0.1);}
.path .submenu .open {width:240px; line-height:80px; padding:0 40px; font-size:18px; font-weight:600; color:#fff; position:relative;}
.path .submenu .open:after {content:''; width:10px; height:8px; background:url('../img/sub/lnb-arrow.png') no-repeat; position:absolute; top:50%; margin-top:-4px; right:30px; transition:all 0.4s;}
.path .submenu .open.active:after {transform:rotate(180deg);}
.path .submenu .depth {position:absolute; top: calc(100% + 20px) ; left:0; width:calc(100% + 1px); padding:24px 40px; background: #f0f4f6; border-radius: 8px;}
.path .submenu .depth li:not(:last-child) {margin-bottom: 10px;}
.path .submenu .depth a {position:relative; display:inline-block; font-size:18px; line-height:1.4em; color:#666; transition: all 0.4s;}
.path .submenu .depth a:hover {font-weight: 600; color: #001d62;}
.path .submenu .depth li.active a {font-weight: 600; color: #001d62;}
.sub-visual04 .path .submenu02 {display: none;}
/* sub-title */
.page-title {text-align:center; padding:132px 0 66px;}
.page-title h3 {font-size:60px; line-height:1.1em; color:#000; font-family:'Poppins'; position:relative; padding-top:16px;}
.page-title h3 span {width:30px; height:6px; background:#cacaca; border-radius:3px; position:absolute; overflow:hidden; top:0; left:50%; margin-left:-15px;}
.page-title h3 span:after {content:''; width:50%; height:100%; background:#001d62; position:absolute; top:0; left:50%;}
/* sub */
.real-cont {margin-bottom:180px;}
.real-cont.mb-0 {margin-bottom:0;}
/* s1-1 */
.greeting .img-box {width: 0; opacity: 0; height: 380px; background: url('../img/sub/greeting01.jpg') no-repeat center center/cover; border-radius: 8px; overflow: hidden; margin: 0 auto;}
.greeting .text-box {position: relative; display: flex; padding-bottom: 177px;}
.greeting .text-box:before {position: absolute; top: 0; left: 590px; content: ''; width: 1px; height: 100%; background: #ddd;}
.greeting .left-box {max-width: 590px; width: 100%; padding: 0 60px;}
.greeting .left-box .logo-box {display: flex; flex-direction: column; justify-content: space-between; width: 260px; height: 160px; padding: 30px 40px 25px; background: #001d62; border-radius: 8px; margin-top: -80px; margin-bottom: 30px;}
.greeting .left-box .logo-box .icon {width: 38px; height: 40px; background: url('../img/sub/greeting-logo.png') no-repeat center center; margin: 0 0 0 auto;}
.greeting .left-box .logo-box p {font-family:'Poppins'; font-size: 20px; font-weight: 700; line-height: 1.2em; color: #fff;}
.greeting .left-box h4 {font-size: 38px; font-weight: 700; line-height: 1.42em; color: #000;}
.greeting .left-box h4 span {color: #001d62;}
.greeting .right-box {width: 1%; flex: 1 1 auto; padding: 112px 100px 0;}
.greeting .right-box > p {font-size: 20px; line-height: 1.7em; color: #333; margin-bottom: 34px;}
.greeting .right-box > p:nth-child(4) {margin-bottom: 0;}
.greeting .right-box .signature {display: flex; align-items: flex-end; font-size: 22px; line-height: 1.2em; color: #000;}
.greeting .right-box .signature p {margin-right: 20px;}
/* s1-2 */
.overview {position: relative;}
.overview:before {position: absolute; left: 0; bottom: 0; content: ''; width: 700px; height: 787px; background: url('../img/sub/overview-bg.png') no-repeat left bottom;}
.overview .img-box {width: 0; opacity: 0; height: 380px; background: url('../img/sub/overview01.jpg') no-repeat center center/cover; border-radius: 8px; overflow: hidden; margin: 0 auto;}
.overview .text-box {display: flex; padding: 50px 0 170px;}
.overview .left-box {max-width: 590px; width: 100%; padding: 0 60px; border-right: 1px solid #ddd;}
.overview .left-box h4 {font-size: 40px; font-weight: 700; line-height: 1.45em; color: #000;}
.overview .left-box h4 span {color: #001d62;}
.overview .right-box {width: 1%; flex: 1 1 auto; padding: 0 50px 0 100px;}
.overview .right-box > p {font-size: 20px; line-height: 1.7em; color: #666;}
.overview .right-box > p:not(:last-child) {margin-bottom: 34px;}
/* s1-3 */
.history-top {position: relative;}
.history-top .img-box {position: relative; width: 0; opacity: 0; height: 440px; background: url('../img/sub/history01.jpg') no-repeat center center/cover; border-radius: 8px; overflow: hidden; margin: 0 auto; z-index: 10;}
.history-top .tab-menu {opacity: 1; position: absolute; bottom: 35px; right: 0;padding-right: 40px; border-top: 1px solid rgba(255,255,255,0.3); z-index: 15;}
.history-top .tab-menu ol {display: flex;}
.history-top .tab-menu ol li {padding-right: 42px;}
.history-top .tab-menu ol li a {position: relative; display: inline-block; font-family:'Poppins'; font-size: 20px; line-height: 1em; color: rgba(255,255,255,0.3); padding: 15px 0; transition: all 0.5s;}
.history-top .tab-menu ol li a:hover {color: #fff;}
.history-top .tab-menu ol li a:before {position: absolute; top: -2px; left: 50%; transform: translateX(-50%); content: ''; width: 0; height: 3px; background: #fff; transition: all 0.5s;}
.history-top .tab-menu ol li a:hover:before {width: 100%;}
.history-details {position: relative; padding: 137px 0 0;}
.history-details:before {position: absolute; top: 0; left: 50%; content: ''; width: 1px; height: 100%; background: #ddd;}
.history-details .year-wrap {position: relative; display: flex;}
.history-details .year-wrap:nth-child(even) {flex-direction: row-reverse;}
.history-details .year-wrap > div {width: 50%;}
.history-details .year-wrap .dot {position: absolute; top: -6px; left: 50%; margin-left: -6px; content: ''; width: 12px; height: 12px; background: #fff; border: 4px solid #ddd; border-radius: 50%; z-index: 10;}
.history-details .year-wrap .year {font-family:'Poppins'; font-size: 52px; font-weight: 600; line-height: 1.2em; margin-top: -28px; padding: 0 60px;}
.history-details .year-wrap:nth-child(odd) .year {color: #000000; text-align: right;}
.history-details .year-wrap:nth-child(even) .year {color: #001d62;}
.history-details .details-wrap {position: relative; padding: 30px 60px 110px; background-image: linear-gradient(to right, #00164b 33%, #fff 0%); background-position: top; background-size: 4px 1px; background-repeat: repeat-x;}
.history-details .year-wrap:last-child .details-wrap {padding-bottom: 172px;}
.history-details .details-wrap .line {position: absolute; top: -137px; content: ''; width: 1px; height: 0; background: #001d62; z-index: 5;}
.history-details .year-wrap:nth-child(odd) .details-wrap .line {left: 0;}
.history-details .year-wrap:nth-child(even) .details-wrap .line {right: -1px;}
.history-details .month-wrap {display: flex;}
.history-details .year-wrap:nth-child(even) .month-wrap {flex-direction: row-reverse;}
.history-details .month-wrap .month {max-width: 44px; width: 100%; font-size: 20px; font-weight: 600; line-height: 1.8em; color: #001d62;}
.history-details .year-wrap:nth-child(even) .month-wrap .month {text-align: right;}
.history-details .month-wrap ol {width: 1%; flex: 1 1 auto;}
.history-details .month-wrap ol li {font-size: 20px; line-height: 1.8em; color: #666;}
.history-details .year-wrap:nth-child(even) .month-wrap ol li {text-align: right;}
/* s1-4 */
.biz .img-box {width: 0; opacity: 0; height: 380px; background: url('../img/sub/overview01.jpg') no-repeat center center/cover; border-radius: 8px; overflow: hidden; margin: 0 auto 100px;}
.biz .map {margin-bottom: 46px; border-radius: 16px; overflow: hidden;}
.biz .map iframe {width:100%; height:460px; border-radius: 8px; overflow: hidden;}
.biz .map .root_daum_roughmap {width:100% !important; height:460px !important;}
.biz .map .root_daum_roughmap .wrap_map {height:460px !important;}
.biz .map .root_daum_roughmap .border1,
.biz .map .root_daum_roughmap .border2 {border: none;}
.biz .map .root_daum_roughmap .border3, 
.biz .map .root_daum_roughmap .border4 {background-color: transparent;}
.biz .info-wrap {display: flex; justify-content: space-between;}
.biz .info {width: 1%; flex: 1 1 auto;}
.biz .info dl {display: flex; font-size: 20px; line-height: 1.5em; margin-bottom: 4px;}
.biz .info dt {max-width: 75px; width: 100%; font-weight: 600; color: #000; padding-left: 20px;}
.biz .info dd {width: 1%; flex: 1 1 auto; color: #666;}
.biz .btn-wrap {display: flex; margin-top: -14px;}
.biz .btn-wrap a {display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 10px; background-repeat: no-repeat; background-position: center center; transition: all 0.4s;} 
.biz .btn-wrap .btn-map {background-color: #f0f4f6; background-image: url('../img/sub/biz-icon-map.png'); margin-right: 10px;}
.biz .btn-wrap .btn-print {background-color: #001d62; background-image: url('../img/sub/biz-icon-print.png');}
.biz .btn-wrap .btn-map:hover {background-color: #001d62; background-image: url('../img/sub/biz-icon-map-active.png');}
.biz .btn-wrap .btn-print:hover {background-color: #f0f4f6; background-image: url('../img/sub/biz-icon-print-active.png');}
/* s1-5 */
.partner ul {display: flex; flex-wrap: wrap; margin: -5px -7px;}
.partner ul li {width: 33.33333%; padding: 5px 7px;}
.partner ul li .inner {border: 1px solid #f0f4f6; border-radius: 4px;}
/* s2-1 */
.product-overview .text-box b {display: block; font-size: 36px; font-weight: 600; line-height: 1.3em; color: #001d62; margin-bottom: 26px;}
.product-overview .text-box ul li {position: relative; font-size: 20px; line-height: 1.9em; color: #666; padding-left: 24px;}
.product-overview .text-box ul li:before {position: absolute; top: 17px; left: 0; content: ''; width: 4px; height: 4px; background: #001d62; border-radius: 50%;}
.battery .product-slider-track .items {animation: slide-left 20s linear infinite;}
/* s2-2 */
.product-overview .text-box .flex {display: flex;}
.product-overview .text-box .flex > ul {width: 50%; padding-right: 30px;}
/* s2-3 */
.product-overview .wrap {display:flex; align-items:center; margin-bottom:60px;}
.product-overview .slide {width:100%; max-width:670px; position:relative;}
.product-overview .slide .item {border-radius:8px; overflow:hidden;}
.product-overview .slick-arrow {position:absolute; top:50%; margin-top:-15px; width:18px; height:30px; cursor:pointer; z-index:11; background-repeat:no-repeat; background-size:cover; background-color:transparent; font-size:0; border:0; transition:all .4s; opacity:0.7;}
.product-overview .slick-arrow:hover {opacity:1;}
.product-overview .slick-prev {background-image:url('../img/sub/product-prev.png'); left:50px;}
.product-overview .slick-next {background-image:url('../img/sub/product-next.png'); right:50px;}
.product-overview .slick-dots {position:absolute; bottom:20px; width:100%; left:0; display:flex; justify-content:center;}
.product-overview .slick-dots li {padding:0 4px;}
.product-overview .slick-dots li button {display:block; width:8px; height:8px; border-radius:50%; background:#fff; transition:all 0.4s; border:0; font-size:0;}
.product-overview .slick-dots li.slick-active button {background:#001d62;}
.product-overview .text-box {width:1%; flex:1 1 auto; padding-left:100px;}
.product-overview .text-box p {font-size:20px; line-height:1.6em; color:#333;}

.product-table {margin-bottom:120px;}
.product-table table {width:100%; border-collapse:collapse; border-spacing:0; text-align:center;}
.product-table table thead th {position: relative; background:#001d62; font-size:20px; line-height:1.5em; color:#fff; font-weight:600; padding:15px 10px;}
.product-table table thead th:first-child {border-radius:8px 0  0 8px;}
.product-table table thead th:last-child {border-radius:0 8px 8px 0;}
.product-table table thead th:after {position: absolute; top: 50%; right: 0; margin-top: -10px; content: ''; width: 1px; height: 20px; background: rgba(255,255,255,0.3);}
.product-table table thead th:last-child:after {display: none;}
.product-table table tbody {font-size:18px; line-height:1.8em; color:#666; font-weight:400;}
.product-table table tbody th {background:#f0f4f6; padding:14px 10px; border-bottom:1px solid #fff;}
.product-table table tbody tr:last-child th {border-radius:0 0 0 8px;}
.product-table table tbody th {font-weight: 400;}
.product-table table tbody td {background:#fff; padding:14px 10px; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
.product-table table tbody td:last-child {border-right:0;}
.product-table table tbody td.border-dash {border-right: 1px dashed #ddd;}
.product-table table tbody td.border-right {border-right: 1px solid #ddd;}

.product-process {margin-bottom:120px;}
.arti-title {margin-bottom:30px;}
.arti-title h4 {font-family:'Poppins'; font-size:48px; line-height:1.2em; color:#000; position:relative; padding-top:14px; }
.arti-title h4:before,
.arti-title h4:after {content:''; width:6px; height:6px; border-radius:50%; position:absolute; top:0;}
.arti-title h4:before {background:#cacaca; left:0;}
.arti-title h4:after {background:#001d62; left:10px;}
.product-process .wrap {position:relative; border:1px solid #f0f4f6; border-radius:8px; padding:60px 50px 70px; overflow:hidden;}
.product-process .title {font-size: 40px; font-weight: 700; line-height: 1.3em; color: #000; margin-bottom: 30px;}
.product-process ol {display:flex; flex-wrap:wrap; align-items:center; margin-bottom:-40px; margin-right:-16px;}
.product-process ol > li {position:relative; padding-right:62px; margin-bottom:40px; z-index:1;}
.product-process ol > li:last-child {padding-right:0;}
.product-process ol > li:last-child:before {display:none;}
.product-process ol > li:last-child:after {display:none;}
.product-process ol > li:before {position:absolute; top:50%; right:0; content:''; width:62px; height:1px; background:#ddd; }
.product-process ol > li:after {position:absolute; top:50%; margin-top:-15px; right:16px; content:''; width:30px; height:30px; background:url('../img/sub/product-cnt-arrow.png') no-repeat;}
.product-process .inner {display:flex; justify-content:center; align-items:center; text-align:center;}
.product-process .circle {width:120px; height:120px; background:#f0f4f6; border-radius:50%; color:#333;}
.product-process .square {width:140px; height:80px; background:#001d62; border-radius:8px; color:#fff;}
.product-process .inner p {font-size:18px; line-height:1.6em; font-weight:600;}
.product-process ul {position:absolute; bottom:50px; right:50px; display:flex;}
.product-process ul li {margin-left:22px; padding-left:30px; font-size:16px; line-height:1.8em; position:relative;}
.product-process ul li.first {font-weight:500; color:#333;}
.product-process ul li.last {color:#666;}
.product-process ul li:before {content:''; position:absolute; width:20px; height:20px; left:0; top:50%; margin-top:-10px;}
.product-process ul li.first:before {background:#001d62; border-radius:3px;}
.product-process ul li.last:before {background:#f0f4f6; border-radius:50%;}
.product-process .text-box {margin-top: 50px; padding-top: 50px; border-top: 1px dashed #ddd;}
.product-process .text-box p.dot-list {position: relative; font-size: 20px; line-height: 1.6em; color: #333; padding-left: 14px;}
.product-process .text-box p.dot-list:before {position: absolute; top: 14px; left: 0; content: ''; width: 4px; height: 4px; background: #001d62; border-radius: 50%;}
.product-slider-track {width: 100%; overflow: hidden;}
.product-slider-track .items {display: flex; width: max-content; animation: slide-left 90s linear infinite;}
.product-slider-track:hover .items {animation-play-state: paused;}
.product-slider-track .item {margin-right: 20px;}
.product-slider-track .item img {display: block; border-radius: 8px; overflow: hidden;}
@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.utg .product-process ol > li {padding-right:100px;}
.utg .product-process ol > li:before {width:100px;}
.utg .product-process ol > li:after {right:35px;}
/* s2-4 */
.fmm .product-process ol {margin-right:-34px;}
.fmm .product-process ol > li {padding-right:100px;}
.fmm .product-process ol > li:before {width:100px;}
.fmm .product-process ol > li:after {right:35px;}
.product-process ul.block {display:block;}
.product-process ul.block li {margin-bottom: 6px;}
/* s2-6 */
.lead .product-process ol {margin-right:0;}
.lead .product-process ol:not(:last-child) {padding-bottom:10px; margin-bottom: 50px; border-bottom: 1px dashed #ddd;}
.lead .product-process ol > li {padding-right:100px;} 
.lead .product-process ol > li:before {width:100px;}
.lead .product-process ol > li:after {right:35px;}
/* s2-7 */
.fc .product-process ol {margin-right:-45px;}
.fc .product-process ol > li {padding-right:106px;} 
.fc .product-process ol > li:before {width:106px;}
.fc .product-process ol > li:after {right:38px;}