@charset "utf-8";

#wrap {
	min-width:320px;
}

/* header */
header {
	position:fixed;
	top:0; left:0;
	width:100%; min-width:320px;
	height:60px;
	background:#fff;
	box-shadow:0 2px 3px rgba(0, 0, 0, 0.3);
	z-index:11;
}
header h1 {padding:22px 0 0 0; text-align:center;}
header h1 img {width:104px;}
header .m-menu {position:absolute; top:0; left:0; display:block;}
header .m-menu img {width:50px;}
header select {display:none;}

.dim {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#3b3c3c; opacity:0.7; z-index:9; display:none;}

/* gnb */
#gnb {
	position:fixed; top:0; left:-320px;
	width:256px;
	height:100%;
	background-color:#1a99ff;
	z-index:10;
}
#gnb .m-head {position:relative; height:38px; padding:22px 0 0 22px; background-color:#1a99ff;}
#gnb .m-head h2 img {width:140px;}
#gnb .m-head > a {position:absolute; top:22px; right:27px;}
#gnb .m-head > a img {height:15px;}
#gnb > ul {border-bottom:1px solid #fff;}
#gnb > ul > li {border-top:1px solid #fff;}
#gnb > ul > li > a {display:block; height:51px; line-height:51px; padding:0 0 0 28px; color:#fff; font-family:'nanumBold'; font-size:15px; background:url("../images/common/gnb_arrow01_off.png") no-repeat 220px 21px; background-size:9px 9px;}
#gnb > ul > li > a.on {background-image:url("../images/common/gnb_arrow01_on.png");}
#gnb > ul > li ul {display:none; padding:14px 0; background:#ebeff2;}
#gnb > ul > li ul a {display:block; padding:0 0 0 28px; color:#1e2c2f; font-family:'nanumBold'; font-size:15px; line-height:29px;}
#gnb .m-lang {display:block; width:59px; height:34px; line-height:34px; margin:20px 27px 0 auto; color:#fff; font-family:'nanumBold'; font-size:15px; border:1px solid #fff; text-align:center;} /* 20160325 추가 */
#gnb .m-close {position:absolute; top:0; right:-64px; z-index:10;}
#gnb .m-close img {height:60px;}

/* dBody */
#dBody {
	padding:60px 0 80px 0;
}
#dBody .title-box {position:relative; height:50px; background-color:#74808d; text-align:center;}
#dBody .title-box h2 {line-height:50px; color:#fff; font-family:'nanumBold'; font-size:19px;}
#dBody .title-box .btn-back {position:absolute; top:0; left:0;}
#dBody .title-box .btn-back img {width:50px;}
#dBody .location {display:none;}

/* contents */
#contents {
	padding:30px 15px 0 15px;
}

/* btn-top */
.btn-top {
	position:fixed; bottom:15px; right:15px;
	z-index:10;
}
.btn-top img {width:45px;}

