@font-face {
    font-family: 'Nanum Square';
    src: url('/css/fonts/nanumsquarer.eot');
    src: url('/css/fonts/nanumsquarer.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/nanumsquarer.woff2') format('woff2'),
         /* url('/css/fonts/nanumsquarer.woff') format('woff'),
         url('/css/fonts/nanumsquarer.ttf') format('truetype'), */
         url('/css/fonts/nanumsquarer.svg#nanumsquarerregular') format('svg');
    font-weight: normal;
    font-style: normal;
} 

/* @font-face{ font-family:'NanumBarunGothic'; 
			src: local('NanumBarunGothic'),
			url('/css/fonts/NanumBarunGothic.eot'); 
			font-weight: 400; font-style: normal; }

@font-face{ font-family:'NanumBarunGothic'; 
			src: local('NanumGothicBold'),
			url('/css/fonts/NanumBarunGothicBold.eot');
			font-weight: 600; font-style: normal; }

@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  src: local('Russo One'), local('RussoOne-Regular'), url('/css/fonts/RussoOne.woff2') format('woff2');
} */

/*------------------------------------
	메인
------------------------------------*/
.Main .basic-bs .basic-bs-main{ padding:0; position:inherit; }
.Main .basic-bs.basic-bs-wrap.container.content{ background:none; }
.Main .navbar.fixed{position:relative;}

.Main .basic-bs-body{  }

/* 메인 랩 */
.main_content{ overflow:hidden; }
.main_content:after{ content:""; display:block; clear:both; }

body.Main .basic-bs-wrap{ width:100%; padding:0; max-width:none; }

/*------------------------------------
	메인비주얼
------------------------------------*/
.main_visaulArea{ float:left; width:38%; height:816px; }
.m_visual{ display:none; }
/*------------------------------------
	메인 컨텐츠
------------------------------------*/
/* 메인 컨텐츠 */
.content_wrap{ float:left; width:62%; padding:51px 40px 0; }
.content_wrap .container{ padding:0; }

