@charset "utf-8";
/*
	@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css); 나눔스쿼어
	@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); 나눔고딕
*/

html { width: 100%; height: 100%; margin: 0; padding: 0; }
body { color: #2a2829; background-color: #ffffff; height: 100%; padding: 0; margin: 0; }
body,div,span,button,a,td,th,select,textarea,input { font-family: 'Malgun Gothic','맑은 고딕', sans-serif; font-size: 14px; line-height: 1.5; } /* font-family: HelveticaNeue-Light,AppleSDGothicNeo-Light,'Malgun Gothic','맑은 고딕',sans-serif;  */
h1,h2,h3,h4 { margin: 0; padding: 0; }
h1,h2,h3,h4 { font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
a { text-decoration: none; color: #2a2829; box-sizing: border-box; }
a:hover { text-decoration: underline; }
button { box-sizing: border-box; margin: 0; padding: 3px 5px; border: 0; background:#f7f1f8; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
dl, dt, dd { margin: 0; padding: 0; }
img { border:0; }

input[type="text"], input[type="password"] { -webkit-appearance: none; box-sizing: border-box; padding: 5px; border: 1px solid #d2d1d2; }
input[type="date"] { -webkit-appearance: none; box-sizing: border-box; padding: 4px; border: 1px solid #d2d1d2; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ color: #7f7d7b; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #7f7d7b; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #7f7d7b; }
input::-moz-placeholder, textarea::-moz-placeholder  { color: #7f7d7b; }
input[type="checkbox"] + span,input[type="radio"] + span { display: inline-block; margin-right:5px; }
input[type="text"]:disabled,input[type="text"]:read-only {color:#7f7d7b;background:#f2f2f2; }
input[type="checkbox"] {position:relative;margin:0;padding:0;vertical-align:top;width:0;height:0;border:0;appearance:none;-moz-appearance:none;-webkit-appearance:none; }
input[type="checkbox"] + span{position:relative;display:inline-block;padding:2px 7px 2px 27px;}
input[type="checkbox"] + span:before {content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background: url(/images/input-21.png) -100px -10px no-repeat;-webkit-background-size: 300px 40px; background-size: 300px 40px;}
input[type="checkbox"]:checked ~ span{color:#00aade;}
input[type="checkbox"]:checked + span:before {content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background: url(/images/input-21.png) -130px -10px no-repeat;-webkit-background-size: 300px 40px; background-size: 300px 40px;}
input[type="checkbox"]:disabled ~ span{color:#7f7d7b;}
input[type="checkbox"]:disabled + span:before {content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background: url(/images/input-21.png) -160px -10px no-repeat;-webkit-background-size: 300px 40px; background-size: 300px 40px;}
input[type="radio"] {position:relative;margin:0;padding:0;vertical-align:top;width:0;height:0;border:0;appearance:none;-moz-appearance:none;-webkit-appearance:none;}
input[type="radio"] + span{position:relative;display:inline-block;padding:3px 7px 4px 27px;}
input[type="radio"] + span:before {content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background:url(/images/input-21.png) -10px -10px no-repeat;-webkit-background-size: 300px 40px; background-size: 300px 40px;}
input[type="radio"]:checked ~ span{color:#00aade;}
input[type="radio"]:checked + span:before {content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background:url(/images/input-21.png) -40px -10px no-repeat;-webkit-background-size: 300px 40px; background-size: 300px 40px;}
input[type="radio"]:disabled ~ span{color:#7f7d7b;}
input[type="radio"]:disabled + span:before {content:"";position:absolute;top:2px;left:0;width:22px;height:22px;background:url(/images/input-21.png) -70px -10px no-repeat;-webkit-background-size: 300px 40px; background-size: 300px 40px;}
select { box-sizing: border-box; padding: 4px; border: 1px solid #d4d4d4; }
textarea { box-sizing: border-box; padding: 4px; border: 1px solid #d4d4d4;}

/* 표 기본형식 */
table { border-top: 2px solid #666; border-bottom: 1px solid #666; border-collapse: collapse; width: 100%; background: #fff;  }
table th { text-align: center; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 8px 5px; background: #f7f0e4;  }
table th:last-child { border-right: none; }
table td {border-top: 1px dashed #ccc; border-right: 1px solid #ccc; padding: 8px 5px; text-align: center; }
table td:last-child { border-right: none; }
table .index { background: #fbf8f3;}
table .data { }
table + .desc {font-size: 13px; margin: 5px 10px; color: #666; }

/*
	헤더 배경 			#2a2829		42 40 41		폰트 #ababab
	메인 색상(시안)		#00aade <- #00aade		0 170 222 <- 0 170 210
	강조 색상(red) 		#ef3810 <- #d22800		239 56 16 <- 210 40 0
	
	배경 서브메뉴		#f8f8f3
	배경 메인				#f2f2f2
	배경 지역 			#e8e8e8	
	기본 폰트 			#2a2829
	폰트 회색				#7f7d7b
	
	푸터 배경				#696869		폰트 #ffffff
	
	라인 					#afadaa		
	
	견적서 				f7f0e4		fbf8f3
	
			
	라인 					#d2d1d2		<-	#f0f0f0
	
	메인 - 짙은 색 		#006c86		0 108 134
*/

.wrapper h2 { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px}
.wrapper h3 { text-align: center; font-weight: bold; font-size: 24px; padding: 30px 0 20px 0;}
.wrapper h3 > span { font-size: 24px;}
.wrapper h4 { border-bottom: 1px solid #d4d4d4; padding: 10px 0; font-size: 20px;}
.wrapper h4 > span { font-size: 20px;}
.wrapper h4 a, .wrapper h4 button { float: right; font-weight: normal; padding: 3px 10px; color: #fff; background: #999999; border-radius: 15px; }
.wrapper h4 a:hover , h4 button:hover { background: #666666; text-decoration: none; }

.wrapper h4 .btnInsure { background: #00aade }
.wrapper h4 .btnInsure:hover { background: #666666 }

.wrapper h4 > span.taxCmnt { font-size: 13px; color: #00aade; font-weight: normal; }


/* 공통항목 */
.tooltip { position: relative; }
.tooltip:hover:after {  background: rgba(0,0,0,.7);    border-radius: 5px;    bottom: 26px;    color: #fff;    content: attr(title);  font-size: 13px;  left: 50%;  margin-left: -110px;  padding: 5px 10px;    position: absolute;   z-index: 98; width: 200px;}
.tooltip:hover:before { content: " ";    position: absolute;    bottom: 16px;    left: 50%;  margin-left: -7px;    border-width: 5px;    border-style: solid;    border-color: rgba(0,0,0,.6) transparent transparent transparent; }
.necessary { color: #00aade; font-weight: bold;  }
.necessary.off { display: none; }
.carnoonEventC a { padding: 0 6px; font-size: 13px; line-height: 22px; color: #fff; background: #999999; display: inline-block; border-radius: 20px; }
.carnoonEventC a:hover { background: #666666; text-decoration: none; }
.carnoonEventS a { padding: 0 6px; font-size: 13px; line-height: 22px; color: #fff; background: #00aade; display: inline-block; border-radius: 20px; }
.carnoonEventS a:hover { background: #666666; text-decoration: none; }

.aMore { position: relative; display: block; padding: 10px 0 ; margin-top: 20px; font-size: 17px; font-weight: bold; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.aMore:before { content: "자세히 보기 ▶"; float: right; background: #ccc; border-radius: 20px; padding: 4px 10px; font-size: 14px; font-family: 'Malgun Gothic','맑은 고딕', sans-serif; color: #666; }
.aMore:hover:before { background: #bbb; color: #000; }
.aMore:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.alink { position: relative; display: inline-block; background: #03bcf4; padding: 7px 70px 5px 30px; border-radius: 8px; color: #fff; font-size: 20px; font-weight: bold; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.alink:after { position: absolute; content: ""; width: 20px; height: 20px; top: 50%; margin-top: -10px; right: 10px; background: url(/images/icon-27.png) -177px -177px no-repeat; background-size: 300px 200px; }
.alink:before { position: absolute; content: ""; width: 2px; height: 100%; top: 0; right: 40px; background: #fff;  }
.alink.red { background: #ff7062; }
.alink.yellow { background: #f5a900; }
.alink.blue { background: #0b4da2; }
.alink.green { background: #0db175; }
.alink.purple { background: #ac0cb2; }
.alink.pink { background: #ff59a3; }

.slideTab { position: relative; cursor: pointer; }
.slideTab:after { content: ""; position: absolute; bottom: 0px; right: 0px;  width: 38px; height: 38px; font-size:0px; line-height:0; text-indent:-9999px;  background: url(/images/icon-27.png) -198px -157px no-repeat; background-size: 300px 200px;}
.slideTab.open:after { content: ""; position: absolute; bottom: 0px; right: 0px;  width: 38px; height: 38px; font-size:0px; line-height:0; text-indent:-9999px;  background: url(/images/icon-27.png) -249px -157px no-repeat; background-size: 300px 200px;}
h3.slideTab  { border-bottom: 1px solid #d4d4d4; padding-bottom: 10px; }

.carnoonEventF { position: relative; }
.carnoonEventF:before { content: "카눈 이벤트"; position: absolute; top: 7px; left: 135px; font-weight: bold; color: #00aade; }
@media screen and (max-width: 360px) {
	.tooltip:hover:after {  margin-left: -80px; width: 140px;}
}
/* 레이아웃 */
.wrapper {  }
.body { position: relative; margin: 0 auto; max-width: 1060px; padding: 0 20px; }

.header {  background: #2a2829; }
.header .body {height: 100px; background: #2a2829; }
.header h1 { position: absolute; left: 20px; top:50%; margin-top: -25px;  width: 220px; height: 50px}
/*.header h1:after { content: "beta"; position: absolute; top: -3px;right: 12px; color: #ef3810; font-size: 12px;}
*/
.header h1 a{ display: block; width: 100%; height: 100%;  font-size:0px; line-height:0; text-indent:-9999px;  background: url(/images/logo-22.png) -20px -120px no-repeat; background-size: 350px 350px;}
.header .title { position: absolute; left: 50%; top: 50%; width:340px; height: 50px; margin-left: -170px; margin-top: -25px; font-size:0px; line-height:0; text-indent:-9999px; background: url(/images/logo-22.png) -20px -13px no-repeat; background-size: 350px 350px;}
.header .phone { position: absolute; top: 8px; right: 28px; padding-left: 30px; color: #fff; font-size: 21px; }
.header .phone:before { content: ""; position: absolute; top: 4px; left: 0; width: 25px; height: 25px; background: url(/images/icon-27.png) -62px -162px no-repeat; background-size: 300px 200px; }
.header .myMenu { position: absolute; top: 50%; margin-top: -10px; right: 20px;}
.header .myMenu li {float: left; width: 50px; height: 50px;}
.header .myMenu button { position: relative; display: block; width: 100%; height: 100%; background: transparent; }
.header .myMenu button.save { background: url(/images/icon-27.png) -0px -48px no-repeat; background-size: 300px 200px; }
.header .myMenu button.save:before { content:"견적"; position: absolute; bottom: 0px; left: 50%; width: 50px; margin-left: -25px; text-align: center; color: #ccc; font-size: 12px; }
.header .myMenu button.notice { background: url(/images/icon-27.png) -51px -50px no-repeat; background-size: 300px 200px; }
.header .myMenu button.notice:before { content:"알림"; position: absolute; bottom: 0px; left: 50%; width: 50px; margin-left: -25px; text-align: center; color: #ccc; font-size: 12px; }
.header .myMenu button.user { background: url(/images/icon-27.png) -98px -50px no-repeat; background-size: 300px 200px; }
.header .myMenu button.user:before { content:"로그인"; position: absolute; bottom: 0px; left: 50%; width: 50px; margin-left: -25px; text-align: center; color: #ccc; font-size: 12px; letter-spacing: -1px; }
.header .myMenu button.user.in:before { content:"회원"; letter-spacing: 0px; }
.header .myMenu button.user.sns_carnoon:after { content: ""; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 10px; background: url(/images/sns-14.png) -24px -120px no-repeat; background-size: 140px 140px;}
.header .myMenu button.user.sns_naver:after { content: ""; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 10px; background: url(/images/sns-14.png) -1px -0px no-repeat; background-size: 140px 140px;}
.header .myMenu button.user.sns_kakao:after { content: ""; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 10px; background: url(/images/sns-14.png) -23px -0px no-repeat; background-size: 140px 140px;}
.header .myMenu button.user.sns_facebook:after { content: ""; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 10px; background: url(/images/sns-14.png) -46px -0px no-repeat; background-size: 140px 140px;}
.header .myMenu button.user.sns_google:after { content: ""; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 10px; background: url(/images/sns-14.png) -68px -0px no-repeat; background-size: 140px 140px;}

.header .myMenu span {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px}
.header .myMenu em { background: rgba(239, 56, 16, 0.8); border-radius: 15px; padding: 1px; font-style: normal; color: #fff; font-size: 12px; position: absolute; top: 2px; right: 2px; min-width: 18px; }
.header .myMenu:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.header .myList { position: absolute; top: 100px; right: 20px; z-index: 90; }
.header .myList > div {background: #f2f1ed; border-bottom: 2px solid #2a2829; display: none; }
.header .myList .list { width: 500px;}
.header .myList .list ul {}
.header .myList .list ul {margin: 0 20px;}
.header .myList .list.notice li {border-bottom: 1px solid #ccc; padding: 8px 90px 8px 50px; position: relative;}
.header .myList .list.notice li .kind {position: absolute; left: 5px; top: 8px;}
.header .myList .list.notice li .subj {display: block; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.header .myList .list.notice li .date {position: absolute; right: 5px; top: 8px;}
.header .myList .list .more { text-align: center; }
.header .myList .list .more a {display: inline-block; padding: 8px;}
.header .myList .sns { padding: 8px 5px; width: 180px; float: right; }
.header .myList .sns div {text-align: left; padding: 0 10px 10px 10px; font-weight: bold; }
.header .myList .sns ul { width: 100%; margin-left: -2px;}
.header .myList .sns li { float: left; width: 35px; margin-left: 9px}
.header .myList .sns li a { display: block; width: 35px; height: 35px; text-align: center; border-radius: 3px; border: 0; font-size:0px; line-height:0; text-indent:-9999px; }
.header .myList .sns li a.naver { color: #fff; border-color: #2ea300; background: url(/images/sns-14.png) -2px -1px no-repeat; background-size: 250px 250px; }
.header .myList .sns li a.kakao { color: #3C1E1E; border-color: #e7d004; background: url(/images/sns-14.png) -41px -1px no-repeat; background-size: 250px 250px; }
.header .myList .sns li a.facebook { color: #fff; border-color: #30589a; background: url(/images/sns-14.png) -81px -1px no-repeat; background-size: 250px 250px; }
.header .myList .sns li a.google { border-color: #c5c5c5; background: url(/images/sns-14.png) -121px -1px no-repeat; background-size: 250px 250px; }
.header .myList .sns ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.header .myList .login {width: 230px; float: right;}
.header .myList .login .btn {padding: 10px 35px 10px 10px; height: 23px;}
.header .myList .login .btn a { float: right; border: 1px solid #ccc; background: #fff; padding: 0 5px;}
.header .myList .login .btn a:hover { background: #d4d4d4; text-decoration: none; }
.header .myList .login .btn span { position: relative; padding-left: 30px; display: inline-block; font-weight: bold; width: 80px; height: 23px;  overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.header .myList .login .btn span:before { position: absolute; content: ""; top: -1px; left: 0px; width: 23px; height: 23px;}
.header .myList .login .btn span.sns_carnoon:before { background: url(/images/sns-14.png) -28px -141px no-repeat; background-size: 165px 165px;}
.header .myList .login .btn span.sns_naver:before { background: url(/images/sns-14.png) -1px -0px no-repeat; background-size: 165px 165px;}
.header .myList .login .btn span.sns_kakao:before { background: url(/images/sns-14.png) -27px -0px no-repeat; background-size: 165px 165px;}
.header .myList .login .btn span.sns_facebook:before { background: url(/images/sns-14.png) -54px -0px no-repeat; background-size: 165px 165px;}
.header .myList .login .btn span.sns_google:before { background: url(/images/sns-14.png) -80px -0px no-repeat; background-size: 165px 165px;}
.header .myList .mypage { border-top: 1px solid #999;}
.header .myList .mypage li:not(:first-child) {border-top: 1px solid #fff;}
.header .myList .mypage li a { padding: 8px; display: block; margin: 0; text-align: center;  }
.header .myList .mypage li a:hover { background: #00aade; color: #fff; text-decoration: none;  }

.header .myList button.close { position: absolute; top: 0; right: 0;  font-size:0px; line-height:0; text-indent:-9999px; width: 25px; height: 25px; background: rgba(0,0,0,0.1) url(/images/icon-27.png) -45px -79px no-repeat; background-size: 225px 150px; }
.header .myList button.close:hover { background-color: rgba(0,0,0,0.2) }

.snsPopup { padding: 8px 5px; width: 180px; position: absolute; right: -20px; bottom: -30px; border: 1px solid #2a2829; background: #f2f1ed; z-index: 100;}
.snsPopup div { text-align: left; padding: 0 10px 10px 10px; font-weight: bold; }
.snsPopup ul { width: 100%; margin-left: -2px;}
.snsPopup li { float: left; width: 35px; margin-left: 9px}
.snsPopup li a { display: block; width: 35px; height: 35px; text-align: center; border-radius: 3px; border: 0; font-size:0px; line-height:0; text-indent:-9999px; }
.snsPopup li a.naver { color: #fff; border-color: #2ea300; background: url(/images/sns-14.png) -2px -1px no-repeat; background-size: 250px 250px; }
.snsPopup li a.kakao { color: #3C1E1E; border-color: #e7d004; background: url(/images/sns-14.png) -41px -1px no-repeat; background-size: 250px 250px; }
.snsPopup li a.facebook { color: #fff; border-color: #30589a; background: url(/images/sns-14.png) -81px -1px no-repeat; background-size: 250px 250px; }
.snsPopup li a.google { border-color: #c5c5c5; background: url(/images/sns-14.png) -121px -1px no-repeat; background-size: 250px 250px; }
.snsPopup ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.snsPopup button { position: absolute; top: 0; right: 0;  font-size:0px; line-height:0; text-indent:-9999px; width: 25px; height: 25px; background: rgba(0,0,0,0.1) url(/images/icon-27.png) -45px -79px no-repeat; background-size: 225px 150px; }
.snsPopup button:hover { background-color: rgba(0,0,0,0.2) }

.gnbBox { height: 85px; background: #ffffff; border-bottom: 1px solid #d4d4d4; position: relative; }
.gnbBox .side { display: none; width: 100%; margin-left: 0%; height: 190px; background: #0b9ecc; position: absolute; top: 85px; left: 0; z-index: 80; }
.gnbBox.open .side { display: block;  }
.gnbBox .side.open { display: block;  }
.gnbBox.open .lnb { display: block; }
.gnbBox button.openMain { display: block; position: absolute; top: 17px; left: 20px; height: 50px; width: 50px; border: 0; padding: 0; background: url(/images/icon-27.png) 0 -98px no-repeat; background-size: 300px 200px; }
.gnbBox button.closeMain { display: none; position: absolute; top: 17px; left: 20px; height: 50px; width: 50px; border: 0; padding: 0; background: url(/images/icon-27.png) -50px -98px no-repeat; background-size: 300px 200px; }
.gnbBox.open button.openMain { display: none;}
.gnbBox.open button.closeMain { display: block;}
.gnbBox button span {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px}
.gnbBox .gnb { margin-left: 60px; margin-right: 180px; }
.gnbBox .gnb > li { float: left; position: relative; width: 16.6%; text-align: center; }
.gnbBox .gnb > li > a { position: relative; display: block; height: 85px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  font-size: 22px; font-weight: bold; text-decoration: none; line-height: 85px; } /*   background: #e8e8e8; font-size:0px; line-height:0; text-indent:-9999px; */

.gnbBox .gnb > li > a:hover:after { content: ""; position: absolute; left: 10%; bottom: 5px; width: 80%; ; height: 4px; background: #00aade; }
.gnbBox .gnb:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.gnbBox .lnb { display: none; padding: 15px 0; position: absolute; width: 100%; height: 140px; z-index: 85; }
.gnbBox .lnb:after { content: ""; position: absolute; top: 23px; left: 0; height: 125px; border-left: 1px solid #fff; }
.gnbBox .odr1 .lnb:after { display: none;}
.gnbBox .gnb > li.open .lnb { display: block; }
.gnbBox .lnb li a { padding: 5px; margin: 3px 10px 3px 11px; display: block; text-align: center;  overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; color: #fff;  }
.gnbBox .lnb li.on a { background: #fff; border-radius: 20px; color: #0b9ecc; font-weight: bold;  }
.gnbBox .lnb li a:hover { font-weight: bold;   }
.gnbBox .banner { position: absolute; right:20px; top: 0; }
.gnbBox .banner img {display: block; }
.gnbBox .quick { position: absolute; right:20px; top: 0px; width: 150px; height: 85px;  }
.gnbBox .quick button {position: relative; display: block; margin-top: 18px; height: 50px;  width: 150px; background: #00aade; border-radius: 25px; padding: 2px 20px; line-height: 48px; font-size: 20px; text-align: right; color: #fff; font-weight: bold; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.gnbBox .quick button:before { content: ""; position: absolute; top: 8px; left: 12px; width: 35px; height: 35px; background: url(/images/icon-27.png) -105px -155px no-repeat; background-size: 300px 200px;}
.gnbBox .quick button:hover { background: #666; }
.gnbBox .gnb > li.phone { position: absolute; right:20px; top: 85px; width: 150px; height: 50px;  }
.gnbBox .phone a {color: #fff; font-size: 24px; margin-top: 10px; text-align: right; margin-right: 5px; display: block; position: relative; }
.gnbBox .phone a:before { content: ""; position: absolute; top: 6px; left: 0; width: 25px; height: 25px; background: url(/images/icon-27.png) -62px -162px no-repeat; background-size: 300px 200px;}
.gnbBox .phone .lnb:after { display: none;}
/*
.gnbBox .quick ul li {float: left; width: 25%; height: 100%;}
.gnbBox .quick ul li a {display: block; width: 100%; height: 100%; text-align: center; padding-top: 55px; padding-bottom: 8px;}
.gnbBox .quick ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.gnbBox .quick ul li.calculator a { background: #fff url(/images/gnb-12.png) -12px 0px no-repeat;  background-size: 300px 170px; letter-spacing: -2px; }
.gnbBox .quick ul li.discount a { background: #fff url(/images/gnb-12.png) -80px 0px no-repeat;  background-size: 300px 170px; letter-spacing: -1px; }
.gnbBox .quick ul li.taxdc a { background: #fff url(/images/gnb-12.png) -148px 0px no-repeat;  background-size: 300px 170px;  letter-spacing: -2px;}
.gnbBox .quick ul li.cartax a { background: #fff url(/images/gnb-12.png) -220px 0px no-repeat;  background-size: 300px 170px; letter-spacing: -1px; }
.gnbBox .quick ul li.calculator a:hover { background: #fff url(/images/gnb-12.png) -12px -85px no-repeat;  background-size: 300px 170px; }
.gnbBox .quick ul li.discount a:hover { background: #fff url(/images/gnb-12.png) -80px -85px no-repeat;  background-size: 300px 170px; }
.gnbBox .quick ul li.taxdc a:hover { background: #fff url(/images/gnb-12.png) -148px -85px no-repeat;  background-size: 300px 170px; }
.gnbBox .quick ul li.cartax a:hover { background: #fff url(/images/gnb-12.png) -220px -85px no-repeat;  background-size: 300px 170px; }
*/
.footer { background: #696869;}
.footer .phone { display: none; }
.footer .body { background: #696869;  padding: 10px 20px}
.footer .service {border-bottom: 1px solid #aaa; margin-bottom: 5px; padding-bottom: 10px;  }
.footer .service a { padding-left: 20px; position: relative; display: inline-block; }
.footer .service a:first-child { padding-left: 10px; }
.footer .service a:before { content:"|"; position: absolute; left: 7px; top: 0; color: #999 }
.footer .service a:first-child:before { display: none; }
.footer .company { margin-left: 20px; color:#bbb;}
.footer .company span {display: inline-block; }
.footer .company span:first-child { margin-left: -20px; }
.footer .company span:first-child:before { content: "•"; padding-right: 5px} 
.footer .company .name { width: 118px;}
.footer .company .work { width: 160px;}
.footer .company .ceo { margin-right: 10px;}
.footer .company .no { margin-right: 10px;}
.footer .company .work:before { content: ": "; }
.footer .contact { border-top: 1px solid #aaa; margin-top: 5px; padding-top: 5px;  }
.footer .contact span { display: inline-block; margin-right: 10px;  color: #eee}
.footer .caution { padding-top: 3px; color: #eee}
.footer .copyright { margin-top: 8px; text-align: center; color: #bbb }
.footer a { color: #ddd; }
.footer a b{ color: #fff; }
.footer div, .footer span, .footer a {font-size: 13px; }

@media screen and (max-width: 800px) {
	.container { padding-top: 50px;}
	.body { max-width: auto; width: auto; }
	.header { position: fixed; top: 0; width: 100%; z-index: 100;}
	.header .body {height: 50px; padding: 0;}
	.header h1 { left: 50px; top:0px; width: 130px; margin-top: 0; height: 50px }
	.header h1 a { background: url(/images/logo-22.png) -23px -178px no-repeat; background-size: 350px 350px;}
	.header .title {display: none; }
	.header .phone {display: none; }
	.header .myMenu {right: 0; margin-top: -25px;}
	.header .myMenu li { width: 45px; height: 50px;}
	.header .myList {top: 50px; right:0; width: 90%;}
	.header .myList .list { width: 100% }
	
	.gnbBox { height: auto;  border: 0;}
	.gnbBox button.openMain { position: fixed; top: 0; left: 0; height: 50px; width: 50px; z-index: 110;  background: url(/images/icon-27.png) -2px -2px no-repeat; background-size: 300px 200px;}
	.gnbBox button.closeMain { position: fixed; top: 0; left: 240px; height: 50px; width: 50px;  z-index: 110;  background: #2a2829 url(/images/icon-27.png) -52px -2px no-repeat; background-size: 300px 200px;}
	.gnbBox .side { display: none; position: fixed; top: 0; z-index: 110;}
	.gnbBox .frame { display: none; position: fixed; top: 0; z-index: 120; }
	.gnbBox.open .side { display: block; width: 100%; height: 100%; background-color: rgba( 0,0,0, 0.1 ); cursor: pointer; }
	.gnbBox.open .frame { display: block; width: 240px; height: 100%; background: #0b9ecc; border-right: 2px solid #2a2829;  }
	.gnbBox .gnb { margin-left: 0px; margin-right: 0px; width: auto; padding: 0; overflow-y: auto; height: 100%;}
	.gnbBox .gnb > li { width: 50%; }
	.gnbBox .gnb > li > a { font-size: 18px; width: 100%; height: auto; height: 50px; line-height: 50px; padding: 0; color: #fff; }
	.gnbBox .gnb > li > a:hover { color: #fff; }
	.gnbBox .gnb > li > a:before { content: ""; position: absolute; top: 0px; left: -1px; height: 100%; border-left: 1px solid #fff; }
	.gnbBox .gnb > li > a:hover:after { border: 0; }
	.gnbBox .gnb > li:last-child { margin-bottom: 70px;}
	.gnbBox .lnb { display: block; position: relative; width: auto; padding:0 4px; background: #fff; height: 147px;  }
	.gnbBox .odr1 .lnb,.gnbBox .odr2 .lnb { height: 184px;  }
	.gnbBox .lnb:after { content: ""; position: absolute; top: 0px; left: -1px; height: 100%; border-left: 1px solid #00aade; }
	.gnbBox .lnb li { border-bottom: 1px dashed #00aade;  }
	.gnbBox .lnb li a { height: 36px; line-height: 36px; padding: 0; margin: 0;  color: #00aade; position: relative;}
	.gnbBox .lnb li.on a { border-radius: 0; background: transparent; }
	.gnbBox .lnb li.on a:after { content: ""; position: absolute; top: 2px; left: 0; width: 8px; height: 32px; background: #00aade; }
	.gnbBox .banner { position: relative; width: auto;  right: auto; border-right: 2px solid #2a2829;  }
	.gnbBox .banner img { width: 100%;}
	.gnbBox .quick { width: 240px;  right: auto; top: auto; left:0; bottom: -3px; z-index: 90; background: #fff; height: 70px; box-shadow: 0px -2px 3px #ddd; }
	.gnbBox .quick button { width: 150px; margin-left: 42px; margin-top: 10px; }
	/*
	.gnbBox .quick ul li a { font-size: 13px;}
	.gnbBox .quick ul li.calculator a { background: #fff  url(/images/gnb-12-M.png) -6px 0px no-repeat;  background-size: 240px 164px; letter-spacing: -2px; }
	.gnbBox .quick ul li.discount a { background: #fff  url(/images/gnb-12-M.png) -59px 0px no-repeat;  background-size: 240px 164px; letter-spacing: -1px; }
	.gnbBox .quick ul li.taxdc a { background: #fff  url(/images/gnb-12-M.png) -115px 0px no-repeat;  background-size: 240px 164px;  letter-spacing: -2px;}
	.gnbBox .quick ul li.cartax a { background: #fff  url(/images/gnb-12-M.png) -166px 0px no-repeat;  background-size: 240px 164px; letter-spacing: -1px; }
	.gnbBox .quick ul li.calculator a:hover { background: #fff  url(/images/gnb-12-M.png) -6px -82px no-repeat;  background-size: 240px 164px; letter-spacing: -2px; }
	.gnbBox .quick ul li.discount a:hover { background: #fff  url(/images/gnb-12-M.png) -59px -82px no-repeat;  background-size: 240px 164px; letter-spacing: -1px; }
	.gnbBox .quick ul li.taxdc a:hover { background: #fff  url(/images/gnb-12-M.png) -115px -82px no-repeat;  background-size: 240px 164px;  letter-spacing: -2px;}
	.gnbBox .quick ul li.cartax a:hover { background: #fff  url(/images/gnb-12-M.png) -166px -82px no-repeat;  background-size: 240px 164px; letter-spacing: -1px; }
    */
    .gnbBox .gnb > li.phone { position: relative; right:auto; top: auto; width: 150px; height: 50px; margin-left: 40px;  }
    .gnbBox .phone .lnb { height: 40px; background: transparent; padding: 0; }
    
    .footer .phone { display: block; background: #00aade; padding: 8px; text-align: center; color: #fff; font-size: 16px; font-weight: bold;  }
    .footer .phone a { padding-left: 30px; color: #fff; font-size: 21px; margin-left: 10px; font-weight: normal;  display: inline-block; position: relative; }
	.footer .phone a:before { content: ""; position: absolute; top: 4px; left: 0; width: 25px; height: 25px; background: url(/images/icon-27.png) -62px -162px no-repeat; background-size: 300px 200px; }
    
}
@media screen and (max-width: 500px) {
	.body {  padding: 0 15px;  }
}

/* 테마 슬라이드 공통 */
.wrapper.home .gnbBox { position: absolute; top: 600px; width: 100%; }
.wrapper.home .themeBox { width:100%; height:500px; margin:0 auto; background:#f6f6f6; position:relative; overflow:hidden;margin-bottom: 86px;}
.themeBox .paging { position: relative; margin-top: -40px; height: 40px; text-align:center; overflow:hidden; z-index: 20; }
.themeBox .paging .btn_page { display:inline-block; width:16px; height: 16px; margin:5px; font-size:0px; line-height:0; text-indent:-9999px; background: #e2e2e2; border: 1px solid #ccc; border-radius: 8px;  }
.themeBox .paging .btn_page.on { background: #00aade; }
@media screen and (max-width: 800px) {
	.wrapper.home .gnbBox { position: relative; top: 0; width: auto; height: auto; border: 0; }
	.wrapper.home .themeBox { margin-bottom: 0; height:360px; }
	
}

/* 링크 박스 */
.linkBox { background:#fbf8f3; padding: 0; }
.linkBox ul {}
.linkBox li {float:left; width: 16.6%; position: relative; }
.linkBox li:not(:first-child):before { content: ""; position: absolute; top: 20px; left: 0; height: 135px; border-left: 1px dashed #ccc; }
.linkBox li a {position: relative; display: block; text-align: center; padding-top: 130px; padding-bottom: 20px; font-size: 18px; font-weight: bold; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.linkBox li a:hover {color: #00aade; }
.linkBox li a:after { content: ""; position: absolute; top: 20px; left: 50%; margin-left: -55px; width: 110px; height: 100px;}
.linkBox li a:hover:after { content: ""; position: absolute; top: 18px; left: 50%; margin-left: -55px; width: 110px; height: 100px;}
.linkBox li.odr1 a:after { background: url(/images/link-22.png) -20px -20px no-repeat; background-size: 900px 150px; }
.linkBox li.odr2 a:after { background: url(/images/link-22.png) -170px -20px no-repeat; background-size: 900px 150px; }
.linkBox li.odr3 a:after { background: url(/images/link-22.png) -320px -20px no-repeat; background-size: 900px 150px; }
.linkBox li.odr4 a:after { background: url(/images/link-22.png) -470px -20px no-repeat; background-size: 900px 150px; }
.linkBox li.odr5 a:after { background: url(/images/link-22.png) -620px -20px no-repeat; background-size: 900px 150px; }
.linkBox li.odr6 a:after { background: url(/images/link-22.png) -770px -20px no-repeat; background-size: 900px 150px; }
.linkBox ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
@media screen and (max-width: 800px) {
	.linkBox .body{ padding: 0 5px; }
	.linkBox li {width: 33.3%;}
	.linkBox li:not(:first-child):before { content: ""; position: absolute; top: 18px; left: 0; height: 100px; border-left: 1px dashed #ccc; }
	.linkBox li:nth-child(4):before { display: none; }
	.linkBox li a {padding-top: 100px; padding-bottom: 15px; font-size: 16px; }
	.linkBox li a:after { content: ""; position: absolute; top: 15px; left: 50%; margin-left: -45px; width: 90px; height: 80px;}
	.linkBox li a:hover:after { content: ""; position: absolute; top: 13px; left: 50%; margin-left: -45px; width: 90px; height: 80px;}
	.linkBox li.odr1 a:after { background: url(/images/link-22.png) -17px -17px no-repeat; background-size: 750px 125px; }
	.linkBox li.odr2 a:after { background: url(/images/link-22.png) -142px -17px no-repeat; background-size: 750px 125px; }
	.linkBox li.odr3 a:after { background: url(/images/link-22.png) -267px -17px no-repeat; background-size: 750px 125px; }
	.linkBox li.odr4 a:after { background: url(/images/link-22.png) -392px -17px no-repeat; background-size: 750px 125px; }
	.linkBox li.odr5 a:after { background: url(/images/link-22.png) -517px -17px no-repeat; background-size: 750px 125px; }
	.linkBox li.odr6 a:after { background: url(/images/link-22.png) -642px -17px no-repeat; background-size: 750px 125px; }
}
@media screen and (max-width: 340px) {
	.linkBox li {width: 50%;}
	.linkBox li:nth-child(3):before { display: none; }
	.linkBox li:nth-child(4):before { display: block; }
	.linkBox li:nth-child(5):before { display: none; }
}

/* 즉시 출고 */
.homeFastBox {background: #f2f2f2; padding: 30px 0; }
.homeFastBox  h3 { padding-bottom: 10px; margin-bottom: 10px; }
.homeFastBox .list {width: 102%; margin-left: -2%; }
.homeFastBox .list > li {float:left; width: 23%; margin-left: 2%; position: relative; margin-bottom: 20px;}
.homeFastBox .list a { display: block; position: relative; background: #fff; box-shadow: 3px 3px 5px #ddd; padding: 10px 0 }
.homeFastBox .list .logo { position: absolute; top: 0; left: 0; width: 50px; }
.homeFastBox .list .logo img { width: 100%; }
.homeFastBox .list .car img { width: 86%; margin: 0 7%;  }
.homeFastBox .list .name { text-align: center;  }
.homeFastBox .list .name .cnt { margin-left: 3px; color: #ff7a00;}
.homeFastBox .list:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
@media screen and (max-width: 800px) {
	.homeFastBox .list {width: 103%; margin-left: -3%; }
	.homeFastBox .list > li {width: 47%; margin-left: 3%; }
}

/* 공지 */
.noticeBox {background: #f2f2f2; padding: 30px 0; }
.noticeBox  h3 { border-bottom: 1px solid #d4d4d4; padding-bottom: 10px; margin-bottom: 10px; }
.noticeBox .list {width: 102%; margin-left: -2%; }
.noticeBox .list > li {float:left; width: 23%; margin-left: 2%; position: relative; margin-bottom: 20px; }
.noticeBox .list h4 { text-align: center; border-bottom: 0;  overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.noticeBox .list .frame { position: relative;    background: #fff; box-shadow: 3px 3px 5px #ddd;}
.noticeBox .list .logo { position: absolute; top: 0; left: 0; width: 50px; }
.noticeBox .list .logo img { width: 100%; }
.noticeBox .list .title { font-size: 17px; padding: 4px 0 4px 50px ; height: 25px;  overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.noticeBox .list .car img { width: 86%; margin: 0 7%;  }
.noticeBox .list .update { text-align: center; height: 28px; margin-top: -14px; margin-bottom: -14px; }
.noticeBox .list .update span {background: #e9dfcf; font-size: 15px; text-align: center; padding: 3px 10px; font-size: 13px; border-radius: 20px; display: inline-block; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; width: calc(100% - 30px); }
.noticeBox .list .text { background: #f9f9f9; padding: 18px 10px 10px 10px;}
.noticeBox .list .text .name { color: #7f7d7b; }
.noticeBox .list .text .data { float: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: calc(100% - 40px); }
.noticeBox .list .button {  text-align: center; padding: 10px;  }
.noticeBox .list .button a {display: block; padding: 5px 0; color: #fff; background: #1355a5 }
.noticeBox .list .button a:hover {background: #00aade; text-decoration: none; }

.noticeBox .list:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
@media screen and (max-width: 800px) {
	.noticeBox .list {width: 103%; margin-left: -3%; }
	.noticeBox .list > li {width: 47%; margin-left: 3%; }
}
@media screen and (max-width: 340px) {
	.noticeBox .list {width: auto; margin-left: 0; }
	.noticeBox .list > li { float: none; width: auto; margin-left: 0; }
}

/* 특가 홈 */
.specialBox { background: #f2f2f2; padding: 30px 0; }
.specialBox .box {width: 102%; margin-left: -2%; }
.specialBox .box > li {float:left; width: 23%; margin-left: 2%; position: relative; margin-bottom: 20px; }
.specialBox .box:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

.specialBox .inner { background: #fff; box-shadow: 3px 3px 5px #ddd; }
.specialBox .list {}
.specialBox .list a {display: block; position: relative; width: 100%;  }
.specialBox .list a:hover { text-decoration: none;  }
.specialBox .list .logo { position: absolute; top: 15px; left: 5px; width: 50px; }
.specialBox .list .logo img { width: 100%; }
.specialBox .list .title { font-size: 17px; padding: 16px 0 10px 50px ; height: 25px;  overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;}
.specialBox .list .car { padding: 30px 0px 20px 0px; text-align: center; }
.specialBox .list .car img { width: 100%; max-width: 300px; }
.specialBox .list .copy {margin: 0 auto; width: 170px; background: #e9dfcf; font-size: 15px; text-align: center; padding: 3px 0; border-radius: 20px; }
.specialBox .list .price { text-align: center; }
.specialBox .list .price .data { font-size: 24px; font-weight: bold; color: #999;}
.specialBox .list .sales { text-align: center; }
.specialBox .list .sales .month { font-weight: bold; font-size: 28px; display: inline-block; position: relative; padding-left: 25px; padding-right: 20px; color: #00aade; letter-spacing: -1px;}
.specialBox .list .sales .month:before {content: "월"; font-size: 17px; position: absolute; bottom: 7px; left: 0; font-weight: normal;}
.specialBox .list .sales .month:after {content: "원";  font-size: 17px; position: absolute; bottom: 7px; right: 0; font-weight: normal;}
.specialBox .button {  text-align: center; padding: 10px;  }
.specialBox .button a {display: block; padding: 5px 0; color: #fff; }
.specialBox .goodsA .button a {background: #5d3414 }
.specialBox .goodsB .button a {background: #5d8519 }
.specialBox .goodsC .button a {background: #1355a5 }
.specialBox .goodsD .button a {background: #652866 }
.specialBox .button a:hover {background: #00aade; text-decoration: none; }

.specialBox .frame { height: 340px; position: relative; overflow: hidden;  }
.specialBox .frame:not(.cnt1) > ul { width:99999px; height:100%; position:absolute; top:0; left:0; overflow:hidden; }
.specialBox .frame:not(.cnt1) > ul > li { float:left; width:100%; height:100%;}

@media screen and (max-width: 800px) {
	.specialBox .box {width: 103%; margin-left: -3%; }
	.specialBox .box > li {width: 47%; margin-left: 3%; }
	.specialBox .list .car { padding: 20px 0px 20px 0px; }
	.specialBox .list .copy { display: none; }
	.specialBox .button { display: none; }
	.specialBox .frame { height: 340px; }
}
@media screen and (max-width: 560px) {
	.specialBox .frame { height: 300px; }
}
@media screen and (max-width: 450px) {
	.specialBox .frame { height: 280px; }
}
@media screen and (max-width: 380px) {
	.specialBox .frame { height: 260px; }
}
@media screen and (max-width: 340px) {
	.specialBox .box {width: auto; margin-left: 0; }
	.specialBox .box > li { float: none; width: auto; margin-left: 0; }
	.specialBox .frame { height: 340px; }
}

/* 홈 배너 */
.adMainBox  { margin : 20px 0; }
.adMainBox li {float:left; width: 49%; margin-left: 2%;  }
.adMainBox li.odr1 { margin-left: 0; }
.adMainBox li a { display: block; }
.adMainBox li a img { display: block; width: 100%; border: 1px solid #ccc;  }
.adMainBox ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
@media screen and (max-width: 760px) {
	.adMainBox li {float:none; width: auto; margin-left: 0; }
	.adMainBox li.odr1 { margin-bottom: 20px; }
}
@media screen and (max-width: 640px) {
	.adMainBox  { margin: 15px 0; }
	.adMainBox li.odr1 { margin-bottom: 15px; }
}

/* 배너 */
.adDocuBox  { margin-bottom : 5px; }
.adDocuBox li {float:left; width: 49%; margin-left: 2%;  }
.adDocuBox li.odr1 { margin-left: 0; }
.adDocuBox li a { display: block; }
.adDocuBox li a img { display: block; width: 100%; border: 1px solid #ccc;  }
.adDocuBox ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
@media screen and (max-width: 600px) {
	.adDocuBox  { margin-bottom : 15px; }
	.adDocuBox li {float:none; width: auto; margin-left: 0; }
	.adDocuBox li.odr1 { margin-bottom: 5px; }
}

/* 게시판 */
.boardBox { margin-top: 30px; margin-bottom: 40px; }
.boardBox h3 { border-bottom: 1px solid #d4d4d4; padding-bottom: 10px; margin-bottom: 10px; }
.boardBox .body > div { position: relative; }
.boardBox .more { float: right; margin-top: -40px; font-size: 13px; color: #7f7d7b ; }
.boardBox .more:after { content: "▶"; padding-left: 5px; font-size: 12px;  }
.boardBox .typeA ul li img {display: block; border: 1px solid #ccc; width: 100%; } 
.boardBox .typeA ul li span {display: block; text-align: center; padding: 5px 0; } 
.boardBox .typeA ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.boardBox .typeB ul li { padding: 5px 80px 5px 0; position: relative; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; } 
.boardBox .typeB ul li .date { position: absolute; top: 5px; right: 0;}
.boardBox .typeB ul li .kind { margin-right: 5px}
.boardBox .typeB ul li .kind:before{ content:"["}
.boardBox .typeB ul li .kind:after{ content:"]"}
.boardBox .typeB ul li .model { margin-right: 5px}


.boardBox .left {float: left; width: 48%; }
.boardBox .right {float: right; width: 48%; }
.boardBox .typeA ul { width: 103%; margin-left: -3%;}
.boardBox .typeA ul li { float: left; width: 47%; margin-left: 3%; }
.boardBox .typeA ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.boardBox .body:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
@media screen and (max-width: 800px) {
	.boardBox .left { float: none; width: auto; }
	.boardBox .right { float: none; width: auto; }
}


/* 홈 브랜드 바로가기 */
.homeBrandBox { margin: 30px 0; }
@media screen and (max-width: 800px) {
	.homeBrandBox .box.eu { position: relative;; right: 0; top: 0; }
}

/* 검색 브랜드/차종 */
.searchBox { background: #fbf8f3; }
/*
.searchBox .tabBox { display: none; }
*/
.searchBox .selectM {display: none; }
.searchBox .cartypeBox { margin-top: 0px;padding-bottom: 10px; }
.searchBox .box.R { position: absolute; left: 55.3%; top: 10px; width: 405px;  }
.searchBox .selected {margin: 5px 15px 0 15px; background: #dfdcd7; padding: 5px 10px 2px 10px; display: none; background: #e9e9e9; }
.searchBox .selected > button { position: absolute; right:0; bottom: 0; background: #00aade; color: #fff; padding: 0; width: 110px; }
.searchBox .selected > button span { height: 36px; line-height: 35px;  font-size: 20px; }
.searchBox .selected .items .guide { padding: 2px 0 5px 0;}
.searchBox .selected .items li { float:left; margin-left: 5px; margin-bottom: 5px; }
.searchBox .selected .items li img { display: none; }
.searchBox .selected .items li button {display: block; width: 100%; height: 100%; padding: 1px 3px; background: transparent;  }
.searchBox .selected .items ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.resultBox { padding-top: 30px; padding-bottom: 10px; background: #f2f2f2; }

.searchBox .slideBox { position: relative; overflow: hidden;}
.searchBox .slideBox > ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
.searchBox .slideBox > ul > li { float:left; width:100%; height:100%;}
.selectM .paging { position: relative; margin-top: 0px; height: 30px; text-align:center; overflow:hidden; z-index: 20; }
.selectM .paging .btn_page { display:inline-block; width:16px; height: 16px; margin:5px; font-size:0px; line-height:0; text-indent:-9999px; background: #e2e2e2; border: 1px solid #ccc; border-radius: 8px;  }
.selectM .paging .btn_page.on { background: #00aade; }
	
@media screen and (max-width: 800px) {
	.resultBox { padding-top: 15px;}
	.searchBox .body { padding: 15px 0; }
	.searchBox .select {display: none; }
	.searchBox .selectM {display: block; }
	.searchBox .selected {display: block;}
	.searchBox .tabBox { margin: 0 15px 15px 15px }
	.searchBox .tabBox li {float: left; width: 19%; position: relative; }
	.searchBox .tabBox li.cartype { float: left; width: 24%;}
	.searchBox .tabBox li.on:after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; width: 0;  height: 0;  border-style: solid; border-width: 6px; border-color: #00aade transparent transparent  transparent; }
	.searchBox .tabBox li button { border-right: 1px solid #fbf8f3; background: #dfdcd7; padding: 5px; text-align: center; width: 100%; }
	.searchBox .tabBox li.cartype button {background: #999999; color: #fff; }
	.searchBox .tabBox li.on button { background: #00aade; color: #fff;  }
	.searchBox .tabBox ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
	

	.searchBox .slideBox .brand { padding: 0 15px; }
	.searchBox .slideBox .brand li { float: left; width: 20%; text-align: center; margin-bottom: 10px; }
	.searchBox .slideBox .brand li button { width: 98%; max-width: 65px; height: 68px; background: transparent; padding: 0; }
	.searchBox .slideBox .brand li button.on { background: #ffffff; border: 1px solid #00aade; box-shadow: 3px 3px 5px #ddd;}
	.searchBox .slideBox .brand li button.on:hover { background: #fbf8f3; }

	.searchBox .slideBox .brand li img { display: block; width: 100%; }
	.searchBox .slideBox .brand li span { display: block; width: 100%; text-align: center; font-size: 13px; padding-bottom: 5px;}
	.searchBox .slideBox .brand li span.len4 { letter-spacing: -1px; }
	.searchBox .slideBox .brand li span.len5 { letter-spacing: -2px; }
	.searchBox .slideBox .brand:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
	
	.searchBox .slideBox .cartype { padding: 0 15px; }
	.searchBox .slideBox .cartype li { float: left; width: 20%; text-align: center; margin-bottom: 10px; }
	.searchBox .slideBox .cartype li button { width: 98%; max-width: 65px; height: 40px; background: transparent; padding: 0; border: 1px solid #d2d2d2;}
	.searchBox .slideBox.goods .cartype li { margin-bottom: 8px; }
	.searchBox .slideBox.goods .cartype li button {height: 28px;}
	.searchBox .slideBox.goods .cartype li.space {height: 35px;}
	.searchBox .slideBox .cartype li button.on { background: #ffffff; border: 1px solid #00aade; box-shadow: 3px 3px 5px #ddd;}
	.searchBox .slideBox .cartype li button.on:hover { background: #fbf8f3; }
	.searchBox .slideBox .cartype li span { display: block; width: 100%; text-align: center; font-size: 13px;}
	.searchBox .slideBox .cartype li span.len4 { letter-spacing: 0px; }
	.searchBox .slideBox .cartype li span.len5 { letter-spacing: -1px; }
	
	.searchBox .slideBox .cartype:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
}
@media screen and (max-width: 500px) {
	.searchBox .body { padding: 15px 0; }
	.searchBox .slideBox .brand li span { font-size : 12px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
	.searchBox .slideBox .cartype li span {font-size : 12px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
}


/* 브랜드 */
.brandBox h3 { border-bottom: 1px solid #d4d4d4; padding-bottom: 10px; margin-bottom: 10px; font-size: 28px;}
.brandBox .title { border-bottom: 1px solid #d4d4d4; padding-bottom: 10px; margin-bottom: 10px; font-size: 22px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; text-align: center; font-weight: bold;  }
.brandBox .frame { position: relative; padding-top: 10px; }
.brandBox .local { position: relative; width: 50px; background: #e8e8e8; text-align: center; padding: 3px 0; font-size: 13px; font-weight: bold; margin-top: 10px; }
.brandBox .local:after {content: ""; position: absolute; left: 100%; top: 50%; margin-top: -6px; width:0; height:0; border-style:solid; border-width:5px; border-color:transparent transparent transparent #e8e8e8;}
.brandBox ul { margin-left: 53px; margin-top: -34px;}
.brandBox li {float: left; width: 65px; height: 68px; margin-left: 5px; margin-bottom: 5px;}
.brandBox li img { display: block; width: 100%;}
.brandBox li span { display: block; width: 100%; text-align: center; font-size: 13px; padding-bottom: 5px;}
.brandBox li span.len4 { letter-spacing: -1px; }
.brandBox li span.len5 { letter-spacing: -2px; }
.brandBox li button, .brandBox li a { display: block; width: 100%; height: 100%; padding: 0; background: transparent; position: relative; }
.brandBox li button:hover, .brandBox li a:hover { background: #e8e8e8; text-decoration: none;  }
.brandBox li button.on { background: #ffffff; border: 1px solid #00aade; box-shadow: 3px 3px 5px #ddd;}
.brandBox li button.on:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 15px solid transparent; border-top: 15px solid #00aade; }
.brandBox li button.on:hover { background: #fbf8f3; }
.brandBox ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.brandBox .box .request { padding: 50px 30px; font-size: 18px; color: #999; font-weight: bold; }

.popup .brandBox .box { width: auto; }
@media screen and (max-width: 800px) {
	.brandBox .box { width: auto; }
	/*
	.searchBox .brandBox { overflow-y: auto; }
	.searchBox .brandBox .frame {width: 1500px; height: 150px; position: relative;}
	.searchBox .brandBox .box { width: 265px; }
	.searchBox .box.eu { position: absolute; top: 10px; left: 270px; width: 685px; }
	.searchBox .box.jp { position: absolute; top: 10px; left: 960px;  }
	.searchBox .box.us { position: absolute; top: 10px; left: 1230px;  }
	*/
}
@media screen and (max-width: 530px) {
	.homeBrandBox .brandBox ul { margin: 0;}
}
@media screen and (max-width: 470px) {
	.homeBrandBox .brandBox li { width: 15%; height: 15%; margin-left: 1%; margin-bottom: 1%; }
	.homeBrandBox .brandBox li span {font-size : 12px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
}


/* 차종 */
.cartypeBox h3 { border-bottom: 1px solid #d4d4d4; padding-bottom: 10px; margin-bottom: 10px;}
.cartypeBox .frame { position: relative; padding-top: 10px; }
.cartypeBox .box { width: 545px; }
.cartypeBox .type { position: relative; width: 50px; background: #e8e8e8; text-align: center; padding: 3px 0; font-size: 13px; font-weight: bold; margin-top: 5px; }
.cartypeBox .type:after {content: ""; position: absolute; left: 100%; top: 50%; margin-top: -6px; width:0; height:0; border-style:solid; border-width:5px; border-color:transparent transparent transparent #e8e8e8;}
.cartypeBox ul { margin-left: 53px; margin-top: -25px;}
.cartypeBox li {float: left; width: 65px; height: 25px; margin-left: 5px; margin-bottom: 5px;}
.cartypeBox li span { display: block; width: 100%; text-align: center; font-size: 13px; }
.cartypeBox li span.len4 { letter-spacing: -1px; }
.cartypeBox li span.len5 { letter-spacing: -2px; }
.cartypeBox li button, .cartypeBox li a { display: block; width: 100%; height: 100%; padding: 0; background: transparent; border: 1px solid #d2d2d2; position: relative; }
.cartypeBox li button:hover, .cartypeBox li a:hover { background: #e8e8e8; text-decoration: none;  }
.cartypeBox li button.on { background: #ffffff; border: 1px solid #00aade; box-shadow: 3px 3px 5px #ddd;}
.cartypeBox li button.on:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 15px solid transparent; border-top: 15px solid #00aade; }
.cartypeBox li button.on:hover { background: #fbf8f3; }
.cartypeBox ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
@media screen and (max-width: 800px) {
	.searchBox .cartypeBox { overflow-y: auto; }
	.searchBox .cartypeBox .frame {width: 765px; height: 75px; position: relative;}
	.searchBox .cartypeBox .box { width: 340px; }
	.searchBox .cartypeBox .box.R { position: absolute; top: 10px; left: 350px; width: 270px; }
	.searchBox .cartypeBox .box.C { position: absolute; top: 10px; left: 630px; width: 130px; }
}

/* 특가판매 */
.goodsSalesBox {}
.goodsSalesBox.sales {position: absolute; bottom: 10px; right: 301px; }
.goodsSalesBox.kind {position: absolute; bottom: 10px; right: 21px; }

.goodsSalesBox .frame { position: relative; padding-top: 10px; }
.goodsSalesBox .box { width: 545px; }
.goodsSalesBox .title { position: relative; width: 50px; background: #e8e8e8; text-align: center; padding: 3px 0; font-size: 13px; font-weight: bold; margin-top: 5px; }
.goodsSalesBox .title:after {content: ""; position: absolute; left: 100%; top: 50%; margin-top: -6px; width:0; height:0; border-style:solid; border-width:5px; border-color:transparent transparent transparent #e8e8e8;}
.goodsSalesBox ul { margin-left: 53px; margin-top: -25px;}
.goodsSalesBox li {float: left; width: 65px; height: 25px; margin-left: 5px; margin-bottom: 5px;}
.goodsSalesBox li span { display: block; width: 100%; text-align: center; font-size: 13px; }
.goodsSalesBox li span.len4 { letter-spacing: -1px; }
.goodsSalesBox li span.len5 { letter-spacing: -2px; }
.goodsSalesBox li button, .goodsSalesBox li a { display: block; width: 100%; height: 100%; padding: 0; background: transparent; border: 1px solid #d2d2d2; }
.goodsSalesBox li button:hover, .goodsSalesBox li a:hover { background: #e8e8e8; text-decoration: none;  }
.goodsSalesBox li button.on { background: #ffffff; border: 1px solid #00aade; box-shadow: 3px 3px 5px #ddd;}
.goodsSalesBox li button.on:hover { background: #fbf8f3; }
.goodsSalesBox ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

/* 모델 목록 */
.modelList {width: 102%; margin-left: -2% }
.modelList li {float:left; width: 23%; margin-left: 2%; position: relative; background: #fff; margin-bottom: 20px; box-shadow: 3px 3px 5px #ddd; }
.modelList li .logo { position: absolute; top: 0; left: 0; width: 50px; }
.modelList li .logo img { width: 100%; }
.modelList li .title { font-size: 17px; padding: 4px 0 4px 50px ; height: 25px;  overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.modelList li .car img { width: 86%; margin: 0 7%;  }
.modelList li .name { padding: 0; margin-top: -5px; height: 25px;  text-align: center; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.modelList li .update { text-align: center; height: 28px; margin-top: -14px; margin-bottom: -14px; }
.modelList li .update span {background: #e9dfcf; font-size: 15px; text-align: center; padding: 3px 10px; font-size: 13px; border-radius: 20px; display: inline-block; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.modelList li .text { background: #f9f9f9; padding: 18px 10px 10px 10px;}
.modelList li.hot:after { content: ""; position: absolute; top: 0; right: 0; width: 51px; height: 28px;  background: url(/images/pattern-24.png) -170px -297px no-repeat; background-size: 500px 500px; }
.modelList li.state3:after { content: "재고 한정"; position: absolute; top: 5px; right: 5px; background: #aaa; color: #fff; border-radius: 10px; font-size: 13px; padding: 2px 6px; }

.modelList li .text .name { color: #7f7d7b; }
.modelList li .text .data { float: right; }
.modelList li .link { background: #f9f9f9; padding: 5px;}
.modelList li .link a {display: block; text-decoration: none; background: #f7f1e8; height: 32px; line-height: 32px; text-align: center; }
.modelList li .link a:hover { background: #00aade; color:#ffffff; }
.modelList li .link.cnt2 a {width: 48.5%; float:left; margin-left: 3%; } 
.modelList li .link.cnt2 a:first-child {margin-left: 0;} 
.modelList li .link.cnt2:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.modelList li .sales a {display: block; text-decoration: none; text-align: center; }
.modelList li .sales .kind { float: left; width: 50%; text-align: center; background: #8d8b87; color: #fff; height: 32px; line-height: 32px; }
.modelList li .sales .month { float: left; width: 50%; text-align: center; background: #63605d; color: #fff; height: 32px; line-height: 32px; }
.modelList li .sales a:hover .kind { background: #63605d; }
.modelList li .sales a:hover .month {background: #00aade; }
.modelList li .sales:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

.modelList:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

.modelList.vehicle {}
.modelList.vehicle li { width: 31%; margin-left: 2%; margin-bottom: 3%; box-shadow: none; }
.modelList.vehicle li a, .modelList.vehicle li button { display: block; width: 100%; background: #fff; border: 1px solid #fff; }
.modelList.vehicle li.on a, .modelList.vehicle li.on button { border: 1px solid #00aade; }
.modelList.vehicle li.on a:after, .modelList.vehicle li.on button:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 15px solid transparent; border-top: 15px solid #00aade; }
.modelList.vehicle .title { font-size: 14px; padding:0 5px; text-align: center; font-weight: bold; }
.modelList.vehicle li.state3:after { top: 0; right: 0;}
.modelList li .type { position: absolute; top: 0; right: 0; font-size: 13px; background: rgba(214, 64, 51, 0.7); padding: 2px 6px; color: #fff; border-radius: 15px; }
.modelList li.state3 .type { display: none; }
.modelList.vehicle a:hover, .modelList.vehicle button:hover { background: #e8e8e8; text-decoration: none; }

.modelList.request li { box-shadow: none;}
.modelList.request .title { font-size: 14px; padding:0 5px; text-align: center; font-weight: bold; }




@media screen and (max-width: 800px) {
	.modelList {width: 104%; margin-left: -4% }
	.modelList li {float:left; width: 46%; margin-left: 4%; }
}
@media screen and (max-width: 640px) {
	.modelList {width: 103%; margin-left: -3% }
	.modelList li { width: 47%; margin-left: 3%; margin-bottom: 3%; }
	.modelList li .link { padding: 0px;}
	.modelList li .link a { height: 26px; line-height: 26px; font-size: 13px; }
	.modelList li .link.cnt2 a {width: 50%; margin: 0; }
	.modelList li .link.cnt2 a:first-child {border-right: 1px solid #f9f9f9; } 
	.modelList span, .modelList div {font-size: 13px;}
	.modelList li .title {font-size: 14px; padding: 4px 0 4px 40px; height: 20px;}
	.modelList li .logo { width: 40px;}
	.modelList li .text { padding: 10px 5px 5px 5px; }
}



/* 신차 정보/견적 창 조절 */
.searchNaviBox { display: none; }
.searchNaviBox.start, .searchNaviBox.open { display: block; }
.vehicleBox { display: none; }
.vehicleBox.open { display: block; }

/* 내비게이션 */
.naviBox { background: #fff; padding: 5px 0;}
.naviBox .navi > div { float: left; line-height: 2.0em; position: relative; }
.naviBox .navi > div:before {content:">"; padding: 0 5px;}
.naviBox .navi > div:first-child:before {content:"•"}
.naviBox .navi > div.guide:before{content: "※";}
.naviBox .navi > div ul { display: none; z-index: 50; background: #f2f1ed; border-bottom: 2px solid #2a2829; padding: 5px;}
.naviBox .navi > div ul.open { display: block; position: absolute; top: 33px; left: 20px; width: 200px; }
.naviBox .navi > div ul li.on { font-weight: bold;  }
.naviBox .navi > div.qText { width: 70%; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.naviBox .navi button { display: inline-block;  line-height: 0; text-indent: -99999px; border: 1px solid #e0e0e0; margin-left: 7px; background: #fff url(/images/icon-27.png) -156px -153px no-repeat; background-size: 300px 200px; padding:0; width: 18px; height: 18px; }
.naviBox .navi button.on { background: #f2f2f2 url(/images/icon-27.png) -181px -153px no-repeat; background-size: 300px 200px;}
.naviBox .navi:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

@media screen and (max-width: 800px) {
	.naviBox .body  {padding-left: 5px; }
	.naviBox .navi .guide { display: none; }
}
@media screen and (max-width: 640px) {
	.naviBox .navi .category span  { display: none; }
}

/* 신차 정보 브랜드/모델 선택 */
.searchNaviBox { }
.searchNaviBox .body { position: relative; min-height: 500px; }
.searchNaviBox .brandBox { position: absolute; top: 0; left: 20px; width: 480px; background: #fafafa; }
.searchNaviBox .modelSelectBox { margin-left: 500px; padding-top: 20px; }
.searchNaviBox .closeSearch { position: absolute; top:-38px; right: 20px; width: 38px; height: 38px; background: #e5e5e5 url(/images/icon-27.png) -58px -104px no-repeat; background-size: 300px 200px; }
.searchNaviBox .closeSearch:hover {background-color: #d0d0d0;}
.searchNaviBox .closeSearch span {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px}

.searchNaviBox .brandBox .frame { padding-top: 0; }
.searchNaviBox .brandBox .local { background: #e5e5e5; margin-top: 0px; padding: 30px 0;margin-bottom: 9px; border-top: 1px solid #fafafa; }
.searchNaviBox .brandBox .eu .local {height: 200px; margin-bottom: 20px;}
.searchNaviBox .brandBox .local:after { display: none; ;}
.searchNaviBox .brandBox ul { margin-left: 53px; margin-top: -82px;}
.searchNaviBox .brandBox .eu ul {margin-top: -270px;}
.searchNaviBox .brandBox li { float: left; width: 65px; height: 68px; margin-left: 5px; margin-bottom: 5px;}

.searchNaviBox .selectM { display: none;}

.searchNaviBox .slideBox { position: relative; overflow: hidden;}
.searchNaviBox .slideBox > ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
.searchNaviBox .slideBox > ul > li { float:left; width:100%; height:100%;}

@media screen and (max-width: 800px) {
	.searchNaviBox .brandBox {  display: none; }
	.searchNaviBox .selectM { display: block; padding-bottom: 10px; }
	.searchNaviBox .closeSearch { position: absolute; top:-38px; right: 0;}
	
	.searchNaviBox .body { padding: 15px 0 0 0; background: #fbf8f3; }
	.searchNaviBox .tabBox { margin: 0 15px 15px 15px }
	.searchNaviBox .tabBox li {float: left; width: 25%; position: relative; }
	.searchNaviBox .tabBox li.cartype { float: left; width: 24%;}
	.searchNaviBox .tabBox li.on:after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; width: 0;  height: 0;  border-style: solid; border-width: 6px; border-color: #00aade transparent transparent  transparent; }
	.searchNaviBox .tabBox li button { border-right: 1px solid #fbf8f3; background: #dfdcd7; padding: 5px; text-align: center; width: 100%; }
	.searchNaviBox .tabBox li.on button { background: #00aade; color: #fff;  }
	.searchNaviBox .tabBox ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
	

	.searchNaviBox .slideBox .brand { padding: 0 15px; }
	.searchNaviBox .slideBox .brand li { float: left; width: 20%; text-align: center; margin-bottom: 10px; }
	.searchNaviBox .slideBox .brand li button { width: 98%; max-width: 65px; height: 68px; background: transparent; padding: 0; }
	.searchNaviBox .slideBox .brand li button.on { background: #ffffff; border: 1px solid #00aade; box-shadow: 3px 3px 5px #ddd;}
	.searchNaviBox .slideBox .brand li button.on:hover { background: #fbf8f3; }

	.searchNaviBox .slideBox .brand li img { display: block; width: 100%; }
	.searchNaviBox .slideBox .brand li span { display: block; width: 100%; text-align: center; font-size: 13px; padding-bottom: 5px;}
	.searchNaviBox .slideBox .brand li span.len4 { letter-spacing: -1px; }
	.searchNaviBox .slideBox .brand li span.len5 { letter-spacing: -2px; }
	.searchNaviBox .slideBox .brand:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
	
	
	.searchNaviBox .modelSelectBox { margin-left: 0; padding: 30px 20px; background: #fff;}
	.modelList.vehicle { width: 102%; margin-left: -2%; }
	.modelList.vehicle li { width: 31.3%; margin-left: 2%; margin-bottom: 3%;}
}
@media screen and (max-width: 500px) {
	.searchNaviBox .modelSelectBox { padding: 30px 10px;}
	.modelList.vehicle { width: 103%; margin-left: -3%; }
	.modelList.vehicle li { width: 47%; margin-left: 3%; margin-bottom: 3%;}
}

/* 신차 요약 */
.vehicleCoverBox {position: relative; background:#c8c8c8;}
.vehicleCoverBox .cover { width: 700px;}
.vehicleCoverBox .cover img { width: 100%; display: block;}
.vehicleCoverBox .title { position: absolute; top: 20px; left: 40px; background: rgba(0,0,0,0.3); font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  color: #fff; font-size: 28px; padding: 10px 15px;}
.vehicleCoverBox .update { position: absolute; bottom: 10px; left: 20px; width: 66%; text-align: center;}
.vehicleCoverBox .update span {background: rgba(0,0,0,0.3); font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  color: #fff; font-size: 20px; padding: 8px 15px; border-radius: 30px; }
.vehicleCoverBox .summary {position: absolute; top: 0; right: 20px; width: 33%; height: 330px; background: #444444; color: #fff; padding-top: 20px} 
.vehicleCoverBox .summary  dt { padding-left: 50px; font-size: 17px; padding-bottom: 20px; margin-top: 20px;}
.vehicleCoverBox .summary  dd { font-size: 17px; margin-left: 100px; margin-top: -46px;}
.vehicleCoverBox .summary  dd span { font-size: 20px; color: #00aade; font-weight: bold;}
.vehicleCoverBox .summary  dd span.unit { font-size: 17px; color: #fff; font-weight: notmal; margin-left: 6px;}
.vehicleCoverBox .link {position: absolute; bottom: 120px; right: 0; width: 100%; text-align: center;}
.vehicleCoverBox .link li { display: inline-block; margin: 0 5px; }
.vehicleCoverBox .link li a { display: inline-block; padding: 3px 10px; background:#efede8; border-radius: 20px; padding: 5px 15px; font-size: 18px; font-weight: bold; }
.vehicleCoverBox .link li.estimate a { background:#00aade; color: #fff; font-weight: bold; }
.vehicleCoverBox .link li a:hover { font-weight: bold; text-decoration: none; background: #ccc; color: #222}
.vehicleCoverBox .adModelBox {position: absolute; bottom: 0px; right: 20px; width: 33%; }
.vehicleCoverBox .adModelBox img {width: 100%;  display: block;}

.vehicleIntroBox { background: #fff; margin: 30px 0;}
.vehicleIntroBox .body div { border: 6px solid #999999;  font-weight: bold; padding: 30px; font-size: 20px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  }

.vehicleWarrantyBox { background: #fff; margin: 20px 0; }
.vehicleWarrantyBox .body div { border: 6px solid #999999;  font-weight: bold; padding: 30px; font-size: 20px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  }

@media screen and (max-width: 800px) {
	.vehicleCoverBox .body {padding: 0;}
	.vehicleCoverBox .cover { width: auto;}
	.vehicleCoverBox .summary {position: relative;; top: auto; right: auto; width: auto; height: auto; padding-top: 20px} 
	.vehicleCoverBox .summary  dt { padding-left: 20px; font-size: 17px; padding-bottom: 20px; margin-top: 0px;}
	.vehicleCoverBox .summary  dd { font-size: 17px; margin-left: 80px; margin-top: -46px; padding-bottom: 10px;}
	.vehicleCoverBox .adModelBox { bottom: 10px; right: 10px; width: 40%; }
	.vehicleCoverBox .link { bottom: 110px; right: 0%; width: 100%; text-align: center; }
	.vehicleCoverBox .link li {display: inline-block; float: none;}
	.vehicleCoverBox .update {  bottom: 150px; left: 0px; width: 96%; margin: 0 2%; text-align: right; }
	
}
@media screen and (max-width: 640px) {
	.vehicleCoverBox .adModelBox { position: relative; width: 100%; bottom: auto; right: auto; }
	.vehicleCoverBox .title { font-size: 20px; padding: 5px 10px; top: 15px; left: 15px; }
	.vehicleCoverBox .update {  bottom: auto; top: 60px; left: 0px; width: 96%; margin: 0 2%; text-align: right; }
	.vehicleCoverBox .update span {font-size: 17px; }
}


/* 신차 갤러리 */
.vehicleGalleryBox { margin: 20px 0; }
.vehicleGalleryBox img { width: 100%; }

/* 가격표/카다로그 */
.fileBox .frame { border: 1px solid #ccc; background: #eeeeee; padding: 6px;  padding-bottom: 1px; margin-top: -1px; text-align: center; }
.fileBox .frame .thumb {display: inline-block; }
.fileBox .frame .thumb img { margin: 4px; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; cursor: pointer; }

.fileBox button.expand {display: none; position: absolute; right: 40px; bottom: 0; width: 38px; height: 38px; font-size:0px; line-height:0; text-indent:-9999px;  background: url(/images/icon-07.png) -506px -6px no-repeat; background-size: 550px 300px; }
.fileBox button.expand:hover { background: url(/images/icon-07.png) -506px -56px no-repeat; background-size: 550px 300px; }
.fileBox .expand button.expand { background: url(/images/icon-07.png) -506px -106px no-repeat; background-size: 550px 300px; }
.fileBox .expand button.expand:hover { background: url(/images/icon-07.png) -506px -156px no-repeat; background-size: 550px 300px; }
.fileBox .open button.expand { display: inline-block; }
.fileBox .open button.expand.off { display: none; }
.fileBox .frame { position: relative; }
.fileBox .frame .inner { overflow-x: auto; position: relative; }
.fileBox .frame button {position: absolute; height: 86%; width: 40px; top: 0; background: rgba(0,0,0,0.2); z-index: 10; font-size:0px; line-height:0; text-indent:-9999px;  }
.fileBox .frame button.prev { left: 0; }
.fileBox .frame button.next { right: 0; }
.fileBox .frame button.prev.off { display: none; }
.fileBox .frame button.next.off { display: none; }
.fileBox .frame button.prev:after { content: ""; position: absolute; top: 50%; left: 0; margin-top: -20px; width: 40px; height: 40px; background: url(/images/icon-27.png) -145px -5px no-repeat; background-size: 300px 200px; }
.fileBox .frame button.next:after { content: ""; position: absolute; top: 50%; left: 0; margin-top: -20px; width: 40px; height: 40px; background: url(/images/icon-27.png) -102px -5px no-repeat; background-size: 300px 200px; }
.fileBox .frame button:hover { background: rgba(0,0,0,0.4); }
.fileBox .expand .frame button { display: none; }



/* 신차 등급 */
.vehicleGradeBox { background: #f0f0f0; padding: 10px 0; }
.gradeList h4 span.state3:after { content: "재고 한정"; margin-left: 5px; background: #aaa; color: #fff; border-radius: 10px; font-size: 13px; padding: 2px 6px; font-weight: normal; }
.gradeList .subTitle span.state3:after { content: "재고 한정"; margin-left: 5px; background: #aaa; color: #fff; border-radius: 10px; font-size: 13px; padding: 2px 6px; font-weight: normal; }

.trimList { width: 102%; margin-left: -2%; margin-top: 15px; margin-bottom: 20px; }
.trimList li { float: left; width: 23%; margin-left: 2%; margin-bottom: 2%; }
.trimList li .frame, .trimList li a, .trimList li button { position: relative; background: #fff; box-shadow: 3px 3px 5px #ddd; display: table; width: 100%; padding: 0 10px 30px 10px; box-sizing: border-box; border: 1px solid #fff;}
.trimList li .name { height: 50px; text-align: left; display: table-cell; vertical-align: middle;  overflow: hidden; text-overflow: ellipsis; }
.trimList li .info { position: absolute; bottom: 5px; left: 5px; color: #999; font-size: 13px; letter-spacing: -1px; }
.trimList li .price { position: absolute; bottom: 8px; right: 10px;}
.trimList li.on .price { color: #00aade; font-weight: bold; }
.trimList li.hot a:after { content: ""; position: absolute; width: 32px; height: 18px; top: 0px; right: 0px; background: url(/images/pattern-24.png) -108px -76px no-repeat; background-size: 250px 250px; }
.trimList li.state3 a:after, .trimList li.state3 button:after { content: "재고 한정"; margin-left: 5px; background: rgba(0,0,0,0.3); color: #fff; border-radius: 10px; font-size: 13px; padding: 2px 6px; font-weight: normal; position: absolute; top:0; right: 0;}
.trimList:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.trimList li a:hover, .trimList li button:hover { background: #e8e8e8; text-decoration: none;  }
.trimList li.on a, .trimList li.on button { border: 1px solid #00aade; position: relative; }
.trimList li.on a:after, .trimList li.on button:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 15px solid transparent; border-top: 15px solid #00aade; }

/* 색상 */
.vehicleColorBox { background: #fafafa; padding: 10px 0;}
.colorList { width: 102%; margin-left: -2%}
.colorList li { float: left; width: 23%; margin-left: 2%; margin-bottom: 20px; }
.colorList li .frame, .colorList li a, .colorList li button { position: relative; background: #fff; box-shadow: 3px 3px 5px #ddd; display: table; width: 100%; padding: 0 10px 30px 10px; box-sizing: border-box; border: 1px solid #fff;}
.colorList li .name { height: 50px; text-align: left; display: table-cell; vertical-align: middle;  overflow: hidden; text-overflow: ellipsis; padding-left: 20px }
.colorList li .price { position: absolute; bottom: 10px; right: 10px; }
.colorList li .group { position: absolute; bottom: 5px; left: 30px; color: #999; font-size: 13px;}
.colorList li.on .price { color: #00aade; font-weight: bold; }
.colorList .colorChip { position: absolute; top: 0px; left: 0px; height: 100%; width: 20px; border: 1px solid #ccc; box-sizing: border-box; }
.colorList .colorChip .colorMain { position:relative; display:inline-block; width:100%; height:100%; }
.colorList .colorChip .colorSub { position:absolute; bottom: 0px; left: 0px; display:inline-block; width:100%; height:50%; }
.colorList li.state3 a:after { content: "재고 한정"; margin-left: 5px; background: rgba(0,0,0,0.3); color: #fff; border-radius: 10px; font-size: 13px; padding: 2px 6px; font-weight: normal; position: absolute; top:0; right: 0;}
.colorList:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.colorList li a:hover, .colorList li button:hover { background: #e8e8e8; text-decoration: none;  }
.colorList li.on a, .colorList li.on button { border: 1px solid #00aade; }
.colorList li.on a:after, .colorList li.on button:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 15px solid transparent; border-top: 15px solid #00aade; }
.colorList li.off { display: none;  }
.vehicleColorBox .colorList li .frame { padding: 0 10px; }

.vehicleColorBox2 {background: #ffffff; }
.vehicleColorBox2 h3 { border-bottom: 1px solid #d4d4d4; padding-bottom: 5px; margin-bottom: 15px; }
.vehicleColorBox2 .guide { color: #666; font-size: 13px; }
.colorList2 { width: 102%; margin-left: -2%}
.colorList2 li { float: left; width: 14.66%; margin-left: 2%; margin-bottom: 20px; }
.colorList2 li .frame, .colorList2 li a, .colorList2 li button { position: relative; display: table; width: 100%; height: 40px; padding-top: 35px; box-sizing: border-box;}
.colorList2 li .name { height: 40px; text-align: center; display: table-cell; vertical-align: middle;  overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.colorList2 li.state3 .frame:after { content: "재고 한정"; margin-left: 5px; background: rgba(0,0,0,0.3); color: #fff; border-radius: 10px; font-size: 13px; padding: 2px 6px; font-weight: normal; position: absolute; top:20px; right: 0;}
.colorList2 li .name .group { color: #999; font-size: 13px; display: block; }
.colorList2 li .price { position: absolute; bottom: 10px; right: 10px; }
.colorList2 li.on .price { color: #00aade; font-weight: bold; }
.colorList2 .colorChip { position: absolute; top: 0px; left: 0px; width: 100%; height: 35px; border: 1px solid #bbb; box-sizing: border-box; }
.colorList2 .colorChip .colorMain { position:relative; display:inline-block; width:100%; height:100%; }
.colorList2 .colorChip .colorSub { position:absolute; bottom: 0px; right: 0px; display:inline-block; width:50%; height:100%; }
.colorList2:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

/* 옵션 */
.optionList {  }
.optionList li { margin-bottom: 10px;}
.optionList li a, .optionList li button {position: relative; background: #fff; box-shadow: 3px 3px 5px #ddd; display: table; width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #fff; text-align: left;}
/* .optionList li.on a, .optionList li.on button { border: 1px solid #00aade; background: #f6f8f8; } */
.optionList li.off { display: none;  }
.optionList li.blank { padding: 50px 0; text-align: center; }
.optionList li .name { min-width: 200px; }
.optionList li.state3 .name:after { content: "재고 한정"; margin-left: 5px; background: #aaa; color: #fff; border-radius: 10px; font-size: 13px; padding: 2px 6px; font-weight: normal; }
.optionList li .info { clear: both; text-align: left;  font-size: 13px; color: #999; padding: 0 20px;}
.optionList li .price { float: right; }
.optionList li.on .price { color: #00aade; font-weight: bold; }
.optionList li a:hover, .optionList li button:hover { background: #e8e8e8; text-decoration: none; }
.optionList li.on a, .optionList li.on button { border: 1px solid #00aade; }
.optionList li.on a:after, .optionList li.on button:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 15px solid transparent; border-top: 15px solid #00aade; }
.optionList li.button {  }
.optionList li.button button { padding: 3px 8px; color: #fff; background: #999999; }
.optionList li.button button:hover { background: #666666; text-decoration: none; }
.optionList li.button button.btnAoptionView { padding-right: 35px; position: relative; }
.optionList li.button button.btnAoptionView:after {content:""; top: 0; right: 0; width: 27px; height: 27px; position: absolute; background: url(/images/icon-27.png) -205px -15px no-repeat; background-size: 300px 200px; }
.optionList li.button button.btnAoptionView.open:after {content:""; top: 0; right: 0; width: 27px; height: 27px; position: absolute; background: url(/images/icon-27.png) -255px -15px no-repeat; background-size: 300px 200px; }

/* 할인조건 */
.discountList > li { border: 1px solid #fff; margin-bottom: 10px; padding: 5px 8px; background: #fff; box-shadow: 3px 3px 5px #ddd; position: relative; }
.discountList > li.on { border: 1px solid #00aade; }
.discountList > li.on:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 15px solid transparent; border-top: 15px solid #00aade; }
.discountList a, .discountList button { display: block; width: 100%; position: relative; padding: 3px 0;}
.discountList a:hover, .discountList button:hover { background: #e8e8e8; }
.discountList .require {margin-left: 25px; float: left; }
.discountList .price { float: right; }
.discountList li ul li.on .price { color: #00aade; font-weight: bold; }
.discountList li > a:before, .discountList li > button:before { content: ""; position: absolute; left: 6px; top: 50%; margin-top: -6px; width: 10px; height: 10px; border: 1px solid #ccc; background: #fff; border-radius: 10px; }
.discountList li.hot:after { content: "★"; position: absolute; top: -10px; right: 0px; font-size: 20px; color: #ef3810; }
.discountList li.on > a:before, .discountList li.on > button:before { background: #00aade; }
.discountList li.off { display: none;  }
.discountList ul li a:after, .discountList ul li button:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.discountShareSum { border-bottom: 2px solid #5b5b5b;}
.discountShareSum button{ float: right; width: 30px; height: 30px; margin-left: 5px;  font-size: 0px; line-height: 0; text-indent: -9999px; background: url(/images/icon-27.png) -202px -162px no-repeat;  background-size: 300px 200px; }
.discountShareSum button.on{ background: url(/images/icon-27.png) -252px -162px no-repeat;  background-size: 300px 200px; }
.discountShareSum span {display: inline-block; padding: 0px 8px 8px 0;  }
.discountShareSum span.name {font-size: 17px;}
.discountShareSum span em {font-size: 17px; font-weight: bold; color: #ef3810; font-style: normal;  }
.discountShareSum a { float: right; padding: 3px 8px; color: #fff; background: #999999; }
.discountShareSum a:hover { background: #666666; text-decoration: none; }
.discountShareList li .kind { display: block; float: left; width: 10%; text-align: center; }
.discountShareList li .discount { display: block; float: left; width: 17%; text-align: center; }
.discountShareList li .cashback { display: block; float: left; width: 15%; text-align: center; }
.discountShareList li .gifts { display: block; float: left; width: 42%; text-align: center; }
.discountShareList li .who { display: block; float: left; width: 17%; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;}
.discountShareList li .date { display: block; float: left; width: 13%; text-align: center; }
.discountShareList li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.discountShareList li:not(.index) { background:#fff; padding: 0; border-top: 1px solid #ccc; }
.discountShareList li.index { padding: 8px; color: #666; }
.discountShareList li .value { padding: 8px;}
.discountShareList li .value:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.discountShareList li .message { font-size: 13px; color: #666; padding: 8px; background: #f1f5fb;  }
.discountShareList li a:hover { background: #f8f8f8; text-decoration: none; display: block;  }
.discountShareList { border-bottom: 1px solid #5b5b5b;}
.discountShareList.off{ display: none; }
.discountShareDesc { margin: 10px; color: #666; font-size: 13px; margin-bottom: 20px;}
.discountShareBlank { padding-bottom: 10px; margin-bottom: 20px; text-align: center;  position: relative; }
.discountShareBlank a { float: right; padding: 3px 8px; color: #fff; background: #999999; }
.discountShareBlank a:hover { background: #666666; text-decoration: none; }
.requestImport { margin-top: 20px; text-align: center; }
.requestImport button { padding: 3px 8px; color: #fff; background: #999999; }
.requestImport button:hover { background: #666666; }

.contactBox { margin-bottom: 20px; }
.contactBox .sum { border-bottom: 2px solid #5b5b5b;}
.contactBox .sum button{ float: right; width: 30px; height: 30px; margin-left: 5px;  font-size: 0px; line-height: 0; text-indent: -9999px; background: url(/images/icon-27.png) -202px -162px no-repeat;  background-size: 300px 200px; }
.contactBox .sum button.on{ background: url(/images/icon-27.png) -252px -162px no-repeat;  background-size: 300px 200px; }
.contactBox .sum span {display: inline-block; padding: 0px 8px 8px 0;  }
.contactBox .sum span.name {font-size: 17px;}
.contactBox .sum span em {font-size: 17px; font-weight: bold; color: #ef3810; font-style: normal;  }
.contactBox .sum a { float: right; padding: 3px 10px; color: #fff; background: #00aade; border-radius: 15px; }
.contactBox .sum a:hover { background: #666666; text-decoration: none; }
.contactBox .list.off{ display: none; }
.contactBox .list.:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.contactBox .list li { padding: 5px 80px 5px 0; position: relative; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; border-bottom: 1px solid #ccc } 
.contactBox .list li .date { position: absolute; top: 5px; right: 0;}
.contactBox .list li .kind { margin-right: 5px}
.contactBox .list li .kind:before{ content:"["}
.contactBox .list. li .kind:after{ content:"]"}



/* 제원 */
.vehicleSpecBox { background: #e8e8e8; padding: 10px 0;}
.vehicleSpecSize .fr, .vehicleSpecSize .side { position: relative; float: left; width: 50%; }
.vehicleSpecSize img { display: block; width: 100%; }
.vehicleSpecSize span { position: absolute; display: inline-block; text-align: center; }
.vehicleSpecSize span.upper { border-bottom: 1px solid #ccc; top: 5%; }
.vehicleSpecSize span.upper:before { content: ''; position: absolute; border-left: 1px solid #ccc; height: 10px; bottom: -10px; left: 0; }
.vehicleSpecSize span.upper:after { content: ''; position: absolute; border-right: 1px solid #ccc; height: 10px; bottom: -10px; right: 0; }
.vehicleSpecSize span.lower { border-top: 1px solid #ccc; bottom: 5%; }
.vehicleSpecSize span.lower:before { content: ''; position: absolute; border-left: 1px solid #ccc; height: 10px; top: -10px; left: 0; }
.vehicleSpecSize span.lower:after { content: ''; position: absolute; border-right: 1px solid #ccc; height: 10px; top: -10px; right: 0; }
.vehicleSpecSize span.left { border-bottom: 1px solid #ccc; top: 48%; }
.vehicleSpecSize span.left:before { content: ''; position: absolute; border-left: 1px solid #ccc; height: 10px; bottom: -11px; left: 0; }
.vehicleSpecSize span.left:after { content: ''; position: absolute; border-right: 1px solid #ccc; height: 10px; bottom: -11px; right: 0; }
.vehicleSpecSize em { padding: 0 5px; font-style: normal; display: inline-block; padding: 5px; line-height: 1.0;}
.vehicleSpecSize span.widthF { left: 14.5%; width: 34.0%; }
.vehicleSpecSize span.widthR { left: 58.7%; width: 34.0%; }
.vehicleSpecSize span.frontT { left: 16.7%; width: 29.8%; }
.vehicleSpecSize span.rearT { left: 60.4%; width: 30%; }
.vehicleSpecSize span.heightL { left: -7%; width: 27%;-ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg);  }
.vehicleSpecSize span.lengthT { left: 9.5%; width: 84.0%; }
.vehicleSpecSize span.wheelB { left: 26.0%; width: 48.5%; }
.vehicleSpecSize:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.specFrame {display: none;}
@media screen and (max-width: 640px) {
	.vehicleSpecSize .fr, .vehicleSpecSize .side { position: relative; float: none; width: auto; }
}
.specList { width: 102%; margin-left: -2%}
.specList li { float: left; width: 23%; margin-left: 2%; margin-bottom: 20px; }
.specList li .frame { position: relative; background: #fff; box-shadow: 3px 3px 5px #ddd; display: table; width: 100%; padding: 10px; box-sizing: border-box; }
.specList .name { border-bottom: 1px solid #ccc; text-align: center; padding-bottom: 5px; margin-bottom: 10px; display: table; width: 100%; font-weight: bold; }
.specList .name span { display: table-cell; height: 40px;    line-height: 1.3;    vertical-align: middle;}
.specList dt {  color: #999; letter-spacing: -1px; font-size: 12px;}
.specList dd { text-align: right; margin-top: -20px;}
.specList .unit { color:#999; font-size: 12px; margin-left: 5px;}
.specList .unit:before {content:"("}
.specList .unit:after {content:")"}
.specList:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

.specPopup {}
.specPopup h4 {font-size: 17px; text-align: center; border-bottom: 2px solid #5a5a5a; padding-top: 10px; padding-bottom: 10px; }
.specPopup h4 em { font-style: normal; color: #00aade; }
.specPopup .data .left { float: left; width: 48.5%;}
.specPopup .data .right { float: right; width: 48.5%;}
.specPopup .data:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.specPopup .name { border-bottom: 1px solid #00aade; text-align: center; padding-bottom: 5px; font-weight: bold; margin-top: 20px; }
.specPopup dl { position: relative; }
.specPopup dl:before { content: ""; position: absolute; top: 0; left: 0; width: 140px; height: 100%; background: #f5f5f5; z-index: 1; }


.specPopup dt { padding: 5px 0; position: relative; z-index: 10; width: 140px; text-align: center; }
.specPopup dd { text-align: right; margin-top: -30px; border-bottom: 1px solid #ccc; padding: 5px; position: relative; z-index: 10; }
.specPopup .button { text-align: center; margin-top: 40px;}
.specPopup .button a, .specPopup .button button{ padding: 3px 5px; color: #fff; background: #999999; display: inline-block; margin-left: 4px;}
.specPopup .button a.estimate { background: #00aade; }
.specPopup .button a:hover, .specPopup .button button:hover{ background: #666666; text-decoration: none;  }

.infoPopup h3 {font-size: 17px; text-align: center; border-bottom: 2px solid #5a5a5a; padding-top: 10px; padding-bottom: 10px; }
.infoPopup h3 em { font-style: normal; color: #00aade; }
.infoPopup h4 {font-size: 17px; text-align: center; border-bottom: 1px solid #5a5a5a; margin-top: 30px; padding-bottom: 5px;}
.infoPopup h3 em { font-style: normal; color: #00aade; }

.infoPopup .button { text-align: center; margin-top: 10px;}
.infoPopup .button.top { text-align: right; margin-bottom: -20px;}
.infoPopup .button a, .infoPopup .button button{ padding: 3px 5px; color: #fff; background: #999999; display: inline-block; margin-left: 4px;}
.infoPopup .button a.estimate { background: #00aade; }
.infoPopup .button a:hover, .infoPopup .button button:hover{ background: #666666; text-decoration: none;  }

.infoPopup .spec .left { float: left; width: 48.5%;}
.infoPopup .spec .right { float: right; width: 48.5%;}
.infoPopup .spec:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.infoPopup .spec .name { text-align: center; padding: 5px 0; font-weight: bold; margin-top: 20px; background: #666666; color: #fff;  }
.infoPopup .spec dl { position: relative; box-shadow: 3px 3px 5px #ddd;}
.infoPopup .spec dl:before { content: ""; position: absolute; top: 0; left: 0; width: 140px; height: 100%; background: #f5f5f5; z-index: 1; }
.infoPopup .spec dt { padding: 5px 0; position: relative; z-index: 10; width: 140px; text-align: center; }
.infoPopup .spec dd { text-align: right; margin-top: -30px; border-bottom: 1px solid #ccc; padding: 5px; position: relative; z-index: 10; }

.infoPopup .items li { margin-top: 20px; box-shadow: 3px 3px 5px #ddd; }
.infoPopup .items .name { text-align: center; padding: 5px 0; font-weight: bold; margin-top: 20px; background: #666666; color: #fff;  }
.infoPopup .items dl { padding: 5px 10px; }
.infoPopup .items dt { margin-top: 5px; }
.infoPopup .items dt:before { content: "• "; }
.infoPopup .items dd { margin-left: 50px; }
.infoPopup .items .through { color: #666;  text-decoration: line-through;}
.infoPopup .items .link { color: #00aade; padding: 5px 10px; }

.infoPopup .option { position: relative; box-shadow: 3px 3px 5px #ddd;}
.infoPopup .option li { border-top: 1px dashed #ccc; padding: 10px; margin: 0;  }
.infoPopup .option li:first-child { border: 0; }
.infoPopup .option li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.infoPopup .option li .name:before { content: "• "; }

@media screen and (max-width: 800px) {
	
	.trimList { width: 102%; margin-left: -2%; }
	.trimList li { float: left; width: 31.3%; margin-left: 2%;}
	.colorList { width: 102%; margin-left: -2%; }
	.colorList li { float: left; width: 31.3%; margin-left: 2%;}
	.colorList2 { width: 102%; margin-left: -2%}
	.colorList2 li { float: left; width: 23%; margin-left: 2%;}
	.finance ul { width: 102%; margin-left: -2%;}
	.finance li { float: left; width: 31.3%; margin-left: 2%;}
	.finance dd .selectBox { position: relative; top: 0; right: 0;; text-align: right; }
	.vehicleGradeBox .trimList { width: 102%; margin-left: -2%; }
	.vehicleGradeBox .trimList li {  float: left; width: 31.3%; margin-left: 2%;}
	.specList { width: 102%; margin-left: -2%; }
	.specList li {  float: left; width: 31.3%; margin-left: 2%;}
}
@media screen and (max-width: 640px) {
	.trimList { width: 102%; margin-left: -2%; }
	.trimList li { float: left; width: 48%; margin-left: 2%;}
	.colorList { width: 102%; margin-left: -2%; }
	.colorList li { float: left; width: 48%; margin-left: 2%;}
	.colorList2 { width: 102%; margin-left: -2%}
	.colorList2 li { float: left; width: 31.33%; margin-left: 2%;}
	.finance ul { width: 102%; margin-left: -2%;}
	.finance li { float: left; width: 48%; margin-left: 2%;}
	.finance dd .selectBox { position: relative; top: 0; right: 0;; text-align: right; }
	.vehicleGradeBox .trimList { width: 102%; margin-left: -2%; }
	.vehicleGradeBox .trimList li {  float: left; width: 48%; margin-left: 2%;}
	.specList { width: 102%; margin-left: -2%; }
	.specList li {  float: left; width: 48%; margin-left: 2%;}
	
	.discountShareList li .kind { width: 15%;}
	.discountShareList li .discount { width: 25%;}
	.discountShareList li .gifts { width: 60%;}
	.discountShareList li .who { display: none;}
	.discountShareList li .date { display: none; }
	
	.infoPopup .spec .left { float: none; width: auto;}
	.infoPopup .spec .right { float: none; width: auto;}
}
@media screen and (max-width: 450px) {
	.trimList li .frame, .trimList li a, .trimList li button { padding-bottom: 40px;}
	.trimList li .info { bottom: 27px;}
	.colorList2 { width: 103%; margin-left: -3%}
	.colorList2 li { float: left; width: 47%; margin-left: 3%;}
	.specList { width: auto; margin-left: 0; }
	.specList li {  float: none; width: auto; margin-left: 0;}
}
/* 가격표 */
.vehiclePriceBox { background: #f2f2f2; padding: 10px 0;}
.vehiclePriceBox h3 span.state3:after { content: "재고 한정"; margin-left: 5px; background: #aaa; color: #fff; border-radius: 10px; font-size: 13px; padding: 2px 6px; font-weight: normal; }
.priceTable .lineup { margin-bottom: 40px;}
.priceTable .lineup .title { background: #f2f2f2; border-top:3px solid #5a5a5a; border-bottom: 1px solid #c8c8c8; text-align:center; padding: 10px; }
.priceTable .lineup .items {background: #fff; padding: 10px; box-shadow: 3px 3px 5px #ddd; }
.priceTable .lineup .items dt { margin-top: 5px; }
.priceTable .lineup .items dt:before { content: "• "; }
.priceTable .lineup .items dd { margin-left: 50px; }
.priceTable .head { font-weight: bold; }
.priceTable .head .name { padding: 10px; width: 65%; float: left; color: #fff;  background: #666666;  box-sizing:border-box; }
.priceTable .head .price { padding: 10px; width: 35%; float: left; color: #fff;  background: #00aade;  box-sizing:border-box; text-align: right; }
.priceTable .head .price .tax { font-weight: normal; font-size: 12px; color: #eeeeee; padding-right: 5px;}
.priceTable .head .info {  float: right; font-weight: normal; padding: 0;    background: transparent;    color: #fff; }
.priceTable .trim { background: #fff; box-shadow: 3px 3px 5px #ddd; margin-bottom: 25px; }
.priceTable .trim .items { width: 65%; float: left; border-top:1px solid #ccc; border-right:1px solid #ccc; box-sizing:border-box; padding: 10px; }
.priceTable .trim .items dt { margin-top: 5px; }
.priceTable .trim .items dt:before { content: "• "; }
.priceTable .trim .items dd { margin-left: 50px; }
.priceTable .trim .option { width: 35%; float: left; border-top:1px solid #ccc; border-left:1px solid #ccc;  box-sizing:border-box; margin-left: -1px; padding: 10px;}
.priceTable .link { color: #00aade; padding-bottom: 10px; }
.priceTable .index { border-top:2px solid #5a5a5a; }
.priceTable .index .items { background: #f2f2f2; width: 65%; float: left;  box-sizing:border-box; padding: 10px; text-align: center;}
.priceTable .index .option { background: #f2f2f2; width: 35%; float: left; border-left:1px solid #ccc; box-sizing:border-box;  padding: 10px; text-align: center; }
.priceTable .option .price { float: right; }
.priceTable .guide { border-top:1px solid #c8c8c8; background: #fff; padding: 10px; box-shadow: 3px 3px 5px #ddd;  }
.priceTable .head:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.priceTable li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.priceTable .summary { text-align: right; margin-bottom: 0;}
.priceTable .summary .tax { font-size: 12px; color: #666; padding-right: 5px; }
.priceTable .summary .taxDC { font-weight: bold; color: #ff7a00;}
.priceTable .summary .sum { font-weight: bold; color: #00aade; font-size: 19px; }
.priceTable .summary button { display: inline-block; padding: 5px 10px; background:#00aade; color:#fff; border-radius: 15px; }
.priceTable .summary button:hover { font-weight: bold; text-decoration: none; background: #666; }
.priceTable .optionList li a { position: relative; display: inline-block; box-shadow: none; width: 5px; height: 5px; border: 0; font-size:0px; line-height:0; text-indent:-9999px;}
.priceTable .optionList li a:after{ position: absolute; top: -5px; left: -10px; content:"?"; color:#000; margin-left: 0; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 20px; display: inline-block; text-align: center; margin-left: 5px;  background: #f3f3f3; }

.priceTable .package { border-top: 2px solid #5b5b5b; margin-top: 30px; background: #fff; margin-bottom: 30px;}
.priceTable .package  li { border-bottom: 1px solid #ccc; }
.priceTable .package  li .name {float: left; width: 30%; padding: 8px 1%; font-weight: bold; }
.priceTable .package  li .text {float: left; width: 66%; padding: 8px 1%;}
.priceTable .package  li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}


@media screen and (max-width: 800px) {
	.priceTable .head { position: relative; }
	.priceTable .head .name { width: auto; float: none; padding-right: 120px; }
	.priceTable .head .price { width: 110px; position: absolute; top: 0; right: 0; }
	.priceTable .head .price .tax { position: absolute; bottom: -17px; right: 0; color: #666; }
	.priceTable .index { display: none; }
	.priceTable .trim .items { width: auto; float: none; border: 0; position: relative; }
	.priceTable .trim .items:before { content: "기본품목"; display: block; width: 100%; border-bottom: 1px dashed #ccc; padding-bottom: 10px; margin-bottom: 10px; text-align: center; }
	.priceTable .trim .option { width: auto; float: none; border: 0; border-top: 1px solid #ccc; }
	.priceTable .trim .option:before { content: "선택품목"; display: block; width: 100%; border-bottom: 1px dashed #ccc; padding-bottom: 10px; margin-bottom: 10px; text-align: center; }
}

/* 탁송료 */
.deliveryBox { margin-bottom: 20px; }
.deliveryBox .selectBox { float: left; padding-bottom: 10px; }
.deliveryBox .selectBox > span { display: inline-block; margin-right: 10px; margin-bottom: 10px;}
.deliveryBox .price { float: right; ; padding-bottom: 10px; }
.deliveryBox .desc:before {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

/* 등록비용 */
.registerBox {}
.registerBox .price { float: right; }
.registerBox .selectBox > span { display: inline-block; margin-right: 10px; margin-bottom: 10px;}
.registerBox ul li { padding: 8px 0; border-top: 1px dashed #d8d8d8;}
.registerBox ul li:first-child { border-top: 0; }
.registerBox ul li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.registerBox .subSum:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.registerBox .subSum { padding: 10px 0; border-top: 1px solid #d8d8d8; font-weight: bold; color: #00aade; }

/* 금융상품 */
.financeBox { }
.financeBox dt { margin-top: 20px; border-top: 1px solid #ccc; padding: 6px 10px; background: #666; color: #ffffff; position: relative;   }
.financeBox dt:first-child { margin-top: 0; border-top: 0; }
.financeBox dd { position: relative; }
.financeBox dd .selectBox { position: absolute; top: -31px; right: 5px; color: #ffffff; }
/*
.financeBox dd ul { }
.financeBox dd ul li { margin-top: 8px; }
.financeBox dd ul li a { position: relative; background: #fff; box-shadow: 3px 3px 5px #ddd; display: block; width: 100%; box-sizing: border-box; border: 1px solid #fff; height: 40px; }
.financeBox dd ul li.on a { border: 1px solid #00aade;}
.financeBox dd ul li a:hover { text-decoration: none; background: #e8e8e8; }
*/
.financeBox dd ul { }
.financeBox dd ul li { margin-top: 8px; border: 1px solid #fff; box-shadow: 3px 3px 5px #ddd; position: relative; background: #fff; }
.financeBox dd ul li > a { display: block; width: 100%; box-sizing: border-box; min-height: 40px; }
.financeBox dd ul li .more { margin: 0 10px 0 40px; border-top: 1px dashed #ccc; padding : 10px 0; }
.financeBox dd ul li .more .button { text-align: center; display: none;}
.financeBox dd ul li.on .more .button { display: block; margin-top: 10px; }
.financeBox dd ul li .more .button button, .financeBox dd ul li .more .button a { padding: 3px 10px; color: #fff; margin-top: 5px; background: #999999; display: inline-block; border-radius: 15px; }
.financeBox dd ul li .more .button button:hover, .financeBox dd ul li .more .button a:hover { background: #666666; text-decoration: none; }
.financeBox dd ul li .detail { border-bottom: 1px dashed #ccc; padding-bottom : 10px; margin-bottom: 10px; } 
.financeBox dd ul li .more .desc {word-wrap: break-word; }

.financeBox dd ul li.on { border: 1px solid #00aade;}
.financeBox dd ul li.on:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 15px solid transparent; border-top: 15px solid #00aade; }

.financeBox dd ul li > a:hover { text-decoration: none; background: #e8e8e8; }


.financeBox .special { margin-top: 10px; }
.financeBox .special > div:not(:first-child) { margin-top: 8px; }
.financeBox .special > div { border: 1px solid #fff; background: #fff; position: relative;  box-shadow: 3px 3px 5px #ddd; display: block; width: 100%;}
.financeBox .special .top { text-align: right; padding: 10px; font-weight: bold;}
.financeBox .special .top .name { position: absolute; top: 9px; left: 160px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;  }
.financeBox .special .logo { position: absolute; top: 3px; left: 30px; }
.financeBox .special .logo img{ width: 120px; }
.financeBox .special .etc { text-align: center; padding-bottom: 5px; margin-top: -3px; color: #999; font-size: 13px;  }
.financeBox .special .etc > span { display: inline-block; font-size: 13px;  }
.financeBox .special .top .cashback { color: #ef3810; }
.financeBox .special .top .pmt {  color: #00aade; margin-left: 20px; }
.financeBox .special .top .price { margin-left: 5px; }
.financeBox .special .more { margin: 0 10px 0 40px; border-top: 1px dashed #ccc; padding : 10px 0; }
.financeBox .special .more .button { text-align: center; display: none;}
.financeBox .special > div.on .more .button { display: block; margin-top: 10px; }
.financeBox .special .more .button button { padding: 3px 10px; color: #fff; background: #999999; display: inline-block; border-radius: 15px; }
.financeBox .special .more .button button:hover { background: #666666; text-decoration: none; }
.financeBox .special .detail { border-bottom: 1px dashed #ccc; padding-bottom : 10px; margin-bottom: 10px; } 
.financeBox .special > div.on { border: 1px solid #00aade; }

.financeBox .special > div a:hover { text-decoration: none; background: #e8e8e8; }
.financeBox .special > div a:before { content: ""; position: absolute; width: 28px; height: 100%; top: 0px; left: 0px; background: #ef3810 }
.financeBox .special > div a:after { content: "EVENT"; letter-spacing: 1px; position: absolute; width: 50px; height: 20px; top: 22px; left: -11px; font-weight: bold; color: #fff; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.financeBox .subIndex { display: none; }
.financeBox .index { height: 30px; position: relative;}
.financeBox .index .price { position: absolute; top: 9px; right: 20px; color: #00aade;  font-size: 13px; }
.financeBox .index .gap { position: absolute; top: 9px; right: 31%;  color: #ef3810; font-size: 13px; }
.financeBox .index .rate { position: absolute; top: 9px; right: 20%; font-size: 13px;}
.financeBox .index .event { position: absolute; top: 9px; right: 35%; color: #ef3810; font-size: 13px;}
.financeBox .index .info { position: absolute; top: 9px; right: 40%; font-size: 13px;}
.financeBox .index.fince .rate { right: 43%;}
.financeBox .index.fince .info { right: 16%;}
.financeBox .index.fince .event { right: 30%;}


.financeBox dd ul li .rank { position: absolute; top: 0px; left: 0; width: 28px; height: 100%; background: #d1d1d1;  color: #fff; font-size: 20px; text-align: center; line-height: 38px; font-family: Century Gothic,arial,tahoma; }
.financeBox dd ul li .logo { position: absolute; top: 3px; left: 40px; }
.financeBox dd ul li .logo img{ width: 100px; }
.financeBox dd ul li .capital { position: absolute; top: 4px; left: 40px; color: #666; font-weight: bold; padding-left: 35px; height: 30px; line-height: 30px;}
.financeBox dd ul li .capital em {position: absolute; top: 0; left: 0; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; font-style: normal; background: #d0d0d0; border-radius: 15px; font-weight: bold; font-size: 20px; color: #fff;  }
.financeBox dd ul li.best .capital em { background: #00aade; }
.financeBox dd ul li .name { position: absolute; top: 9px; left: 160px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.financeBox dd ul li .gap { position: absolute; top: 9px; right: 35%;  color: #ef3810; font-size: 13px; }
.financeBox dd ul li .rate { position: absolute; top: 9px; right: 20%;}
.financeBox dd ul li .price { position: absolute; top: 9px; right: 10px; color: #00aade;}
.financeBox dd ul li .price .unit {margin-left: 3px;}
.financeBox dd ul li .info { position: absolute; top: 9px; right: 40%; font-size: 13px; color: #666;}
.financeBox dd ul li .info span { font-size: 13px;}
.financeBox dd ul li .event { position: absolute; top: 9px; right: 30%; font-size: 13px; color: #666;}
.financeBox dd ul li .event span { font-size: 13px; color: #ef3810; }
.financeBox dd ul.fince li .gap { display: none; }
.financeBox dd ul.fince li .rate { right: 43%;}
.financeBox dd ul.fince li .info { right: 15%;}
.financeBox dd ul.fince li .event { right: 29%;}
.financeBox dd ul.fince li .evg { font-size: 12px; color: #666; }
.financeBox dd ul.cash li .gap { display: none; }
.financeBox dd div.capital { margin: 10px 0; }
.financeBox dd div.capital div { color: #666; font-weight: bold; padding-bottom: 8px; }
.financeBox dd div.capital img {width: 120px; }

.financeBox dd ul li.best a:after { content: ""; position: absolute; width: 32px; height: 18px; top: 0px; left: 10px; background: url(/images/pattern-24.png) -13px -76px no-repeat; background-size: 250px 250px; }


/* 견적 */
.estimateBox { display: none; min-height: 500px;}
.estimateBox.open { display: block; }
.estimateBox .bodyCont { position: relative;}
.estimateBox .bodyCont:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.estimateBox .head { display: none; }
.estimateBox .tab {position: absolute;  width: 100%; height: 60px; top:0; left: 0;}
.estimateBox .tab .inner { margin-right:33%;}
.estimateBox .slide {position: relative;  background: #fafafa;  margin-right:33%; min-height: 700px; padding-top: 60px; padding-bottom: 60px; }
.estimateBox .slide .frame { width:100%; margin:0 auto; position:relative; overflow:hidden; }
.estimateBox .result { position: absolute; top: 0; right: 0; width: 32.5%; z-index: 50;}
.estimateBox .result .frame { background: #fbf8f3; z-index: 50;}

.estimateBox .tab li { position: relative; float: left; width: 17%; }
.estimateBox .tab li.no1 { width:14.5%;}
.estimateBox .tab li.last { width:17.5%;}
.estimateBox .tab.ct5 li { width: 20%; }
.estimateBox .tab.ct5 li.no1 { width:18%;}
.estimateBox .tab.ct5 li.last { width:22%;}
.estimateBox .tab.ct4 li {  width: 25%; }
.estimateBox .tab.ct4 li.no1 { width:23%;}
.estimateBox .tab.ct4 li.last { width:27%;}

.estimateBox .tab li button {display: block; width: 100%; padding-left: 20px; height: 60px; font-size: 16px; background: #e5e5e5; font-weight: bold; box-shadow: 2px 0 0 0 #fff; }
.estimateBox .tab li button:before { content: ""; position: absolute; right: -22px; top: 50%; margin-top: -30px; width:0px; height:0;  border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 20px solid #ffffff; }
.estimateBox .tab li button:after { content: ""; position: absolute; right: -20px; top: 50%; margin-top: -30px; width:0; height:0;  border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 20px solid #e5e5e5; }
.estimateBox .tab li.on button {background: #00aade; border-right: 0; color: #fff; }
.estimateBox .tab li.on button:after { content: ""; position: absolute; right: -20px; top: 50%; margin-top: -30px; width:0; height:0;  border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 20px solid #00aade; }
.estimateBox .tab li.no1 button{ padding-left:10px;}
.estimateBox .tab li.last button{ box-shadow: 0;}
.estimateBox .tab li.no1 { z-index: 20; }
.estimateBox .tab li.no2 { z-index: 19; }
.estimateBox .tab li.no3 { z-index: 18; }
.estimateBox .tab li.no4 { z-index: 17; }
.estimateBox .tab li.no5 { z-index: 16; }
.estimateBox .tab li.last { z-index: 15; }
.estimateBox .tab li.last button:before, .estimateBox .tab li.last button:after { display: none;}
.estimateBox .tab ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

.estimateBox .slide .frame article {padding: 20px; }
.estimateBox .slide .frame > ul { width:99999px; position:absolute; top:0; left:0; overflow:hidden; }
.estimateBox .slide .frame > ul > li { float:left; width:100%; min-height: 300px;}
.estimateBox .slide .frame > ul > li > .title { font-weight:bold; border-bottom: 1px solid #ccc; margin-top: 20px; padding-bottom: 5px; }
.estimateBox .slide .frame > ul > li > .title:first-child { margin-top: 0; }
.estimateBox .slide .buttonBox { text-align:  center;  position: absolute; bottom:0; left: 0; width: 100%;}
.estimateBox .slide .buttonBox .inner {  background: #e5e5e5; height: 34px; padding: 3px; }
.estimateBox .slide .paging { height: 35px; display: inline-block; }
.estimateBox .slide .paging .btn_page { display:inline-block; width:16px; height: 16px; margin:5px; font-size:0px; line-height:0; text-indent:-9999px; background: #f5f5f5; border: 1px solid #ccc; border-radius: 8px;  }
.estimateBox .slide .paging .btn_page.on { background: #00aade; }
.estimateBox .slide .buttonBox button.close { display: none; }
.estimateBox .slide .buttonBox button.prev { border: 0; padding:0; width: 35px; height: 35px; font-size:0px; line-height:0; text-indent:-9999px; background: url(/images/icon-27.png) -150px -105px no-repeat; background-size: 300px 200px; }
.estimateBox .slide .buttonBox button.next { border: 0; padding:0; width: 35px; height: 35px; font-size:0px; line-height:0; text-indent:-9999px; background: url(/images/icon-27.png) -105px -105px no-repeat; background-size: 300px 200px;  }

.estimateBox .slide .buttonBoxF button { position: fixed; top: 50%; margin-top: -20px; left: 50%; }
.estimateBox .slide .buttonBoxF button.close { display: none; }
.estimateBox .slide .buttonBoxF button.prev { margin-left: -530px; border: 0; padding:0; width: 50px; height: 80px; font-size:0px; line-height:0; text-indent:-9999px; background: url(/images/arrow-21.png) -60px -50px no-repeat; background-size: 300px 300px; }
.estimateBox .slide .buttonBoxF button.next { margin-left: 130px;  border: 0; padding:0; width: 50px; height: 80px; font-size:0px; line-height:0; text-indent:-9999px; background: url(/images/arrow-21.png) -193px -50px no-repeat; background-size: 300px 300px; }
.estimateBox .slide .buttonBoxF button.prev:hover {background: url(/images/arrow-21.png) -60px -180px no-repeat; background-size: 300px 300px; }
.estimateBox .slide .buttonBoxF button.next:hover {background: url(/images/arrow-21.png) -193px -180px no-repeat; background-size: 300px 300px; }
.estimateBox .slide .buttonBoxF button.next.on  { border: 1px solid #ef3810; }

.estimateBox .slide .title { font-size:0px; line-height:0; text-indent:-9999px; }
.estimateBox .slide .subTitle { margin-bottom: 15px; border-top: 1px solid #ccc; padding: 8px 10px; background: #666; color: #ffffff;  }
.estimateBox .slide .desc { font-size: 13px; color: #999; padding: 0 20px;}
.estimateBox .slide .subTitle a { color: #fff; font-size: 12px; float: right; }
.estimateBox .slide .guide { font-size: 13px; color: #00aade; padding-top: 5px;}

.estimateBox .result .openSearch { position: absolute; right: 0; top: 0; background: #00aade; color: #fff; font-weight: bold; padding: 2px 5px }

.estimateBox .result .top .title { font-size: 17px; padding: 5px 0;  margin-left: 50px; }
.estimateBox .result .top .logo { position: absolute; top: 2px; left: 0; width: 50px; }
.estimateBox .result .top .logo img { width: 100%; display: block; }
.estimateBox .result .top .car { text-align: center;}
.estimateBox .result .top .car img { width: 90%; max-width: 300px;}
.estimateBox .result .top .button { text-align: center; padding-bottom: 5px;}
.estimateBox .result .top .button a, .estimateBox .result .top .button button { padding: 3px 10px; color: #fff; background: #999999; border-radius: 15px;  }
.estimateBox .result .top .button a:hover, .estimateBox .result .top .button button:hover { background: #666666; text-decoration: none; }


.estimateBox .result .summary {}
.estimateBox .result .summary .list { padding-right:10px; position: relative; }
/* 납기예상 */
.estimateBox .result .summary .list .salesterm{ position: relative; border-top:1px solid #f56a07; border-bottom:1px solid #f56a07; padding: 15px; background: #fff5cb;}
.estimateBox .result .summary .list .salesterm .fastship { position: absolute; top:10px; right:15px; background: #f56a07; border-radius:5px;}
.estimateBox .result .summary .list .salesterm .fastship a { color:#fff; padding:3px 5px; line-height: 28px; text-decoration: none;}
.estimateBox .result .summary .list .salesterm .desc { margin-left: 20px; padding: 5px 0; min-height: 26px; word-break:keep-all;}
.estimateBox .result .summary .list .salesterm .term .ref { display: block; }
.estimateBox .result .summary .list .salesterm .term.pocus { color: #f56a07; font-weight: bold;}
.estimateBox .result .summary .list .salesterm .term::before { content:"• ";}

.estimateBox .result .summary .list:before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 50px; background: #f7f0e4; }
.estimateBox .result .summary .list > li { border-top: 1px solid #ccc; position: relative; padding-left: 10px; }
.estimateBox .result .summary .list > li.off { display: none; }
.estimateBox .result .summary .list > li .title {width: 40px; position: absolute; top: 0; left: 5px; }
.estimateBox .result .summary .list > li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.estimateBox .result .summary .list.no2 > li:first-child { border-top: 0 }
.estimateBox .result .summary .list .price { float: right; }
.estimateBox .result .summary .list .detail span { display: inline-block; }
.estimateBox .result .summary .list .viewFince { padding-bottom: 40px; }
.estimateBox .result .summary .list .title button, .estimateBox .result .summary .list .title span { border: 0; background: transparent; display: block; width: 100%; padding: 5px 0px; text-align: center;}
.estimateBox .result .summary .list .contents { margin-left: 50px; padding: 5px 0; min-height: 26px;  }
.estimateBox .result .summary .list .contents .sum { text-align: right; }
.estimateBox .result .summary .list .contents .goods  { position: relative; font-weight: bold; color: #00aade; padding: 5px 0 5px 100px;  font-size: 15px; }
.estimateBox .result .summary .list .contents .goods  img { position: absolute; top: 0px; left: -10px; width: 100px;  }
.estimateBox .result .summary .list .contents .goods  .capital { position: absolute; top: 0px; left: 0px;  color: #666; font-weight: bold; padding-left: 35px; height: 30px; line-height: 30px;}
.estimateBox .result .summary .list .contents .goods  .capital em {position: absolute; top: 0; left: 0; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; font-style: normal; background: #d0d0d0; border-radius: 15px; font-weight: bold; font-size: 20px; color: #fff;  }


.estimateBox .result .summary .list .emphasis { color: #ef3810; }
.estimateBox .result .summary .list .pmt { border-top: 1px solid #ccc; margin-top: 5px; padding-top: 5px; font-weigth: bold; color: #00aade; font-size: 15px;  }
.estimateBox .result .summary .list .pmt span { font-size: 15px; }
.estimateBox .result .summary .list .payment { color: #00aade; }
.estimateBox .result .summary .list .other { margin-top: 10px;}

.estimateBox .contents .color li { position: relative;  }
.estimateBox .contents .color .name { padding-left: 25px; }
.estimateBox .contents .color .price { color:#00aade }
.estimateBox .contents .color .colorChip { position:absolute; top:0; left:0; border: 1px solid #ccc; }
.estimateBox .contents .color .colorChip .colorMain { position:relative; display:inline-block; width:20px; height:20px;}
.estimateBox .contents .color .colorChip .colorSub { position:absolute; display:inline-block; width:20px; height:10px; left:0; bottom: 0; }

.estimateBox .contents .option > li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.estimateBox .contents .discount > li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.estimateBox .contents .memo { float: left; }

.estimateBox .contents .btnInsure { float: right; padding: 3px 8px; color: #fff; background: #00aade; border-radius: 15px; }
.estimateBox .contents .btnInsure:hover { background: #666666; text-decoration: none; }
.estimateBox .contents .btnInsure.off { display: none; }
.estimateBox .contents .btnSchedule { float: right;  padding: 3px 10px; color: #fff; background: #999999; display: inline-block; border-radius: 15px;}
.estimateBox .contents .btnSchedule:hover { background: #666666; text-decoration: none; }


.estimateBox .contents .btnDetail { float: right; padding: 3px 5px; color: #fff; background: #999999; }
.estimateBox .contents .btnDetail:hover { background: #666666; text-decoration: none; }

.estimateBox .result .sum { color: #00aade; font-weight: bold; }
.estimateBox .result .total { text-align: right; background: #666666; color: #fff; padding: 5px 10px; position: relative; }
.estimateBox .result .total.off { display: none; }
.estimateBox .result .total.grand { background: #00aade;}
.estimateBox .result .total span { font-size: 20px; }
.estimateBox .result .total .memo { font-size: 13px; position: absolute; top: 2px; left: 5px;}
.estimateBox .result .total:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 

.estimateBox .result .openResult {position: absolute; right: 5px; bottom: 85px; background: #999999; height: 28px; color: #fff; width: 100px; border-radius: 15px; }
.estimateBox .result .openResult:hover { background: #666666;  }
.estimateBox .result .openResult .text {margin-right: 5px;}
.estimateBox .result .openResult .arrow { display: none; }
.estimateBox .result .openRequest {position: absolute; right: 110px; bottom: 85px; background: #00aade; height: 28px; color: #fff; width: 90px; border-radius: 15px; }
.estimateBox .result .openRequest:hover { background: #666666;  }


.estimateBox .trimList { width: 101%; margin-left: -1%; margin-bottom: 20px;}
.estimateBox .trimList li { float: left; width: 32.33%; margin-left: 1%; margin-bottom: 1%; }
.estimateBox .colorList { width: 101%; margin-left: -1%}
.estimateBox .colorList li { float: left; width: 32.33%; margin-left: 1%; margin-bottom: 1%; }

@media screen and (max-width: 1100px) {
	.estimateBox .slide .buttonBoxF button.prev { left: 2px; margin-left: 0;}
	.estimateBox .slide .buttonBoxF button.next { left: 0; margin-left: 61.8%; }
}
@media screen and (max-width: 1000px) {
	.estimateBox .slide .buttonBoxF button.next { left: 0; margin-left: 614px; }
}

@media screen and (max-width: 800px) {
	
	.estimateBox .body { padding: 0;}
	.estimateBox .tab { height: 50px; margin-right: 0;}
	.estimateBox .tab .inner { margin-right: 0;}
	.estimateBox .slide { margin-right:0; padding-top: 50px; padding-bottom: 50px; }
	.estimateBox .result { width: 60%; top: auto; bottom: 0;}
	.estimateBox .result .frame { display: none; }
	.estimateBox .result.open .frame { border-top: 2px solid #2a2829; }
	.estimateBox .result.open .frame  { display: block; }
	
	.estimateBox .tab.fixed  { z-index: 110; position: fixed; top: 0; left: 0; width: 100%; }
	.estimateBox .slide .buttonBox.fixed  { position: fixed; bottom: 0; }
	.estimateBox .slide .buttonBoxF button.next { left: auto; margin-left: 0; right: 0; }
	.estimateBox .result.fixed  { position: fixed; bottom: 0; top: auto;}
	
	.estimateBox .result .summary .list .viewFince { padding-bottom: 5px; }
	
	.estimateBox .result .total.take { display: none;   }
	.estimateBox .result .total.grand { padding-right: 40%; position: relative; }
	.estimateBox .slide .buttonBox .inner {margin-right: 60%; }
	.estimateBox .result .openResult { display: block; bottom: 5px; right: 5px; height: 30px; padding: 0 15px; background: #2a2829; width: auto; }
	.estimateBox .result .openResult .arrow { display: inline-block; }
	.estimateBox .result .openResult .view { display: none; }
	.estimateBox .result .openRequest { display: none; }
	
	.estimateBox .tab li button {height: 50px; }
	.estimateBox .tab li button:before { content: ""; position: absolute; right: -22px; top: 50%; margin-top: -25px; width:0px; height:0;  border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 20px solid #ffffff; }
	.estimateBox .tab li button:after { content: ""; position: absolute; right: -20px; top: 50%; margin-top: -25px; width:0; height:0;  border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 20px solid #e5e5e5; }
	.estimateBox .tab li.on button {background: #00aade; border-right: 0; color: #fff; }
	.estimateBox .tab li.on button:after { content: ""; position: absolute; right: -20px; top: 50%; margin-top: -25px; width:0; height:0;  border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 20px solid #00aade; }
}



@media screen and (max-width: 640px) {
	.estimateBox .slide { padding-top: 0; padding-bottom: 87px; }
	.estimateBox .slide .buttonBox {bottom: 47px;  }
	.estimateBox .slide .buttonBox.fixed  {bottom: 47px;  }
	.estimateBox .slide .buttonBox .inner {margin-right: 90px; background: rgba( 255,255,255,0.7); }
	.estimateBox .slide .buttonBoxF { display: none; }
	.estimateBox .result { width: 100%; }
	.estimateBox .result .frame { width: 300px; position: absolute; right: 0; bottom: 45px; }
	.estimateBox .result .car { display: none;  }
	.estimateBox .result .total.grand { padding-right: 70px; background: rgba( 0,170,222,0.8); height: 37px;}
	
	.estimateBox .result .openResult { bottom: 50px; background: rgba( 0,0,0,0.7);}
	
	.estimateBox .head { display: block; height: 100px; background: #e5e5e5; padding: 10px;}
	.estimateBox .head img { width: 200px; }
	.estimateBox .head .button { text-align: center; padding-bottom: 5px; position: absolute; top: 10px; left: 0; width: 100%; }
	.estimateBox .head .button a, .estimateBox .head .button button { display: inline-block; padding: 3px 10px; color: #fff; background: #999999; border-radius: 15px; }
	.estimateBox .head .button a:hover, .estimateBox .head .button button:hover { background: #666666; text-decoration: none; }
	
	.estimateBox .tab {width: 220px; height: 65px; top:45px; left: auto; right: 15px;}
	.estimateBox .tab.ct4  {width: 150px;}
	
	
	.estimateBox .tab ul { text-align: right; }
	.estimateBox .tab li {width: 68px; display: inline-block; margin: 2px 0; float: none;}
	.estimateBox .tab.ct5 li, .estimateBox .tab.ct4 li {width: 68px;}
	.estimateBox .tab li.no1, .estimateBox .tab li.last, .estimateBox .tab.ct5 li.no1, .estimateBox .tab.ct5 li.last , .estimateBox .tab.ct4 li.no1, .estimateBox .tab.ct4 li.last {width: 68px; }
	.estimateBox .tab li button {box-shadow: none; padding: 0; text-aling: center; font-size: 14px; font-weight: normal; height: 27px; background: rgba(255,255,255,0.9); }
	.estimateBox .tab li button:before, .estimateBox .tab li button:after { display: none; }
	.estimateBox .tab li.no1 button {padding: 0; }
	.estimateBox .tab li.on button { background: rgba(0,170,222,0.9); }
	
	.estimateBox .trimList { width: 102%; margin-left: -2%; margin-bottom: 20px;}
	.estimateBox .trimList li { float: left; width: 48%; margin-left: 2%; margin-bottom: 2%; }
	.estimateBox .colorList { width: 102%; margin-left: -2%}
	.estimateBox .colorList li { float: left; width: 48%; margin-left: 2%; margin-bottom: 2%; }
	
	.financeBox .special > div a {padding-top: 30px; }
	
	.financeBox .index, .financeBox .mainIndex { display: none; }
	.financeBox .subIndex { display: inline-block; padding-right: 2px; }
	.financeBox dd .selectBox { position: relative;; top: 0; right: auto; text-align: right; background: #e5e5e5; color: #000; padding: 5px;}
	.financeBox dd ul li > a { height: 86px;}
	.financeBox dd ul.cash li > a { height: 60px;}
	.financeBox dd ul li .rate { right: 10px; }
	.financeBox dd ul li .price { top: 32px; }
	.financeBox dd ul li .gap { top: 34px; right: 40%; }
	.financeBox dd ul li .rank { height: 84px; line-height: 84px; }
	.financeBox dd ul.cash li .rank { height: 58px; line-height: 58px; }
	.financeBox dd ul li .logo { top: 12px;  }
	.financeBox dd ul.fince li .gap { right: 40%; }
	.financeBox dd ul.fince li .event { top: 34px; right: 32%; }
	.financeBox dd ul.fince li .rate { right: 10px; }
	.financeBox dd ul.fince li .rate.side { top: 60px; font-size: 13px; color: #666; }
	.financeBox dd ul.fince li .rate.side span{ font-size: 13px; }
	.financeBox dd ul li .info {  top: 60px; right: auto;  left: 40px; }
	.financeBox dd ul.fince li .info { right: auto;}
	.financeBox dd ul.cash li .event { top: 33px;}
	
	/*
	.financeBox dd ul { width: 102%; margin-left: -2%}
	.financeBox dd ul li { float: left; width: 48%; margin-left: 2%; margin-top: 2%; }
	.financeBox dd .selectBox { position: relative;; top: 0; right: auto; text-align: right; background: #e5e5e5; color: #000; padding: 5px 20px;}
	
.financeBox dd ul li .info { display: block; font-size: 13px; padding: 5px 10px ; margin-top: 5px; color: #666; border-top: 1px solid #f0f0f0; position: relative;}
.financeBox dd ul li .info .sum { position: absolute; top: 5px; right: 10px; }

.financeBox .subIndex { display: none; }
.financeBox .index { height: 30px; position: relative;}
.financeBox .index .price { position: absolute; top: 9px; right: 20px; color: #00aade;  font-size: 13px; }
.financeBox .index .gap { position: absolute; top: 9px; right: 35%;  color: #ef3810; font-size: 13px; }
.financeBox .index .rate { position: absolute; top: 9px; right: 20%; font-size: 13px;}
.financeBox .index .info { position: absolute; top: 9px; right: 40%; font-size: 13px;}
.financeBox .index.fince .gap { right: 27%;}
.financeBox .index.fince .rate { right: 16%;}

.financeBox dd ul li .rank { position: absolute; top: 0px; left: 0; width: 28px; height: 38px; background: #d1d1d1;  color: #fff; font-size: 20px; text-align: center; line-height: 38px; font-family: Century Gothic,arial,tahoma; }
.financeBox dd ul li .logo { position: absolute; top: 3px; left: 40px; }
.financeBox dd ul li .logo img{ width: 100px; }
.financeBox dd ul li .name { position: absolute; top: 9px; left: 160px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.financeBox dd ul li .gap { position: absolute; top: 9px; right: 35%;  color: #ef3810; font-size: 13px; }
.financeBox dd ul li .rate { position: absolute; top: 9px; right: 20%;}
.financeBox dd ul li .price { position: absolute; top: 9px; right: 10px; color: #00aade;}
.financeBox dd ul li .price .unit {margin-left: 3px;}
.financeBox dd ul li .info { position: absolute; top: 9px; right: 40%; font-size: 13px; color: #666;}
.financeBox dd ul li .info .sum { font-size: 13px;}
.financeBox dd ul.fince li .gap { right: 27%;}
.financeBox dd ul.fince li .rate { right: 16%;}
.financeBox dd ul li.best a:after { content: ""; position: absolute; width: 32px; height: 18px; top: 0px; left: 10px; background: url(/images/pattern-21.png) -13px -76px no-repeat; background-size: 200px 200px; }
	*/
}

@media screen and (max-width: 400px) {
	.financeBox dd ul li .logo {  left: 35px; }
	.financeBox dd ul li .name { left: 140px; display: block; width: 30%;}
	/*
	.financeBox dd ul { width: 100%; margin-left: 0%}
	.financeBox dd ul li { float: none; width: auto; margin-left: 0%; margin-top: 2%; }
	*/
}
/* 견적서 보기 */
.estimateViewDetail {}
.estimateViewDetail .unit {padding-left: 3px; }
.estimateViewDetail h3 { font-size: 20px; border-bottom: 3px solid #5a5a5a; padding-bottom: 13px; position: relative; padding-left: 50%; }
/*.estimateViewDetail h3.cash, .estimateViewDetail h3.back,.estimateViewDetail h3.fince { padding-left: 0; text-align:center; } */
.estimateViewDetail h3 img {position: absolute; top: -8px; right: 50%;width: 150px; display: inline-block;}
.estimateViewDetail .work {text-align: right; margin-top: -33px; position: relative;}
.estimateViewDetail .work .left {float: left; margin-left: 0; margin-right: 4px; }
.estimateViewDetail .work > button, .estimateViewDetail .work > a { padding: 3px 10px; color: #fff; background: #999999; display: inline-block; margin-left: 4px; border-radius: 15px; }
.estimateViewDetail .work > button:hover, .estimateViewDetail .work > a:hover { background: #666666; text-decoration: none; }
.estimateViewDetail .top { margin: 20px 0; }
.estimateViewDetail .top .car {float: left; width: 40%; position: relative; padding-top: 10px;}
.estimateViewDetail .top .list {float: left; width: 60%;}
.estimateViewDetail .top .list li { position: relative; border-bottom: 1px solid #e6e6e6; }
.estimateViewDetail .top .car .logo { position: absolute; top: -8px; left: 0; width: 60px;}
.estimateViewDetail .top .car .text { position: absolute; top: 0px; left: 60px; }
.estimateViewDetail .top .car .model { width: 90%;}
.estimateViewDetail .top .list .name1 { font-weight: bold; font-size: 16px; border: 0; }
.estimateViewDetail .top .list .name2 { font-weight: bold; padding: 10px 0 10px 8px; }
.estimateViewDetail .top .list .name2:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.estimateViewDetail .top .list .name2 .lineup, .estimateViewDetail .top .list .name2 .trim  {  color: #00aade; }
.estimateViewDetail .top .list .title { width: 40px; position: absolute; top: 5px; left: 5px;}
.estimateViewDetail .top .list .contents { margin-left: 50px; padding: 5px 0; min-height: 26px; }
.estimateViewDetail .top .list .price { float: right; font-weight: normal; }
.estimateViewDetail .top .list .emphasis { color: #ef3810 }
.estimateViewDetail .top .color .contents div { position: relative;  }
.estimateViewDetail .top .color .name { padding-left: 25px; }
.estimateViewDetail .top .color .colorChip { position:absolute; top:0; left:0; border: 1px solid #ccc; }
.estimateViewDetail .top .color .colorChip .colorMain { position:relative; display:inline-block; width:20px; height:20px;}
.estimateViewDetail .top .color .colorChip .colorSub { position:absolute; display:inline-block; width:20px; height:10px; left:0; bottom: 0; }
.estimateViewDetail .top .option  .contents div:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.estimateViewDetail .top .discount  .contents div:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.estimateViewDetail .top .cost { text-align: right; padding-right: 10px; }
.estimateViewDetail .top .cost span { font-weight: bold; font-size: 24px; display: inline-block; position: relative; padding-right: 20px; color: #ef3810; letter-spacing: -1px; line-height: 2; }
.estimateViewDetail .top .cost span:after {content: "원"; font-size: 16px; position: absolute; top: 18px; right: 0;  line-height: 1.2; }
.estimateViewDetail .top .cost span:before {content: "합계"; font-size: 16px; position: absolute; top: 18px; left: -40px;  line-height: 1.2; color: #999; }



.estimateViewDetail .top:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 

.estimateViewDetail .result { width: 102%; margin-left: -2%; }
.estimateViewDetail .result ul { float: left; width: 48%; margin-left: 2%; border-top: 1px solid #00aade;}
.estimateViewDetail .result > div { float: left; width: 48%; margin-left: 2%; }
.estimateViewDetail .result ul li { border-bottom: 1px solid #e6e6e6; position: relative; }
.estimateViewDetail .result .title { float: left; width: 31%; background: #f5f5f5; padding: 7px 2%; text-align: center; }
.estimateViewDetail .result .contents { float: left; width: 61%;  padding: 7px 2%; position: relative;}
.estimateViewDetail .result .contents .price { float: right;}

.estimateViewDetail .contents .btnInsure { position: absolute; top: 4px; right: 0;  padding: 3px 10px; color: #fff; background: #00aade; display: inline-block;  border-radius: 20px; }
.estimateViewDetail .contents .btnInsure:hover { background: #666666; text-decoration: none; }
.estimateViewDetail .contents .btnEvent { position: absolute; top: 4px; left: 5px;  padding: 0 6px; font-size: 13px; line-height: 26px; color: #fff; background: #00aade; display: inline-block; border-radius: 20px; }
.estimateViewDetail .contents .btnEvent:hover { background: #666666; text-decoration: none; }
.estimateViewDetail .contents .btnSchedule {  position: absolute; top: 4px; left: 5px;   padding: 0 6px; font-size: 13px; line-height: 26px; color: #fff; background: #aaa; display: inline-block; border-radius: 20px; }
.estimateViewDetail .contents .btnSchedule:hover { background: #666666; text-decoration: none; }

.estimateViewDetail .result .sum .title { background: #e8e8e8; }
.estimateViewDetail .result .sum .contents { background: #fbf8f3; }
.estimateViewDetail .result .sum .price { color: #00aade; font-weight: bold; }
.estimateViewDetail .result .comment div { padding: 7px 10px; color: #666; }
.estimateViewDetail .result .emphasis { color: #ef3810; }

.estimateViewDetail .result ul li:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.estimateViewDetail .result:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 

.estimateViewDetail .goods  { margin-top: 20px; position: relative; font-weight: bold; color: #00aade; padding: 5px 0 5px 130px;  font-size: 15px; }
.estimateViewDetail .goods  img { position: absolute; top: 0px; left: 0; width: 100px;  }
.estimateViewDetail .goods .capital { position: absolute; top: 0px; left: 10px;  color: #666; font-weight: bold; padding-left: 35px; height: 30px; line-height: 30px;}
.estimateViewDetail .goods .capital em {position: absolute; top: 0; left: 0; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; font-style: normal; background: #d0d0d0; border-radius: 15px; font-weight: bold; font-size: 20px; color: #fff;  }


.estimateViewDetail .summary { margin-top: 20px; border-bottom: 2px solid #333; border-top: 1px solid #e6e6e6; }
.estimateViewDetail .summary .title { float: left; width: 15%; background: #e8e8e8; padding: 8px 1%; text-align: center; font-size: 16px; }
.estimateViewDetail .summary .contents { float: left; width: 81%; background: #fbf8f3;  padding: 8px 1%; }
.estimateViewDetail .summary .contents .price { float: right; color: #00aade; font-weight: bold; font-size: 16px;}
.estimateViewDetail .summary:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 

.estimateViewDetail .summaryBox { width: 102%; margin-left: -2%; }
.estimateViewDetail .summaryBox > div { float: left; width: 48%; margin-left: 2%; }
.estimateViewDetail .summaryBox:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.estimateViewDetail .summaryBox .summary .title { width: 31%; padding: 8px 2%;  }
.estimateViewDetail .summaryBox .summary .contents {  width: 61%; padding: 8px 2%; }
.estimateViewDetail .introduce {padding: 0 10px; margin-top: 20px;}
.estimateViewDetail .introduce b {color: #00aade; }
.estimateViewDetail .buyGuide {padding: 0; margin-top: 20px;}
.estimateViewDetail .buyGuide .text { float: left; width: 76%; background: #f5f5f5; padding: 1.5%; min-height: 125px; }
.estimateViewDetail .buyGuide .link { float: left; width: 20%; margin-left: 1%; } 
.estimateViewDetail .buyGuide.noLink .text { float: none; width: auto;}
.estimateViewDetail .buyGuide.noLink .link { display: none; } 
.estimateViewDetail .buyGuide b {color: #00aade; }
.estimateViewDetail .buyGuide .link a, .estimateViewDetail .buyGuide .link button { display: block; width: 100%; padding: 5px;; border: 1px solid #00aade; background: #fff; text-align: center; font-size: 15px; font-weight: bold;  overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.estimateViewDetail .buyGuide .link span {font-size: 15px; font-weight: bold; color: #00aade; }
.estimateViewDetail .buyGuide .link button { background: #00aade; color: #fff; }
.estimateViewDetail .buyGuide .link button:hover {background:#666; }
.estimateViewDetail .buyGuide .link a { margin-top: 4px; }
.estimateViewDetail .buyGuide .link a:hover {  background: #e8e8e8; text-decoration: none; }
.estimateViewDetail .buyGuide:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 

.estimateViewDetail .estmWork { border: 3px solid #5a5a5a; border-top: 0; margin-top: 3px;}
.estimateViewDetail .estmWork h4 { color: #fff; text-align: center; background: #5a5a5a; padding: 8px; font-size: 17px; position: relative;  }
.estimateViewDetail .estmWork h4 button {position: absolute; top: 0; right: 0;  width: 40px; height: 40px; background: url(/images/icon-27.png) -58px -7px no-repeat; background-size: 300px 200px; font-size:0px; line-height:0; text-indent:-9999px;}
.estimateViewDetail .estmWork dl {position: relative; margin: 20px; border-top: 2px solid #5a5a5a; }
.estimateViewDetail .estmWork dl:before { content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100%; background: #f4f4f4; z-index: 1; }
.estimateViewDetail .estmWork dl dt { position: relative; z-index: 10; padding: 10px 0; text-align: center; width: 100px; }
.estimateViewDetail .estmWork dl dd { position: relative; z-index: 10; padding: 8px 0 8px 110px; margin-top: -44px; border-bottom: 1px solid #e7e7e7; }
.estimateViewDetail .estmWork dl dd input[type='text'] {width: 100%; }
.estimateViewDetail .estmWork dl dd a {display: block; color: blue; padding: 2px 0; }
.estimateViewDetail .estmWork .explain { text-align: center; margin: 20px;}
.estimateViewDetail .estmWork .button { margin-top: 0; text-align: center; position: relative; }
.estimateViewDetail .estmWork .button button { background: #00aade; padding: 8px 20px; font-size: 17px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; font-weight: bold; border-radius: 5px;}

@media screen and (max-width: 700px) {
	.estimateViewDetail .buyGuide .text { float: none; width: auto; padding: 10px; min-height: auto; }
	.estimateViewDetail .buyGuide .link { float: none; width: auto; margin-left: 0; margin-top: 10px; width: 101%; margin-left: -1%;} 
	.estimateViewDetail .buyGuide .link button, .estimateViewDetail .buyGuide .link a { float: left; width: 24%; margin: 0 0 0 1%; }
}

@media screen and (max-width: 640px) {
	.estimateViewDetail .top .car { float: none; width: auto; }
	.estimateViewDetail .top .list { float: none; width: auto; }
	.estimateViewDetail .top .car .model { width: 250px; }
	.estimateViewDetail .result { width: auto; margin-left: 0; }
	.estimateViewDetail .result ul { float: none; width: auto; margin-left: 0; }
	.estimateViewDetail .result > div { float: none; width: auto; margin-left: 0; }
	.estimateViewDetail .summary .title { width: 31%; padding: 10px 2% 10px 2%;  }
	.estimateViewDetail .summary .contents {  width: 61%; padding: 15px 2% 5px 2%; position: relative; }
	.estimateViewDetail .summary .contents .memo { position: absolute; top: -2px; font-size: 12px; left: 5px; }
	.estimateViewDetail .summaryBox { width: auto; margin-left: 0; }
	.estimateViewDetail .summaryBox > div { float: none; width: auto; margin-left: 0; }
	.estimateViewDetail .summaryBox .summary .title { padding: 10px 2% 10px 2%; }
	.estimateViewDetail .summaryBox .summary .contents { padding: 10px 2% 10px 2%; }
}

@media screen and (max-width: 600px) {
	.estimateViewDetail .buyGuide .link {width: 101%; margin-left: -1%;} 
	.estimateViewDetail .buyGuide .link button, .estimateViewDetail .buyGuide .link a { width: 48%; margin: 1% 0 0 1%;  }
	.estimateViewDetail .work {margin-top: 3px;}
	.estimateViewDetail .estmWork dl:before { display: none;}
	.estimateViewDetail .estmWork dl dt { display: none; }
	.estimateViewDetail .estmWork dl dd {padding: 8px 10px; margin-top: 0; }
}

/* 할인 조건 */
.discountBox:not(.vehicle) { padding-bottom: 30px; background: #f3f3f3; }
.discountBox.vehicle {margin: 30px 0; }
.discountBox .tab li { float:left; width: 14.28%; }
.discountBox .tab ul:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.discountBox .tab li a { display: block; background: #dfdcd7; padding: 5px; text-align: center; width: 100%; position: relative;}
.discountBox .tab li:not(:last-child) a { border-right: 1px solid #fbf8f3; }
.discountBox .tab li a.on { background: #00aade; color: #fff; font-weight: bold; }
.discountBox .tab li a img { display: inline-block; width: 60px; position: absolute; top:0; left: 0;}
.discountBox .tab li a span { display: inline-block; height: 30px; line-height: 30px; margin-left: 30px; }

.discountBox .list > ul > li { margin-top: 15px; background: #fff; box-shadow: 3px 3px 5px #ddd; border-top: 2px solid #5b5b5b;}
.discountBox .list .model { float:left; width: 28%; position: relative; margin-left: 2%; }
.discountBox:not(.vehicle) .list .discount { float:left; width: 66%; margin: 0 2%;}
.discountBox .list .discount > li:not(:last-child) { border-bottom: 1px dashed #ccc; }
.discountBox .list .discount > li.blank  {padding: 80px 0; text-align: center;  }
.discountBox .list .discount > li.term { position:relative; background: #fff5cb; }
.discountBox.vehicle .list .discount > li.term { border-top: 1px solid #f56a07; border-bottom: 1px solid #f56a07;}
.discountBox .list .discount > li.term .value{  background: #fff5cb;}
.discountBox .list .discount > li.term .fastship { position:absolute; top:7px; right:5px; }
.discountBox .list .discount > li.term .fastship a { color:#fff; background: #f56a07; border-radius:5px; padding:3px 5px; text-decoration: none;}
.discountBox .list .discount .name { float:left; width: 35%; padding: 7px 0; }
.discountBox .list .discount .name a {display: inline-block; position: relative; }
.discountBox .list .discount .name a:after { content:"?"; margin-left: 0; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 20px; display: inline-block; text-align: center; margin-left: 5px;  background: #f3f3f3; }
.discountBox .list .discount .value { float:left; width: 64.5%;  border-left: 1px dashed #ccc; }
.discountBox .list .discount .value li { padding: 7px 0 7px 10px; }
.discountBox .list .discount .value .price { float: right;}
.discountBox .list .discount .value .remark { color: #666; font-size: 13px; }
.discountBox .list .discount .text { clear: both; padding: 5px 10px; margin-left: 35%; background: #fbf8f3; font-size: 13px;}
.discountBox .list .discount .text.off { display: none; }
.discountBox .list > ul > li:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.discountBox .list .discount li:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.discountBox.vehicle .list .discount {border-bottom: 1px solid #ccc; }

.discountBox .list .model .logo { position: absolute; top: 0; left: 0; width: 50px; }
.discountBox .list .model .logo img { width: 100%; }
.discountBox .list .model .title { font-size: 17px; padding: 4px 0 4px 50px ; height: 25px;  overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.discountBox .list .model .car img { width: 86%; margin: 0 7%;  }
.discountBox .list .model .link { padding: 5px;}
.discountBox .list .model .link a {display: block; text-decoration: none; background: rgba(0,0,0,0.4); height: 32px; line-height: 32px; text-align: center; color: #fff; border-radius: 15px; }
.discountBox .list .model .link a:hover { background: #00aade; color:#ffffff; }
.discountBox .list .model .link.cnt2 a {width: 48.5%; float:left; margin-left: 3%; } 
.discountBox .list .model .link.cnt2 a:first-child {margin-left: 0;} 
.discountBox .list .model .link.cnt2:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

.discountBox .info { border-top: 2px solid #5b5b5b; margin-top: 30px; background: #fff}
.discountBox .info li { border-bottom: 1px solid #ccc; }
.discountBox .info li .name {float: left; width: 30%; padding: 8px 1%; font-weight: bold; }
.discountBox .info li .text {float: left; width: 66%; padding: 8px 1%;}
.discountBox .info li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

.discountBox .termTable { display:flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-top:15px;}
.discountBox .termTable table { width:32.3%; margin-bottom: 50px; border-collapse: collapse;}
.discountBox .termTable table td { border: 1px solid #d2d2d2; padding: 7px 5px; text-align: center;}
.discountBox .termTable table tr td:first-child { background: #f2f2f2; }
.discountBox .termTable table.hd tr:first-child th { background: #caddee; font-size: large;}
.discountBox .termTable table.ge tr:first-child th { background: #c0c5cb; font-size: large;}
.discountBox .termTable table.ki tr:first-child th { background: #e8c6c5; font-size: large;}
.discountBox .termTable table tr td div{ word-break:keep-all;}
.discountBox .termTable table tr td div span{ font-size: 13px;}


@media screen and (orientation:landscape) and (max-width: 880px), screen and (orientation:portrait) and (max-width: 800px) {
.discountBox .termTable table { width:100%;}
	
}

@media screen and (max-width: 800px) {
	.discountBox .tab li a { padding:0; }
	.discountBox .tab li a img { position: relative;}
	.discountBox .tab li a span { display: block; margin-left: 0; height: auto; line-height: 1.2; padding-bottom: 5px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
	.discountBox .list .model { width: 28%; position: relative; margin-left: 2%; }
	.discountBox:not(.vehicle) .list .discount {width: 64%; margin: 0 2%;}
	.discountBox .list .discount .name { width: 35%; }
	.discountBox .list .discount .value { width: 64.5%; }
	.discountBox .list .model .title { font-size: 15px; }
	.discountBox .list .discount > li.blank  {padding: 60px 0;}
	.discountBox .list .discount .text { margin-left: 0;}
}
@media screen and (max-width: 640px) {
	.discountBox .list > ul > li { margin-top: 15px; background: #fff; box-shadow: 3px 3px 5px #ddd; border-top: 2px solid #5b5b5b; }
	.discountBox:not(.vehicle) .body { padding: 0;}
	.discountBox:not(.vehicle) .list { padding: 0 15px;}
	.discountBox .list > ul > li { border-top: 0; background: transparent; box-shadow: none;  }
	.discountBox .list .model { float: none; width: auto; margin: 0; padding-top: 25px;  }
	.discountBox:not(.vehicle) .list .discount { float: none; width: auto; border-top : 2px solid #5b5b5b; margin:0; padding: 0 15px; background: #fff; box-shadow: 3px 3px 5px #ddd;}
	.discountBox.vehicle .list .discount {display: block; }
	.discountBox .list .model .title { position: absolute; top: 0; left: 48px; padding-left: 0;}
	.discountBox .list .model .car img { width: 220px; margin: 0 3%;  }
	.discountBox .list .model .link { position: absolute; bottom: 30px; right: 0; padding: 0; }
	.discountBox .list .model .link.cnt2 a { width: auto; float:none; margin-top: 3%; margin-left: 0; padding: 0 15px; margin-top: 5px; } 
	.discountBox .list .discount > li.blank  {padding: 30px 0; }
	.discountBox .info { margin: 30px 15px 0 15px; }
	.discountBox .info li .name {float: none; width: auto; padding: 8px 10px 0 10px;}
	.discountBox .info li .text {float: none; width: auto; padding: 8px 10px; margin-left: 30px;}
}
@media screen and (max-width: 400px) {
	.discountBox .tab li a img { width: 100%; }
	.discountBox .list .discount { padding: 0; }
	.discountBox .list .discount .name { float: none;  width: auto; padding: 7px 10px; font-weight: bold;  }
	.discountBox .list .discount .value { float: none;  width: auto; border: 0; padding-right: 10px; }
}
/* 커뮤니티 공통 */
.who span[class^='sns'] { padding-left: 30px; position: relative; }
.who span[class^='sns']:before { position: absolute; content: ""; top: -1px; left: 2px; width: 23px; height: 23px;}
.who span.sns_carnoon:before { background: url(/images/sns-14.png) -28px -141px no-repeat; background-size: 165px 165px;}
.who span.sns_naver:before { background: url(/images/sns-14.png) -1px -0px no-repeat; background-size: 165px 165px;}
.who span.sns_kakao:before { background: url(/images/sns-14.png) -27px -0px no-repeat; background-size: 165px 165px;}
.who span.sns_facebook:before { background: url(/images/sns-14.png) -54px -0px no-repeat; background-size: 165px 165px;}
.who span.sns_google:before { background: url(/images/sns-14.png) -80px -0px no-repeat; background-size: 165px 165px;}
.who span.we { color: #ef3810; font-weight: bold;}
.who span.me:after { content:"me"; position: absolute; top: -16px; left: 3px; color: #ef3810; font-weight: bold;}
.date.today { font-weight: bold; color: #ef3810;}
.who button.note { width: 23px; height: 23px; line-height: 0; text-indent: -9999px; background:url(/images/icon-27.png) -272px -62px  no-repeat;  background-size: 300px 200px;  }


/* 커뮤니티 리스트  */
.listBox { background: #f4f4f4; padding-bottom: 30px; }
.listBox .body > .top { background: #00aade; padding: 20px; font-size: 20px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; font-weight: bold;  }
.listBox .search { background: #dfdcd7; }
.listBox .search .count { float: left; padding: 9px 15px; background: #63605d; color: #fff; }
.listBox .search .count span { font-weight: bold; }
.listBox .search .select { float: left; padding: 6px 10px; height: 28px; }
.listBox .search .select select { margin-right: 5px; }
.listBox .search .button {float: right; }
.listBox .search .button button { padding: 9px 10px; background: #63605d; color: #fff;  }
.listBox .search .button button:hover { background: #888;}
.listBox .search:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.listBox .estimateViewDetail {border: 1px solid #ef3810; padding: 0 15px;  }
.listBox .estimateViewDetail .top { margin: 0; margin-top: 10px; }
.listBox .estimateViewDetail.off { display: none; }

.listBox .frame { background: #fff; border: 1px solid #e7e7e7; margin-top: 20px; padding: 50px;}

.boardList { border-top: 2px solid #5a5a5a; border-bottom: 1px solid #666; }
.boardList li { position: relative; border-top: 1px solid #ccc; }
.boardList li:first-child { border-top: 0;}
.boardList li.blank { padding: 100px 20px; text-align: center; }
.boardList li a{ display: block; width: 100%; height: 100%; }
.boardList li a:hover {background: #fafafa; }
.boardList li { position: relative; }
.boardList li .who { position: absolute; top: 0; right: 100px; width: 120px; padding: 8px 0; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.boardList li .date { position: absolute; top: 0; right: 0; padding: 8px;}
.boardList li .cmnt { color:#00aade; font-size: 13px; }
.boardList li .cmnt:before{content: "("}
.boardList li .cmnt:after{content: ")"}
.boardList li .subject { display: block; padding: 10px 230px 10px 70px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;  }
.boardList li .theme { padding: 10px; font-weight: bold; position: absolute; top: 0; left: 0; }
.boardList li.accent .theme { color: #ef3810;}
.boardList li .theme:before{ content:"["}
.boardList li .theme:after{ content:"]"}
.boardList li .who { padding: 10px 0;}
.boardList li .date { padding: 10px;}

.boardList.view {margin-top: 30px;}
.boardList li.now { background: #fbf8f3; }
.boardList li.now .subject { font-weight: bold; color: #00aade; }

.boardList li.blind:before { content:"블라인드 처리됨"; color: #ef3810; position: absolute; bottom:0; left: 3px; }
.boardList li.blind { background: #f0f0f0; }
.boardList li.delete:before { content:"삭제된 게시물"; color: #ef3810; position: absolute; bottom:0; left: 3px; }
.boardList li.delete { background: #f0f0f0; }

.shareList { border-top: 2px solid #5a5a5a; border-bottom: 1px solid #666; }
.shareList li { position: relative; border-top: 1px solid #ccc; height: 150px;}
.shareList li .who { position: absolute; top: 0; right: 100px; width: 120px; padding: 8px 0; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.shareList li .date { position: absolute; top: 0; right: 0; padding: 8px;}
.shareList li .cmnt { color:#00aade; font-size: 13px; }
.shareList li .cmnt:before{content: "("}
.shareList li .cmnt:after{content: ")"}
.shareList li.accent { height: auto; }
.shareList li .subject { display: block; padding: 8px 230px 8px 55px; background: #f4f4f4; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;  }
.shareList li.accent .subject  { padding: 10px 230px 10px 60px; background: #fff; }
.shareList li.accent .theme { padding: 10px; font-weight: bold; position: absolute; top: 0; left: 0;  color: #ef3810;}
.shareList li .type { padding: 8px; background: #7194e3; position: absolute; top: 0; left: 0; }
.shareList li .type.typeQ { background: #e37a71;}
.shareList li .kind { position: absolute; top: 75px; left: 45%; background: #aaaaaa;  padding: 3px 5px;  color: #fff;}
.shareList li img { width: 200px; margin-top: 5px; margin-left: 30px; }
.shareList li .name { position: absolute; top: 60px; left: 28%; font-weight: bold; width: 150px; text-align: center; line-height: 200%;  }
.shareList li .name span {display: block; line-height: 200%;}
.shareList li .dc { position: absolute; top: 60px; left: 53%; width: 100px; text-align: center; }
.shareList li .dc > span { display: block; }
.shareList li .dc .value { display: block; color: #00aade; font-weight: bold; padding-top: 10px;}
.shareList li .gifts { position: absolute; top: 41px; right: 0; width: 300px; height: 100px; display: table;}
.shareList li .gifts .cell {display: table-cell; vertical-align: middle;}
.shareList li .gifts .cell span{ display: inline-block; padding: 3px 5px; text-align: center; border:1px solid #00aade;margin:3px 1px; background: rgba(255,255,255,0.8)}
.shareList li .gifts .cell span.not {display: none;}

.shareList.view {margin-top: 30px;}
.shareList li.now { background: #fbf8f3; }
.shareList li.now .subject { font-weight: bold; color: #00aade; }

.shareList li.blind:before { content:"블라인드 처리됨"; color: #ef3810; position: absolute; bottom:0; left: 3px; }
.shareList li.blind { background: #f0f0f0; }
.shareList li.delete:before { content:"삭제된 게시물"; color: #ef3810; position: absolute; bottom:0; left: 3px; }
.shareList li.delete { background: #f0f0f0; }

.listBox .buttonBox {text-align: right; padding-top: 20px; margin-bottom: 20px; position: relative; }
.listBox .buttonBox > a { padding: 8px 15px; background: #00aade; color: #fff; border-radius: 20px;  }
.listBox .buttonBox > a:hover { background: #63605d; text-decoration: none; }

@media screen and (max-width: 800px) {
	.listBox { padding-bottom: 0; background:#fff;}
	.listBox .search .count { position: absolute; top: 30px; right: 20px; background: transparent; color: #333; }
	.listBox .frame { border: 0; margin: 0; padding: 20px 0;}
	.shareList li img { width: 150px; margin-top: 30px; margin-left: 0px; }
	.shareList li .name { top: 41px; left: 0; font-weight: bold; width: auto; text-align: left; }
	.shareList li .name span {display: inline-block; line-height: 100%;}
	.shareList li .kind { top: 50px; left: 30%;}
	.shareList li .gifts { top: 78px; right: 0; width: 60%; height: 60px;}
	.shareList li .dc { top: 42px; left: 40%; width: auto; text-align: left; }
	.shareList li .dc > span { display: inline-block; }
	.shareList li .dc .value { display: inline-block; }
}
@media screen and (max-width: 640px) {
	.shareList li .subject { padding: 8px 100px 8px 55px;}
	.shareList li .kind { top: 50px; left: 150px;}
	.shareList li .dc { left: auto; right: 0; width: auto; text-align: left; }
	.shareList li .date { position: absolute; top: auto; bottom: 0; right: 0; padding: 3px; font-size: 13px;}
	.shareList li .who { position: absolute; top: 0; right: 0px; width: 90px;}
	.shareList li .gifts .cell { text-align: center; }
	.shareList li .gifts .cell span{ padding: 1px 3px; font-size: 13px; }
	
	.shareList li.accent .subject { padding: 10px 10px 40px 60px;}
	.shareList li.accent .date { position: absolute; top: auto; bottom: 0; padding: 8px; font-size: 14px;}
	.shareList li.accent .who { position: absolute; top: auto; bottom: 0; right: 100px;}
	
	.boardList li .subject { padding: 10px 10px 40px 70px;}
	.boardList li .date { position: absolute; top: 30px; }
	.boardList li .who { position: absolute; top: 30px; }
}

/* 내용 표시 */
.viewBox { background: #f4f4f4; padding-bottom: 30px; }
.viewBox .top { background: #00aade; padding: 20px; font-size: 20px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; font-weight: bold;  }
.viewBox .frame { background: #fff; border: 1px solid #e7e7e7; margin-top: 20px; padding: 50px;}
.viewBox .contents { border-top: 2px solid #5a5a5a;  padding-bottom: 30px; position: relative; }
.viewBox .writer { padding-bottom: 10px; }
.viewBox .writer .who { position: relative; }
.viewBox .writer .date { float: right; }

.viewBox .buttonBox {padding-top: 20px; text-align: right; }
.viewBox .buttonBox > a, .viewBox .buttonBox form > a { padding: 8px 10px; background: #00aade; color: #fff; float: right;  margin-left: 10px; }
.viewBox .buttonBox > a:hover, .viewBox .buttonBox form > a:hover { background: #63605d; text-decoration: none; }
.viewBox .buttonBox  a.left { padding: 8px 10px; background: #63605d; color: #fff; float: left;  }
.viewBox .buttonBox  a.left:hover { background: #00aade; text-decoration: none; }
.viewBox .buttonBox > button, .viewBox .buttonBox form > button { padding: 8px 10px; background: #63605d; color: #fff; margin-left: 5px; }
.viewBox .buttonBox > button:hover, .viewBox .buttonBox form > button:hover { background: #00aade; text-decoration: none; }
.viewBox .buttonBox:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

.viewBox .buttonTheme { text-align: center; margin: 40px 0;  }
.viewBox .buttonTheme a { position: relative; display: inline-block; height: 70px; background: #00aade; border-radius: 35px; padding: 2px 30px 2px 30px; line-height: 68px; font-size: 28px; text-align: right; color: #fff; font-weight: bold; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.viewBox .buttonTheme a:hover { background: #666; text-decoration: none; }
.viewBox .buttonTheme button { position: relative; display: inline-block; height: 70px; margin-right: 10px; background: #00aade; border-radius: 35px; padding: 2px 30px 2px 30px; line-height: 68px; font-size: 28px; text-align: right; color: #fff; font-weight: bold; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.viewBox .buttonTheme button:hover { background: #666; text-decoration: none; }

@media screen and (max-width: 800px) {
	.viewBox .buttonTheme { text-align: center; margin: 25px 0;  }
	.viewBox .buttonTheme a { height: 50px;  border-radius: 25px; padding: 2px 20px 2px 20px; line-height: 48px; font-size: 20px; }
	.viewBox .buttonTheme button { height: 50px;  border-radius: 25px; padding: 2px 20px; line-height: 48px; font-size: 20px; }
}

.viewBox.share .contents .subject { display: block; padding: 10px 10px 10px 65px; background: #fbf8f3; font-size: 17px; font-weight: bold; text-align: center;  }
.viewBox.share .contents .type { padding: 10px; background: #7194e3; position: absolute; top: 0; left: 0; font-size: 17px; font-weight: bold;  }
.viewBox.share .contents .type.typeQ { background: #e37a71;}
.viewBox.share .contents .model {position: relative; padding-left: 370px; min-height: 180px;}
.viewBox.share .contents .model .kind { position: absolute; top: 63px; left: 370px; font-size: 15px; background: #aaaaaa;  padding: 5px 10px;  color: #fff; }
.viewBox.share .contents .model .image { position: absolute; top: 10px; left: 40px; }
.viewBox.share .contents .list li img { width: 300px;}
.viewBox.share .contents .model .name { padding-top: 20px;  }
.viewBox.share .contents .model .name span {font-size: 20px; font-weight: bold; }
.viewBox.share .contents .model .dc { margin-top: 15px; width: 200px; margin-left: 60px; }
.viewBox.share .contents .model .dc > div { font-size: 17px; }
.viewBox.share .contents .model .dc .value { font-size: 17px; color: #00aade; font-weight: bold; float: right;  }
.viewBox.share .contents .model .dc > div:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.viewBox.share .contents .model .gifts { padding-top: 10px; margin-left: -3px; }
.viewBox.share .contents .model .gifts span{ display: inline-block; padding: 3px 8px; text-align: center; border:1px solid #00aade; margin:3px 1px; }
.viewBox.share .contents .model .gifts span.not { display: none;  }
.viewBox.share .contents .message { padding: 20px; min-height: 100px; background: #f4f4f4; }
.viewBox.share .contents.accent .message {  background: #fff;  }
.viewBox.share .contents.accent .theme { padding: 10px; position: absolute; top: 0; left: 0; font-size: 17px; font-weight: bold;  color: #ef3810 }

.viewBox.board .contents .subject { display: block; padding: 10px 10px 10px 65px; background: #fbf8f3; font-size: 17px; font-weight: bold; text-align: center;  }
.viewBox.board .contents .theme { padding: 10px; position: absolute; top: 0; left: 0; font-size: 17px; font-weight: bold;  }
.viewBox.board .contents.accent .theme { color: #ef3810 }
.viewBox .contents .theme:before{ content:"["}
.viewBox .contents .theme:after{ content:"]"}
.viewBox.board .contents .message { padding: 20px 0; min-height: 50px;}
.viewBox.board .contents .message .img img { width: 100%; }
.viewBox.board .contents .website {margin-top: 20px;margin-bottom: 20px;}
.viewBox.board .contents .website a {color: blue; }
.viewBox.board .contents .photo { text-align: center; margin-top: 20px;margin-bottom: 30px;}
.viewBox.board .contents .photo img { max-width: 100%; }
.viewBox.board .contents .youtube { position: relative; width: 100%; padding-bottom: 56.25%; margin-bottom: 60px; margin-top: 20px;}
.viewBox.board .contents .youtube iframe { position: absolute; width: 100%; height: 100%; }
.viewBox.board .contents .youtube .caption { position: absolute; width: 100%; bottom: -30px; left: 0; text-align: center; }

.viewBox .contents.blind:before { content:"블라인드 처리됨"; color: #ef3810; position: absolute; top:0; left: 3px; }
.viewBox .contents.blind { background: #f0f0f0; }
.viewBox .contents.delete:before { content:"삭제된 게시물"; color: #ef3810; position: absolute; top:0; left: 3px; }
.viewBox .contents.delete { background: #f0f0f0; }
.viewBox .comment { margin-top: 30px; }
.viewBox .comment .write { position: relative; border: 1px solid #00aade; margin-top: -1px; background: #fff;}
.viewBox .comment .write .upper { background: #fff; padding: 10px; position: relative; }
.viewBox .comment .write .upper > span {font-size: 13px; cursor: pointer; }
.viewBox .comment .write .upper button.cmnt { position: absolute; top: 6px; right: 6px; padding: 3px 8px; color: #fff; background: #00aade}
.viewBox .comment .write.open .upper { background: #62656a; color: #fff; }
.viewBox .comment .write form { display: none; }
.viewBox .comment .write.open form { display: block; padding: 20px; }
.viewBox .comment .write form .open { float: right; margin-top: -35px;}
.viewBox .comment .write form textarea { display:block; width:100%; height:120px; padding:8px; line-height:1.8em; background: #fdfaf6 }
.viewBox .comment .write form .length {font-size: 12px; text-align: right; }
.viewBox .comment .write form .button { margin-top: 0; text-align: center; position: relative; padding: 16px 0; }
.viewBox .comment .write form .button .g-recaptcha { position: absolute; top: 0; left: 0;}
.viewBox .comment .write form .button button { background: #00aade; padding: 10px 50px; font-size: 17px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; font-weight: bold; border-radius: 5px;}
.viewBox .comment .write form .g-recaptcha.off {display: none; }
.viewBox .comment .write form .reply {display: none; }
.viewBox .comment .write form .reply.on {display: block; padding: 10px; background: #f8f8f8;}

/*
.viewBox .comment .write > button.login:after { content: "로그인"; position: absolute; top: 10px; right: 10px; padding: 3px 5px; border: 1px solid #ccc; background: #f4f4f4}
.viewBox .comment .write > button.input:after { content: "등록"; position: absolute; top: 10px; right: 10px; padding: 3px 5px; border: 1px solid #ccc; background: #f4f4f4}
*/
.viewBox .comment .order { margin-top: 50px; border-top: 1px solid #474747;  border-bottom: 1px solid #ccc; background: #f9f9f9; }
.viewBox .comment .order button { background: transparent; padding: 8px 20px; font-size: 13px; height: 36px; margin-bottom: -1px;  }
.viewBox .comment .order .on { font-weight: bold; background: #fff; border-left: 1px solid #ccc; border-right: 1px solid #ccc;  }
.viewBox .comment .order .count { float: right; font-size: 13px; padding: 8px 10px;}

.viewBox .comment .list  { border-bottom: 1px solid #e0e0e0; padding-bottom: 10px; }
.viewBox .comment .list > li { position: relative; padding-right: 80px;margin-top: 8px; }
.viewBox .comment .list > li.depth0:not(:first-child) { border-top: 1px solid #e0e0e0; }

.viewBox .comment .list > li .who {padding: 8px 10px;}
.viewBox .comment .list > li .noteLogin {position: relative;}
.viewBox .comment .list > li .alert {padding: 8px 10px; color: #999; }
.viewBox .comment .list > li .message {padding: 10px; padding-top: 0; padding-left: 40px;}
.viewBox .comment .list > li.depth1  {margin-left: 30px; background: #f7f7f7; border: 1px solid #e0e0e0; }
.viewBox .comment .list > li.depth1:before {content: "└"; position: absolute; top: 10px; left: -20px; }
.viewBox .comment .list > li.depth2  {margin-left: 60px; background: #f7f7f7; border: 1px solid #e0e0e0; }
.viewBox .comment .list > li.depth2:before {content: "└"; position: absolute; top: 10px; left: -20px; }
.viewBox .comment .list > li.depth3  {margin-left: 90px; background: #f7f7f7; border: 1px solid #e0e0e0; }
.viewBox .comment .list > li.depth3:before {content: "└"; position: absolute; top: 10px; left: -20px; }
.viewBox .comment .list > li .admin { position: absolute; top: 5px; right: 0; }
.viewBox .comment .list > li .admin button { background: transparent; font-size: 12px; color: #666;}
.viewBox .comment .list > li .admin button:hover { font-weight: bold; }
.viewBox .comment .list > li .user { position: absolute; bottom: 5px; right: 0; }
.viewBox .comment .list > li .user button.line { background: transparent; font-size: 12px; color: #666;}
.viewBox .comment .list > li .user button.line:hover { font-weight: bold; }
.viewBox .comment .list > li.blind, .viewBox .comment .list > li.delete, .viewBox .comment .list > li.secret { background: #f0f0f0; }
.viewBox .comment .blank {text-align: center; padding: 50px;}

@media screen and (max-width: 800px) {
	.viewBox { padding-bottom: 0; background: #fff; }
	.viewBox .frame { border: 0; margin: 0; padding: 20px 0;}
	.viewBox.share .contents .model .image {left: 0; }
	.viewBox.share .contents .model {padding-left: 310px;}
	.viewBox.share .contents .model .kind { left: 310px;}
	.viewBox .comment .write form .button { text-align: right; }
}
@media screen and (max-width: 640px) {
	.viewBox.share .contents .model .image img { width: 200px; }
	.viewBox.share .contents .model {padding-left: 210px;}
	.viewBox.share .contents .model .kind { left: 210px;}
	.viewBox.share .contents .model .dc { width: auto; }
	.viewBox .comment .write form .button { padding-top: 90px; padding-bottom: 0; text-align: center; }
}
@media screen and (max-width: 500px) {
	.viewBox.share .contents .model {padding-left: 0;}
	.viewBox.share .contents .model .image { top: 40px }
	.viewBox.share .contents .model .name { padding-top: 10px }
	.viewBox.share .contents .model .kind { left: 180px; top: 40px;}
	.viewBox.share .contents .model .dc { margin-left: 180px; margin-top: 35px; background: rgba(255,255,255,0.8); position: relative; z-index: 50; }
	.viewBox.share .contents .model .gifts { padding-top: 30px; padding-bottom: 10px;}
	.viewBox .comment .write form .open { display: block; float: none; margin-top: 0; text-align: right; }
	.viewBox .comment .list > li { padding-right: 0; padding-bottom: 25px }
}

/* 상담 신청, 입력 창 */
.editBox { background: #f4f4f4; padding-bottom: 30px; }
.editBox .body > .top { background: #00aade; padding: 20px; font-size: 20px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; font-weight: bold;  }

.editBox .form { background: #fff; border: 1px solid #e7e7e7; margin-top: 20px; padding: 50px;}

.editBox .notice {text-align: right; }
.editBox .form dl { border-top: 2px solid #5a5a5a; margin-top: 10px; position: relative; }
.editBox .form dl:before { content: ""; position: absolute; top: 0; left: 0; width: 150px; height: 100%; background: #f4f4f4; z-index: 1; }
.editBox .form dl dt { position: relative; z-index: 10; padding: 12px 0; text-align: center; width: 150px; }
.editBox .form dl dd { position: relative; z-index: 10; padding: 10px 0 10px 160px; margin-top: -44px; border-bottom: 1px solid #e7e7e7; }
.editBox .form dl dd > div {margin-top: 10px;}
.editBox .form dl dd > div:first-child {margin-top: 0;}	
.editBox .form dl dd span { margin-right: 10px; }
.editBox .form dl dd .desc { font-size: 13px; color: #666;  }
.editBox .form input[type='text']{ width: 93px;}
.editBox.regist .form input[type='text']{ width: 180px; }
.editBox .form input[name='name'] { width: 300px; }
.editBox .form input[name='subject'] { width: 80%; }
.editBox .form input[name='extra'] { width: 300px; }
.editBox .form textarea[name='memo'] { width: 100%; height: 100px;}
.editBox .form textarea[name='message'] { width: 100%; height: 400px;}
.editBox.board .form textarea[name='memo'] { height: 200px;}
.editBox .form dl dd > div > span { float: left; width: 25%; margin: 0; }
.editBox .form dl dd > div > span > em { font-style: normal;  }
.editBox .form dl dd > div:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.editBox .form .blind { display: none; }
.editBox .form .blind.on { display: block; }
.editBox .form .estimateViewDetail {border: 1px solid #ef3810; }
.editBox .form .estimateViewDetail .top { margin: 0; margin-top: 10px; }
.editBox .form .estimateViewDetail.off { display: none; }

.editBox .form dl dd > div.box{}
.editBox .form dl dd > div.box em { float: left; font-style: normal; display: inline-block; }
.editBox .form dl dd > div.box div { float: left; margin-left: 20px; }
.editBox .form dl dd > div.box:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.editBox dl dd a { background: #999999; height: 28px; color: #fff; display: inline-block; padding: 3px 10px; border-radius: 20px; text-decoration: none;}
.editBox dl dd a:hover { background: #666666;  }

.editBox .form .getModel { background: #999999; height: 28px; color: #fff; width: 100px; border-radius: 15px; }
.editBox .form .getModel.off { display: none;  }
.editBox .form .getModel:hover { background: #666666;  }

.editBox .form .agree .desc { margin-top: 20px; padding: 10px; background: #f4f4f4; }
.editBox .form .agree .check { margin-top: 20px; }
.editBox .form .agree .privacy { margin: 10px 0; padding: 10px; border: 1px solid #e7e7e7; font-size: 13px; }
.editBox .form .agree .left { float: left; width: 49%;}
.editBox .form .agree .right { float: right; width: 49%;}
.editBox .form .agree:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.editBox .form .buttonBox { margin-top: 30px; text-align: center; position: relative; padding: 15px 0; }
.editBox .form .buttonBox .g-recaptcha { position: absolute; top: 0; left: 0;}
.editBox .form .buttonBox button { background: #00aade; padding: 10px 50px; font-size: 17px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; font-weight: bold; border-radius: 30px;}
.editBox .form .modelList { margin-top: 10px;}
.editBox .form .modelList .blank { float: none; width: auto; }
.editBox .form .modelList button { font-size:0px; line-height:0; text-indent:-9999px; position: absolute; top:-0; right: 0px; width: 25px; height: 25px; background: rgba(0,0,0,0.1) url(/images/icon-27.png) -45px -79px no-repeat; background-size: 225px 150px; }
.editBox .form .modelList button:hover { background-color: rgba(0,0,0,0.2) }

.editBox .form dl dd .addButton {  }
.editBox .form dl dd .addButton button {position: relative; top: auto; right: auto;  background: #666666; color: #fff; }

.editBox .form .attachList {margin-top: 10px;}
.editBox .form .attachList li { padding: 8px 80px 8px 56px; border-top: 1px solid #ccc; position: relative;}
.editBox .form .attachList li.off { display: none; }
.editBox .form .attachList li .data span { position: absolute; top: 6px; left: 5px;}
.editBox .form .attachList li .data input[type='text'] { width: 100% }
.editBox .form .attachList li .subj { padding-top: 8px;}
.editBox .form .attachList li .subj input[type='text'] { width: 100% }
.editBox .form .attachList li .subj textarea { width: 100%; height:100px;  }
.editBox .form .attachList li .button { position: absolute; top: 6px; right: 0; }
.editBox .form .attachList li .button button.icon { width: 20px; height: 20px; text-align: center; line-height: 18px; border: 1px solid #ccc; border-radius: 2px; background: #f4f4f4; margin:0; padding: 0;  }
.editBox .form .attachList li .button button.icon:hover { background: #ddd; }
.editBox .form .attachList li .photo { text-align: center; }
.editBox .form .attachList li .photo img { max-width: 100%; max-height: 100%; border: 1px solid #ccc;}

.done  { background: #fff; border: 1px solid #e7e7e7; margin-top: 20px; padding: 150px 50px; font-size: 20px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; font-weight: bold; color: #00aade; text-align: center;}

.eventBox {border-top: 2px solid #00aade; margin-top: 50px; background: #fff; box-shadow: 0px 3px 3px 2px rgba(0,0,0,0.2); margin-bottom: 10px; }
.eventBox .title { text-align: center; margin-top: -20px; }
.eventBox .title h3 { display: inline-block; background: #00aade; border-radius: 20px; padding: 5px 20px; color: #fff; font-size: 20px;  }
.eventBox .text { padding: 30px 60px; font-size: 16px; }
.eventBox .button { padding-bottom: 20px; text-align: center; }
.eventBox .button > a { padding: 8px 15px; background: #00aade; color: #fff; margin: 0 10px; border-radius: 20px; }
.eventBox .button > a:hover { background: #63605d; text-decoration: none; }

.promotionBox { margin-top: 20px; }
.promotionBox .discount { font-size: 17px; text-align: center; font-weight: bold; margin-top: 20px; color: #00aade;}
.promotionBox .discount .price { color: #ef3810; font-size: 24px; margin-left: 20px; }

@media screen and (max-width: 800px) {
	.editBox .form .agree .left { float: none; width: auto;}
	.editBox .form .agree .right { float: none; width: auto;}
	.editBox .form dl dd > div > span { width: 50%; margin: 3px 0; }
	.editBox .form dl dd > div > span > em { display: inline-block; width: 60px; }
	.editBox { background: #ffffff; }
	.editBox .form { background: #fff; border: 0; padding: 0;}
	.editBox .form dl dt { width: 18%;}
	.editBox .form dl dd { padding-left: 20%; }
	.editBox .form dl:before { width: 18%; }
	.editBox .form dl dd.fince span ,.editBox .form dl dd.rent span ,.editBox .form dl dd.used span { display: inline-block; line-height: 2.0; }
	.editBox .form dl dd div.box span {line-height: 1.5; }
	.editBox .form .buttonBox  { text-align: right; }
	.eventBox .text { padding: 20px; font-size: 14px; }
}
@media screen and (max-width: 640px) {
	.editBox .form dl dt { width: auto; text-align: left; font-weight: bold; padding: 8px 10px;  background: #f4f4f4 }
	.editBox .form dl dd { padding-left: 10px; margin-top: 0; }
	.editBox .form dl dt:nth-child(1), .editBox .form dl dt:nth-child(3) {  }
	.editBox .form dl dd:nth-child(2), .editBox .form dl dd:nth-child(4) { padding-left: 70px; margin-top: -42px;}
	.editBox.board .form dl dd:nth-child(2), .editBox.board .form dl dd:nth-child(4)  { padding-left: 10px; margin-top: 0;}
	.editBox .form dl:before { display: none; }
	.editBox .form input[name='name'] { width: 90%; }
	.editBox .form input[name='subject'] { width: 90%; }
	.editBox .form input[name='phone2'], .editBox .form input[name='phone3'] { width: 27%; }
	.editBox .form .buttonBox { padding-top: 90px; padding-bottom: 20px; text-align: center; }
}
@media screen and (max-width: 450px) {
	.editBox .form dl dd > div > span { float: none; width: 100%; display: inline-block; }
}
/* 이벤트 */
.eventList { background: #fff; padding: 30px 15px; }
.eventList li:not(:first-child) { border-top: 1px dashed #ccc; margin-top: 15px; padding-top: 15px;  }
.eventList li .thumb { float: left; width: 40%; }
.eventList li .text { float: right; width: 56%; }
.eventList li .thumb img { border: 1px solid #ccc; width: 100%; display: block; }
.eventList li .text span { display: block; }
.eventList li .text .subj { font-size: 25px; padding: 10px 0; }
.eventList li .text .desc { font-size: 17px; padding: 10px 0; color: #01ba53;  }
.eventList li .text .term { font-size: 17px; padding: 10px 0; }
.eventList li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.eventTab { padding-bottom: 0px; }
.eventTab ul li { float: left; width:46%; margin: 2%; }
.eventTab ul li .thumb img { border: 1px solid #ccc; width: 100%; display: block; }
.eventTab li .text { display: none; }
.eventTab ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.eventView { background: #fff; padding: 15px; }
.eventView .img { text-align: center; }
.eventView .img img { max-width: 100%;    height: auto; }
@media screen and (max-width: 900px) {
	.eventList li .text .subj { font-size: 25px; padding: 5px 0; }
	.eventList li .text .desc { font-size: 17px; padding: 5px 0; }
	.eventList li .text .term { font-size: 17px; padding: 5px 0; }
}
@media screen and (max-width: 800px) {
	.eventList li .text .subj { font-size: 20px; padding: 3px 0; }
	.eventList li .text .desc { font-size: 15px; padding: 3px 0; }
	.eventList li .text .term { font-size: 15px; padding: 3px 0; }
	.eventList { padding: 10px; border: 0; }
	.eventView {padding: 10px; border: 0;  }
}
@media screen and (max-width: 600px) {
	.eventList li .text .subj { font-size: 17px; padding: 0; }
	.eventList li .text .desc { font-size: 14px; padding: 0; }
	.eventList li .text .term { font-size: 14px; padding: 0; }
}
@media screen and (max-width: 400px) {
	.eventList li .thumb { float: none; width: auto; }
	.eventList li .text { float: none; width: auto; padding-top: 20px; }
}

/* 서비스 / 마이페이지 */
.serviceBox { background: #f4f4f4; padding-bottom: 30px; }
.serviceBox .top { background: #00aade; padding: 20px; font-size: 20px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; font-weight: bold;  }
.serviceBox .frame { background: #fff; border: 1px solid #e7e7e7; margin-top: 20px; position: relative;  }
.serviceBox .frame:before { content: ""; position: absolute; top: 0; left: 0; width: 200px; height: 100%; background: #fef9f3;  z-index: 1; border-right: 1px solid #eee}

.serviceBox .sideMenuBox { position: absolute; top: 106px; left: 50px; width: 150px; z-index: 10; }
.serviceBox .contents {  margin-left: 200px; padding: 50px; position: relative; min-height: 400px;}
.serviceBox .contents h3 {border-bottom: 2px solid #5a5a5a; padding: 10px;}
.serviceBox .contents .intro {margin: 20px 0;}
.serviceBox .contents .item {margin: 10px 0 15px 10px ; text-indent:-10px; }
.serviceBox .contents .sub {margin-left: 10px; text-indent:0px;}
.serviceBox .contents .sub dt {margin-top: 8px;}
.serviceBox .contents .sub dd {margin-left: 10px;}

.serviceBox .form dl {position: relative; }
.serviceBox .form dl:before { content: ""; position: absolute; top: 0; left: 0; width: 150px; height: 100%; background: #f4f4f4; z-index: 1; }
.serviceBox .form dl dt { position: relative; z-index: 10; padding: 12px 0; text-align: center; width: 150px; }
.serviceBox .form dl dd { position: relative; z-index: 10; padding: 10px 0 10px 160px; margin-top: -44px; border-bottom: 1px solid #e7e7e7; }
.serviceBox .form dl dd > div {margin-top: 10px;}
.serviceBox .form dl dd > div:first-child {margin-top: 0;}	
.serviceBox .form dl dd span { margin-right: 10px; }
.serviceBox .form dl dd .desc { font-size: 13px; color: #666;  }
.serviceBox .form input[type='text']{ width: 93px;}
.serviceBox .form input[name='nickname'] { width: 170px; }
.serviceBox .form input[name='subject'] { width: 80%; }
.serviceBox .form input[name='email'] { width: 200px; }
.serviceBox .form input[name='extra'] { width: 300px; }
.serviceBox .form textarea[name='message'] { width: 100%; height: 100px;}
.serviceBox .form .agree .desc { margin-top: 20px; padding: 10px; background: #f4f4f4; }
.serviceBox .form .agree .check { margin-top: 20px; }
.serviceBox .form .buttonBox { margin-top: 30px; text-align: center; padding: 16px 0; position: relative; }
.serviceBox .form .buttonBox.recaptcha {text-align: right;  }
.serviceBox .form .buttonBox .g-recaptcha { position: absolute; top: 0; left: 0;}
.serviceBox .form .buttonBox button { background: #00aade; padding: 10px 50px; font-size: 17px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; font-weight: bold; border-radius: 5px;}
.serviceBox .form .buttonBox button:hover { background: #00aade;}

.serviceBox .search { background: #dfdcd7; }
.serviceBox .search .count { float: left; padding: 9px 15px; background: #63605d; color: #fff; }
.serviceBox .search .count span { font-weight: bold; }
.serviceBox .search .select { float: left; padding: 6px 10px; height: 28px; }
.serviceBox .search .select select { margin-right: 5px; }
.serviceBox .search .button {float: right; }
.serviceBox .search .button button { padding: 9px 10px; background: #63605d; color: #fff;  }
.serviceBox .search .button button:hover { background: #888;}
.serviceBox .search:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.serviceBox .list li {border-bottom: 1px solid #ccc; padding: 10px 0; position: relative; }
.serviceBox .list li .check span{ width: 1px;}
.serviceBox .list li .kind { padding-right: 15px;}
.serviceBox .list li .date {float: right; }
.serviceBox .list li .read.yes { color: #00aade}
.serviceBox .list li .read.not { color: #ef3810; font-weight: bold;  }
.serviceBox .estimate .list li .name {display: block; padding: 8px 150px 0 40px;}
.serviceBox .estimate .list li .check {position: absolute; bottom: 10px; left: 0;}
.serviceBox .estimate .list li .cost {position: absolute; bottom: 10px; right: 0;}
.serviceBox .list li.blank { text-align: center;}
.serviceBox .list li:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.serviceBox .buttonBox { padding-top: 10px;}
.serviceBox .buttonBox button { border: 1px solid #ccc; background: #fff; margin: 5px;}
.serviceBox .buttonBox button.right { background: #f4f4f4; float: right; }
.serviceBox .buttonBox button:hover { background: #e0e0e0; }
.serviceBox .buttonBox:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.serviceBox.intro .intro1 {margin-top: 40px; padding-right: 30%; position: relative; z-index: 10;}
.serviceBox.intro .intro1:before {content:""; position: absolute; bottom: 0; right: -50px; width: 292px; height: 320px; background: url(/images/company.jpg) 100% 100%; z-index: 1;}
.serviceBox.intro .intro1 div {font-size: 16px; margin: 15px 0; position: relative; z-index: 10;}
.serviceBox.intro .intro1 .copy1 {font-size: 20px; color: #00aade; font-weight: bold; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.serviceBox.intro .intro1 .gray { background: #f5f5f5; padding: 5px 10px; }
.serviceBox.intro .intro1 .copy2 { color: #52ccce; font-weight: bold;  }

.serviceBox.intro .intro2 {margin-top: 50px;}
.serviceBox.intro .intro2 .copy1 {font-size: 24px;  font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; text-align: center; border-top: 2px solid #5a5a5a; border-bottom: 2px solid #5a5a5a;padding: 5px 0;  }
.serviceBox.intro .intro2 .copy2 {font-size: 20px;  font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; text-align: center; color:#00aade; font-style: italic; margin: 20px 0; }
.serviceBox.intro .intro2 .box1 {margin: 15px 0; }
.serviceBox.intro .intro2 .box1 {display: table; width: 100%; }
.serviceBox.intro .intro2 .box1 .subj {display: table-cell; width: 20%; background: #515151; text-align: center; vertical-align: middle;  font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; }
.serviceBox.intro .intro2 .box1 .subj em { font-weight: bold; color: #ffff00; font-style: normal; font-size: 24px; }
.serviceBox.intro .intro2 .box1 .subj span { font-size: 20px; display: block; }
.serviceBox.intro .intro2 .box1 .text {display: table-cell; width: 80%;}
.serviceBox.intro .intro2 .box1 .text > div {margin-left: 10px; background: #f3f3f4; padding: 10px 10px 10px 60px; position: relative; text-align: center; font-size: 16px; line-height: 1.8}
.serviceBox.intro .intro2 .box1 .text > div:before {content: ""; position: absolute; top:5px; left: 5px; width: 40px; height: 40px; background: url(/images/icon-27.png) -5px -155px no-repeat; background-size: 300px 200px;}
.serviceBox.intro .intro2 .box1 .text > div em {font-style: normal; font-weight: bold; }
.serviceBox.intro .intro2 .arrow  {text-align: center; margin: 10px 0 10px 10px; padding-left: 17%; }
.serviceBox.intro .intro2 .arrow span { display: inline-block; padding: 3px 15px 0 15px; background: #a8a8a8; color: #fff; font-weight: bold; font-size: 16px; letter-spacing: -1px; position: relative; margin-bottom: 15px; }
.serviceBox.intro .intro2 .arrow span:before {content: "";  position: absolute; bottom: -15px; right: 50%; width: 0; height: 0; border-left: 120px solid transparent; border-top: 15px solid #a8a8a8; }
.serviceBox.intro .intro2 .arrow span:after {content: "";  position: absolute; bottom: -15px; left: 50%; width: 0; height: 0; border-right: 120px solid transparent; border-top: 15px solid #a8a8a8; }

.serviceBox.intro .history {margin-top: 60px; }
.serviceBox.intro .history .title { font-size: 24px;  font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; text-align: center; border-top: 2px solid #5a5a5a;  background: #f2f2f2; padding: 5px 0;  }
.serviceBox.intro .history .main > li {display: table; width: 100%;}
.serviceBox.intro .history .main > li .subj {display: table-cell;  width: 17%; background:#e5f6fa;  text-align: center; vertical-align: middle; font-weight: bold;  padding: 8px; border-bottom: 1px solid #fff;  }
.serviceBox.intro .history .main > li .text {display: table-cell;  width: 83%; padding: 8px 10px; border-bottom: 1px solid #cccccc;  }
.serviceBox.intro .history .main > li:first-child .subj {background: #00aade; color: #fff; }
.serviceBox.intro .history .main > li:first-child .text {background: #666666; color: #fff; font-weight: bold;  }
.serviceBox.intro .history .sub { padding: 0; }
.serviceBox.intro .history .sub > li { position: relative; padding: 5px 0 5px 95px;  }
.serviceBox.intro .history .sub > li .date { position: absolute; top: 5px; left: 0; font-size: 13px; }
.serviceBox.intro .history .sub > li .cont { font-size: 13px; }


.sideMenuBox {}
.sideMenuBox ul { border-top: 1px solid #eee; border-bottom: 1px solid #eee}
.sideMenuBox li { text-align: center; border-top: 1px solid #eee;}
.sideMenuBox li.on a { color: #00aade; font-weight: bold; border-left: 7px solid #00aade; background: #fff; margin-right: -1px;}
.sideMenuBox li a { display: block; padding: 8px; }
.sideMenuBox li a:hover { font-weight: bold; text-decoration: none; }
.sideMenuBox li:first-child { border-top: 0;  }

.mySaveList { }
.mySaveList li {border-bottom: 1px solid #ccc; padding: 8px 90px 8px 80px; position: relative;}
.mySaveList li .check {position: absolute; left: 5px; top: 6px;}
.mySaveList li .kind {position: absolute; left: 35px; top: 8px;}
.mySaveList li .subj {display: block; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
.mySaveList li .date {position: absolute; right: 5px; top: 8px;}

@media screen and (max-width: 800px) {
	.serviceBox { background: #fff; padding-bottom: 0; }
	.serviceBox .frame { border: 0; }
	.serviceBox .frame:before {display: none; }
	.serviceBox .search .count { position: absolute; top: 32px; right: -5px; background: transparent; color: #333; }
	.sideMenuBox { display: none; }
	.serviceBox .contents {  margin-left: 0; padding: 10px 0;}
	.serviceBox .form dl dt { width: 20%;}
	.serviceBox .form dl dd { padding-left: 22%; }
	.serviceBox .form dl:before { width: 20%; }
	.serviceBox .form .buttonBox.recaptcha {}
}
@media screen and (max-width: 640px) {
	.serviceBox .form dl dt { width: auto; text-align: left; font-weight: bold; padding: 8px 10px;  background: #f4f4f4 }
	.serviceBox .form dl dd { padding-left: 10px; margin-top: 0; }
	.serviceBox .form dl:before { display: none; }
	.serviceBox .form .buttonBox.recaptcha { padding-top: 90px; padding-bottom: 0; text-align: center; }
	.serviceBox.intro .intro1 {padding-right: 0; padding-bottom: 120px;}
	.serviceBox.intro .intro1 .copy1 { text-align: center; }
	.serviceBox.intro .intro2 {margin-top: 0;}
	.serviceBox.intro .intro2 .box1 {display: block; width: auto; }
	.serviceBox.intro .intro2 .box1 .subj {display: block; width: auto; }
	.serviceBox.intro .intro2 .box1 .text {display: block; width: auto; }
	.serviceBox.intro .intro2 .box1 .text > div { margin-left: 0; }
	.serviceBox.intro .intro2 .arrow {padding:0;}
	.serviceBox.intro .intro2 .box1 .subj span { display: inline-block; }
	.serviceBox.intro .intro2 .box1 .text > div:before { content: ""; position: absolute; top:-38px; left: 0px; width: 40px; height: 40px; background: url(/images/icon-27.png) -8px -155px no-repeat; background-size: 300px 200px;z-index: 6;}
	.serviceBox.intro .intro2 .box1 .text > div:after {content: "";  position: absolute; top:-28px; left: 8px; width: 20px; height: 20px; background:#fff; z-index: 5;}
	.serviceBox.intro .intro2 .box1 .text > div { padding: 10px; }
	.serviceBox.intro .history .main > li { display: block; }
	.serviceBox.intro .history .main > li .subj {display: block;  width: auto;  }
	.serviceBox.intro .history .main > li .text {display: block;  width: auto;  }
}
@media screen and (max-width: 540px) {
	.serviceBox .estimate .list li .name {display: block; padding: 8px 0 30px 0;}
}

/* 컨텐츠 */
.contentsBox { padding-bottom: 30px; }
.contentsBox .body { padding: 0; }
.contentsBox .img { text-align: center; }
.contentsBox .img img{ max-width: 100%; display: inline-block; }
.contentsBox .alt { font-size:0px; line-height:0; text-indent:-9999px; }

.contentsBox .button { text-align: center; margin: 40px 0;  }
.contentsBox .button a { position: relative; display: inline-block; height: 70px; background: #00aade; border-radius: 35px; padding: 2px 30px 2px 65px; line-height: 68px; font-size: 28px; text-align: right; color: #fff; font-weight: bold; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.contentsBox .button a:before { content: ""; position: absolute; top: 15px; left: 18px; width: 35px; height: 35px; background: url(/images/icon-27.png) -105px -155px no-repeat; background-size: 300px 200px;}
.contentsBox .button a:hover { background: #666; text-decoration: none; }
.contentsBox .button button { position: relative; display: inline-block; height: 70px; margin-right: 10px; background: #00aade; border-radius: 35px; padding: 2px 30px 2px 30px; line-height: 68px; font-size: 28px; text-align: right; color: #fff; font-weight: bold; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.contentsBox .button button:hover { background: #666; text-decoration: none; }



.contentsBox .buttonBox {margin-bottom: 10px;}
.contentsBox .buttonBox img { display: block; width: 100%; }
.contentsBox .buttonBox a { display: block; width: 100%; text-align: center; }
.contentsBox .buttonBox.cnt1 img {width: 100%;  display: inline-block; }
.contentsBox .buttonBox.cnt2 div { float: left; width: 50%; }
.contentsBox .buttonBox.cnt2:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.contentsBox .html {border: 1px solid #e7e7e7; padding: 50px; }
@media screen and (max-width: 800px) {
	.contentsBox .buttonBox {margin-bottom: 0;}
	.contentsBox .html {border: 0; padding: 20px; }
	.contentsBox .button { text-align: center; margin: 25px 0;  }
	.contentsBox .button a { height: 50px;  border-radius: 25px; padding: 2px 20px 2px 55px; line-height: 48px; font-size: 20px; }
	.contentsBox .button a:before { top: 8px; left: 12px; width: 35px; }
	.contentsBox .button button { height: 50px;  border-radius: 25px; padding: 2px 20px; line-height: 48px; font-size: 20px; }
}

/* 탭 박스 */
.contentsTabBox { margin-bottom: 7px; }
.contentsTabBox .body { padding: 0; }
.contentsTabBox ul { border-top: 2px solid #474747; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; background: #f9f9f9; }
.contentsTabBox ul li { float: left; border-right: 1px solid #ccc; margin-right: -1px; }
.contentsTabBox ul li a { display: block; }
.contentsTabBox ul li.on a {background: #474747; color: #fff; }
.contentsTabBox ul li a:hover { background: #e6e4e0; color: #2a2829}
.contentsTabBox ul li a span{ font-size: 17px; font-weight: bold; padding: 0 20px; line-height: 38px; height: 38px; }
.contentsTabBox ul li a em { font-style: normal; color: #00aade; margin-left: 5px; font-size: 17px; font-weight: bold;}
.contentsTabBox ul:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.contentsTabBox ul li a:hover { text-decoration: none;  }
@media screen and (max-width: 800px) {
	.contentsTabBox ul.cnt2 li { width: 49.9%; max-width: 150px; }
	.contentsTabBox ul.cnt3 li { width: 33.3%; max-width: 150px; }
	.contentsTabBox ul li a span { padding: 0 5px; display: block; text-align: center; width: auto; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;  }
}
.usedTabBox {margin-top: 30px; border-bottom: 10px solid #ff7062; }
.usedTabBox li { float: left; border-bottom: 5px solid #fff; background: #cac9c9; text-align: center; padding: 20px 0; border-radius: 10px 10px 0 0; }
.usedTabBox .cnt3 li { width: 33%; margin-left: 0.5%; }
.usedTabBox .cnt4 li { width: 24.7%; margin-left: 0.4%; }
.usedTabBox li:first-child { margin-left: 0; }
.usedTabBox li.on { background: #ff7062; border-bottom: 5px solid #ff7062; }
.usedTabBox li a {color: #6c6c6c; }
.usedTabBox li.on a {color: #fff; }
.usedTabBox .title { font-size: 30px; font-weight: bold; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.usedTabBox .sub { font-weight: bold; font-size: 16px; }
.usedTabBox .copy { font-weight: bold; font-size: 14px; margin-top: 10px; }
.usedTabBox:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.prodcutInfo dt { float: left;  font-weight: bold; color: #008288; width: 15%;  }
.prodcutInfo dd { float: left; width: 85%; margin-bottom: 20px }
.prodcutInfo .order li { margin-bottom: 5px; position: relative; padding-left: 10px;}
.prodcutInfo .order li:first-child { margin-top: 0; }
.prodcutInfo .order li:before { content: ""; position: absolute; top: 9px; left: 0px; width: 4px; height: 4px; background: #91c6d4; border-radius: 3px; }
.prodcutInfo p {margin:0; padding: 0; margin-bottom: 10px; }
.prodcutInfo:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.prodcutInfo .accent { font-size: 16px; font-weight: bold; color: #ff9801; }

@media screen and (max-width: 800px) {
	.prodcutInfo {padding: 30px;}
	.prodcutInfo dt { width: 20%;  }
	.prodcutInfo dd { width: 80%; }
	.usedTabBox .title { font-size: 26px;}
}
@media screen and (max-width: 640px) {
	.prodcutInfo {padding: 0px;}
	.prodcutInfo dt { width: 25%;  }
	.prodcutInfo dd { width: 75%; }
}
@media screen and (max-width: 400px) {
	.prodcutInfo {padding: 0px;}
	.prodcutInfo dt { float: none; width: auto; padding-bottom: 10px;  }
	.prodcutInfo dd { float: none; width: auto; margin-left: 20px; }
}

@media screen and (max-width: 1100px) {
	.usedTabBox {margin-top: 20px; margin-left: 15px; margin-right: 15px;}
}
@media screen and (max-width: 600px) {
	.usedTabBox {border-bottom: 5px solid #ff7062; }
	.usedTabBox li { border-bottom: 3px solid #fff; padding: 10px 0;  }
	.usedTabBox li.on { border-bottom: 3px solid #ff7062; }
	.usedTabBox .title { font-size: 17px; }
	.usedTabBox .sub { font-size: 14px; }
	.usedTabBox .copy { display: none; }
}



/* sns Link */
.naviBox .btnSnsBox { display: none; position: absolute; top: -1px; right: 15px; width: 30px; height: 30px; padding:0;  font-size:0px; line-height:0; text-indent:-9999px; background: url(/images/icon-27.png) -200px -107px no-repeat; background-size: 300px 200px;}
.snsBox { position: absolute; top: -1px; right: 20px;}
.snsBox .kakaotalk { display: inline-block;  width: 30px; height: 30px; background: url(/images/sns-14.png) -32px -0px no-repeat; background-size: 200px 200px; ; }
.snsBox .kakaoshare { display: inline-block;  width: 30px; height: 30px; background: url(/images/sns-14.png) -0px -170px no-repeat; background-size: 200px 200px; ; }
.snsBox .naverblog  { display: inline-block;  width: 30px; height: 30px; background: url(/images/sns-14.png) -128px -0px no-repeat; background-size: 200px 200px; ; }
.snsBox .facebook  { display: inline-block;  width: 30px; height: 30px; background: url(/images/sns-14.png) -64px -0px no-repeat; background-size: 200px 200px; ; }
.snsBox .urlcopy  { display: inline-block;  width: 30px; height: 30px; background: url(/images/sns-14.png) -160px -0px no-repeat; background-size: 200px 200px; ; }
@media screen and (max-width: 800px) {
	.snsBox { position: absolute; top: -1px; right: 5px;}
}
@media screen and (max-width: 640px) {
	.naviBox .btnSnsBox { display: block; }
	.snsBox { right: 50px; display: none; background: #fff; padding: 0 5px; }
}
/* 할부 계산기 */
.calculatorBox { }
.calculatorBox .select { background:#e5e5e5; padding: 8px 105px 10px 20px; position: relative; height: 77px; }
.calculatorBox.single .select, .calculatorBox.partner .select  { height: 132px; }
.calculatorBox .select .fince > span {display: inline-block; width: 32%; }
.calculatorBox .select select { }
.calculatorBox .select input[type='text'] { width: 80px; text-align: center; }
.calculatorBox .select input[type="radio"] + span{ background: #fff; position:relative;display:inline-block;padding:3px 10px; border: 1px solid #ccc; border-radius: 20px; font-weight: bold; }
.calculatorBox .select input[type="radio"] + span:before {display: none; }
.calculatorBox .select input[type="radio"]:checked ~ span{ background:#00aade; border: 1px solid #00aade; color:#fff;}
.calculatorBox .select input[type="radio"]:checked + span:before {display: none; }

.calculatorBox .select em { font-weight: bold; font-style: normal; margin-right: 5px;}
.calculatorBox .select .goods { border-top: 1px dashed #999; margin-top: 8px; padding-top: 8px; }
.calculatorBox .select .goods > span {display: inline-block; width: 32%; }
.calculatorBox .select .other { border-top: 1px dashed #999; margin-top: 8px; padding-top: 8px; }

.calculatorBox .select button { position: absolute; right: 0; top: 0; width: 80px; height: 95px; padding: 0; text-align: center; line-height: 95px; font-size: 24px; color: #fff; background: #00aade; }
.calculatorBox .select button:hover {background: #666; }
.calculatorBox .select button:before { position: absolute; content: ""; width: 0; height: 0; left:-25px; top: 0; border-bottom: 47px solid transparent; border-right: 25px solid #00aade; }
.calculatorBox .select button:after { position: absolute; content: ""; width: 0; height: 0; left:-25px; bottom: 0; border-top: 47px solid transparent; border-right: 25px solid #00aade; }
.calculatorBox .select button:hover:before { position: absolute; content: ""; width: 0; height: 0; left:-25px; top: 0; border-bottom: 47px solid transparent; border-right: 25px solid #666; }
.calculatorBox .select button:hover:after { position: absolute; content: ""; width: 0; height: 0; left:-25px; bottom: 0; border-top: 47px solid transparent; border-right: 25px solid #666; }
.calculatorBox.single .select button, .calculatorBox.partner .select button {height: 150px; line-height: 150px; }
.calculatorBox.single .select button:before, .calculatorBox.partner .select button:before { border-bottom: 75px solid transparent;}
.calculatorBox.single .select button:after, .calculatorBox.partner .select button:after { border-top: 75px solid transparent; }
.calculatorBox.single .select button:hover:before, .calculatorBox.partner .select button:hover:before { border-bottom: 75px solid transparent; }
.calculatorBox.single .select button:hover:after, .calculatorBox.partner .select button:hover:after { border-top: 75px solid transparent; }


@media screen and (max-width: 800px) {
	.calculatorBox .select { padding: 8px 15px 10px 15px; margin-bottom: 60px; height: auto; }
	.calculatorBox.single .select, .calculatorBox.partner .select  { height: auto; }
	.calculatorBox:not(.dual) .select input[type='text'] { width: 50px;}
	.calculatorBox:not(.dual) .select b {display: none; }
	.calculatorBox .select button { position: absolute; left: 50%; right: auto; top: auto; bottom: -50px;  width: 80px; height: 40px; padding: 0; text-align: center; line-height: 40px; font-size: 20px; margin-left: -40px }
	.calculatorBox.single .select button, .calculatorBox.partner .select button {height: 40px; line-height: 40px; }
	.calculatorBox .select button:before, .calculatorBox .select button:after { display: none; }
}
@media screen and (max-width: 640px) {
	.calculatorBox .select em { display: inline-block; width: 90px;}
	.calculatorBox:not(.dual) .select input[type='text'] { width: 80px;}
	.calculatorBox:not(.dual) .select b {display: inline-block;}
	.calculatorBox .select .fince > span { width: 49%; margin-bottom: 5px; }
	.calculatorBox .select .goods > span { width: 49%;  margin-bottom: 5px; }
}
@media screen and (max-width: 520px) {
	.calculatorBox .select em { display: inline-block; width: 45%;}
	.calculatorBox:not(.dual) .select .fince > span { width: 100%; display: blokc;}
	.calculatorBox:not(.dual) .select .goods > span { width: 100%; display: blokc;}
}

.calculatorBox.dual .select { padding: 8px 15px 10px 15px; margin-bottom: 60px; height: auto; }
.calculatorBox.dual .select em { display: inline-block; width: 90px;}
.calculatorBox.dual .select .fince > span { width: 49%; margin-bottom: 5px; }
.calculatorBox.dual .select .goods > span { width: 49%;  margin-bottom: 5px; }
.calculatorBox.dual .select button { position: absolute; left: 50%; right: auto; top: auto; bottom: -50px;  width: 80px; height: 40px; padding: 0; text-align: center; line-height: 40px; font-size: 20px; margin-left: -40px }
.calculatorBox.dual .select button:before, .calculatorBox.dual .select button:after { display: none; }

.calculatorBox .compair {margin: 20px 0;}
.calculatorBox.single .compair .financeBox {float: left; width: 60%; border-bottom: 3px solid #666; }
.calculatorBox.single .compair .financeBox ul.fince {height: 326px; overflow-y: auto; }
.calculatorBox.single .compair .financeBox ul.fince.open {height: auto;}
.calculatorBox.single .compair .mainBox {float: right; width: 38%; }
.calculatorBox.single .compair .financeBox dt button { position: absolute; top:0; right: 0; width: 33px; height: 33px; font-size:0px; line-height:0; text-indent:-9999px; background: url(/images/icon-27.png) -200px -11px no-repeat; background-size: 300px 200px;}
.calculatorBox.single .compair .financeBox dt button.open {background: url(/images/icon-27.png) -250px -11px no-repeat; background-size: 300px 200px;}
.calculatorBox .off { display: none; }
.calculatorBox .compair:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
@media screen and (max-width: 800px) {
	.calculatorBox.single .compair .financeBox {float: none; width: 100%; }
	.calculatorBox.single .compair .mainBox {float: none; width: 100%; margin-top: 20px; }
	.calculatorBox.single .compair .financeBox ul.fince {height: 250px;}
}
@media screen and (max-width: 640px) {
	.calculatorBox.single .compair .financeBox ul.fince {height: 150px;}
}

.calculatorBox .result { position: relative; }
.calculatorBox .result .left {border: 3px solid #00aade; box-sizing: border-box; border-bottom:0; }
.calculatorBox .result .right {border: 3px solid #6f6f6f; box-sizing: border-box; border-top:0;}
/*
.calculatorBox .result .goods { display: none;  }
.calculatorBox .result .goods.on { display: block; }
*/
.calculatorBox .result .goods  { position: relative; font-weight: bold; color: #00aade; padding: 10px 0 10px 160px;  font-size: 17px; border-bottom: 1px solid #ccc; background: #fff; height: 25px; }
.calculatorBox .result .goods  img { position: absolute; top: 0px; left: 0px; width: 150px;  }

.calculatorBox .result .pmt { padding: 5px 15px; text-align: right; background: #00aade; position: relative;}
.calculatorBox .result .pmt span{ font-size: 20px; color: #fff;  }
.calculatorBox .result .pmt span.pmtM{ font-size: 14px; color: #fff; display: block; }
.calculatorBox .result .pmt span:first-child { float: left; width: 100px; text-align: center; }
.calculatorBox .result .inter { padding: 5px 15px; text-align: right; background: #6f6f6f;  position: relative;}
.calculatorBox .result .inter span{ font-size: 20px; color: #fff;  }
.calculatorBox .result .inter span:first-child { float: left; width: 100px; text-align: center; }
.calculatorBox .result .cost {position: relative;}
.calculatorBox .result .cost.set { background: #fbf8f3; }
.calculatorBox .result .cost.set li:not(:first-child) { border-top: 1px dashed #d9d0c0; }
.calculatorBox .result .cost.rate { background: #f8f8f8; }
.calculatorBox .result .cost.set li { text-align: right; padding: 7px 15px; position: relative; z-index: 10; }
.calculatorBox .result .cost.rate li { text-align: right; padding: 8px 15px; position: relative; z-index: 10; }
.calculatorBox .result .cost.rate li:not(:first-child) { border-top: 1px dashed #cccccc; }
.calculatorBox .result .cost li span:first-child { float: left; width: 100px; text-align: center; }
.calculatorBox .result .unit {margin-left: 5px; }
/*
.calculatorBox .result span.gap {float: left; margin-left: 30px; font-size: 13px; font-weight: normal; }
*/
.calculatorBox .result span.gap {position: absolute; top: 10px; left: 140px; font-size: 12px; font-weight: normal; }
.calculatorBox .result span.gap em { font-style: normal; margin-left: 5px; }
.calculatorBox .result span.gap.low { color: #12ae00; }
.calculatorBox .result span.gap.high { color: #ef3810; }
.calculatorBox .result .pmt span.gap, .calculatorBox .result .inter span.gap{ color: #fff; }

.calculatorBox .result .cost.rate li.sum { border-top: 1px solid #ccc; padding: 9px 15px; font-weight: bold; }

.calculatorBox .result .cost.set:before {content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 130px; background: #f7f0e4; z-index: 1; }
.calculatorBox .result .cost.rate:before {content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 130px; background: #ededed; z-index: 1; }

.calculatorBox.partner .result .left {float: left; width: 50%; border-right: 0; }
.calculatorBox.partner .result .right {float: right; width: 50%; border-top: 3px solid #6f6f6f; border-bottom: 0; }

.calculatorBox .result:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

@media screen and (max-width: 800px) {
	.calculatorBox.partner .result .left {float: none; width: auto; border-right: 3px solid #00aade; }
	.calculatorBox.partner .result .right {float: none; width: auto; border-top: 0 ; border-bottom: 3px solid #6f6f6f; }
}

.calculatorBox .schedule { margin-top: 20px; margin-bottom: 30px; }

/*
.calculatorBox:not(.dual) .schedule .left { float: left; width: 49%; }
.calculatorBox:not(.dual) .schedule .right {float: right;  width: 49%; }
.calculatorBox.dual .schedule .right {display: none; }
*/
.calculatorBox .schedule .right { display: none; }
.calculatorBox .schedule.cnt2 .left { float: left; width: 49%; }
.calculatorBox .schedule.cnt2 .right {float: right;  width: 49%; display: block; }

.calculatorBox .schedule .list { background: #f7f7f7; width: 100%; border-top: 3px solid #666; }
.calculatorBox .schedule .list tr th, .calculatorBox .schedule .list tr td {text-align: center; border-top: 1px solid #fff; border-left: 1px solid #fff; padding: 5px 0;}
.calculatorBox .schedule .list tr th { background: #f7f0e4; }
.calculatorBox .schedule .list tr td:first-child { background: #ededed;}
.calculatorBox .schedule .list tr.cnt6 td { background: #f7f0e4; border-bottom: 1px solid #666; }
.calculatorBox .schedule .list tr.start td { font-weight: bold; }
.calculatorBox .schedule .list tr.last td { font-weight: bold; border-bottom: 1px solid #666; }

.calculatorBox .schedule .graph { background: #f7f7f7; padding: 10px 20px; margin-bottom: 20px; border-top: 3px solid #666; }
.calculatorBox .schedule .graph .index { text-align: right; font-size: 13px; line-height: 1.0 ; margin-bottom: 10px; }
.calculatorBox .schedule .graph .index em { font-style: normal; float: left; line-height: 1.0  }
.calculatorBox .schedule .graph .index span { display: inline-block; width: 20px; height: 17px;margin-left: 10px;  line-height: 1.0 }
.calculatorBox .schedule .graph table { width: 100%; height: 100px; border: 0; }
.calculatorBox .schedule .graph td {padding: 0; text-align: center;  border: 0; vertical-align: top; }
.calculatorBox .schedule .graph td span{ display:block;  width: 70%;  text-indent: -9999px;}
.calculatorBox .schedule .graph span.pay {background: #3b4156;}
.calculatorBox .schedule .graph span.rate {background: #ef3810;}

@media screen and (max-width: 800px) {
	.calculatorBox .schedule .graph { padding: 10px 5px;  }
}

.calculatorBox .schedule:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.calculatorBox.dual .L {float: left; width: 49%;}
.calculatorBox.dual .R  {float: right; width: 49%;}

.calculatorBox .buttonBox {text-align: center; clear: both; margin-bottom: 15px;  }
.calculatorBox .buttonBox.cnt1 img {width: 100%;  display: inline-block; }
.calculatorBox.dual:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

@media screen and (max-width: 800px) {
	.calculatorBox.dual .body{ min-width: 600px; }
	.calculatorBox.dual .body > div{ min-width: 290px; }
	.calculatorBox.dual .select em { display: inline-block; width: 45%;}
	.calculatorBox.dual .select .fince > span { width: 100%; display: blokc;}
	.calculatorBox.dual .select .goods > span { width: 100%; display: blokc;}
	.calculatorBox .result span.gap {top: -2px; left: 100px; font-size: 12px; font-weight: normal; }
}
/* 중고차 할부 비교 */
.financeUsed { margin: 30px 0; }
.financeUsed .index { height: 40px; background: #f6f6f6; border-bottom: 1px solid #ddd; position: relative; }
.financeUsed .index span { top: 10px; }

.financeUsed li > a span { top: 20px; }

.financeUsed .rate { position: absolute; right: 45%; text-align: right; display: inline-block; }
.financeUsed .cost { position: absolute; right: 25%; text-align: right; display: inline-block; color: #ff7a00; }
.financeUsed .pmt { position: absolute; right: 5%; text-align: right; display: inline-block; color: #00aade; }
.financeUsed .error { position: absolute; left: 40%; display: inline-block; color: #ff7a00; }

.financeUsed .compare { margin-right: 5px; }
.financeUsed .compare li { margin-top: 8px; position: relative; box-shadow: 3px 3px 5px #ddd; border: 1px solid #fff; }
.financeUsed .compare li > a { background: #fff; display: block; width: 100%; box-sizing: border-box; height: 60px; }
.financeUsed .compare li.on { border: 1px solid #f06e00;}
.financeUsed .compare li.on:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 15px solid transparent; border-top: 15px solid #f06e00; }

.financeUsed .compare li > a:hover { text-decoration: none; background: #e8e8e8; }
.financeUsed .compare li .rank { position: absolute; top: 0px; left: 0; width: 28px; height: 100%; background: #d1d1d1;  color: #fff; font-size: 20px; text-align: center; line-height: 38px; font-family: Century Gothic,arial,tahoma; }
.financeUsed .compare li .logo { position: absolute; top: 15px; left: 40px; }
.financeUsed .compare li .logo img{ width: 100px; }
.financeUsed .compare li .name { position: absolute; top: 19px; left: 160px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; font-weight: bold; }
.financeUsed .compare li .gap { position: absolute; top: 9px; right: 35%;  color: #ef3810; font-size: 13px; display: none; }
.financeUsed .compare li .unit {margin-left: 3px; font-size: 13px; }
.financeUsed .compare li .num { font-weight: bold; font-size: 16px; }

.financeUsed .compare li.best a:after { content: ""; position: absolute; width: 32px; height: 18px; top: 0px; left: 10px; background: url(/images/pattern-24.png) -13px -76px no-repeat; background-size: 250px 250px; }

.financeUsed .compare li .more { margin: 0 10px 0 40px; border-top: 1px dashed #ccc; padding : 10px 0; }
.financeUsed .compare li .more .button { text-align: center; display: none;}
.financeUsed .compare li.on .more .button { display: block; margin-top: 10px; }
.financeUsed .compare li .more .button button { padding: 3px 10px; color: #fff; background: #999999; display: inline-block; border-radius: 15px; }
.financeUsed .compare li .more .button button:hover { background: #666666; text-decoration: none; }

.financeUsed .compare li .detail { border-bottom: 1px dashed #ccc; padding-bottom : 10px; margin-bottom: 10px; color: #00aade;  }
.financeUsed .compare li .detail span {margin: 0 10px; display: inline-block; }

.financeUsed .compare li dt {font-weight: bold; padding-left: 10px; }
.financeUsed .compare li dd { padding-left: 80px; margin-top: -20px; padding-bottom: 5px; }

@media screen and (max-width: 750px) {
	.financeUsed .index span { display: none; }
	.financeUsed .compare li > a { height:160px; }
	.financeUsed .compare li > a { height: 100px; }
	.financeUsed .compare li .name { top: 50px; left: 45px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; }
	
	.financeUsed .compare .rate { top: 10px; right: 3%; }
	.financeUsed .compare .rate:before { content: "금리 "; font-size: 13px; }
	.financeUsed .compare .costR { top: 50px; right: 3%; }
	.financeUsed .costR:before { content: "실납부이자 "; font-size: 13px; }
	.financeUsed .compare .cafe { top: 15px; right: 3%; }
	.financeUsed .compare .cafe.line2 { top: 5px; right: 3%; }
	.financeUsed .compare .pmt { top: 65px; right: 3%;}
	.financeUsed .compare .pmt:before { content: "월 할부금 "; font-size: 13px; }
	.financeUsed .compare li dd {padding-bottom: 20px;}
	.financeUsed .compare .cost{ margin-top:5px; top: 30px; right: 3%;	}
	.financeUsed .compare .cost:before { content: "이자합계 "; font-size: 13px;	}

}
@media screen and (max-width: 600px) {
	.financeUsed .compare li dd {padding-left: 30px; margin-top: 5px;}
}

/* 자동차세 계산기 추가 */
.calculatorBox .select .main { }
.calculatorBox .select .main .kind { float: left; width: 60% }
.calculatorBox .select .main .use { float: left; width: 40% }
.calculatorBox .select .main:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.calculatorBox .select .other > div { display: none; }
.calculatorBox .select .other > div.on { display: block; }
.calculatorBox .select .title { font-weight: bold; padding-right: 20px; }
.calculatorBox .select .title.year { padding-left: 50px; }

.cartaxBox {margin: 30px 0; }
.cartaxBox .box .year { float: left; width: 40%}
.cartaxBox .box .half { float: right; width: 58%}
.cartaxBox .box h3 { text-align: center; padding-bottom: 10px;}
.cartaxBox .box .year .base { border-top: 2px solid #666; text-align: center; padding: 15px; background: #f7f0e4; font-size: 16px;  }
.cartaxBox .box .year .cost { padding: 8px 15px; text-align: right; background: #00aade; position: relative;}
.cartaxBox .box .year .cost span{ font-size: 26px; color: #fff; font-weight: bold;  }
.cartaxBox .box .year .cost .desc{ position: absolute; top: 15px; left: 10px; font-size: 14px; }
.cartaxBox .box .year .cost .unit{ font-size: 20px; margin-left: 5px;  }
.cartaxBox .box:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

.cartaxBox .boxB {margin-top: 30px; }
.cartaxBox .boxB h4 { text-align: center; padding-bottom: 8px;}
.cartaxBox .boxB .baseP, .cartaxBox .boxB .baseB {float: left; width: 32%; margin-right: 2%; }
.cartaxBox .boxB .baseT {float: left; width: 32%; }
.cartaxBox .boxB .baseS {float: left; width: 49%; margin-right: 2%; }
.cartaxBox .boxB .baseM {float: left; width: 49%;}
.cartaxBox .boxB .baseS h4, .cartaxBox .boxB .baseM h4 { margin-top: 20px; }
.cartaxBox .boxB:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}


.cartaxBox .boxC h3 { margin-top: 30px; }
/*
.cartaxBox table { background: #f7f7f7; width: 100%; border-top: 2px solid #666; border-bottom: 1px solid #666; }
.cartaxBox table tr th, .cartaxBox table tr td {text-align: center; border-top: 1px solid #fff; border-left: 1px solid #fff; padding: 7px 5px;}
.cartaxBox table tr th { background: #f7f0e4; }
.cartaxBox table tr td:first-child { background: #ededed;}
.cartaxBox table tr.cnt6 td { background: #f7f0e4; border-bottom: 1px solid #666; }
.cartaxBox table tr.start td { font-weight: bold; }
.cartaxBox table tr.last td { font-weight: bold; border-bottom: 1px solid #666; }

*/
.cartaxBox table tr td.on {color: #fff; background: #00aade; }
.cartaxBox table tr td .rate { font-size: 13px; color: #00aade; }
.cartaxBox table tr td.on .rate {color: #fff; }

.cartaxBox .discount {}
.cartaxBox .discount dl {border-top: 1px solid #ccc; padding-top: 10px; }
.cartaxBox .discount dt { font-weight: bold; font-size: 16px; }
.cartaxBox .discount dd { margin-left: 50px; margin-bottom: 20px; margin-top: -22px; }
.cartaxBox .discount dd ul { margin: 10px 20px; }
.cartaxBox .discount dd ul li:before {content:"- "}

@media screen and (max-width: 800px) {
	.calculatorBox .select .main .kind { float: none; width: auto; position: relative; padding-left: 60px;  line-height: 35px; }
	.calculatorBox .select .main .use { float: none; width: auto; position: relative; padding-left: 60px; margin-top: 10px; }
	.calculatorBox .select .main .title { position: absolute; top: 5px; left: 0; }
	.calculatorBox .select .main .title { position: absolute; top: 5px; left: 0; }
	.calculatorBox .select .other > div { line-height: 35px; }
	.calculatorBox .select .other > div:first-child > span { display: block; }
	.calculatorBox .select .title.year { padding-left: 0; }
	
	.cartaxBox .box .year, .cartaxBox .box .half { float: none; width: auto }
	.cartaxBox .boxB .baseP, .cartaxBox .boxB .baseB, .cartaxBox .boxB .baseT, .cartaxBox .boxB .baseS, .cartaxBox .boxB .baseM {float: none; width: auto; margin-right: 0; }
	.cartaxBox .boxB h3 { padding-bottom: 0; }
	.cartaxBox .boxB h4 { margin-top: 20px; }
}
@media screen and (max-width: 500px) {
	.cartaxBox .discount dd { margin-left: 20px; margin-bottom: 20px; margin-top: 10px; }
}

/* 특가 판매  */
.goodsList { width: 102%; margin-left: -2%; }
.goodsList > li { float: left; width: 48%; margin-left: 2%; margin-bottom: 2%; }
.goodsList li .frame { position: relative; background: #fff; box-shadow: 3px 3px 5px #ddd; width: 100%; padding: 0; box-sizing: border-box; border: 0; height: 245px; }
.goodsList li .frame:before { content: ""; position: absolute;    bottom: 0px;    left: 0;    width: 0;    height: 0;    border-right: 300px solid transparent;    border-bottom: 230px solid #f7f7f7;}
.goodsList li .logo { position: absolute; top: 15px; left: 30px; width: 50px; }
.goodsList li .logo img { width: 100%; }
.goodsList li .title { display: inline-block; font-size: 20px; margin: 16px 0 25px 30px; padding: 0px 0 7px 50px ; height: 25px;  overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; border-bottom: 1px solid #e6e6e6; }
.goodsList li .subject { display: none; /*font-size: 17px; padding: 5px 140px 5px 30px ; height: 25px;  overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;*/ }
.goodsList li .copy { position: absolute; top: 60px; right: 20px; width: 170px; background: #e9dfcf; font-size: 18px; text-align: center; padding: 3px 0; border-radius: 20px; }
.goodsList li .car { position: relative; z-index: 10;}
.goodsList li .car img { width: 300px; margin-left: 10px; margin-top: 10px;}
.goodsList li.hot .frame:after { display: none; /*content: ""; position: absolute; top: 0; right: 0; width: 51px; height: 28px;  background: url(/images/pattern-24.png) -169px -297px no-repeat; background-size: 500px 500px; z-index: 10;*/}
.goodsList li.sold .frame:after { content: ""; position: absolute; bottom: 10px; left: 100px; width: 140px; height: 140px ;  background: url(/images/pattern-24.png) -170px -340px no-repeat; background-size: 500px 500px;     z-index: 20;}
.goodsList li a, .goodsList li .soldout { position: absolute; bottom: 10px; right:10px; width: 190px; height: 33px; line-height: 33px; padding: 0; text-align: center; color: #fff; z-index: 20;}
.goodsList li.goodsA a {background: #5d3414 }
.goodsList li.goodsB a {background: #5d8519 }
.goodsList li.goodsC a {background: #1355a5 }
.goodsList li.goodsD a {background: #652866 }
.goodsList li .soldout {background: #666666 }
.goodsList li a:hover{text-decoration: none; background: #00aade;}
.goodsList li .price { position: absolute; bottom: 95px; right: 8px; width: 190px; text-align: center; z-index: 15}
.goodsList li .price .name { font-size: 18px}
.goodsList li .price .data { font-size: 28px; font-weight: bold; color: #999; line-height: 1.2; background: rgba(255,255,255,0.8) }
.goodsList li .sales { position: absolute; bottom: 55px; right: 10px; z-index: 15; width: 190px; text-align: center;  z-index: 15}
.goodsList li .sales li .type {display: none; }
.goodsList li .sales li .month { font-weight: bold; font-size: 30px; display: inline-block; position: relative; padding-left: 35px; padding-right: 25px; color: #ef3810; letter-spacing: -1px; line-height: 1.2;  background: rgba(255,255,255,0.8)}
.goodsList li .sales li .month:before {content: "월"; font-size: 26px; position: absolute; top: 2px; left: 0; font-weight: normal; line-height: 1.2; }
.goodsList li .sales li .month:after {content: "원";  font-size: 26px; position: absolute; top: 2px; right: 0; font-weight: normal; line-height: 1.2; }
.goodsList:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

/*  goodsBox goodsBanner goodsBannerView 제거 예정 */



.goodsBox { background: #f2f2f2; padding-top: 10px;  padding-bottom: 10px; }
.goodsBox .sales dt { position: relative; z-index: 10; margin-top: 50px; margin-left: 70px; width: 18%; font-size: 25px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; }
.goodsBox .sales dt:before {content: ""; position: absolute; top: 0; left: -40px; width: 35px; height: 35px; background: url(/images/icon-27.png) -244px -105px no-repeat; background-size: 300px 200px;}
.goodsBox .sales dd { position: relative; z-index: 10; padding: 10px 0 10px 25%; margin-top: -70px; border-bottom: 1px dashed #cccccc; min-height: 150px;}
.goodsBox .price ul { width: 102%; margin-left: -2%; }
.goodsBox .price ul li { float: left; width: 31.3%; margin-left: 2%; margin-bottom: 2%; }
.goodsBox .price.cnt4 ul li {width: 23%; }
.goodsBox .price ul li .frame { position: relative; background: #fff; box-shadow: 3px 3px 5px #ddd; width: 100%; padding: 0; box-sizing: border-box; border: 5px solid #fff; height: 155px; padding: 10px;}
.goodsBox .price ul li.hot .frame { border: 5px solid #ff7800; }
.goodsBox .price ul li.hot .frame:after { content: ""; position: absolute; top: 0; right: 7px; width: 51px; height: 28px;  background: url(/images/pattern-24.png) -169px -297px no-repeat; background-size: 500px 500px; z-index: 10;}
.goodsBox .price ul li .frame .name { font-size: 20px; margin-top: 5px;}
.goodsBox .price ul li .frame .type { font-size: 20px; margin-top: 10px;}
.goodsBox .price ul li .frame .type .box { font-size: 20px; padding: 2px 5px; background: #000; color: #fff; }
.goodsBox .price ul li .frame .month { font-size: 24px; margin-top: 10px; text-align: center; color: #ae0505; font-weight: bold;  }
.goodsBox .price ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.goodsBox .infos > div { padding: 20px; margin-bottom: 20px; background: #fff; box-shadow: 3px 3px 5px #ddd; display: table; width: 100%; box-sizing: border-box; font-size: 15px; line-height: 180%; }
.goodsBox .sales dd.steps {border-bottom: 0;}

.goodsBox .buttonBox {margin-bottom: 10px;}
.goodsBox .buttonBox img { display: block; width: 100%; }
.goodsBox .buttonBox a { display: block; width: 100%; text-align: center; }
.goodsBox .buttonBox.cnt1 div { width: 50%; margin: 0 auto; }
.goodsBox .buttonBox.cnt1 img {width: 100%;  display: inline-block; }
.goodsBox .buttonBox.cnt2 div { float: left; width: 50%; }
.goodsBox .buttonBox.cnt2:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

/*

.goodsBanner { background: #919191;  }
.goodsBanner .frame { background-size: cover; height: 320px; position: relative; }
.goodsBanner.goodsG .frame { background: url(/images/goods/list-G-02.jpg) 50% 50%; background-size: cover; }
.goodsBanner.goodsL .frame { background: url(/images/goods/list-L-02.jpg) 50% 50%; background-size: cover; }
.goodsBanner.goodsP .frame { background: url(/images/goods/list-P-02.jpg) 50% 50%; background-size: cover; }
.goodsBanner.goodsZ .frame { background: url(/images/goods/list-Z-02.jpg) 50% 50%; background-size: cover; }
.goodsBanner .text { position: absolute; top: 80px; left: 20px; width: 400px; height: 100px; background: rgba(0,0,0,0.3)}
.goodsBanner .text .title { font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  color: #fff; font-size: 28px; text-align:center; padding-top: 15px;}
.goodsBanner .text .copy { font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  color: #fff; font-size: 22px; text-align:center;padding-top: 5px;}


.goodsBannerView.goodsG { background: url(/images/goods/view-G-02.jpg) 50% 50%; background-size: cover;}
.goodsBannerView.goodsL { background: url(/images/goods/view-L-02.jpg) 50% 50%; background-size: cover;}
.goodsBannerView.goodsP { background: url(/images/goods/view-P-02.jpg) 50% 50%; background-size: cover;}
.goodsBannerView.goodsZ { background: url(/images/goods/view-Z-02.jpg) 50% 50%; background-size: cover;}
.goodsBannerView .frame {position: relative; height: 210px; }
.goodsBannerView .title { font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; font-size: 30px; position: absolute; top: 24px; left: 125px; text-align: center; width: 200px; font-weight: bold; color: #fff; }
.goodsBannerView .car { position: absolute; bottom: 10px; left: 240px;}
.goodsBannerView .name { position: absolute; top: 40px; right: 0;  font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; font-size: 26px; font-weight: bold; text-align: center; width: 370px; z-index: 50; letter-spacing: -1px; }
.goodsBannerView.goodsG .name {color: #ffea97}
.goodsBannerView.goodsL .name {color: #f5f7b3}
.goodsBannerView.goodsP .name {color: #c4e7f3}
.goodsBannerView.goodsZ .name {color: #aea5cc}
.goodsBannerView .subject { position: absolute; top: 80px; right: 0;  font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; font-size: 30px; font-weight: bold; text-align: center; width: 370px; z-index: 50; color: #fff; letter-spacing: -1px; }
.goodsBannerView .price { position: absolute; top: 120px; right: 0;  font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; font-size: 40px; font-weight: bold; text-align: center; width: 370px; z-index: 50; color: #fff; letter-spacing: -1px; }


.goodsBanner .text { position: absolute; top: 80px; left: 20px; width: 400px; height: 100px; background: rgba(0,0,0,0.3)}
.goodsBanner .text .title { font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  color: #fff; font-size: 28px; text-align:center; padding-top: 15px;}
.goodsBanner .text .copy { font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  color: #fff; font-size: 22px; text-align:center;padding-top: 5px;}


@media screen and (max-width: 1100px) {
	.goodsBannerView .body { background-position-x: -400px; background-position-y: 50%;}
	.goodsBannerView.goodsG .body { background-image: url(/images/goods/view-G-02.jpg);}
	.goodsBannerView.goodsL .body { background-image: url(/images/goods/view-L-02.jpg);}
	.goodsBannerView.goodsP .body { background-image: url(/images/goods/view-P-02.jpg);}
	.goodsBannerView.goodsZ .body { background-image: url(/images/goods/view-Z-02.jpg);}
}
*/
@media screen and (max-width: 1060px) {
	/*
	.goodsBannerView .body { padding: 0;}
	*/
	.goodsBox .sales dd { padding: 10px 0 10px 20%;}
	.goodsBox .steps img { width: 100%; }
}
@media screen and (max-width: 800px) {
	.goodsList { width: 100%; margin-left: 0; }
	.goodsList li { float: none; width: auto; margin-left: 0;}
	.goodsList li.sold .frame:after { content: ""; position: absolute; bottom: 10px; left: 50%; margin-left: -70px; width: 115px; height: 115px ;  background: url(/images/pattern-24.png) -133px -272px no-repeat; background-size: 400px 400px; }
	/*
	.goodsBanner .body { padding: 0; }
	.goodsBannerView .body { background-position-x: -760px;}
	.goodsBannerView .title { font-size: 24px; position: absolute; top: 15px; left: 20px; }
	.goodsBannerView .car { left: 0;}
	*/
	.goodsBox .sales dt {margin: 10px 20px 10px 40px; width: auto;}
	.goodsBox .sales dd { padding: 0; margin-top: 0; }
	.goodsBox .price.cnt4 ul li {width: 31.3%; }
	/*
	.goodsBannerView .body { background-position-x: 0px; background-position-y: 50%; padding: 0; }
	.goodsBannerView .frame {position: relative; height: 230px; }
	.goodsBannerView.goodsG .body { background-image: url(/images/goods/view-G-02-M.jpg);}
	.goodsBannerView.goodsL .body { background-image: url(/images/goods/view-L-02-M.jpg);}
	.goodsBannerView.goodsP .body { background-image: url(/images/goods/view-P-02-M.jpg);}
	.goodsBannerView.goodsZ .body { background-image: url(/images/goods/view-Z-02-M.jpg);}
	.goodsBannerView .title { top: 25px; left: 0; background: rgba(0,0,0,0.8)}
	.goodsBannerView .name { text-align: right; padding-right: 15px; padding-left: 10px }
	.goodsBannerView .subject { text-align: right; padding-right: 15px; padding-left: 10px }
	.goodsBannerView .price { top: 140px; text-align: right; padding-right: 15px; }
	*/
}
@media screen and (max-width: 640px) {
	.goodsBox .price ul li, .goodsBox .price.cnt4 ul li {width: 48%; }
	/*
	.goodsBannerView .body { background-position-x: -80px;}
	.goodsBannerView .title { top: 5px; font-size: 20px;}
	.goodsBannerView .name { font-size: 24px; width: auto;}
	.goodsBannerView .subject {top: 75px; font-size: 28px; width: auto; }
	.goodsBannerView .price { top: 160px; font-size: 32px;}
	.goodsBannerView .car img{ width: 85%}
	*/
}
@media screen and (max-width: 550px) {
	.goodsList li .frame { height: 200px; }
	.goodsList li .frame:before { border-right: 200px solid transparent;    border-bottom: 180px solid #f7f7f7;}
	.goodsList li .title { margin: 10px 0 10px 10px; padding: 0px 0 7px 40px ; height: 25px; font-size: 17px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; border-bottom: 1px solid #e6e6e6; width: 80% }
	.goodsList li .logo { top: 8px; left: 5px; }
	.goodsList li .copy { top: 42px; right: 10px; font-size: 16px; width: auto; padding-left: 0px; padding-right: 10px; border-radius: 0;  }
	.goodsList li .copy:before {content: ""; position: absolute; left: -20px; top: 0; width: 0; height: 0;  border-left: 20px solid transparent;    border-top: 30px solid #e9dfcf; }
	.goodsList li .car img { width: 60%; margin-left: 0px; margin-top: 0px;}
	.goodsList li a, .goodsList li .soldout {  width: 155px; bottom: 0; right: 0; }
	.goodsList li .price { bottom: 80px; right: 10px;  width: auto; }
	.goodsList li .price .data { font-size: 22px; border-radius: 15px; padding-left: 5px;}
	.goodsList li .sales { bottom: 45px; right: 10px;  width: auto; }
	.goodsList li .sales li .month { font-size: 24px; padding-left: 30px; padding-right: 20px; border-radius: 16px; }
	.goodsList li .sales li .month:before {content: "월"; font-size: 20px; left: 5px;}
	.goodsList li .sales li .month:after {content: "원";  font-size: 20px; }
	/*
	.goodsBanner .text { width: 80%; height: auto; top: 10%; }
	.goodsBanner .frame {  height: 250px;}
	.goodsBannerView .body { background-position-x: 100%;}
	.goodsBannerView .name { font-size: 20px;}
	.goodsBannerView .subject {top: 70px; font-size: 24px;}
	.goodsBannerView .price { top: 170px; font-size: 28px;}
	.goodsBannerView .car img{ width: 70%}
	*/
}
@media screen and (max-width: 400px) {
	.goodsList li .car img { width: 220px; }
	.goodsBox .price ul { width: 100%; margin: 0; }
	.goodsBox .price ul li, .goodsBox .price.cnt4 ul li {float: none; width: auto; }
}

/* 즉시 출고 */
.fastshipBox { padding: 30px 0; background: #f4f4f4;}
.fastshipBox .desc { background: #333949; position: relative; padding: 10px; margin-bottom: 10px; }
.fastshipBox .desc span { color: #fff; }

.fastshipBox .modelList { width: auto; margin: 0; }
.fastshipBox .modelList li {float: left;  width: 23%; margin: 1%; }
.fastshipBox .modelList li a { padding: 10px 0; display: inline-block; }
.fastshipBox .modelList li a .cnt { margin-left: 3px; color: #ff7a00;}

.fastshipBox .filter { margin-bottom: 20px; background: #fff; padding: 20px 20px 5px 20px; }
.fastshipBox .filter li { margin-bottom: 10px; padding-left: 55px; position: relative; }
.fastshipBox .filter li span { font-weight: bold; position: absolute; top: 5px; left: 0; }
.fastshipBox .filter li[kind='model'] div { line-height: 30px; font-weight: bold;}
.fastshipBox .filter a { display: inline-block; position: relative; padding: 6px 8px 6px 50px; border: 1px solid #ccc; background: #fff; border-radius: 20px; margin-bottom: 5px; }
.fastshipBox .filter button { display: inline-block; position: relative; padding: 4px 8px; border: 1px solid #ccc; background: #fff; border-radius: 20px; margin-bottom: 5px; }
.fastshipBox .filter li[kind='capital'] button { padding: 0; }
.fastshipBox .filter a.on, .fastshipBox .filter button.on { border: 1px solid #ff7a00; }
.fastshipBox .filter a.none, .fastshipBox .filter button.none { border: 1px solid #ccc; background: #f6f6f6; color: #999; }
.fastshipBox .filter a img { width: 50px; position: absolute; top: 0px; left: 0; }
.fastshipBox .filter button img { width: 100px; display: block; }
.fastshipBox .filter a .cnt, .fastshipBox .filter button .cnt { margin-left: 3px; color: #ff7a00; font-weight: normal; }

.fastshipBox .list {background: #fff; padding: 20px; }
.fastshipBox .list > li {padding: 0; border-top: 1px solid #ccc; margin-bottom: 20px; }
.fastshipBox .list > li.off { display:none; }
.fastshipBox .list .lineup { padding: 7px 10px; background: #f4f4f4; font-weight: bold; background: #f4f4f4;  }
.fastshipBox .list .lineup .cnt { margin-left: 3px; color: #ff7a00; float: right; }
.fastshipBox .list .lineup:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

.fastshipBox .list .trim li { position: relative; }
.fastshipBox .list .trim li:not(:first-child) { border-top: 1px dashed #ccc; }
.fastshipBox .list .trim li .cont { padding: 20px 360px 20px 20%; }
.fastshipBox .list .trim li .cont .price { font-weight: bold; width: 100px; font-weight: bold; color: #ff7a00; position: absolute; left: auto; bottom: auto; top: 50%; right: 190px; margin-top: -25px; text-align: center; }
.fastshipBox .list .trim li .cont .cnt { position: absolute; width: 100px; text-align: center; left: auto; bottom: auto; top: 50%; right: 190px; margin-top: 5px; }
.fastshipBox .list .trim li .cont .name { position: absolute; font-weight: bold; margin-bottom: 10px; left: 10px; top: 50%; transform: translateY(-50%); width: 18%; }
.fastshipBox .list .trim li .cont .option { margin-bottom: 8px; padding-left: 10px; }
.fastshipBox .list .trim li .cont .option span { display: inline-block; line-height: 1.2; text-align: left; }
.fastshipBox .list .trim li .cont .option span:not(:last-child):after{content: ","; margin-right: 10px; color: #aaa;  }
.fastshipBox .list .trim li .cont .color { padding-left: 10px; color: #797979; }
.fastshipBox .list .trim li .cont .color span { display: inline-block; line-height: 1.2; text-align: left; }
.fastshipBox .list .trim li .cont span.split { color: #aaa;}
.fastshipBox .list .trim li .cont .goods { position: absolute; bottom: auto; top: 10px; right: 0; transform: translateY(0); display: flex; flex-direction: column; }
.fastshipBox .list .trim li .cont .goods span { display: inline-block; padding: 5px 10px; font-size: 13px; margin-top: 2px; line-height: 1; background: #cccccc; border-radius: 25px 25px 0 25px; color: #fff; font-weight: normal; margin-left: 5px; }
.fastshipBox .list .trim li .cont .goods .typeB { background: #C2894D; }
.fastshipBox .list .trim li .cont .goods .typeR { background: #4156a8; }
.fastshipBox .list .trim li .cont .goods .typeL { background: #2A715A; }
.fastshipBox .list .trim li .no { float: left; font-size: 13px; color: #999; padding: 0 8px; }
/* .fastshipBox .list .trim li .memo { color: #666; font-size: 13px; padding-bottom: 10px; text-align: right; margin-right: 100px; } */
.fastshipBox .file { margin-top: 30px; }
.fastshipBox .file li { margin: 5px 0; }
.fastshipBox .list .button { text-align: center; position: absolute; bottom:10px; right:80px; }
.fastshipBox .list .button button { padding: 3px 10px; color: #fff; background: #999999; display: inline-block; border-radius: 15px; }
.fastshipBox .list .button button:hover { background: #666666; text-decoration: none; }

.fastshipBox .brandFilter { }
.fastshipBox .brandFilter li { float: left; margin-right: 10px; margin-bottom: 10px; }
.fastshipBox .brandFilter li a {display: block; padding:0 15px 0 50px; border: 1px solid #ccc; border-radius: 20px; line-height: 36px;  position: relative; background: #fff; }
.fastshipBox .brandFilter li a img { position: absolute; top: 2px; left: 0; width: 50px;}
.fastshipBox .brandFilter li.all a { padding-left: 15px; }
.fastshipBox .brandFilter li.on a {border: 1px solid #ff7a00; }
.fastshipBox .brandFilter:after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }


@media screen and (max-width: 1200px) {
	.fastshipBox .list .trim li .cont { padding: 20px 300px 20px 20%; }	
	.fastshipBox .list .trim li .cont .price { right: 170px; }
	.fastshipBox .list .trim li .cont .cnt { right: 170px; }
}
@media screen and (max-width: 1100px) {
	.fastshipBox .top { margin: 0 15px 20px 15px;}
	.fastshipBox .modelList { padding: 0 1%;}
}
@media screen and (max-width: 1000px) {
	.fastshipBox .list .trim li .cont { padding: 20px 270px 20px 0px; }
	.fastshipBox .list .trim li .cont .name { position: static; top: 0; transform: translateY(0); width: 100%; }
}
@media screen and (max-width: 900px) {
	.fastshipBox .modelList li {float: left;  width: 31.3%; margin: 1%; }
}
@media screen and (max-width: 640px) {
	.fastshipBox .list { padding: 10px; }
	.fastshipBox .list .carinfo { padding-left: 10px; }
	.fastshipBox .list .carinfo img { width: auto; max-width: 200px; position: relative; top: 0; left: 0; }
	.fastshipBox .list .carinfo .price { position: relative; top: 0; left: 0; width: auto;  }
	.fastshipBox .list .trim li .cont { padding: 20px 80px 50px 0px; }
	.fastshipBox .list .trim li .cont .price { position: absolute; top: auto; right: auto;  width: auto; left: 10px; bottom: 10px; }
	.fastshipBox .list .trim li .cont .cnt { position: absolute; top: auto; right: auto; left: 110px; bottom: 10px; width: auto; }
	.fastshipBox .list .trim li .cont .goods { bottom: 50px; top: auto; flex-direction: column; }
	.fastshipBox .list .trim li .cont .goods span { margin-left: 0; }
	.fastshipBox .list .trim li .cont .company { position: absolute; top: 30px; right: 0; margin: 0;  }
	.fastshipBox .list .trim li .cont .date { position: absolute; top: 60px; right: 10px; width: auto; text-align: right;  }
	.fastshipBox .list .button { right: 0; }
	.fastshipBox .filter li { padding-left: 0;  }
	.fastshipBox .filter li span { display: block; position: relative; top: auto; left: auto; padding-bottom: 10px; }
}
@media screen and (max-width: 600px) {
	.fastshipBox .modelList li {float: left;  width: 48%; margin: 1%; }
}
@media screen and (max-width: 500px) {
	.fastshipBox .list .trim li .cont .company { position: absolute; top: auto; bottom: -5px;  }
	.fastshipBox .list .trim li .cont .company img { width: 100px; }
	.fastshipBox .list .trim li .cont .date { position: absolute; top: auto; bottom: 5px; right: 100px;  }
}


/* 페이지 */
.pageBox { margin-top:10px; text-align:center; }
.pageBox button { border:0; background:#fff; padding:5px 10px; position:relative;}
.pageBox button:hover {background:#f4f4f4;}
.pageBox button.now { font-weight:bold; color:#00aade; }
.pageBox .first, .pageBox .prev, .pageBox .next, .pageBox .last { width:30px; height:30px; }
.pageBox .first:after { content:"《"; position:absolute; top:0; left:0; width:30px; height:30px; line-height:28px; }
.pageBox .prev:after { content:"〈"; position:absolute; top:0; left:0; width:30px; height:30px; line-height:28px; }
.pageBox .next:after { content:"〉"; position:absolute; top:0; left:0; width:30px; height:30px; line-height:28px; }
.pageBox .last:after { content:"》"; position:absolute; top:0; left:0; width:30px; height:30px; line-height:28px; }
.pageBox .first span, .pageBox .prev span, .pageBox .next span, .pageBox .last span { overflow:hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px; }

/* 준비중 */
.readyBox { }
.readyBox .ready { text-align: center; }
.readyBox .ready img { width: 100%; max-width: 700px;}

/* 팝업 */
.layerPopup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
}
.layerPopup .dimBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}
.layerPopup .frame {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width:300px;
  height: auto;
  background-color: #fff;
  z-index: 10;
}
.layerPopup .head {
	position:relative;
	background:#00aade;
	padding:8px 40px 8px 5px;
}
.layerPopup .head h3{
	text-align:center;
	font-size: 17px;
	color:#fff;
}
.layerPopup .head .btnClose {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 40px;
    height: 40px;
    background: url(/images/icon-27.png) -58px -7px no-repeat;
    background-size: 300px 200px;
    font-size:0px; line-height:0; text-indent:-9999px;
}
.layerPopup .content {
	padding:15px;
}
.layerPopup .content form > div {
	padding:8px 0;
}
.layerPopup .content form textarea {
	display:block;
	width:100%;
	height:120px;
	padding:8px;
	line-height:1.8em;
}
.layerPopup .content .buttonBox {
	text-align:center;
	padding:10px 0 0 0;
	margin:0;
}
.layerPopup .content .buttonBox button { background: #666666; color: #fff; padding: 8px 10px; }
.layerPopup .content .buttonBox button:hover { background: #00aade; }
.layerPopup .content .length {font-size: 12px; margin-top: -10px; margin-bottom: -27px;}
.layerPopup .content .writer {margin-right:160px; }
.layerPopup .content .open { float: right; margin-top: -35px;;}

.layerPopup .guide {display:inline-block;font-size:12px;}
.layerPopup .desc {display:inline-block;font-size:12px;}

/* 플러스 친구 */
.plusBox { position: fixed; top: 50%; left: 50%; margin-left: 550px; margin-top: -200px;  z-index: 120 }
.plusBox span { font-size: 13px; }
.plusBox .frame { background: #fff; box-shadow: 3px 3px 5px rgba(0,0,0,0.2); border-radius: 10px; width: 100px;  padding-bottom: 10px; }
.plusBox .frame .kakao { height: 55px; background: #ffefc0 url(/images/plus-01.png) -0px -0px no-repeat; background-size: 300px 200px; line-height: 0; text-indent: -9999px; border-radius: 10px 10px 0 0; }
.plusBox .frame .plus {border-bottom: 1px solid #cfcece; margin: 0 10px; padding-bottom: 10px;  }
.plusBox .frame .plus li { padding-top: 15px; }
.plusBox .frame .plus li a {display: block; width: 100%;  height: 80px; text-align: center; padding-top: 55px;}
.plusBox .frame .plus li.dasys a { background: url(/images/plus-01.png) 5px -120px no-repeat; background-size: 300px 200px; }
.plusBox .frame .plus li.aiauto a { background: url(/images/plus-01.png) -95px -120px no-repeat; background-size: 300px 200px; }
.plusBox .frame .phone { padding: 15px 10px 0px 10px; }
.plusBox .frame .phone a {display: block; width: 100%;  height: 70px; padding-top: 50px; text-align: center;  background: url(/images/plus-01.png) -193px -120px no-repeat; background-size: 300px 200px;  }
.plusBox .mobile { display: none; }
.plusBox .close { display: none; }
.plusBox .side { display: none; }

@media screen and (max-width: 1320px) {
    .plusBox { position: fixed; top: 50%; left: auto; right: 0; margin-left: 0; margin-top: 50px;  }
    .plusBox .frame { display: none; }
    .plusBox .mobile { display: block; width: 50px; height: 100px; background: url(/images/plus-01.png) 100% 0 no-repeat; background-size: 300px 200px; line-height: 0; text-indent: -9999px;  }
    
    .plusBox.open { position: fixed; top: 0; left: 0; right: auto; margin-left: 0; margin-top: -0; width: 100%; height: 100%; }
    .plusBox.open .side { display: block; width: 100%; height: 100%; background-color: rgba( 0,0,0, 0.1 ); cursor: pointer; }
    .plusBox.open .frame { display: block; position: absolute; right: 0; top: 50%; margin-top: -200px; border-radius: 10px 0 0 10px; }
    .plusBox.open .frame .kakao { border-radius: 10px 0 0 0; }
    .plusBox.open .close { position: absolute; top: 0; left: -45px; display: block; width: 40px; height: 40px; border-radius: 20px; background: rgba(0,0,0,0.5) url(/images/icon-27.png) -57px -6px no-repeat; background-size: 300px 200px; line-height: 0; text-indent: -9999px; }
 }
 
 /* 리스렌트 견적 표시 수정 */
.wrapper .layerPopup h3 { padding: 0;}

.layerPopup .tabBox {padding-top: 15px; position: absolute; top: 43px; left: 0; width: 100%; background: #fff; z-index: 10; }
.layerPopup .tabBox ul { margin: 0 15px; background: #f0f0f0; border-bottom: 2px solid #fff; }
.layerPopup .tabBox li { position: relative; float: left; width:17%;}
.layerPopup .tabBox li button {display: block; padding-left: 25px; height: 40px; font-size: 16px; background: #e5e5e5; font-weight: bold; box-shadow: 2px 0 0 0 #fff; width: 100%; overflow: hidden;  white-space: nowrap;}
.layerPopup .tabBox li button:before { content: ""; position: absolute; right: -17px; top: 50%; margin-top: -20px; width:0px; height:0;  border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 15px solid #ffffff; }
.layerPopup .tabBox li button:after { content: ""; position: absolute; right: -15px; top: 50%; margin-top: -20px; width:0; height:0;  border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 15px solid #e5e5e5; }
.layerPopup .tabBox li.on button {background: #00aade; border-right: 0; color: #fff; }
.layerPopup .tabBox li.on button:after { content: ""; position: absolute; right: -15px; top: 50%; margin-top: -20px; width:0; height:0;  border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 15px solid #00aade; }
.layerPopup .tabBox li.no1 button{ padding-left:10px;}
.layerPopup .tabBox li.last button{ box-shadow: 0;}
.layerPopup .tabBox li.no1 { z-index: 20; width: 15%; }
.layerPopup .tabBox li.no2 { z-index: 19; }
.layerPopup .tabBox li.no3 { z-index: 18; }
.layerPopup .tabBox li.no4 { z-index: 17; }
.layerPopup .tabBox li.no5 { z-index: 16; }
.layerPopup .tabBox li.last { z-index: 15; }
.layerPopup .tabBox li.last button:before, .layerPopup .tabBox li.last button:after { display: none;}
.layerPopup .tabBox ul:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.layerPopup .tabBox > button { position: absolute; top: 15px; right: 15px; background: #fff;    border: 2px solid #00aade;    padding: 6px 10px; font-size: 16px; font-weight: bold; border-radius: 4px;  }
.layerPopup .tabBox > button:hover { background: #fff; border: 2px solid #ef3810;}

.layerPopup .buttonBoxF .off { display: none; }
.layerPopup .buttonBoxF button { position: absolute; top: 50%; margin-top: -20px;}
.layerPopup .buttonBoxF button.close { display: none; }
.layerPopup .buttonBoxF button.prev { left: 0px; border: 0; padding:0; width: 50px; height: 80px; font-size:0px; line-height:0; text-indent:-9999px; background: url(/images/arrow-21.png) -60px -50px no-repeat; background-size: 300px 300px; }
.layerPopup .buttonBoxF button.next { right: 0px;  border: 0; padding:0; width: 50px; height: 80px; font-size:0px; line-height:0; text-indent:-9999px; background: url(/images/arrow-21.png) -193px -50px no-repeat; background-size: 300px 300px; }
.layerPopup .buttonBoxF button.prev:hover {background: url(/images/arrow-21.png) -60px -180px no-repeat; background-size: 300px 300px; }
.layerPopup .buttonBoxF button.next:hover {background: url(/images/arrow-21.png) -193px -180px no-repeat; background-size: 300px 300px; }
.layerPopup .buttonBoxF button.next.on  { border: 1px solid #00aade; }

.layerPopup .focus { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; z-index: 160; background: rgba(255,230,205,0.7); }
.layerPopup .focus .left { float: left; width: 50%; text-align: right; }
.layerPopup .focus .right { float: right; width: 50%; text-align: right; }
.layerPopup .focus .title { font-size: 16px; float: left; line-height: 40px; margin-left: 20px; font-weight: bold; }
.layerPopup .focus .sum { font-size: 24px; color: #ff7a00; font-weight: bold; line-height: 40px; }
.layerPopup .focus .unit { font-size: 16px; color: #ff7a00; margin-left: 5px; margin-right: 20px;}
.layerPopup .focus:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}


.layerPopup .deliveryBox { padding-left: 30px; padding-right: 30px; }
.deliveryBox input[type="radio"] + span{ position:relative;display:inline-block;padding:3px 10px; border: 1px solid #ccc; border-radius: 20px; font-weight: bold; margin-bottom: 10px; }
.deliveryBox input[type="radio"] + span:before {display: none; }
.deliveryBox input[type="radio"]:checked ~ span{ background:#ef3810; border: 1px solid #ef3810; color:#fff;}
.deliveryBox input[type="radio"]:checked + span:before {display: none; }

@media screen and (max-width: 800px) {
	.layerPopup .tabBox li button { padding-left: 20px;}
	.layerPopup .tabBox > button { z-index: 21; padding: 6px 5px; }
}

.brandBox.estimate { display: none; margin-top: 60px;}
.brandBox.estimate.on { display: block; }
.modelBox.estimate { display: none; margin-top: 60px; }
.modelBox.estimate.on { display: block; }
/*
#estimateBtnBox { position: absolute; bottom: 0px; width: 100%; left: 0;}
*/
.layerPopup .buttonBoxB.off { display: none; }
.layerPopup .buttonBoxB.focusOn { padding-bottom: 40px;}
.layerPopup .buttonBoxB { text-align: center;}
.layerPopup .buttonBoxB .inner .close {background: #fff;    border: 2px solid #00aade;    padding: 6px 10px; border-radius: 4px; color: #000;}
.layerPopup .buttonBoxB .inner .close:hover { border: 2px solid #ef3810;}
.layerPopup .buttonBoxB .inner .prev { position: relative; padding-left: 5px;}
.layerPopup .buttonBoxB .inner .prev:before { content: ""; position: absolute; left: -13px; top: 50%; margin-top: -17px; width:0; height:0;  border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-right: 13px solid #00aade; }
.layerPopup .buttonBoxB .inner .prev:hover:before { border-right: 13px solid #ef3810; }
.layerPopup .buttonBoxB .inner .next { position: relative;  padding-right: 5px; }
.layerPopup .buttonBoxB .inner .next:before { content: ""; position: absolute; right: -13px; top: 50%; margin-top: -17px; width:0; height:0;  border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-left: 13px solid #00aade; }
.layerPopup .buttonBoxB .inner .next:hover:before { border-left: 13px solid #ef3810; }

.layerPopup .buttonBoxB .inner .prev.off { background: #e8e8e8; }
.layerPopup .buttonBoxB .inner .prev.off:before { border-right: 13px solid #e8e8e8; }
.layerPopup .buttonBoxB .inner .prev.off:hover:before { border-right: 13px solid #e8e8e8; }
.layerPopup .buttonBoxB .inner .next.off { background: #e8e8e8; }
.layerPopup .buttonBoxB .inner .next.off:before { border-left: 13px solid #e8e8e8; }
.layerPopup .buttonBoxB .inner .next.off:hover:before { border-left: 13px solid #e8e8e8; }


.layerPopup .buttonBoxB a, .layerPopup .buttonBoxB button { display: inline-block; font-size: 17px; padding: 6px 10px; color: #fff; background: #00aade; margin: 0 3px; font-weight: bold; border-radius: 3px; }
.layerPopup .buttonBoxB a:hover, .layerPopup .buttonBoxB button:hover { background: #ef3810; text-decoration: none; }
/*
.buttonBoxB a:hover, .buttonBoxB button:hover { background: #00aade; text-decoration: none; }
.choiceBox .buttonBoxB { padding: 20px 0; }
*/

/* 견적 선택창 */
.slideBox.popup > ul > li { display: none; padding-top: 60px; padding-bottom: 10px;} 
.slideBox.popup > ul > li.on { display: block; } 
/* .slideBox.popup .title { font-size:0px; line-height:0; text-indent:-9999px; } */
.slideBox.popup .subTitle { margin-bottom: 15px; border-top: 1px solid #ccc; padding: 5px 10px; background: #666; color: #ffffff;  }
.slideBox.popup .desc { font-size: 13px; color: #999; padding: 0 20px;}
.slideBox.popup .subTitle a { color: #fff; font-size: 12px; float: right; }
.popup .modelList li {float:left; width: 23%; margin-left: 2%; margin-bottom: 15px; }
.slideBox.popup .trimList li { float: left; width: 31.3%; margin-left: 2%; margin-bottom: 2%; }
.slideBox.popup .colorList li { float: left; width: 31.3%; margin-left: 2%; margin-bottom: 20px; }

@media screen and (max-width: 800px) {
	.popup .modelList li { width: 31.3%; margin-left: 2%; margin-bottom: 3%;}
}
@media screen and (max-width: 640px) {
	.popup .modelList li { width: 31.3%; margin-left: 2%; margin-bottom: 3%;}
	.slideBox.popup .trimList  li { float: left; width: 48%; margin-left: 2%; margin-bottom: 2%; }
	.slideBox.popup .colorList li { float: left; width: 48%; margin-left: 2%; margin-bottom: 2%; }
}
@media screen and (max-width: 500px) {
	.popup .modelList { width: 103%; margin-left: -3%; }
	.popup .modelList li { width: 47%; margin-left: 3%; margin-bottom: 3%;}
	.slideBox.popup .trimList li .frame, .slideBox.popup .trimList li a, .slideBox.popup .trimList li button { padding-bottom: 40px;}
	.slideBox.popup .trimList li .info { bottom: 27px;}
}


/* 선택 */
.openStep { background: #fff; border: 2px solid #00aade; padding: 1px 5px; margin-left: 5px; border-radius: 4px; }
.openStep:hover { background: #fff; border: 2px solid #ef3810;}

.choiceBox { background: #f0f1f5;  padding:0;  position: relative; padding-bottom: 30px; }
.choiceBox.leaserent { padding-bottom: 100px; }
[class^='choiceBox goods'] {padding-bottom: 30px; }
.choiceBox .choice {position: relative; }
.choiceBox .choice .car { float: left; width: 60%; position: relative; }
.choiceBox .choice .list { float: right; width: 38%; position: relative; }
.choiceBox .choice .cost { position: absolute; right: 25px; bottom: 10px;}
.choiceBox .choice:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.choiceBox .choice .car .title { position: absolute; top: 20px; left: 40px; background: rgba(0,0,0,0.3); font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  color: #fff; font-size: 28px; padding: 10px 15px;}
.choiceBox .choice .car .model {}
.choiceBox .choice .car .model img { width: 100%; display: block; }
.choiceBox .choice .car .button { position: absolute; right: 10px; bottom: 10px; }
.choiceBox .choice .car .button a, .choiceBox .choice .car .button button { padding: 3px 8px; color: #fff; background: #999999; border-radius: 15px; }
.choiceBox .choice .car .button a:hover, .choiceBox .choice .car .button button:hover  { background: #666666; text-decoration: none; }
.choiceBox .choice .list {padding-top: 15px;}
.choiceBox .choice .list {padding-bottom: 70px; }
.choiceBox .choice .list > li { position: relative; border-bottom: 1px solid #e6e6e6; padding: 5px 50px 5px 10px; }
.choiceBox .choice .list > li.off { display: none;  }
[class^='choiceBox goods'] .choice .list > li { padding-right: 10px; }
.choiceBox .choice .list .subject { border: 0; text-align: center; margin-bottom: 10px;  }
.choiceBox .choice .list .taxDC span { color: #ef3810;  }
.choiceBox .choice .list .subject span { display: inline-block; background: #e9dfcf; font-size: 18px; padding: 3px 20px; font-weight: bold;  border-radius: 20px; }

.choiceBox .choice .list .nameT { font-weight: bold;  color: #00aade; }
.choiceBox .choice .list .nameT span {font-size: 17px; }
[class^='choiceBox goods']  .choice .list .nameT { padding-bottom: 20px; }


.choiceBox .choice .list .title { width: 40px; position: absolute; top: 5px; left: 10px;}
.choiceBox .choice .list .contents { margin-left: 50px; min-height: 26px;}
.choiceBox .choice .list .price { float: right; font-weight: normal; }
.choiceBox .choice .list button { position: absolute; top: 5px; right: 0px;}
.choiceBox .choice .list .color li { position: relative;  }
.choiceBox .choice .list .color .name { padding-left: 25px; }
.choiceBox .choice .list .color .colorChip { position:absolute; top:0; left:0; border: 1px solid #ccc; }
.choiceBox .choice .list .color .colorChip .colorMain { position:relative; display:inline-block; width:20px; height:20px;}
.choiceBox .choice .list .color .colorChip .colorSub { position:absolute; display:inline-block; width:20px; height:10px; left:0; bottom: 0; }
.choiceBox .choice .list .contents li:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 

.choiceBox .choice .cost span { font-weight: bold; font-size: 40px; display: inline-block; position: relative; padding-right: 25px; color: #ef3810; letter-spacing: -1px; line-height: 1.2; }
.choiceBox .choice .cost span:after {content: "원"; font-size: 20px; position: absolute; top: 18px; right: 0;  line-height: 1.2; }
.choiceBox .choice .cost span:before {content: "합계"; font-size: 20px; position: absolute; top: 18px; left: -45px;  line-height: 1.2; color: #999; }

@media screen and (max-width: 800px) {
	.choiceBox { padding-bottom: 10px; }
	.choiceBox .body { padding: 0; }
	.choiceBox .choice .car { float: none; width: auto; }
	.choiceBox .choice .list { float: none; width: auto; padding: 15px;}
	.choiceBox .choice .car .title { top: 15px; left: 15px; font-size: 24px; padding: 8px 10px;}
	.choiceBox .choice .cost { position: relative; right: auto; bottom: auto; text-align: center; padding-left: 40px; }
}




.choiceBox .highlight { background: #fff; padding: 20px; margin-top: 20px;}
.choiceBox .highlight .notice {text-align: center; color: #00aad2; font-size: 17px; font-weight: bold; margin-bottom: 20px;}
.choiceBox .highlight .best { float: left; width: 33%; text-align: center; position: relative; padding-left: 2%; padding-top: 10px; }
.choiceBox .highlight .request { float: right; width: 30%; position: relative; }
.choiceBox .highlight:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.choiceBox .highlight > div .price { display: inline-block; font-weight: bold; font-size: 30px; position: relative; padding-right: 25px; color: #ef3810; letter-spacing: -1px; line-height: 1.2; padding: 0 25px; }
.choiceBox .highlight > div .price .mon { position: absolute; bottom: 2px; left: 0; font-size: 18px;}
.choiceBox .highlight > div .price .unit { position: absolute; bottom: 2px; right: 0; font-size: 18px;}
.choiceBox .highlight > div .desc { padding-top: 10px; margin-left: -20px; }
.choiceBox .highlight > div .desc span:before { content: "| "; color: #ccc; }
.choiceBox .highlight > div .desc span:first-child:before { display: none;  }

.choiceBox .highlight > div .desc a { padding: 3px 10px; color: #fff; background: #00aade; border-radius: 15px; display: inline-block; }
.choiceBox .highlight > div .desc a:hover  { background: #666666; text-decoration: none; }


.choiceBox .highlight > div.fince:before {content:"월납입금"; position: absolute; top: 17px; left: 0; background: #ef3810; font-size: 16px; text-align: center; padding: 2px 15px; border-radius: 20px; color: #fff; font-weight: bold; }
.choiceBox .highlight > div.rewards:before {content:"캐시백"; position: absolute; top: 17px; left: 0; background: #ef3810; font-size: 16px; text-align: center; padding: 2px 15px; border-radius: 20px; color: #fff; font-weight: bold; }
.choiceBox .highlight > div.lease:before {content:"리스"; position: absolute; top: 17px; left: 0; background: #ef3810; font-size: 16px; text-align: center; padding: 2px 15px; border-radius: 20px; color: #fff; font-weight: bold; }
.choiceBox .highlight > div.rent:before {content:"렌트"; position: absolute; top: 17px; left: 0; background: #ef3810; font-size: 16px; text-align: center; padding: 2px 15px; border-radius: 20px; color: #fff; font-weight: bold; }

.choiceBox .highlight > div.request .input { padding-right: 120px; }
.choiceBox .highlight > div.request .input input { margin: 4px 0; width: 100%; padding: 3px 5px; box-sizing: border-box; }
.choiceBox .highlight > div.request button { position: absolute; top: 3px; right: 0; width: 100px; height: 70px; text-align: center; font-weight: bold; font-size: 20px; color: #fff; background: #00aade; }
.choiceBox .highlight > div.request button:hover {background: #ef3810;}
.choiceBox .highlight > div.request .done { padding: 20px; margin-top: 0; font-size: 24px; border: 0; }

@media screen and (max-width: 800px) {
	.choiceBox .highlight { padding: 10px; margin: 10px;}
	.choiceBox .highlight .best { float: none; width: auto; padding: 10px; border-bottom: 1px dashed #ccc; }
	.choiceBox .highlight .request { float: none; width: auto; padding-top: 10px; }
	.choiceBox .highlight > div.request button { top: 13px;}
}

.costBox {margin-top: 30px;}
.costBox > div {float: left; position: relative; }
.costBox > div.costCar { width: 34%; margin-left: 0; }
.costBox > div.costEtc { width: 32%; margin-left: 2%; }
.costBox > div.costPay { width: 30%; margin-left: 2%; }
.costBox:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.costBox h4 { padding-bottom: 5px; border: 0; padding-left: 10px; }
.costBox .costPay h4 { color: #ef3810;  }
.costBox h4 span {font-size: 16px; }
.costBox .sum { color: #00aade;  font-weight: bold; position: absolute; top: 3px; right: 0; }
.costBox .sum span {font-size: 26px; }
.costBox .sum span.unit {font-size: 16px; margin-left: 3px;}
.costBox .costPay .sum { color: #ef3810;}
.costBox .index { width: 27%; }
.costBox .costPay .index { width: 35%; }
.costBox td { height: 27px;}
.costBox td .desc { float: left;}
.costBox td .emphasis { color: #ef3810; }
.costBox td .price { float: right;}
.costBox .btnInsure { padding: 3px 10px; color: #fff; background: #00aade; display: inline-block; border-radius: 15px; }
.costBox .btnInsure:hover { background: #666666; text-decoration: none; }

@media screen and (max-width: 800px) {
	.costBox {margin: 0 10px;}
	.costBox > div {float: none; margin-top: 20px;}
	.costBox > div.costCar, .costBox > div.costEtc, .costBox > div.costPay { width: auto; margin-left: 0; }
}

/* 슬라이더 */
.sliderBox .select { background: #ffffff; border: 2px solid #00aade; padding: 20px; box-shadow: 0px 3px 3px 2px rgba(0,0,0,0.2); margin-top: 30px;}
.sliderBox .select h4 {padding: 0; padding-bottom: 20px; border:0;  }
.sliderBox .select h4 span { padding-left: 5px; color: #00aade; }
.sliderBox .select h4 > span { padding-left: 10px; font-size: 18px; }
.sliderBox .select .range.bar { height: 30px; }
.sliderBox .select .range.bar > input { display: none; }
.sliderBox .select .range.radio { margin-top: -10px;}
.zerocost .sliderBox .select > div { float: left; width: 48%; margin: 0 1%;}
.leaserent .sliderBox .select > div { float: left; width: 31%; margin:0 1%;}
.sliderBox .select:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 

.sliderBox .select input[type="radio"] + span{ position:relative;display:inline-block;padding:3px 10px; border: 1px solid #ccc; border-radius: 20px; font-weight: bold; }
.sliderBox .select input[type="radio"] + span:before {display: none; }
.sliderBox .select input[type="radio"]:checked ~ span{ background:#00aade; border: 1px solid #00aade; color:#fff;}

@media screen and (max-width: 800px) {
	.sliderBox .body {padding: 0; }
	.sliderBox .select { margin: 10px; padding: 0 20px;}
	.zerocost .sliderBox .select > div { float: none; width: auto; margin: 10px 0;}
	.leaserent .sliderBox .select > div { float: none; width: auto; margin: 10px 0;}
	.sliderBox .select > div { padding-top: 20px; border-top: 1px dashed #ccc; }
	.sliderBox .select > div:first-child { padding-top: 10px; border: 0; }
}

/* 아래는 대체 예정 */

.compareBox .select { background: #ffffff; border: 2px solid #00aade; padding: 20px; box-shadow: 0px 3px 3px 2px rgba(0,0,0,0.2); margin-top: -70px;}
.compareBox .select h4 {padding: 0; padding-bottom: 20px; border:0;  }
.compareBox .select h4 span { padding-left: 5px; color: #00aade; }
.compareBox .select h4 > span { padding-left: 10px; font-size: 18px; }
.compareBox .select .range.bar { height: 30px; }
.compareBox .select .range.bar > input { display: none; }
.compareBox .select .range.radio { margin-top: -10px;}
.compareBox.zerocost .select > div { float: left; width: 48%; margin: 0 1%;}
.compareBox.leaserent .select > div { float: left; width: 31%; margin:0 1%;}
.compareBox .select:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 

.compareBox .select input[type="radio"] + span{ position:relative;display:inline-block;padding:3px 10px; border: 1px solid #ccc; border-radius: 20px; font-weight: bold; }
.compareBox .select input[type="radio"] + span:before {display: none; }
.compareBox .select input[type="radio"]:checked ~ span{ background:#00aade; border: 1px solid #00aade; color:#fff;}
.compareBox .select input[type="radio"]:checked + span:before {display: none; }

@media screen and (max-width: 800px) {
	.compareBox .body {padding: 0; }
	.compareBox .select { margin: 10px; padding: 0 20px;}
	.compareBox.zerocost .select > div { float: none; width: auto; margin: 10px 0;}
	.compareBox.leaserent .select > div { float: none; width: auto; margin: 10px 0;}
	.compareBox .select > div { padding-top: 20px; border-top: 1px dashed #ccc; }
	.compareBox .select > div:first-child { padding-top: 10px; border: 0; }
}


.compareBox .compare { margin-top: 30px; margin-bottom: 30px; }
.compareBox .compare > div {border-top: 2px solid #5a5a5a; }
.compareBox .compare > div h4:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
.compareBox .compare .left { float: left; width: 50%; position: relative; }
.compareBox .compare .right { float: right; width: 50%; position: relative; }
.compareBox .compare .left:after {content: ""; height: 100%; position: absolute; top:0; right: 0; border-right: 1px solid #ccc; }
.compareBox .compare .right:after {content: ""; height: 100%; position: absolute; top:0; left:-1px; border-right: 1px solid #ccc; }
.compareBox .compare:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 

.compareBox .compare h4 { background: #f4f4f4; border: 0; padding: 8px 10px;  }
.compareBox .compare h4 span { font-size: 14px; color: #00aade; padding-left: 10px;}

.compareBox .compare ul { border-top: 1px solid #ccc;  }
.compareBox .compare ul li { border-bottom: 1px solid #ccc;  }
.compareBox .compare ul li a { display: block; width: 100%; padding: 50px 10px 10px 80px; position: relative; text-align: right; }
.compareBox .compare ul li .frame { display: block; width: auto; padding: 50px 10px 10px 80px; position: relative; }
.compareBox .compare ul li a:hover { text-decoration: none; background: #e8e8e8; }
.compareBox .compare ul li a > span { margin: 0 3px; display: inline-block;}
.compareBox .compare ul li .capital { position: absolute; top: 17px; left: 10px; font-size: 18px; color: #666; font-weight: bold; padding-left: 50px; height: 44px; line-height: 44px; }
.compareBox .compare ul li .capital em {position: absolute; top: 0; left: 0; display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; font-style: normal; background: #d0d0d0; border-radius: 22px; font-weight: bold; font-size: 26px; color: #fff;  }
.compareBox .compare ul li.best .capital em { background: #00aade; }
.compareBox .compare ul li .price { position: absolute; top: 5px; left: 170px;   display: inline-block; font-weight: bold; font-size: 30px; color: #333; letter-spacing: -1px; line-height: 1.2; padding: 0 25px; }
.compareBox .compare ul li.best .price {color: #ef3810; }
.compareBox .compare ul li .price .subIndex { position: absolute; bottom: 2px; left: 0; font-size: 18px;}
.compareBox .compare ul li .price .unit { position: absolute; bottom: 2px; right: 0; font-size: 18px;}
.compareBox .compare ul li .name { font-weight: bold; }
.compareBox .compare ul li .gap { position: absolute; top: 9px; right: 10px;  color: #ef3810; font-size: 13px; }
.compareBox .compare ul li .error { position: absolute; top: 13px; left: 170px; display: inline-block; font-weight: bold; font-size: 16px; color: #999; }
.compareBox .compare div.capital { margin: 10px 20px; }
.compareBox .compare div.capital div { color: #666; font-weight: bold; padding-bottom: 8px; }
.compareBox .compare div.capital img {width: 120px; }

.compareBox.leaserent .compare .index { text-align: right; padding: 3px 10px;}
.compareBox.leaserent .compare .index .gap { color: #ef3810; font-size: 13px; }

.compareBox.leaserent .compare ul li .rank {display: none; }
.compareBox.leaserent .compare ul li .mainIndex {display: none; }
.compareBox.leaserent .compare ul li .name { margin-right: 10px; }
.compareBox.leaserent .compare ul li .rate.subIndex { margin-right: 10px; }
.compareBox.leaserent .compare ul li .info.subIndex { display: inline-block; margin-right: 10px;}
.compareBox.leaserent .compare .etc { margin: 10px 20px; color: #00aade; }

.compareBox .subIndex { display: none; }

.agreeBox.popup .title { margin-left: 10px; font-weight: bold; } 
.agreeBox.popup .privacy  { margin: 10px 0; padding: 10px; border: 1px solid #e7e7e7; font-size: 13px; }


.estimateDesc h3 { border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-top: 30px; margin-bottom: 20px;}
.estimateDesc .notice {margin: 20px; }
.estimateDesc .notice2 {margin: 20px 20px 40px 20px; }
.estimateDesc .compareLR { margin-top: -21px; }
.estimateDesc .img img {width: 100%; }
.estimateDesc .buttonBox {margin: 40px 0; text-align: center;  }
.estimateDesc .buttonBox img {width: 50%;}
.estimateDesc .infos { font-size: 15px; line-height: 1.8; padding: 30px; border: 20px solid #f4f4f4; margin-top: -20px; }

@media screen and (max-width: 800px) {
	.compareBox .compare .left , .compareBox .compare .right  { float: none; width: auto; }
	.compareBox .compare .left:after, .compareBox .compare .right:after {display: none; }
	.compareBox .compare .index { margin: 0 10px; }
	.compareBox .compare ul { margin: 0 10px; }
	.compareBox .compare ul li .gap { top: -2px; right: 0; }
	.compareBox .compare ul li .price { top: 7px; left: 160px;}
	.compareBox .subIndex { display: inline; }
	.compareBox.zerocost .compare .index span:not(.gap) { display: none;  }
	.compareBox.zerocost .compare ul li .back, .compareBox.zerocost .compare ul li .cost { position: relative; top: auto; left: auto; font-size: 14px; font-weight: bold; }
	.estimateDesc .buttonBox img {width: 100%;}
	.estimateDesc .notice2 {margin: 20px 0 40px 0; }
}

.resultBoxZC {border-top: 2px solid #00aade; margin-top: 50px; background: #fff; box-shadow: 0px 3px 3px 2px rgba(0,0,0,0.2);  }
.resultBoxZC .title { text-align: center; margin-top: -20px; }
.resultBoxZC .title h3 { display: inline-block; background: #00aade; border-radius: 20px; padding: 5px 20px; color: #fff; font-size: 20px;  }
.resultBoxZC .box { float: left; width: 27.5%; margin-top: 20px; text-align: center; position: relative; height: 150px;  }
.resultBoxZC .box.pmt { margin-left: 2%; }
.resultBoxZC .box:not(.pmt) { margin-left: 7%; }
.resultBoxZC .box h4 { color: #00aade; text-align: center; border: 0; font-size: 22px;  }
.resultBoxZC .box > div { padding-left: 80px; }
.resultBoxZC .box:before { content: ""; position: absolute; left: 0; top:50px; width:80px; height: 80px;  }
.resultBoxZC .box.pmt:before {background: url(/images/iconEtc-01.png) -10px -10px no-repeat; background-size: 600px 200px; }
.resultBoxZC .box.cashback:before {background: url(/images/iconEtc-01.png) -110px -10px no-repeat; background-size: 600px 200px; }
.resultBoxZC .box.gifts:before {background: url(/images/iconEtc-01.png) -210px -10px no-repeat; background-size: 600px 200px; }
.resultBoxZC .box:not(.pmt):after { content: ""; position: absolute; left: -60px; top:70px; width:50px; height: 50px; background: #ccc url(/images/iconEtc-01.png) -140px -130px no-repeat; background-size: 600px 200px;  }
.resultBoxZC .box .price { margin-top: 5px; }
.resultBoxZC .box .price span { display: inline-block; font-weight: bold; font-size: 30px; position: relative; color: #ef3810; letter-spacing: -1px; line-height: 1.2; position: relative; padding-right: 25px}
.resultBoxZC .box .price span:after {content: "원"; font-size: 20px; position: absolute; top: 8px; right: 0;  line-height: 1.2; }
.resultBoxZC .box.pmt .price span:before {content: "월"; font-size: 20px; position: absolute; top: 8px; left: -25px;  line-height: 1.2;}
.resultBoxZC .box .desc { font-size: 13px; color: #666; margin-top: 10px;  }
.resultBoxZC:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
@media screen and (max-width: 800px) {
	.resultBoxZC {border-top: 2px solid #00aade; margin: 50px 10px 10px 10px; }
	.resultBoxZC .box { float: none; width: auto; }
	.resultBoxZC .box.pmt { margin: 20px 0; }
	.resultBoxZC .box:not(.pmt) {margin: 20px 0; margin-top: 70px;}
	.resultBoxZC .box:before { left: 50%; margin-left: -150px; }
	.resultBoxZC .box:not(.pmt):after { left: 50%; top:-60px; margin-left: -25px; }
}

.contactBox { padding-top: 30px; }
.contactBox .frame { border: 10px solid #00aade; padding: 30px; position: relative; }
.contactBox .frame .plus { float: left; width: 34%; padding-left: 13%; position: relative; }
.contactBox .frame .plus .desc { font-size: 13px; color: #666; padding-top: 20px; padding-right: 120px; padding-bottom: 20px; }
.contactBox .frame .plus a {position: absolute; top: 3px; right: 0; width: 100px; height: 70px; text-align: center; font-weight: bold; font-size: 20px; line-height: 70px; color: #fff; background: #3b2829; border-radius: 8px; }
.contactBox .frame .plus a:hover { background: #ef3810; text-decoration: none; }
.contactBox .frame .plus:before { content: ""; position: absolute; left: 0; top:15px; width:120px; height: 60px; background: url(/images/iconEtc-01.png) -10px -130px no-repeat; background-size: 600px 200px; }

.contactBox .frame .request { float: right; width: 37%; padding-left: 10%; position: relative; margin-bottom: -20px;  }
.contactBox .frame .request .input { padding-right: 120px; }
.contactBox .frame .request .input input { margin: 4px 0; width: 100%; padding: 3px 5px; box-sizing: border-box; }
.contactBox .frame .request button { position: absolute; top: 3px; right: 0; width: 100px; height: 70px; text-align: center; font-weight: bold; font-size: 20px; color: #fff; background: #00aade; border-radius: 8px; }
.contactBox .frame .request button:hover {background: #ef3810;}
.contactBox .frame .request:before { content: ""; position: absolute; left: 0; top:0; width:80px; height: 80px; background: url(/images/iconEtc-01.png) -210px -110px no-repeat; background-size: 600px 200px; }
.contactBox .frame .request .done { padding: 20px; margin-top: 0; font-size: 24px; border: 0; }

.contactBox .frame:before { content: ""; position: absolute; top: 30px; left: 50%; height: 80px; border-left: 1px dashed #00aade; }
.contactBox .frame:after  {content: ""; display: block; height: 0; clear: both; visibility: hidden;} 
@media screen and (max-width: 800px) {
	.contactBox { padding-top: 0; }
	.contactBox .body{ padding: 0; }
	.contactBox .frame { padding: 10px; }
	.contactBox .frame .plus { float: none; width: auto; min-height: 75px; padding-left: 130px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed #00aade;  }
	.contactBox .frame .request { float: none; width: auto; padding-left: 90px; margin-bottom: 0;  }
	.contactBox .frame:before { display: none; }
}
@media screen and (max-width: 500px) {
	.contactBox .frame .plus .desc { display: none;  }
	.contactBox .frame .request { padding-left: 0;}
	.contactBox .frame .request:before { display: none; }
}

/* 테마 견적 시작 */

.titleBox {height: 320px;}
.titleBox.leaserent {background: url(/images/contents/leaserent-bg-01.jpg) 50% 50%; background-size: cover; }
.titleBox.zerocost {background: url(/images/contents/zerocost-bg-02.jpg) 50% 50%; background-size: cover; }
.titleBox.goodsS {background: url(/images/goods/themeP-W-01.jpg) 50% 50%; background-size: cover; }
.titleBox.event {background: url(/images/goods/themeL-W-01.jpg) 50% 50%; background-size: cover; }

.titleBox .frame { width: 700px; height: 220px; position: absolute; top: 50px; left: 50%; margin-left: -350px; background: rgba(0,0,0,0.3)}
.titleBox .frame2 { width: 700px; height: 220px; position: absolute; top: 55px; left: 66%; margin-left: -350px;}
.titleBox .theme { margin: 10px; height: 200px; border: 1px solid #fff; }
.titleBox .theme2 { margin: 10px; height: 200px;  left:50px; }
.titleBox .theme .title { margin-top: 25px; text-align: center; color: #fff; font-size: 40px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  font-weight: bold;}
.titleBox .theme2 .title { margin-top: 25px; text-align: center; color: #fff; font-size: 40px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif;  font-weight: bold;}
.titleBox .theme .copy { margin-top: 15px; text-align: center; color: #fff; line-height: 1.3; padding: 0 10px;  }
.titleBox .theme2 .copy { margin-top: 15px; text-align: center; color: #fff; line-height: 1.3; padding: 0 10px;  }
.titleBox .theme .copy span {  font-size: 26px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; font-weight: bold; display: block; color: #fff;  }
.titleBox .theme2 .copy span {   font-size: 26px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; font-weight: bold; display: block; color: #fff;  }



.brandBox .box.korea { width: auto; margin-top: 10px; }
.brandBox .box.korea ul { margin: 0; }
.brandBox .box.korea li {width: 14.6%; height: auto; margin-left: 2%; margin-bottom: 2%; text-align: center; }
.brandBox .box.korea li img { display: inline-block; width: 100px;  }
.brandBox .box.korea li span { font-size: 18px; font-weight: bold; padding: 10px 0; }

@media screen and (max-width: 800px) {
	.titleBox .body {padding-top: 40px; }
	.titleBox .theme { padding-top: 20px; margin: 0; }
	.titleBox.leaserent {background: url(/images/contents/leaserent-bg-M-01.jpg) 50% 50%; background-size: cover; }
	.titleBox.zerocost {background: url(/images/contents/zerocost-bg-M-02.jpg) 50% 50%; background-size: cover; }
	.titleBox.goodsS {background: url(/images/goods/themeP-M-01.jpg) 50% 50%; background-size: cover; }
	.titleBox.event {background: url(/images/goods/themeL-M-01.jpg) 50% 50%; background-size: cover; }
	.titleBox .frame { width: 85%; min-width: 300px; position: relative; top: auto; left: auto; margin: 0 auto; }
	.titleBox .theme .title { font-size: 34px; }
	.titleBox .theme .copy span {  font-size: 20px; }
	.brandBox .box.korea li {width: 16.6%; margin-left: 0; }
}
@media screen and (max-width: 640px) {
	.titleBox .theme .title { font-size: 30px; }
	.brandBox .box.korea li {width: 33.3%; margin-left: 0; margin-bottom: 20px;}
	.brandBox .box.korea li span { padding-top: 0; }
}
@media screen and (max-width: 550px) {
	.titleBox .theme .title { font-size: 30px; }
	.titleBox .theme .copy span {  font-size: 18px; display: inline; }
}

.requestDone.popup  { padding: 50px; font-size: 20px; font-family: 'NanumSquare', 'Malgun Gothic', sans-serif; color: #fff; font-weight: bold; color: #00aade; text-align: center;}