@charset "utf-8";
@import url('layout.css');

/* 나눔바른고딕 무료 웹폰트 */
@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 300;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.ttf') format('truetype');
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 400;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.ttf') format('truetype');
}

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 700;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.ttf') format('truetype')
}

@import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');

/***************************************************************************/
/*                                         body 공통 설정                                          /
/***************************************************************************/

html,body {width: 100%;height: 100%;}
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin: 0;padding: 0;}
ul,ol,dl {list-style: none;}
img {border:0;vertical-align: top;}
fieldset {border: none;}
ul {list-style: none;padding: 0;margin: 0;}
fieldset{border: none;}
li{list-style: none;}
input,select,button,select{vertical-align: middle;}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;}
address,caption,cite,code,dfn,em,th,var{font-style: normal;font-weight: normal;}
a {outline: 0;}
a:focus {color: #5c5c5c;}
a:link {text-decoration: none;}
a:active {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
table {width: 100%;border-spacing: 0}/* border-collapse: collapse; ff에서 border="0" 인 경우 문제 발생 */
table {table-layout: fixed;border-collapse: collapse;word-break: break-all;}

button,
input[type="submit"],
input[type="button"] {overflow: visible;margin: 0;background-color: transparent;border: none;-webkit-appearance: button;cursor: pointer;font: inherit;color: inherit;}
button::-moz-focus-inner,
input::-moz-focus-inner {padding: 0;border: 0;}
button {outline: 0;}
textarea {resize: none;}

html {-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;}

/* 기본설정 */
body {font: 16px 'Spoqa Han Sans', 'Sans-serif';font-weight:400;line-height: 1.6;color: #333;letter-spacing: -1px;}
select,input,textarea,button {font: 16px 'Spoqa Han Sans', 'Sans-serif';color: #333;letter-spacing:-1px;line-height: 1.5;}
.hide,legend,caption,hr {position: absolute;left: -9999px;width: 0;height: 0;overflow: hidden;text-indent: -9999px;}
.lse {letter-spacing:-1px;}
.ls0 {letter-spacing:0;}

/* 메인 */
#wrap {position: relative;width: 100%;min-height: 100%;}
.wrap-top {position: relative;width:1200px;margin:0 auto;padding-top:60px;}
.wrap {position: relative;width:1200px;margin:0 auto;}
.btnbox1 {position:absolute;left:0;top:105px;width:100%;text-align:center;}
.btnbox2 {position:absolute;left:0;bottom:160px;width:100%;text-align:center;}

/* header */
#header-area {position:fixed;z-index:100;width:100%;height:60px;background:#fff;border-bottom:1px solid #efefef;}
#header-area:after {display: block;content: "";clear: both;}
#header-area .top_logo {float:left;margin:12px 0 0 20px;font-size:20px;color:#222;letter-spacing:-2px;font-weight:bold;}
.top_rcell {float:right;margin-right:20px;}
.top_rcell:after {display: block;content: "";clear: both;}
.top_rcell li {float:left;margin:12px 0 0 8px;}
.top_rcell li img {width:80px;height:37px;}
.btn_join {padding:0 15px 2px 15px;line-height: 33px;background-color:#d20b14;border-radius:1.5px;color: #fff;border: 1px solid #d20b14;text-align: center;text-decoration: none;display: inline-block;font-size:13px;}
.btn_tbase {padding:0 15px 2px 15px;line-height: 33px;background-color:#959595;border-radius:1.5px;color: #fff;border: 1px solid #959595;text-align: center;text-decoration: none;display: inline-block;font-size:13px;}

/* footer */
#footer {width:100%;background-color:#fafafa;border-top:1px solid #efefef;}
#footer .com-info {padding: 40px 0 50px 40px;}
#footer .com-info > ul {width:100%;}
#footer .com-info > ul,
#footer .com-info > ul > li {float:left;}
#footer .com-info > ul > li {font-size:12.5px;line-height:28px;color:#666;font-weight:300;letter-spacing:-1.2px;}
#footer .com-info > ul > li + li {padding-left: 25px;}
#footer .com-info .copyright {clear:both;padding-top: 25px;font-size: 11px;color: #666;letter-spacing: 0;}

/* 상품 */
#goods {position: relative;width:100%;padding-top:66px;height:450px;background:#f6f6f6;box-sizing: border-box;}
#goods:after {display: block;content: "";clear: both;}
.goods_list {margin:0 auto;width:1200px;}
.goods_list:after {display: block;content: "";clear: both;}
.goods_list ul {float:left;}
.goods_list ul li {float:left;width:300px;text-align:center;}
.arrow_left {position:absolute;left:20px;top:200px;;width:40px;}
.arrow_right {position:absolute;right:20px;top:200px;width:40px;}

/* 모바일 */
@media (max-width:767px) {
	
	input,button,textarea {border-radius:0;-webkit-appearance:none;} 
	.wrap-top {position: relative;width:100%;margin:0 auto;padding-top:60px;}
	.wrap-top img {width:100%;}
	.wrap {position: relative;width:100%;margin:0 auto;}
	.wrap img {width:100%;}
	.btnbox1 {position:absolute;left:0;top:35px;width:100%;text-align:center;}
	.btnbox1 img {width:50%;}
	.btnbox2 {position:absolute;left:0;bottom:70px;width:100%;text-align:center;}
	.btnbox2 img {width:50%;}

	/* header */
	#header-area .top_logo {float:left;margin:18px 0 0 15px;font-size:17px;color:#222;letter-spacing:-1px;font-weight:bold;}
	.top_rcell {float:right;margin-right:15px;}
	.top_rcell:after {display: block;content: "";clear: both;}
	.top_rcell li {float:left;margin:12px 0 0 5px;}
	.top_rcell li img {width:80px;height:37px;}
	.btn_join {padding:1px 12px 0 12px;line-height: 32px;border-radius:1.5px;background-color:#d20b14;color: #fff;border: 1px solid #d20b14;text-align: center;text-decoration: none;display: inline-block;font-size:14px;}
	.btn_tbase {padding:1px 12px 0 12px;line-height: 32px;border-radius:1.5px;background-color:#959595;color: #fff;border: 1px solid #959595;text-align: center;text-decoration: none;display: inline-block;font-size:14px;}

	/* footer */
	#footer {width:100%;background-color:#fafafa;border-top:1px solid #efefef;}
	#footer .com-info {padding: 30px 15px 30px 15px;}
	#footer .com-info > ul {width:100%;}
	#footer .com-info > ul,
	#footer .com-info > ul > li {clear:both;}
	#footer .com-info > ul > li {font-size:12.5px;line-height:23px;color:#666;font-weight:300;letter-spacing:-0.8px;}
	#footer .com-info > ul > li + li {padding-left: 0;}
	#footer .com-info .copyright {clear:both;padding-top: 25px;font-size: 11px;color: #666;letter-spacing: 0;}

	/* 상품슬라이드 */
	#goods {position: relative;width:100%;padding:30px 0;height:100%;background:#f6f6f6;box-sizing: border-box;}
	#goods:after {display: block;content: "";clear: both;}
	.goods_list {margin:0 auto;width:80%;}
	.goods_list:after {display: block;content: "";clear: both;}
	.goods_list ul {float:left;width:100%;}
	.goods_list ul li {float:left;width:25%;text-align:center;}
	.goods_list ul li img {width:100%;}
	.arrow_left {position:absolute;left:8px;top:60px;;width:20px;}
	.arrow_left img {width:20px;height:30px;}
	.arrow_right {position:absolute;right:8px;top:60px;width:20px;}
	.arrow_right img {width:20px;height:30px;}

}

/* 태블릿 */
@media (min-width:768px) and (max-width:1023px) {

	input,button,textarea {border-radius:0;-webkit-appearance:none;} 
	.wrap-top {width:100%;margin:0 auto;padding-top:60px;}
	.wrap-top img {width:100%;}
	.wrap {width:100%;margin:0 auto;}
	.wrap img {width:100%;}
	.btnbox1 {position:absolute;left:0;top:70px;width:100%;text-align:center;}
	.btnbox1 img {width:50%;}
	.btnbox2 {position:absolute;left:0;bottom:140px;width:100%;text-align:center;}
	.btnbox2 img {width:50%;}

	/* 상품슬라이드 */
	#goods {position: relative;width:100%;height:100%;padding:40px 0;background:#f6f6f6;box-sizing: border-box;}
	#goods:after {display: block;content: "";clear: both;}
	.goods_list {margin:0 auto;width:80%;}
	.goods_list:after {display: block;content: "";clear: both;}
	.goods_list ul {float:left;width:100%;}
	.goods_list ul li {float:left;width:25%;text-align:center;}
	.goods_list ul li img {width:100%;}
	.arrow_left {position:absolute;left:15px;top:100px;;width:20px;}
	.arrow_left img {width:20px;height:30px;}
	.arrow_right {position:absolute;right:15px;top:100px;width:20px;}
	.arrow_right img {width:20px;height:30px;}
	
}

/* 아이패드 프로 */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {
	
	input,button,textarea {border-radius:0;-webkit-appearance:none;} 
	.wrap-top {width:100%;margin:0 auto;padding-top:60px;}
	.wrap-top img {width:100%;}
	.wrap {width:100%;margin:0 auto;}
	.wrap img {width:100%;}
	.btnbox1 {position:absolute;left:0;top:100px;width:100%;text-align:center;}
	.btnbox1 img {width:50%;}
	.btnbox2 {position:absolute;left:0;bottom:170px;width:100%;text-align:center;}
	.btnbox2 img {width:50%;}

	/* 상품슬라이드 */
	#goods {position: relative;width:100%;height:100%;padding:50px 0;background:#f6f6f6;box-sizing: border-box;}
	#goods:after {display: block;content: "";clear: both;}
	.goods_list {margin:0 auto;width:80%;}
	.goods_list:after {display: block;content: "";clear: both;}
	.goods_list ul {float:left;width:100%;}
	.goods_list ul li {float:left;width:25%;text-align:center;}
	.goods_list ul li img {width:100%;}
	.arrow_left {position:absolute;left:15px;top:140px;;width:20px;}
	.arrow_left img {width:20px;height:30px;}
	.arrow_right {position:absolute;right:15px;top:140px;width:20px;}
	.arrow_right img {width:20px;height:30px;}
}