@charset "utf-8";

/* background fixed 사용시 버그 대응용 * 한 번 스크롤로 페이지 전체 넘김을 할 때는 html스타일에서 height속성 제거하기 */
/* html {overflow: hidden; height: 100%;} */
/* body {overflow: auto; height: 100%;} */

/* ************************ 공용 ************************ */
a {text-decoration:none !important; outline:none !important; selector-dummy:expression(this.hideFocus=true) !important;}
a:link {text-decoration:none; color:#3d3833;}
a:visited {text-decoration:none; color:#3d3833;}
a:hover {text-decoration:none; color:#000;}
a:active {text-decoration:none; color:#3d3833;}
a,img,i {transition:all .1s linear;	-webkit-transition:all .1s linear; -moz-transition:all .1s linear;}
			
body {font-family:'NotoSansKR',AppleSDGothicNeo-Light,DroidSans,HelveticaNeue,"돋움",sans-serif; font-size:16px; font-weight:300; line-height:1.6; color:#666; letter-spacing:-.5px; word-break:keep-all;}
body .fontType-B {font-family:'NexonGothic';}
body > section {position:relative; display:block; width:100%; max-width:100%; margin:0 auto;}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#gotop {
	display:block !important; opacity:1 !important;
	z-index:888; position:absolute; bottom:50%; right:5vw;
	width:84px; height:84px; line-height:84px; text-align:center;
	font-family:"Alegreya"; font-size:20px; color:#674430;
	background-color:#fff; border-radius:50%; margin-bottom:-42px;
}

/* 컨텐츠 */
.contents img {max-width:100%; height:auto;}

/* ************************ 데스크탑 (992~) ************************ */
@media screen and (min-width: 992px), print {
	
	body {min-width:1200px; font-weight:300;}
	body>* {clear:both; position:relative; width:100%; max-width:100%;}
	.mobile {display:none !important;}

	/* ******************** 헤더 ******************** */
	/*로고*/
	body>header {z-index:999; position:absolute; width:100%; background-color:transparent !important;}
	body>header .head {position:relative; width:100%; height:100px; padding:0 5vw;}
	body>header .head .logo {z-index:1000; position:absolute; top:0; left:50%; margin-left:-160px; width:320px; height:250px; border-radius:0 0 20px 20px; background:#fff; box-shadow:0 20px 20px rgba(0,0,0,.15);}
	body>header .head .logo h1 {display:inline-block; width:100%; height:100%;}
	body>header .head .logo h1 a {display:inline-block; width:100%; height:100%; text-align:center; padding-top:45px;}
	body>header .head .logo h1 a img {}
	
	/*링크*/
	body>header .head .link {position: absolute; left:0; top:35px;  width:100%; height:50px;}
	body>header .head .link ul {width:100%; height:100%; text-align:left; padding-left:5vw; position:relative;}
	body>header .head .link ul li {display:inline-block;}
	body>header .head .link ul li+li {margin-left:4vw;}
	body>header .head .link ul li a {display:block; font-size:18px; font-weight:400; color:#fff; padding:20px 0; line-height:1;}
	body>header .head .link ul li.kakao a {padding-right:37px; background:url(../images/common/i-ch.png)no-repeat right center;}
	
	/*gnb*/
	nav.mobile {visibility:hidden;}
	nav.pc {z-index:999;}
	nav.pc > .wrap {position:absolute; top:0; height:120px; width:calc(50% - 160px); left:calc(50% + 160px);  z-index:2;}
		
	nav.pc .gnb {position: absolute; right:0; top:35px;  width:100%; height:85px;}
	nav.pc .gnb>ul {width:100%; height:100%; text-align:right; padding-right:5vw; position:relative;}
	nav.pc .gnb>ul>li {display:inline-block; position:relative;}
	nav.pc .gnb>ul>li+li {margin-left:4.5vw;}
	nav.pc .gnb>ul>li>a {display:block; font-size:18px; font-weight:400; color:#fff; padding:20px 0; line-height:1;}
	nav.pc .gnb>ul>li.on>a:before {
		position:absolute; bottom:-30px; left:50%; width:1px; height:30px; background:#fff; z-index:100;
		display:block; content:"";
	}
	
	nav.pc .gnb>ul>li>ul  {
		display:none; position:absolute; left:50%; top:85px; z-index:99;
		width:160px; margin-left:-80px;
		box-shadow : 5px 4px 12px -4px rgba(0,0,0,0.16) !important;
		border-radius:30px; overflow:hidden; padding:30px;
		background:rgba(255,255,255,.9);
	}
	nav.pc .gnb>ul >li>ul>li+li {margin-top:10px;}
	nav.pc .gnb>ul >li>ul>li>a {font-size:15px; color:#000;}
	nav.pc .gnb>ul >li>ul>li.on>a,
	nav.pc .gnb>ul >li>ul>li>a:hover {color:#ff8822; font-weight:700;}

	/* 상단배경::마무리됨 */
	.topBg {position:relative; max-width:100%; height:650px; background-repeat:no-repeat; background-position:center top; background-size:cover;}
	.topBg .txt {width:1200px; max-width:100%; margin:0 auto; height:100%; position:relative; color:#fff;}
	.topBg .txt .subSlogan {font-family:'Alegreya'; font-size:20px; color:#fff; letter-spacing:0;}
	.topBg .txt .subSlogan:before {
		content:"You’re not alone."; display:block;
		position:absolute; bottom:100px; right:50px;
		background:url(../images/common/hypen_lnb.jpg)no-repeat left center; padding-left:40px;
	}
	
		/**/
		.topBg.intro {background-image:url(../images/common/topBg_intro.jpg);}
		.topBg.infor {background-image:url(../images/common/topBg_infor.jpg);}
		
		

	/*서브메뉴::마무리*/	
	section.lnb {position:absolute; top:600px; display:block; width:100%; margin:0 auto;}
	.lnb {z-index:700; position:absolute; top:0; margin:0; padding:0; max-width:100% !important; font-weight:400; background-color:transparent;}
	.lnb .wrap {position:relative; max-width:1200px; margin:0 auto; padding:0; background:#fff; border-radius:20px; overflow:hidden; box-shadow:20px 20px 20px rgba(0,0,0,.2);}
	.lnb .wrap>* {position:relative; float:left; height:100px;}
	
	.lnb .wrap .dep1 {min-width:230px; border-right:1px solid #f2f2f2; padding-top:40px; padding-left:50px;}
	.lnb .wrap .dep1 h2 {font-family:"NanumMyeongjo"; font-weight:700; font-size:20px; color:#000; line-height:1;}
	.lnb .wrap .dep1 h2 span {font-family:"NotoSansKR"; font-weight:700; font-size:22px; color:#ff8822; padding-right:15px;}
	
	.lnb .wrap .dep2 ul {font-size:0; padding:43px 110px 0 50px;}
	.lnb .wrap .dep2 ul li {display:inline-block; line-height:1;}
	.lnb .wrap .dep2 ul li+li {margin-left:30px;}
	.lnb .wrap .dep2 ul li a {display:block; font-size:18px; color:#000; font-weight:300; position:relative; line-height:1;}
	.lnb .wrap .dep2 ul li a:before {
		display:block; content:"";
		position:absolute; bottom:-39px; left:0; width:100%; height:8px; border-radius:20px; background:transparent;
	}
	.lnb .wrap .dep2 ul li a:hover {color:#ff8822;}
	.lnb .wrap .dep2 ul li.on a {color:#000;}
	.lnb .wrap .dep2 ul li.on a:before {background:#ff8822;}
		
	.lnb .wrap .i-home {
		position:absolute; top:0; right:0; width:100px; height:100px; text-align:center; padding-top:20px;
	}
	.lnb .wrap .i-home p {font-family:"Alegreya"; font-size:12px; margin-top:5px;}

	.lnb.fixOn {position:fixed !important; z-index:700 !important; top:0 !important;  background-color:#fff; box-shadow:20px 20px 20px rgba(0,0,0,.1);}
	.lnb.fixOn .wrap {box-shadow:none;}
	.lnb.fixOn .wrap>* {height:60px;}
	.lnb.fixOn .wrap .dep1 {padding-top:20px;}
	.lnb.fixOn .wrap .dep1 h2 {font-size:18px;}
	.lnb.fixOn .wrap .dep1 h2 span {font-size:20px;}
	.lnb.fixOn .wrap .dep2 ul {padding-top:22px;}
	.lnb.fixOn .wrap .dep2 ul li a {font-size:16px;}
	.lnb.fixOn .wrap .i-home {padding-top:8px;}
	.lnb.fixOn .wrap .i-home p {display:none;}
	.lnb.fixOn .wrap .dep2 ul li a:before {bottom:-22px;}
	
	/*컨텐츠::마물*/
	section.content_wrap {max-width:1200px; margin:50px auto 0; padding:100px 0;}
	section.content_wrap img {max-width:100%;}
	section.content_wrap>article {position:absolute; top:-340px; left:0; width:100%; text-align:center;}
	section.content_wrap>article h2 {color:#fff; font-family:"NanumMyeongjo"; font-size:50px;}
	
	/*footer*/	
	footer>.wrap1 {background-color:#674430; padding:0 5vw; height:70px; overflow:hidden; color:#fff;}
	footer>.wrap1>div {float:left; display:inline-block;}
	footer>.wrap1>div p {font-family:"NanumMyeongjo"; font-size:18px;}
	footer>.wrap1>div.infor {width:40%; margin-top:25px;}
	footer>.wrap1>div.infor>* {float:left; display:inline-block;}
	footer>.wrap1>div.infor>p {width:120px;}
	footer>.wrap1>div.infor>ul {width:calc(100% - 120px);}
	footer>.wrap1>div.infor>ul li {float:left; display:inline-block;}
	footer>.wrap1>div.infor>ul li+li {margin-left:20px;}
	footer>.wrap1>div.footer-family {width:60%;}
	
	footer .footer-family {height:70px; border-left:1px solid #856959;}
	footer .footer-family-wrap {width:100%; padding:0 0 0 40px; overflow:hidden;}
	footer .footer-family-wrap>div {float:left; display:inline-block;}
	footer .footer-family-title {width:290px; overflow:hidden; font-size:0; padding-top:25px;}
	footer .footer-family-title>* {float:left; display:inline-block;}
	footer .footer-family-title .btn-part {border-radius:30px; overflow:hidden; margin-left:25px; margin-top:5px;}
	footer .footer-family-title .btn-part a {
		float:left; display:inline-block; width:20px; height:20px; background:#fff center no-repeat;
	}
	footer .footer-family-title .btn-part a+a {margin-left:1px;}
	footer .footer-family-title .btn-part a.prev {width:calc(20px + 6px); background-image:url(../images/common/prev.png); background-position:12px center;}
	footer .footer-family-title .btn-part a.pause {background-image:url(../images/common/pause.png);}
	footer .footer-family-title .btn-part a.play {background-image:url(../images/common/play.png);}
	footer .footer-family-title .btn-part a.next {width:calc(20px + 6px);  background-image:url(../images/common/next.png); background-position:7px center;}
	
	footer .footer-family-list {width:calc(100% - 290px); overflow:hidden;}
	footer .footer-family-list ul {overflow:hidden; width:1200px; margin-top:18px;}
	footer .footer-family-list ul li {float:left; padding-right:50px;}
	footer .footer-family-list ul li a {display:block; font-size:16px; color:#fff; height:40px; line-height:40px; letter-spacing:0; color:#ad988c;}
	footer .footer-family-list ul li a:hover {color:#fff;}
	
	footer>.wrap2 {padding:50px 5vw; background-color:#ad988c; position:relative;}
	footer>.wrap2 .address {font-size:16px; color:#fff; line-height:1.8;}
	footer>.wrap2 .address ul {overflow:hidden;}
	footer>.wrap2 .address ul li {float:left; display:inline-block; letter-spacing:0;}
	footer>.wrap2 .address ul li a {color:#fff;}
	footer>.wrap2 .address ul li span {font-weight:500;}
	footer>.wrap2 .address ul li+li {margin-left:40px;}
	
		
}


@media (min-width:992px) and (max-width: 1400px) {
	body>header .head .logo {width:280px; margin-left:-140px;}
	body>header .head .link ul {padding-left:1vw;}
	nav.pc .gnb>ul {padding-right:1vw;}
	body>header .head .link ul li+li {margin-left:2vw;}
	nav.pc .gnb>ul>li+li {margin-left:2vw;}
}



/* ************************ 테블릿 (~991) ************************ */
@media screen and (max-width: 991px) {
	
	html,body {font-size:15px; overflow-x:hidden;}	
	.pc {display:none !important;}

	/*헤더*/
	body>header {position:relative; z-index:999; width:100%; left:0; top:0;}
	body>header .head {z-index:100; left:0; top:0; width:100%; height:60px; overflow:hidden; line-height:1; background-color:#fff;}
	/* body>header .head aside.mobile {position:absolute; right:20px; top:10px; width:40px; height:40px; } */
	/* body>header .head aside.mobile .gnbView {position:relative; display:block; width:100%; height:100%; padding-left:15px;} */
	/* body>header .head aside.mobile .gnbView div {position:absolute; width:100%; height:1px; width:25px; background:#666; margin-top:50%;} */
	/* body>header .head aside.mobile .gnbView div:before, */
	/* body>header .head aside.mobile .gnbView div:after {content:""; display:block; position:absolute; width:25px; height:1px; background:#666; overflow:hidden;} */
	/* body>header .head aside.mobile .gnbView div:before {margin-top:-8px;} */
	/* body>header .head aside.mobile .gnbView div:after {margin-top:8px;} */
	/* body>header .head h1 {float:left; margin:0 0 0 20px !important; display:block;} */
	body>header .head h1 {position:absolute; top:0; left:50%; width:180px; height:150px; margin-left:-90px;}
	body>header .head h1 a {
		padding-top:30px; width:100%; height:100%;
		display:inline-block; border-radius:0 0 20px 20px; background:#fff; text-align:center;
	}
	body>header .head h1 a img {height:90px;}
	/* body>header .head h1 a img {display:block; height:40px; font-size:0; line-height:0;} */
	
	/*링크*/
	body>header .head .link {position: absolute; left:0; top:35px;  width:100%; height:50px;}
	body>header .head .link ul {width:100%; height:100%; text-align:left; padding-left:5vw; position:relative;}
	body>header .head .link ul li {display:inline-block;}
	body>header .head .link ul li+li {margin-left:60px;}
	body>header .head .link ul li a {display:block; font-size:18px; font-weight:400; color:#fff; padding:20px 0; line-height:1;}
	body>header .head .link ul li.kakao a {padding-right:37px; background:url(../images/common/i-ch.png)no-repeat right center;}
	
	
	/*gnb*/
	header .head .gnbView {position:absolute; display:block; width:60px; height:60px; left:0; top:0; /* border-right:1px solid #eee; */ background:url(../images/common/i-menu.png)no-repeat center;}
	header .head .kakaoChanel {position:absolute; display:block; width:60px; height:60px; right:0; top:0; /* border-left:1px solid #eee; */ background:url(../images/common/i-ch.png)no-repeat center;}
	
	nav.mobile {z-index:9999; position:fixed; visibility:hidden; top:0; width:90%; height:100%; overflow:hidden; background:#fff; box-shadow:5px 0px 10px rgba(0,0,0,.3) !important;}
	nav.mobile .closeWrap {position:relative; height:60px; background-color:#fff; color:#000; border-bottom:1px solid #ccc;}
	nav.mobile .closeWrap .gnbClose {display:block; width:60px; height:60px; background:url(../images/common/icon_x.png) 50% 50% no-repeat; background-size:30%; float:right; border-left:1px solid #eee;}
	nav.mobile .closeWrap>a {display:inline-block; float:left; height:60px; color:#000; font-size:12px; padding:0 20px; line-height:60px; border-right:1px solid #eee;}
	/* nav.mobile .closeWrap>a.online {padding:20px 10px 0 10px; color:#000; border-right:1px solid #eee;} */
	/* nav.mobile .closeWrap>a.home {float:left; padding:20px 20px 0 20px; border-right:1px solid #eee;} */
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5);}

	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb .home {display:block; width:100%; background-color:#f0f0f0; padding:12px 20px; border-bottom:1px solid #333;}
	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto;}
	nav.mobile .gnb>ul>li {clear:both; position:relative; padding:0;}
	nav.mobile .gnb>ul>li>a {display:block; padding:18px 20px; color:#000; border-bottom:1px solid #eee; font-size:16px; font-weight:400; background:#fff;}
	/* nav.mobile .gnb>ul>li>a:hover {color:#bea99d; background-color:#f9f9f9;} */
	nav.mobile .gnb>ul>li.on>a {color:#fff; background:#4a3323; border-bottom:1px solid #4a3323;}
	nav.mobile .gnb>ul>li>ul {display:none;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;}
	nav.mobile .gnb>ul>li>ul>li a {display:block; padding:15px 20px 15px 50px; font-size:15px; font-weight:400; color:#333; border-bottom:1px solid #eee; position:relative;}
	nav.mobile .gnb>ul>li>ul>li a:before {
		position:absolute; top:22px; left:30px; display:block; content:"";
		width:10px; height:1px; background:#ccc;
	}
	nav.mobile .gnb>ul>li>ul>li.on a:before {background:#fff;}
	nav.mobile .gnb>ul>li>ul>li a:hover {background:#f9f9f9;}
	nav.mobile .gnb>ul>li>ul>li.on a {border-bottom:1px solid rgba(255,255,255,.2); background:#bea99d; color:#fff;}
	
	
	/* 상단배경::마무리됨 */
	.topBg {position:relative; max-width:100%; height:150px; background-repeat:no-repeat; background-position:center top; background-size:cover;}
	.topBg .txt {width:100%; max-width:100%; height:100%; position:relative; color:#fff;}
	/* .topBg .txt .subSlogan {font-family:'Alegreya'; font-size:16px; color:#fff; letter-spacing:0;} */
	.topBg .txt .subSlogan:before {
		/* content:"You’re not alone."; display:block; */
		/* position:absolute; bottom:30px; right:50px; */
		/* background:url(../images/common/hypen_lnb.jpg)no-repeat left center; padding-left:40px; */
	}
	
		/**/
		.topBg.intro {background-image:url(../images/common/topBg_intro.jpg);}
		.topBg.infor {background-image:url(../images/common/topBg_infor.jpg);}
	
	
	/*서브메뉴*/
	.lnb {display:none;}	
	

	/* 상단배경 */
	/* .topBg {position:relative; max-width:100%; height:150px; background:url(../images/common/topBg.jpg) no-repeat calc(100% - 30%) 0; background-size:cover;} */
	/* .topBg .txt {display:none;} */
	
		/*class색상별로적용했음:변경요청예상*/
		.topBg.blue {background-image:url(../images/common/topBg-blue.jpg);}
		.topBg.gree {background-image:url(../images/common/topBg-gree.jpg);}
		.topBg.mint {background-image:url(../images/common/topBg-mint.jpg);}
		.topBg.pink {background-image:url(../images/common/topBg-pink.jpg);}
		.topBg.yell {background-image:url(../images/common/topBg-yell.jpg);}
		
	
	/*컨텐츠::마물*/
	section.content_wrap {max-width:100%; margin:0 auto; padding:0 30px 50px;}
	section.content_wrap img {max-width:100%;}
	section.content_wrap>article {background:#4a3323 ; margin:0 -30px 50px; padding:15px 30px; text-align:center;}
	/* section.content_wrap>article {position:absolute; top:-180px; left:0; width:100%; text-align:center;} */
	section.content_wrap>article h2 {color:#fff; font-family:"NanumMyeongjo"; font-size:24px;}
		
	
	/*footer*/
	footer {position:relative;}
	footer>.wrap1 {background-color:#674430; padding:0; height:auto; overflow:hidden; color:#fff;}
	/* footer>.wrap1>div {height:70px;} */
	footer>.wrap1>div p {font-family:"NanumMyeongjo"; font-size:18px;}
	footer>.wrap1>div.infor {padding:20px 5vw;}
	footer>.wrap1>div.infor {overflow:hidden;}
	footer>.wrap1>div.infor>* {float:left; display:inline-block;}
	footer>.wrap1>div.infor>p {width:120px;}
	footer>.wrap1>div.infor>ul {width:calc(100% - 120px);}
	footer>.wrap1>div.infor>ul li {float:left; display:inline-block; margin-right:20px;}
	
	footer .footer-family {height:70px; border-top:1px solid #856959; padding-left:5vw;}
	footer .footer-family-wrap {width:100%; overflow:hidden;}
	footer .footer-family-wrap>div {float:left; display:inline-block;}
	footer .footer-family-title {width:270px; overflow:hidden; font-size:0; padding-top:25px;}
	footer .footer-family-title>* {float:left; display:inline-block;}
	footer .footer-family-title .btn-part {border-radius:30px; overflow:hidden; margin-left:25px; margin-top:5px;}
	footer .footer-family-title .btn-part a {
		float:left; display:inline-block; width:20px; height:20px; background:#fff center no-repeat;
	}
	footer .footer-family-title .btn-part a+a {margin-left:1px;}
	footer .footer-family-title .btn-part a.prev {width:calc(20px + 6px); background-image:url(../images/common/prev.png); background-position:12px center;}
	footer .footer-family-title .btn-part a.pause {background-image:url(../images/common/pause.png);}
	footer .footer-family-title .btn-part a.play {background-image:url(../images/common/play.png);}
	footer .footer-family-title .btn-part a.next {width:calc(20px + 6px);  background-image:url(../images/common/next.png); background-position:7px center;}
	
	footer .footer-family-list {width:calc(100% - 270px); overflow:hidden;}
	footer .footer-family-list ul {overflow:hidden; width:1200px; margin-top:18px;}
	footer .footer-family-list ul li {float:left; padding-right:50px;}
	footer .footer-family-list ul li a {display:block; font-size:16px; color:#fff; height:40px; line-height:40px; letter-spacing:0; color:#ad988c;}
	footer .footer-family-list ul li a:hover {color:#fff;}
	
	footer>.wrap2 {padding:30px 5vw; background-color:#ad988c; position:relative;}
	footer>.wrap2 .address {font-size:14px; color:#fff; line-height:1.8; padding-right:100px;}
	footer>.wrap2 .address ul {overflow:hidden;}
	footer>.wrap2 .address ul li {float:left; display:inline-block; width:100%; letter-spacing:0;}
	footer>.wrap2 .address ul li a {color:#fff;}
	footer>.wrap2 .address ul li span {font-weight:500;}
}









/* ********************************* 모바일 ********************************* */
@media screen and (max-width:767px) {
	
	.topBg {background-position:calc(100% - 25%) center;}
	
	footer>.wrap1>div.infor>* {width:100% !important;}
	footer>.wrap2 .address {padding-right:0;}
	footer .footer-family {height:120px;}
	footer .footer-family-list {width:100% !important;}
	footer .footer-family-list ul {margin-top:5px; height:40px;}
	
	
	/*컨텐츠::마물*/
	/* section.content_wrap {padding:30px 10px;} */
	
	#gotop {
		display:block !important; opacity:1 !important;
		z-index:888; position:fixed; bottom:10px; right:10px;
		width:50px; height:50px; line-height:48px; text-align:center;
		font-family:"Alegreya"; font-size:14px; color:#674430;
		background-color:#fff; border-radius:50%;
		margin-bottom:0;
		box-shadow:none;
		/* box-shadow:2px 2px 2px rgba(0,0,0,.1); */
		border:1px solid #ad988c;
		/* margin-bottom:-25px; */
	}
	
	
	
}