/* 메인 컨텐츠 타이틀 */
.main_content_title{ margin-bottom:28px; font:600 23px/25px 'NanumGothic','Malgun Gothic',Sans-serif; color:#333; text-transform:uppercase; letter-spacing:-0.5px; }
.main_content_title:before{ display:block; margin-bottom:7px; width:17px; height:3px; background:#2877d6; content:''; }
.main_content_title strong{ font-weight:bold; color:#111; }

.content_top{ overflow:hidden; height:336.2px; margin-bottom:45px; }

/* 메인 롤링배너 */
.rolling_banner{ clear:both; position:relative; width:100%; height:auto; padding:0; margin:0 auto; }
.rolling_banner > a{ position:absolute; right:0; top:-54px; width:66px; height:25px; background:#2877d6; color:#dee7f2; font:600 14px/25px 'NanumGothic','NanumGothic'; text-align:center; }
.rolling_banner > a{ -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -ms-transition-duration:0.3s; transition-duration:0.3s; }
.rolling_banner > a:hover{ background:#1362c2; }
.rolling_banner > a:before{ display:inline-block; margin-right:2.5px; width:10px; height:10px; content:''; background:url(/img/plus_icon_s.png) no-repeat center; background-size:100%; }
.jcarousel-skin-tango { width:100%; height:auto; padding:0; }
.jcarousel-skin-tango li{ width:266px; margin-right:15px; cursor:pointer; }
.jcarousel-skin-tango .jcarousel-clip{ overflow:hidden; }
.jcarousel-skin-tango .jcarousel-prev-horizontal{ position:absolute; top:-54px; right:99px; padding-right:1px; width:25px; height:25px; cursor:pointer; background:#c4c4c4; text-align:center; }
.jcarousel-skin-tango .jcarousel-prev-horizontal:after{ content:""; font:normal 16px/25px 'Fontawesome',Arial; color:#fff;  }
.jcarousel-skin-tango .jcarousel-prev-horizontal:before{  }
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover{ background:#585858; }
.jcarousel-skin-tango .jcarousel-next-horizontal{ position:absolute; top:-54px; right:70px; padding-left:1px; width:25px; height:25px; cursor:pointer; background:#c4c4c4; text-align:center; }
.jcarousel-skin-tango .jcarousel-next-horizontal:after{ content:""; font:normal 16px/25px 'Fontawesome',Arial; color:#fff;  }
.jcarousel-skin-tango .jcarousel-next-horizontal:hover{ background:#585858; }

.jcarousel-skin-tango .jcarousel-prev-horizontal, .jcarousel-skin-tango .jcarousel-next-horizontal{ -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -ms-transition-duration:0.3s; transition-duration:0.3s; }

/* 메인주요제품 배너 */
.main_goods_wrap{ position:relative; width:100%; border:1px solid #ddd; }
.main_goods_wrap{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; }
.main_goods_wrap:hover{ border-color:#ccc; }
.main_goods_wrap dt{ width:100%; height:68px; font:600 18px/68px 'NanumGothic','Malgun Gothic',Sans-serif; color:#333; border-top:1px solid #e1e1e1; background:url(/img/product_img_bg.jpg); text-align:center; }
.main_goods_wrap dt{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; }
.main_goods_wrap:hover dt{ color:#2877d6; border-color:#ccc; }
.main_goods_wrap dd{ width:100%; overflow:hidden; position:relative; background:#fff; text-align:center; }
.main_goods_wrap dd > img{ width:auto; max-width:100%; }

.content_bottom{  }

/* 메인 퀵배너 */
.main_banner{ overflow:hidden; }
.main_banner li{ float:left; width:23.95%; height:255px; margin-left:1.4%; position:relative; background-size:auto 100% !important; cursor:pointer; }
.main_banner li:nth-child(1){ margin-left:0; background:url(/img/main_banner_img1.jpg) no-repeat center; }
.main_banner li:nth-child(2){ background:url(/img/main_banner_img2.jpg) no-repeat center; }
.main_banner li:nth-child(3){ background:url(/img/main_banner_img3.jpg) no-repeat center; }
.main_banner li:nth-child(4){ background:url(/img/main_banner_img4.jpg) no-repeat center; }
.main_banner li > div{ display:none; }
.main_banner li div img{ width:auto; max-width:100%; }
.main_banner li p{ position:absolute; margin:0; left:0; bottom:0; width:100%; height:52px; background:rgba(0, 0, 0, 0.5); text-align:center; }
.main_banner li p{ -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -ms-transition-duration:0.3s; transition-duration:0.3s; }
.main_banner li p strong{ display:block; font:600 18px/52px 'NanumGothic','Malgun Gothic',Sans-serif; text-shadow:0.1px 0.1px 0.2px rgba(0,0,0,0.4); color:#f4f4f4; }
.main_banner li p strong{ -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -ms-transition-duration:0.3s; transition-duration:0.3s; }
.main_banner li p:after{ position:absolute; left:50%; margin-left:-24px; bottom:25px; width:48px; height:48px; border-radius:100em; content:''; background:#2877d6 url(/img/plus_icon_s.png) no-repeat center; opacity:0; filter:alpha(opacity=0); }
.main_banner li p:after{ -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -ms-transition-duration:0.3s; transition-duration:0.3s; }

.main_banner li:hover p{ height:100%; color:#fff; background:rgba(0, 0, 0, 0.6); }
.main_banner li:hover p strong{ line-height:200px; font-size:20px; }
.main_banner li:hover p:after{ bottom:80px; opacity:1; filter:alpha(opacity=100); }


/* ############### 1700px 반응형 ############### */
@media (max-width:1700px) {

/* 메인비주얼 */
/* .main_visaulArea{ height:710px; } */

/* 메인 컨텐츠 */
.content_top{ height:344px; }
/* .content_wrap{ padding:40px 15px 0 30px; }

.content_top{ margin-bottom:40px; }
.main_goods_wrap dt{ height:55px; line-height:55px;}

.jcarousel-skin-tango li{ width:242.5px; margin-right:12px; } */

/* 메인퀵배너*/
/* .main_banner li{ height:215px; background-size:100% auto !important; } */



.main_content{   }

/* 메인비주얼 */
.main_visaulArea{ float:none; width:100%; height:500px; }
.m_visual{ /* display:block; */ }
.m_visual > img{ width:auto; max-width:100%; }

.jcarousel-skin-tango li{ width:276px; margin-right:12px; }

.content_wrap{ max-width:1170px; margin:0 auto; float:none; width:100%; padding:60px 15px; }

.main_banner li{  width:24.1%; margin-left:1.2%; background-size:100% auto !important; /* background:none; */ }
/* .main_banner li > div{ display:block; } */

}
/* ############### 태블릿 반응형 ############### */
@media (max-width:1200px) {

/* 메인비주얼 */
.main_visaulArea{ height:400px; }

.main_banner li{ height:220px;  }
.main_banner li:hover p strong{ line-height:170px; }
.main_banner li:hover p:after{ bottom:60px; }

}
/* ############### 모바일 반응형 ############### */
@media (max-width:999px) {

/* 메인비주얼 */
.main_visaulArea{ height:350px; }

/*------------------------------------
	메인 컨텐츠
------------------------------------*/
.main_banner li{ width:49.4%; height:250px; }
.main_banner li:nth-child(3){ margin-left:0; margin-top:15px; }
.main_banner li:nth-child(4){ margin-top:15px; }

.main_banner li:hover p strong{ line-height:220px; }
.main_banner li:hover p:after{ bottom:90px; }

}
@media (max-width:600px) {

/* 메인비주얼 */
.main_visaulArea{ height:280px; }

/*------------------------------------
	메인 컨텐츠
------------------------------------*/
.content_wrap{ /* padding:0; */ }

.content_top{ padding:0 0 70px ; height:484.5px; margin:0; }
.main_content_title{ margin-bottom:60px; text-align:center; font-size:30px; font-weight:normal; line-height:32px; }
.main_content_title:before{ display:none; }
.main_content_title strong{ font-weight:normal; }

.rolling_banner > a{ right:50%; margin-right:-63px; top:-50px; }
.jcarousel-skin-tango .jcarousel-prev-horizontal{ right:50%; margin-right:36px; top:-50px; }
.jcarousel-skin-tango .jcarousel-next-horizontal{ right:50%; margin-right:7px; top:-50px; }

.jcarousel-skin-tango li{ width:330px; }

.content_bottom .main_content_title{ display:none; }
.main_banner li{ width:100%; margin-left:0; height:280px; }
.main_banner li:nth-child(2){ margin-top:15px; }

}