@charset "utf-8";

/* 전체레이아웃 */
#wrapper {/*min-width:1200px;*/ overflow:hidden;position:relative;position:static !important}
/* 헤더고정 */
/*body.scrollfix #container {margin-top:61px}*/
/* 컨테이너 */

/*@media screen and (min-width:1024px) {
#header {position:absolute;top:0px;width:100%;z-index:990;}
}*/

/* 헤더 */
#header {top:0px;left:0px;position:absolute;z-index:9;width:100%;-webkit-transition: 0.3s ease;-o-transition: 0.3s ease;transition: 0.3s ease;}
#header > .top {padding:35px 0; border-bottom:1px solid rgba(255,255,255,0.3);}
#header.on > .top {border-bottom:1px solid rgba(103,103,103,0.3);}
#header > .top > .inner {position:relative; width:1400px; margin:0 auto}
@media screen and (min-width:1023.98px) {
	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;}
}

#header .logo {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
#header .logo.no-scroll {display:block;}
#header .logo.scroll {display:none;}
#header .logo > a {display:block;width:185px}
#header .logo img {display:none;max-width:100%;height:auto;}
/*#header.on .logo .pc-style {display:none !important;}*/
@media screen and (min-width:1023.98px) {
	#header .logo > a {width:235px;}
}
@media screen and (min-width:1339.98px) {
	#header .logo > a {width:300px;}
}

.m_search {display:none;}
#header > .top > .inner .left-link {float:left; font-size:0;padding-top:0px;}
#header > .top > .inner .left-link > li {display:inline-block; margin-right:25px; text-align:center;vertical-align:top;position:relative;}
#header > .top > .inner .left-link > li a {display:inline-block;text-align:center;}
#header > .top > .inner .left-link > li a i {font-size:18px;color:#fff;position:relative;top:3px;border:solid 1px #fff;width:37px;height:37px;border-radius:37px;padding-top:8px;}
#header > .top > .inner .left-link > li a span {font-size:12px; font-weight:400; color:#fff;display:block;margin-top:8px;}
#header > .top > .inner .right-link {float:right; font-size:0; padding-top:7px}
#header > .top > .inner .right-link .search {float:left;padding-top:8px}
#header > .top > .inner .right-link .search input {width:130px;height:28px;border:0px;background:#f0f0f0;border-radius:20px; margin-right:20px;padding-left:10px;}
#header > .top > .inner .right-link ul {float:left; padding-top:14px}
#header > .top > .inner .right-link ul > li {display:inline-block; margin-right:20px;color:#f1f1f1;font-size:12px;}
#header > .top > .inner .right-link ul > li:last-child {margin-right:0px;}
#header > .top > .inner .right-link ul > li a {font-size:12px; color:#fff;font-weight:500;padding:10px 20px;border:solid 1px #fff;border-radius:100px;}
#header > .top > .inner .right-link ul > li a i {font-weight:600; margin-right:5px; vertical-align:-1px;color:#fff}
#header > .top > .inner .right-link ul > li.right-tel a {background:#4b84ed;color:#fff;font-size:15px;font-weight:600;border:0px;position:relative;top:-2px;}