/* all-product */
.all-product {position:fixed; bottom:15px; left:15px; z-index:10;}
.all-product > div {position:fixed; bottom:78px; left:0; width:100%; min-width:320px; padding:0 15px; z-index:10; box-sizing:border-box;}
.all-product > div > ul {width:100%; padding:10px 0; border:1px solid #1f4ca6; background-color:#fff;}
.all-product > div > ul > li {position:relative; padding:10px 10px 10px 25px; min-height:18px; border-top:1px solid #eaeaea; overflow:hidden;}
.all-product > div > ul > li > a {position:absolute; top:10px; left:25px; color:#444; font-size:16px; font-family:'nanumBold';}
.all-product > div > ul > li > ul {padding-left:110px; overflow:hidden;}
.all-product > div li:first-child {border-top:0 none;}
/*.all-product > div li li {float:left; margin-right:30px;}*/
.all-product .btn_open {display:block; width:68px; height:45px; line-height:45px; padding:0 15px 0 30px; color:#fff; font-family:'nanumBold'; font-size:12px; border-radius:5px; background:#1f4ca6 url("../images/icon/ico_dot01.png") 12px center no-repeat; background-size:11px 11px;}
.all-product .btn_open br {display:none;}
.all-product .btn_close {position:absolute; top:25px; right:40px;}
.all-product .btn_close img {width:12px; height:12px;}
.all-product a {line-height:18px;}

/* footer */
footer {

}
footer .foot-box01 {position:relative; padding:15px 15px 70px 15px; background:#263238;}
footer .foot-box01 .foot-utill {overflow:hidden;}
footer .foot-box01 .foot-utill li {float:left; margin-left:11px; padding-left:11px; border-left:1px solid #687074;}
footer .foot-box01 .foot-utill li:first-child {margin-left:0; padding-left:0; border-left:none;}
footer .foot-box01 .foot-utill li a {color:#a1a1a1; font-family:'nanumBold'; font-size:12px; line-height:13px;}
footer .foot-box01 .familysite {position:absolute; left:15px; right:15px; bottom:15px;}
footer .foot-box01 .familysite > a {display:block; height:40px; line-height:40px; padding:0 0 0 15px; color:#a1a1a1; font-family:'nanumBold'; font-size:14px; background:#1e292e url("../images/common/foot_family_arrow_off.png") no-repeat 95% center; background-size:17px 9px;}
footer .foot-box01 .familysite > a.on {background-image:url("../images/common/foot_family_arrow_on.png");}
footer .foot-box01 .familysite > ul {display:none; padding:15px 0; border-top:1px solid #424242; background-color:#1e292e;}
footer .foot-box01 .familysite > ul li a {display:block; height:28px; line-height:28px; padding:0 0 0 15px; color:#a1a1a1; font-size:14px;}
footer .foot-box01 .familysite > ul li a:hover {color:#fff;}
footer .foot-box02 {padding:15px 15px 35px 15px; background:#f0f0f0;}
footer .foot-box02 address,
footer .foot-box02 p {display:block; color:#37474f; font-size:10px; line-height:15px;}

/* layer-pop */
.layer-pop {
		
}
.layer-dim {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#3b3c3c; opacity:0.7; z-index:20;}
.layer-wrap {position:fixed; top:10%; left:3%; right:3%; background:#fff; z-index:21;}
.pop-head {position:relative; height:40px; line-height:40px; padding:0 30px 0 10px; color:#fff; font-family:'nanumBold'; font-size:14px; background:#15acfb;}
.pop-head .close {position:absolute; top:12px; right:12px;}
.pop-head .close img {width:16px; vertical-align:top;}
.pop-con {padding:10px; text-align:center;}
.pop-con img {width:100%;}
.pop-foot {height:30px; line-height:30px; padding:0 0 0 10px; background:#eee;}
.pop-foot * {vertical-align:middle;}
.pop-foot label {color:#777; font-size:11px;}

/* Tablet and PC _ 980~ */
@media all and (min-width:980px) {

	/* header */
	header {
		position:fixed;
		top:0; left:0;
		width:100%;
		height:80px;
		box-shadow:0 2px 3px rgba(0, 0, 0, 0.3);
		z-index:11;
	}
	header > div {position:relative; width:960px; margin:0 auto;}
	header h1 {position:absolute; top:27px; left:0; padding:0;}
	header h1 img {width:157px;}
	header .m-menu {display:none;}
	header .m-menu img {width:50px;}
	header select {position:absolute; top:28px; right:0; height:25px; line-height:25px; display:block;}

	/* all-product */
	.all-product {position:fixed; top:325px; bottom:auto; left:auto; right:0; z-index:10;}
	.all-product > div {position:absolute; top:0; left:87px; width:300px; min-width:auto; padding:0; z-index:10; box-sizing:border-box;}
	.all-product > div > ul {width:100%; padding:20px 0 10px border:1px solid #bbb; background-color:#fff;}
	.all-product > div > ul > li {position:relative; padding:10px 10px 10px 25px; min-height:18px; border-top:1px solid #eaeaea; overflow:hidden;}
	.all-product > div > ul > li > a {position:absolute; top:10px; left:25px; color:#444; font-size:14px; font-family:'nanumBold';}
	.all-product > div > ul > li > ul {padding-left:110px; overflow:hidden;}
	.all-product > div li:first-child {border-top:0 none;}
	/*.all-product > div li li {float:left; margin-right:30px;}*/
	.all-product .btn_open {display:block; width:87px; line-height:18px; padding:38px 0 6px; color:#fff; font-family:'nanumBold'; font-size:14px; text-align:center; border-radius:0; background:#383838 url("../images/icon/arrow03.png") center 15px no-repeat; background-size:auto auto;}
	.all-product .btn_open.on {background-image:url("../images/icon/arrow04.png");}
	.all-product .btn_open br {display:block;}
	.all-product .btn_close {position:absolute; top:8px; right:10px;}
	.all-product .btn_close img {width:12px; height:12px;}
	.all-product a {line-height:24px; font-size:14px;}

	.dim {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#3b3c3c; opacity:0.7; z-index:9; display:none;}

	/* gnb */
	#gnb {
		position:static;
		width:auto;
		background:none;
		overflow:inherit;
		z-index:10;
	}
	#gnb .m-head {display:none;}
	#gnb > ul {padding:30px 0 0 218px; border-bottom:none;}
	#gnb > ul:after {content:''; display:block; clear:both;}
	#gnb > ul > li {position:relative; float:left; height:50px; padding:0 25px; border-top:none;}
	#gnb > ul > li > a {display:block; height:28px; line-height:20px; padding:0; color:#263238; font-family:'nanumBold'; font-size:16px; background:none;}
	#gnb > ul > li ul {position:absolute; top:50px; left:5px; width:160px; padding:0; border:1px solid #ddd; border-top:none; background:#fff; box-shadow:5px 5px 4px 0 rgba(0, 0, 0, 0.15);}
	#gnb > ul > li ul li {border-top:1px solid #ddd;}
	#gnb > ul > li ul li a {display:block; padding:0 0 0 20px; color:#263238; font-family:'nanum'; font-size:14px; line-height:43px;}
	#gnb > ul > li ul li a:hover {color:#fff; background:#1a99ff;}
	#gnb > ul > li:hover > a,
	#gnb > ul > li.on > a {border-bottom:2px solid #1a99ff;}
	#gnb .m-lang, /* 20160325 추가 */
	#gnb .m-close {display:none;}

	/* dBody */
	#dBody {
		padding:80px 0 100px 0;
	}
	#dBody .title-box {position:relative; height:140px; background-color:#74808d; text-align:center;}
	#dBody .title-box h2 {line-height:140px; color:#fff; font-family:'nanumBold'; font-size:32px;}
	#dBody .title-box .btn-back {display:none;}
	#dBody .location {display:block; border-bottom:1px solid #e1e1e1; background:#f6f6f6;}
	#dBody .location > div {width:960px; height:44px; margin:0 auto;}
	#dBody .location > div:after {content:''; display:block; clear:both;}
	#dBody .location > div > a {float:left; border-left:1px solid #e1e1e1; border-right:1px solid #e1e1e1;}
	#dBody .location > div > a img {vertical-align:top;}
	#dBody .location > div > div {float:left; position:relative; width:201px; margin-left:-1px; background:#fff;}
	#dBody .location > div > div > a {display:block; height:44px; line-height:44px; padding:0 0 0 18px; color:#444; font-family:'nanumBold'; font-size:14px; border-left:1px solid #e1e1e1; border-right:1px solid #e1e1e1; background:url("../images/common/location_arrow01.png") no-repeat 170px 20px;}
	#dBody .location > div > div > ul {position:absolute; top:44px; left:0; width:199px; border:1px solid #e1e1e1; border-top:none; background:#fff; display:none; z-index:8;}
	#dBody .location > div > div > ul li {border-top:1px solid #e1e1e1;}
	#dBody .location > div > div > ul li a {display:block; height:44px; line-height:44px; padding-left:19px; color:#444; font-family:'nanumBold'; font-size:14px;}
	#dBody .location > div > div > ul li a:hover {color:#fff; background:#002b78;}

	/* contents */
	#contents {
		width:960px;
		margin:0 auto;
		padding:60px 0 0 0;
	}

	/* footer */
	footer {

	}
	footer > div > div {position:relative; width:960px; min-height:55px; margin:0 auto;}
	footer .foot-box01 {height:55px; padding:0; background:#263238;}
	footer .foot-box01 .foot-utill {padding:20px 0 0 0; overflow:hidden;}
	footer .foot-box01 .foot-utill li {float:left; margin-left:11px; padding-left:11px; border-left:1px solid #687074;}
	footer .foot-box01 .foot-utill li:first-child {margin-left:0; padding-left:0; border-left:none;}
	footer .foot-box01 .foot-utill li a {color:#a1a1a1; font-family:'nanumBold'; font-size:14px; line-height:15px;}
	footer .foot-box01 .familysite {position:absolute; left:auto; right:0; bottom:0; width:239px;}
	footer .foot-box01 .familysite > a {display:block; height:55px; line-height:55px; padding:0 0 0 30px; color:#a1a1a1; font-family:'nanumBold'; font-size:14px; background:#1e292e url("../images/common/foot_family_arrow_off.png") no-repeat 90% center; background-size:12px 8px;}
	footer .foot-box01 .familysite > ul {display:none; padding:15px 0; border-top:1px solid #424242; background-color:#1e292e;}
	footer .foot-box01 .familysite > ul li a {display:block; height:28px; line-height:28px; padding:0 0 0 30px; color:#a1a1a1; font-size:14px;}
	footer .foot-box01 .familysite > ul li a:hover {color:#fff;}
	footer .foot-box02 {padding:20px 0 55px 0;}
	footer .foot-box02 address,
	footer .foot-box02 p {display:block; color:#37474f; font-size:12px; line-height:18px;}

	/* layer-pop */
	.layer-pop {
			
	}
	.layer-dim {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#3b3c3c; opacity:0.7; z-index:20;}
	.layer-wrap {position:fixed; top:10%; left:50%; right:auto; width:480px; margin-left:-240px; background:#fff; z-index:21;}
	.pop-head {position:relative; height:60px; line-height:60px; padding:0 40px 0 20px; color:#fff; font-family:'nanumBold'; font-size:18px; background:#15acfb;}
	.pop-head .close {position:absolute; top:19px; right:20px;}
	.pop-head .close img {width:22px; vertical-align:top;}
	.pop-con {padding:10px; text-align:center;}
	.pop-con img {width:100%;}
	.pop-foot {height:40px; line-height:40px; padding:0 0 0 10px; background:#eee;}
	.pop-foot * {vertical-align:middle;}
	.pop-foot label {margin-left:3px; color:#777; font-size:12px;}

}

/* PC _ 1220~ */
@media all and (min-width:1220px) {

	header > div {width:1200px;}

	/* gnb */
	#gnb > ul {padding-left:350px;}
	#gnb > ul > li {padding:0 35px;}
	#gnb > ul > li ul {left:15px;}

	/* dBody */
	#dBody .location > div {width:1200px;}

	/* contents */
	#contents {
		width:1200px;
	}

	/* footer */
	footer > div > div {width:1200px;}

}