@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@charset "utf-8";
*{font-family: 'Noto Sans KR', 'Montserrat', sans-serif; }
/* Reset CSS  */
html { height: 100%;overflow-y:scroll;  }
body { font-size: 13px; font-family: 'Noto Sans KR', 'Montserrat', sans-serif; color:#000;background:#f0f0f0;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none;  }
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#555;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 26px;}
td strong {font-weight: 100;	font-size: 5px;vertical-align: bottom;}
a:hover{text-decoration:none;}
ul:after{content:""; display:block; clear:both;}

/*bbs*/
#container_title{display:none;}
#bo_list_total{display:none;}
#bo_v_table{display:none;}
#bo_vc_w{border-bottom:0;}
#bo_vc{background:none;}

/************* css ******************/
.content_wrap{max-width:1750px; margin:0 auto; padding:0 20px; box-sizing:border-box;}
.content_wrap:after{content:"";display:block; clear:both;}
ul:after{content:"";display:block; clear:both;}
body , p{word-break:keep-all;}
.container { max-width: 1800px; margin: auto; padding: 0 20px; }
.container:after{content:"";display:block; clear:both;}
/*header*/

#header { position: absolute;  height: 120px; line-height: 120px;z-index: 99; top: 0; left: 0; right: 0;  border-bottom: 1px solid #fcfcfc47;}
#header:hover{background:#fff;}
.site_header .logo a{float: left; display:block; padding: 21px 0 0 80px;}
.site_header .logo a .white{display:inline-block;}
.site_header .logo a .black{display:none;}
.site_header:hover .logo a .white{display:none;}
.site_header:hover .logo a .black{display:inline-block;}


#nav_btn { display: none; line-height: 5px; }
#nav_btn strong { transform: rotate(90deg); display: inline-block; font-weight: 400; font-size: 35px; position: relative; top: 15px; }
#nav_btn span { position: relative; bottom: 2.5px; right: 3px; }
#nav { float:right; }
#nav > li { float:left; padding: 0 40px; position: relative; }
#nav > li > a{color:#fff; font-size: 18px; font-weight: 800;}

.site_header:hover #nav > li > a{color:#333}
#nav .sub_menu { position: absolute; text-align: center; width: 100%; left:0; z-index: 9; top: 120px;display: none;     border-top: 2px solid #aa1f24}

#nav .sub_menu li a {display: block; font-size: 14px; padding: 10px 0; background: #fff; line-height: 26px;font-weight: 700; letter-spacing: -1px;}
#nav .sub_menu li a:hover{background:#aa3224;color:#fff;}

/*slider*/
#m_slider { overflow: hidden; }
#m_slider .slide1 .sl_bg{background-image:url('../img/slide_bg1.png');background-size: cover;
background-position: center center;}
#m_slider .slide2 .sl_bg{background-image:url('../img/slide_bg2.png');background-size: cover;
background-position: center center;}
#m_slider .slide3 .sl_bg{background-image:url('../img/slide_bg1.png');background-size: cover;
background-position: center center;}

