@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} /*display: flex ; justify-content: flex-start; align-items: center; gap: 30px;*/ /* 헤더 */ #header {top:0px;left:0px;position:absolute;z-index:90;width:100%;-webkit-transition: 0.3s ease;-o-transition: 0.3s ease;transition: 0.3s ease;border:solid 0px red;background:#fff;} #header.fixed .header-bottom {position:fixed;left:0px;top:0px;width:100%;background:#fff;} @media screen and (min-width:1024px) { /*body.scroll #header {position:fixed;top:0px;left:0px;width:100%;/*margin-top: -132px;z-index:1000;box-shadow:0 1px 1px 1px rgb(0 0 0 / 10%);}*/ #header.on #logo.scroll {display:block;} #header #logo.no-scroll {display:none;} body.scroll #header #logo.scroll {display:block;}*/ } #header #logo {z-index:10;} #header #logo.no-scroll {display:block;} #header #logo.scroll {display:none;} #header .inner {margin:0px auto;width:1800px;} #header .header-top {border-bottom:solid 1px #ddd;height:50px;position:relative;} #header .header-top .inner {position:relative;} #header .header-top .left span {display:inline-block;position:relative;} #header .header-top .left span:before {content:'';right:0px;top:15px;height:18px;width:1px;background:#ddd;position:absolute;} #header .header-top .left span:last-child:before {display:none;} #header .header-top .left span a {padding:0px 10px;line-height:50px;color:#555;font-size:16px;position:relative;display:block;} #header .header-top .left span a:hover {color:#222;} #header .header-top .left span a:hover:before {content:'';position:absolute;background:#555;height:2px;width:100%;bottom:0px;left:0px;} #header .header-top .right {position:absolute;right:0px;top:0px;} #header .header-top .right span {} #header .header-top .right span a {padding:0px 25px;line-height:49px;color:#222;font-size:16px;position:relative;display:block;background:#eee;} #header .header-logo {border-bottom:solid 1px #ddd;text-align:center;} #header .header-logo #logo {margin:40px auto;} #header .header-logo .inner {position:relative;} #header .header-logo .left-link {position:absolute;left:0px;top:0px;} #header .header-logo .left-link > div {display:inline-block;vertical-align:top;text-align:left;} #header .header-logo .left-link .imgArea {position:relative;top:-15px;} #header .header-logo .left-link .txtArea {color:#333;font-size:19px;padding-left:10px;} #header .header-logo .left-link .txtArea .color1 {color:#0089c8;} #header .header-logo .left-link .txtArea .color2 {color:#f36f21;} #header .header-logo .right-link {position:absolute;right:0px;top:0px;} #header .header-logo .right-link ul {} #header .header-logo .right-link ul li {display:inline-block;margin-left:10px;} #header .header-bottom {border-bottom:solid 0px #ddd;position:relative;} #header.on .header-bottom:before {content:'';width:100%;position:absolute;left:0px;top:90px;height:1px;background:#ddd;} .mask {display:none; position:fixed; width:100%; height:0;left:0px; background:#000; opacity:0; z-index:998; transition:all 0.3s ease} #header .header-bottom > .btm {position:relative; width:1200px;height:90px;overflow:hidden;top:0px;display:block;margin:0px auto;border:solid 0px red;} #header.on .header-bottom {background:#f9f9f9;} #header.on .header-bottom > .btm {} #header.on .header-bottom > .btm:before {} #nav {width:auto;height:auto;margin:auto;font-size:0px;} #nav:after {display:inline-block; width:100%; content:'';} #nav > li {display:inline-block; width:20%;padding:0px 20px;vertical-align:top;text-align:center;} #nav > li > a {display:block; font-size:22px; font-weight:600; color:#454545; line-height:90px;/*font-famILy:'YeojuCeramic';*/} #nav > li div.menu-item {display:;width:100%;position:relative;z-index:99;padding:20px 0px;} #nav > li div.menu-item .inner {width:auto;margin:0px auto;} #nav > li div.menu-item.active {display:block} #nav > li div.menu-item:after {clear:both; display:block; content:''} #nav > li div.menu-item ul {position:relative;top:0px;left:0px;/*height:400px;*/} #nav > li div.menu-item ul:after {clear:both; display:block; content:''} #nav > li div.menu-item ul:before {} #nav > li div.menu-item ul > li {position:relative;width:auto;} #nav > li div.menu-item ul > li a {font-size:22px;font-weight:500;color:#000;position:relative;transition:all 0.3s ease;padding:8px 0px;display:inline-block;letter-spacing:-1px;} #nav > li div.menu-item ul > li a:hover:after {content:'';position:absolute;background:#0189c8;height:2px;width:100%;left:0px;bottom:0px;} #nav > li div.menu-item ul > li.on a:after {width:100%;} #nav > li div.menu-item ul > li.on a, #nav > li div.menu-item ul > li a:hover {color:#0189c8;} #nav > li.on > a, #nav > li > a:hover, #nav > li.open a,#nav > li:hover > a {color:#0189c8;} #nav > li:before {content:'';width:100%;position:fixed;} /*스크롤시 헤더호버시 스타일*/ @media screen and (min-width:1024px) { body.scroll #header {background:#fff;} } body.scroll #header #nav > li > a {color:#000;} body.scroll #header #nav > li:hover > a {color:#0189c8} body.scroll #header #nav > li.on > a,#header.on #nav > li > a:hover,#header.on #nav > li.open a {color:#4b84ed} /* 익스헤더고정 막음 */ /*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { body.scroll #header {position:absolute;top:0px;left:0px;width:100%;margin-top: 0px;z-index:1000;background:none;} body.scroll #header #nav > li > a {color:#fff;} }*/ /*헤더호버시 스타일*/ #header.on {background:#fff;} #header.on #nav > li > a {color:#000;position:relative;} #header.on #nav > li:hover > a {color:#0189c8} #header.on #nav > li:hover > a:before {content:'';width:100%;position:absolute;left:0px;top:90px;height:2px;background:#0189c8;} #header.on #nav > li div.menu-item ul > li a {color:#000;} #header.on #nav > li div.menu-item ul > li.on a,#header.on #nav > li div.menu-item ul > li a:hover {color:#0189c8} #header.on #nav > li.on > a {color:#fff} #header.on #nav > li > a:hover {color:#0189c8} #header.on #nav > li > a:hover:before {content:'';width:100%;position:absolute;left:0px;top:90px;height:2px;background:#0189c8;} #header.on #nav > li.open a {color:#0189c8} /* 모바일메뉴버튼 */ #gnbTrigger {display:none; position:fixed; top:10px; right:10px; width:50px; height:50px; border:none; background:#fff; cursor:pointer; outline:none; z-index:1100;transition:all .3s ease-in-out;} #gnbTrigger > span {display:block; position:absolute; left:50%; width:26px; height:2px; margin-left:-13px; background:#000; transition:all .3s ease-in-out; transform:rotate(0deg); opacity:1} #gnbTrigger > .bar1 {top:16px} #gnbTrigger > .bar2 {top:24px;width:22px;margin-left:-9px;} #gnbTrigger > .bar3 {top:32px} #gnbTrigger.open {background:#fff;} #gnbTrigger.open > span {background:#000;} #gnbTrigger.open > .bar1 {top:24px; transform:rotate(135deg)} #gnbTrigger.open > .bar2 {opacity:0; left:-30px} #gnbTrigger.open > .bar3 {top:24px; transform:rotate(-135deg)} /* 전체메뉴 */ #all-menu {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1900} #all-menu .mask_all {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; z-index:990} #all-menu .menu-layer {position:fixed; top:0px; left:0px; width:100%; height:100%;font-size:0px;background:#fff; z-index:1100} #all-menu .menu-layer .btnClose {position:absolute; top:18px; right:20px; width:40px; height:40px; border:none; background:transparent; outline:none; cursor:pointer;z-index:10;} #all-menu .menu-layer .btnClose span {position:absolute; top:50%; left:50%; display:block; width:32px; height:2px; margin:-2px 0 0 -16px; background:#404040;transition:1s ease} #all-menu .menu-layer .btnClose span.line1 {transform:rotate(45deg)} #all-menu .menu-layer .btnClose span.line2 {transform:rotate(-45deg)} /*#all-menu .menu-layer .btnClose:hover {border-color:#aaa;} #all-menu .menu-layer .btnClose:hover span.line1 {transform:rotate(225deg);} #all-menu .menu-layer .btnClose:hover span.line2 {transform:rotate(-225deg);}*/ #all-menu .menu-layer .title-bar {position:relative; text-align:center; width:100%;display:inline-block;vertical-align:top;} #all-menu .menu-layer .title-bar h2 {padding-top:115px;margin-bottom:20px;} #all-menu .menu-layer .menu-wrapper {width:1475px;display:block;vertical-align:top;margin:110px auto 0px;} #all-menu .menu-layer .menu-wrapper .depth1 {} #all-menu .menu-layer .menu-wrapper .depth1 > li {padding:17px 0px;display:inline-block;vertical-align:top;width:18%;margin-right:2%;text-align:center;position:relative;} #all-menu .menu-layer .menu-wrapper .depth1 > li:last-child {margin-right:0px;} #all-menu .menu-layer .menu-wrapper .depth1 > li:before {content:'';position:absolute;background:#0189c8;height:2px;width:100%;left:0px;top:80px;} #all-menu .menu-layer .menu-wrapper .depth1 > li > a {font-size:28px;color:#222;font-weight:bold;margin-bottom:55px;display:block;} #all-menu .menu-layer .menu-wrapper .depth1 > li ul > li a {font-size:24px; color:#222;position:relative;font-weight:bold;padding:15px 0px;display:inline-block;} #all-menu .menu-layer .menu-wrapper .depth1 > li ul > li a:hover {color:#0189c8;} #all-menu .menu-layer .menu-wrapper .depth1 > li ul > li a:hover:before {content:'';position:absolute;background:#0189c8;height:2px;width:100%;left:0px;bottom:10px;} /* 상단으로 스크롤 */ #scrollTop {display:none; position:fixed; bottom:30px; right:30px; display:inline-block; width:60px; height:60px; text-align:center; color:#222; line-height:60px; border-radius:50%; background:#fff; transition:none !important; z-index:900;border:solid 1px #ddd;} #scrollTop i {position:absolute; top:30%; left:30%; transition:all .4s ease;font-size:25px;} #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} /* 푸터 */ #footer {background:#252726} #footer > .inner {width:1800px; margin:auto; padding:50px 0px 50px;position:relative;} #footer > .inner a {color:#fff !important} #footer > .inner .companyInfo {float:left} #footer > .inner .companyInfo p {color:#fff; line-height:1.75;margin-bottom:20px;} #footer > .inner .companyInfo ul li {display:inline-block; color:#fff; line-height:1.75; margin-right:10px;font-size:16px;} #footer > .inner .copyright {color:#fff; line-height:1.75; padding-top:0px} #footer > .inner .snsArea {position:absolute;right:0px;top:100px;} #footer > .inner .snsArea span {margin-left:10px;} /* 미디어쿼리 */ @media screen and (max-width:1800px) { #header .inner {width:100%;padding:0px 20px;} #header .header-logo .left-link {position:absolute;left:20px;top:0px;} #header .header-logo .right-link {position:absolute;right:20px;top:0px;} #nav > li div.menu-item ul > li a {font-size:20px;} #footer > .inner {width:100%;padding:50px 20px;} #footer > .inner .snsArea {right:20px;} } @media screen and (max-width:1440px) { #wrapper {width:100%;min-width:auto;} @media screen and (max-width:1280px) { #header .header-logo #logo a img {width:400px;} #header .header-bottom > .btm {width:100%;} } #nav {width:100%;} #nav > li div.menu-item .inner {width:100%;} #nav > li {padding:0px;text-align:center;} #nav > li:last-child {} #nav > li div.menu-item ul {} #footer > .inner {max-width:100%; margin:auto; padding:30px 20px} } @media screen and (max-width:1024px) { #header {position:fixed;} #header #logo {z-index:0;} #mask {z-index:0;} #header .header-logo .left-link {display:none;} #header .header-logo .right-link {display:none;} #header .header-top {display:none;} #header .header-bottom > .btm {position:fixed;right:-300px;width:300px;z-index:999;background:#fff;height:100%;top:0px;overflow-y:auto;-ms-overflow-style:none;padding-left:0px;margin-top:0px;padding-top:70px;} body.scrollfix #header .header-cover > .btm {right:-300px;width:300px;} #gnbTrigger {display:block !important} .m_search {display:block;position:absolute;left:25px;top:20px;} .m_search a {font-size:26px;color:#0039a4;} .mask {display:block} #header .header-logo #logo {position:relative;margin:20px auto;} #header .header-logo #logo a img {width:270px;} #header .menu-m-link {position:absolute;left:20px;bottom:20px;} #header .menu-m-link .left span {display:block;margin-bottom:10px;} #header .menu-m-link .left span a {font-size:16px;} #header .menu-m-link .right-link {margin-top:30px;} #header .menu-m-link .right-link li {display:inline-block;margin-right:5px;} #header .menu-m-link .right-link li a img {width:30px;} #nav {width:100%;height:auto;margin:auto;overflow:hidden;font-size:0px;z-index:100;position:relative;background:#fff;} #nav:after {display:block; width:100%; content:'';} #nav > li {display:block; width:auto;padding:0px;text-align:left;border-bottom:solid 1px #ebebeb;width:100% !important;} #nav > li:first-child {border-top:solid 1px #ebebeb;} #nav > li:last-child {width:auto;} #nav > li > a {display:block; font-size:16px; font-weight:400; color:#404040; line-height:50px;padding-left:20px;} #nav > li.on_ > a {color:#4b84ed} #nav > li div.menu-item {display:none;width:100%;position:relative;z-index:99;background:#f9f9f9;left:0px;border-top:solid 1px #ebebeb;padding:0px 0px 0px;border-bottom:0px;} #nav > li div.menu-item .imgArea {width:100%;} #nav > li div.menu-item .inner {width:100%;margin:0px auto;} #nav > li div.menu-item.active {display:block} #nav > li div.menu-item:after {clear:both; display:block; content:''} #nav > li div.menu-item ul {float:none; width:100%; padding-top:10px;padding-bottom:20px;margin-left:0px;display:inline-block;height:auto;} #nav > li div.menu-item ul:after {clear:both; display:block; content:''} #nav > li div.menu-item ul:before {display:none;} #nav > li div.menu-item ul > li {float:left; width:100%; margin-bottom:0px;margin-right:0px;} #nav > li div.menu-item ul > li a {font-size:14px;color:#404040;display:block;line-height:2;padding-left:20px;padding-top:0px;padding-bottom:0px;} #nav > li div.menu-item ul > li a:before {display:none;} #nav > li div.menu-item ul > li a:hover:after {display:none;} #nav > li div.menu-item ul > li a:after {display:none;} #nav > li div.menu-item ul > li.on a, #nav > li div.menu-item ul > li a:hover {color:#4b84ed} #nav > li.on > a, #nav > li > a:hover {color:#333} #nav > li:before {content:'';width:100%;position:fixed;} #nav > li:first-child {padding-left:0px;} #nav > li:last-child {padding-right:0px;} /* 푸터 */ #footer {} #footer > .inner {} #footer > .inner a {color:#fff !important} #footer > .inner .companyInfo {float:left} #footer > .inner .companyInfo p {margin-bottom:10px;} #footer > .inner .companyInfo p img {height:20px;} #footer > .inner .companyInfo ul li {line-height:1.3; margin-right:10px;font-size:13px;} #footer > .inner .copyright {} #footer > .inner .snsArea {position:relative;right:auto;top:auto;margin-top:20px;display:inline-block;} #footer > .inner .snsArea span {margin-left:0px;margin-right:5px;} #footer > .inner .snsArea span a img {width:30px;} /* 상단으로 스크롤 */ #scrollTop {bottom:20px; right:20px;width:40px; height:40px; line-height:40px;} #scrollTop i {top:24%; left:26%;font-size:18px;} } @media screen and (max-width:768px) { /* 헤더 */ } @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} }