@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900|Sen:400,700&display=swap&subset=korean,latin-ext');
@font-face { font-family: 'GmarketSansLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; }

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
 }

 /* Element Reset */
*{-webkit-text-size-adjust:none ; outline:none; color:inherit; letter-spacing: -0.6px;}
html, body {min-height:100%;}
body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, th, td, input, textarea,button,select {margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; font-weight: normal; font-size: 20px;}
body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0); overflow-x:hidden;}
a{text-decoration:none; letter-spacing: -0.6px;}
a[href^="tel"]{ font-style:normal}
address, caption, em, var {font-style:normal;font-weight:normal}
p {line-height: 1.6; letter-spacing: -0.72px;}
strong {letter-spacing: -0.72px;}
i {display: inline-block;}
video, audio, object{ width:100%; height:auto}
ol, ul, dl, li{list-style:none}
fieldset, img{border:0}
legend, caption, hr{display:none}
table{border-collapse:collapse;border-spacing:0}
input {box-sizing: border-box; padding: 0 10px; border: 1px solid #dbdbdb; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
input::-webkit-input-placeholder {color: #bbb;}
input:-ms-input-placeholder {color: #bbb;}
input::placeholder {color: #bbb; opacity: 1;}
button {box-sizing: border-box; border: 0; background-color: transparent; cursor: pointer;}
textarea {box-sizing: border-box; width: 100%; padding:10px; border: 1px solid #dbdbdb; resize: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
select {box-sizing: border-box; border: 1px solid #dbdbdb; cursor: pointer; -webkit-border-radius: 0; -webkit-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none;}
select::-ms-expand {display: none;}


/* 전체 */
html.fix {position: fixed; left: 0; right: 0; margin: 0 auto;}
#A_Wrap {position: relative; overflow: hidden; width: 100%; max-width: 640px; min-width: 640px; margin:0 auto;}
#A_Container {box-sizing: border-box; position: relative; width: 100%; min-height: 100vh; padding: 96px 0 0 0;}
#A_Container_Wrap {position: relative; padding: 96px 0 0 0;}
#A_Container_Wrap:after {display: block; clear: both; *zoom: 1; content: '';}
.inner {box-sizing: border-box; width: 100%; padding: 0 24px; margin: 0 auto;}

/* 2021.11.05추가 메인 앱설치 배너 */
.installation_banner { color:#fff; position:fixed; top:0; left:0; height:100%; width:100%; z-index:100; background-color:#7f7f7f; }
.installation_banner .inner { height:90vw; width:90vw; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:0; }
.installation_banner .inner > img { width:100%; }
.installation_banner a { color:#fff; }
.installation_banner_close { position:absolute; right:0; top:0; }
.installation_banner_close img { width:7.3vw; }
.installation_banner ul { position:absolute; bottom:0px; left:0; right:0; margin:0 auto; width:90%; text-align:center; }
.installation_banner ul li { float:left; width:48%; margin:0 1%; border-radius:5%; }
.installation_banner ul li:first-child { background-color:#333333; }
.installation_banner ul li:first-child + li { background-color:#ffb901; }
.installation_banner ul li a { display:block; padding:3.5vw 0; font-size:3.6vw; color:#fff;}
.installation_banner ul .installation_banner_close { float:none; margin:8vw 0 0;  font-size:4vw; border-bottom:1px solid #fff; display:inline-block; position:static; width:auto; padding:5px 0; }


/* Header */
#A_Header {position: fixed; top: 0; left: 0; right: 0; box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto; border-bottom: 1px solid #ddd; background-color: #fff; z-index: 80;}
#A_Header > .inner {position: relative; height: 96px;}
#A_Header .logo {position: relative; float: left; padding: 20px 0 0 0;}
#A_Header .logo a {display: block; width: 178px; height: 56px;}

#A_Header {
	margin-top:constant(safe-area-inset-top) !important; 
	margin-top:env(safe-area-inset-top) !important; 
}

#A_Container_Wrap {
	margin-top:constant(safe-area-inset-top) !important; 
	margin-top:env(safe-area-inset-top) !important; 
}
#sub_header {
	margin-top:constant(safe-area-inset-top) !important; 
	margin-top:env(safe-area-inset-top) !important;  
}
#A_Container {
	margin-top:constant(safe-area-inset-top) !important; 
	margin-top:env(safe-area-inset-top) !important;  
}
.menubar {position: absolute; top: 50%; transform: translateY(-50%); right: 32px; width: 36px; height: 30px; cursor: pointer; z-index: 2;}
.menubar li {position: absolute; right: 0; margin: 0 auto; width: 28px; height: 2px; background-color: #333;}
.menubar li:nth-child(1) {top: 0; background-color: #ffba00;}
.menubar li:nth-child(2) {top: 14px; width: 36px;}
.menubar li:nth-child(3) {top: 28px;}

.menu_layer {display: none; position: fixed; top: 0; right: 0; bottom: 0; overflow-y: scroll; margin: 0 auto; width: 100%; max-width: 640px; height: 100vh; z-index: 1; }
.menu_layer .layer_wrap {position: fixed; right: -480px; top: 0; bottom: 0; width: 100%; max-width: 480px; height: 100%; background-color: #fff; transition: all 0.3s ease-in-out; z-index: 1;}
.menu_layer .layer_bg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: -1;}

.menu_layer .layer_wrap {
	padding-top:constant(safe-area-inset-top); 
	padding-top:env(safe-area-inset-top); 
}

.profile_header {box-sizing: border-box; width: 100%; background-color: #ffba00;}
.profile_header .inner {height: 100%;}
.profile_header .user_info_area {padding: 32px 0;}
.profile_header .user_info_area:after {display: block; clear: both; *zoom: 1; content: '';}
.profile_header .user_info_area .thumb {float: left; overflow: hidden; width: 96px; height: 96px; border-radius: 50%;}
.profile_header .user_info_area .thumb img {width: 100%; height: 100%; vertical-align: top;background: #fff;}
.profile_header .user_info_area .content {float: left; box-sizing: border-box; width: 300px; padding: 13px 0 0 16px;}
.profile_header .user_info_area .content .name {display: block; font-size: 26px; color: #fff;}
.profile_header .user_info_area .content .mypage {display: inline-block; font-size: 22px; color: #fff; vertical-align: top;}
.profile_header .user_info_area .btn_logout {position: absolute; right: 32px; bottom: 32px; font-size: 22px; color: #999;}
.profile_header .btn_login {display: inline-block; width: 400px; height: 96px; line-height: 96px; font-size: 26px; color: #fff; vertical-align: top;}
.menu_layer .gnb .gnb_tit {display: block; box-sizing: border-box; width: 100%; height: 100px; padding: 0 32px; line-height: 100px; font-size: 32px; font-weight: 500; color: #333; border-bottom: 1px solid #bbb;
    background: url(../images/common/m_arrow.svg) no-repeat 447.5px center;}

/* Quick */
#quick_menu {position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; box-sizing: border-box; width: 100%; max-width: 640px; height: 96px; padding: 0 24px; border-top: 1px solid #bbb; background-color: #fff;}
#quick_menu ul:after {display: block; clear: both; *zoom: 1; content: '';}
#quick_menu ul li {position: relative; float: left; width: 25%;}
#quick_menu ul li a {display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 10px 0; text-align: center;}
#quick_menu ul li a .q_text {margin: 5px 0 0; color: #ACAFB9;}
#quick_menu ul li.active a .q_text {color: #FFBA00;}
#quick_menu ul li a .q_icon {display: block; margin: 0 auto; width: 44px; height: 38px; background-repeat: no-repeat; background-position: center center;}
#quick_menu .q_home .q_icon_home {background-image: url(../images/common/ic_home_dis.svg);} /*width: 42px; height: 38px; */
#quick_menu .q_brand .q_icon_brand {background-image: url(../images/common/ic_brand_dis.svg);} /*width: 38px; height: 38px; */
#quick_menu .q_car .q_icon_car {background-image: url(../images/common/ic_car_dis.svg);} /*width: 44px; height: 30px; */
#quick_menu .q_cal .q_icon_cal {background-image: url(../images/common/ic_cal_dis.svg);} /*width: 32px; height: 34px; */
#quick_menu .q_home.active .q_icon_home {background-image: url(../images/common/ic_home.svg);}
#quick_menu .q_brand.active .q_icon_brand {background-image: url(../images/common/ic_brand.svg);}
#quick_menu .q_car.active .q_icon_car {background-image: url(../images/common/ic_car.svg);}
#quick_menu .q_cal.active .q_icon_cal {background-image: url(../images/common/ic_cal.svg);}
#quick_menu .q_cal .speech_bubble {display: block; position: absolute; top: -46px; left: 0; right: 0; margin: 0 auto; box-sizing: border-box; width: 138px; height: 72px; padding: 6px 0 0; line-height: 44px;
  font-family: 'GmarketSansBold'; color: #fff; text-align: center; background: transparent url(../images/common/click.svg) 0% 0% no-repeat padding-box; animation: moveAni 1.2s ease infinite;}

@-webkit-keyframes moveAni {
    0% {top: -46px;}
    50% {top: -53px;}
    100% {top: -46px;}
}
@-moz-keyframes moveAni {
    0% {top: -46px;}
    50% {top: -53px;}
    100% {top: -46px;}
}
@-o-keyframes moveAni {
    0% {top: -46px;}
    50% {top: -53px;}
    100% {top: -46px;}
}
@keyframes moveAni {
    0% {top: -46px;}
    50% {top: -53px;}
    100% {top: -46px;}
}


/* Footer */
#A_Footer {position: relative; width: 100%; overflow: hidden; padding: 36px 0 146px; background: #F7F8FB url(../images/common/f_logo.svg) no-repeat;background-position: 95% 150px;}
#A_Footer .ft_links {margin: 0 0 20px;}
#A_Footer .ft_links .inner:after {display: block; clear: both; *zoom: 1; content: '';}
#A_Footer .ft_links .inner li {float: left;}
#A_Footer .ft_links .inner li + li {margin: 0 0 0 32px;}
#A_Footer .ft_links .inner li a {display: block; font-size: 22px; color: #ACAFB9;}
#A_Footer .ft_txt .inner p {font-size: 20px; line-height: 30px; color: #ACAFB9;}
#A_Footer .ft_txt .inner p span {position: relative; display: inline-block; padding: 0 0 0 10px; margin: 0 0 0 9px; vertical-align: top;}
#A_Footer .ft_txt .inner p span:before {display: block; position: absolute; top: 8px; left: 0; width: 1px; height: 20px; background-color: #ACAFB9; content: '';}
#A_Footer .ft_txt .inner p span:first-child {margin: 0; padding: 0;}
#A_Footer .ft_txt .inner p span:first-child:before {display: none;}
#A_Footer .ft_txt .inner p.copy {margin: 30px 0 0;}

#A_Footer .btn_foot{width: 10;width: 100%;0%;text-align: center;margin: 0 auto;margin-bottom: 30px;}
#A_Footer .btn_foot button img{width: 100%;}
#A_Footer .btn_foot button {width: calc(48% - 20px);}
#A_Footer .btn_foot button:nth-child(1){margin-right: 20px;}