@charset "utf-8";


/* reset */
* { padding: 0px; margin: 0px;}
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, table {margin: 0; padding: 0; list-style: none;}
header, main, footer, section, article, aside, nav {display: block;}
a {color: inherit; text-decoration: none;}
a img {border: none;}
ul, dl,dt,dd {list-style: none;}
body,input,textarea,select,button,table{ font-family: "Noto Sans KR", 'Nanum Gothic', '돋움', sans-serif;  font-size: 14px; font-weight: 300; line-height: 26px; color: #333;} /*기본폰트설정*/

/*body { width:1280px}*/


/* 탑버튼 */
.return-top { right:20px; bottom:20px; position:fixed; z-index:90; width:50px; line-height:50px; background:#333; font-size:14px; font-weight:500; text-align:center; color:#FFF !important; border-radius:30px }
.return-top:hover { background:#666; transition:all 1s}


.inner { position:relative; width:1200px; margin:0 auto;}
.inner:after { display:block; content:""; clear:both}


/* 헤더 */
#header { position:relative; top:0; left:0; right:0; background:#fff; z-index:1000; width:100%; min-width:1200px; height:100px;}
#header .logo { position:absolute; top:25px; left:10px; display:block; width:270px}
/*#header .gnb { line-height:45px; display:inline-block; width:720px}*/
#header .gnb_bord { position:absolute; top:16px; left:218px;line-height:45px; display:inline-block}
#header .topmenu { font-size:23px; font-weight:400; position:absolute; top:30px; left:500px; width:800px;}
#header .topmenu ul{}
#header .topmenu ul li{ float:left; position:relative;}
#header .topmenu ul li a{ color:#333; display:block; line-height:45px; padding:0px 40px;font-size:18px; font-weight:400;}
#header .topmenu li a:hover, .topmenu ul li:hover a{ color:#4606b9; }
#header .topmenu li ul{ display:none; background: rgb(109,109,109); height:auto; position:absolute; width:180px; z-index:200; left:-16px; top:45px}
#header .topmenu li:hover ul li{ display:block; }
#header .topmenu li li { background: rgb(109,109,109); display:block; float:none; margin:0px; padding:0px; width:180px; border-bottom:solid 1px #999; }
#header .topmenu li li:last-child { border:none}
#header .topmenu li:hover li a{ background:none; }
#header .topmenu li ul a{ display:block; height:40px; line-height:40px; font-size:13px; font-weight:400; padding:0 10px; text-align:center; color:#fff !important; }
#header .topmenu li ul a:hover{ background:#4606b9; transition: all 0.15s ease-in;}
#header .topmenu ul li > ul li > ul.sub_topmenu{display:block;position:absolute;top:0 !important; left:180px !important;}
#header .topmenu ul li > ul li > ul.sub_topmenu li{background:#1c4785 !important; border-bottom:none !important}

/*솔루션, 설치사례 gnb*/
#header .topmenu .dropdown-menu{ display:none;position:absolute; top:45px; float:left; z-index:1000; width:856px; left:-330px; background:rgb(109,109,109); height:300px}
#header .topmenu .dropdown-menu .more_menu{ display:inline-block; }
#header .topmenu .dropdown-menu .more_menu a.top_bg { background:#1ba8bf; border-radius:30px; text-align:center; color:#fff; font-size:15px; margin:10px 0 0 10px; font-weight:bold}
#header .topmenu .dropdown-menu .more_menu ul { display:block; background:none; top:59px; left:19px}
#header .topmenu .dropdown-menu .more_menu.Custom ul {left:229px}
#header .topmenu .dropdown-menu .more_menu.help ul {left:440px}
#header .topmenu .dropdown-menu .more_menu.call ul {left:658px}
#header .topmenu .dropdown-menu .more_menu ul li{ border-bottom:none}

/*설치사례*/
#header .topmenu .dropdown-menu .more_menu.emergency2 ul {left:11px}
#header .topmenu .dropdown-menu .more_menu.Custom2 ul {left:217px}
#header .topmenu .dropdown-menu .more_menu.help2 ul {left:425px}
#header .topmenu .dropdown-menu .more_menu.call2 ul {left:640px}


/* 메인비주얼*/
#mainVisual_wrap {width:100%; position:relative; background:url('')top center repeat-x; height:600px; margin:0 auto; }
.main_visual {clear:both;position:relative;top:0;width:100%;margin:0 auto;padding:0;height:600px;z-index:1;min-width:1200px;}
.main_visual .txt { position:absolute; z-index:2; left:20%; top:28%; animation: ani1 1s 1s  1 forwards; opacity: 0;}
@keyframes ani1 {
	0% {
		opacity:0;
		
	}
	100% {
		opacity:1;
		
	}
}
.main_visual .txt h3 { font-size:50px; font-weight:500; color:#fff; line-height:75px}
.main_visual .txt p { font-size:30px; font-weight:300; color:#fff; line-height:42px}


#slideshow {clear:both; width:100%; height:600px;position:absolute;top:0px;z-index:1;left:0;}
#slides {position:relative; width:100%; height:100%;margin:auto; text-align:center}
#slides li {width:100%; height:600px;}

.sliderbutton {position:absolute;left:0;top:200px;z-index:9999999999;cursor:pointer;}
.sliderbutton1 {position:absolute;right:0;top:200px;z-index:9999999999999999999;cursor:pointer;}

#slides li.main1 {background:url('../images/main/main_visual_bg01.png') no-repeat top center; }
#slides li.main2 {background:url('../images/main/main_visual_bg02.png') no-repeat top center; }
#slides li.main3 {background:url('../images/main/main_visual_bg03.png') no-repeat top center; }
/*#slides li.main4 {background:url('../images/main/main_visual_bg05.png') no-repeat top center; }
#slides li.main5 {background:url('../images/main/main_visual_bg05.png') no-repeat top center; }*/
.pagination {position:relative; width:110px; height:20px; margin:0 auto;z-index:1000;padding-top:550px; text-align:center}
.pagination li {float:left; cursor:pointer; width:15px;height:15px;font-size:0; display:block; background:rgba(255,255,255,0.9); margin:0 7px 0 0; border-radius:15px}
.pagination li:last-child { margin:0}
.pagination li:hover { display:block; background:#ddd;}
li.current {display:block; background:#086dae;}



/* 메인- 콘텐츠01 */
.main_con01 { width:100%; margin:80px 0 60px 0;}
.main_con01 h2{ margin-bottom:30px; background:#f34506; color:#fff; font-size:35px; padding:20px}
<!--.main_con01 h2 span.line { border:1px solid #ccc; display:block; width:80px; margin:20px auto}-->
.main_con01 h2 p{font-size:18px; display:inline-block; border-bottom:1px solid #fff}
.main_con01 .pro{ width:100%; height:750px;}
.main_con01 ul {}
.main_con01 ul li {margin-bottom:10px; float:left;  text-align:center; width:398px; height:380px; border:1px solid #ccc; border-right:none }
.main_con01 ul li:nth-child(3) {border-right:1px solid #ccc}
.main_con01 ul li:nth-child(6) {border-right:1px solid #ccc}
.main_con01 ul li:nth-child(9) {border-right:1px solid #ccc}
.main_con01 ul li:nth-child(12) {border-right:1px solid #ccc}
.main_con01 ul li:hover {border:1px solid #4606b9; }
.main_con01 ul li p{font-size:23px; font-weight:bold; padding:20px 0; }
.main_con01 ul li p.last{line-height:3}
.main_con01 ul li p > span{ display:block; font-size:13px; font-weight:normal}
.main_con01 ul li h3{ font-size:20px; padding:20px; word-break:keep-all; line-height:2}
.main_con01 ul li.bn01, .main_con01 ul li.bn03 { margin-top:30px}
.main_con01 ul li.bn01 { background:url(../images/main/main_bn01.png) no-repeat;}
.main_con01 ul li.bn02 { background:url(../images/main/main_bn02.png) no-repeat;}
.main_con01 ul li.bn03 { background:url(../images/main/main_bn03.png) no-repeat;}
.main_con01 ul li.bn04 { background:url(../images/main/main_bn04.png) no-repeat;}
.main_con01 ul li .text { padding-top:240px}
.main_con01 ul li .text p.tit { font-size:25px; font-weight:600; color:#fff }
.main_con01 ul li .text p.txt { font-size:12px; font-weight:500; color:#fff; line-height:40px }
.main_con01 ul li:hover .text {padding-top:230px; transition:all .4s}

/* 메인- 콘텐츠02 */
.main_con02 {width:100%; min-width:1200px; text-align:center}
.main_con02 h2 { font-size:34px; font-weight:600; line-height:45px; display:inline-block}
.main_con02 p.title_area { font-size:18px; font-weight:400; line-height:32px; color:#424242;display:inline-block}
.main_con02 .cus h5{font-size:25px} 
.main_con02 .cus ul{margin-top:30px;}
.main_con02 .cus ul li {display:inline-block; margin:0 10px 30px;  width:210px; height:300px; overflow:hidden}
.main_con02 .cus ul li .pro_img{width:200px; height:150px; margin:0 auto}
.main_con02 .cus ul li p {font-size:20px; font-weight:bold; margin-top:20px; color:#444}
.main_con02 .cus ul li span{ font-weight:400; color:#4a4a4a}
.main_con02 .cus ul li a{display:block; width:100%; height:100%;}
.main_con02 .cus ul li a img{ margin:25px}
.main_con02 .cus ul li a:hover p { color:#4606b9}
.main_con02 .cus ul li a:hover .pro_img{border:1px solid #4606b9}

/* 메인- 콘텐츠03 */
.main_con03 {width:100%; min-width:1200px;background:url(/images/main/main_bn_bg.jpg) no-repeat; padding:30px 0; text-align:center; height:300px}
.main_con03 > .inner{ width:1000px; text-align:left}
.main_con03 .banner_txt{ margin-top:20px}
.main_con03 .banner_txt p{color:#fff; font-size:18px; line-height:1.5; font-weight:bold}
.main_con03 .banner_txt p.txt_color{color:#c2e8ff}
.main_con03 .banner_txt p.shadow{ font-size:40px; text-shadow:2px 3px 4px #444}
.main_con03 .main_btn{margin-top:30px;}
.main_con03 .main_btn a{ color:#fff; font-size:18px; padding:10px 40px; border:1px solid #fff}
.main_con03 .main_btn a img{ margin-left:10px}
.main_con03 .main_btn a:hover{ background:#005cbb; box-sizing:border-box}



/*right-bar*/
.quick-menu{ position:fixed; z-index:99999;width:80px; height:335px; top:15%; right:50px;}


/* 푸터 */
#footer { position:relative; width:100%; height:155px; background:#f5f5f5}
.foot_nav { background-color:#eeeeee; line-height:40px; min-width:1200px}
.foot_nav ul { text-align:center}
.foot_nav ul li { display:inline-block;}
.foot_nav ul li:after { display:inline-block; content:"｜"; padding:0 20px; font-size:10px }
.foot_nav ul li:last-child:after { display:none}
.foot_nav ul li a { font-size:14px}

.copyright { height:115px;}
.copyright h1.foot_logo{ float:left}
.copyright h1.foot_logo img { float:left; padding:45px 60px 0 20px;}
.copyright .txt { padding-top:20px; float:right; }
.copyright .txt p { font-size:13px}
.copyright .txt p span { padding-left:20px; color:#154286}






/* 서브비주얼 */
.sub_visual { position:relative; width:100%; min-width:1200px; height:350px;}
.sub_visual .txt { padding-top:80px; margin:0 auto; text-align:center; text-shadow:2px 2px 2px rgba(0,0,0,0.5)}
.sub_visual .txt p { font-size:28px; font-weight:500; line-height:40px; color:#fff;}
.sv_bg01 { background:url(../images/sub/sub_visual01.png) no-repeat center}



/* 서브페이지 - 레이아웃 */
.container { position:relative; width:100%; margin-bottom:80px;}
.container.proarea{height:1100px}
.board_inner{ height:auto}
.container .left_area { float:left; left:0; top:20px; width:220px; overflow:hidden;box-sizing:border-box; border:1px solid #ccc }
.container .left_area .title { display:block; width:220px; height:80px; padding-top:20px; background:#f34506}
.container .left_area .title h2 { font-size:30px; font-weight:500; line-height:40px; color:#fff; text-align:center}
.container .left_area .title p  { font-size:15px; font-weight:400; padding-top:30px; color:#666 }
.container .left_area .left_menu {}
.container .left_area .left_menu li a { display:block; font-size:16px; font-weight:400; line-height:40px; border-bottom:solid 1px #ddd; padding-left:15px}
.container .left_area .left_menu li a:hover { padding-left:18px; /*background-color:#f6f6f6;*/ background:url(../images/sub/left_menu_arr.png) no-repeat 92% center; color:#ec1d23; transition:color .4s }
.container .left_area .left_menu li.active a {color:#4606b9}
.container .left_area .left_menu li.active ul li a {color:#333;}
.container .left_area .left_menu li ul li a {font-size:13px; padding-left:30px;}
.container .left_area .left_menu li ul li a:before{content:''; margin-right:10px; margin-bottom:3px; display:inline-block; width:2px; height:2px; border-radius:50%; background:#333}
.container .left_area .left_menu li ul li a:hover { padding-left:30px; color:#ec1d23;}
.container .left_area .left_menu .submenu{ display:none;background:#f5f5f5}
.container .left_area .left_menu .submenu li a {font-size:13px;border-bottom:none}
.container .left_area .left_menu .submenu li a:hover {background:#333; color:#fff;}
.container .left_area .left_menu li.active .submenu li a{ color:#333;background:#f5f5f5}
.container .left_area .left_menu li.active .submenu li a:hover {background:#333 !important; color:#fff }
.container .left_area .left_menu .left_custmer{padding:10px; font-size:20px; font-weight:400;}
.container .left_area .left_menu .left_custmer > p{ text-align:center; padding-bottom:10px}
.container .right_area { float:right; right:0; top:20px; width:900px; margin-top:30px}
.container .right_area .pro09_subgnb ul{ border:1px solid #ccc; margin-bottom:20px}
.container .right_area .pro09_subgnb li { display:inline-block;padding:10px 21px; border-right:1px solid #ccc}
.container .right_area .pro09_subgnb li:last-child {border-right:0}
.container .right_area .pro09_subgnb li a { display:block; font-size:16px; font-weight:400; line-height:40px;}
.container .right_area .pro09_subgnb li a:hover {color:#ec1d23;}
.container .right_area .pro09_subgnb li.active a {color:#4606b9}


.container .right_area > h1 { margin-bottom:40px;padding:20px 0}
.container .right_area > h1:before{ margin-right:10px; width:10px; height:20px; content:''; display:inline-block; background:#f34506}
.container .right_area > h2 {font-size:24px; font-weight:400; line-height:50px; margin-bottom:20px}
.container .right_area > h2 span { padding-left:10px; font-size:20px; color:#154286}
/*.container .right_area > h2:before { display:inline-block; content:""; width:15px; height:15px; background-color:#ff7f00; margin-right:10px; border-radius:50%;}*/
.container .right_area > h2:after{ display:block; content:''; width:150px; height:5px; background:#4606b9;}
.container .right_area .pro_title{ border-bottom:2px solid #ff7f00}
.container .right_area .pro_title .title_img{ display:inline-block}
.container .right_area .pro_title > h3{ display:inline-block; font-size:27px; font-weight:bold; padding-bottom:10px}
.container .right_area .pro_imgarea{border:1px solid #ccc; margin-top:30px; text-align:center}
.container .right_area .pro_tablearea{ margin-top:30px}
.container .right_area .pro_tablearea .table_title > img{ width:10px; height:10px}
.container .right_area .pro_tablearea .table_title > p{ display:inline-block; font-weight:bold; font-size:20px}
.container .right_area .pro_tablearea .table_title > span{ display:inline-block; float:right}
.container .right_area .pro_tablearea .table_area{}
.container .right_area .pro_tablearea .table_area table{ border:1px solid #ccc; width:100%; border-collapse:collapse}
.container .right_area .pro_tablearea .table_area table tr{border:1px solid #ccc; text-align:center}
.container .right_area .pro_tablearea .table_area table th{border:1px solid #ccc; background:#f5f5f5}
.container .right_area .pro_tablearea .table_area table td{border:1px solid #ccc}
.container .right_area .pro_tablearea .table_area table td.bg_col{background:aliceblue}
.container .right_area .pro_tablearea .bottom_img{margin-top:30px}
.container .right_area .blank{ height:30px}


.hello { font-size:30px; font-weight:500; line-height:45px; margin-bottom:30px}
.hello  .center{ text-align:center}
.greeting { background:url(../images/sub/sub1_img01.png) no-repeat right 0}
.greeting p { font-size:16px; line-height:28px; padding-bottom:20px; width:500px; word-break:keep-all}
.greeting p span { font-weight:400; font-size:18px}

.map {width:100%;}
.map_info{ width:100%; border:1px solid #f5f5f5; margin-bottom:30px; }
.map_info > p{ text-align:center; font-weight:bold; font-size:23px; background:#f5f5f5; padding:10px}
.map_info ul{ margin:20px;}
.map_info ul li { font-size:16px; line-height:40px; display:block; margin:0 20px !important; border:none !important; float:none !important; width:auto !important; height:auto !important; }



.pro_list { }
.pro_list ul li { display:inline-block; margin: 0 16px 40px}
.pro_list ul li .img_area { border:solid 1px #ddd; overflow:hidden; box-sizing:border-box; text-align:center}
.pro_list ul li .img_area img { width:260px; height:197px}
.pro_list ul li p { font-size:16px; font-weight:400; line-height:30px; text-align:center}
.pro_list ul li:hover p { color:#ec1d23}
.pro_list ul li:hover .img_area img { transform:scale(1.1); transition:all 0.6s}



.pro_info { padding-bottom:60px; border-bottom: dotted 2px #ddd}
.pro_img {}
.pro_txt { float:right; right:0; width:400px; margin-top:20px; padding:20px 30px; background:#f6f6f6}
.pro_txt h3 { font-size:26px; font-weight:500; line-height:50px; border-bottom:solid 1px #ddd}
.pro_txt p { font-size:16px; line-height:26px; margin-bottom:50px}
.pro_txt .down_btn a { display:block; width:180px; line-height:40px; text-align:center; background:#d2080e; color:#fff; font-weight:400}
.pro_txt .down_btn a:hover {background:#333; transition:all .4s ease-in-out }
.pro_txt .down_btn a img { padding-right:7px}

.pro_detail { padding-top:50px; text-align:center }
.pro_detail .detail_img { margin-bottom:100px}
.pro_detail .back_btn { text-align:center}
.pro_detail .back_btn a { font-size:14px; font-weight:400; color:#fff; background:#333; display:block; width:100px; line-height:35px;}
.pro_detail .back_btn a:hover { opacity:0.9}


.sub_tab { margin-bottom:60px; text-align:center}
.sub_tab ul li { display:inline-block; width:19%; line-height:40px; text-align:center; border:solid 1px #ddd; cursor:pointer}
.sub_tab ul li a { font-size:16px; font-weight:400;}
.sub_tab ul li.active { background:#154286; color:#fff}
.sub_tab ul li:hover {background:#154286; color:#fff}


/*제품*/
/*.right_area .content{ margin-left:45px}*/
.right_area .content{ margin-bottom:30px}
.right_area .content .pro_img{margin-bottom:30px; text-align:center}
/*.right_area .content .pro_img img{ width:100%}*/
.right_area .content .pro_img img.big_img{ width:100%}
.right_area .content .pro_table{ margin-bottom:100px}
.right_area .content .pro_table > span{ float:right}
.right_area .content .pro_table table{ width:100%; border:1px solid gray; border-collapse:collapse; text-align:center}
.right_area .content .pro_table table th{border:1px solid gray;}
.right_area .content .pro_table table th a.down{ color:#00C}
.right_area .content .pro_table table tr{border:1px solid gray;}
.right_area .content .pro_table table td{border:1px solid gray;}
.right_area .content .pro_table table td > a{ color:#fff; background:skyblue;padding:0 10px}
.right_area .content .pro_table table td > a:hover{ background:red}
.right_area .content .pro_table table.ab600 td.table_color{background:#75b8fc}
.right_area .content .pro_table table.ab600 th.colortxt_04:before{background:#75b8fc; display:inline-block; width:50px; height:10px; content:""; margin:10px 10px 0 0}
.right_area .content .pro_table table.ab700 td.table_color{background:#caaef7}
.right_area .content .pro_table table.ab700 th.colortxt_04_02:before{background:#caaef7; display:inline-block; width:50px; height:10px; content:""; margin:10px 10px 0 0}
.right_area .content ul.pro_content {width:100%}
.right_area .content ul.pro_content li{float:left; width:250px; height:250px; border:1px solid #ccc; margin:23px}
.right_area .content ul.pro_content li .pro_imgbox{ height:200px}
.right_area .content ul.pro_content li .title{ text-align:center; line-height:3.7; background:#f4f4f4; height:50px;}
.right_area .content.pro_area{ height:1500px}
.right_area .content .pro_cont_txt{ background:#f5f5f5; padding:30px; font-size:18px; margin-bottom:30px}
.right_area .content ul li{ font-size:18px}
.right_area .content ul.half { text-align:center}
.right_area .content ul.half li{ width:40%; text-align:center; display:inline-block; margin-bottom:10px}
.right_area .content ul.half li p{ margin:10px 0 10px 0}


/*폼메일*/
.sub_con { width:100%; text-align:center; }
.sub_con .sub_con_wrap { position:relative; margin:0 auto}
.sub_con .sub_con_wrap:after {content: ''; display: block; clear: both;}

.sub_con .sub_board_wrap { position:relative; width:1200px; margin:0 auto; text-align:left}
.sub_con .sub_board_wrap:after {content: ''; display: block; clear: both;}

.sub_con .sub_con_wrap .formmail {}
.sub_con .sub_con_wrap .formmail ul { box-sizing:border-box; overflow:hidden}
.sub_con .sub_con_wrap .formmail ul li {margin-bottom:10px;}
.sub_con .sub_con_wrap .formmail input {border:solid 1px #ededed;width:100%;padding:10px 20px;background:#f0f0f0;border-radius:4px;height:60px;}
.sub_con .sub_con_wrap .formmail textarea {border:solid 1px #ededed;width:100%;padding:20px;background:#f0f0f0;border-radius:4px;}
.sub_con .sub_con_wrap .formmail_btn {text-align:center; margin-top:15px}
.sub_con .sub_con_wrap .formmail_btn span input {width:150px;height:40px; border:0; cursor:pointer}
.sub_con .sub_con_wrap .formmail_btn span input.btn-black { background-color:#333; color:#fff; opacity:0.9}
.sub_con .sub_con_wrap .formmail_btn span input.btn-red { background-color:#b90808; color:#fff; opacity:0.9; margin-right:7px;}
.sub_con .sub_con_wrap .formmail_btn span input.btn:hover { opacity:1; transition: .4s ease}


@media screen and (max-width:1280px) {
body{ width:1280px;}
#footer{ width:1280px} 	
	}