@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);

@font-face {
    font-family: 'Nanum Brush Script';
    font-style: normal;
    font-weight: 400;
    src: url(../font/NanumBrush.eot);
    src: url(../font/NanumBrush.eot#iefix) format('embedded-opentype'),
      url(../font/NanumBrush.woff) format('woff'),
      url(../font/NanumBrush.ttf) format('truetype');
}

a {cursor:pointer}
.wrap{width:1200px; position:relative; margin:0 auto; z-index:10;}
.head {width:100%; height:90px; position:fixed; z-index:99; margin:0 auto; background:#fff; box-shadow:2px 2px 2px rgba(0,0,0,0.2);}
.section{width:100%; position:relative; margin:0 auto; background:#f1f1f1; }
.foot{width:100%;  position:relative; margin:0 auto;}
.clear{border:none;height:0;margin:0;padding:0;overflow:hidden; clear:both; display:block; border:none; opacity:0; color:transparent;}
.bg {width:100%; height:100%; min-width:100vw; min-height:100vh; background:rgba(0,0,0,0.8); position:absolute; top:0px; left:0; display:none;}
.bg.on {display:block;}
html {width:100%; overflow-x:hidden;}

/* 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:280px; height: 80px; line-height:40px;vertical-align:top;
    position: absolute;
    left: 50%;top: 50%; margin:-40px 0 0 -140px;
	font-size:40px;	text-align:center;
}

.loading{ width:280px; 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:30px; width:100%; margin:0 auto;text-align:center; }

.gnb_menu{position:absolute; top:90px; left:-250px; width:230px; height:100vh; min-height:500px; background:#3D4DA6;  z-index:901; }
.gnb_menu ul.gnb_1depth{width:100%; padding:50px 0; background:rgba(84,104,204,1);height:auto; }
.gnb_menu ul.gnb_1depth li a{width:90%; color:#fff;  display:block; font-size:1.125em; margin-left:5%;text-align:left; line-height:40px; border-bottom:1px solid rgba(255,255,255,.2);}
.gnb_menu ul.gnb_1depth li a:hover {color:#FFD20D; font-weight:bold; border-bottom:1px solid #FFD20D}
#gnb_close_btn {width:40px; line-height:40px; top:5px; right:5px; font-weight:300;  position:absolute; color:#FFD20D; background:none; background:transparent; border:none;  border-radius:20px; font-size:40px}
#gnb_menu_btn{position:absolute; top:20px; left:10px; width:50px; height:50px; font-size:20px;color:#fff; background:#4158d1; text-align:center;line-height:50px;  border:none;z-index:900; }
#gnb_menu_btn:hover {background:#F9A504}
.yeogie { position:relative;padding-top:40px;width:100%; text-align:center;}


/* search */
.hd_sch_wr{ position:absolute; top:20px;right:10px; width:0px;  opacity:0;}
.hd_sch_wr.on{opacity:1;width:250px; -webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all .3s ease-in-out;
}
#hd_sch {width:0px; }
.hd_sch_wr.on #hd_sch {width:200px;height:50px;  -webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all .3s ease-in-out;}
#hd_sch input {background:none;}
.hd_sch_wr.on #hd_sch input {width:200px; background:rgba(240,240,248,0.5);  color:#4158d1; -webkit-transition: all 0.30s ease-in-out; 
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
transition: all .3s ease-in-out;}
#hd_sch h3 {position:fixed;font-size:0;line-height:0;overflow:hidden}
#hd_sch{/*border:2px solid #556ada;*/overflow:hidden; }
#hd_sch #sch_stx {padding-left:10px;height:50px; line-height:50px; position:fixed;margin-top:0;width:0px;border:0;border-right:0;float:left;font-size:1.25em; z-index:50;}
#hd_sch #sch_submit, #sch_bt {position:fixed; top:20px;right:10px;height:50px;border:0;background:#6778DA;color:#fff; width:50px;cursor:pointer;font-size:18px; z-index:10}

.hd_sch_wr.on #hd_sch #sch_stx {width:200px; }
#sch_close {float:right; position:relative;display:block; z-index:5555;color:transparent; opacity:0; background:transparent; width:30px; padding-right:10px;line-height:50px; font-size:1.25em;;border:none; text-align:right }
.hd_sch_wr.on  #sch_close {opacity:1;color:#888;  -webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;transition: all .3s ease-in-out; }
#sbn_side{position:absolute;top:20px;right:0}

.pc {display:block;}
.mobile{display:none;}

.section1 {height:auto; width:100%;;}
.slide-viewer {position:relative; background:#f1f1f1;width:100%; margin:0 auto; height:750px; overflow:hidden;  }

.slider {width:100%; height:100%; position:absolute; } 
.slide{width:100%;height:100%; float:left; display:block; opacity:0; text-align:center; background-size:contain; background-position:center center; opacity:1\9;}

.slide.w1 {width:100%;}
.slide.w2 {width:50%;}
.slide.w3 {width:33.3%;}

.noslide {background:url(../img/main1.png) no-repeat;background-position:center center; }
.slide img{height:100%;text-align:center;}

.slide0 {-webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; }
.slide1 {-webkit-animation-delay: 0.4s;-ms-animation-delay: 0.4s; animation-delay: 0.4s;}
.slide2 {-webkit-animation-delay: 0.8s;-ms-animation-delay: 0.8s; animation-delay: 0.8s;}


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

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

.cover { position:relative;padding:0;margin:0; margin:0 auto;width:100%;height:100%;background:rgba(20, 60, 140, .25);; text-align:center; font-weight:300; opacity:0; opacity:1\9; }
.cover_txt { width:100%;text-align:center; font-family: 'Nanum Brush Script', cursive;font-style:italic;color:#fff; font-size:5.8em; opacity:1\9;}
.cover_name {color:#fff; font-size:2.125em;padding:0; padding-left:0; text-indent:0; padding-top:20px; opacity:0; margin:0 auto;  text-align:center; opacity:1\9;}

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

.cover_txt, .cover_name {
   -webkit-transform: translate3d(0,0,0) scaleY(0);
   -webkit-animation-name: cover_txt;
   -webkit-animation-duration:0.4s;
   -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:0.4s;
   -ms-animation-timing-function: linear;
   -ms-animation-fill-mode: forwards;
   transform: translate3d(0,0,0) scaleY(0);
   animation-name: cover_txt;
   animation-duration:0.4s;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
}

 .cover_txt {
   -webkit-animation-delay:1.4s;
   -ms-animation-delay:1.4s;
   animation-delay:1.4s;
}
 
 .cover_name {
   -webkit-animation-delay:1.8s;
   -ms-animation-delay:1.8s;
   animation-delay:1.8s;
}
@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 ----------------------------- */

.section2 {width:100%;height:auto; }
.products_box {width:100%; height:auto;float:left;}
.co_box {width: 100%; height:300px; float:left;}
.news_box {width:32%; height:100%; background:#f1f1f2; float:left}
.qna_box {width:32%; height:100%; float:left; }
.info_box {width:36%; height:100%; float:left; }

.section_title {font-size:2em; color:#333; font-weight:600; padding:20px; text-align:left;}
.section_title::first-letter {color:#3367D6;}

ul.prod {width:100%; }
ul.prod > li {width:25%;  float:left; display:block; }
ul.prod > li > a {width:100%;display:block; height:100%;text-align:center;}
ul.prod > li > a > img {height:auto; width:100%;}
ul.prod .pro_txt{position:absolute; float:left; width:100%; height:100%;  color:#333; margin-top:-100%;  line-height:100%; text-align:center; font-size:20px; display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden !important; text-overflow:ellipsis;}
ul.prod > li:hover  img{ opacity:0.5; transition:.3s}
ul.prod > li:hover .pro_txt {color:#333; height:100%;transition:.3s; }

.info_box .co_cont {padding:0 20px 20px 20px; height:200px; 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:14px; line-height:18px; color:#565656 }
.info_box .co_cont b { font-size: 16px; }

.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 > ul {padding:0 20px 20px 20px;}
.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%; background:#f6f6f7; margin:20px 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;}


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

.foot {background:#111; height:auto; min-height:100px;}
.foot_menu {width:100%;height:36px; background:#333; text-align:center;}
.foot_menu ul {width:100%; max-width:1200px;position:relative; margin:0 auto;}
.foot_menu ul li {width:16.6%; line-height:36px; float:left; display:block; text-align:center;}
.foot_menu ul li a{color:#999; display:block; font-size:1em;}
.foot_menu ul li a:hover {color:#FF7F27; transition:.3s;}
.copyright {text-align:center; color:#ccc; font-size:1em; padding:20px 0; line-height:1.2em}

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

/* privacy */
.placeholdersjs { color: #ccc ; }
.privacy_pop {display:none;}
.privacy_btn {color:#ff6600; cursor:pointer; text-decoration: underline;}

/*----privacy_pop-----*/
.privacy_pop {
    display:none; position: fixed; 
    top: 0px; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,1,0.85);
    z-index: 99999;
    height:auto;
	min-height: 100%;
    width: 100%;
    overflow: hidden !important;
}
.agreementZ {
    border:4px solid #4158d1;
    color:#fff;
    width:80%;
    height: 80vh;
    position: absolute;
    left:10%;  top: 10vh;
	margin-left:-4px;/*-bordersize*/
/*	margin-top:-305px;  */
	overflow:hidden;
	overflow-y:scroll;
}

.agreeC { width:94%; margin:40px 3%;}
.agreeC  p strong { font-weight:400; font-size:20px; line-height:44px}
.agreeC p {font-size:16px; line-height:32px;}
.agreeC ul { padding: 10px 0}
.agreeC li {font-size:16px; list-style:none; line-height:32px}

.privacy_close {position:fixed;  right:10%; margin-top:-4px;  text-align:right; width:40px; height:40px;  line-height:40px; text-align:center; background:#4158d1; color:#fff; font-weight:500; font-size:30px;}

#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:40px; padding-bottom:55px; font-weight:600; color:#333; background:#f5f5f6; background-position:center center; background-size:100%; height:120px; text-align:center; line-height:120px;font-size:36px; margin-bottom:20px;}
#container_title:first-letter {color:#4158d1;}

.adm_bt {position:absolute; top:100px; right:10px;  padding:0 10px; line-height:28px; border:1px solid #ccc; background:#fff; border-radius:4px; }
.adm_bt.txt {right:130px}

/* responsive ----------------------------------*/
@media (max-width:1200px){
.info_box .co_cont {font-size:12px;  color:#565656 }
.info_box .co_cont b { font-size: 14px; }

}

@media (max-width:768px){

.pc{display:none;}
.mobile {display:block;}

#m_logo{ top:30px;left:10px; position:fixed;float:left;  z-index:99999}
#m_logo a {}
#gnb_menu_btn{left:inherit;right:10px;}
.hd_sch_wr {right:60px; z-index:300}
#hd_sch #sch_submit, #sch_bt { right:60px; background:#6778DA}
.hd_sch_wr.on #hd_sch input {width:200px; background:rgba(240,240,248,1); z-index:300 }

.yeogie { bottom:initial; position:relative;padding-top:40px;}

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

.cover_txt { font-size:3.2em}
.cover_name { font-size:1.6em}

.section2 {height:auto;}
.products_box {width:100%; height:auto;}
.co_box {width: 100%; height:auto;  display:block;  }
.news_box {width:100%; height:200px;}
.qna_box {width:100%; height:auto; display:block;}
.info_box{width:100%; height:auto;display:block;}

ul.prod {width:100%; height:auto;}
ul.prod > li {width:50%; height:auto; float:left; display:block;}
ul.prod > li > a {width:100%;display:block; height:auto;}
ul.prod > li > a > img {height:auto; width:100%;}

.co_info ul li span  {display:none}
}

@media (max-width:560px){

.hd_sch_wr {right:10px; top:70px }
#hd_sch #sch_submit, #sch_bt { right:60px;}
.hd_sch_wr.on #hd_sch input {width:200px; background:rgba(240,240,248,1);  }
#hd_sch #sch_submit {right:10px; top:70px; background:#FFBE0D; transition:.3s;}

}

@media (max-width:480px){
.cover_txt { font-size:2.4em}
.cover_name { font-size:1.4em}
ul.prod > li {width:100%;}
.foot_menu ul li {white-space:nowrap;}
}

@media (max-width:360px){
#m_logo img{width:170px}
}

@media (max-width:320px){
#m_logo img{width:158px}
body{min-width:320px}
}