@charset "utf-8";

/*팝업설정(필수)*/
@media screen and (max-width:768px) {
	.drag_pop{left:0 !important;top:0 !important;max-width:350px !important;height:auto !important;}
}


#main_visual{position:relative;height:330px;}
#main_visual .bg{height:330px;width:100%;}
#main_visual .bg .typo{position:relative;width:100%;max-width:1180px;margin:0 auto;}
#main_visual .bg .typo .text{position:absolute;top:135px;left:0px;}
#main_visual .bg .typo .text img.pc{}
#main_visual .bg .typo .text img.mobile{display:none;}
#main_visual .bg .typo .img{position:absolute;top:36px;right:0px;}

.slick-next{display: block;position:absolute;right:-55px;top:50%;margin-top:-22px;width:31px;height:44px;background:url(/img/main/slick_next.png) ;font-size: 0px;cursor:pointer;}
.slick-next:hover{background-position:0 -44px;}
.slick-prev{display: block;position:absolute;left:-55px;top:50%;margin-top:-22px;width:31px; height:44px;background:url(/img/main/slick_prev.png) ;font-size: 0px;cursor:pointer;}
.slick-prev:hover{background-position:0 -44px;}

ul.slick-dots{position:absolute;left:0;bottom:20px;width:100%;text-align:center;z-index:11;}
ul.slick-dots li{display: inline-block;margin:0 3px;}
ul.slick-dots li button{font-size: 0;display: block;height:10px;width:10px;border-radius:10px;border:1px solid #fff;background:none;-webkit-transition:all 0.3s; /* Safari */transition: all 0.3s;cursor:pointer;opacity:0.7;}
ul.slick-dots li.slick-active button{background:#fff;opacity:1;}

@media screen and (max-width:1200px) {
#main_visual{height:400px;}
#main_visual .bg{height:400px;}
#main_visual .bg .typo{}
#main_visual .bg .typo .text{top:135px;left:30px;}
#main_visual .bg .typo .text img{width:380px;}
#main_visual .bg .typo .img{top:36px;right:30px;text-align:right;}
#main_visual .bg .typo .img img{width:550px;}
}

@media screen and (max-width:1000px) {
#main_visual{height:360;}
#main_visual .bg{height:360px;}
#main_visual .bg .typo{}
#main_visual .bg .typo .text{top:125px;left:30px;}
#main_visual .bg .typo .text img{width:280px;}
#main_visual .bg .typo .img{top:56px;right:30px;text-align:right;}
#main_visual .bg .typo .img img{width:420px;}

}

@media screen and (max-width:768px) {
#main_visual{height:auto}
#main_visual .bg{height:auto;background-position:64% center !important;}
#main_visual .bg .typo{}
#main_visual .bg .typo .text{position:relative;top:auto;left:auto;text-align:center;padding:40px 0 10px;}
#main_visual .bg .typo .text img.pc{display:none;}
#main_visual .bg .typo .text img.mobile{display:inline;width:240px;}

#main_visual .bg .typo .img{position:relative;top:auto;right:auto;width:100%;text-align:center;padding:0 20% 10px;}
#main_visual .bg .typo .img img{width:auto;}
}

@media screen and (max-width:480px) {
#main_visual .bg .typo .text{padding:30px 0 10px;}
#main_visual .bg .typo .text img.mobile{width:160px;}
#main_visual .bg .typo .img{position:relative;top:auto;right:auto;width:100%;text-align:center;padding:0 5% 10px;}

ul.slick-dots{bottom:10px;}
}



#main_content{padding:60px 0 90px;}

#pro_wrap{background:url(/img/main/bg_pro_line.gif) repeat-y center 0;}
#product{float:left;width:99%;}
/*#technology{float:right;width:45%;}*/
#pro_wrap .pro_box{}
#pro_wrap .pro_box .title{line-height:30px;}
#pro_wrap .pro_box .title h2{display:inline-block;font-size:25px;font-weight:700;color:#333;}
#pro_wrap .pro_box .title a{display:inline-block;font-size:13px;color:#777;letter-spacing:1px;padding-left:1px;}
#pro_wrap .pro_box .title a:hover{color:#0476FF;}
/*#pro_wrap .pro_box ul{font-size:0;text-align:center;margin-top:30px;}
#pro_wrap .pro_box ul li{display:inline-block;width:30%;margin-right:5%;vertical-align:top;}
#pro_wrap .pro_box ul li:last-child{margin-right:0;}*/
/*#pro_wrap .pro_box ul li a{}
#pro_wrap .pro_box ul li a .icon{position:relative;width:100%;border-radius:50%;border:5px solid #ddd;overflow:hidden;}
#pro_wrap .pro_box ul li a .icon p{position:absolute;top:50%;left:0;width:100%;margin-top:-17px;font-size:15px;letter-spacing:-0.8px;font-weight:600;color:#fff;line-height:19px;z-index:100;;text-shadow: 1px 1px 1px rgba(0,0,0,0.5);display:none;}
#pro_wrap .pro_box ul li a .icon .img{position:absolute;top:0;left:0;width:100%;}
#pro_wrap .pro_box ul li a:hover .icon{border:5px solid #018EE8;}
#pro_wrap .pro_box ul li a:hover p{display:block;}
#pro_wrap .pro_box ul li a:hover .icon .img{top:-100%;}
#pro_wrap .pro_box ul li a p.m_name{display:none;}
*/
#pro_wrap .pro_box ul.gal_list{margin-top:30px;font-size:0;}
#pro_wrap .pro_box ul.gal_list li{position:relative;display:inline-block;width:21.0%;margin-right:5.0%;vertical-align:top;text-align:center;}
#pro_wrap .pro_box ul.gal_list li.li4{margin-right:0;}
#pro_wrap .pro_box ul.gal_list li a{display:block;position:absolute;top:0;left:0;width:100%;height:100%;border:0px solid #444;opacity:0.15;}
#pro_wrap .pro_box ul.gal_list li a:hover{background-color:#000;}
#pro_wrap .pro_box ul.gal_list li .subject{font-size:13.5px;color:#444;font-weight:300;letter-spacing:-0.7px;line-height:18px;padding:20px 10px 3px 10px;overflow:hidden;text-overflow:ellipsis;}
#pro_wrap .pro_box ul.gal_list li .exp{font-size:12px;color:#888;font-weight:300;letter-spacing:-0.2px;line-height:15px;padding:0 10px 20px 10px;overflow:hidden;text-overflow:ellipsis;}

@media screen and (max-width:1000px) {
#pro_wrap .pro_box ul li a .icon p{font-size:14px;}
}
@media screen and (max-width:768px) {
#main_content{padding:40px 0 60px;}

#pro_wrap{background:none;}
#product{float:none;width:100%;}
#technology{float:none;width:100%;}
#pro_wrap .pro_box .title{line-height:20px;}
#pro_wrap .pro_box .title h2{font-size:22px;}
#pro_wrap .pro_box .title a{font-size:13px;padding-left:5px;}

#technology .title{padding-top:18px;margin-top:25px;border-top:1px solid #ddd;}

#pro_wrap .pro_box ul{margin-top:20px;}
#pro_wrap .pro_box ul li{width:28%;max-width:160px;margin:0 2.5%;}
#pro_wrap .pro_box ul li:last-child{margin-right:2.5%;}
#pro_wrap .pro_box ul li a .icon{border:3px solid #ddd;}
#pro_wrap .pro_box ul li a .icon p{position:absolute;font-size:0;width:0;height:0;}
#pro_wrap .pro_box ul li a .icon .img{position:absolute;top:0;left:0;width:100%;}
#pro_wrap .pro_box ul li a:hover .icon{border:3px solid #018EE8;}
#pro_wrap .pro_box ul li a:hover .icon .img{top:-100%;}
#pro_wrap .pro_box ul li a p.m_name{font-size:15px;line-height:17px;padding-top:10px;font-weight:500;color:#333;letter-spacing:-0.6px;display:block;}

#pro_wrap .pro_box ul.gal_list{margin-top:0;font-size:0;}
#pro_wrap .pro_box ul.gal_list li{width:48.5%;margin:3% 3% 0 0;}
#pro_wrap .pro_box ul.gal_list li.li2{margin-right:0;}
#pro_wrap .pro_box ul.gal_list li.li4{margin-right:0;}
#pro_wrap .pro_box ul.gal_list li .subject{font-size:14px;font-weight:400;padding:15px 10px 0px 10px;}
#pro_wrap .pro_box ul.gal_list li .exp{font-size:13px;padding:0 10px 15px 10px;}
#pro_wrap .pro_box ul.gal_list li .exp span{display:none;}

}

@media screen and (max-width:480px) {
#main_content{padding:25px 0 30px;}
#pro_wrap .pro_box .title h2{font-size:20px;}
#pro_wrap .pro_box .title a{font-size:12px;padding-left:3px;}

#technology .title{padding-top:25px;}

#pro_wrap .pro_box ul{margin-top:15px;}
#pro_wrap .pro_box ul li{width:28.3333%;margin:0 2%;}
#pro_wrap .pro_box ul li:last-child{margin-right:2.5%;}
#pro_wrap .pro_box ul li a p.m_name{font-size:12.8px;line-height:15px;padding-top:6px;letter-spacing:-1px;}
}

#cont_wrap{border-top:2px solid #444;margin-top:60px;padding-top:60px;}
#cont_wrap>div{}

#notice{float:left;width:26%;margin-right:4%;}
#vision{float:left;width:19%;margin-right:2%;}
#actual{float:left;width:19%;}
#link{float:right;width:26%;}

#notice .title{position:relative;background-color:#003f7d;line-height:40px;padding:0 12px;}
#notice .title h2{font-size:15px;letter-spacing:1px;color:#fff;font-weight:500;}
#notice .title a{position:absolute;top:11px;right:11px;}
#notice .title a:hover{opacity:0.5;}
#notice li {border-bottom:1px solid #ddd;}
#notice li a{display:block;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.4px;padding:10px 0 10px 12px;}
#notice li a p.date{color:#003f7d;font-weight:500;}
#notice li a p.subject{text-overflow:ellipsis;overflow:hidden;}

#vision .title{position:relative;}
#vision .title h2{font-size:18px;letter-spacing:0px;color:#3a3a3a;font-weight:600;}
#vision .title a{position:absolute;top:2px;right:0;}
#vision .img{padding:18px 0 14px;}
#vision p.text{font-size:13.6px;color:#777;font-weight:400;letter-spacing:-0.8px;line-height:19px;padding-bottom:15px;}
#vision p.more{font-size:13px;color:#7d838d;line-height:38px;letter-spacing:0.6px;padding:0 0 0 12px;background:url(/img/main/icon_arrow.gif) no-repeat 93% center #e2e5eb;}
#vision a:hover{opacity:0.5;}

#actual .title{position:relative;}
#actual .title h2{font-size:18px;letter-spacing:0px;color:#3a3a3a;font-weight:600;}
#actual .title a{position:absolute;top:2px;right:0;}
#actual .img{padding:18px 0 14px;}
#actual p.text{font-size:13.6px;color:#777;font-weight:400;letter-spacing:-0.8px;line-height:19px;padding-bottom:15px;}
#actual p.more{font-size:13px;color:#7d838d;line-height:38px;letter-spacing:0.6px;padding:0 0 0 12px;background:url(/img/main/icon_arrow.gif) no-repeat 93% center #e2e5eb;}
#actual a:hover{opacity:0.5;}

#link li{margin-bottom:10px;}
#link li:nth-child(1){background:url(/img/main/link_icon1.png) no-repeat 95% center;}
#link li:nth-child(2){background:url(/img/main/link_icon2.png) no-repeat 95% center;}
#link li:nth-child(3){background:url(/img/main/link_icon3.png) no-repeat 95% center;}
#link li a{display:block;border:1px solid #ddd;padding:15px;}
#link li a:hover{opacity:0.5;}
#link li a h2{font-size:18px;letter-spacing:0px;color:#3a3a3a;font-weight:600;}
#link li a p{font-size:13.2px;color:#666;font-weight:300;letter-spacing:-0.4px;line-height:19px;text-overflow:ellipsis;overflow:hidden;}

@media screen and (max-width:1100px) {
#link li{background-size:40px !important;}
}

@media screen and (max-width:1000px) {
#notice{float:left;width:36%;margin-right:4%;}
#vision{float:left;width:28%;margin-right:4%;}
#actual{float:left;width:28%;}
#link{float:none;width:100%;padding-top:4%;clear:both;}

#notice li a{padding:12px 0 13px 12px;}

#link ul{font-size:0;}
#link li{display:inline-block;width:32%;margin:0 2% 0 0;vertical-align:top;}
#link li:nth-child(3){margin-right:0;}
}

@media screen and (max-width:860px) {
#notice li a{padding:9px 0 9px 12px;}
#link li:nth-child(1){background:none;}
#link li:nth-child(2){background:none;}
#link li:nth-child(3){background:none;}
}

@media screen and (max-width:768px) {
#cont_wrap{border-top:none;margin-top:0px;padding-top:50px;}

#notice{float:none;width:100%;margin-right:0;}
#vision{float:left;width:47.5%;margin-right:5%;margin-top:5%;clear:both;}
#actual{float:left;width:47.5%;margin-top:5%;}
#link{padding-top:5%;}

#notice li {position:relative;padding-right:100px;}
#notice li a{display:block;padding:12px 0 12px 15px;background:url(/img/spot_ul.gif) no-repeat 8px center;}
#notice li a p.date{position:absolute;top:11px;right:12px;}
#notice li a p.subject{text-overflow:ellipsis;overflow:hidden;}


#link li a{padding:16px;}
}

@media screen and (max-width:600px) {

#vision{margin-top:7%;}
#actual{margin-top:7%;}
#link{padding-top:8%;}

#vision .title h2{font-size:17px;}
#vision .title a{display:none;}
#vision .img{padding:12px 0 14px;}


#actual .title h2{font-size:17px;}
#actual .title a{display:none;}
#actual .img{padding:12px 0 14px;}


#link li{display:block;width:100%;margin:0 0 10px 0;}
#link li:nth-child(1){background:url(/img/main/link_icon1.png) no-repeat 95% center;}
#link li:nth-child(2){background:url(/img/main/link_icon2.png) no-repeat 95% center;}
#link li:nth-child(3){background:url(/img/main/link_icon3.png) no-repeat 95% center;}

}

@media screen and (max-width:480px) {
#cont_wrap{padding-top:30px;}

#notice li {position:relative;padding-right:70px;}

#link li a h2{font-size:16px;}
}












   