/************************************************************
*
* 공통 CSS
*
************************************************************/
/* noto-sans-kr-100 - latin_korean */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/noto-sans-kr-v13-latin_korean-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-kr-v13-latin_korean-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-kr-v13-latin_korean-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-100.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-kr-v13-latin_korean-100.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-300 - latin_korean */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/noto-sans-kr-v13-latin_korean-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-kr-v13-latin_korean-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-kr-v13-latin_korean-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-kr-v13-latin_korean-300.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-regular - latin_korean */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-kr-v13-latin_korean-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-kr-v13-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-kr-v13-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-kr-v13-latin_korean-regular.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-700 - latin_korean */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-kr-v13-latin_korean-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-kr-v13-latin_korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-kr-v13-latin_korean-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-kr-v13-latin_korean-700.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-500 - latin_korean */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-kr-v13-latin_korean-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-kr-v13-latin_korean-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-kr-v13-latin_korean-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-kr-v13-latin_korean-500.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-900 - latin_korean */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/noto-sans-kr-v13-latin_korean-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-kr-v13-latin_korean-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-kr-v13-latin_korean-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-kr-v13-latin_korean-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('.../fonts/noto-sans-kr-v13-latin_korean-900.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}

* {margin:0; padding:0; border:0; font-size:16px; color:#333; box-sizing:border-box; font-family: 'Noto Sans KR', sans-serif; }
address, caption, cite, code, dfn, em, strong, th, var {font-style :normal; font-weight:normal}
table {border-collapse:collapse;}
a { text-decoration:none;}
img {vertical-align:middle; border:0;}
ul, li, ol { list-style:none;}
html,body { width:100%; height:100%; background-color:#F9F9F9;}
/* input 기본 스타일 초기화 */
input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; box-sizing:border-box; border-radius:0; box-shadow:none;}
/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }
input::placeholder {color:#999; font-size:14px;}
/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius:0; box-shadow:none;}
input:focus {outline:none;}
select:focus {outline:none;}
textarea:focus {outline:none; border-radius:0; box-shadow: 0;}
select::-ms-expand {display:none}
.wrap {position: relative; width:100%; height:100%; margin: auto; background-color:#fff;}
.wrap::before {content:""; width:8px; height:100%; position:absolute; top:0; left:-8px; background:url("../img/common/img-mobile-left.png")repeat-y; display:none;}
.wrap::after {content:""; width:8px; height:100%; position:absolute; top:0; right:-8px; background:url("../img/common/img-mobile-right.png")repeat-y; display:none;}
/**** 공통 CSS END ****/


/************************************************************
*
* header CSS
*
************************************************************/
.header {width:100%; padding:20px; padding-top:40px; background-color:#F2F5F8;}
.header .top {width:100%; overflow: hidden; }
.header .top p {font-size:14px; color:#222; font-weight:400; letter-spacing:-0.025em; float:left; margin-top:2px; line-height:24px;}
.header .top p span {font-size:19px; font-weight:600; margin-right:5px;}
.header .top img {height:24px; float:right;}

.header .retention_mileage_box {width:100%; padding:18px; background-color:#fff; border-radius:10px; margin-top:15px; padding-bottom:25px;}
.header .retention_mileage_box .rm_title {width:100%; position:relative; padding-right:60px;}
.header .retention_mileage_box .rm_title p {font-size:14px; color:#444; font-weight:400; line-height:20px; letter-spacing:-0.025em; background:url("../img/common/mileage.png")no-repeat left top 4px; background-size:22px; padding-left:26px; width:100%;}
.header .retention_mileage_box .rm_title p span {font-size:14px; color:#e0002a; font-weight:600; margin-left:4px; margin-right:2px;}
.header .retention_mileage_box .rm_title a {font-size:13px; color:#aaa; font-weight:400; letter-spacing:-0.025em; line-height:20px; background:url("../img/common/arrow.png")no-repeat right top 6px; background-size:5px; padding-right:10px; transition:all 0.2s; position:absolute; top:0; right:0;}
.header .retention_mileage_box .rm_title a:hover {opacity:0.6;}
.header .retention_mileage_box .rm_bar {width:100%; height:5px; margin-top:15px; background-color:#D0D0D0; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; position:relative;}
.header .retention_mileage_box .rm_bar .gauge {width:0; height:100%; background:-ms-linear-gradient(to left, #e0012c, #ee7608); background:-moz-linear-gradient(to left, #e0012c, #ee7608); background:-o-linear-gradient(to left, #e0012c, #ee7608); background:-webkit-linear-gradient(to left, #e0012c, #ee7608); background:linear-gradient(to left, #e0012c, #ee7608); -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; }

.header .retention_mileage_box .rm_bar .circle {width:15px; height:15px; background-color:#fff; border-radius:100%; position:absolute; top:-5px; left:0; border:2px solid #e0002a; margin-left:-7.5px;}

.header .payment_top_box {width:100%; padding:10px 0px; background-color:#fff; border-radius:10px; margin-top:15px; overflow: hidden;}
.header .payment_top_box div {width:50%; float:left; padding:5px 10px; padding-left:15px;}
.header .payment_top_box div:last-child {border-left:1px solid #e0e0e0;}
.header .payment_top_box div p {font-size:13px; color:#444; font-weight:400; letter-spacing:-0.025em; line-height:16px; margin-bottom:2px;}
.header .payment_top_box div span {font-size:15px; color:#444; font-weight:400; display: block; line-height:20px;} 
.header .payment_top_box div span font {font-size:15px; color:#e0002a; font-weight:600; margin-right:3px;}

/**** header END ****/

.section {width:100%; background-color:#fff; padding-bottom:91px;}

.bt_gnb {width:100%; position:fixed; bottom:0; left:0; background-color:#363636; overflow: hidden;}
.bt_gnb .bt_g_box {float:left; padding:15px 0px;}
.bt_gnb.bg2 .bt_g_box {width:50%;}
.bt_gnb.bg3 .bt_g_box {width:33.33%;}
.bt_gnb.bg4 .bt_g_box {width:25%;}
.bt_gnb.bg5 .bt_g_box {width:20%;}

.bt_gnb .bt_g_box div {width:38px; height:38px; margin: auto; background-size:36px!important; transition:all 0.2s;}
.bt_gnb .orderStatusBtn div {background:url("../img/common/bt_icon01_off.png")no-repeat center;}
.bt_gnb .VisitRequestBtn div  {background:url("../img/common/bt_icon02_off.png")no-repeat center;}
.bt_gnb .promotionBtn div  {background:url("../img/common/bt_icon03_off.png")no-repeat center;}
.bt_gnb .PaymentMngBtn div  {background:url("../img/common/bt_icon04_off.png")no-repeat center;}
.bt_gnb .myInfoBtn div  {background:url("../img/common/bt_icon05_off.png")no-repeat center;}
.bt_gnb .orderStatusBtn:hover div  {background:url("../img/common/bt_icon01_on.png")no-repeat center;}
.bt_gnb .VisitRequestBtn:hover div {background:url("../img/common/bt_icon02_on.png")no-repeat center;}
.bt_gnb .promotionBtn:hover div {background:url("../img/common/bt_icon03_on.png")no-repeat center;}
.bt_gnb .PaymentMngBtn:hover div {background:url("../img/common/bt_icon04_on.png")no-repeat center;}
.bt_gnb .myInfoBtn:hover div {background:url("../img/common/bt_icon05_on.png")no-repeat center;}
.bt_gnb .orderStatusBtn.on div {background:url("../img/common/bt_icon01_on.png")no-repeat center;}
.bt_gnb .VisitRequestBtn.on div {background:url("../img/common/bt_icon02_on.png")no-repeat center;}
.bt_gnb .promotionBtn.on div {background:url("../img/common/bt_icon03_on.png")no-repeat center;}
.bt_gnb .PaymentMngBtn.on div {background:url("../img/common/bt_icon04_on.png")no-repeat center;}
.bt_gnb .myInfoBtn.on div {background:url("../img/common/bt_icon05_on.png")no-repeat center;}

.bt_gnb .bt_g_box p {font-size:13px; color:#fff; font-weight:300; letter-spacing:-0.025em; line-height:18px; text-align: center; transition:all 0.2s; margin-top:2px;}
.bt_gnb .bt_g_box:hover p {color:#ee7609;}
.bt_gnb .bt_g_box.on p {color:#ee7609;}



@media (min-width:516px){
	.wrap {width:500px; margin: auto;}
	.wrap::before {display:block;}
	.wrap::after {display:block;}
	.section {padding-bottom:99px;}
	
	.bt_gnb {width:500px; left:50%; margin-left:-250px;}
	.bt_gnb .bt_g_box div {background-size:42px!important; width:46px; height:46px;}
	.bt_gnb .bt_g_box p {font-size:15px; font-weight:300;}
	
	.header .top p {font-size:17px; line-height:30px; margin-top:2px;}
	.header .top p span {font-size:22px;}
	.header .top img {height:30px;}
	
	.header .retention_mileage_box .rm_title {padding-right:80px;}
	.header .retention_mileage_box .rm_title p {font-size:20px; background-size:26px; background-position:top 2px left; padding-left:31px;}
	.header .retention_mileage_box .rm_title p span {font-size:20px;}
	.header .retention_mileage_box .rm_title a {font-size:15px; background-size:6px; background-position:top 5px right; padding-right:12px;}
	.header .retention_mileage_box .rm_bar {height:8px;}
	.header .retention_mileage_box .rm_bar .circle {width:18px; height:18px; margin-left:-9px;}
	
	.header .payment_top_box {padding:15px 0px; }
	.header .payment_top_box div {padding:5px 20px;}
	.header .payment_top_box div:last-child {border-left:1px solid #e0e0e0;}
	.header .payment_top_box div p {font-size:15px; line-height:20px; margin-bottom:2px;}
	.header .payment_top_box div span {font-size:17px; line-height:21px;} 
	.header .payment_top_box div span font {font-size:17px;}
}