@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosansKR.css);
@import url(contents.css);
@import url(board.css);
@import url(shop.css);

/* ==============================================
   defaults
   ============================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
ol, ul { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table { border-collapse:collapse; border-spacing:0;}
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
input, select { margin:0; padding:0; vertical-align:middle;}
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

.ir { background-color: transparent; border: 0; overflow: hidden; text-indent:-9999px;}
.ir:before { content: ""; display: block; width: 0; height: 150%; }

.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
.clearfix {  *zoom: 1;}
.hidden { display:none;}
h2 { margin-bottom: 5px; }

/* box sizing */

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.underConstruction { text-align: center; }

/* ==============================================
   layout
   ============================================== */

html { overflow:auto; overflow-y:scroll;}
input,
select,
button,
textarea,
body { color:#2f2f2f; font-size:12px; font-family:'Noto Sans KR', sans-serif, 'Roboto', 'Nanum Gothic', 'dotum', '돋움', 'gulim', '굴림', arial !important; letter-spacing: -0.5px;}

#wrap {}
#wrapIn {}

.forPC { display: block !important;}
.forMobile { display: none !important;}
.mobileMenu { display: none;}


/* header */

#header { position: relative; height: 110px; background-color: #fff; z-index: 99;
  -moz-box-shadow: 0px 3px 3px rgba(0,0,0,.175);
  -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,.175);
  box-shadow: 0px 3px 3px rgba(0,0,0,.175); }

#header .headerIn { position: relative; width: 1120px; margin: 0 auto; height: 110px; }
#header h1 a { display: block; width: 250px; height: 110px; text-indent: -9999px; background: url(../images/common/top_logo.png) bottom 25px center no-repeat; cursor: pointer;}

#header .topMenu { position: absolute; right: 213px; top: 17px; height: 35px;}
#header .topMenu ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
#header .topMenu ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
#header .topMenu ul.list li { float: left; margin-left: 15px;}
#header .topMenu ul.list li a { line-height: 30px; color: #838383; font-size: 11px; text-transform: uppercase; text-decoration: none;}
#header .topMenu ul.list li a:hover { color: #000; text-decoration: underline;}

#header .search { position: absolute; right: 0px; top: 15px; height: 35px; padding-right: 29px;}
#header .search legend { display: none;}
#header .search label { display: none;}
#header .search input.text { width: 164px; height: 35px; background: none; border: solid 2px #002547; }
#header .search input.submit { position: absolute; top: 0; right: 0; width: 35px; height: 35px; text-indent: -9999px; border: 0; background: #002547 url(../images/common/top_search_icon.png) center center no-repeat; cursor: pointer;}

/* header : gnb */

#header .gnb { position: absolute; right: -23px; top: 45px;}
#header .gnb ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
#header .gnb ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
#header .gnb ul.list li { float: left; height: 64px;}
#header .gnb ul.list li a { display: block; height: 64px; line-height: 64px; color: #262626; font-size: 15px; font-weight: bold; text-decoration: none; padding: 0 23px;}
#header .gnb ul.list li a:hover { color: #003566;}
#header .gnb ul.list li.active a { color: #003566;}
 #header .gnbM {display: none;}

/* footer */

