@charset "utf-8"; /* ===================================================== */
/* 콘텐츠 공통 */
.color-b { color:#222 !important; } 
.color-g { color:#666 !important; } 
.color-1 { color:#0868ac !important; } 
.color-2 { color:#63b32e !important; } 
.color-3 { color:#e00031 !important; } 
.color-4 { color:#0091d4 !important; } 

.fw-1 { font-weight: 100; } 
.fw-2 { font-weight: 200; } 
.fw-3 { font-weight: 300; } 
.fw-4 { font-weight: 400; } 
.fw-5 { font-weight: 500; } 
.fw-6 { font-weight: 600; } 
.fw-7 { font-weight: 700; } 
.fw-8 { font-weight: 800; } 
.fw-9 { font-weight: 900; } 


.alignC { text-align:center !important; } 
.alignL { text-align:left !important; } 
.alignR { text-align:right !important; } 

.upper { text-transform: uppercase; } 

strong { font-weight: 700; } 



/*타이틀*/
.title-wrap { margin-bottom:3rem; line-height: 1.15; } 
.title-wrap .tit-type1 { font-size:max(4rem, 28px); color:#222; font-weight: 700; } 
.title-wrap .tit-type1 .stxt { display: block; font-size:max(2rem, 16px); color:var(--color-sub1); font-weight: 800; } 

.title-wrap .tit-type2 { font-size:max(3rem, 20px); color:#222; font-weight: 700; padding-left:1.8rem; position: relative; } 
.title-wrap .tit-type2::before { content:''; display: block; width:0.6rem; height:2.6rem; border-radius: 1rem; background-color: var(--color-sub1); position: absolute; left:0; top:0.4rem; } 

@media (max-width: 1023px){
 .tb__scroll { position: relative; padding-top:25px; margin-top:-2rem; } 
.tb__scroll::after { content: ''; display: block; width:24px; height:24px; background:url('../images/common/ico_scrollx.gif') center top no-repeat; position: absolute; top:0; right:0; } 
.tb__scroll-inner { overflow-x:auto; padding-bottom:1rem; } 
.tb__scroll-inner::-webkit-scrollbar { height: 6px; background-color: #fff; } 
.tb__scroll-inner::-webkit-scrollbar-thumb { border: 1px solid transparent; background-color: var(--color-main); background-clip: content-box; } 
 }





.sub-content-wrap { --inout-padding:calc(var(--inner-padding) - var(--outer-padding)); } 
@media (max-width: 1540px){
 .sub-content-wrap { --inout-padding:var(--outer-padding); } 
 }


@media (hover: hover) and (pointer: fine) { } 
@media (max-width: 1280px) { } 
@media (max-width: 1024px) { } 
@media (max-width: 768px) { } 
@media (max-width: 576px) { } 
@media (max-width: 480px) { } 
/* 콘텐츠 공통 */
/* ===================================================== */


.ace-cnt { margin-bottom: 20rem; line-height: 1.4; overflow: hidden;}

/* ===================================================== */
/* 010101_인사말 : S */

.greeting .sec01 { position: relative; } 
.greeting .sec01:before { position: absolute; top: 0; width: 100%; height: 40%; background-color: #f0f2f3; content: ""; } 
.greeting .top { text-align: center; padding-top: 10rem; } 
.greeting .top header { font-size: 2.4rem; font-weight: 700; color: var(--color-main); } 
.greeting .top h3 { font-size: 4rem; font-weight: 700; color: #222; margin: 3rem 0 10rem; } 
.greeting .img { border-radius: 10px; overflow: hidden; } 
.greeting .img img { display: block; } 
.greeting .bottom { margin-top: 8rem; text-align: center; } 
.greeting .bottom h4 { font-size: 5.5rem; color: #222; font-weight: 500; padding-bottom: 10rem; margin-bottom: 5rem; position: relative; } 
.greeting .bottom h4:after { position: absolute; width: 3px; height: 61px; background-color: var(--color-main); left: 50%; transform: translateX(-50%); bottom: 0; content: ""; } 
.greeting .bottom h4 b { font-weight: 800; color: var(--color-main); display: block; font-size: 3rem; margin-top: 2rem; } 
.greeting .bottom h4 p { font-weight: 700; font-size: 2.3rem; margin-top: 1rem; } 
.greeting .bottom .txt-box p { font-size: 2rem; line-height: 1.6; color: #666; margin-bottom: 4rem; font-weight: 600; } 
.greeting .bottom .txt-box p b { color: var(--color-main); font-size: 2.8rem; font-weight: 800; } 
.greeting .bottom .txt-box h5 { font-size: 2.4rem; font-weight: 700; color: #222; margin-top: 6.5rem; } 
.greeting .bottom .txt-box h5 span { font-size: 2rem; font-weight: 500; } 

@media (max-width: 1280px){
 .greeting .sec01:before { height: 550px; } 
 }
@media (max-width: 1024px){
 .greeting .top h3 { margin: 2rem 0 7rem; } 
 .greeting .sec01:before { height: 450px; } 
.greeting .bottom h4:after { height: 51px; } 
 }
@media (max-width: 768px){
 .greeting .sec01:before { height: 350px; } 
.greeting .bottom h4 { text-align: center; } 
.greeting .bottom .txt-box { margin-top: 5rem; } 
.greeting .bottom .txt-box p { font-weight: 400; text-align: center; } 
.greeting .bottom h4:after { height: 41px; width: 2px; } 
 }
@media (max-width: 576px) {
 .greeting .top h3 { margin: 2rem 0 6rem; } 
 }
@media (max-width: 480px){
 .greeting .top h3 br,
 .greeting .bottom h4 br { display: none; } 
.greeting .sec01:before { height: 300px; } 
}
/* 010101_인사말 : E */
/* ===================================================== */










/* ===================================================== */
/* 010201_비전 : S */
.vision .sec01 .img:last-child { display: none; } 
.vision .box .txt { margin-right: 3rem; font-size: 1.8rem; } 
.vision .box ul { margin: 0.8rem 0 0; } 
.vision .sec02 { margin-top: 5rem; } 
.vision .sec02 .bottom { border: 10px solid #f0f2f3; border-radius: 10px; height: 15rem; display: flex; padding-right: 3rem; } 
.vision .sec02 .bottom .box { font-size: 2.8rem; font-weight: 700; color: #222; width: 33rem; background-color: #f0f2f3; display: flex; justify-content: center; align-items: center; position: relative; padding: 0 3rem; } 
.vision .sec02 .bottom .box h3 { position: relative; padding-left: 7rem; } 
.vision .sec02 .bottom .box h3:before { width: 54px; height: 54px; position: absolute; content: ""; background: url(../images/sub/010201_ico03.png) no-repeat; top: 50%; transform: translateY(-50%); left: 0; } 
.vision .sec02 .bottom p { font-size: 2rem; color: #222; font-weight: 600; padding-left: 7rem; display: flex; align-items: center; } 

@media (max-width: 1024px){
 .vision .sec02 .bottom p { padding-left: 3rem; } 
 }
@media (max-width: 768px){
 .vision .sec02 .bottom { flex-direction: column; padding-right: 0; height: auto; } 
 .vision .sec02 .bottom .box { width: 100%; padding: 3rem; } 
 .vision .sec02 .bottom .box h3:before { background-size: contain; width: 44px; height: 44px; } 
 .vision .sec02 .bottom p { padding: 5rem 2rem; text-align: center; font-weight: 400; } 
 .vision .sec01 .img:first-child { display: none; } 
 .vision .sec01 .img:last-child { display: block; } 
 }
@media (max-width: 576px) { } 
@media (max-width: 480px) { } 
/* 010201_비전 : E */
/* ===================================================== */










/* ===================================================== */
/* 010301_연혁 : S */
.history { letter-spacing: -0.02em; overflow: hidden; } 
.history .sec01 { position: relative; } 
.history .sec01 .visual { background: url(../images/sub/010301_visual.jpg) 50% 50% no-repeat; height: 400px; } 
.history .sec01 .box { width: 47rem; height: 26rem; background-color: var(--color-main); border-radius: 10px; color: #fff; position: absolute; bottom: -13rem; padding: 5.5rem; display: flex; justify-content: center; align-items: center; } 
.history .sec01 .box:before { position: absolute; content: ""; left: 0; width: 75%; margin-top: 7rem; height: 1px; background-color: rgb(221, 221, 221, .2); } 
.history .sec01 .box:after { position: absolute; content: ""; right: -1rem; bottom: -1rem; width: 162px; height: 144px; background: url(../images/sub/010301_logo.png) no-repeat; } 
.history .sec01 .box h3 { font-size: 3.6rem; font-weight: 100; } 
.history .sec01 .box p { font-size: 1.8rem; font-weight: 600; margin-top: 4rem; } 
.history .sec02 { margin-top: 25rem; } 
.history .sec02 .list { position: relative; display: flex; justify-content: center; } 
.history .sec02 .list > ol { position: relative; padding-bottom: 20rem; } 
.history .sec02 .list > ol:before { position: absolute; width: 1px; height: 100%; background-color: #ddd; top: 4.2rem; left: 44.6rem; content: ""; } 
.history .sec02 .list > ol > li { display: flex; margin-bottom: 9rem; } 
.history .sec02 .list > ol > li .tit { position: relative; width: 45rem; padding-right: 7rem; flex-shrink: 0;} 
.history .sec02 .list > ol > li .tit:after { position: absolute; content: ""; top: 40px; right: 0; transform: translateY(-50%); width: 7px; height: 7px; background-color: var(--color-sub); border-radius: 50%; } 
.history .sec02 .list > ol > li h4 { color: #222; font-size: 5.5rem; font-weight: 700; text-align: right; width: 100%; white-space: nowrap; letter-spacing: -0.05em;} 
.history .sec02 .list > ol > li > ol > li { display: flex; align-items: flex-start; margin: 2.5rem 0 0 10rem; } 

.history .sec02 .list > ol > li > ol > li:last-child { margin-top: 3rem; } 
.history .sec02 .list > ol > li > ol > li h5 { font-size: 2.5rem; font-weight: 700; color: var(--color-sub); line-height: 1; width: 4rem; } 
.history .sec02 .list > ol > li > ol > li > ul > li { font-size: 2rem; font-weight: 500; color: #666; position: relative; padding-left: 1.5rem; margin: 1.5rem 0 0 4.5rem; line-height: 1.5; } 
.history .sec02 .list > ol > li > ol > li > ul > li:first-child { margin: 0 0 0 4.5rem; } 
.history .sec02 .list ol > li > ol > li > ul > li:before { position: absolute; content: ""; width: 5px; height: 5px; top: 9px; left: 0; background-color: #dddddd; } 

@media (max-width: 1280px){
 .history .sec02 .list { justify-content: flex-start; } 
 .history .sec02 .list > ol:before { left: 0; } 
 .history .sec02 .list > ol > li { flex-direction: column; justify-content: flex-start; } 
 .history .sec02 .list > ol > li .tit { padding-right: 0; width: auto; padding-left: 5rem; } 
 .history .sec02 .list > ol > li .tit:after { top: 35px; left: -3px; } 
 .history .sec02 .list > ol > li h4 { text-align: left; } 
 .history .sec02 .list > ol > li > ol > li { margin: 2.5rem 0 0 5rem; flex-direction: column; gap: 1.5rem 0; } 
 .history .sec02 .list > ol > li > ol > li > ul > li { margin: 1.5rem 0 0 0; } 
 .history .sec02 .list > ol > li > ol > li > ul > li:first-child { margin: 0; } 
 }
@media (max-width: 768px){
 .history .sec02 .list > ol > li .tit:after { top: 30px; } 
 .history .sec02 .list > ol > li > ol > li > ul > li { font-weight: 300; } 
 .history .sec02 .list ol > li > ol > li > ul > li:before { width: 4px; height: 4px; top: 7px; } 
 }
@media (max-width: 680px){
 .history .sec01 .visual { height: 250px; background: url(../images/sub/010301_visual.jpg) 65% 50% no-repeat; } 
 
 .history .sec01 .box { position: relative; bottom: 0; width: 100%; justify-content: flex-start; margin: 0; border-radius: 0; } 
 .history .sec02 { margin-top: 10rem; } 
 }
@media (max-width: 480px){
 .history .sec02 .list > ol > li .tit:after { top: 25px; } 
 }

/* 010301_연혁 : E */
/* ===================================================== */










/* ===================================================== */
/* 010401_오시는길 : S */
.directions { position: relative; margin-top: 10rem; } 
.directions:first-child { margin-top: 0; } 
.directions .tit { margin-bottom: 4rem; } 
.directions .tit h3 { font-size: 3.5rem; color: #222; font-weight: 700; position: relative; display: inline-block; } 
.directions .tit h3:before { position: absolute; content: ""; bottom: -5px; left: 50%; transform: translateX(-50%); width: 110%; height: 2.2rem; background-color: #cdefed; z-index: -1000; } 
.directions-map { height: 50rem; border-radius: 10px; overflow: hidden; border: 1px solid #ddd; } 
.directions-map .item { height: 100%; position: relative; } 
.directions-map .item iframe { width: 100%; height: 100%; border: 0; aspect-ratio: 16 / 5; position: relative; z-index: 1; } 
.directions .info-area { margin-top: 8rem; display: flex; justify-content: space-between; gap: 0 10rem; } 
.directions .info-area .left h3 { color: #222; font-size: 6.5rem; font-weight: 100; } 
.directions .info-area .left p { color: #222; font-size: 2.5rem; font-weight: 700; margin-top: 1rem; } 
.directions .info-area ul { width: 80rem; } 
.directions .info-area ul li { display: flex; align-items: center; padding: 6rem 3rem; border-top: 1px solid #ddd; position: relative; } 
.directions .info-area ul li:after { position: absolute; content: ""; width: 60px; height: 60px; top: 50%; right: 3rem; transform: translateY(-50%); background: url(../images/sub/010401_ico01.png) no-repeat; } 
.directions .info-area ul li:nth-child(2):after { background: url(../images/sub/010401_ico02.png) no-repeat; } 
.directions .info-area ul li:nth-child(3):after { background: url(../images/sub/010401_ico03.png) no-repeat; } 
.directions .info-area ul li h4 { font-size: 2.4rem; color: #222; font-weight: 700; flex-shrink: 0; width: 9.5rem;} 
.directions .info-area ul li p,
.directions .info-area ul li a { font-size: 2.4rem; font-weight: 600; color: #666; margin: 0 8rem 0 5rem; } 
.directions .info-area ul li:first-child { border-top: 2px solid #000; } 

@media (max-width: 1024px){
 .directions .info-area ul li { align-items: flex-start; flex-wrap: wrap;} 
 .directions .info-area ul li h4 {width:100%;}
 .directions .info-area ul li p,
    .directions .info-area ul li a {margin: 0 8rem 0 0rem; } 
 }
@media (max-width: 768px){
 .directions .info-area { flex-direction: column; } 
 .directions .info-area .left { display: flex; justify-content: space-between; align-items: flex-end; gap: 0 5rem; margin-bottom: 1rem; } 
 .directions .info-area .left h3 { line-height: 1; } 
 .directions .info-area .left p { margin-top: 0; line-height: 1.5; } 
 .directions .info-area .left p br { display: none; } 
 .directions .info-area ul { width: 100%; } 
 .directions .info-area ul li:after,
 .directions .info-area ul li:nth-child(2):after,
 .directions .info-area ul li:nth-child(3):after { background-size: contain; width: 40px; height: 40px; } 
 }
@media (max-width: 576px){
 .directions .info-area .left { flex-direction: column; align-items: flex-start; margin-bottom: 2rem; } 
 .directions .info-area .left p { margin-top: 0.5rem; } 
 .directions .info-area ul li { flex-direction: column; } 
 .directions .info-area ul li p, .directions .info-area ul li a { margin: 0 8rem 0 0; } 
 }
/* 010401_오시는길 : E */
/* ===================================================== */










/* ===================================================== */
/* 020101_비메모리 IC : S */
.research .top h3 { color: #222; font-size: 3.6rem; font-weight: 700; display: none;} 
.research .top .desc { background: linear-gradient(to right, #1f2448, rgb(31, 36, 72, .5)),
 url(../images/sub/020101_img01.jpg) no-repeat 50% 75%; padding: 7rem; display: flex; justify-content: space-between; align-items: center; gap: 5rem; border-radius: 10px; margin-top: 0rem; } 
.research .top .desc p { font-size: 2.2rem; font-weight: 600; color: #fff; } 
.research .top .desc .img {flex-shrink: 0;}
.research .desc-area > ul > li:nth-child(odd) { margin:0 var(--inner-padding); border-top: 1px solid #ddd; } 
.research .desc-area > ul > li { margin-top: 10rem !important; } 
.research .desc-area > ul > li.item02 { background-color: #f0f2f3; padding:0 var(--inner-padding) 7rem; } 
.research .desc-area > ul > li.item02 h4 { background-color: var(--color-main); } 
.research .desc-area > ul > li.item03 h4 { background-color: var(--color-sub); } 
.research .desc-area > ul > li.item03 ul li { padding-left: 1.1rem; position: relative; } 
.research .desc-area > ul > li.item03 ul li:before { position: absolute; content: ""; top: 12px; left: 0; width: 5px; height: 5px; background-color: #666; border-radius: 50%; } 
.research .desc-area > ul > li h4 { font-size: 2.4rem; min-width: 9rem; height: 45px; background-color: #333; border-radius: 0 0 5px 5px; color: #fff; font-weight: 600; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 4rem; padding:0 2rem;} 
.research .desc-area > ul > li > ul > li { font-size: 2rem; font-weight: 500; color: #666; margin-top: 1.3rem; position: relative;} 
.research .desc-area > ul > li > ul > li .c-black { color: #222; font-weight: 600; position: relative; padding-left: 1.1rem; display: inline-block; } 
.research .desc-area > ul > li > ul > li .c-black::before { position: absolute; content: ""; top: 1rem;  left: 0; width: 5px; height: 5px; background-color: #222; border-radius: 50%; } 
@media (max-width: 768px){
 .research .desc-area > ul > li > ul > li { font-weight: 400; } 
 .research .desc-area > ul > li > ul > li .c-black { font-weight: 500; } 
 .research .desc-area > ul > li > ul > li .c-black::before { width: 4px; height: 4px; } 
 .research .desc-area > ul > li.item03 ul li:before { width: 4px; height: 4px; top: 9px; } 
 }
@media (max-width: 640px){
 .research .top .desc { flex-direction: column-reverse; text-align: center; padding: 7rem 3rem; background: linear-gradient(to right, #1f2448, rgb(31, 36, 72, .5)), url(../images/sub/020101_img01.jpg) no-repeat 80% 75%; } 
 .research .top .desc br { display: none; } 
 .research .top .desc p { font-weight: 500; } 
 }
@media (max-width: 480px){
 .research .desc-area > ul > li h4 { width: 70px; } 
 .research .desc-area > ul > li.item03 ul li:before { top: 7px; } 
 }
/* 020101_비메모리 IC : E */
/* ===================================================== */










/* ===================================================== */
/* 020201_전력모빌리티_ESS전기차 : S */
.research02 .top .desc { background: linear-gradient(to right, #313232, rgb(49, 50, 50, .5)),
 url(../images/sub/020201_img01.jpg) no-repeat 50% 75%; } 
.research02 .desc-area > ul > li > ul > li { padding-left: 1.1rem; } 
.research02 .desc-area > ul > li > ul > li:before { position: absolute; content: ""; top: 12px; left: 0; width: 5px; height: 5px; background-color: #666; border-radius: 50%; } 

@media (max-width: 1280px){
 .research02 .desc-area > ul > li > ul > li:before { top: 10px; } 
 }
@media (max-width: 768px){
 .research02 .desc-area > ul > li > ul > li:before { top: 8px; width: 4px; height: 4px; } 
 }
@media (max-width: 480px){
 .research02 .desc-area > ul > li > ul > li:before { top: 7px; } 
 }
/* 020201_전력모빌리티_ESS전기차 : E */
/* ===================================================== */










/* ===================================================== */
/* 020301_통신_광통신RF통신 : S */
.research03 .top .desc { background: linear-gradient(to right, #313232, rgb(49, 50, 50, .5)),
 url(../images/sub/020301_img01.jpg) no-repeat 50% 75%; } 
.research03 .desc-area > ul > li:last-child > ul > li { padding-left: 0; } 
.research03 .desc-area > ul > li:last-child > ul > li:before { display: none; } 

@media (max-width: 620px) {.research03 .desc-area > ul > li:last-child > ul > li:nth-child(4) .c-black:before,
.research03 .desc-area > ul > li:last-child > ul > li:nth-child(5) .c-black:before { top: 9px; } 
 }
/* 020301_통신_광통신RF통신 : E */
/* ===================================================== */










/* ===================================================== */
/* 030000_제품 공통 : S */
.ace-prod {overflow: hidden;}
.ace-prod .product:not(:first-child) { margin-top: 15rem; } 
.product { background: url(../images/sub/0300_product_bg.jpg) 50% 50% no-repeat; padding: 15rem 0; } 
.product .product-section { display: flex; gap: 0 10rem; } 
.product .product-media { flex: 1; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 700px; height: 470px; background: #f9f9f9; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); position: relative; z-index: 2; margin-left: 3rem; } 
.product .product-media:before { width: 20rem; height: 20rem; position: absolute; content: ""; left: -3rem; bottom: -3rem; background-color: #39b54a; border-radius: 0 0 0 20px; z-index: -1000; } 
.product .product-media img,
.product .product-media video { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; border-radius: 10px; } 
.product .product-info { position: relative; width: 40%; padding-bottom:10rem;} 
.product .product-info h2 { font-size: 3.2rem; font-weight: 700; margin-bottom: 2rem; color: #222; } 
.product .product-info .desc { font-size: 1.8rem; font-weight: 400; line-height: 1.65; color: #666; } 
.product .thumbnail-tabs { display: flex; gap: 0 1.5rem; position: absolute; bottom: 0; } 
.product .thumbnail-tabs .thumb { width: 8rem; height: 8rem; object-fit: cover; border-radius: 5px; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } 
.product .thumbnail-tabs .thumb:hover { border: 7px solid #39b54a; } 
.product .thumbnail-tabs .thumb.active { border: 7px solid #39b54a; } 
.product .video-wrap { position: relative; width: 100%; height: 100%; } 
.product .video-wrap video { display: block; width: 100%; height: 100%; object-fit: cover; } 
.product .product-info ul li { font-size: 1.8rem; color: #666; margin-top: 1.5rem; } 
.product .product-info ul li b { display: block; font-weight: 700; color: #222; } 



@media (max-width: 1024px){
 .product { padding: 7rem 0; } 
 .product .product-section { flex-direction: column; align-items: center; text-align: center; gap: 10rem 0; } 
 .product .product-media { max-width: 768px; width: 100%; background-color: transparent; box-shadow: none; } 
 .product .product-media img { max-height: 400px; } 
 .product .product-info { width: 100%; display: flex; flex-direction: column; align-items: center; padding-bottom:0;} 
 .product .thumbnail-tabs { position: relative; margin-top: 3rem; } 
 }
@media (max-width: 768px){
 .ace-prod .product:not(:first-child) { margin-top: 10rem; } 
 }
/* 030000_제품 공통 : E */
/* ===================================================== */