@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);


@import 'motion.css';

@font-face {
  font-family: 'NotoSansCJKkr-Light';
  font-style: normal;
  font-weight: normal;
  src: url(../font/NotoSansCJKkr-Light.eot);
  src: url(../font/NotoSansCJKkr-Light.eot?#iefix) format('embedded-opentype'),
	   url(../font/NotoSansCJKkr-Light.woff) format('woff'),
	   url(../font/NotoSansCJKkr-Light.otf) format('opentype');
}
@font-face {
  font-family: 'NotoSansCJKkr-Medium';
  font-style: normal;
  font-weight: bold;
  src: url(../font/NotoSansCJKkr-Medium.eot);
  src: url(../font/NotoSansCJKkr-Medium.eot?#iefix) format('embedded-opentype'),
	   url(../font/NotoSansCJKkr-Medium.woff) format('woff'),
	   url(../font/NotoSansCJKkr-Medium.otf) format('opentype');
}

/* basic css */
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, font, 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, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section {margin: 0; padding: 0; border: 0;}
article, aside, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section {display: block;}
html, body { height:100%;}
body {font-size: 18px; font-family: NotoSansCJKkr-Light, "맑은 고딕",  "돋음", dotum, sans-serif;  color:#4c4c4c; line-height:1.6; letter-spacing:-1px; -webkit-text-size-adjust:none; }
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
a:link { color: #4c4c4c; text-decoration: none; }
a:visited { color: #4c4c4c; text-decoration: none; }
a:hover { color: #4c4c4c; text-decoration: none; }
a:active { color: #4c4c4c; text-decoration: none; }
a:focus { color: #4c4c4c; text-decoration: none; }
select, input, textarea {font-size: 100%;vertical-align: middle ; font-family: NotoSansCJKkr-Light, "맑은 고딕",  "돋음", dotum, sans-serif;}
input {margin: 0;padding: 0;}
ol, ul {list-style: none;}
label {cursor: pointer;}
legend, caption {width: 0;height: 0; visibility: hidden; font-size: 0;line-height: 0;}
button {cursor: pointer;}
button:focus {outline: 1px dotted;}
img {vertical-align: top;}
table {}

.hidden {position: absolute;width: 0;height: 0;visibility: hidden;font-size: 0;line-height: 0; top:-9999px}

#skipNav	{ z-index: 600; position: absolute; position: fixed;  top: 0; left: 0; width: 100%; }
#skipNav a { position: absolute;  top: -9999px; display: block; }
#skipNav a span { display: block; padding: 10px 0; border: 3px solid #FFB747; background: #000; color: #fff; text-align: center; }
#skipNav a:hover, #skipNav a:active, #skipNav a:focus { z-index: 600; top: 0; display: inline-block; width: 100%; }

input[type="text"] {box-sizing:border-box; -webkit-appearance:none;}
input:-ms-input-placeholder {color:#808080}
input::-webkit-input-placeholder {color:#808080}
input::-moz-placeholder {color:#808080}
input::-moz-placeholder {color:#808080}
textarea {}

::-webkit-scrollbar {

display:none;

}

.point {color:#916b4a}
html, body {height:100%; min-height:100%; -ms-overflow-style: none;}

/* layout*/
header {position: fixed; width:100%; min-width:320px;  }

.visual-area {position:relative;width:100%; height:400px; z-index:-1 }
.visual-area {width:100%; text-align:center;}
.visual-area .tit-img {width:100%; text-align:center;}
.visual-area .tit-img p {padding-top:198px; text-align:center;}
.visual-area .tit-img p img {max-width:100%; vertical-align:top;} 
.visual-area .visual-img {position:absolute; width:100%; height:400px; bottom:0;  overflow:hidden; text-align:center;  z-index:-1}
.visual-area .visual-img img {position:absolute;left:50%; top:0; margin-left:-960px; }

.navi {position:absolute; width:100%; height:129px; box-sizing:border-box; border-bottom: 1px solid rgba(255, 255, 255, .3); z-index:50; left:0; right:0; margin:0 auto;}

h1 { position:absolute; left:0px;}
h1 a {display:inline-block;width:176px; height:129px;background:url(../images/common/logo.png) no-repeat 0 0px; text-indent:-9999px;}

h2 { position:absolute; right:180px;}
h2 a {display:inline-block;width:314px; height:129px;background:url(../images/common/tel.png) no-repeat 0 0px; text-indent:-9999px;}

.gnb {position:absolute; top:0; left:50%; margin-left:-530px;z-index:2;overflow:hidden;height:129px;letter-spacing:0}
.gnb ul li {position:relative;float:left; width:110px; text-align:center;}
.gnb .depth1 {position:relative; display:block; color:#fff; font-size:15px; font-family:NotoSansCJKkr-Medium; line-height:129px;}

.gnb ul li ul {display:block;padding:25px 0; background:url(../images/common/gnb_bg.gif) no-repeat right 36px; min-height:140px; opacity:0;transform:translateY(20px); }
.gnb ul li ul li {float:none; height:28px; width:auto; }
.gnb ul li ul li a {font-size:13px; color:#777; font-weight:600; }
.gnb ul li ul li a:hover {color:#262951;}
.gnb .line {position:absolute; display:block; bottom:-1px; height:0px; width:0%; background:#262951; left:60px;  }
.navi-bg {position:absolute; display:block;width:100%; height:0px; left: 0; top: 129px; z-index:1; overflow: hidden;  }
.navi-bg .white-bg {width:100%; height:100%; background:#fff;  }
.navi-bg.open {border-bottom:1px solid rgba(0,0,0,.1); }
.menu-icon {display:none;}


.gnb>ul>li>a { overflow:hidden; }

.gnb>ul>li>a .menu-ov1 { position:absolute; top:0px;  transition-duration:0s; opacity:0; margin-top:136px;   height:31px; overflow:hidden; width:110px; text-align:center; z-index:1; transition-duration:0.5s; }
.gnb>ul>li>a:hover .menu-ov1 { top:0px; left:0px; position:absolute; margin-top:100px;  transition-duration:0.5s; opacity:1;}

.gnb>ul>li>a .menu-ov2 { position:absolute; top:0px;  transition-duration:0s; opacity:0; margin-top:136px;   height:31px; overflow:hidden; width:110px; text-align:center; z-index:1; transition-duration:0.5s;}
.gnb>ul>li>a:hover .menu-ov2 { top:0px; left:0px; position:absolute; margin-top:100px;  transition-duration:0.5s; opacity:1; }

.gnb>ul>li>a .menu-ov3 { position:absolute; top:0px;  transition-duration:0s; opacity:0; margin-top:136px;   height:31px; overflow:hidden; width:110px; text-align:center; z-index:1; transition-duration:0.5s;}
.gnb>ul>li>a:hover .menu-ov3 { top:0px; left:0px; position:absolute; margin-top:100px;  transition-duration:0.5s; opacity:1; }

.gnb>ul>li>a .menu-ov4 { position:absolute; top:0px;  transition-duration:0s; opacity:0; margin-top:136px;   height:31px; overflow:hidden; width:110px; text-align:center; z-index:1; transition-duration:0.5s;}
.gnb>ul>li>a:hover .menu-ov4 { top:0px; left:0px; position:absolute; margin-top:100px;  transition-duration:0.5s; opacity:1;}

.gnb>ul>li>a .menu-ov5 { position:absolute; top:0px;  transition-duration:0s; opacity:0; margin-top:136px;   height:31px; overflow:hidden; width:110px; text-align:center; z-index:1; transition-duration:0.5s;}
.gnb>ul>li>a:hover .menu-ov5 { top:0px; left:0px; position:absolute; margin-top:100px;  transition-duration:0.5s; opacity:1;}

.gnb>ul>li>a .menu-ov6 { position:absolute; top:0px;  transition-duration:0s; opacity:0; margin-top:136px;   height:31px; overflow:hidden; width:110px; text-align:center; z-index:1; transition-duration:0.5s;}
.gnb>ul>li>a:hover .menu-ov6 { top:0px; left:0px; position:absolute; margin-top:100px;  transition-duration:0.5s; opacity:1;}

.gnb>ul>li>a .menu-ov7 { position:absolute; top:0px;  transition-duration:0s; opacity:0; margin-top:136px;   height:31px; overflow:hidden; width:110px; text-align:center; z-index:1; transition-duration:0.5s;}
.gnb>ul>li>a:hover .menu-ov7 { top:0px; left:0px; position:absolute; margin-top:100px;  transition-duration:0.5s; opacity:1;}


.shop { position:absolute; right:0;}


.language {position:absolute; top:0px; right:0px; letter-spacing:0; width:314px; z-index:90 }
.language a.sel-tit {display:block; color:#fff; font-size:12px; background:url(../images/common/arr_w.png) no-repeat 74% center; height:30px; padding-right:11px; line-height:30px; box-sizing:border-box; }
.language.on a.sel-tit  {color:#666; background:url(../images/common/f_arr.png) no-repeat 74% center;}
.language-in {position:relative; text-align:center; border:1px solid transparent; box-sizing:border-box}
.language.on .language-in {width:314px; height:129px; background:#fff; border:1px solid #ccc; }
.language.on .language-in ul {display:block;}
.language-in ul {display:none; position:absolute; top:31px; background:#fff; z-index:3; width:100%; box-sizing:border-box; padding-top:2px}
.language-in ul li {font-size:13px; line-height:24px; text-align:left; padding-left:18px}
.language-in ul li a {color:#4c4c4c; display:block}
.language-in ul li a span {padding-right:12px}
.language-in ul li a:hover span {color:#262951 ; background:url(../images/common/language_bg.png) no-repeat right center;}

.bgw {background:#fff; }
.navi.wh {background:#fff; border-bottom: 1px solid rgba(0, 0, 0, .3); width:100%; left:0; right:0; position:fixed; }
.navi.wh h1 a {background:url(../images/common/logo_w.png) no-repeat 0 0px;}
.navi.wh h2 a {background:url(../images/common/tel_w.png) no-repeat 0 0px;}
.navi.wh .gnb .depth1 {color:#333;}
.navi.wh .gnb .depth1:hover { color:#262951; }
.navi.wh .language a.sel-tit  {color:#666 !important; background:url(../images/common/f_arr_on.png) no-repeat 74% center;}
.navi.wh .language.on a.sel-tit {background:url(../images/common/f_arr.png) no-repeat 74% center;}


#container {position:relative; width:100%; min-width:320px; z-index:1; background:#fff;}

@media all and (max-width:1700px) { 
		.gnb { margin-left:-570px;}

	}


@media all and (max-width:1380px) { 
		h1 { position:absolute; left: 50%; margin-left:-600px;}
		h2 { position:absolute; right: 50%; margin-right: -650px; display:none;}
		.gnb { margin-left:-410px;}
		
		

	}


	
	


@media all and (min-width:1930px) { 

.navi { width:1920px; left:50%; margin-left:-960px;}
.navi.wh {width:1920px; left:50%; margin-left:-960px; position:fixed; }

}