.footMenu { height: 45px; border-top: solid 1px #e3e3e3;}
.footMenuIn { width: 1120px; margin: 0 auto; }
.footMenu ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
.footMenu ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
.footMenu ul.list li { height: 45px; float: left; margin-right: 10px; padding-right: 10px; background: url(../images/common/menu_devider_black.png) bottom 16px right no-repeat;}
.footMenu ul.list li.last { background: none; }
.footMenu ul.list li a { line-height: 45px; color: #878787; font-size: 12px; font-weight: bold; text-decoration: none;}
.footMenu ul.list li a:hover { color: #6d6d6d;}

#footer .serviceCenter { position: absolute; left: 0px; top: 35px; }
#footer .serviceCenter p.phone { margin-bottom: 5px; }
#footer .serviceCenter p.phone a { line-height: 40px; font-size: 39px; color: #2a5496; font-weight: bold; text-decoration: none; }
#footer h4 { line-height: 26px; font-size: 19px; color: #393939; font-weight: bold; letter-spacing: 0.5px; margin-bottom: 10px; }
#footer p.sub { line-height: 18px; color: #001f42; margin-bottom: 15px; }
#footer p.text { line-height: 18px; color: #5d5d5d; }
#footer p.img { margin-bottom: 10px;}
#footer .bankAccount { position: absolute; left: 286px; top: 35px; }

#footer { height: 240px; background-color: #f6f6f6; }
#footer .footerIn { position: relative; width: 1120px; height: 240px; padding: 37px 0px; margin: 0 auto;}
#footer h1 { position: absolute; left: 0; top: 0; width: 290px; height: 240px; text-indent: -9999px; background: url(../images/common/footer_logo.png) center center no-repeat;}

#footer .footInfo { width: 592px; float: right; margin-bottom: 10px;}
#footer .footInfo ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
#footer .footInfo ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
#footer .footInfo ul.list li { float: left; height: 18px; line-height: 18px; color: #5d5d5d; font-size: 12px; margin-right: 12px;}
#footer p.copyright { line-height: 40px; font-size: 13px; color: #979797;}

#footer .footInfo .familysite { position: relative; width: 190px; height: 34px; margin-top: 10px;}
#footer .footInfo .familysite h3 { display: block; height: 34px; line-height: 34px; color: #848484; font-size: 12px; font-weight: normal; text-indent: 14px; background: #fff url(../images/common/icon_arrow_top_gray.png) 164px center no-repeat; cursor: pointer; border: solid 1px #e3e3e3;}
#footer .footInfo .familysite ul.list { display: none; position: absolute; left: 0; top: -33px; width: 190px; }
#footer .footInfo .familysite:hover ul.list { display: block; }
#footer .footInfo .familysite ul.list li { padding-bottom: 2px; height: 34px;}
#footer .footInfo .familysite ul.list li a { display: block; height: 34px; line-height: 34px; background-color: #fff; text-indent: 14px; color: #848484; text-decoration: none; width: 190px;border: solid 1px #e3e3e3; }
#footer .footInfo .familysite ul.list li a:hover { background-color: #e4e4e4; }
#footer .nh { position: absolute;bottom:50px; right: 160px; }


/* quick */

body #quickWrap { position: absolute; left: 50%; top: 426px; width: 90px; margin-left: 580px;}
body #quickWrap h3 { height: 24px; line-height: 24px; text-align: center; color: #fff; font-size: 12px; font-weight: normal; background-color: #3c2916; }
body #quickWrap ul.list { border: 1px solid #e5e5e5; border-width: 0 1px; }
body #quickWrap ul.list li { text-align: center; border-bottom: 1px solid #e5e5e5; }
body #quickWrap ul.list li a { display: block; height: 90px; color: #5e5e5e; text-decoration: none; padding-top: 8px;}
body #quickWrap ul.list li a:hover { color: #000; background-color: #f3f3f3; }
body #quickWrap ul.list li p.icon { height: 56px; line-height: 56px; }
body #quickWrap ul.list li p.icon:before { content: ""; display: inline-block; height: 100%; vertical-align: middle;}
body #quickWrap ul.list li p.icon img { vertical-align:middle;}
body #quickWrap ul.list li p.title { line-height: 20px; }
body.main #quickWrap { display: none;}

ul.mobileLink {display: none;}

/* mediaquery for tab */

@media only screen and (min-width: 801px) and (max-width: 1200px) {

  body #quickWrap { display: none; }

}

/* mediaquery for mobile */

@media only screen and (max-device-width: 800px) {

  .forPC { display: none !important;}
  .forMobile { display: block !important;}
  .mobileMenu { display: none;}

  /* header */

  #header { height: auto;}
  #header .headerIn { width: auto; height: auto;}
  #header h1 a { width: auto; height: 160px; background: url(../images/common/top_logo.png) top 40px center no-repeat; }


  #header .topMenu { position: relative; right: auto; top: auto; text-align: center; }
  #header .topMenu ul.list li { float: none; display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline; margin: 0 5px;}
  #header .search { position: absolute; right: 50%; margin-right: -96px; top: 110px; height: 35px; padding-right: 29px;}

  /* header : gnb */
  #header .gnb{display: none;}
  
  #header .gnbM {display: block; margin: 0 10px;}
  #header .gnbM { position: absolute; right: -23px; top: 45px;}
  #header .gnbM ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
  #header .gnbM ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
  #header .gnbM ul.list li { float: left; height: 64px;}
  #header .gnbM ul.list li a { display: block; height: 64px; line-height: 64px; color: #262626; font-size: 15px; font-weight: bold; text-decoration: none; padding: 0 23px;}
  #header .gnbM ul.list li a:hover { color: #003566;}
  #header .gnbM ul.list li.active a { color: #003566;}
  #header .gnbM { position: relative; right: auto; top: auto; margin-top: 12px;}
  #header .gnbM ul.list li { width:100%; height: 46px;}
  #header .gnbM ul.list li a { color: #fff; height: 46px; line-height: 46px; font-size: 13px; text-align: center; border-right: 1px solid #0a3b68; background-color: #002547; padding: 0;}
  #header .gnbM ul.list li.last a { border-right: 0; }
  #header .gnbM ul.list li a:hover { color: #fff;}
  #header .gnbM ul.list li.active a { color: #fff; background-color: #b92314;}

  /* footer */

  #footer { height: auto;}
  #footer .footerIn { width: auto; height: auto; padding: 26px 20px; }
  #footer h1 { position: relative; left: auto; top: auto; width: auto; height: 90px; margin-bottom: 20px;}

  #footer .footMenu { display: none; }
  #footer .footInfo ul.list li { float: none; height: auto; }
  #footer p.copyright { line-height: 18px; }

	  /* footer */

	.footMenu { height: 45px; width: 100%; padding-left: 10px; }
	.footMenuIn { width: auto; height: auto; }
	#footer .serviceCenter { position: relative; left: 0px; top: 0px; }
	#footer .bankAccount { position: relative; left: 0px; top: 0px; margin-top: 20px; }

	#footer { height: auto; }
	#footer .footerIn { position: relative; width: 100%; height: auto;}
	#footer h1 {display: none;}

	#footer .footInfo { display: block; width: auto; float: none; margin-bottom: 10px; margin-top: 20px;}
        #footer .nh { position: relative; bottom: 0px; right:  0px; margin-top: 10px; }
	


  /* quick */

  body #quickWrap { display: none; }

  /* popup */
  
  #hd_pop { max-width: 100% !important; text-align: center !important; }
  .hd_pops_con { max-width: 100% !important;  height: auto !important; }
  .hd_pops { top:210px !important; max-width: 100% !important; text-align: center !important;  }
  .hd_pops p {width: 100% !important; height: auto !important; text-align: center !important; }
  .hd_pops p img{ width: 100% !important; height: auto !important; overflow: hidden !important;}


	ul.mobileLink {*zoom:1;} /* Hack for browser IE5.5~7 */
	ul.mobileLink:after { content:" "; display:block; clear:both;} /* float virtual element */
	ul.mobileLink { display: block; padding: 0 20px; margin-top: 20px;}
	ul.mobileLink li { float: left; width: 50%; line-height: 24px; font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 20px; }
	ul.mobileLink li a { display: block; margin-bottom: 6px; }
	ul.mobileLink li a img { width: 64px; height: 64px; }


}

/* ==============================================
   main
   ============================================== */

/* visual */

.visWrap { position: relative; height: 530px; z-index: 1;}
#mainVisual { height: 530px ;}
#mainVisual ul.slides { height: 530px;}
#mainVisual ul.slides li { height: 530px; overflow: hidden;
  display: none; 
  -webkit-backface-visibility: hidden;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

#mainVisual ul.slides li p.slogan { position: absolute; left: 50%; top: 110px; margin-left: -540px;}

#mainVisual ul.slides li.v01 { background: url(../images/main/visual_img01.jpg) no-repeat; }


#mainVisual ul.slides li.v02 p.slogan { left: 50%; top: 80px; margin-left: -540px; }

#mainVisual ol.flex-control-nav { position: absolute; left: 0; bottom: 40px; width: 100%; height: 3px; text-align: center; z-index: 99;}
#mainVisual ol.flex-control-nav li { display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline; }
#mainVisual ol.flex-control-nav li a { display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline; width: 13px; height: 16px; text-indent: -9999px;  cursor: pointer; background: url(../images/common/nav_nomal.png) no-repeat;}
#mainVisual ol.flex-control-nav li a.flex-active { background: url(../images/common/nav_active.png)no-repeat;}

/* main body */

#mainBody { width: 100%;}

/* mainInfo */

#mainBody .case { padding: 40px 0px; background-color: #8c99af; margin-bottom: 50px; }
#mainBody .case .mainInfo { width: 1120px; margin: 0 auto; }
#mainBody .case .mainInfo ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
#mainBody .case .mainInfo ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
#mainBody .case .mainInfo ul.list { margin-left: -20px; }
#mainBody .case .mainInfo ul.list li { float: left; width: 360px; height: 200px; padding: 20px; margin-left: 20px; }
#mainBody .case .mainInfo ul.list li h2 { font-size: 17px; color: #2b2c2c; margin-bottom: 15px; }
#mainBody .case .mainInfo ul.list li p.sub { font-size: 13px; line-height: 19px; color: #4a4a4a; }
#mainBody .case .mainInfo ul.list li p.title { font-size: 13px; line-height: 19px; color: #002547; font-weight: bold; margin-top:  18px;}
#mainBody .case .mainInfo ul.list li a.phone { font-size: 36px; color: #002547; font-weight: bold;}
#mainBody .case .mainInfo ul.list li a { display: block; text-decoration: none;}
#mainBody .case .mainInfo ul.list li p.bnt { width: 150px; height:40px; line-height: 40px; color: #fff; background-color: #2768a4; font-size: 13px;  text-align: center;}
#mainBody .case .mainInfo ul.list li.p1 { background: url(../images/main/info_bg01.jpg) left top no-repeat; }
#mainBody .case .mainInfo ul.list li.p2 { background: url(../images/main/info_bg02.jpg) left top no-repeat; }
#mainBody .case .mainInfo ul.list li.p3 { padding: 0 2px;}
#mainBody .case .mainInfo ul.list li.p3 iframe.video { width: 356px; height : 200px; }
/* main contents */

#mainBody .mainContents { margin-bottom: 50px;}

/* recent product */
#mainBody .recentProduct { width: 1120px; margin: 0 auto 100px; }
#mainBody .recentProduct .titleArea { margin-bottom: 30px; }
#mainBody .recentProduct .titleArea h3 { font-size: 25px; letter-spacing: 0.5px; color: #1a1a1a; font-weight: normal;}
#mainBody .recentProduct .titleArea h3 strong { color: #1d5a92; font-weight: normal;}
#mainBody .recentProduct .titleArea h3 span {  font-size: 13px;color: #4f4f4f; letter-spacing: -0.5px; line-height: 25px; padding: 0px 0 0px 10px; margin-left: 10px; border-left: solid 1px #b7b7b7; }

/* main middle */

#mainBody .mainMiddle { position: relative;  height: 280px; background: url(../images/main/middle_bg.jpg) no-repeat; margin-bottom: 70px;}
#mainBody .mainMiddle p.unit { position: absolute; left: 50%; top:-29px; margin-left: -483px; }
#mainBody .mainMiddle p.middleSlogan { position: absolute; left: 50%; bottom: 33px; margin-left: 127px; }

/* mediaquery for tab */

@media only screen and (min-width: 801px) and (max-width: 1200px) {

}

/* mediaquery for mobile */

@media only screen and (max-width: 800px) {

	/* visual */

	.visWrap { position: relative; height: 220px;}
	#mainVisual { height: 220px ;}
	#mainVisual ul.slides { height: 220px;}
	#mainVisual ul.slides li { height: 220px; }

	#mainVisual ul.slides li p.slogan { position: absolute; left: 10px; top: 30px; margin-left: 0px; width: 300px;}
	#mainVisual ul.slides li p.slogan img { width: 100%; }
	#mainVisual ul.slides li.v02 p.slogan { left: 10px; top: 30px; margin-left: 0px; }
	#mainVisual ul.slides li.v02 p.slogan img { width: 100%; } 

	  /* main body */

	#mainBody { height: auto;}

	 /* mainInfo */

	#mainBody .case { padding: 10px 2%;  }
	#mainBody .case .mainInfo { width: 100%;}
	#mainBody .case .mainInfo ul.list { margin-left: 0px; }
	#mainBody .case .mainInfo ul.list li { float: none; width: 100%; margin-left: 0px; margin-bottom: 10px;}
	#mainBody .case .mainInfo ul.list li.p3 iframe.video { width: 100%; }
	
	/* recent product */
	#mainBody .recentProduct { width: 100%; margin-bottom: 10px; }
	#mainBody .recentProduct .titleArea { margin-bottom: 10px;}

	/* main middle */

	#mainBody .mainMiddle { width: 100%; margin-bottom: 10px; }
	#mainBody .mainMiddle p.unit { display: none; }
	#mainBody .mainMiddle p.middleSlogan { margin-left: -160px; bottom: 50px; width: 320px;}
	#mainBody .mainMiddle p.middleSlogan img { width: 100%; }

	  

}