@charset "utf-8";
/* body */
body.lock {overflow:hidden}
/* 브라우저 업데이트 권장 팝업 */
#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 {position:fixed; top:20px; left:0; width:100%; z-index:990; transition:all .4s ease}
#header:before {position:absolute; top:-20px; left:0; width:100%; height:0; content:''; background:#fff; box-shadow:0 2px 2px rgba(0, 0, 0, .04); z-index:10; transition:all .4s ease}
#header > .inner {position:relative; max-width:1400px; margin:0 auto; padding:0 50px; z-index:30}
#logo {float:left; width:130px; padding-top:10px}
#logo a img {display:block; width:100%}
.logo_white { display:none; }
#gnb {float:right}
#gnb > li {position:relative; display:inline-block; vertical-align:top}
#gnb > li > a {display:block; padding:25px 35px; font-size:15px; color:#fff}
#gnb > li > ul {display:none; position:absolute; top:80px; left:50%; width:180px; margin-left:-90px; padding:0 20px; background:#fff; box-shadow:0 4px 20px rgba(0, 0, 0, .08)}
#gnb > li > ul:before {position:absolute; top:-12px; left:50%; content:''; margin-left:-6px; border-style:solid; border-width:6px; border-color:transparent transparent #fff transparent}
#gnb > li > ul > li {position:relative}
#gnb > li > ul > li > a {position:relative; display:block; padding:15px 0; border-bottom:1px solid #e0e0e0}
#gnb > li > ul > li:last-child > a {border-bottom:none}
#header.fixed {top:0}
#header.fixed:before {top:0; height:100%}
#header.fixed #gnb > li > a {color:#000}
#header.fixed #gnb > li > a:after {display:none}
#gnbTrigger {display:none; position:fixed; top:0; left:0; width:50px; height:50px; border:none; background:#fff; cursor:pointer; outline:none; z-index:1100}
#gnbTrigger > span {display:block; position:absolute; left:50%; width:30px; height:3px; margin-left:-15px; background:#000; transition:all .3s ease-in-out; transform:rotate(0deg); opacity:1}
#gnbTrigger > .bar1 {top:16px}
#gnbTrigger > .bar2 {top:24px}
#gnbTrigger > .bar3 {top:32px}
#gnbTrigger.open {background:#000}
#gnbTrigger.open > span {background:#fff}
#gnbTrigger.open > .bar1 {top:24px; transform:rotate(135deg)}
#gnbTrigger.open > .bar2 {opacity:0; left:-30px}
#gnbTrigger.open > .bar3 {top:24px; transform:rotate(-135deg)}
/* 상단으로 스크롤 */
#scrollTop {display:none; position:fixed; bottom:30px; right:30px; display:inline-block; width:45px; height:45px; text-align:center; color:#fff; line-height:45px; border-radius:50%; background:#555; transition:none !important; z-index:900}
#scrollTop i {position:absolute; top:35%; left:35%; transition:all .4s ease}
#scrollTop span {position:absolute; width:100%; top:0; left:50%; font-weight:600; margin-left:-22px; line-height:45px; opacity:0; filter:alpha(opacity='0'); transform:rotate(-360deg); transition:all .4s ease}
#scrollTop.on i {opacity:0; filter:alpha(opacity='0'); transform:rotate(360deg)}
#scrollTop.on span {display:block; opacity:1; filter:alpha(opacity='100'); transform:rotate(0deg)}
/* 문단 */
#container p {line-height:1.75}
/* 폼메일 */
.tbl_formmail {width:100%; margin-bottom:40px}
.tbl_formmail:before {display:block; width:100%; height:1px; margin-bottom:40px; content:''; background:#e8e8e8}
.tbl_formmail input {font:inherit !important}
.tbl_formmail input[type=file] {width:100%}
.tbl_formmail input[type=text], .tbl_formmail input[type=password] {width:100%; height:60px; font-size:14px !important; color:#666; padding-left:20px; border:none; border-radius:4px; background:#f0f0f0}
.tbl_formmail input[name^=phone] {width:80px !important}
.tbl_formmail select {height:40px; line-height:38px; padding:0 10px; border:1px solid #e0e0e0; cursor:pointer}
.tbl_formmail textarea {font:inherit !important; font-size:14px !important; line-height:1.75; width:100%; min-height:150px; padding:20px; border:none; border-radius:4px; background:#f0f0f0}
.tbl_formmail select:focus, .tbl_formmail select:hover {border-color:#d8d8d8}
.tbl_formmail tbody td {font:inherit !important; font-size:0 !important; padding:3px 0}
.tbl_formmail tbody td br {display:none}
.tbl_formmail tbody td font, .tbl_formmail tbody td span, .tbl_formmail tbody td a {font:inherit !important; font-size:14px !important}
.formmail_title_bgcolor {display:none}
/* 공통 UI */
.btn {display:inline-block; height:40px; margin:0 1px; padding:0 30px !important; font:inherit !important; color:#666; line-height:38px !important; text-decoration:none !important; border:1px solid #d8d8d8; border-radius:3px; background:#fff; cursor:pointer; vertical-align:middle}
.btn-default {border-color:#ddd}
.btn-default:hover {color:inherit !important; border-color:#cdcdcd; background:#f4f4f4}
.btn-primary {color:#fff !important; border-color:#93bd93; background:#d62424}
.btn-primary:hover {border-color:#86b186 !important; background:#86b886 !important}
.btn-danger {color:#fff !important; border-color:#c14646; background:#cc4a4a}
.btn-danger:hover {border-color:#ad4444 !important; background:#b44b4b !important}
.btn i {margin-right:10px; vertical-align:-1px}
.btn i.right {margin:0 0 0 10px}
.btn-sm {height:35px; padding:0 20px !important; border-radius:2px; line-height:33px !important}
.btn-lg {height:50px; line-height:48px !important}
/* 푸터 */
#footer {background:#222}
#footer > .inner {max-width:1400px; margin:auto; padding:30px 50px}
#footer > .inner a {color:#999 !important}
#footer > .inner .companyInfo {float:left}
#footer > .inner .companyInfo p {color:#999; line-height:1.75}
#footer > .inner .companyInfo ul li {display:inline-block; color:#999; line-height:1.75; margin-right:10px}
#footer > .inner .copyright {float:right; color:#999; line-height:1.75; padding-top:25px}

/* 미디어쿼리 */
@media screen and (min-width:1025px) {
 /* 헤더 */
 #gnb > li > a:after {display:none; margin-top:5px; height:1px; content:''; background:#fff}
 #gnb > li.on > a:after, #gnb > li.open > a:after, #gnb > li > a:hover:after {display:block}
 #gnb > li > ul > li > a:hover {color:#d62424}
 #gnb > li > ul > li:after {position:absolute; bottom:0; left:0; width:0; height:1px; content:'' !important; background:#d62424; transition:all .4s ease}
 #gnb > li > ul > li:hover:after {width:100%}
 #gnb > li > ul > li:last-child:after {display:none}
 #header.fixed #gnb > li > a:hover, #header.fixed #gnb > li.on > a {color:#d62424}
}
@media screen and (max-width:1024px) {
 /* 헤더 */
 #logo {display:none; position:relative; float:none; margin:15px auto 0 auto; padding:0; z-index:1100}
 #gnbWrapper {position:fixed; top:0; left:-100%; width:100%; height:100%; background:#fff; z-index:1010}
 #gnbTrigger {display:block !important}
 #gnb {float:none; margin-top:120px; text-align:center}
 #gnb > li {display:block}
 #gnb > li > a {display:inline-block; font-size:48px; padding:8px 15px !important; color:#333}
 #gnb > li.open > a {color:#fff !important; background:#333}
 #gnb > li > ul {position:static; margin:0 !important; width:auto; text-align:center; background:transparent; box-shadow:none}
 #gnb > li > ul:before {display:none}
 #gnb > li > ul > li > a {font-size:24px; padding:8px 0; border-bottom:none}
}
@media screen and (max-width:768px) {
 /* 헤더 */
 #gnb > li > a {font-size:32px !important}
 #gnb > li > ul > li > a {font-size:18px}
 /* 푸터 */
 #footer > .inner {padding:25px; text-align:center}
 #footer > .inner p {font-size:11px}
 #footer > .inner .companyInfo {float:none}
 #footer > .inner .companyInfo ul li {font-size:11px}
 #footer > .inner .copyright {float:none; padding-top:0}
}
@media screen and (max-width:640px) {
 /* 폼메일 */
 .tbl_formmail input {font:inherit !important; font-size:12px !important}
 .tbl_formmail input[type=text], .tbl_formmail input[type=password] {font-size:12px !important}
 .tbl_formmail input[name^=phone] {width:50px !important}
 .tbl_formmail select {font-size:12px !important}
 .tbl_formmail textarea {font-size:12px !important}
}