@charset "utf-8";

/* 공통및 절대적인... */
.none {display:none;}
.blind {display: block;overflow: hidden;position: absolute;top: 0;left: 0;width: 0;height: 0;border: 0;background: none;font-size: 0;line-height: 0;}

/* 기본구조 */
#wrap {position:relative;}

#headWrap { margin:0 auto; width:100%;  top: 0px; left: 0px; position: fixed; background:url(/images/top_bg.png) repeat-x center top;  z-index:1000;}
#headWrap:after{display:block;visibility:hidden;clear:both;height:0;content:'.'}
.head {position:relative;margin:0 auto;width:1200px;}

/*.top_util_wrap { width:100%;  text-align:center;  border:0px solid red;}

.top_util {float:right; }
.top_util > li {float:left; padding:9.5px 12px; border-right:1px solid #ebebeb; font-size:11px; background:#fff;}
.top_util > li:first-child {border-left:1px solid #ebebeb;}
.top_util > li  > a {color:#666; font-weight:600;}
.top_util > li.util_lang {background:#f7f7f7;}*/

.head .logo {text-align:center; margin:30px 0px;}
.nav {float:left;position:relative;  margin:0 auto; background:#00aeef; }
.nav:after{display:block;visibility:hidden;clear:both;height:0;content:'.'}

.nav .dep1 {float:left; width:199px; border-right:1px solid #36bff2;  text-align:center;}
.nav .dep1:last-child {background:#6d6f71; border-right:1px solid #6d6f71;}
.nav .dep1>a {display:block;padding:15px 20px;font-size:17px;color:#fff;font-weight:700;}
.nav .dep1:hover>a, .nav .dep1.current>a {color:#fff; background-color: rgba(48,60,71,0.75); /*background-color:rgba(255,255,255,.3);*/}
.nav .dep1:hover .dep2 {display:block;}
.nav .dep2 {display:none;z-index:1000;position:absolute;top:50px;left:auto; /*padding:10px 0;*/ border:0px solid #00aeef; background-color: rgba(48,60,71,0.75);  /*background-color:rgba(255,255,255,.9);*/}
.nav .dep2 li {width:200px; border-bottom:0px solid #6d7b89;}
.nav .dep2 li a {display:block;font-size:13px;line-height:13px;color:#fff; font-weight:600; padding:15px 0px;}
.nav .dep2 li a:hover {color:#fff; background:#00aeef;}





/* 메인비주얼 */
#flickingList {position:relative;overflow:hidden; margin:0 auto;width:100%; text-align:center;width:100%; height:652px; top:0px; left:0px; z-index:10; padding-top:0px;}
#flickingList .cont {position:relative; overflow:hidden; top:0px; width:100%; vertical-align:top;text-align:center; }
#flickingList .layerWrap {position:relative; overflow:hidden; top:0px;width:12000px;  white-space:nowrap;  vertical-align:top;}
#flickingList .layerWrap:after{content:""; display:block; clear:both; }
#flickingList .layer {float:left; width:100%;  text-align:center;  }
#flickingList .bg1 {background:url("/images/main_visual1.jpg") no-repeat top center;height:652px;}
#flickingList .bg2 {background:url("/images/main_visual2.jpg") no-repeat top center;height:652px;}
#flickingList .bg3 {background:url("/images/main_visual3.jpg") no-repeat top center;height:652px;}

#flickingList .tab_wrap {position:relative; margin:0 auto;  top:515px; width:1200px; }
#flickingList .tab_wrap .tabWrap {position:absolute; top:0; left:35px;  z-index:200; }
#flickingList .tab_wrap .tabWrap li {display:inline; padding:0 2px;}
#flickingList .tab_wrap .tabWrap li a {display:inline-block; width:50px; height:10px; background:url("/images/btn_off.png") no-repeat;}
#flickingList .tab_wrap .tabWrap li a.current {background:url("/images/btn_on.png") no-repeat;}
/*#flickingList .tabWrap li a.btn_play {display:inline-block; width:20px; height:20px; background:url("/images/play.png") no-repeat;}
#flickingList .tabWrap li a.btn_stop {display:inline-block; width:20px; height:20px; background:url("/images/stop.png") no-repeat;}
#flickingList .tabWrap li a.current.btn_play {display:inline-block; width:20px; height:20px; background:url("/images/play_on.png") no-repeat;}
#flickingList .tabWrap li a.current.btn_stop  {display:inline-block; width:20px; height:20px; background:url("/images/stop_on.png") no-repeat;}*/

#flickingList .prevNext {position:absolute;top:200px; width:100%;height:75px;z-index:200;border:0px solid red;}
#flickingList button {overflow:visible; margin:0; padding:0; border:none; background:none; cursor:pointer;}
#flickingList button.prev {position:absolute; top:0px; left:20px; width:75px; height:75px; z-index:10;}
#flickingList button.next {position:absolute; top:0px; right:20px; width:75px; height:75px; z-index:10;}

#flickingList .v_wrap{position:relative; margin:0 auto; top:320px; left:35px; width:1200px; font-family: 'Montserrat', sans-serif;}
#flickingList .v_wrap2{position:relative; margin:0 auto; top:220px; left:35px; width:1200px;font-family: 'Montserrat', sans-serif;}
#flickingList .view1 {text-align:left; color:#0061af; font-size:44px; font-weight:900;letter-spacing:1px; text-transform: uppercase;}
#flickingList .view2 {text-align:left; color:#0061af; font-size:40px; font-weight:900;letter-spacing:1px; text-transform: none;line-height:110%;}
#flickingList .view3 {text-align:left; color:#0061af; font-size:40px; font-weight:900;letter-spacing:1px; text-transform: none;line-height:110%;}

.main_stxt {color:#242b3c; font-size:24px; font-weight:400; text-align:left;  line-height:120%; letter-spacing:-1px; text-transform: none; padding-top:20px;}

.mon_font {font-family: 'Montserrat', sans-serif;}


/*con1*/
h3 {color:#333; font-size:26px; line-height:1.5em; text-align:center;}

.contents1 {width:1200px; margin:0 auto; overflow:hidden; padding:55px 0;}

/*제품 리스트*/
.product_list {overflow:hidden; padding-top:60px;}
.product_list li {float:left; padding-left:70px; margin-bottom:50px; text-align:center;}
.product_list li:first-child {padding-left:0px;}
.product_list li p {font-size:18px; padding-top:20px;}
.product_list li p .tname {font-size:13px; color:#ccc; font-weight:600; }
.product_list li img {border:1px solid #f0f0f0;}

.product_list li .text-overlay {
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    height: 228px;
    position: absolute;
    text-decoration: none;
    width: 349px;
    z-index: 100;
    /* padding: 50px; */
    background: #222;
    background: rgba(48,60,71,0.75);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.product_list li:hover .text-overlay {
    opacity: 1;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.product_list li .text-overlay::before,
.product_list li .text-overlay::after {
    position: absolute;
    top: 40%;
    left: 45%;
	background:url(/images/plus.png) no-repeat;
    content: '';
    opacity: 1;
	color:#fff;
	font-size:24px;
	width:50px;
    height:50px;
    border-radius:50%;
	border:0px solid #fff;
    text-align:center;
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;
}
/*.product_list li .text-overlay::before {
    border-top: 1px solid rgba(255,255,255,0.22);
    border-bottom: 1px solid rgba(255,255,255,0.22);
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}
.product_list li .text-overlay::after {
    border-right: 1px solid rgba(255,255,255,0.22);
    border-left: 1px solid rgba(255,255,255,0.22);
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}
.product_list li:hover .text-overlay::before,
.product_list li:hover .text-overlay::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}*/

/*//con1*/




/*foot sitemap*/
.navi_wrap {background:#303c47;  border-bottom:1px solid #313131;}
.navi {overflow:hidden;margin:0 auto; width:1200px;}
.navi > li {
	float:left;
	width:19.8%;
	min-height:170px;
	/*background:#282828;*/
	border-right:0px solid #555;
	padding-top:20px;
}
.navi > li:first-child {border-left:0px solid #555;}


.navi > li > dl a:hover {text-decoration:underline;}
.navi > li > dl > dt {margin-bottom:10px; border-bottom:0px solid #555; text-transform: uppercase;}
.navi > li > dl > dt > a {
	display:block;
	font-size:16px;
	line-height:24px;
	color:#ccc;
	font-weight:bold;
	padding:20px 0px 10px 35px;
}
.navi > li > dl > dd > a {
	display:block;
	font-size:14px;
	line-height:20px;
	color:#ccc;
	padding:0 10px 5px 35px;
}

/*copyright*/
#footer_wrap {background:#303c47;}
#footer {overflow:hidden;margin:0 auto; padding:50px 0; width:1200px;}
#footer .f_logo {float:left; padding-right:30px; padding-top:0px;}
#footer .foot_info {float:left;color:#818181; line-height:24px; font-size:14px;}
#footer .foot_info .copy {}
#footer .gobiz {float:right; padding-top:0px;}



/*top*/
#MOVE_TOP_BTN a {
    position: fixed;
    right: 4%;
    bottom: 165px;
    z-index: 2000;
	padding:10px 10px;
	width:35px; height:30px;
	color:#fff;
	font-size:12px;
	text-align:center;
	border:1px solid #fff;
}
#MOVE_TOP_BTN a:hover {
    background-color:rgba(255,255,255,.1);
}


/*********** sub layout *************/
.sub_visual1 {min-width:1200px;height:400px;text-align:center;background:#f4f4f4 url(/images/sub_visual1.jpg) no-repeat center;}
.sub_visual2 {min-width:1200px;height:400px;text-align:center;background:#f4f4f4 url(/images/sub_visual2.jpg) no-repeat center;}
.sub_visual3 {min-width:1200px;height:400px;text-align:center;background:#f4f4f4 url(/images/sub_visual3.jpg) no-repeat center;}
.sub_visual4 {min-width:1200px;height:400px;text-align:center;background:#f4f4f4 url(/images/sub_visual4.jpg) no-repeat center;}
.sub_visual5 {min-width:1200px;height:400px;text-align:center;background:#f4f4f4 url(/images/sub_visual5.jpg) no-repeat center;}
.sub_txt {width:1200px; margin:0 auto; color:#fff; font-size:38px; font-weight:700; font-family: 'Montserrat', sans-serif; text-align:center; padding-top:250px; letter-spacing:3px; text-transform: uppercase;}


/*sub menu*/
.snb {position:relative; overflow:hidden; width:100%; border-bottom:1px solid #dfdfdf;}
.snb ul {width:1200px; margin:0 auto;}
.snb ul li {float:left; border-right:1px solid #dfdfdf;}
.snb ul li:first-child {border-left:1px solid #dfdfdf; padding:13px 18px;}
.snb ul li a {display:block; text-align:center; font-size:18px; color:#221e1f;  padding:15px 0; }
.snb ul li.current a {color:#fff; background:#00aeef;}
.snb ul li a:hover {color:#fff; background:#00aeef;}

.menu1 li a {width:1128px;}
.menu2 li a {width:563px;}
.menu3 li a {width:375px;}

/*title*/
.titleArea {position:relative; overflow:hidden; width:100%; background:#f1f2f5; border-bottom:1px solid #dfdfdf; height:135px;}
.titleArea h3 {width:1200px; margin:0 auto; text-align:center; font-size:30px; color:#222; font-weight:700; line-height:30px; background:url(/images/title_line.jpg) no-repeat center 80px; padding:35px 0;}


/* sub contents */
.container {margin:0 auto; width:1200px; min-height:300px; padding:60px 0 100px 0px;}
.container:after {display:block;visibility:hidden;clear:both;height:0;content:'.'} 

.con_warp {overflow:hidden;  font-size:16px; color:#333; line-height:150%;}


/* 탭 */
div.tabs-area {
	position:relative;
	z-index:2;
	width:630px;
	margin:0 auto;
	overflow:hidden;
	border:0px solid red;
}

/*div.tabs-line {
	position:relative;
	z-index:1;
	width:100%;
	height:1px;
	top:-1px;
	border-top:1px solid #D3D9E6;
}*/


ul.tabs {
	padding:0px;margin:0px;
	z-index:2;
}

ul.tabs li {
	list-style:none;
	display:inline;
	height:50px;
	border:0px solid red;
}

ul.tabs li a {
    width:200px;
	padding:15px 60px;
	border:1px solid #dcdcdc;
	text-align:center; 
	line-height:30px;
    color:#222; 
    background:#fff;
    font-weight:bold;
	font-size:16px;
}

ul.tabs li a:hover {   
    background:#6d6f71;
	color:#fff;
}

ul.tabs li a.active {   
    background:#6d6f71;
    color:#fff;   
    border:1px solid #dcdcdc;   
	font-weight:bold;
	line-height:70px;
	font-size:16px;
}

div.content {
	padding-top:55px;
}
div.show		{ display:block;}
div.hide		{ display:none; }

/*table*/
.t_norm {margin-top:0px;}
.t_norm table{border-top:1px solid #212121; text-align:center;}
.t_norm table th{background:#f1f1f1; font-weight:bold; font-size:16px; color:#353535;}
.t_norm table th:first-child {border-left:0px solid #ddd;}
.t_norm table th, .t_norm table td{border-left:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px 30px; vertical-align:middle;}
.t_norm table td:first-child {border-left:0px solid #ddd;}

.table_style {padding-top:20px;}
.table_style table{width:95%; margin:0 auto; border-top:1px solid #212121; background:#fff;}
.table_style table th{background:#f1f1f1; font-weight:bold; color:#353535; text-align:center; border-bottom:1px solid #ddd;}
.table_style table th:first-child {border-left:0px solid #ddd;}
.table_style table td{border-left:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px 20px; vertical-align:middle; text-align:left;}
.table_style table td:first-child {border-left:0px solid #ddd;}


/*products*/
.img_box {border:1px solid #dfdfdf; text-align:center;}
.img_pd {padding:20px 0; text-align:center;}
.pro_title {font-family: 'Montserrat', sans-serif; font-weight:700; color:#222; font-size:24px;}
.half {overflow:hidden;}
.half li {float:left;}
.w35 {width:35%;}
.w65 {width:65%;}
.list_title {font-weight:700; font-size:18px; color:#222;}
.list_txt {margin-top:20px; padding:20px; background:#f1f1f1;}
.list_txt li { list-style: disc; margin-left:20px;}

.num_list {overflow:hidden;}
.num_list li {position:relative; padding:5px 0 20px 40px;}
.num_list li .num {position:absolute; top:5px; left:0; border-radius:50%; background:#00aeef; color:#fff; text-align:center;  padding:3px 10px;}

.portable_img {float:left; padding-top:50px;}
.portable_img img {border:1px solid #dfdfdf;}
.num_list_f {overflow:hidden; float:right; width:50%; padding-top:50px;}
.num_list_f li { position:relative; padding:5px 0 20px 40px;}
.num_list_f li .num {position:absolute; top:5px; left:0; border-radius:50%; background:#00aeef; color:#fff; text-align:center;  padding:3px 10px;}


/*ceo message*/
.ceo_txt {font-family: 'Montserrat', sans-serif; text-align:center; color:#333; font-size:30px; line-height:1.5em; border:0px solid red; background:url(/images/quot_left.jpg) no-repeat 110px top, url(/images/quot_right.jpg) no-repeat 1000px bottom; padding-bottom:30px;}
.ceo_img {height:400px; background:url(/images/message_img.jpg) no-repeat center bottom;}



/*history*/
.history {position:relative; width:100%; overflow:hidden; margin-top:50px; background:url(/images/util_bar.png) repeat-y center top;}
.history .left {float:left; width:50%; text-align:right;}
.history .right {float:left; width:50%; text-align:left; padding-top:110px;}

.his {padding-bottom:100px; }
.his dt {font-size:40px;font-family: 'Montserrat', sans-serif;  font-weight:700; color:#6d6f71;  line-height:130%;}
.his dd .month {font-size:18px; font-weight:600; padding:20px 0 10px 0;}

.his_img {padding:20px 0 20px 30px;}

.history .his_won2018 {position:absolute; left:49.6%; top:20px; border-radius:50%; width:10px; height:10px; background:#00aeef;}
.history .his_won2017 {position:absolute; left:49.6%; top:130px; border-radius:50%; width:10px; height:10px; background:#6d6f71;}
.history .his_won2016 {position:absolute; left:49.6%; top:330px; border-radius:50%; width:10px; height:10px; background:#6d6f71;}
.history .his_won2015 {position:absolute; left:49.6%; top:440px; border-radius:50%; width:10px; height:10px; background:#6d6f71;}



/*overview*/
.overview_warp {overflow:hidden; background:url(/images/overview_bg.jpg) no-repeat center top; border:0px solid red;}
.overview_tit { margin:100px auto 50px; text-align:center; color:#fff; font-size:18px;font-family: 'Montserrat', sans-serif; line-height:130%;}
.overview_txt { margin:0 auto; width:80%; background-color:rgba(255,255,255,.7); }




/*찾아오시는길*/
.contact_map {position:relative; width:100%; height:750px; left:0; top:0;}
.map_box {position:absolute; left:90px; top:400px; width:430px; height:300px; background:#00aeef; box-shadow: 5px 5px 5px rgba(0,0,0,.2);}
.map_txt {color:#fff; line-height:160%; padding:40px 0 0 40px;}
.map_add   {position:absolute; left:577px; top:550px; font-size:18px; line-height:180%;}
.map_btn { margin-top:20px;}
.map_btn a {background:#6d6f71; color:#fff; font-size: 14px; padding:10px 20px;}
.map_line {position:absolute; left:370px; top:530px; width:300px; height:5px;  background: linear-gradient(90deg, #fff 50%, #00aeef 50%);}



/* certification */
.cert_wrap{}
.cert_wrap ul:after{content:'';display:block; clear:both;}
.cert_wrap ul{}
.cert_wrap li{float:left; margin:0px 11px; padding-bottom:40px;}
.cert_wrap li dt{border:1px solid #ddd; margin-bottom:20px;}
.cert_wrap li dt img{width:215px; }
.cert_wrap li dd{width:215px; text-align:center; min-height:50px;  font-size:14px;}

/* 인증서-레이어팝업 */
.pop-layer {display:none; position: fixed; top: 150px; left:40%; height:auto;  background-color:#fff; border: 3px solid #DDD; z-index: 10;}	
.pop-layer .pop-container {padding: 10px 15px;}
.pop-layer .pop-container .pop-conts{position:relative;}
.pop-layer p.ctxt {color: #666; line-height: 25px;}
.pop-layer p.ctxt img{width:530px;}
.pop-layer .btn-r {margin:10px 0 20px; border-top: 1px solid #DDD; position:absolute; right:0; top:-10px;}
a.cbtn {display:inline-block; height:30px; padding:0 15px 0; background-color:#666; font-size:13px; color:#fff; line-height:30px;}	
a.cbtn:hover {background-color:#666; color:#fff;}





/*Contact*/
.contactus {background:url(/images/contact_map.jpg) no-repeat center top; padding-top:350px;}
.contactus ul {border:1px solid #dfdfdf; background-color:rgba(255,255,255,.5);}
.contactus ul li {color:#666; background:url(/images/list_icon.jpg) no-repeat 10px 18px; padding:10px 0 10px 25px; border-bottom:1px solid #dfdfdf;}
.contactus ul li:last-child {border-bottom:0px solid #dfdfdf;}
.contactus ul li span.contactus_tit {color:#222; display:inline-block; width:80px; font-weight:700;}



/*준비중 페이지*/
.ing {text-align:center; padding:80px 0;}
.ing_txt {padding-top:30px; font-size:30px;}




/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ sitemap 사이트맵  ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.sitemap {width:100%;}
.map_dl {
	float:left;
	width:31%;
	margin:0 1%;
	padding-bottom:15px;
	margin-bottom:25px;
	background-color:#f5f5f5;
}
.map_dl.margin_right_none {margin-right:0;}
.map_dl > dt {
	width:80%;
	padding:30px 10% 10px 10%;
	height:45px;
	font-size:20px;
	font-weight:600;
}
.map_dl > dd {
	width:80%;
	padding:3px 10%;
}
.map_dl > dd > a {
	display:block;
	font-size:13px;
	line-height:15px;
	padding:5px 10px;
	background-color:#ffffff;
	border:1px solid #bcbcbc;
}
.map_dl > dd > a:hover {
	color:#ffffff;
	background-color:#1f2b5b;
}