@charset "utf-8";


/*main*/
 body {font-family: 'NanumSquare', 'Noto Sans KR';  letter-spacing:-.5px; box-sizing:border-box; color:#333; font-size:14px; font-weight:300; }

/* #header .h_inner {overflow: hidden;}
.navi {position: fixed; z-index: 10; right: 6%; top: 50%; transform: translateY(-50%);}
.navi li {margin-bottom: 30px;}
.navi li a {display: block; text-align: right; color: #fff;}
.navi li a:after {width: 10px; height: 10px; border: 1px solid #fff; content: ""; display: inline-block; border-radius: 10px; vertical-align: middle; margin-left: 18px;}
.navi li a.on:after {background-color: #fff;}

.navi.active a{ color: #0066b3;}
.navi.active li a:after {border: 1px solid #0066b3;}
.navi.active li a.on:after {background-color: #0066b3;} */

/*visual*/
#main_vis {overflow: hidden; position: relative;height: 100vh;}
.main_vis  .inner {height: 100vh;}
#main_vis .vis {width: 100%; height: 100vh; overflow: hidden; position: relative; float: left;}
#main_vis .vis .vis_bg {background: url("/resources/img/main/main_vis.jpg")no-repeat center/cover; width: 100%; height: 100vh; position: absolute; transform: scale(1); transition: all .3s ease-in-out;}
#main_vis .vis2 .vis_bg{background: url("/resources/img/main/main_vis2.jpg")no-repeat center/cover;}
#main_vis .vis3 .vis_bg{background: url("/resources/img/main/main_vis3.jpg")no-repeat center/cover;}

#main_vis .inner {position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; height: calc(100vh - 50px);}


#main_vis .vis_txt { text-align:left; position:absolute; left: 4%; bottom:100px; z-index:2; word-break:keep-all;}
#main_vis .vis_txt .txt1 {color:#fff; font-size:70px; letter-spacing:-1px; line-height:100%; transition:.3s ease; font-weight:600; margin-bottom:21px;}
#main_vis .vis_txt .txt2 {color:#fff; font-size:20px; transition:.3s ease; line-height:180%}



#main_vis .swiper-container.swiper1 .vis.swiper-slide-active .vis_bg{transform: scale(1); animation-name: zoomIn; animation-duration:4s; animation-fill-mode: forwards;}

#main_vis .swiper-container.swiper1 .vis.swiper-slide .vis_bg{ background-size:cover; background-position: center; width:100%; height:100vh; position: absolute; left:0; top:0; transform: scale(1); }

#main_vis .swiper_nav { display: inline-block; position: absolute; right: 4%; bottom: 100px;}
#main_vis .swiper_arw {background: none; width: 50px; height: 50px; border: 1px solid #fff; transition: all .2s ease-in-out; position: relative; display: inline-block; margin: 0 0 0 10px; top: auto; left: auto; right: auto;}
#main_vis .swiper_arw:focus {outline: none; border: 1px solid #ea650c; }
#main_vis .swiper_arw:hover {background: #ea650c; border-color: #ea650c; }
#main_vis .swiper-button-prev::before { content: ""; width: 17px; height: 17px;  position: absolute; top: 50%; margin-left: 5px; left: 50%;transform: translate(-50%, -50%) rotate(45deg); border-left: 1px solid #fff; border-bottom: 1px solid #fff;}
#main_vis .swiper-button-next::before { content: ""; width: 17px; height: 17px;  position: absolute; top: 50%; margin-left: -5px; left: 50%;transform: translate(-50%, -50%) rotate(-135deg); border-left: 1px solid #fff; border-bottom: 1px solid #fff;}
#main_vis .swiper-pagination {margin-right: 20px; color: #fff; font-size: 24px;  font-weight: 200;  position: relative; display: inline-block;}
#main_vis .swiper-pagination-current {font-size: 50px;}


.main_cont {padding-top: 110px;}
.main_cont div, .main_cont p, .main_cont span, .main_cont h2, .main_cont a {word-break: keep-all;}
.main_cont h2 { color: #3a3c8a;font-weight: 600;font-size: 25px;padding-bottom: 45px;-webkit-text-stroke: thin;}

/*sec_tech*/
.sec_tech {background: url("/resources/img/main/logo_contact.png") top -50px right 60px/26.5% no-repeat;}
.sec_tech .sec {width: 100%; margin-top: 110px;}
.sec_tech .sec1 {margin-top: 0;}
.sec_tech .sec .img {width: 55%; display: inline-block; float: left; height: 507px; background: url("/resources/img/main/sec01.jpg") center top/cover no-repeat; text-indent: -99999px; margin-right: 5%;    box-shadow: 7px 7px 20px 7px #ddd;}
.sec_tech .sec:nth-child(2n+1) .img {margin-right: auto;;margin-left: 5%; float: right;}
.sec_tech .sec .txt_wrap .tit {padding: 35px 0 40px; position: relative;}
.sec_tech .sec .txt_wrap .tit::after {content: ""; height: 1px; width: 37px; background:#000; bottom: 0; left: 0; position: absolute;}
.sec_tech .sec .txt_wrap .tit2 {padding-top: 40px;}
.sec_tech .sec .txt_wrap .txt {margin-top: 40px;min-height: 220px;}
.sec_tech .sec2 .img {background-image: url("/resources/img/main/sec02.jpg");}
.sec_tech .sec3 .img {background-image: url("/resources/img/main/sec03.jpg");}
.sec_tech .sec4 .img {background-image: url("/resources/img/main/sec05.jpg");}
.sec_tech .sec .txt_wrap {width: 40%;display: inline-block;float: left;}
.sec_tech .sec .tit1 {font-size: 55px; color: #000; font-weight: 600;-webkit-text-stroke: thin;}
.sec_tech .sec .tit2 {font-size: 28px; color: #000; font-weight: 400; }
.sec_tech .sec .tit2 .bar { margin: 0px 10px; height: 18px;  width: 1px;  background: #555; display: inline-block;}
.sec_tech .sec .txt {font-size: 16px; color: #555;}
.sec_tech .sec .txt p{line-height: 150%;}
.sec_tech .more_btn a {font-size: 17px; width: 100%;}

.more_btn {width: 200px;}
.the-arrow {width: 1px;-webkit-transition: all 0.1s;transition: all 0.1s;}
.the-arrow.left {position: absolute;top: 50%;left: 0;}
.the-arrow.left > .shaft {width: 0;background-color: #000;}
.the-arrow.left > .shaft:before, .the-arrow.left > .shaft:after {  width: 0;  background-color: #000;z-index: 10;}
.the-arrow.left > .shaft:before { -webkit-transform: rotate(0);transform: rotate(0);}
.the-arrow.left > .shaft:after {-webkit-transform: rotate(0); transform: rotate(0);}
.the-arrow.right > .shaft2 {height: 1px; width: 51px; background-color: #000;display: inline-block; position: absolute;}
.animated-arrow:hover .the-arrow.right > .shaft2 {background-color: #ea650c;}

.the-arrow > .shaft { background-color: #000; display: block; height: 1px; position: relative; -webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0; transition-delay: 0;}
.the-arrow > .shaft_s:before, .the-arrow > .shaft_s:after {background-color: #000;  content: ""; display: block; -webkit-transition-delay: 0.3s;  transition-delay: 0.3s;-webkit-transition: all 0.5s;transition: all 0.5s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.the-arrow > .shaft_s:after {height: 1px; width: 0;}
.the-arrow > .shaft_s:before{width: 1px;height: 0; }
.animated-arrow {  display: inline-block;  color: #000;  text-decoration: none; position: relative;  -webkit-transition: all 0.2s;  transition: all 0.2s;}
.animated-arrow:hover {  color: #ea650c;}
.animated-arrow:hover > .the-arrow.left > .shaft {  width: 24px;  -webkit-transition-delay: 0.1s;  transition-delay: 0.1s;  background-color: #ea650c;}
.animated-arrow:hover > .the-arrow.left > .shaft:before, .animated-arrow:hover > .the-arrow.left > .shaft:after {  width: 8px;  -webkit-transition-delay: 0.1s;  transition-delay: 0.1s;  background-color: #ea650c;}
.animated-arrow:hover > .main {-webkit-transform: translateX(35px);transform: translateX(35px);}
.animated-arrow:hover .the-arrow .shaft_s:before, .animated-arrow:hover .the-arrow .shaft_s:after {  -webkit-transition-delay: 0;transition-delay: 0; -webkit-transition: all 0.1s;  transition: all 0.1s; background-color: #fff; z-index: 10;top: 50%; left: 50%;transform: translate(-50%, -50%);}
.animated-arrow:hover .the-arrow .shaft_s:before {width: 22px; height: 1px;}
.animated-arrow:hover .the-arrow .shaft_s:after {width: 1px; height: 22px;}
.animated-arrow > .main {  display: -webkit-box;  display: flex; -webkit-box-align: center; align-items: center;  -webkit-transition: all 0.2s;  transition: all 0.2s;width: 100%;}
.animated-arrow > .main > .text {display: inline-block; width: 100%; margin: 0 10px 0 0; line-height: 1;}
.animated-arrow > .main > .the-arrow {  position: relative;display: inline-block;  width: 100%;}
.the-arrow.right .shaft_s {border: 1px solid #000;  width: 27px;    left: 40px;  height: 27px;  -webkit-transition-delay: 0.3s;  transition-delay: 0.3s;-webkit-transition: all 0.5s;  transition: all 0.5s;  position: absolute;  top: 50%;  transform: translateY(-50%); box-sizing: border-box; display: inline-block;}
.animated-arrow:hover .the-arrow.right .shaft_s{background:#ea650c; width: 46px; height: 46px; border-color:#ea650c; }

/*sec_comp*/
.sec_comp { background: url(/resources/img/main/sec04.jpg) center/cover fixed no-repeat; margin-top: 110px; padding: 96px 0;color: #fff;}
.sec_comp a {color: #fff;}
.sec_comp .txt_wrap {width: 40%; display: inline-block; float: left;}
.sec_comp .txt_wrap .tit {width: 80%;}
.sec_comp .txt_wrap .tit1 {font-size: 40px;margin-bottom: 35px; font-weight: 600;}
.sec_comp .txt_wrap .tit2 {font-size: 17px; line-height: 150%;}
.sec_comp .txt_wrap .btn {margin-top: 60px;}
.sec_comp .txt_wrap .btn a:hover{background: #ea650c;}
.sec_comp .txt_wrap .btn a {font-size: 17px; padding: 18px 55px 18px 40px; border: 1px solid #fff; background: rgba(0,0,0,.4); position: relative; transition: all 0.2s ease-in-out;}
.sec_comp .txt_wrap .btn a::before {content: ""; position: absolute; width: 10px; height: 2px; right: 32px; top: 50%; transform: translateY(-50%); background: #fff;}
.sec_comp .txt_wrap .btn a::after {content: ""; position: absolute; width: 2px; height: 10px; right: 36px; top: 50%; transform: translateY(-50%); background: #fff;}
.sec_comp .menu_wrap {width: 60%; display: inline-block; float: left;}
.sec_comp .menu_wrap .menu {width: 31%; display: inline-block; float: left; padding: 45px 0; background: rgba(58,60,138,.7);margin: 0 1%; position: relative;}
.sec_comp .menu_wrap .menu::before {transition: all .2s ease-in-out; content: ""; position: absolute; width: 100%; height: 100%; border:5px solid #fff;box-sizing: border-box; opacity: 0; top: 0; left: 0;}
.sec_comp .menu_wrap .menu:hover::before { opacity: 1; transition: all .2s ease-in-out; }
.sec_comp .menu_wrap .menu.cert {background: rgba(234,101,12,.7);}
.sec_comp .menu_wrap .menu.loca {background: rgba(12,21,47,.7);}
.sec_comp .menu_wrap .menu .ico {display: block;margin: 0 auto;text-indent: -99999px; width:55px; height: 55px; background: url("/resources/img/main/sec04_1.png") center no-repeat;}
.sec_comp .menu_wrap .menu.cert .ico {background-image: url("/resources/img/main/sec04_2.png");}
.sec_comp .menu_wrap .menu.loca .ico {background-image: url("/resources/img/main/sec04_3.png");}
.sec_comp .menu_wrap .menu p {text-align: center;}
.sec_comp .menu_wrap .name {font-size: 18px;padding: 24px 0 18px;font-weight: 400;}
.sec_comp .menu_wrap .name_en {font-size: 15px;}

/*sec_perf*/
.sec_perf {background: url("/resources/img/main/sec05_bg.png") center/cover no-repeat; padding-bottom: 160px; position: relative;}
.sec_perf .sec {width: 100%;}

.sec_perf .sec .txt_wrap {width: 30%;display: inline-block;float: left;}
.sec_perf .sec .tit1 {font-size: 55px; color: #000; font-weight: 600;-webkit-text-stroke: thin;padding-bottom: 40px; position: relative;}
.sec_perf .sec .tit1::after {content: ""; height: 1px; width: 37px; background:#000; bottom: 0; left: 0; position: absolute;}
.sec_perf .swiper-slide {background-size: cover;background-position: center; }
.sec_perf .sec .txt_wrap2 {height: 20%; box-sizing: border-box;  padding: 10px 0; position: relative;}
.sec_perf .swiper-button-white {position: absolute;bottom: 23px;  top: auto; left: 80px; background: #fff;box-sizing: border-box; width: 70px;  height: 70px;  border: 1px solid #3a3c8a; transition: all .2s ease-in-out;}
.sec_perf .swiper-button-white:focus {outline: none;    border: 1px solid #3a3c8a;}
.sec_perf .swiper-button-white.swiper-button-prev {left: 0;transform: rotate(180deg);}
.sec_perf .swiper-button-white:hover {background: #3a3c8a;}
.sec_perf .swiper-button-white:hover::before, .sec_perf .swiper-button-white:hover::after {background:#fff;}
.sec_perf .swiper-button-white::before {content: ""; position:
absolute;width: 17px; height: 1px; background:#3a3c8a; transform: rotate(45deg) translateX(-50%); left: 50%; top: 50%;}
.sec_perf .swiper-button-white::after {content: ""; position:
absolute; width: 17px; height: 1px; background:#3a3c8a; transform: rotate(-45deg) translateX(-50%); left: 50%; top: 50%;}
.sec_perf .sec .txt_wrap2 .swiper-slide {height: 100%; opacity: 0 !important; }
.sec_perf .sec .txt_wrap2 .swiper-slide-active.swiper-slide-thumb-active {opacity: 1 !important; }

.sec_perf .sec .tit2 {font-size: 28px; color: #000; font-weight: 600; margin-top: 40px;}
.sec_perf .sec .txt {margin-top: 40px;height: 200px;font-size: 16px; color: #555;}
.sec_perf .sec .txt p{line-height: 150%;}

.sec_perf .pf_sl .img {height: 400px; background: url("/resources/img/main/sec05_1.jpg") center top/cover no-repeat; text-indent: -99999px; }
.sec_perf .pf_sl .img2 {background-image:url("/resources/img/main/sec05_2_210112.jpg"); }
.sec_perf .pf_sl .img3 {background-image:url("/resources/img/main/sec05_3.jpg"); }
.sec_perf .pf_sl {width: 60%; top: 183px;  right: 0;  position: absolute;  overflow: hidden;}

.sec_perf .pf_sl .img_wrap {width: 1536px; }



/*sec_map*/
.sec_map {padding-top: 0;height: 750px;}
.sec_map iframe {height: 100%; width: 100%;}



@media screen and (max-width:1700px){
    .navi {right: 2%;}
}
@media screen and (max-width:1500px){
    .navi {display: none;}
    .sec_map {height: 700px;}
}


@media screen and (max-width:1024px){
#main_vis .vis_txt .txt1 > span {display: block;line-height: 100%;}
.sec_tech .sec .img, .sec_tech .sec .txt_wrap {width: 100%;}
.sec_tech .sec .txt_wrap .txt { padding: 20px 0 40px;min-height: auto;}
.sec_comp .txt_wrap {width: 100%; text-align: center; margin-bottom: 50px;}
.sec_comp .txt_wrap .tit {width: 100%;}
.sec_comp .menu_wrap {width: 100%;}
.sec_map {height: 520px;}
#main_vis .vis_txt { padding-right:50px}

#main_vis .vis_txt .txt1 {font-size: 50px;}
#main_vis .vis_txt .txt2 {font-size: 16px;}

#main_vis .vis_txt .txt2 strong {display:block;}

}


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



.swiper-container.swiper2 {height: 960px;}

#main_vis .swiper_nav {display: none;}
.sec_tech {padding-top: 50px; background-size: 40%; background-position: right -20px top -20px;}
.main_cont h2 {padding-bottom: 30px; font-size: 22px;}
.sec_tech .sec {margin-top: 90px;}
.sec_tech .sec1 {margin-top: 0;}
.sec_tech .sec .img{height: 340px; background-position: center center;5px 5px 10px 3px #ddd;}
.sec_tech .sec .txt_wrap .tit {padding: 30px 0 20px;}
.sec_tech .sec .tit1 {font-size: 40px;}
.sec_tech .sec .txt_wrap .tit2{padding-top: 10px;font-size: 20px;}
.sec_tech .sec .txt_wrap .txt{margin-top: 0;font-size: 14px;}
.sec_comp {background-attachment: scroll !important;}
.sec_comp .menu_wrap .name {padding: 14px 0 8px;}
.sec_perf { overflow: hidden;padding: 90px 0 400px;}
.sec_perf .swiper-button-white { bottom: auto; top: 22px; right: 0; left: auto; width: 50px;  height: 50px;}
.sec_perf .swiper-button-white.swiper-button-prev {right: 60px; left: auto;}
.sec_perf .pf_sl { width: 200%; top: auto; left: 10px;}
.sec_perf .pf_sl .img_wrap {width: 100%;}
.sec_perf .sec .tit1 {font-size: 40px; padding-bottom: 20px;}
.sec_perf .sec .tit2 {margin-top: 20px;font-size: 20px;}
.sec_perf .sec .txt {margin-top: 20px; font-size: 14px; height: auto;}
.sec_perf .sec .txt_wrap {width: 100%;}
.sec_perf .sec .txt_wrap2 {width: 100%;padding: 0 0 20px;}
.sec_perf .sec .txt_wrap2 .swiper-slide-thumb-active {width: 100% !important;}
.sec_perf .pf_sl .img {height: 300px;}
.sec_map {height: 420px;}
}

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

}

@media screen and (max-width:500px){
#main_vis, #main_vis .vis, #main_vis .swiper-container.swiper1 .vis.swiper-slide .vis_bg {height: 70vh;min-height: 300px;}
#main_vis .vis_txt {bottom: 30px; top:50%; transform:translateY(-50%);width:100%; bottom:auto; text-align:center; left:auto; padding-right:0}
#main_vis .vis_txt .txt1 {font-size: 28px;}
#main_vis .vis_txt .txt2 {font-size: 14px;  padding:0 27px;}

.swiper-container.swiper2 .swiper-pagination-bullet {margin-right: 10px;}
.swiper-container.swiper2 .swiper-pagination-bullet:after {right: -6px;}
.sec_comp .menu_wrap .menu {padding: 10px 0 15px;}
.sec_comp .menu_wrap .menu p {padding: 6px 0 10px;font-size: 16px;}
.sec_comp .menu_wrap .menu .ico {background-size: 70%;}
.sec_comp .menu_wrap .menu .name_en {height: 20px; font-size: 12px; padding: 0;}
.sec_perf {padding: 90px 0 320px;}
.sec_perf .pf_sl .img {height: 230px;}
.sec_map {height: 320px;}

}
/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .main_cont h2 {text-shadow: -0.3px -0.3px 0px #3a3c8a, 0.3px -0.3px 0px #3a3c8a, -0.3px 0.3px 0px #3a3c8a, 0.3px 0.3px 0px #3a3c8a}
  .sec_tech .sec .tit1 {text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000; }
}