@charset "utf-8";

/* body */
body.main #wrapper {background:none !important}

/* browser update notification popup */
#browserUpdate {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#111; z-index:9999}
#browserUpdate .inner {position:absolute; top:50%; left:50%; width:800px; margin:-275px 0 0 -400px; padding:100px 70px; text-align:center; background:#fff}
#browserUpdate .inner h2 {font-size:42px; margin-bottom:30px}
#browserUpdate .inner p {color:#777; line-height:1.8; margin-bottom:40px}
#browserUpdate .inner ul {text-align:justify}
#browserUpdate .inner ul:after {display:inline-block; width:100%; content:''}
#browserUpdate .inner ul li {display:inline-block; width:24%; padding:20px; border:1px solid #e8e8e8; vertical-align:top}
#browserUpdate .inner ul li:hover {background:#fafafa}
#browserUpdate .inner ul li .icon {width:48px; height:48px; margin:0 auto 25px auto}
#browserUpdate .inner ul li .icon img {display:block; width:100%}
#browserUpdate .inner ul li a {display:block; height:35px; font-family:'돋움','Dotum'; font-size:12px; color:#444; text-align:center; line-height:31px; border:1px solid #dedede; border-bottom:3px solid #dadada; background:#f9f9f9}
#browserUpdate .inner ul li a:hover {background:#fff}
#browserUpdate .inner ul li a:active {border-top:1px solid #dadada; border-bottom:1px solid #dedede; background:#f4f4f4}


/* header */
#header {position:fixed; top:0; left:0; width:100%;z-index:990}
#header .inner {position:relative; padding:0 50px}
#header #logo {position:absolute; top:50px; left:50px;transition:all .2s ease}
#header #logo.dark-mode {display:none;}
#header #logo img {display:block; width:100%}
#header #nav {font-size:0; text-align:right}
#header #nav > li {display:inline-block; font-size:14px}
#header #nav > li.only-mobile {display:none}
#header #nav > li > a {position:relative; display:block; padding:0 15px; line-height:110px; transition:all .2s ease}
#header #nav > li > a:before {position:absolute; top:55px; left:50%; width:0px; height:5px; content:''; background:#ffb04c; transition:all 0.3s cubic-bezier(0.77, 0, 0.175, 1)}
#header #nav > li > a > span {position:relative; font-size:16px; color:#666; letter-spacing:0; z-index:20; transition:all 0.2s cubic-bezier(0.77, 0, 0.175, 1)}
#header #nav > li > a:hover:before, #header #nav > li.on > a:before {width:80%;left:10%;}
#header #nav > li > a:hover > span, #header #nav > li.on > a > span {color:#232323}
#header #nav > li.on > a > span {/*font-weight:600*/}
#header #nav > li > ul {display:none}
#header #btn-nav-open {display:none}
#header #btn-nav-close {display:none}
#header #navWrapper .nav-footer {display:none}

#header.fixed #nav > li > a {line-height:80px; transition:none !important}
#header.fixed #nav > li > a:before {top:40px;}
#header.fixed #logo {top:25px;/* width:150px*/}


#header > .inner .contact-btn {display:none}

#header.fixed > .inner .contact-num {top:11px}
#header.fixed > .inner .contact-num h2 {font-size:14px}

