@charset "utf-8";

/* Font */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
 }

/* Element Reset */
header, footer, section, article, nav, aside, figure, figcaption, main { display:block } 
video, audio, iframe, object, embed { max-width:100% }
html, body { min-height:100%; margin:0; padding:0 }
body, table, input, select, textarea, button { font-family:'Noto Sans KR',"돋움",Dotum,"굴림",Gulim,Helvetica,AppleGothic, sans-serif; font-size:13.5px; color:#555 }
img { border:0 }
ul, dl, dt, h1, h2, h3, h4, h5, h6, p, li { margin:0; padding:0 }
li { list-style:none }
a:link, 
a:visited { font-size:13.5px; color:#333; text-decoration:none; }
a:hover,
a:focus { font-size:13.5px; color:#000; text-decoration:none; background:none }
.png24 { tmp:expression(setPng24(this)) }

/* Common Class */
hr { position:absolute; left:-5000px; width:1px; height:1px; margin:0; padding:0 }
.text_left { text-align:left }
.inputRadio,	
.inputCheck { margin:0; width:13px; height:13px }
.inputText, .zle_input { border:1px solid #999; border-right-color:#ccc; border-bottom-color:#ccc; font-size:13.5px; padding:2px 4px 0 4px; height:14px; *margin:-1px 0 }

/* Table */
table { border-spacing:0; border:0 }
table th, table td { padding:0 }

/* All */
.blind		{ position:absolute; display:block; width:1px; height:1px; left:-1000%; overflow:hidden }
.skip			{ font-size:13.5px }
.skip a		{ position:absolute; display:block; width:1px; height:1px; left:-1000%; overflow:hidden }
.skip a:focus,
.skip a:active	{ position:relative; left:0; width:100%; height:auto; padding:5px 0; text-align:center; font-weight:bold; border-bottom:1px solid #dcdcdc }
.after		{ zoom:1 }
.after:after	{ content:""; display:block; clear:both }


/* Layout */
.container			{ position:relative; min-width:1200px; width:100%; margin:0;}
#header			{ position:relative; width:100%; height:150px; margin:0; background:#fff; z-index:999}
#header:after		{ position:absolute; top:95px; left:0; width:100%; height:1px; background:#e8e8e8; content:""}
.body				{ position:relative; width:100%; min-height:600px; padding:0; zoom:1 }
.body:after			{ content:""; clear:both; display:block}
.footer			{ position:relative; min-width:1200px; width:100%; padding:30px 0; font-family:'Noto Sans KR', sans-serif; background:#0f0f0f}

/* Header */
#header .header_area		{ width:1200px; margin:0 auto; font-family:'Noto Sans KR', sans-serif; font-size:13.5px; line-height:1.4 }
#header h1.orgin			{ position:absolute; top:0; left:50%; width:140px; height:47px; margin-left:-70px; padding:25px 0 22px; font-size:0;}
#header h1.fixH1			{ display:none}
#header .header_area>div li	{ float:left; }
#header .sns			{ float:left; margin:43px 0 30px;}
#header .sns li+li		{ margin-left:20px}
#header .top_menu			{ float:right; margin:42px 0 33px;}
#header .top_menu li+li		{ position:relative; padding-left:9px; margin-left:10px}
#header .top_menu li+li:after	{ position:absolute; top:5px; left:0; width:1px; height:10px; background:#dbdbdb; content:""}
#header .top_menu li a		{ font-family:'Roboto', sans-serif; font-weight:300; font-size:14px; color:#737271}

/* Gnb */
#gnb					{ overflow:hidden; text-align:center; }
#gnb>ul				{ overflow:hidden; }
#gnb>ul>li				{ display:inline-block; *display:inline; padding:0 20px; }
#gnb>ul>li>a			{ position:relative; display:block; overflow:hidden; padding:15px 10px}
#gnb>ul>li>a .line		{ position:absolute; left:0; right:0; bottom:0; width:0; height:3px; margin:0 auto; background:#181818; content: ""; }
#gnb>ul>li>a>strong		{ display:inline-block; *display:inline; color:#1a1a19; font-size:18.5px; font-family:'Noto Sans KR', sans-serif; font-weight:500;}
.eng					{ font-family:'Roboto', sans-serif; font-size:19.5px; font-weight:700; line-height:1; } 
.gnb_sub {
    position: absolute;
    top:150px;
    width: 100%;
    overflow: hidden;
    background: rgba(0,0,0,.8);    
    z-index: 10;

    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;    

    /* css 애니메이션처리*/
    -moz-transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0, 1);
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0, 1);
    -o-transition-timing-function: cubic-bezier(0, 1, 0, 1);
    transition-timing-function: cubic-bezier(0, 1, 0, 1);
}
.gnb_sub .gnb_sub_area								{ width:985px; height:100%; margin:0 auto;}
.gnb_sub .gnb_sub_area .sub_menu						{ height:100%; margin-left:7px}
.gnb_sub .gnb_sub_area .sub_menu:after					{ content:""; clear:both; display:block; }
.gnb_sub .gnb_sub_area .sub_menu_list					{ float:left; text-align:left; padding-bottom:11px}
.gnb_sub .gnb_sub_area .sub_menu_list.list1				{ width:170px}
.gnb_sub .gnb_sub_area .sub_menu_list.list2				{ width:149px}
.gnb_sub .gnb_sub_area .sub_menu_list.list3				{ width:134px}
.gnb_sub .gnb_sub_area .sub_menu_list.list4				{ width:117px}
.gnb_sub .gnb_sub_area .sub_menu_list.list5				{ width:171px}
.gnb_sub .gnb_sub_area .sub_menu_list.list6				{ width:166px}
.gnb_sub .gnb_sub_area .sub_menu_detail li:first-child a		{ padding-top:22px}
.gnb_sub .gnb_sub_area .sub_menu_list .sub_menu_detail a		{ display:block; color:#fff; font-size:14px; font-family:'Noto Sans KR', sans-serif; line-height:20px}
.gnb_sub .gnb_sub_area .sub_menu_list .sub_menu_detail li		{ margin-bottom:8px;}
.gnb_sub .gnb_sub_area .sub_menu_list .sub_menu_detail li.on a,
.gnb_sub .gnb_sub_area .sub_menu_list .sub_menu_detail li a:hover	{ color:#bfbfbf; }

.gnb_sub.active {
    /* css 애니메이션처리*/
    -moz-transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    max-height: 1000px;
    overflow: hidden;
}

/* Header 고정*/
#header.fix					{ position:fixed; top:0; height:60px; background:#0f0f0f}
#header.fix:after,
#header.fix h1.orgin,		
#header.fix .sns				{ display:none;}
#header.fix .header_area		{ width:100%; min-width:1200px;}
#header.fix h1.fixH1			{ display:inline-block; *display:inline; margin:12px 0 0 2%}
#header.fix .top_menu			{ margin:20px 2% 0 0;}
#header.fix .top_menu li a		{ color:#c3c3c3}
#header.fix #gnb				{ position:absolute; width:1035px; top:5px; left:50%; margin-left:-515px;}
#header.fix #gnb>ul>li>a>strong	{ color:#fff; font-size:18.5px;}
#header.fix #gnb>ul>li>a .line	{ background:#fff; }
#header.fix .gnb_sub			{ top:60px}


/* Footer */
.footer .btn_footer				{ width:1200px; margin:0 auto 20px; }
.footer .btn_footer li				{ float:left; line-height:1.5 }
.footer .btn_footer .btn			{ float:left;}
.footer .btn_footer .btn li a			{ font-size:16px; margin-right:20px; font-family:'Noto Sans KR', sans-serif; color:#d4d4d4; font-weight:400;  }
.footer .btn_footer .btn li a strong	{ font-weight:700; }
.footer .btn_footer .sns			{ float:right;}
.footer .btn_footer .sns li			{ margin-left:18px}
.footer .btn_footer .sns li a			{ opacity:.8}
.footer .btn_footer .sns li a:hover,
.footer .btn_footer .sns li a:focus		{ opacity:1}

.footer_area				{ width:1200px; margin:0 auto;}
.footer_area address			{ font-style:normal; line-height:1.5}
.footer_area address div		{ float:left; width:100%; zoom:1 }
.footer_area address dl			{ float:left; font-family:'Noto Sans KR', sans-serif; font-weight:300; font-size:13.5px; color:#fff; margin:0 }
.footer_area address dt			{ float:left; }
.footer_area address dd			{ float:left; margin:0 15px 0 5px; }
.footer_area address dd a		{ font-size:1em; color:#fff;}
.footer_area address dd a.btn		{ display:inline; margin-left:3px; padding:1px 5px; font-size:.85em; color:#cdcdcd; border:1px solid #575757; border-radius:3px}

.footer_area .copyright			{ margin-top:10px; color:#a6a6a6;}
.footer_area .kcp				{ float:right; width:auto; margin:-55px 0 0 }



@media screen and (max-width:1460px) {
	#header.fix	h1.fixH1,
	#header.fix .top_menu	{ display:none}
}

@charset "utf-8";

/* Layout */
#header             { position:relative;}

/* Visual */
.sub_visual                 { position:relative; width:100%; max-width:2000px; height:275px; margin:0 auto; overflow:hidden; }
.sub_visual .m_banner           { overflow: hidden; position: relative;}
.sub_visual .m_banner ul li     { float:left; width:2000px;}
.sub_visual .l_btn          { position:absolute; top:40%; left:8%; z-index:100}
.sub_visual .r_btn          { position:absolute; top:40%; right:8%; z-index:100}
.sub_visual .visual_txt         { position:absolute; top:70px; left:50%; width:1200px; margin-left:-600px; font-family:'Noto Sans KR', sans-serif; letter-spacing:-.04em; }
.sub_visual .visual_txt h2      { position:relative; padding-top:5px; font-weight:500; font-size:32px; color:#181818;}
.sub_visual .visual_txt h2:after    { position:absolute; top:0; left:0; width:40px; height:1px; background:rgba(0,0,0,.3); content:""}
.sub_visual .visual_txt p       { margin-top:8px; font-size:15px; color:rgba(24,24,24,.7);}

/* 서브메뉴 */
.sub_left           { width:1200px; margin:-56px auto 0;}
.lnb                { width:100%; margin:0 0 45px; text-align:center; border-bottom:1px solid rgba(24,24,24,.7);}
.lnb li         { display:inline-block; *display:inline; position:relative; width:195px; }
.lnb li a           { display:block; padding:0 1em; font-size:18px; font-family:'Noto Sans KR', sans-serif; font-weight:700; letter-spacing:-.05em; line-height:55px; text-align:left; color:#181818; background:rgba(255,255,255,.9);}
.lnb li a._over,
.lnb li a:hover,
.lnb li a:focus     { margin:-1px 0; line-height:55px; background:#fff url(/img/sub/bg_lnb_on.png) no-repeat 88% 50%; border:1px solid rgba(24,24,24,.7); border-bottom:1px solid #fff;}

.tab                { width:1200px; margin:0 auto; border-left:1px solid #e8e8e8}
.tab li         { float:left; position:relative; width:11.1%; margin-bottom:-1px }
.tab a          { display:block; font-size:15px; text-align:center; font-family:'Noto Sans KR', sans-serif; font-weight:300; line-height:45px; color:#6a6a6a; border:1px solid #e8e8e8; border-left:0 }
.tab a._over,
.tab a:hover,
.tab a:focus        { color:#000; background:#e8e8e8 }

/* 콘텐츠 */
h2.tit          { position:relative; margin:40px 0 30px; padding-top:100px; font-family:'NanumMyeongjo'; font-weight:700; font-size:40px; text-align:center; letter-spacing:-.05em; color:#181818 }
h2.tit:before       { position:absolute; top:45px; left:50%; width:1600px; height:400px; margin-left:-800px; background:#f9f9f9; content:""; z-index:-1}
h2.tit:after        { position:absolute; top:0; left:50%; width:1px; height:85px; background:#181818; content:""}

/* Board */
.board_area                 { width:1200px; min-height:500px; margin:0 auto 60px }
.board_area .products           { margin:0 0 0 6px;}
.board_area .products:nth-child(4n) { margin-left:0}



@media screen and (max-width:1600px) {
    h2.tit:before           { left:0; max-width:100%; margin-left:0} 
}