.mask {display:none; position:fixed; width:100%; height:0; background:#000; opacity:0; z-index:998; transition:all 0.3s ease}
#header > .btm {position:relative; border-bottom:1px solid rgba(255,255,255,0.3);height:60px;overflow:hidden;top:0px;}
#header.on > .btm {border-bottom:1px solid rgba(103,103,103,0.3);}
#header.on > .btm:before {width:100%;height:1px;content:'';position:absolute;left:0px;top:60px;border-bottom:1px solid rgba(103,103,103,0.3);}
#header > .btm .m_loginArea {display:none;height:77px;width:100%;border-bottom:solid 1px #ebebeb;}
#header > .btm .m_loginArea ul {padding:25px 0px 0px 20px;}
#header > .btm .m_loginArea ul li {display:inline-block;padding:0px 5px;}
#header > .btm .m_loginArea ul li a {font-size:14px;}
 
#nav {width:1400px;height:60px;margin:auto;font-size:0px;}
#nav:after {display:inline-block; width:100%; content:'';}
#nav > li {display:inline-block; width:147.7px;}
#nav > li:last-child {width:70px;}
#nav > li > a {display:block; font-size:16px; font-weight:400; color:#fff; line-height:60px}
#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 > li {position:relative;width:auto;}
#nav > li div.menu-item ul > li a {font-size:16px; /*font-weight:600; */color:#fff;position:relative;transition:all 0.3s ease;padding:8px 0px;display:inline-block;}
#nav > li div.menu-item ul > li a:after {content:'';position:absolute;left:0px;top:18px;width:0px;height:6px;background:rgba(11,96,192,0.15);transition:all 0.3s ease}
#nav > li div.menu-item ul > li a:hover:after {width:120%;}
#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:#4b84ed}
#nav > li.on > a, #nav > li > a:hover, #nav > li.open a,#nav > li:hover > a {color:#4b84ed}
#nav > li:before {content:'';width:100%;position:fixed;}
#nav > li:first-child {padding-left:0px;}
#nav > li:last-child {padding-right:0px;}

/*스크롤시 헤더호버시 스타일*/
@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:#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 > .top > .inner .left-link > li a {transition:all 0.3s ease}
#header.on > .top > .inner .left-link > li a i {color:#000;border:solid 1px #000;transition:all 0.3s ease}
#header.on > .top > .inner .left-link > li a span {color:#000;}
#header.on > .top > .inner .left-link > li a:hover i {color:#fff;border:solid 1px #4b84ed;background:#4b84ed;}
#header.on > .top > .inner .left-link > li a:hover span {color:#4b84ed;}
#header.on #nav > li > a {color:#000;}
#header.on #nav > li:hover > a {color:#4b84ed}
#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:#4b84ed}
#header.on #nav > li.on > a,#header.on  #nav > li > a:hover,#header.on  #nav > li.open a {color:#4b84ed}
#header.on > .top > .inner .right-link ul > li a {color:#000;border:solid 1px #000;transition:all 0.3s ease}
#header.on > .top > .inner .right-link ul > li a i {color:#000}
#header.on > .top > .inner .right-link ul > li a:hover {color:#fff;border:solid 1px #4b84ed;background:#4b84ed;}
#header.on > .top > .inner .right-link ul > li a:hover i {color:#fff}
#header.on > .top > .inner .right-link ul > li.right-tel a {background:#4b84ed;color:#fff;border:0px;}


/* 모바일메뉴버튼 */ 
#gnbTrigger {display:none; position:fixed; top:0px; right:0px; width:77px; height:76px; 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:3px; margin-left:-13px; background:#000; transition:all .3s ease-in-out; transform:rotate(0deg); opacity:1}
#gnbTrigger > .bar1 {top:26px}
#gnbTrigger > .bar2 {top:34px;width:22px;margin-left:-9px;}
#gnbTrigger > .bar3 {top:42px}
#gnbTrigger.open {background:#4b84ed}
#gnbTrigger.open > span {background:#fff}
#gnbTrigger.open > .bar1 {top:34px; transform:rotate(135deg)}
#gnbTrigger.open > .bar2 {opacity:0; left:-30px}
#gnbTrigger.open > .bar3 {top:34px; transform:rotate(-135deg)}




/* 퀵메뉴 */
#quickmenu {position:fixed; top:185px; right:0px; z-index:900}
#quickmenu .iconlist > li {display:block; width:80px; height:80px; font-size:12px; color:#fff; text-align:center;/* line-height:80px;margin-bottom:1px; */ border-bottom:solid 1px #333;background:#222; cursor:pointer;padding-top:20px;}
#quickmenu .iconlist > li:last-child {border:0px;}
#quickmenu .iconlist > li > i {font-size:16px;}
#quickmenu .iconlist > li.icon1:hover, #quickmenu .iconlist > li.icon1.on {background:#867460}
#quickmenu .iconlist > li.icon2:hover, #quickmenu .iconlist > li.icon2.on {color:#222; background:#ffea29}
#quickmenu .iconlist > li.icon3:hover, #quickmenu .iconlist > li.icon3.on {background:#867460}
#quickmenu .iconlist > li.icon4:hover, #quickmenu .iconlist > li.icon4.on {background:#21bbb1}
#quickmenu .quick-layer {position:fixed; top:185px; right:-480px; padding:45px 50px; width:480px; height:640px; background:rgba(0, 0, 0, .9); z-index:900}
#quickmenu .quick-layer .title {margin-bottom:40px}
#quickmenu .quick-layer .title h2 {font-size:30px; font-weight:600; color:#fff; margin-bottom:5px}
#quickmenu .quick-layer .title p {color:#fff}
#quickmenu .quick-layer .title.kakao h2 {color:#ffea29}
#quickmenu .quick-layer .title.kakao p {color:#ffea29}
#quickmenu .quick-layer .btn-close {position:absolute; top:45px; right:44px; width:45px; height:45px; border:none; background:transparent; cursor:pointer; outline:none}
#quickmenu .quick-layer .btn-close span {position:absolute; display:block; top:50%; left:50%; width:38px; height:1px; margin:-1px 0 0 -19px; background:#fff}
#quickmenu .quick-layer .btn-close span.line1 {transform:rotate(45deg)}
#quickmenu .quick-layer .btn-close span.line2 {transform:rotate(-45deg)}
#quickmenu .quick-layer .btn-area {position:absolute; bottom:45px; left:0; width:100%; text-align:center}
#quickmenu .quick-layer .btn-area .btn {display:inline-block; padding:5px 25px;height:auto; font-size:13px; color:#fff;font-weight:normal;}
#quickmenu .quick-layer .btn-area .btn.btn-brown {background:#867460}
#quickmenu .quick-layer .btn-area .btn.btn-yellow {color:#222; background:#ffea29}
#quickmenu .quick-layer .btn-area .btn.btn-mint {background:#21bbb1}

@media screen and (max-width:1400px) {
#wrapper {width:100%;min-width:auto;}
#header > .top > .inner {width:100%;padding:0px 20px;}
#nav {width:100%;}
#nav > li div.menu-item .inner {width:100%;}
#nav > li {padding:0px;width:10%;text-align:center;}
#nav > li:last-child  {width:10%;}
#nav > li div.menu-item ul {}
}

@media screen and (max-width:1200px) {




}

@media screen and (max-width:1024px) {
#header > .top {height:77px;padding:0px;}
#header > .top > .inner .left-link {display:none;}
#header > .top > .inner .right-link {display:none;}
#header > .btm {position:fixed;right:-300px;width:300px;z-index:999;background:#fff;height:100%;top:0px;overflow-y:auto;-ms-overflow-style:none;}
body.scrollfix #header > .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 .logo {position:absolute;top:20px;left:50%;transform:translateX(-50%);}
#header .logo img {width:200px;}
#header > .btm .m_loginArea {display:block;}
#nav {width:100%;height:auto;margin:auto;overflow:hidden;font-size:0px;}
#nav:after {display:block; width:100%; content:'';}
#nav > li {display:block; width:auto;padding:0px;text-align:left;border-bottom: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 > 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 {margin-top:80px; padding:70px 0 80px 0; background:#000}
#footer > .inner {width:1400px; margin:auto}
#footer .foot_wrap {position:relative;font-size:0px;}
#footer .foot_wrap > div {display:inline-block;vertical-align:top;}
#footer .foot_logo {width:145px;}
#footer .foot_info {width:955px;padding-left:60px;padding-top:10px;}
#footer .foot_info span {color:#bdbdbd;font-size:17px;display:block;line-height:1.5;}
#footer .foot_info > h3 {margin-top:30px;}
#footer .foot_info > h3 a {color:#757575;font-size:17px;}
#footer .foot_customer {width:300px;text-align:right;}
#footer .foot_customer h1 {font-size:35px;color:#999;font-family:'Montserrat';font-weight:bold;}
#footer .foot_customer p {font-size:15px;color:#555;}
#footer .foot_customer span {margin-top:20px;display:inline-block;}
#footer .foot_customer span a {display:inline-block;margin-left:10px;font-size:24px;color:#757575}
@media screen and (max-width:1400px) {
/* 푸터 */
#footer > .inner {width:100%;padding:0px 20px;}
#footer .foot_logo {width:15%;}
#footer .foot_info {width:70%;}
#footer .foot_customer {width:15%;}
}
@media screen and (max-width:1200px) {
/* 푸터 */
#footer {margin-top:50px;}
#footer > .inner {width:100%; margin:auto;padding:0px 20px;}
}
@media screen and (max-width:1024px) {
/* 푸터 */
#footer {padding:70px 0 80px 0;}
#footer > .inner {}
#footer .foot_wrap {position:relative;font-size:0px;text-align:center;}
#footer .foot_wrap > div {display:block;vertical-align:top;}
#footer .foot_logo {width:100%;}
#footer .foot_logo a img {width:80px;}
#footer .foot_info {width:100%;padding-left:0px;padding-top:20px;}
#footer .foot_info span {font-size:14px;display:block;line-height:1.5;}
#footer .foot_info span a {color:#bdbdbd;font-size:14px;}
#footer .foot_info > h3 {margin-top:30px;}
#footer .foot_info > h3 a {font-size:14px;}
#footer .foot_customer {width:100%;text-align:center;}
#footer .foot_customer h1 {font-size:25px;}
#footer .foot_customer p {font-size:12px;color:#555;}
#footer .foot_customer span {margin-top:20px;display:inline-block;}
#footer .foot_customer span a {display:inline-block;margin-left:10px;font-size:20px;}
#footer .foot_customer span a:first-child {margin-left:0px;}
}

/* 상단으로 스크롤 */
#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)}