.slide .slogan { padding: 300px 0 0 370px; }
.slide .slogan h1 { color: #fff; font-size: 60px; font-weight: 300; letter-spacing: -3px; }
.slide .slogan h2 { color:#ff1800;font-size: 80px; font-weight: 800; letter-spacing: -3px; }
.slide .slogan p { color: #fff; font-size: 20px; line-height: 34px; padding-top: 10px; }
.slide { height: calc(100vh);position: relative; overflow: hidden; }
.slide #sl { width: 300%; height: 100%; }
.slide #sl:after { content: ""; display: block; clear: both; }
.slide #sl li { width: 33.333%; height: 100%; float: left; overflow: hidden; min-height: calc(47vh);}
.slide #sl li > div { height: 100%; transition: 0.5s; }
.slide #sl li.active > div { transform: inherit; }
.slide .pos { position: relative; left: 0; bottom: 50px; text-align: center; width: 100%; width: 1200px; margin: auto; }
.slide .pos a { display: inline-block; display: inline-block; width: 15px; height: 3px; line-height: 8px; text-align: center; 
font-size: 0; margin: 0 2px; transition: .3s; text-decoration: none; background: #fff; }
.slide .pos a:hover, .slide .pos a.active { background: #aa1f24; width: 45px; }

.slide .arrow { position: absolute; top: calc(50%); width: 40px; height: 40px;box-sizing: border-box;
text-align: center; display: inline-block; line-height: 33px; z-index: 10; background: #000; opacity: 0.2; border-radius: 50px;}
.slide .arrow img{vertical-align: middle; position: relative; }
.slide .arrow.left { left: calc(50% - 800px); }
.slide .arrow.right { right: calc(50% - 800px); }
.slide .arrow.left img { right:2px; top:1px; }
.slide .arrow.right img { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); left:2px; top:1px; }

ul.slide_menu { position: absolute; bottom:20px; background: rgba(81,86,95,0.9); padding: 15px;  padding-bottom: 5px; right: calc(50% - 600px); border-radius: 15px; }
ul.slide_menu li { text-align: center; float: left; padding:10px; }
ul.slide_menu li a { color: #fff; line-height: 40px; }
ul.slide_menu li:hover a { color: #86b32f; }


/*index*/
.banner{margin-bottom: 80px;}

.bg_color{background:#ebe5e0;  margin-top: 80px;  margin-bottom: 80px;}
.main_index .m_title{font-size:54px;  padding-top: 80px;margin-bottom: 23px; margin-left: 80px;}

.pro_wr:after{content:"";display:block; clear:both;}
.pro_wr{margin-bottom:100px;}
.banner01:after{content:"";display:block; clear:both;}
.pro_con:after{content:"";display:block;clear:both;}
.pro_con{float:left;width:50%;}
.pro_con .lt{width:100% !important;}
.pro_con02:after{content:"";display:block;clear:both;}
.pro_con02{float:right;width:50%; padding-top: 60px;}
.pro_title { padding: 60px 0 0 35%;}
.pro_title h2{font-size: 30px;}
.pro_title p{font-size:16px;line-height:26px;}

.products { overflow: hidden; position: relative; }
.products ul { width: 400%; margin-left:0%; transition: 1s; }
.products li { width: 25%; float: left; text-align: center;}
.pro_wr .products .pro_arrow{ position: absolute; top: 46%;  z-index: 99; cursor: pointer;}
.pro_wr .products .prev{left:70px}
.pro_wr .products .next{right:70px}

.pro_con05:after{content:"";display:block;clear:both;}
.pro_con05{float:left;width:50%; padding-top: 60px;}
.pro_con04 .lt{width:100% !important;}
.pro_con04:after{content:"";display:block;clear:both;}
.pro_con04{float:right;width:50%;}

.banner02:after{content:"";display:block; clear:both;}
.banner02 .banner02_text{float:left; width:45%;color:#fff;background:#aa1f24; padding: 80px;    min-height: calc(47vh);}
.banner02 .banner02_text p{ font-size: 20px; line-height: 30px; letter-spacing: -1px;}
.banner02 .banner02_text p.banner02_text02{margin-bottom:53px;}
.banner02 .banner02_text h3{font-size: 45px; font-weight: 500;margin-bottom:30px;}
.banner02 .banner02_img{float:left; width: 55%;min-height: calc(47vh);background:url(../img/main_photo1.png) no-repeat center center;}
.banner02 .banner02_text .more{font-size:15px;padding:15px 60px; background:#fff}
.banner02 .banner02_text .more:hover{background:#333;color:#fff;transition:0.3s;}
.banner02 .bg_color{    margin-top: 95px;}
.banner02 .bg_color:after{content:"";display:block; clear:both;}

.banner03 ul li{ float: left; width: 19.8%; padding:2px}
.banner03 ul {text-align: center; margin: 0 auto; padding: 0 80px;}
.banner03 .sns{float:right; font-size: 65px; margin: 16px 80px;}
.banner03 .sns a{float: left; display:block; float: left; display: block;  margin: 4px 13px;  line-height: 26px;}
.banner03 .sns a .instar_w{display:inline-block;}
.banner03 .sns a .instar_c{display:none;}
.banner03 .sns a:hover .instar_w{display:none;}
.banner03 .sns a:hover .instar_c{display:inline-block;}
.banner03 .sns i{color:#fff;}
.banner03 .sns i.youtube:hover{ color: #fe0000;transition:0.3s;}
.banner03 .sns i.face:hover{color: #3b5997;}


/*container*/
.container { padding-bottom: 50px; }

/*sub*/
#s_top{text-align:center; color:#fff; padding:190px 0; letter-spacing:-1px;}
#s_top.bg01{background:url(../img/s_top_bg01.png) no-repeat center center;}
#s_top.bg02{background:url(../img/s_top_bg02.png) no-repeat center center;}
#s_top.bg03{background:url(../img/s_top_bg03.png) no-repeat center center;}
#s_top.bg04{background:url(../img/s_top_bg04.png) no-repeat center center;}
#s_top.bg05{background:url(../img/s_top_bg05.png) no-repeat center center;}
#s_top.bg06{background:url(../img/s_top_bg06.png) no-repeat center center;}
#s_top h2{font-size:46px; margin-bottom:5px;}
#s_top p{font-size:16px;}

#sub .sub_menu{display:none; position:absolute; top:100%; left:20px; background:#fff; border:1px solid #ddd;  border-top:0;width:100%; z-index:99;}
#sub .sub_menu li a{display:block; padding:7px 0; font-size:14px;}
#sub .sub_menu li a:hover{background:#f5f5f5;}

#snb_wrap{}
#snb{padding: 0px 80px;border-bottom: 1px solid #ccc;}
#snb > li{float:left; font-size:15px; position:relative; padding:16px 0;}
#snb > li:before{content:"|"; display:inline-block;padding: 0 20px;color:#333}
#snb > li:first-child:before{content:none; padding: 0;}
#snb > li:last-child{cursor:pointer; }
#snb > li > span{margin-left:30px;}
#snb > li:nth-child(3){color:#aa1f24}
#snb .sub_menu{display:none; position:absolute; top:100%; left:20px; background:#fff; border-top: 1px solid #aa3224; width:100%; z-index:99;}
#snb .sub_menu li a{display:block; padding:7px 29px; font-size:14px;}
#snb .sub_menu li a:hover{background:#aa3224;color:#fff;}
#sub .bg_color{    padding: 80px;}
#sub p{font-size:16px; color:#333;  line-height: 32px;}
.p_title{text-align:center; margin-bottom:17px;}
.p_title h2{font-size:36px; letter-spacing:-2px; font-weight:600; color:#333; margin-bottom:15px;}
.p_title span{width:1px; height:30px; display:inline-block; background:#9b9b9b;}
.h3_font{font-size: 19px; text-align: center; letter-spacing: -2px; margin-bottom:40px;color: #fff;margin:30px 0; background: #144e8c; border-radius: 150px; width: 220px;
height: 40px;display:inline-block;line-height: 38px;}
.h3_font02{font-size: 19px; text-align: center; letter-spacing: -2px; margin-bottom:40px;color: #fff;margin:30px 0;background-color:#fff;background-color:rgba( 255, 255, 255, 0.5 );
border-radius: 150px; width: 220px;height: 40px;display: inline-block; line-height: 38px;}

.s_add{margin-bottom:60px;}
.sub_con{margin-bottom:60px;}
.sub_title{font-size:50px;color:#35393c;letter-spacing:-1px; margin-bottom: 70px;}
#sub section{margin-bottom:80px}

/*sub01_01*/
.com_logo img{ float: left; width: 224px;padding-right:20px;}
.com_logo h2{ font-size:50px;color:#35393c;letter-spacing:-1px}
.company{margin-top:50px;}
.company li{padding:5px 0;}
.company li img{ margin-right: 13px;}
.company li p{ display: inline-block; padding-top: 10px; }

.company02{width:100%; text-align: center;}
.company02 li{float:left;width:33.33%;}
.company02 li h3{font-size:20px; padding:20px 0 35px;letter-spacing:-1px;}

.company04 li{float:left;width:20%;}

/* history */

.sub01_02 .bg_color{background:url(../img/bg.png) no-repeat center center;margin-top: 80px;  margin-bottom: 80px;}
.his_img{padding-bottom: 90px;}
.his_img .sub_title:after{content:"";display:block;background:#aa1f24; height:5px; height: 12px;  width:540px; margin-left: -153px;}
.his_img .sub_title{float:left;}
.his_img img{ width: 42px;  margin-left: -31px; margin-top: -20px;}
.history_bg{background:url(../img/history_line.png) repeat-y center center;  margin: 0 auto; width: 100%;}
.history .year{ font-size: 35px; letter-spacing: -1px;  color: #fff; background: #aa1f24; width: 120px;
height: 120px; line-height: 120px;  border-radius: 150px; display: block; margin: 0 auto; text-align: center;}
.history .text_wr .text_right{padding-left: 49.6%;  margin-top: 55px; margin-bottom: 20px;}
.history .text_wr .text_right .month:before{content: ""; display: inline-block; border: 4px solid #aa1f24;  border-radius: 67px;  width: 16px; height: 16px; background: #ebe5e0;
margin-right: 40px; margin-bottom: 12px;}
.history .text_wr .text_right .month{font-size:60px; margin-right: 30px; float: left;}
.history .text_wr .text_right:after{content:"";display:block;clear:both;}
.history .text_wr .text_right p {padding: 13px 0; width: calc(100% - 50px); display: block; letter-spacing: -0.5px;}

.history .text_wr .text_left { padding-left: 7.1%; text-align: left; width: 50%; position: relative; margin-bottom: 20px;}
.history .text_wr .text_left:after{content:"";display:block;clear:both;}
.history .text_wr .text_left .month{font-size:60px; margin-right: 30px; float: left;}
.history .text_wr .text_left p {padding: 13px 0;    width: calc(100% - 50px); display: block; letter-spacing: -0.5px;}
.history .text_wr .text_left p:after{content: ""; display: inline-block; border: 4px solid #aa1f24;  border-radius: 67px;  width: 16px; height: 16px; background: #ebe5e0;
 margin-left: 74px;position: absolute; right: -8px;}

/*form mail*/
#form p{text-align:center;line-height:23px; margin-top:10px;}
#form table {width:100%;border-collapse: collapse;margin-top: 20px;}
#form th {width:20%;border:1px solid #ddd;text-align:center;font-size:13px;}
#form td {border:1px solid #ddd;padding:10px;font-size:13px;color:#666}
#form .btn_submit {color:#000;border-radius:3px;border:solid 1px #ddd;background:#fff;padding:8px 0px;font-size:14px; text-align:center;width:100px;}
#form input,#form textarea{width:100%; background:#f5f5f5; border-radius:5px; padding:7px;box-sizing: border-box;}
#form .send{background:#f15a22;color:#fff}

/* fields */
.fields {  position: relative; }
.fields legend { font-size: 25px;  margin-bottom: 15px; }
.fields legend:before { content: ""; width: 5px; height: 23px; background: #e60021; display: inline-block; margin-right: 10px; vertical-align: middle; }
.fields .comment { position: absolute; right: 0; top: 0; }
.fields ul { border-top:2px solid #b03224; border-bottom:2px solid #b03224;}
.fields li { display: flex; border-bottom: 1px solid #cacaca; align-items: center; }
.fields .lbl {  width: 25%;  box-sizing: border-box; padding: 12px 30px; font-size: 16px; }
.fields .desc { width: 75%; padding: 12px; }
.fields .dxee-input { border: 1px solid #cacaca;padding: 12px 10px; box-sizing: border-box;background: #ebe5e0; }
.fields .dxee-input.full { width: 100%; }
.btn-group {text-align: center; margin-top: 24px;}

.dxee-btn.main { background:  #b03224}
.dxee-btn.main:hover{transition:.5s; background:#fff; color:#000;}
a.dxee-btn {  text-decoration: none;  text-align: center; }
.dxee-btn {  border: none; padding: 12px 45px; color: #fff;  transition: .3s;  display: inline-block; line-height: 1; }

/*footer*/
#footer{background:#272727; }
#ft_top{border-bottom:1px solid #515151; padding:20px 0;}
.ft_link { position: relative; }
.ft_link li{float:left;margin-left:}
.ft_link li a{font-size:15px;color:#9e9d9d;}
.ft_link li:nth-child(1) a:after, .ft_link li:nth-child(2) a:after, .ft_link li:nth-child(3) a:after{content:"ㅣ";margin:0 10px; }
/*.ft_link li:last-child{ position: absolute; right: 0; top: -5px; }
.ft_link li:last-child img { padding-right: 10px; }*/
.ft_link li span{color:#e35555;}
#ft_bottom{padding:40px 0;}
#ft_bottom #ft_p{float:left;line-height:24px;color:#6f6f6f;font-size:14px;}
#ft_bottom #ft_logo{float:right;margin:0 auto; margin-top: 60px; }

 

@media (min-width:769px) and (max-width:1200px){/*테블릿*/
	#header{height:90px; line-height: 90px}
	#nav_btn { cursor: pointer; display: block; float: right; line-height: 83px; padding: 0 20px;  color: #fff; text-align: center; font-size: 27px;}
	#header:hover #nav_btn{color:#aa1f24}
	#nav > li { width: 100%; text-align: center; padding: 0 0 22px 0; line-height: 28px;line-height: 26px;}
	#nav { float: none; display: none; background: #aa1f24}
	#nav > li > a{color:#fff}
	.site_header:hover #nav > li > a{color:#fff}
	#nav .sub_menu{ top: 0; position: relative;} 
	.site_header .logo a{width:203px; padding: 14px 0 0 30px;}
	#nav .sub_menu li a{ background: #ffffffc7; }
	#nav .sub_menu li a:hover{    background: #7c1114;color:#fff;}
	/*메인 제품*/
	.pro_con{width: 100%;}
	.pro_con02{ float: none; margin: 0 auto;}
	.pro_title{ padding: 0; text-align: center;}
	.pro_con04{width: 100%;}
	.pro_con05{ float: none; margin: 0 auto; margin-bottom: 45px;}
	.pro_wr{margin-bottom: 50px;}

	/*sub*/
	#sub .bg_color{padding: 45px;}
	#sub section{ margin-bottom: 50px;}

	/*sub01_01*/
	.company02 li img{padding:10px;}
	.company02 li h3{font-size:16px;}
	.company li img{display:block;}
 }

@media (max-width:768px){/*모바일*/

	#header{height:90px; line-height: 90px}
	#nav_btn { cursor: pointer; display: block; float: right; line-height: 83px; padding: 0 20px;  color: #fff; text-align: center; font-size: 27px;}
	#header:hover #nav_btn{color:#aa1f24}
	#nav > li { width: 100%; text-align: center; padding: 0 0 22px 0; line-height: 28px;line-height: 26px;}
	#nav { float: none; display: none; background: #aa1f24}
	#nav > li > a{color:#fff}
	.site_header:hover #nav > li > a{color:#fff}
	#nav .sub_menu{ top: 0; position: relative;} 
	.site_header .logo a{width:203px; padding: 14px 0 0 30px;}
	#nav .sub_menu li a{ background: #842023; color:#fff }
	#nav .sub_menu li a:hover{background: #fff; color:#333  }
	.slide { height: 432px; }
	.slide .slogan { padding:155px 0 0 0; text-align: center; }

	.slide .slogan h1 { font-size: 30px; }
	.slide .slogan h2 { font-size: 35px; }
	.slide .slogan p { font-size: 14px; line-height: 24px; }

	.main_index .m_title{ margin-left: 0; text-align: center; font-size: 48px;}
	.banner02 .banner02_text{width:100%;padding: 50px 20px; min-height: calc(42vh); text-align: center;}
	.banner02 .banner02_img{width:100%;}

	.banner03 ul{padding:0;}
	.banner03 .sns{font-size: 40px; margin: 16px 0px;}
	.banner03 .sns a .instar_w , .banner03 .sns a .instar_c{ width: 33px;}
	
	.bg_color{ margin-top: 50px; margin-bottom: 50px;}

	/*메인 제품*/
	.pro_con{width: 100%;}
	.pro_con02{width: 100%;}
	.pro_title{ padding: 0; text-align: center;}
	.pro_con04{width: 100%;}
	.pro_con05{width: 100%;margin-bottom:45px;}
	.pro_wr{margin-bottom: 50px;}
	.pro_wr .products .prev{left: 20px;}
	.pro_wr .products .next{right: 20px;}

	/*sub*/
	#sub .bg_color{padding: 50px 30px;}
	.sub_title{ font-size: 44px;}
	.sub_title{margin-bottom: 50px;}
	#sub section{ margin-bottom: 50px;}

	/*sub01_01*/
	.company02 li img{padding:10px;}
	.company02 li h3{font-size:16px;}
	.company02 li{width:50%}
	.com_logo h2{ font-size: 48px;}
	.company li img{display:block;}

	/*sub01_02*/
	.his_img .sub_title:after{    width: 491px;}
	 
	.history .text_wr{text-align:center}
	.history .text_wr .text_right{padding-left:0px; background: #ebe5e0;}
	.history .text_wr .text_right p{width:100%;padding:0}
	.history .text_wr .text_right .month{float:none; margin-right: 0; font-size: 50px;}
	.history .text_wr .text_right .month:before{ display:block;margin-right: 0; margin-bottom:0;margin:0 auto;}
	.history .text_wr .text_right{margin-bottom: 50px;}

	.history .text_wr .text_left{padding-left:0px; background: #ebe5e0;}
	.history .text_wr .text_left{padding-left:0;text-align:center;width:100%;}
	.history .text_wr .text_left .month{float:none; margin-right: 0; font-size: 50px;}
	.history .text_wr .text_left p{width:100%;padding:0}
	.history .text_wr .text_left p:after{display:none;}
	.history .text_wr .text_left .month:before{ display:block;margin-right: 0; margin-bottom:0;margin:0 auto;
	content: ""; border: 4px solid #aa1f24; border-radius: 67px; width: 16px; height: 16px; background: #ebe5e0; }
	.history .text_wr .text_left{margin-bottom: 50px;}

	
	/*sub04*/
	.fields .lbl{padding:0;font-size:14px;}

	
}