#header-contact {position:fixed; top:0; left:0; width:100%; height:0; overflow:hidden; z-index:980}
#header-contact #header-map {height:100vh}
#header-contact .contact-info {position:absolute; top:0; left:15px; padding:50px; background:#fff; z-index:1000}
#header-contact .contact-info a {color:#0163c6; letter-spacing:1px !important}
#header-contact .contact-info a:hover {color:#222; text-decoration:underline}
#header-contact .contact-info .main {margin-bottom:30px}
#header-contact .contact-info .main h2 {font-size:22px; font-weight:600; color:#0163c6; letter-spacing:0 !important; margin-bottom:10px}
#header-contact .contact-info .main p {font-size:14px; color:#666; letter-spacing:1px !important}
#header-contact .contact-info > ul > li {padding:20px 0; border-bottom:1px solid #e6e6e6}
#header-contact .contact-info > ul > li h3 {font-size:16px; color:#222; letter-spacing:0 !important; margin-bottom:5px}
#header-contact .contact-info > ul > li p {font-size:14px; color:#666; letter-spacing:1px !important}
#header-contact .contact-info > ul > li p.gap {margin-bottom:10px}
#header-contact .contact-info > ul > li > ul > li {font-size:14px; color:#666; letter-spacing:1px !important}
#header-contact .btn-close {position:absolute; top:0; right:0; width:70px; height:70px; background:#0163c6; cursor:pointer; z-index:1000}
#header-contact .btn-close:before {position:absolute; top:0; left:0; width:100%; height:0; content:''; background:#f6aa49; z-index:10; transition:all .2s cubic-bezier(0.77, 0, 0.175, 1)}
#header-contact .btn-close:hover:before {height:70px}
#header-contact .btn-close span {position:absolute; display:block; left:50%; width:36px; height:2px; margin-left:-18px; background:#fff; z-index:20}
#header-contact .btn-close span.line1 {top:34px; transform:rotate(45deg)}
#header-contact .btn-close span.line2 {top:34px; transform:rotate(-45deg)}

/* bottom slide banner */
#bottom_slider {position:fixed; bottom:0; left:0; width:100%; height:90px; background:url(../img/foot_be_bg.jpg) repeat-x; z-index:990}
#bottom_slider .inner {position:relative; max-width:1200px; height:100%; margin:0 auto; overflow:hidden}
#bottom_slider .inner ul {position:relative; margin-bottom:0 !important; padding:0 !important; list-style-type:none}
#bottom_slider .inner ul li {clear:both}
#bottom_slider .inner ul li img {display:block; width:100%; height:90px}
#btmSlide {position:absolute; top:25px; right:0; z-index:100}

