@charset "utf-8";
/*************** custom ***************/
.point{font-size:inherit; font-weight:inherit; color:#1B46FF}
section{padding:160px 0}


/** 모달 **/
.modal{width:100vw; height:100vh; display:none; background:rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; position:fixed; left:0; top:0; z-index:999}
.modal.active{display:flex;}

.modalInner{width:1152px; height:60vh; border-radius:24px; background:#fefefe; box-sizing: border-box; padding:140px 56px 56px 56px;position:relative; overflow:hidden}

.modalHeader{width:100%; height:120px; background:#fefefe; display:flex; align-items: center; justify-content: flex-end; border-bottom:1px solid #e5e5e5;
position:absolute; left:0; padding:0 56px; top:0}
.onlineClose{cursor: pointer; line-height: 1;}
.modalClose{cursor: pointer; line-height: 1;}

.productModaldetail{display:flex; align-items: baseline; justify-content: flex-start; margin-top:16px;}
.productModaldetail:before{content:''; display:block; min-width:10px; min-height:10px; width:10px; height:10px; border-radius:100%; border:5px solid #183497; margin:0 6px}
/*************** //custom ***************/



/*************** header, footer ***************/
/** header **/
header{width:100vw; height:100px; background:transparent; border-bottom:1px solid #fefefe; transition: all 0.2s; position:fixed; left:0; top:0; z-index:999; }
header.active, header.focus{background:#fefefe; border-bottom:1px solid #aaa}

header > .inner{display:flex; align-items: center; justify-content: space-between;}
.logo{width:212px; height:24px;}

.logo a{width:100%; height:100%; display:block; background-size:100% auto !important;  background:url('/theme/basic/img/common/logo.svg') center center no-repeat; }
.logo.active a{ background:url('/theme/basic/img/common/logoActive.svg')center center no-repeat}
header.focus .logo a{ background:url('/theme/basic/img/common/logoActive.svg') center center no-repeat}

.menu{height:100px; display:flex; align-items: center; justify-content: flex-end;}
.menu > li{margin-left:56px;}
.menu > li a{color:#fefefe}
header.active .menu > li a, header.focus .menu > li a{color:#222}
/** //header **/

/** footer **/
footer{background:#222; padding:100px 0}
.footTop{width:100%; display:flex; align-items: flex-start; justify-content: space-between;}
.footLink{display:flex; align-items: center;}
.footLink > a{margin-left:40px}

footer > .inner > p{margin:45px 0; display:flex; width:40%; justify-content: flex-start; align-items: center; flex-wrap:wrap}
footer > .inner > p > span{margin-bottom:8px}
footer > .inner > p > span:nth-child(2n + 1){width:130px}
footer > .inner > p > span:nth-child(2n){width:calc(100% - 130px)}
footer span{display:block; font-size:inherit}
/** //footer **/
/*************** //header, footer ***************/


/*************** mainBanner ***************/
.mainBanner { position: relative; width: 100vw; height: 100vh; padding: 0; overflow: hidden; }
.mainVideo { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; opacity: 1; transform: translateY(0) scale(1); }
.mainBanner > .inner { height: 100%; display: flex; align-items: center; justify-content: flex-start; }
.mainBannerP span { font-size: inherit; color: inherit; font-weight: inherit; }
.scrollDown { position: absolute; left: 50%; bottom: 8dvh; transform: translateX(-50%); }
.scrollDown:after { content: ''; display: block; position: absolute; left: 50%; bottom: -14px; width: 12px; height: 12px; border-left: 2px solid #fefefe; border-bottom: 2px solid #fefefe; transform: translateX(-50%) rotate(-45deg); animation: scrollDownAnim 1.5s infinite ease-in-out; }

@keyframes scrollDownAnim {
    0%, 100% { transform: translate(-50%, 0) rotate(-45deg); }
    50% { transform: translate(-50%, 10px) rotate(-45deg); }
}


/*************** intro ***************/
.introTop{width:100%; display:flex; justify-content: space-between; margin-bottom:56px;}
.introTopBox{width:630px; overflow: hidden; position: relative; }
.introTopBox > .fs_w03{margin-bottom:20px;}
.introTop > .fs_w04{ margin-top:42px; width:400px; overflow: hidden; position: relative;}
.introBottom{width:100%;}
.introBottom img{width:100%;}
/*************** //intro ***************/


/*************** service ***************/
.service > .inner{display:flex; align-items: flex-start;  justify-content: space-between;}
.service > .inner > div{height:760px; }
.serviceLeft{display:flex; flex-direction: column; width:30vw; justify-content: space-between;}
.serviceTit > .fs_w19{margin-bottom:16px;}
.serviceBtn{height:-webkit-fill-available; margin-top:56px; display:flex; flex-direction: column; justify-content: space-between; align-items: flex-start;}
.serviceBtn > a.active:before{content:''; width:16px; height:16px; display:block; background:#183497; margin-right:16px;}
.serviceBtn > a.active{color:#183497}
.serviceBtn > a{display:flex; align-items: center; cursor: pointer;}

.serviceRight{width:40vw}
.solutionResult{height:100%; position:relative; display:flex; align-items: flex-end; justify-content: flex-end; padding:40px 32px; box-sizing: border-box;}
.solutionResult > p{position:relative; z-index: 3;}
.solutionResult:after{content:''; position:absolute; width:40vw; height:180px; background:linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)); left:0; bottom:0}
.solutionTitImg{width:auto; height:720px; position:absolute; left:-80px; bottom:0; }
.modalOpenIcon{position:absolute; right:32px; top:40px}
#solutionResult1{background:url('/theme/basic/img/page/solutionImg1_1.jpg')center center;}
#solutionResult2{background:url('/theme/basic/img/page/solutionImg2_1.jpg')center center;}
#solutionResult3{background:url('/theme/basic/img/page/solutionImg3_1.jpg')center center;}
#solutionResult4{background:url('/theme/basic/img/page/solutionImg4_1.jpg')center center;}
#solutionResult5{background:url('/theme/basic/img/page/solutionImg5_1.jpg')center center;}
#solutionResult6{background:url('/theme/basic/img/page/solutionImg6_1.jpg')center center;}

.solutionTit{color:#1B46FF; }
.solutionCnt{margin:24px 0}
.modalImg{width:100%; margin-bottom:40px; display:block}
.solutionModalCnt{height:calc(60vh - 120px); overflow-y: scroll; padding-bottom:56px}
/* Webkit 브라우저를 위한 스크롤바 스타일 */
.solutionModalCnt::-webkit-scrollbar {width: 8px; /* 스크롤바의 너비 설정 */}
.solutionModalCnt::-webkit-scrollbar-track {background: transparent; /* 스크롤바 트랙의 배경색을 투명하게 설정 */}
.solutionModalCnt::-webkit-scrollbar-thumb {background-color: transparent; /* 스크롤바의 색상을 투명하게 설정 */}
.solutionModalCnt {scrollbar-width: thin; /* 스크롤바의 너비를 얇게 설정 */scrollbar-color: transparent transparent; /* 스크롤바와 트랙의 색상을 투명하게 설정 */}

.solutionModalBtn{width:100%; display:flex; align-items: flex-start; justify-content: space-between; flex-wrap:wrap}
.solutionModalBtn > a{width:49%; height:50px; border:1px solid #183497; display:flex; align-items: center; justify-content: center; margin-bottom:24px; color:#183497; transition: all 0.2s;}
.solutionModalBtn > a.active{background:#183497; color:#fefefe}
.solutionModalBtnResult{display:none}
.solutionModalBtnResult.active{display:block}

@keyframes slideInFromRight {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.solutionTitImg.animate {animation: slideInFromRight 1s forwards;}

/* 860px 이상에서만 애니메이션 작동 */
@media (max-width: 860px) {.solutionTitImg {animation: none !important;}
}

/*************** //service ***************/


/*************** product ***************/
.product > .inner > .fs_w19{margin-bottom:56px;}
.productList{width:100%; display:flex; align-items: flex-start; justify-content: space-between; flex-wrap:wrap;}
.productSlider{width:calc(100% - 6px); border:1px solid #aaa; margin:56px 0 40px;}
.productBox{width:25%;height:194px; padding:16px 0; display:flex; align-items: center !important; justify-content: center;}
.productBox > img{height:100%; }
.plusLink{background:#F2F2F4; padding:74px 0}

.productBtn{display:flex; align-items: center; justify-content: flex-start; width:100%; margin:56px 0 24px;}
.productTblBtn{width:-webkit-fill-available; height:50px; border:1px solid #183497; background:#fefefe; transition: all 0.2s; color:#183497; display:flex; align-items: center;
justify-content: center; margin-right:24px}
.productTblBtn:nth-last-child(1){margin-right:0}
.productTblBtn.active{background:#183497; color:#fefefe}
.productTbl{display:none; width:100%}
.productTbl.active{display: block;}
.productTbl table{width:100%}
.productTbl table td{vertical-align: middle;}
.productTbl table tr > .pointTd{background:#070E2C; color: #fefefe; height:50px; width:210px}
.productTbl table tr > td:nth-child(2){width:calc(100% - 210px); background:#F2F4F5; padding-left:24px}
.productTbl table tr:nth-child(2n) > td:nth-child(2){ background:#E6E9EC}

.solutionTit{margin:40px 0 16px}
.productImgLine{width:100%;border:1px solid #aaa; margin-bottom:40px; box-sizing: border-box;}

.swiperBtn{height:-webkit-fill-available; position: absolute; top:0; left:0; width:100%;}
.swiperBtn > div{cursor: pointer; width:40px; height:80px; display:block; background:#183497; z-index:999; position:absolute; top:50%; transform:translateY(-50%)}
.swiperPrevBtn{left:0}
.swiperBtn > div:after{content:''; display:block; border-right:2px solid #fefefe; top:50%; border-bottom:2px solid #fefefe; position:absolute;width:14px; height:14px}
.swiperPrevBtn:after{ transform:translate(-50%, -50%) rotate(140deg); left:50%;}
.swiperNextBtn{right:0; }
.swiperNextBtn:after{ transform:translate(-50%, -50%) rotate(-45deg); left:38%;}
/*************** //product ***************/


/*************** subBanner ***************/
.subBanner {width: 100vw;height: 480px;position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;padding: 0;}
.subBanner::before {content: '';position: absolute;top: 0;left: 50%;width: 0;height: 100%;background: url('/theme/basic/img/page/subBannerBg1.jpg') center center no-repeat;
    background-size: cover;transform: translateX(-50%);transition: width 0.8s ease-in-out;}
.subBanner.animate::before {width: 100%;}
.subBanner .inner {position: relative;z-index: 1;}
/*************** //subBanner ***************/


/*************** history ***************/
.historyBox{margin-top:56px; }
.history{position:relative}
.history:before { content: 'AUTOVATION'; font-size: 14dvw; color: #dfdfdf;opacity:0.1;
     font-weight: 900; position: absolute; left: 0; top: 0; z-index: -1; text-shadow: -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #222; 
    height:-webkit-fill-available; display:flex; align-items: center;}
.swiper.historySwiper{width:90vw; margin-left:10vw}

.historySwiper .down{margin-top:48px}
.historySwiper img{width:100%; margin-top:86px}

.historySwiper .swiper-slide > p{position:absolute; top:0}
.historyCnt{margin:24px 0 0 0}
.historyCnt > p:nth-child(1){margin-bottom: 4px;}
/*************** //history ***************/


/*************** news ***************/
.news > .inner{position:relative;}
.boardLink{position:absolute; right:0; top:18px}
#newsLatest{margin-top:56px; width:100%; display:flex; align-items: center; justify-content: space-between; flex-wrap:wrap;}
.latestImg{height:320px; position:relative; background-size:cover !important; background-position: center; margin-bottom:24px; overflow: hidden; }
.latestImg img{height:120%;}
.latestImg .boardHref{position:absolute; right:32px; bottom:32px; width:52px; height:8px}
.latestImg p{text-overflow: ellipsis; overflow:hidden; word-break: break-word; display: -webkit-box;  -webkit-box-orient:vertical;}
.latestImg .fs_w07{margin-bottom:16px;-webkit-line-clamp:2;}
.latestImg .fs_w03{-webkit-line-clamp:3;}
#newsLatest > .latestImg:nth-child(6) .fs_w03{-webkit-line-clamp:2}
#newsLatest > .latestImg:nth-child(1){width:70%}
#newsLatest > .latestImg:nth-child(2){width:calc(30% - 24px); box-sizing: border-box; padding:32px}
#newsLatest > .latestImg:nth-child(3){width:28%; box-sizing: border-box; padding:32px}
#newsLatest > .latestImg:nth-child(4){width:calc(42% - 24px);box-sizing: border-box; padding:32px}
#newsLatest > .latestImg:nth-child(5){width:calc(30% - 24px); box-sizing: border-box; padding:32px}
#newsLatest > .latestImg:nth-child(6){width:70%; box-sizing: border-box; padding:32px}
#newsLatest > .latestImg:nth-child(7){width:calc(30% - 24px);}
/*************** //news ***************/


/*************** onlineBanner ***************/
.onlineBanner{width:100vw; height:464px; padding:0; background:url('/theme/basic/img/page/subBannerBg2.jpg') center center no-repeat; background-size:cover}
.onlineBanner > .inner{height:100%; display:flex; align-items: center; justify-content: space-between;}
#online{width:150px; height:50px; display:flex; align-items: center; justify-content: center; background:#fefefe; cursor: pointer;}
/*************** //onlineBanner ***************/


/*************** online ***************/
#onlineModal > .modalInner{height:80vh}
#onlineModal .solutionModalCnt{height:calc(80vh - 120px)}
.onlineCnt{margin:24px 0 56px}
.contactBox {width:100%; display:flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between;}
.onlineInput{width:48%}
.onlineInput > input, .onlineInput > textarea{background:#F2F4F5; border:1px solid #a3acb1; border-radius:4px; padding:16px; box-sizing: border-box;}
.onlineInput > input{width:100%; height:60px;}
.onlineInput > p{margin-bottom:8px}
.onlineTextarea{width:100%;margin-top:24px}
.onlineTextarea > textarea{width:100%; height:240px}

.onlineChck{display:flex; align-items: center; justify-content: flex-start; margin-top:40px}
.onlineChck > input[type="checkbox"]{position:absolute; left:-999px;}
.onlineChck > input[type="checkbox"] + label{position:relative; cursor: pointer; display:flex;}
.onlineChck > input[type="checkbox"] + label:before{content:'';display:block;width:20px; height:20px; border-radius:2px; border:1px solid #222; background:#fefefe; margin-right:8px}
.onlineChck > input[type="checkbox"]:checked + label:after{content:'';display:block; width:14px; height:14px; 
 position:absolute; left:4px; top:50%; transform:translateY(-50%);   background:url('/theme/basic/img/page/chkActive.svg')center center no-repeat; background-size:100% 100%;}
.onlineChck > input[type="checkbox"]:checked + label:before{background:#222;}

.policyBtn{margin-left:16px; border-bottom:1px solid #222}
.onlineSubmit{width:150px; margin-left:calc(100% - 150px); height:50px; margin-top:40px;  right:56px; bottom:80px; box-sizing: border-box;}
/*************** //online ***************/


/*************** productList ***************/
.subProduct{margin-top:80px}
.subProduct > .inner > p{margin-bottom:56px}
.subProduct .productList{justify-content: flex-start;}
.subProduct .productDetail{width:calc(33.3333% - 40px); height:auto; display:block; margin-right:40px;  margin-bottom:56px; cursor: pointer;}
.subProduct .productDetail:nth-child(3n){margin-right:0}
.subProduct .productDetailImg{width:100%; height:485px;  border:1px solid #bdbdbd; box-sizing: border-box; display:flex; align-items: center; justify-content: center; margin-bottom:24px}
.subProduct .productDetailImg img{width:calc(100% - 80px)}
/*************** //productList ***************/


/*************** policy ***************/
.policy{margin-bottom:160px}
.policyPageTit{margin-bottom:80px}
.policyPart{margin-top:80px}
.policyTit{width:100%; height:68px; display:flex; align-items: center; border-bottom:1px solid #222; margin-bottom:40px;}
/*************** //policy ***************/


/*************** board(news) ***************/
/*list */
.newsBoard{margin-top:100px;position:relative; margin-bottom:160px}
.newsBoard > .inner > p{margin-bottom:56px;}

.newsForm{width:100%; display:flex; align-items: flex-start; justify-content: flex-start; flex-wrap:wrap;  }
.newsBox{width:calc(33.3333% - 28px); margin-right:40px; margin-bottom:40px;}
.newsBox:nth-child(3n){margin-right:0}
.newsImg{width:100%;}
.newsBg{width:100%; height:320px; margin-bottom:32px;}
.newsImg span{display:block}
.newsImg span:nth-child(2){text-overflow: ellipsis; overflow:hidden; white-space: nowrap;}
.newsImg span:nth-child(3){text-overflow: ellipsis; overflow:hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;margin:8px 0 16px}
.newsImg span:nth-child(4){color:#aaa; }
.boardWrite{width:120px; height:50px; box-sizing: border-box; background:#070E2C; display:flex; align-items: center; justify-content: center; margin-left:auto; margin-top:100px}

/* write */
#fwrite{margin-top:80px;}
.inputBox{margin-bottom:40px; display:flex; flex-direction: column; width:100%;}
.inputBox label{margin-bottom:10px}
.inputBox input{width:100%;background:#F2F4F5; border:1px solid #a3acb1; border-radius:4px; padding:16px; box-sizing: border-box;}
.confirmBtn{width:100%; display:flex; align-items: center; justify-content: flex-end; margin-top:40px; margin-bottom:160px}
.file_wr{width:100%; background:#F2F4F5; border:1px solid #a3acb1; padding:16px; margin-top:20px}
.confirmBtn a, .confirmBtn button{width:120px; height:50px; margin-left:40px; display:flex; align-items: center; justify-content: center; border:0; cursor: pointer;}
.confirmBtn a{background:#aaa}
.confirmBtn button{background:#183497}

/* view */
.boardView{margin-top:80px}
.boardTit{padding-bottom:32px; border-bottom:2px solid #222}
.boardTit p:nth-child(2){color:#aaa; margin-top:8px}
#bo_v_img, #bo_v_img img{width:100%; height:auto}
#bo_v_img{margin-bottom:32px}
.boDetail{margin:32px 0}
#bo_v_con{margin-bottom:32px}
.bo_v_nb{display:flex; flex-direction: column;}
.bo_v_nb > li{display:flex; align-items: center;width:100%; padding:40px 24px; border-top:1px solid #eee; box-sizing: border-box;}
.bo_v_nb > li:nth-child(2){border-bottom:1px solid #eee}
.prevNextLink{margin-right:24px; }
.boardListLink{display:flex; align-items: center; justify-content:center; margin:56px auto 160px}
.boardListLink > a{ width:240px; height:50px; display:flex; align-items: center; justify-content:center; background:#183497; margin:0 16px}
.boardListLink > a:nth-child(1){background:#222}
.boardListLink > a:nth-child(3){background:#d02323}
/*************** //board(news) ***************/


/*************** board(online) ***************/
/*list */
.onlineBoard{width:100%; margin:80px 0 160px;}
.onlineBoard > .inner > p{margin-bottom:32px}
.boardBox{width:100%; margin-bottom:40px}
.boardBox table{width:100%; }
.boardBox table td{height:40px; border-bottom:1px solid #eee; vertical-align: middle;background:#fefefe}
.boardBox table thead td{background:#183497; border-right:1px solid #fefeef; }
.boardBox table thead td:nth-last-child(1){border-right:0}
.boardBox table tbody tr:nth-child(2n) td{background:#eee}
.clickable-row{cursor: pointer;}
/* view */
.onlineBoardView{width:100%; margin:80px 0 160px}
.onlineBoardView table{width:100%;}
.onlineBoardView tr td{height:50px; vertical-align: middle; padding-left:20px; border-bottom:1px solid #d5d5d5;}
.onlineBoardView tr td:nth-child(1){background:#070E2C; border-bottom:1px solid #d5d5d5; width:20%;}
.onlineBoardView tr td:nth-child(2){background:#d5d5d5; width:80%}
.onlineBoardView tr:nth-child(2) td:nth-child(2){background:#eee;}
/*************** //board(online) ***************/


/*************** login ***************/
.loginSection{width:100vw; height:100dvh; margin:0; padding:0; background:#eee; display:flex; flex-direction: column; align-items: center; justify-content: center;}
.loginSection form{width:30vw; height:auto; background:#fefefe; border-radius:10px; padding:60px 40px; margin-top:20px;}
.loginSection form fieldset{display:flex; flex-direction: column; margin-bottom:40px; width:100%}
.loginSection form fieldset input{width:100%; border:1px solid #a3acb1; background:#f2f4f5; padding:4px 16px; margin-top:10px; box-sizing: border-box;}
.loginBtn{width:100%; height:50px; background:#070E2C; cursor: pointer;}
/*************** //login ***************/


.view_file_download{box-shadow: 0 0 4px rgba(0, 0, 0, 0.8); width:100%; display:block; line-height:1em;  padding:12px; border-radius:4px; cursor: pointer; font-weight:700}