@charset "utf-8";

html, body {font-size:100%; font-family: 'Nanum Gothic', sans-serif; max-width:100vw;;overflow-x:hidden;}
.inner{width:100%; max-width:1200px; margin:0 auto; z-index:10; position:relative;}
.head {width:100%; height:80px; background:#000; background:rgba(0,0,0,0.9);  position:fixed; z-index:20; border-bottom:1px solid rgba(255,255,255,.3);}
.section{width:100%;  position:relative; margin:0 auto; background:#f1f1f1; }
.foot{width:100%; position:relative;  margin:0 auto; clear:both}
.clear{border:none;height:0;margin:0;padding:0;overflow:hidden; clear:both; display:block; border:none; opacity:0; color:transparent;}
.section::after{clear:both;}

/* PRELOADER */
.preloader {  position: fixed; top: 0;left: 0;right: 0;bottom: 0; background-color: #fff; z-index: 999999;height: 100%;width: 100%;overflow: hidden !important;}
.loaded {width:340px; height: 80px; line-height:40px;vertical-align:top; position: absolute;left: 50%;top: 50%; margin:-40px 0 0 -170px;font-size:40px;	text-align:center;}
.loading{ width:340px; height:3px;position:absolute; float:left; text-align:center; margin-top:15px; animation:line 3s infinite linear;  background:#3D4DA6;}

@keyframes line{ 100%{ width:100%; left:0%; } 0%{left:0;width:0; } }

/* head-------------------------- */

#logo {position:absolute; top:10px; left:10px;  }

.gnb_menu{position:absolute;top:80px; width:100%; height:100vh; background:#131313;background:rgba(0,0,0,0.85); z-index:15; display:none; }
.gnb_menu ul.gnb_1depth{width:100%; padding:20px 0; background:transparent;height:auto; min-height:650px;text-align:center;}
.gnb_menu ul.gnb_1depth li{padding:20px ; width:50%; min-width:150px; margin:0 auto;   }
.gnb_menu ul.gnb_1depth li a{background:none; text-align:left;  text-indent:0; color:#fff;  display:block; font-size:1.2em; line-height:40px; border-bottom:1px solid #4158d1;}
.gnb_menu ul.gnb_1depth li a:hover {color:#ffd20c; font-weight:bold; border-bottom:1px solid #F9A504}

#gnb_menu_btn{position:absolute; top:15px; right:10px; width:50px; height:50px; font-size:20px;color:#fff; background:transparent; border:1px solid #fff; text-align:center;line-height:50px;  border:none;z-index:40; }
#gnb_menu_btn:focus, #gnb_menu_btn.close :focus {/*background:#4158d1;*/ background:transparent; outline:0}
#gnb_menu_btn:hover {background:#F9A504}
#gnb_menu_btn .bar {position: absolute;left: 10px;top:15px;width: 30px;height: 2px;border-radius:2px;background-color: #fff;vertical-align:top; transition: top 0.2s ease-in-out 0.2s, transform 0.2s ease-in-out 0s;}
#gnb_menu_btn .bar.top { top:25px;}
#gnb_menu_btn .bar.bottom {top: 35px;}
#gnb_menu_btn.close {background:#4158d1; outline:0;}
#gnb_menu_btn.close .bar { transition: top 0.2s ease-in-out 0s, transform 0.2s ease-in-out 0.2s;}
#gnb_menu_btn.close .bar.top { top: 50%;transform: translateY(-50%) rotate(45deg);}
#gnb_menu_btn.close .bar.middle {opacity: 0;transition: opacity 1ms linear 0.2s;}
#gnb_menu_btn.close .bar.bottom {top: 50%;transform: translateY(-50%) rotate(-45deg);}

.hd_util { text-align:right; border:none; margin-top:20px}
.hd_util button {width:150px; height:40px; text-align:center; line-height:38px; color:#fff;  background:transparent; border:2px solid #F9A504; font-size: 16px; margin-left:5px; border-radius:20px;}
.hd_util button:hover {background:#4158d1}

/* foot ---------------------------------*/

.foot {background:#111; height:auto; min-height:100px;}

.copyright {text-align:center; color:#ccc; font-size:0.98em; padding:20px 0; line-height:1.4em}

.copyright a {color:#6778DA}
.copyright a.adm {color:#FF7F27}

.yeogie {width:100%;text-align:right;background:url(../img/bg.png) repeat;}
.yeogie img {opacity:.3; }
.yeogie a:hover img{opacity:1; transition:.3s}

/* section1 -------------------------- */

.section1 {height:auto; width:100%;}

#m_vis {position:relative; top:0;width:100%; height:100%; max-height:800px; overflow:hidden !important;}
.slide-viewer {position:relative; width:100%; height:100%; ;max-height:800px; margin:0 auto; overflow:hidden; }
.slider {width:100%; height:100%; position:relative; z-index:16}
.slide{width:100%;height:100%; position:absolute;display:none; background-position:center center; background-size:cover;}
.slide:first-child {display: block;}

.slide-buttons{position:relative; bottom:40px;;text-align:center;width:100%; z-index:19;}
.slide-btn{color:none;background:rgba(255,255,255,.4);font-size:0px;text-align:right; text-indent:-999999px; width:15px;height:15px; margin-right:15px;overflow:hidden;border:none !important;}
.slide-btn:last-child{margin-right:0;}
.slide-btn.active{color:#F9A504;background:#F9A504;cursor:pointer; opacity:1; transition-duration:.3s;}

.cover { position:absolute; top:0;;z-index:18;padding:0;margin:0; margin:0 auto; width:100%;height:100%;background:rgba(20, 60, 140, .3);; text-align:center; font-weight:300; opacity:0;  overflow:hidden;}
.cover_txt1, .cover_txt2, .cover_txt3 {width:100%;margin:7px 0;font-weight:500;color:#fff;color:rgba(255,255,255,.8);text-align:center;}
.cover_txt1 {font-size:2em;color:rgba(255,255,255,.8);}
.cover_txt2 {font-size:2.5em;color:rgba(255,255,255,.8);}
.cover_txt3 {font-size:3.2em;color:rgba(255,255,255,1);}
.cover_name {color:#fff; color:rgba(255,255,255,.7);font-size:2em;padding:0; padding-left:0; text-indent:0; padding-top:24px; opacity:0; margin:0 auto;  text-align:center; }

.cover{
   -webkit-animation-name: slide;
   -webkit-animation-duration:.5s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-delay:.5s;
   -ms-animation-name: slide;
   -ms-animation-duration:.5s;
   -ms-animation-timing-function: linear;
   -ms-animation-fill-mode: forwards;
   -ms-animation-delay:.5s;
   animation-name: slide;
   animation-duration:.5s;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
   animation-delay:.5s;
}

.cover_txt {
   -webkit-transform: translate3d(0,0,0) scaleY(0);
   -webkit-animation-name: cover_txt;
   -webkit-animation-duration:1s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-fill-mode: forwards;
   -ms-transform: translate3d(0,0,0) scaleY(0);
   -ms-animation-name: cover_txt;
   -ms-animation-duration:1s;
   -ms-animation-timing-function: linear;
   -ms-animation-fill-mode: forwards;
   transform: translate3d(0,0,0) scaleY(0);
   animation-name: cover_txt;
   animation-duration:1s;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
}

.cover_txt.act, .cover_name.act {
   -webkit-transform: translate3d(0,0,0) scaleY(0);
   -webkit-animation-name: cover_txt;
   -webkit-animation-duration:1s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-fill-mode: forwards;
   -ms-transform: translate3d(0,0,0) scaleY(0);
   -ms-animation-name: cover_txt;
   -ms-animation-duration:1s;
   -ms-animation-timing-function: linear;
   -ms-animation-fill-mode: forwards;
   transform: translate3d(0,0,0) scaleY(0);
   animation-name: cover_txt;
   animation-duration:1s;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
}

 .cover_txt {
   -webkit-animation-delay:1.5s;
   -ms-animation-delay:1.5s;
   animation-delay:1.5s;
}
 
 .cover_name {
   -webkit-animation-delay:2s;
   -ms-animation-delay:2s;
   animation-delay:2s;
}

@keyframes slide {
  0%{opacity:0; } 100%{opacity:1;}
}

@keyframes cover_txt {
  0%{opacity:0;  -webkit-transform: translate3d(0,0,0) scaleY(0);-ms-transform: translate3d(0,0,0) scaleY(0);
    transform: translate3d(0,0,0) scaleY(0);}
  100%{opacity:1;  -webkit-transform: translate3d(0,0,0) scaleY(1);-ms-transform: translate3d(0,0,0) scaleY(1);
    transform: translate3d(0,-50px,0) scaleY(1);}
}

/* section2 ----------------------------- */

.products_box {width:100%; height:auto; z-index:18; overflow:hidden;}
.co_box { width: 100%; }
.news_box {width:100%;background:#f1f1f2; }
.qna_box {width:100%;  }
.info_box {width:100%;  }

.section_title {font-size:2em; color:#333; font-weight:600; padding:50px 0 30px 0; margin:40px 0; text-align:center; }
.section_title::after {content:''; position:absolute;  display:block; background:#4158d1;height:3px; left:50%; width:60px;  margin:20px 0 40px 0; margin-left:-25px; text-align:center;}
ul.prod {width:100%; text-align:center; }
ul.prod > li {position:relative;width:25%; float:left; display:block; text-align:center; overflow:hidden !important;}
ul.prod > li > a {width:100%;display:block; height:100%;text-align:center;}
ul.prod > li > a > img {height:100%; width:100%; text-align:center;}
ul.prod .pro_txt{position:absolute; z-index:10;float:left; width:100%; height:0%; top:0; left:0;color:#fff; background:#4158d1; background:rgba(20, 60, 140, .9);; margin-top:-100%;  text-align:center; }
ul.prod .pro_txt span{width:100%; text-align:center;position:relative;float:left; top:50%;font-size:1.4em; margin:0 auto;margin-top:-11px }
ul.prod > li:hover  img{   filter: contrast(105%); transition:.5s}
ul.prod > li:hover .pro_txt {color:#fff; width:100%; height:100%;margin-top:0%; transition:.5s; }
ul.prod > li.w0 {width:100%}
ul.prod > li.w1 {width:100%}
ul.prod > li.w2 {width:50%;}
ul.prod > li.w3 {width:33.3%;}
ul.prod > li.w4 {width:25%;}

.info_box{width:100%; background:url("../img/m_co_bg.jpg") center center no-repeat;margin-top:50px; padding:50px 0 80px 0;	background-size:cover;	background-attachment:fixed;}
.info_box .section_title {color:#f2f2f2;}
.info_box .co_cont {padding:40px 20px; height:auto; background:rgba(0,0,0,0.5);  margin-bottom:40px; display:-webkit-box;-webkit-line-clamp:11; -webkit-box-orient:vertical; overflow:hidden !important; text-overflow:ellipsis;}
.info_box .co_cont {font-size:1em; line-height:1.8em; font-weight:300; color:#efefef !important; text-align:center; }
.info_box .co_cont p {color:#efefef !important; }
.info_box .co_cont b { font-size: 1.28em; color:#F9A504; font-weight:400;}
.info_box .co_cont strong { font-size: 1.28em; color:#F9A504; font-weight:400;}

@media (max-width:960px){
.info_box .co_cont {text-align:left;}
}

.news_box > ul {padding:0 20px 20px 20px;}
.news_box > ul > li {width:100%; line-height:20px; margin-bottom:10px}
.news_box > ul > li > a {display:block; }
.news_box > ul > li > a p { font-size:14px; color:#121212; width:100%; display:block; height:20px;display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden !important; text-overflow:ellipsis;}
.news_box > ul > li > a span {padding-right:10px; color:#888; font-size:12px}

.qna_box {background:none;height:600px; overflow:hidden;}
.qna_box > ul { position:absolute; right:0;  z-index:3; height: 220px; padding:40px; margin:20px; margin-top:-260px; width:600px; background:#fff; background:rgba(255,255,255,.8); float:right; border:2px dotted #4158d1}
.qna_box > ul > li {width:100%; line-height:20px; margin-bottom:10px; font-size:14px;color:#121212; }
.qna_box > ul > li > span {width:54px; display:inline-block}
.qna_box > ul > li > strong {font-size:14px; font-weight:400;}
.qna_box > ul > li > strong {}
.qna_box > ul > li.tel strong{font-size:20px; color:#3367d6; font-weight:700}
.qna_box > ul > li.qna_btn {width:100%; height:40px; margin-top:30px}
.qna_box > ul > li.qna_btn a { float:right;width:120px; line-height:40px;display:block; background:#3367d6; color:#fff; font-size:16px; text-align:center;}
.qna_box > ul > li.qna_btn a:hover {background:#F9A504;}

.co_info  {position:relative; width:96%; height:auto; margin:2% auto;}
.co_info ul{width:100%;  padding:2.5%; border:1px dotted #4148d1;  margin:30px auto;}
.co_info ul li { line-height:32px; font-weight:500; font-size:16px; }
.co_info ul li i {color:#3367d6; padding-right:15px}
.co_info ul li span {min-width:80px; display:inline-block;}
.co_info ul li  strong {font-weight:500; color:#333; font-size:16px;}
.co_info ul li  a  {font-weight:500; color:#333; font-size:16px;}

#ind_map {height:300px;}

#ctt a.btn_admin, #c55 .btn_admin {
    display: inline-block;
	margin-right:2%;
    background: #6778DA;
    color: #fff;
}
#ctt a.btn_admin, #ctt .btn_admin:hover {background:#4158d1; }

#container_title {width:100%; padding-top:70px; padding-bottom:80px; text-transform:uppercase; font-weight:600; color:#efefef; color:rgba(255,255,255,.9);  background:url(../img/sub_v.png) no-repeat;background-position:center center; background-size:cover;; text-align:center; font-size:36px; margin-bottom:40px;}
#container_title.company {background:url(../img/co_bg.jpg) no-repeat;background-size:cover;}
#container_title.product {background:url(../img/product_bg.jpg) no-repeat;background-size:cover;}
#container_title.qna {background:url(../img/qna_bg.jpg) no-repeat;background-size:cover;}
#container_title.schedule {background:url(../img/notice_bg.jpg) no-repeat;background-size:cover;}
#container_title.mov {background:url(../img/mov_bg.jpg) no-repeat;background-size:cover;}

.adm_bt {position:absolute; z-index:19; font-size:.75em; top:100px; right:10px;  padding:0 10px; line-height:28px; border:1px solid #ccc; background:#fff; border-radius:4px; }
.adm_bt.txt {right:130px}
.adm_bt.m-t {margin-top:-30px}

.privacy_btn {font-size:12px; padding:0px 6px; line-height:20px; color:#fff !important; background:#4158d1; border-radius:4px; display:inline-block;  margin-left:8px; }


/* responsive ----------------------------------*/

@media (max-width:960px){

.gnb_menu ul.gnb_1depth{width:100%; padding:20px 0; background:transparent;height:auto; text-align:center;}
.gnb_menu ul.gnb_1depth li{padding:10px; width:80%; min-width:150px; margin:0 auto; text-align:center;  }
.gnb_menu ul.gnb_1depth li a{background:none; text-align:center;  text-indent:0; color:#fff;  display:block; font-size:1.125em; line-height:50px; border-bottom:1px solid rgba(255,255,255,.2);}
.gnb_menu ul.gnb_1depth li a:hover {background:#4158d1; border-bottom:1px solid rgba(255,255,255,0);}

.hd_util {}
.hd_util button {width:45%; background:transparent; border:2px solid #F9A504;  margin:10px 2%;  }
.hd_util button:hover {}

.slide-viewer {height:100vh; max-height:750px;}
.slider{ height:100vh; max-height:750px;}

.cover_txt1 {font-size:.6em;}
.cover_txt2 {font-size:.8em;color:rgba(255,255,255,.8);}
.cover_txt3 {font-size:1em;color:rgba(255,255,255,1);}

.info_box .co_cont p{font-size:0.8em; line-height:1.4em;} 
.info_box .co_cont b { font-size: 1.2em;}

.qna_box > ul  {width:90%;  padding-top: 30px ; margin-left: 5%; margin-right:5%; }
.qna_box > ul > li.qna_btn {margin-top:20px}

}

@media (max-width:480px){

.hd_util button {width:100%}
.cover_txt { font-size:2.2em}
.cover_name { font-size:1.4em}
ul.prod .pro_txt span {font-size:0.875em}
.foot_menu ul li {white-space:nowrap;}

.info_box{; padding:30px 0 60px 0;	}
.info_box .co_cont {padding:20px;  }

ul.prod > li{width:50%;}
ul.prod > li.w0 {width:100%}
ul.prod > li.w1 {width:100%}
ul.prod > li.w2 {width:100%;}
ul.prod > li.w3 {width:100%;}
ul.prod > li.w4 {width:50%;}
.copyright {text-align:center; color:#ccc; font-size:0.75em; padding:20px 0;}

#bo_sch {width:100%; margin-top:40px}
.yeogie {text-align:center;}

}

@media (max-width:320px){
body{min-width:320px}

}