/* desianSample Button */
span.designSample {position:fixed; display:inline-block; width:50px;font-size:20px; height:50px; bottom:50px;left:50px; margin-top:-25px; color:#fff; text-align:center; line-height:55px;background:#0c0c0c; border:1px solid #0c0c0c; border-radius:50px;-webkit-transition:all .4s;transition:all .4s;z-index:99;}
span.designSample i {-webkit-transition:all .4s;transition:all .4s}
span.designSample:hover i {opacity:0;}
span.designSample:hover {width:170px;height:50px;background:#ffb04c;border:solid 1px #ffb04c;}
span.designSample p {-webkit-transition:all .4s;transition:all .4s;opacity:0;color:#fff;position:absolute;top:-2px;font-size:16px;overflow:hidden;height:50px;}
span.designSample:hover p {display:block;margin-left:33px;}


/* footer */
#scrollTop {display:none; position:fixed; bottom:50px; right:50px; width:60px; height:60px; border:none; background:#0163c6; cursor:pointer; outline:none; z-index:1000;border-radius:10px;}
#scrollTop i {position:absolute; top:50%; left:0; width:100%; font-size:24px; color:#fff; text-align:center; margin-top:-12px; transition:all .25s ease-out}
#scrollTop span {position:absolute; display:block; top:50%; left:0; width:100%; font-size:12px; color:#fff; text-align:center; opacity:0; margin-top:-7px; transition:all .25s ease-out; transform:rotate(180deg)}
#footer {clear:both; padding:50px 0 120px; text-align:center; letter-spacing:0; background:#fff;border-top:solid 1px #ddd;}
#footer .ft_logo {position:absolute; left:50px;top:0px;}
#footer .ft_logo.dark-mode {display:none;}
#footer p {font-size:12px; color:#888; line-height:1.75; letter-spacing:0;margin:20px 0px;}
#footer a {font-size:12px; color:#888; letter-spacing:0}


/* media query */
@media screen and (min-width:1025px) {
	/* header */
	#header #nav > li.on > a > span {border-bottom:0px solid #757575}

	/* footer */
	#scrollTop:hover i {transform:rotate(-180deg); opacity:0}
	#scrollTop:hover span {transform:rotate(0); opacity:1}
}

@media screen and (max-width:1024px) {
	/* header */
	body.fixed {height:100vh; overflow-y:hidden}
	#header {top:0 !important}
	#header .inner {height:50px}
	#header #logo {position:static; margin:0 auto; padding-top:15px; width:140px}
	#header #btn-nav-open {display:block; position:absolute; top:50%; left:40px; width:40px; height:40px; margin-top:-20px; border:none; background:transparent; cursor:pointer; outline:none}
	#header #btn-nav-open span {position:absolute; display:block; width:20px; height:2px; left:50%; margin-left:-10px; border-radius:2px; background:#777}
	#header #btn-nav-open .line1 {top:12px}
	#header #btn-nav-open .line2 {top:18px}
	#header #btn-nav-open .line3 {top:24px}
	#header #btn-nav-close {display:block; position:absolute; top:25px; right:30px; width:40px; height:40px; border:none; background:transparent; cursor:pointer; outline:none}
	#header #btn-nav-close span {position:absolute; display:block; width:28px; height:2px; left:50%; margin-left:-14px; background:#0163c6}
	#header #btn-nav-close .line1 {top:18px; transform:rotate(45deg)}
	#header #btn-nav-close .line2 {top:18px; transform:rotate(-45deg)}
	#header #navWrapper {display:none; position:fixed; top:0; left:0; width:100%; height:100%; padding:15%; background:#fff; z-index:1000; overflow-y:auto}
	#header #nav > li {display:list-item; text-align:left; margin-bottom:20px}
	#header #nav > li.callMap {display:none}
	#header #nav > li.only-mobile {display:block}
	#header #nav > li > a {display:inline; padding:0; line-height:inherit}
	#header.fixed #nav > li > a {line-height:inherit}
	#header #nav > li > a:before {display:none}
	#header #nav > li > a > span {font-size:36px; color:#333}
	#header #nav > li.open > a > span, #header #nav > li.on > a > span {border-bottom:3px solid #333}
	#header #nav > li > ul {margin:10px 0 15px 0; padding-left:20px}
	#header #nav > li > ul > li {margin-bottom:10px}
	#header #nav > li > ul > li > a {font-family:'NanumSquare'; font-size:38px; color:#999}
	#header #navWrapper .nav-footer {display:list-item; font-size:12px; color:#666; line-height:1.2}
	#header #navWrapper .nav-footer p {margin-bottom:15px}
	#header #navWrapper .nav-footer p:first-child {margin-top:30px}
	#header #navWrapper .nav-footer span {font-size:12px; color:#0163c6}
	#header-contact {display:none}
	#header > .inner .contact-num {display:none}
	#header > .inner .contact-btn {display:block; position:absolute; top:5px; right:40px; width:40px; height:40px; text-align:center}
	#header > .inner .contact-btn i {font-size:20px; color:#777; line-height:40px}

	#bottom_slider {display:none}

	#footer {padding:50px 0}
	#footer a {}
	#footer a img {height:19px;}
	#footer .ft_logo {position:relative;left:auto;}
	#footer .ft_logo a img.mobile-style {display:inline-block !important;}
	#footer p {margin:10px 0px;font-size:10px;}
	
}

@media screen and (max-width:768px) {
	/* header */
	#header #btn-nav-open {left:10px}
	#header #navWrapper {padding:30px}
	#header #nav > li {margin-bottom:10px}
	#header #nav > li > a > span {font-size:24px}
	#header #nav > li.open > a > span, #header #nav > li.on > a > span {border-bottom:2px solid #333}
	#header #nav > li > ul > li {margin-bottom:5px}
	#header #nav > li > ul > li > a {font-size:24px}
	#header > .inner .contact-btn {right:10px}

	/* footer */
	#scrollTop {bottom:30px; right:30px; width:40px; height:40px}
	#scrollTop i {font-size:16px; margin-top:-8px}
	span.designSample {bottom:25px;left:25px;}
}

@media screen and (min-width:1025px) {
	/* header */
	#header #navWrapper {display:block !important}
}