@charset "utf-8";

/* ****************** default css ****************** */
/* reset css */
@import url("reset.css");

/* font css */
@import url("maplestory.css");
@import url("nanum-square.css");
@import url("cafe24surround.css");

/* ****************** 사이트 공통 ****************** */
*,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { text-shadow: 1px 1px 1px rgba(0,0,0,0.004); font-size: 62.5%; overflow-x: hidden;}
html, body { width:100%; height:100%; }
body { font-family: 'nanum-square-r','Sans-serif'; font-size: 1.3rem; letter-spacing: -0.6px; background-color: #fff; text-rendering: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body>.wrapper { overflow-x: hidden; }
a { text-decoration:none; color: #222; }
::-moz-selection {background:#0475f4; color:#FFF; text-shadow:none;}
::selection {background:#0475f4; color:#FFF; text-shadow:none;}
::-moz-selection {background:#0475f4; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#0475f4; color:#FFF; text-shadow:none;}
.material-icons { display: inline-block; vertical-align: middle; font-size: 20px; }

/*클리어픽스*/
.clearfix:after { display:block; clear:both; content: ''; }


/* header */
.container { position: relative; width: 100%;}
.header-container .header-border-wrap {border-bottom: 1px solid #e5e5e5}
.header-container .gnb-wrap { width: 1200px; margin:0 auto}
.header-container .gnb-wrap .logo-area { float: left; padding: 22px 0;}
.header-container .gnb-wrap .logo-area img { width: 230px; height: 36px}
.header-container .gnb-wrap .gnb-area { float: right; }
.header-container .gnb-wrap .gnb-area .gnb > ul { position: relative; }
.header-container .gnb-wrap .gnb-area .gnb > ul > li { float: left; position: relative; }
.header-container .gnb-wrap .gnb-area .gnb > ul > li > a { color: #2b2825; font-size: 1.6rem; padding: 32px 19px; display: block; font-weight:600 }
.header-container .gnb-wrap .gnb-area .gnb > ul > li:hover > a {color: #26b787}
.header-container .gnb-wrap .gnb-area .gnb > ul > li > a > .und { position: relative; display: inline-block;}
.header-container .gnb-wrap .gnb-area .gnb > ul > li > a > .und span.mobile-icon {display: none}
.header-container .gnb-wrap .gnb-area .gnb > ul > li > a > .und img {opacity: 0.6; width: 20px; height: 20px;}
.header-container .gnb-wrap .gnb-area .gnb > ul > li > a > .und:after { content: ''; position: absolute; top: 100%; left: 0; width: 0; height: 1px; background: #fff; transition: width .3s ease; }
.header-container .gnb-wrap .gnb-area .gnb > ul > li > a:hover > .und:after { width: 100%; }
.header-container .gnb-wrap .gnb-area .gnb > ul > li ul { overflow: hidden; transform: scaleY(0); padding: 0; position: absolute; top: 100%; left: -26px; text-align: center; width: 150%; z-index: 90; background: #fff; transition: transform .3s ease; transform-origin: top; border-radius: 0 0 15px 15px;  border: 1px solid #d2dbd7; border-top-color: #fff}
.header-container .gnb-wrap .gnb-area .gnb > ul > li:hover ul { transform: scaleY(1); padding: 5px 0; }
.header-container .gnb-wrap .gnb-area .gnb > ul > li ul li a { position: relative; color: #000; font-weight: 600; display: block; padding: 8px 0; font-size:1.3rem }
.header-container .gnb-wrap .gnb-area .gnb > ul > li ul li a:hover {color: #30b868}

.header-container .gnb-wrap .gnb-area .gnb > ul > li.li-btn {top:25px;margin-left: 30px;}
.header-container .gnb-wrap .gnb-area .gnb > ul > li .service-reserv-btn { position: relative; float: right;background: #26b787;border-radius: 5px;transition: background .3s ease; z-index: 90;}
.header-container .gnb-wrap .gnb-area .gnb > ul > li .service-reserv-btn a {display:block;font-size: 1.5rem; color: #fff;font-family: 'Maplestory';font-weight: 300;padding: 8px 12px 7px; }
.header-container .gnb-wrap .gnb-area .gnb > ul > li .service-reserv-btn a .material-icons { font-size: 15px;}
.header-container .gnb-wrap .gnb-area .gnb > ul > li .service-reserv-btn a .gnb-more { width: 20px; height: 20px;}
.header-container .gnb-wrap .gnb-area .gnb > ul > li.li-btn .service-reserv-btn {background:#11A771;}
.header-container .gnb-wrap .gnb-area .gnb > ul > li.li-btn .service-reserv-menu { background:#fff; border:1px solid #30b686; position: absolute; z-index: 80; top: calc(100% - 3px); left:0; width:100%; text-align: center; border-radius: 0 0 5px 5px; overflow: hidden; padding: 7px 0; overflow: hidden; transform: scaleY(0); padding: 0; transition: transform .3s ease; transform-origin: top;}
.header-container .gnb-wrap .gnb-area .gnb > ul > li.li-btn:hover .service-reserv-menu { transform: scaleY(1); padding: 5px 0; }
.header-container .gnb-wrap .gnb-area .gnb > ul > li.li-btn .service-reserv-menu .item { position: relative; font-weight: 600; padding: 8px 0; font-size: 1.3rem; color:#30b686; display: block;}
.header-container .gnb-wrap .gnb-area .gnb > ul > li.li-btn .service-reserv-menu .item:hover { background:rgba(31,85,57,0.05); }
.header-container .gnb-wrap .mobile-gnb-wrap {display: none}




.hamburger { display: none; width:23px; height: 22px; cursor: pointer; position: relative; top: 22px; }
.hamburger .bar:nth-child(1).close-1{ transform: rotate(45deg); transform-origin: center; margin-top:15px; background: #444}
.hamburger .bar:nth-child(2).close-2{ transform:scale(0); background: #444}
.hamburger .bar:nth-child(3).close-3{ transform: rotate(-45deg); transform-origin: center; margin-top: -10.5px; background: #444}
.hamburger .bar{ transition-duration: 0.5s; width: 23px; height: 2px; background: #444; margin-top: 6px; }

@media all and (max-width: 1200px) {
	.header-container .gnb-wrap { padding: 0 20px; width: 100%}
	.header-container .gnb-wrap .logo-area img {width: 190px; height: 30px}
	.header-container .gnb-wrap .gnb-area .gnb > ul > li > a { padding: 30px 10px; font-size: 1.5rem; }
	.header-container .gnb-wrap .gnb-area .gnb > ul > li ul {width: 180%; font-size: 1.2rem; left: -30px}
	.header-container .gnb-wrap .gnb-area .gnb > ul > li > a > .und img {width: 15px; height: 15px;}
	.header-container .gnb-wrap .gnb-area .gnb > ul > li.li-btn {top:23px; margin-left:20px}
	.header-container .gnb-wrap .gnb-area .gnb > ul > li .service-reserv-btn a {font-size:1.4rem; }
	}

@media all and (max-width: 1024px) {
	.hamburger { display: block; }
	.header-container .gnb-wrap .logo-area { padding: 22px 0; }
	.header-container .gnb-wrap .gnb-area .gnb {display: none}
	.header-container .gnb-wrap .mobile-gnb-wrap {display: block; position: fixed; background-color: rgba(0,0,0,0.2); width: 100%; height: 100%; z-index: -1; opacity: 0; top: 74px; right: 0; transition: opacity .3s ease, z-index .3s ease; }
	.header-container .gnb-wrap .mobile-gnb-wrap .mobile-gnb {position: absolute;top: 0;  right: 0; width: 40%; background: #fff; transform: translateX(100%); transition: transform .3s ease; transform-origin: top;z-index: 99; height: 100%}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb > ul > li {border-bottom:  1px solid #ddd}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb > ul > li:hover > a{color: #434343}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb > ul > li > a > .und span.mobile-icon {display: inline-block; margin-right: 8px; opacity: 0.4}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb > ul > li.ser-btn > a > .und span.mobile-icon  {opacity:1}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb > ul > li > a > .und img {width: 20px; height: 20px;}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb > ul > li > a { padding: 15px 20px; font-weight: 600; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.04); margin-right: 20px; font-size: 1.6rem; display: block} 
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb > ul > li.on-mobile ul li a {  color: #666; font-weight: 300; padding: 15px 0 15px 20px; font-size: 1.4rem; text-align: left; border-bottom: 1px solid #eaeaea; display: block}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb > ul > li.ser-btn > a {color:#26b787;}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb > ul > li.on-mobile ul li:last-child a {border-bottom:  0}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb > ul > li ul { display: none; padding: 5px 0; transform: scaleY(1); position: static; border-radius: 0; width: 100%; }

	/* gnb on */
	.header-container .gnb-wrap .mobile-gnb-wrap.gnb-on { z-index: 98; opacity: 1; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none;}
	.header-container .gnb-wrap .mobile-gnb-wrap.gnb-on::-webkit-scrollbar {display: none}	
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb { transform: translateX(0); }

	/* gnb mobile li on */
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap .mobile-gnb ul > li.on-mobile .gnb-more.on {transform: rotate(180deg);}

	/* 서비스신청버튼 */
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb .mo-service-btn {padding:12px;}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb .mo-service-btn .service-reserv-btn {background: #26b787;border-radius: 8px;transition: background .3s ease; text-align: center; position: relative; z-index: 90;}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb .mo-service-btn .service-reserv-btn:hover {background:#11A771}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb .mo-service-btn .service-reserv-btn a {padding:13px 12px; display:inline-block; font-size:1.4rem;color: #fff;font-family: 'Maplestory';font-weight: 300;}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb .mo-service-btn .service-reserv-btn a .material-icons {margin-right:5px; font-size:18px}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb .mo-service-btn .service-reserv-btn a .gnb-more { width:18px; height:18px; }
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb .mo-service-btn .service-reserv-menu { background:#fff; border:1px solid #30b686; width:100%; text-align: center; border-radius: 0 0 5px 5px; overflow: hidden; padding: 7px 0; overflow: hidden; transform: scaleY(0); padding: 0; transition: transform .3s ease; transform-origin: top; position: relative; top: -5px; z-index: 80;}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb .mo-service-btn .service-reserv-menu .item { position: relative; font-weight: 600; padding: 15px 0; font-size: 1.3rem; color:#30b686; display: block;}
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb .mo-service-btn .service-reserv-menu .item:hover { background:rgba(31,85,57,0.05); }
	.header-container .gnb-wrap .gnb-area .mobile-gnb-wrap.gnb-on .mobile-gnb .mo-service-btn:hover .service-reserv-menu { transform: scaleY(1); padding: 5px 0; }

}

@media all and (max-width: 500px) {
	.header-container .gnb-wrap .logo-area img {width: 165px; height: 30px}
	.hamburger { top: 19px; }
	.hamburger .bar { height: 2px; }
	.hamburger .bar:nth-child(3).close-3 { margin-top: -10px; }
}

@media all and (max-width: 600px) {
	.header-container .gnb-wrap .mobile-gnb-wrap .mobile-gnb {width:50%}
	.header-container .gnb-wrap .mobile-gnb > ul > li > a {font-size: 1.4rem}
	.header-container .gnb-wrap .mobile-gnb > ul > li.on-mobile ul li a {font-size: 1.3rem}
	.header-container .gnb-wrap .mobile-gnb > ul > li > a > .und img {width: 17px; height: 17px}
}

@media all and (max-width: 425px) {
	.header-container .gnb-wrap .mobile-gnb-wrap .mobile-gnb {width:100%}
}

/* banner */
.banner-container .banner-wrap {width: 100%; height: 316px}
.banner-container .banner-wrap .banner {background: url(../../img/common/main_visual.png) no-repeat center 100%; background-size: cover; width: 100%; height: 100%; position: relative}
.banner-container .banner-wrap .banner .banner-obj-wrap {display: none}
.banner-container .banner-wrap .banner .banner-area .bn-title {font-family: 'Maplestory'; font-weight: 600; color: #26b787; position: relative; z-index: 2; word-break: keep-all}
.banner-container .banner-wrap .banner .banner-area .bn-title p {font-size: 3.2rem; padding-bottom: 15px;  text-shadow: 0px 3px 0px #fff}
.banner-container .banner-wrap .banner .banner-area .bn-title h1 {font-size: 4.9rem; text-shadow: 0px 3px 0px #fff}


@media (max-width: 1024px) {
	.banner-container .banner-wrap .banner .banner-area .bn-title p {font-size: 2.7rem; }
	.banner-container .banner-wrap .banner .banner-area .bn-title h1 {font-size: 4.2rem}
	.banner-container .banner-wrap .banner .banner-obj-wrap {display: block;}
	.banner-container .banner-wrap .banner .banner-obj-wrap img.banner-obj.white-flower{position: absolute; width: 45px; height: 51px; right: 14px; bottom: 116px;}
	.banner-container .banner-wrap .banner .banner-obj-wrap img.banner-obj.flower-w {width: 31px; height: 30px; position: absolute; top: 52px; right: 134px;}
	.banner-container .banner-wrap .banner .banner-obj-wrap img.banner-obj.fly {width: 24px;height: 22px; position: absolute; top: 20px; left: 135px}
	.banner-container .banner-wrap .banner .banner-obj-wrap img.banner-obj.tit01 {position: absolute; width: 80px; right: 40px; bottom: 101px; height: 116px}
	.banner-container .banner-wrap .banner .banner-obj-wrap img.banner-obj.tit02 {position: absolute; width: 90px; bottom: 105px; left: 40px; height: 110px;}

}

@media (max-width: 800px) {
	.banner-container .banner-wrap {height:285px}
	.banner-container .banner-wrap .banner { background: url(../../img/common/main_visual_mo.png) no-repeat center 100%; background-position:right;}
	.banner-container .banner-wrap .banner .banner-area .bn-title p {font-size: 2.2rem;}
	.banner-container .banner-wrap .banner .banner-area .bn-title h1 {font-size: 3.6rem; text-shadow: 0px 3px 0px #fff;}
}

@media (max-width: 500px) {
	.banner-container .banner-wrap {height: 220px}
	.banner-container .banner-wrap .banner .banner-area .bn-title p {font-size: 1.6rem; padding-bottom: 5px}
	.banner-container .banner-wrap .banner .banner-area .bn-title h1 {font-size: 2.5rem}
	.banner-container .banner-wrap .banner .banner-obj-wrap img.banner-obj.white-flower{ position: absolute; width:35px; height:40px;  bottom:84px }
	.banner-container .banner-wrap .banner .banner-obj-wrap img.banner-obj.flower-w {width: 22px; height: 22px; position: absolute; top: 45px; right: 75px;}
	.banner-container .banner-wrap .banner .banner-obj-wrap img.banner-obj.fly {width: 19px;height: 17px; position: absolute; top: 27px; left: 95px}
	.banner-container .banner-wrap .banner .banner-obj-wrap img.banner-obj.tit01 {width: 53px; bottom: 88px; height: 77px}
	.banner-container .banner-wrap .banner .banner-obj-wrap img.banner-obj.tit02 {width: 56px; bottom: 88px; left: 18px; height: 74px;}

}


/* 배너 밑 탬플릿 영역 */
.body-container {position: relative; width:100%}
.body-container .content-background-wrap {width: 100%; position: relative;}
.body-container .content-background {background-color: #f1f7f5; width: 1300px; border-top-left-radius: 40px; border-top-right-radius: 40px; margin: 0 auto; }

.body-container .content-background .border-top-area {padding: 20px 35px;}

@media (max-width: 1300px) {
	.body-container .content-background {width: 100%;}
	.body-container .content-background .border-top-area  {width: calc(100% - 60px); margin: 0 auto}
}

@media (max-width: 1200px) {
		.body-container .content-background .border-top-area {padding: 20px 15px}
}


@media (max-width: 750px) {
	.body-container .content-background .border-top-area  {width: 100%;}
}



/* footer */
.footer-container {background-color: #fff; margin-top: 30px}
.footer-container .info-area {position: relative; width: 100%; border-top: 1px solid #e5e5e5; }
.footer-container .info-area .cont-wrap {width: 1200px; margin: 0 auto; padding: 30px 0; word-break: keep-all;}
.footer-container .info-area .cont-wrap > div {float: left;}
.footer-container .info-area .cont-wrap .left img {width: 230px; height: 36px }

.footer-container .info-area .cont-wrap .right {position: relative; margin-left:70px;padding: 10px 0;}
.footer-container .info-area .cont-wrap .right .terms {margin-bottom: 10px;}
.footer-container .info-area .cont-wrap .right .terms li { display: inline-block; margin-right: 20px; font-weight: 600; font-size: 1.3rem; }
.footer-container .info-area .cont-wrap .right .terms li:last-child {margin-right:0;}
.footer-container .info-area .cont-wrap .right .terms li a {color: #6f6f6f;}
.footer-container .info-area .cont-wrap .right .address-wrap { margin-top: 20px; }
.footer-container .info-area .cont-wrap .right ul.address { color: #6f6f6f}
.footer-container .info-area .cont-wrap .right ul.address li {margin-bottom: 10px}
.footer-container .info-area .cont-wrap .right ul li {display: inline-block; margin-right: 10px}

.footer-container .info-area .cont-wrap .call-center { float: right; }
.footer-container .info-area .cont-wrap .call-center .tit { font-size: 1.8rem; font-weight: 600; padding-bottom: 10px; color: #7eac7c;}
.footer-container .info-area .cont-wrap .call-center .bg { padding: 10px; background: #7eac7c; color: #fff; border-radius: 5px; font-size: 1.4rem; display: inline-block;}
.footer-container .info-area .cont-wrap .call-center .p1 { padding-bottom: 6px; }


@media all and (max-width: 1200px) {
	.footer-container .info-area .cont-wrap {width: 100%; padding: 50px 20px;}
}
@media all and (max-width: 1024px) {
	.footer-container .info-area .cont-wrap .right {margin-left: 30px;}
}
@media all and (max-width: 850px) {
	.footer-container .info-area .cont-wrap > div {width: 100%; text-align: center; }
	.footer-container .info-area .cont-wrap .right {margin-left:0;}
	.footer-container .info-area .cont-wrap .right .terms { margin-bottom: 10px; margin-top: 20px; }
}
@media all and (max-width: 425px) {
	.footer-container .info-area .cont-wrap .left {margin-top: 0;}
}



/* 시흥톡 */
.siheungTalk {position:fixed; display:block; width:85px; height:63px; background:url("../../img/common/siheungTalk_ico.png") no-repeat left bottom; font-size:0; text-indent:-9999px; right:50px; bottom:50px; z-index:10;}
.siheungTalk:hover {background-position:right bottom;}
@media all and (max-width:1024px){
	.siheungTalk {right:20px; bottom:90px;}
}