@charset "utf-8";
/* Àüü ·¹À̾ƿô */
body {background-color: #080d11;
      background-image: url(../img/bg_ken.png), url(../img/bg_volvo.png),url(../img/bg-blue-01.jpg) ;
      background-position: left bottom, right bottom, center top ;
      background-repeat:  no-repeat no-repeat, no-repeat;
	  background-attachment: fixed, fixed,fixed;
	  background-size: auto, auto, cover;
	  cursor: url(https://x-skin.net/template/wrb10c-dark/css/cc_xskin.cur),default;
}
::-webkit-scrollbar {
	width: 8px;
	background-color: #ccc
}

::-webkit-scrollbar-thumb {
	background-color: #21bbb1
}
a {cursor: url(https://x-skin.net/template/wrb10c-dark/css/cc.cur),pointer;}

#wrap {}
#header {position:absolute; top:0; left:0; width:100%; height:auto; z-index:100}
/* »ó´Ü ¿µ¿ª */
#header .inner {position:relative; max-width:1400px; height:80px; margin:0 auto; padding:0 50px}
#header h1 {width:130px; padding-top:18px}
#header h1 img {display:block; width:100%}
#header h1 img.black {display:none !important}
#header #gnbOpen {position:absolute; top:25px; right:50px; width:36px; height:36px; cursor:pointer; z-index:100}
#header #gnbOpen span {position:absolute; left:0; display:block; width:100%; height:2px; background:#21bbb1; transition:all .4s ease}
#header #gnbOpen span:before {position:absolute; width:0; height:100%; content:''; background:#fff; transition:all .3s ease}
#header #gnbOpen:hover span:before {width:100%}
#header #gnbOpen span.bar1 {top:0}
#header #gnbOpen span.bar2 {top:12px}
#header #gnbOpen span.bar3 {top:24px}
#header #gnbOpen span.bar3 {top:24px}
#header #gnbOpen.open span.bar1 {top:18px; transform:rotate(45deg)}
#header #gnbOpen.open span.bar2 {display:none}
#header #gnbOpen.open span.bar3 {top:18px; transform:rotate(-45deg)}
#header.scroll {position:fixed; left:0; width:100%; background:#222}
#header.scroll h1 img.black {display:block !important}
#header.scroll h1 img.white {display:none}

/* °øÅë Àüü ¸Þ´º */
#navigation {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:url(../img/nav_bg.png); z-index:990}
#nav_wrap {position:absolute; top:20%; left:0; width:100%; height:auto; text-align:center}
#gnb {}
#gnb > ul {position:relative; text-align:center}
#gnb > ul > li > a {position:relative; display:inline-block; font-size:32px; color:#fff; line-height:1.2; padding:10px 0; transition:all .3s ease}
#gnb > ul > li > a:before {position:absolute; top:50%; left:0; width:0; height:1px; content:''; background:#21bbb1; transition:all .3s ease}
#gnb > ul > li > a:hover {color:#21bbb1}
#gnb > ul > li > a:hover:before {width:100%}
#gnb > ul > li > ul.submnu {display:none; position:relative; margin-top:10px}
#gnb > ul > li > ul.submnu > li > a {position:relative; display:inline-block; font-size:17px; color:#999; padding:5px 0; line-height:1.2; transition:all .3s ease}
#gnb > ul > li > ul.submnu > li > a:before {position:absolute; top:50%; left:0; width:0; height:1px; content:''; background:#21bbb1; transition:all .3s ease}
#gnb > ul > li > ul.submnu > li > a:hover {color:#21bbb1}
#gnb > ul > li > ul.submnu > li > a:hover:before {width:100%}
#snb {display:inline-block; margin:30px auto 0 auto}
#snb ul {text-align:center; padding-top:20px; border-top:1px solid rgba(255,255,255,.4)}
#snb ul li a {position:relative; display:inline-block; font-size:16px; color:#999; line-height:1.2; padding:10px 0; transition:all .3s ease}
#snb ul li a:hover {color:#21bbb1}
#snb ul li a:before {position:absolute; top:50%; left:0; width:0; height:1px; content:''; background:#21bbb1; transition:all .3s ease}
#snb ul li.on a {color:#21bbb1}
#snb ul li a:hover:before {width:100%}
#nav_wrap .snsList {margin-top:30px}
#nav_wrap .snsList ul li {display:inline-block; margin:0 5px}
#nav_wrap .snsList ul li a img {display:block}
#gnbClose {display:none; position:absolute; top:40px; left:50%; margin-left:-30px; width:52px; height:52px; border:1px solid rgba(255,255,255,.3); cursor:pointer; z-index:1010}
#gnbClose span {position:absolute; display:block; left:50%; width:60%; height:2px; margin-left:-30%; background:#fff; opacity:.4; filter:alpha(opacity='40')}
#gnbClose:hover {border-color:#21bbb1}
#gnbClose:hover span {background-color:#21bbb1; opacity:1; filter:alpha(opacity='100')}
#gnbClose span.bar1 {top:24px; transform:rotate(45deg)}
#gnbClose span.bar2 {top:24px; transform:rotate(-45deg)}
#btnNav {display:none; position:absolute; top:20px; right:50px; width:40px; height:40px; border:none; border-radius:2px; background:transparent; cursor:pointer; z-index:1000}
#btnNav span {position:absolute; display:block; right:0; width:20px; height:2px; background:#000; transition:all .4s ease}
#btnNav span.bar1 {top:12px}
#btnNav span.bar2 {top:18px}
#btnNav span.bar3 {top:24px}
#btnNav.open span {background:#fff}
#btnNav.active span.bar1 {top:18px; transform:rotate(45deg)}
#btnNav.active span.bar2 {display:none}
#btnNav.active span.bar3 {top:18px; transform:rotate(-45deg)}
/* »ó´Ü ½ºÅ©·Ñ ¹öÆ° */
#scrollTop {display:none; position:fixed; bottom:30px; left:0; width:100%; height:50px; z-index:100}
#scrollTop .inner {max-width:1400px; margin:0 auto; padding:0 10px; text-align:right}
#scrollTop .inner a {position:relative; display:inline-block; width:45px; height:45px; text-align:center; color:#fff; line-height:45px; border-radius:50%; background:#21bbb1}
#scrollTop .inner a img {position:absolute; top:35%; left:35%; transition:all .4s ease}
#scrollTop .inner a span {position:absolute; width:100%; top:0; left:50%; font-size:13px; font-weight:600; margin-left:-22px; line-height:45px; opacity:0; filter:alpha(opacity='0'); transform:rotate(-360deg); transition:all .4s ease}
#scrollTop .inner a.on img {opacity:0; transform:rotate(360deg)}
#scrollTop .inner a.on span {display:block; opacity:1; filter:alpha(opacity='100'); transform:rotate(0deg)}
/* ÇÏ´Ü ¿µ¿ª */
#footer {clear:both; padding: 0; background:#222}
#footer .inner {max-width:1400px; margin:0 auto; padding:0 30px}
#footer .inner:after {clear:both; display:block; content:''}
#footer .logo {float:left; padding-top:10px; width:120px}
#footer .logo img {display:block; width:100%}
#footer .info {float:left; margin-left:50px; color:#aaa}
#footer .info address {color:#aaa}
#footer .info ul li {display:inline-block; margin-right:10px; color:#aaa}
#footer .info ul li span {color:#ddd}
#footer .info p.copyright {color:#aaa}
#footer a {color:#aaa !important}

/* ¹Ìµð¾î Äõ¸® */
@media screen and (max-width:1400px) {
 #gnb > ul > li > a {font-size:22px; padding:6px 0}
 #gnb > ul > li > ul.submnu {display:none; position:relative}
 #gnb > ul > li > ul.submnu > li > a {font-size:14px; padding:3px 0}
 #snb ul li a {font-size:13px; padding:5px}
}
@media screen and (max-width:1024px) {
 #header h1 {width:120px; padding-top:20px}
 #gnb {float:none; max-width:initial; margin:0; padding:0}
 #gnb > li {float:none; width:100%; height:auto; text-align:left}
 #gnb > li > a {height:auto; padding:15px 25px; font-size:16px; border-bottom:1px solid #dedede; border-left:none; border-right:none}
 #gnb > li > a > span {padding:0}
 #gnb > li > a > span:before {display:none}
 #gnb > li > ul.submnu li:before {display:none}
 #gnb > li.dropdown > a:before {position:absolute; display:block; width:2px; height:14px; right:31px; top:50%; margin-top:-7px; content:''; background:#aaa; transition:all .3s ease}
 #gnb > li.dropdown > a:after {position:absolute; display:block; width:14px; height:2px; right:25px; top:50%; margin-top:-1px; content:''; background:#aaa}
 #gnb > li.open > a:before {transform:rotate(90deg)}
 #gnb > li > ul.submnu {display:none; position:static; width:100%; margin:0; padding:0; background:#f6f6f6; opacity:1 !important; filter:alpha(opacity='100') !important; box-shadow:none}
 #gnb > li > ul.submnu li {padding:0; border-color:#dedede}
 #gnb > li > ul.submnu li a {font-size:15px; padding:10px 25px}
 #gnb_mask {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; filter:alpha(opacity='60'); z-index:200}
 #btnNav {display:block}
 #footer .logo {float:none; margin:0 auto 30px auto; padding:0; text-align:center}
 #footer .info {float:none; margin:0; text-align:center}
}
@media screen and (max-width:640px) {
 #header .inner {padding:0 30px}
 #header h1 {width:100px; padding-top:25px}
 #header #gnbOpen {width:28px; height:28px; right:15px}
 #gnb > ul > li > a {font-size:18px; padding:8px 0}
 #gnb > ul > li > ul.submnu {margin-top:5px}
 #gnb > ul > li > ul.submnu > li > a {font-size:13px; padding:5px 0}
 #snb {margin-top:20px}
 #nav_wrap .snsList ul li a img {width:24px; height:24px}
 #gnbClose {width:36px; height:36px; top:30px; margin-left:-18px}
 #gnbClose span.bar1 {top:16px}
 #gnbClose span.bar2 {top:16px}
 #footer {padding:30px 0}
 #footer .inner {padding:0 30px}
 #footer .logo {width:95px}
 #footer .info address, #footer .info p {font-size:12px}
}