@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(contents.css);
@import url(board.css);

/* ==============================================
   defaults
   ============================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
ol, ul { list-style:none;}
blockquote, q {	quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table { border-collapse:collapse; border-spacing:0;}
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
input, select { margin:0; padding:0; vertical-align:middle;}
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

.ir { background-color: transparent; border: 0; overflow: hidden; text-indent:-9999px;}
.ir:before { content: ""; display: block; width: 0; height: 150%; }

.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
.clearfix {  *zoom: 1;}
.hidden { display:none;}

/* box sizing */

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* ==============================================
   layout
   ============================================== */

html { overflow:auto; overflow-y:scroll;}
input,
select,
button,
textarea,
body { color:#2f2f2f; font-size:12px; font-family:'Roboto', 'Nanum Gothic', 'dotum', '돋움', 'gulim', '굴림', arial !important;}

#wrap {}
#wrapIn {}

.forPC { display: block !important;}
.forMobile { display: none !important;}
.mobileMenu { display: none;}

/* header */

#header { height: 85px; background-color: #f65b65; }
#header .headerIn { position: relative; width: 1000px; margin: 0 auto; }
#header h1 a { position: relative; display: block; width: 120px; height: 85px; text-indent: -9999px; background: url(../images/common/top_logo.png) center center no-repeat; z-index: 999; }

#header .topMenu { position: absolute; top: 5px; right: 16px; height: 24px; }
#header .topMenu ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
#header .topMenu ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
#header .topMenu ul.list li { float: left; background: url(../images/common/menu_devider_white.png) left center no-repeat; padding-left: 9px; margin-left: 8px;}
#header .topMenu ul.list li.first { background: none; padding-left: 0; margin-left: 0; }
#header .topMenu ul.list li a { line-height: 24px; color: #f8e6e7; text-decoration: none; }
#header .topMenu ul.list li a:hover { color: #fff; text-decoration: underline; }

.gnb { position: absolute; top: 29px; right: 0; height: 56px; }
.gnb > ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
.gnb > ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
.gnb > ul.list {}
.gnb > ul.list > li { position: relative; float: left; }
.gnb > ul.list > li > a { display: block; height: 56px; line-height: 56px; font-size: 15px; font-weight: bold; color: #fff; text-decoration: none; padding: 0 16px; }
.gnb > ul.list > li > a:hover { color: #fffca7;}
.gnb > ul.list > li.active > a { color: #fffca7;}

.gnb > ul.list > li ul.sub { display: none; position: absolute; left: 50%; top: 50px; width: 170px; background-color: #00163f; margin-left: -85px; z-index: 999;}
.gnb > ul.list > li ul.sub li { border-bottom: 1px solid #152a53;}
.gnb > ul.list > li ul.sub li.last { border-bottom: none;}
.gnb > ul.list > li ul.sub li a { display: block; height: 40px; line-height: 40px; color: #fff; text-decoration: none; text-indent: 20px;}
.gnb > ul.list > li ul.sub li a:hover { color: #fff; background-color: #163164;}
.gnb > ul.list > li:hover ul.sub { display: block;}

/* footer */

#footer { background-color: #ededed; }
#footer .footerIn { position: relative; width: 1000px; padding: 25px 0 25px 200px; margin: 0 auto; }
#footer h1 { position: absolute; left: 0; top: 50%; width: 200px; height: 80px; text-indent: -9999px; background: url(../images/common/footer_logo.png) center center no-repeat; margin-top: -40px; }
#footer ul.familysite {*zoom:1;} /* Hack for browser IE5.5~7 */
#footer ul.familysite:after { content:" "; display:block; clear:both;} /* float virtual element */
#footer ul.familysite { margin-bottom: 20px; }
#footer ul.familysite li { float: left; margin-right: 4px; }
#footer ul.footInfo {*zoom:1;} /* Hack for browser IE5.5~7 */
#footer ul.footInfo:after { content:" "; display:block; clear:both;} /* float virtual element */
#footer ul.footInfo li { float: left; line-height: 24px; color: #9e9e9e; background: url(../images/common/menu_devider_black.png) left center no-repeat; margin-left: 6px; padding-left: 6px; }
#footer ul.footInfo li.first { background: none; padding-left: 0; margin-left: 0; }
#footer p.copyright { line-height: 20px; color: #9e9e9e; font-size: 11px; }

/* quick */

.quickWrap { position: absolute; left: 50%; top: 435px; width: 90px; text-align: center; margin-left: 525px; }
body.main .quickWrap { top: 675px;}
.quickWrap ul.list { margin-bottom: 10px; }
.quickWrap ul.list li { margin-bottom: 5px; }
.quickWrap .contact h4 { line-height: 18px; }
.quickWrap .contact p.num { line-height: 24px; color: #f65b65; font-size: 18px; font-weight: bold; letter-spacing: -1px; }

/* mediaquery for tab */

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

}

/* mediaquery for mobile */

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

.forPC { display: none !important;}
.forMobile { display: block !important;}

/* header */

#header { height: auto; }
#header .headerIn { width: auto; padding-top: 24px;}
#header h1 a { width: 160px; height: 80px;}

#header .topMenu { position: absolute; top: 5px; right: 16px; height: 24px; }
#header .topMenu ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
#header .topMenu ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
#header .topMenu ul.list li { float: left; background: url(../images/common/menu_devider_white.png) left center no-repeat; padding-left: 9px; margin-left: 8px;}
#header .topMenu ul.list li.first { background: none; padding-left: 0; margin-left: 0; }
#header .topMenu ul.list li a { line-height: 24px; color: #f8e6e7; text-decoration: none; }
#header .topMenu ul.list li a:hover { color: #fff; text-decoration: underline; }

p.mobileMenu { display: block; position: absolute; right: 20px; top: 54px; width: 33px; height: 23px; text-indent: -9999px; background: #fffca7 url(../images/mobile/top_btn_menu.png) 0 0 no-repeat; -webkit-background-size: 33px auto; background-size: 33px auto;}

.gnb { position: relative; top: 0; right: 0; height: 0; background-color: #df454f; overflow: hidden; 
     -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
     -o-transition: all 0.2s ease;
     transition: all 0.2s ease;
}
.gnb.active { height: 245px; }
.gnb > ul.list { border-top: 1px solid #f65b65; }
.gnb > ul.list > li { position: relative; height: 35px; float: none; border-bottom: 1px solid #f65b65; }
.gnb > ul.list > li > a { height: 34px; line-height: 34px; font-size: 13px; color: #fff; text-decoration: none; padding: 0 16px; }
.gnb > ul.list > li ul.sub { display: none !important; }

/* footer */

#footer .footerIn { width: 100%; padding: 20px 10px; }
#footer h1 { position: relative; left: auto; top: auto; width: 100%; margin-top: 0; }
#footer ul.familysite li { width: 32.3%; margin: 0 0 1% 3px; }
#footer ul.familysite li img { width: 100%; }
#footer ul.footInfo li { float: none; line-height: 20px; background: none; margin-left: 0; padding-left: 0; }
#footer p.copyright { line-height: 18px; }

/* quick */

.quickWrap { display: none; }

}

/* ==============================================
   main
   ============================================== */

/* visual */

.visWrap,
#mainVisual,
#mainVisual ul.slides li,
#mainVisual ul.slides li p.img { height: 540px; }
.visWrap { position: relative; }

.visWrap ol.flex-control-nav { position: absolute; left: 50%; top: 154px; margin-left: -442px; z-index: 999; }
.visWrap ol.flex-control-nav li { float: left; height: 12px; margin-right: 8px; }
.visWrap ol.flex-control-nav li a { display: block; width: 12px; height: 12px; text-indent: -9999px; background-color: #fff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
.visWrap ol.flex-control-nav li a.flex-active { width: 36px; background-color: #f65b65; }

.visWrap p.slogan { position: absolute; left: 50%; top: 210px; margin-left: -442px; z-index: 999; }
.visWrap .quickLink { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background-color: rgba(0,0,0,.6); z-index: 999; }
.visWrap .quickLink ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
.visWrap .quickLink ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
.visWrap .quickLink ul.list { width: 1000px; margin: 0 auto; }
.visWrap .quickLink ul.list li { float: left; width: 25%; text-align: center; height: 60px; line-height: 60px; }
.visWrap .quickLink ul.list li:before { content: ""; display: inline-block; height: 100%; vertical-align: middle;}
.visWrap .quickLink ul.list li img { vertical-align:middle;}

/* main body */

#mainBody .titleArea { margin-bottom: 35px; }
#mainBody .titleArea p.eng { line-height: 24px; color: #c5c5c5; font-size: 16px; }
#mainBody .titleArea h3 { line-height: 36px; color: #584445; font-size: 30px; font-weight: bold; margin-bottom: 10px; }
#mainBody .titleArea h3 strong { color: #f65b65; }
#mainBody .titleArea p.exp { line-height: 24px; color: #797979; font-size: 13px; }

/* service */

#mainBody .serviceWrap { width: 1000px; padding: 45px 0; margin: 0 auto; }
#mainBody .serviceWrap {*zoom:1;} /* Hack for browser IE5.5~7 */
#mainBody .serviceWrap:after { content:" "; display:block; clear:both;} /* float virtual element */
#mainBody .serviceWrap .feature { float: left; width: 50%; height: 320px; padding-left: 190px; }
#mainBody .serviceWrap .feature ul.list { height: 245px; padding-top: 16px; }
#mainBody .serviceWrap .feature ul.list li { font-size: 13px; line-height: 20px; font-weight: bold; background: url(../images/common/icon_check.png) left 1px no-repeat; padding-left: 28px; margin-bottom: 18px; }
#mainBody .serviceWrap .feature a.btnBox {  }
#mainBody .serviceWrap .fLeft { background: url(../images/main/service_woman01.png) 25px top no-repeat; }
#mainBody .serviceWrap .fRight { background: url(../images/main/service_woman02.png) 30px top no-repeat;  }

/* mid */

#mainBody .midWrap { position: relative; background-color: #fff2f2; padding: 45px 0 30px; }
#mainBody .midWrap .region { position: relative; left: 50%; width: 624px; margin-left: -500px; }
#mainBody .midWrap .region ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
#mainBody .midWrap .region ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
#mainBody .midWrap .region ul.list { width: 624px; }
#mainBody .midWrap .region ul.list li { position: relative; float: left; width: 148px; padding-top: 17px; margin: 0 8px 20px 0; }
#mainBody .midWrap .region ul.list li h4 { position: absolute; left: 50%; top: 0; width: 100px; height: 34px; line-height: 34px; color: #fff; font-size: 18px; font-weight: bold; text-align: center; background-color: #ff9ba1; margin-left: -50px; }
#mainBody .midWrap .region ul.list li p { height: 105px; line-height: 20px; border: 1px solid #e2e2e2; background-color: #fff; padding: 30px 18px 12px; }

#mainBody .midWrap .consult { position: absolute; left: 50%; top: 45px; width: 330px; height: 400px; background: url(../images/main/consult_bg.png) right bottom no-repeat; padding-top: 20px; margin-left: 170px; }
#mainBody .midWrap .consult h3 { line-height: 30px; color: #584445; font-size: 18px; margin-bottom: 8px; }
#mainBody .midWrap .consult p.num { margin-bottom: 8px; }
#mainBody .midWrap .consult p.num a { line-height: 50px; color: #3c3c3c; font-size: 40px; font-weight: bold; text-decoration: none; }
#mainBody .midWrap .consult p.exp { font-size: 13px; color: #848282; line-height: 20px; margin-bottom: 30px; }
#mainBody .midWrap .consult p.time { line-height: 20px; font-size: 13px; font-weight: bold; color: #584445; }
#mainBody .midWrap .consult p.weekend { line-height: 20px; font-size: 13px; font-weight: bold; color: #e7313d; }

/* community */

.communityWrap {*zoom:1;} /* Hack for browser IE5.5~7 */
.communityWrap:after { content:" "; display:block; clear:both;} /* float virtual element */
.communityWrap { position: relative; width: 1000px; padding: 45px 0; margin: 0 auto; }
.communityWrap > div { position: relative; float: left; width: 300px; }
.communityWrap > div h3 { height: 38px; border-bottom: 2px solid #c0bfbf; }
.communityWrap > div h3 span { display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline; width: 126px; height: 38px; line-height: 30px; font-size: 20px; letter-spacing: -1px; font-weight: bold; border-bottom: 2px solid #f65b65; }
.communityWrap .gallery { margin-left: -500px; }
.communityWrap .gallery h3 { border: none; }
.communityWrap .gallery h3 span { border: none; }

.communityWrap .gallery ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
.communityWrap .gallery ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
.communityWrap .gallery ul.list {}
.communityWrap .gallery ul.list li { float: left; width: 130px; margin-right: 5px; }
.communityWrap .gallery ul.list li p.img { width: 130px; height: 100px; border: 1px solid #c1c0c0; margin-bottom: 10px; }
.communityWrap .gallery ul.list li p.img:hover {  border-color: #ff9ba1; }
.communityWrap .gallery ul.list li p.title { text-align: center; }
.communityWrap .gallery ul.list li p.title a { line-height: 24px; color: #4f4f4f; text-decoration: none; }
.communityWrap .gallery ul.list li p.title a:hover { color: #000; text-decoration: underline; }

.communityWrap .board a.btnMore { display: block; position: absolute; right: 0; top: 0; width: 30px; height: 30px; text-indent: -9999px; background: url(../images/main/btn_more.png) center center no-repeat; }
.communityWrap .board ul.list { margin-top: 16px; }
.communityWrap .board ul.list li { position: relative; line-height: 22px; }
.communityWrap .board ul.list li span.date { position: absolute; right: 0; top: 0; color: #8a8a8a; }
.communityWrap .board ul.list li a { line-height: 22px; color: #4f4f4f; text-decoration: none; }
.communityWrap .board ul.list li a:hover { color: #000; text-decoration: underline; }

.communityWrap .consult {}
.communityWrap .epilogue { margin: 0 50px; }


/* mediaquery for tab */

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

}

/* mediaquery for mobile */

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

	/* visual */

	.visWrap,
	#mainVisual,
	#mainVisual ul.slides li,
	#mainVisual ul.slides li p.img { height: 380px; }
	.visWrap { height: 480px; padding-bottom: 100px; }

	.visWrap ol.flex-control-nav { display: none; }

	.visWrap p.slogan { position: absolute; left: 20px; top: 60px; width: 300px; margin-left: 0; }
	.visWrap p.slogan img { width: 100%; }
	.visWrap p.phone { position: absolute; left: 50%; width: 260px; bottom: 140px; margin-left: -130px; z-index: 99; }
	.visWrap p.phone a { display: block; height: 62px; text-indent: -9999px; background: url(../images/main/visual_contact.png) center center no-repeat; }
	.visWrap .quickLink { position: relative; bottom: auto; left: auto; width: auto; height: auto; }
	.visWrap .quickLink ul.list { width: auto; }
	.visWrap .quickLink ul.list li { width: 50%; height: 50px; line-height: 50px; border: 1px solid #afafaf; border-width: 0 1px 1px 0; }

	/* main body */

	#mainBody .titleArea { margin-bottom: 20px; }
	#mainBody .titleArea p.eng { line-height: 20px; font-size: 13px; }
	#mainBody .titleArea h3 { line-height: 30px; font-size: 22px; }
	#mainBody .titleArea p.exp { line-height: 20px; }

	/* service */

	#mainBody .serviceWrap { width: auto; padding: 40px 10px; }
	#mainBody .serviceWrap .feature { float: none; width: auto; height: auto; padding-left: 0; }
	#mainBody .serviceWrap .feature ul.list { height: auto; padding-top: 16px; }
	#mainBody .serviceWrap .feature ul.list li { font-size: 13px; line-height: 20px; font-weight: bold; background: url(../images/common/icon_check.png) left 1px no-repeat; padding-left: 28px; margin-bottom: 18px; }
	#mainBody .serviceWrap .feature a.btnBox { width: 220px; }
	#mainBody .serviceWrap .fLeft { background: none; margin-bottom: 20px; }
	#mainBody .serviceWrap .fRight { background: none;}

	/* mid */

	#mainBody .midWrap { padding: 30px 10px 30px; }
	#mainBody .midWrap .region { position: relative; left: auto; width: auto; margin-left: 0; }
	#mainBody .midWrap .region ul.list { width: auto; margin-left: -1%; }
	#mainBody .midWrap .region ul.list li { position: relative; float: left; width: 49%; margin: 0 1% 10px 0; }

	#mainBody .midWrap .consult { position: relative; left: auto; top: auto; width: auto; height: 370px; margin-left: 0; }
	#mainBody .midWrap .consult h3 { line-height: 30px; color: #584445; font-size: 18px; margin-bottom: 8px; }
	#mainBody .midWrap .consult p.exp { margin-bottom: 10px; }

	/* community */

	.communityWrap { width: auto; padding: 40px 10px; }
	.communityWrap > div { left: auto; width: auto; float: none; }

	.communityWrap .gallery ul.list { height: 134px; overflow: hidden; }
	.communityWrap .gallery ul.list li { float: left; width: 130px; margin-right: 5px; }
	.communityWrap .gallery ul.list li p.img { width: 130px; height: 100px; border: 1px solid #c1c0c0; margin-bottom: 10px; }
	.communityWrap .gallery ul.list li p.img:hover {  border-color: #ff9ba1; }
	.communityWrap .gallery ul.list li p.title { height: 24px; text-align: center; }
	.communityWrap .gallery ul.list li p.title a { line-height: 24px; color: #4f4f4f; text-decoration: none; }
	.communityWrap .gallery ul.list li p.title a:hover { color: #000; text-decoration: underline; }

	.communityWrap .consult { margin-bottom: 30px; }
	.communityWrap .epilogue { margin: 0 0 30px; }

	.communityWrap .board { width: auto; }
	.communityWrap .board a.btnMore { display: block; position: absolute; right: 0; top: 0; width: 30px; height: 30px; text-indent: -9999px; background: url(../images/main/btn_more.png) center center no-repeat; }
	.communityWrap .board ul.list { margin-top: 16px; }
	.communityWrap .board ul.list li { position: relative; line-height: 22px; }
	.communityWrap .board ul.list li span.date { position: absolute; right: 0; top: 0; color: #8a8a8a; }
	.communityWrap .board ul.list li a { line-height: 22px; color: #4f4f4f; text-decoration: none; }
	.communityWrap .board ul.list li a:hover { color: #000; text-decoration: underline; }

}