@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

.bgbk {display: none; position: fixed; top: 0px; left: 50%; width: 440px; height: 100vh; overflow: hidden; background-image: url('/garage/images/op50.png'); z-index: 10}
.bgbk_inner {width: 80%; height: 80vh; margin: 5vh 5%; padding: 5% 5%; overflow-y: scroll; background-color: white; font-size: 15px; line-height: 24px; border-radius: 15px;

    &::-webkit-scrollbar {
        display: none;
    }
    scrollbar-width: none; -ms-overflow-style: none;
}
.bgbk_bt {position: absolute; bottom: 2.5vh; left: 5%; width: 90%; height: 56px; line-height: 56px; border-radius: 15px; text-align: center; color: white; background-color: #ff9200; font-size: 15px; font-weight: 600}



.pc_site {position: fixed; width: 350px; top: calc(50vh - 300px); left: calc(50% - 420px);}
.pc_wrap {width: 440px; height: 100vh; position: relative;  margin: 0px 0px 0px 50%; background-color: white; box-shadow: 0px 0px 10px #dfdfdf; overflow-y: scroll; /* (1) Chrome, Safari, Opera, Edge (Blink 엔진) */
    &::-webkit-scrollbar {
        display: none;
    }
    scrollbar-width: none; -ms-overflow-style: none;
    
}

.pc_logo {float: left; width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 15px; box-shadow: 0px 0px 5px #dfdfdf; background-image: url('/garage/images/android-icon-192x192.png'); background-size: 80%; background-position: center; background-repeat: no-repeat;}
.pc_title {float: left; font-size: 18px; line-height: 25px; margin: 15px; font-weight: 500;}
div.pc_title span {color: #ff9200}
.pc_sub {float: left; padding: 0px 10px; line-height: 24px; height: 24px; background-color: #ff9200; color: black; border-radius: 12px; margin: 20px 0px 20px 0px; font-weight: 700; font-size: 11px}
.pc_text {color: gray; font-size: 14px; margin: 0px}
.pc_text_lar {font-size: 26px; font-weight: 700; margin: 20px 0px}
div.pc_text_lar span {color: #ff9200}
.pc_text_bottom {color: #ff9200}
.pc_inblog {float: left; width: 38px; height: 38px; border-radius: 6px; background-image: url('/garage/images/site/inblog.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 20px 10px 0px 0px; border: 1px solid black}
.pc_kakao {float: left; width: 40px; height: 40px; border-radius: 6px; background-image: url('/garage/images/kakao_channel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 20px 10px 0px 0px}

img {border: 0px; padding: 0px; margin: 0px}
body {width: 100%; height: 100vh; overflow: hidden; font-size: 12px; margin: 0px; background-color: white; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
a {text-decoration: none; color:black}


/* 크롬, 사파리 등 WebKit 기반 브라우저 */
input[type="month"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}


/* 모든 브라우저에서 기본 appearance 제거 */
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  font-size: 13px; font-weight: 500;
  text-align: left;
  background-image: url('/garage/images/filter_date.png');
  background-size: 16px
}

/* 2. [핵심] 아이폰 사파리 내부 텍스트 강제 정렬 */
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

/* Chrome, Safari, Edge에서 달력 아이콘 제거 */
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* Firefox에서 기본 UI 제거 */
input[type="date"] {
  -moz-appearance: textfield;
}

/* 모든 input 요소 */
input {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;;
  font-size: 16px;
}


/* select와 option 요소 */
select, option {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;;
  font-size: 16px;
}


.clear {clear: both}
.no_dis {display: none}
.pad25 {padding: 2.5%}
.pad5 {padding: 5%}
.pad5n {padding: 0px 5%}
.t12 {font-size: 12px; font-weight: 400}
.t_lef {text-align: left}
.t_orange {color: #ffa218}
.t_bold {font-weight: 700}

.bgcover {background-size: cover; background-position: center; background-repeat: no-repeat;}
.bgvideo {width: 90%; margin: 10% 5% 20% 5%}
.lef {float: left}
.rig {float: right}
.cent {text-align: center;}

.h10 {height: 10px}
.h15 {height: 15px}
.h20 {height: 20px}
.h30 {height: 30px;}
.h50 {height: 50px}
.h80 {height: 80px}


.header_logo {float: left; width: 164px; height: 34px; background-image: url('/garage/images/site/header_logo.png');}
.header_menu {float: right; width: 20px; height: 20px; margin: 7px 0px; background-image: url('/garage/images/site/inblog.jpg'); background-size: 25px; background-position: center; background-repeat: no-repeat;}

.txt_type_1 {font-size: 30px; font-weight: 700; line-height: 38px;}
div.txt_type_1 span {color: #FF7700}
.txt_type_2 {font-size: 16px; font-weight: 400; line-height: 22px; color: #757c7e;}
.text_see_more {float: right; margin: -30px 0px 0px 0px; height: 22px; line-height: 22px; padding: 0px 0px 0px 27px; background-image: url('/garage/images/site/text_seemore.png'); background-size: 22px; background-position: left center; background-repeat: no-repeat; font-size: 15px; font-weight: 600;}

.image_slide {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
  margin: 10% 0;
  /* 마우스 호버 시 멈추게 하고 싶다면 추가 */
  &:hover .slide_track { animation-play-state: paused; }
}

.slide_track {
  display: flex;
  width: max-content; 
  animation: scrollLeft 7s linear infinite; 
}

.image_slide img {
  width: 172px;
  height: 218.66px;
  flex-shrink: 0;
  margin-right: -20px;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-727px);
  }
}


.card_m {padding: 5%; margin: 10% 0px 0px 0px}
.card_m_w {position: relative; padding: 0px 0px 100% 0px}

div.card_m_w img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	opacity: 0; /* 기본적으로 안 보이게 */
    transition: opacity 0.3s ease-in-out; /* 부드러운 전환 시간 */
}

/* active 클래스가 붙은 이미지 만 노출 */
div.card_m_w img.active {
    opacity: 1;
}

.card_progress {width: 150px; height: 6px; margin: 10px auto; background-color: #F9F7F6; border-radius: 3px; position: relative}
.card_progress_in {position: absolute; top: 0px; left: 0px; width: 50px; height: 6px; background-color: #FF9200; border-radius: 3px;}

.card_card {padding: 5%;}
.card_card_m {padding: 10px 15px 20px 15px; background-color: #F9F7F6; border-radius: 15px; font-size: 14px; font-weight: 400; color: gray; margin: 5% 0px 0px 0px}
div.card_card_m span {font-weight: 700; font-size: 20px; color: black; line-height: 40px}

.number_w {border-top: 1px solid black; border-bottom: 1px solid black; padding: 20% 0px; margin: 5% 10%;}
.number_m_orange {text-align: center; font-size: 18px; color: #FF7700; font-weight: 500;}
.number_m_text {text-align: center; font-size: 45px; font-weight: 700; margin: 10px 0px 50px 0px;}


.yellow_body {background-color: #FFF7EA; padding: 0px 0px; width: 100%; margin: 0px}

.guide_number {float: left; width: 36px; height: 30px; line-height: 30px; text-align: center; background-color: black; font-size: 14px; font-weight: 600; border-radius: 15px; color: white}
.guide_title {float: left; line-height: 30px; font-size: 22px; font-weight: 700; margin: 0px 0px 0px 10px}
.guide_price {font-size: 22px; font-weight: 700; color: #FF7700; margin: 15px 0px}
div.guide_price span {color: #c5c5c5; font-size: 12px; font-weight: 500;}
.guide_text {font-size: 15px; font-weight: 400}
div.guide_text span {font-weight: 600;}

.guide_txt_gray {font-size: 13px; font-weight: 400; color: gray; margin: 7px 0px 0px 0px}


.guide_text2 {font-size: 15px; font-weight: 500}
.guide_service { margin: 10px 0px 40px 0px}
div.guide_service img {float: left; height: 42px; margin: 0px 10px 10px 0px}
.guide_rec {background-image: url('/garage/images/site/guide_rec.png'); background-size: 20px; background-position: left center; background-repeat: no-repeat; font-size: 18px; font-weight: 700; padding: 0px 0px 0px 30px;}

.guide_rolling {height: 50px; line-height: 50px; background: black; color: #FF7700; font-size: 13px; font-weight: 500; margin: 0px 0px 40px 0px}

.guide_rolling {
    width: 100%;              /* 보여줄 영역 */
    overflow: hidden;         /* 넘치는 부분 숨김 */
    white-space: nowrap;      /* 줄바꿈 방지 */
    box-sizing: border-box;
}

.rolling_text {
    display: inline-block;
    padding-left: 70%;       /* 시작 위치를 오른쪽 밖으로 */
    animation: slideLeft 15s linear infinite;
}

@keyframes slideLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}



/* 1. 전체 감싸는 영역: 넘치는 이미지 숨김 */
.brand_wrap {
    width: 100%;
    overflow: hidden;
    background: #fff; /* 배경색은 자유롭게 */
    margin: 40px 0px 70px 0px;
}

/* 2. 움직이는 리스트: 한 줄로 배치 및 애니메이션 적용 */
.brand_list {
    display: flex;
    width: max-content; /* 내부 콘텐츠 길이에 맞춤 */
    padding-left: 10px;
    animation: slideLeft 20s linear infinite; /* 20초 동안 무한 반복 */
}

.brand_list img {
    padding: 0 10px; /* 이미지 사이 간격 */
    flex-shrink: 0;  /* 이미지 크기 유지 */
}

/* 3. 애니메이션 핵심: 왼쪽으로 50%만큼 이동 (복제본이 원본 위치로 올 때 리셋) */
@keyframes rolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 마우스를 올렸을 때 멈추게 하고 싶다면 추가 */
.brand_list:hover {
    animation-play-state: paused;
}




.brandstory_list {padding: 0px 0px 0px 0px; margin: 50px 0px 80px 0px}
.bbs_list {margin: 0px 0px 80px 0px}

.bbs_w {margin-right: 2%}
.bbs_wp {height: 180px; border-radius: 15px}
.bbs_wt {font-size: 15px; font-weight: 500; margin: 15px 0px}
.bbs_wd {font-size: 12px; color: #FF7700; font-weight: 500;}

.company {font-size: 18px; font-weight: 600; line-height: 22px; margin: 0px 0px 20px 0px;}

.footer {font-size: 12px; font-weight: 400; line-height: 18px; margin: 20px 0px 20px 0px;}
div.footer a {color: black}

.footer_logo {width: 172px; height: 36px; background-image: url('/garage/images/site/logo_black.png'); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0px 0px 10px 0px}
.footer_insta {float: right; width: 30px; height: 30px; background-image: url('/garage/images/site/insta.png'); background-size: cover; background-position: center; background-repeat: no-repeat;}
.footer_blog {float: right; width: 30px; height: 30px; background-image: url('/garage/images/site/blog.png'); background-size: cover; background-position: center; background-repeat: no-repeat;}
.footer_kakao {float: right; width: 30px; height: 30px; background-image: url('/garage/images/site/kakao.png'); background-size: 73%; background-position: center; background-repeat: no-repeat;}


.faq_w {border: 1px solid #f2eeec; background-color: #f9f7f6; border-radius: 10px; margin: 0px 0px 10px 0px; padding: 20px 15px}
.faq_p {float: left; width: 24px; height: 24px; background-image: url('/garage/images/site/faq_p.png'); background-size: 100%; background-position: center; background-repeat: no-repeat;}
.faq_b {float: right; width: 20px; height: 20px; background-image: url('/garage/images/site/faq_b.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; margin: 2px 0px}
.faq_c {float: left; line-height: 20px; margin: 2px 10px; font-size: 15px; font-weight: 600;}

.faq_view {display: none; border: 1px solid #f2eeec; padding: 20px 15px; font-size: 15px; margin: 0px 0px 20px 0px; border-radius: 10px;}



.key_height {}
.key_m {float: left; padding: 10px 0px; background-color: #F9F7F6; border-radius: 5px; font-size: 14px; font-weight: 400; color: gray; margin: 0px 0px 0px 0px; text-align: center}
.key_m_s {float: left; padding: 10px 0px; background-color: gray; border-radius: 5px; font-size: 14px; font-weight: 400; color: white; margin: 0px 0px 0px 0px; text-align: center}

.key_wrap {margin: 0px 5% 5% 5%}