@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@font-face {
  font-family: 'Paperlogy';
  src: url('/garage/font/Paperlogy-3Light.ttf') format('truetype');
  font-weight: 100; /* Thin */
  font-style: normal;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('/garage/font/Paperlogy-4Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
}

@font-face {
  font-family: 'Paperlogy';
  src: url('/garage/font/Paperlogy-5Medium.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
}


@font-face {
  font-family: 'Paperlogy';
  src: url('/garage/font/Paperlogy-7Bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
}



img {border: 0px; padding: 0px; margin: 0px}
body {font-size: 14px; color: #191919; margin: 0px; padding: 0px; font-family: "Pretendard", "Paperlogy", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo","EB Garamond", sans-serif; scrollbar-width: none; -ms-overflow-style: none; letter-spacing: -1px;}
body::-webkit-scrollbar {display: none;}

html, body {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE, Edge */
}

html::-webkit-scrollbar, 
body::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Opera */
}




.clear {clear: both}
.no_dis {display: none}
.t_orange {color: #FF6200}
.t_white {color: white}
.p_hide {display: none;}

.bgcontain {background-size: contain; background-position: center; background-repeat: no-repeat;}
.bgcover {background-size: cover; background-position: center; background-repeat: no-repeat;}
.bgvideo {display: block; width: 100%; max-width: 1920px; margin: 0px auto}

.bgbk {display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; background-image: url('/garage/images/op70.png'); z-index: 100}
.bgbk_on {position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; background-image: url('/garage/images/op70.png'); z-index: 100}

.font_a {font-family: "Pretendard";}
.font_b {font-family: "Pretendard";}

.lef {float: left}
.rig {float: right}
.vct {height: 200px}

.wrap {width: 1280px; margin: 0px auto}
.wrap_white {width: 1280px; padding: 60px calc(50% - 640px); background-color: white}
.wrap_white_info {width: 1280px; padding: 60px calc(50% - 640px); background-color: white}

.wrap_white_se {width: 1280px; padding: 60px calc(50% - 640px); background-color: white}
.wrap_white200 {width: 1280px; padding: 60px calc(50% - 640px); background-color: white}

.wrap_gray {width: 1280px; padding: 60px calc(50% - 640px); background-color: #F6F7F9}
.wrap_dark {padding: 60px 0px; background-color: #181818}
.wrap_white100 {width: 1280px; padding: 60px calc(50% - 640px) 0px calc(50% - 640px); background-color: white}
.wrap_gray100 {width: 1280px; padding: 60px calc(50% - 640px); background-color: #F6F7F9}


/* [수정] position을 fixed로 바꿔야 스크롤해도 상단에 붙어 있습니다 */
.header {
    position: fixed; /* relative -> fixed 변경 */
    top: 0;
    left: 0;
    z-index: 999; /* 다른 요소보다 위에 오도록 설정 */
    
    width: 100%; /* 1280px -> 100% 변경 (배경을 꽉 채우기 위함) */
    /* padding 계산식은 내부 컨텐츠를 1280px로 맞추는 역할이므로 유지하되, box-sizing 필요 */
    box-sizing: border-box; 
    padding: 0px calc(50% - 640px);
    
    /* [핵심] 배경색: #181818의 RGB값(24,24,24)에 투명도 0.5 적용 */
    background-color: rgba(24, 24, 24, 0.5);
    
    height: 90px;
    transition: background-color 0.3s ease; /* 색상이 부드럽게 바뀌도록 설정 */
}

/* [추가] 스크롤 되었을 때 자바스크립트가 이 클래스를 붙입니다 */
.header.scrolled {
    background-color: #181818; /* 불투명한 원래 색상 */
    /* 필요하다면 그림자 추가 */
    /* box-shadow: 0 4px 6px rgba(0,0,0,0.1); */
}

.header_logo {float: left; width: 80px; height: 80px; margin: 5px 0px; background-image: url('/garage/images/logo.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; cursor: pointer;}
.header_lang {position: absolute; width: 40px; height: 40px; top: 25px; right: calc(50% - 640px); background-image: url('/garage/images/ic_lang.png'); background-size: 24px; background-position: center; background-repeat: no-repeat; cursor: pointer;}
.header_menu {float: left; width: 640px; height: 40px; margin: 25px 280px; display: flex; justify-content: center; align-items: center; gap: 80px}
.header_menu_m {position: relative; font-size: 16px; height: 40px; line-height: 40px; color: white; cursor: pointer;}
div.header_menu_m a {color: white; text-decoration: none;}
.header_menu_list {display: none; position: absolute; top: 50px; left: -50%; width: 120px; padding: 15px 20px; line-height: 28px; font-size: 14px; background-color: white; box-shadow: 0px 0px 10px gray; border-radius: 2px; font-weight: 500;}
div.header_menu_list a {color: #333; text-decoration: none;}
div.header_menu_list a:hover {color: #FF6200}


.header_wh {width: 1280px; padding: 0px calc(50% - 640px); background-color: #181818; height: 90px}
.header_wh_logo {float: left; width: 80px; height: 80px; margin: 5px 0px; background-image: url('/garage/images/logo.png'); background-size: 100%; background-position: center; background-repeat: no-repeat}
.header_wh_close {}
.header_wh_menu {}


.footer {width: 1280px; padding: 40px calc(50% - 640px); height: 320px; background-color: black; letter-spacing: 0;}
.footer_logo {width:120px; height: 120px; background-image: url('/garage/images/logo_footer.png'); background-size: 100%; background-position: center; background-repeat: no-repeat;}
.footer_title {color: #FF7017; font-size: 21px; margin: 10px 0px 20px 0px; font-weight: 600}
.footer_title_se {font-size: 18px; color: white; margin: 0px 0px 26px 0px}
.footer_info {font-size: 16px; line-height: 24px; color: white}
.footer_link {font-size: 16px; color: #999999; margin: 36px 0px 0px 0px}
div.footer_link a {color: #999999; text-decoration: none;}

.footer_quick {position: fixed; right: 50px; bottom: 50px;}
.footer_quick_calendar {width: 50px; height: 50px; border-radius: 50%; background-image: url('/garage/images/ic_footer_quick_calendar.png'); background-position: center; background-size: cover; background-position: center; margin: 10px 0px; cursor: pointer;}
.footer_quick_kakao {width: 50px; height: 50px; border-radius: 50%; background-image: url('/garage/images/ic_footer_quick_kakao.png'); background-position: center; background-size: cover; background-position: center; margin: 10px 0px; cursor: pointer;}
.footer_quick_top {width: 50px; height: 50px; border-radius: 50%; background-image: url('/garage/images/ic_footer_quick_top.png'); background-position: center; background-size: cover; background-position: center; margin: 10px 0px; cursor: pointer;}

.banner {height: 780px; background-color: #f2f2f2}
.footer_sns_kakao {position: fixed; right: 30px; top: 40%; width: 50px; height: 50px; border-radius: 50%; background-color: yellow;}


.idx_title {font-size: 30px; font-weight: 800; margin: 0px 0px 20px 0px; font-family: "Paperlogy";}
div.idx_title span {color: #FF6200}

.idx_rank {float: left; width: 600px; padding: 0px 10px}
.idx_rank_rig {float: right; width: 600px; padding: 0px 10px}
.idx_rank_m {padding: 20px 0px; border-bottom: 1px solid black}
.idx_rank_ml {float: left}
.idx_rank_mc {float: right; height: 34px; line-height: 34px; margin: 10px 20px; font-size: 18px; color: #2b2b2b}
div.idx_rank_mc span {color: #FF6200; font-weight: 700; font-size: 24px}
.idx_rank_mr {float: right; height: 34px; line-height: 34px; margin: 10px 0px; background-color: #FF6200; border-radius: 17px; padding: 0px 20px; font-size: 18px; color: white; font-weight: 600;}
div.idx_rank_mr a {color: white; cursor: pointer; text-decoration: none;}
.idx_rank_mlt {font-size: 22px; line-height: 34px; font-weight: 600;}
.idx_rank_mlb {font-size: 14px; color: #6b6b6b; line-height: 20px;}

.idx_viewmore {text-align: right; text-decoration: underline; font-size: 16px; margin: 30px 10px; font-weight: bold; color: black; cursor: pointer}
div.idx_viewmore a {color: white; cursor: pointer;}

.idx_youtube {
    width: 1280px;
    height: 380px;
    margin: 0px auto;
}

.idx_youtube_list_m {margin: 0px 10px; background-color: white; border-radius: 15px;}
.idx_youtube_list_mp {position: relative; height: 230px; background-color: #f2f2f2; border-top-left-radius: 10px; border-top-right-radius: 10px; background-size: cover; background-position: center;}
.idx_youtube_list_mc {height: 130px; padding: 10px}
.idx_youtube_list_mct {font-size: 20px; font-weight: 600px; line-height: 30px; height: 30px; overflow: hidden; color: #FF6200}
.idx_youtube_list_mcc {font-size: 16px; width: 100%; line-height: 24px; height: 48px; overflow: hidden; margin: 10px 0px;    
    display: -webkit-box; 
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.idx_youtube_list_mcb {font-size: 16px; line-height: 24px; height: 24px; overflow: hidden; margin: 10px 0px}


/* 유튜브 링크 감싸는 박스 */
.yt_link_cover {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
}

/* 썸네일 이미지 */
.yt_thumb_img {
    width: 100%;
    height: 300px;
    object-fit: cover; /* 이미지가 찌그러지지 않고 꽉 차게 */
    transition: transform 0.3s;
}

/* 마우스 올렸을 때 이미지 살짝 확대 (효과) */
.yt_link_cover:hover .yt_thumb_img {
    transform: scale(1.05);
}

/* 재생 버튼 아이콘 (CSS로 그림) */
.yt_play_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 40px;
    background-color: rgba(33, 33, 33, 0.8); /* 반투명 검정 배경 */
    border-radius: 10px;
    z-index: 10;
}

/* 재생 버튼 안의 삼각형 */
.yt_play_icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 14px; /* 삼각형 크기 조절 */
    border-color: transparent transparent transparent white;
}

/* 마우스 올리면 버튼 빨갛게 (선택사항) */
.yt_link_cover:hover .yt_play_icon {
    background-color: #FF0000;
}



/* intro */

.c_title {font-size: 40px; font-weight: 700; margin: 0px 0px 40px 0px; font-family: "Pretendard";}
.c_title_se {font-size: 40px; font-weight: 700; margin: 0px 0px 40px 0px; font-family: "Pretendard";}
.c_title_th {font-size: 40px; font-weight: 700; margin: 0px 0px 40px 0px; font-family: "Pretendard";}

.c_sentence {width: 1280px; padding: 80px calc(50% - 640px) 0px calc(50% - 640px); border-top: 1px solid #e9e9e9; font-size: 30px; line-height: 40px; font-weight: 400;}
div.c_sentence span {font-weight: 700;}
.c_sentence70 {width: 1280px; padding: 80px calc(50% - 640px) 0px calc(50% - 640px); border-top: 1px solid #e9e9e9; font-size: 30px; line-height: 40px; font-weight: 400;word-break: keep-all;}
div.c_sentence70 span {font-weight: 700;}

.c_sentence_mypage {width: 1280px; padding: 60px calc(50% - 640px) 0px calc(50% - 640px); border-top: 1px solid #e9e9e9; font-size: 30px; line-height: 40px; font-weight: 400; margin: 80px 0px 0px 0px}
div.c_sentence_mypage span {font-weight: 700;}
.c_sentence_sub_mypage {margin: 10px 0px 80px 0px; line-height: 36px; font-size: 20px; font-weight: 400;}


.c_sentence_sub {margin: 40px 0px 100px 0px; line-height: 36px; font-size: 20px; font-weight: 400;}
.c_sentence_sub2 {margin: 40px 0px 100px 0px; line-height: 36px; font-size: 20px; font-weight: 400;}

.story_banner_1 {float: right; width: 1100px; height: 500px; background-image:S url('/garage/images/img_story_1.png');}
.story_banner_2 {height: 500px; margin: 0px; text-align: center; margin: 0px 0px 60px 0px}
.story_banner_3 {float: right; width: 800px; height: 400px; background-image: url('/garage/images/img_feedback_1.png'); margin: 0px 60px 60px 0px}
.story_banner_4 {float: right; width: 820px; height: 420px; background-image: url('/garage/images/img_story_1.png'); margin: 0px 0px 70px 0px}

.story_m_w {}
.story_m_w_inner {}

.story_m {float: left; width: 20%; margin: 0px 6% 0px 0px; font-family: "Pretendard";}
.story_mt {font-size: 70px; color: #cecece; font-family: "Paperlogy"; font-weight: 400;}
.story_mc {font-size: 22px; font-weight: 600; margin: 40px 0px 30px 0px}
.story_mb {font-size: 18px;}

.story_pic {margin: 80px 0px 0px 0px}
.story_pic_lef {float: left; width: 600px; height: 400px; margin: 0px 0px 0px 0px;}
.story_pic_rig {float: right; width: 600px; height: 400px; margin: 0px 0px 0px 0px}

.story_pic_t {font-size: 30px; font-weight: 500; margin: 100px 0px 0px 0px}
.story_pic_c {font-size: 20px; line-height: 32px; margin: 50px 0px 0px 0px; font-weight: 400;}

.intro_center {height: 480px}
.intro_banner {height: 480px !important; line-height: 400px; margin: 10px; background-size: cover; background-position: center; background-repeat: no-repeat}
.intro_vct {height: 200px}

.member_title {font-size: 40px; font-family: "Pretendard"; font-weight: 500; letter-spacing: 50px; margin: 80px 0px; text-align: center;}

.member_m {width: 1280px; height: 916px; padding: 60px calc(50% - 640px); background-color: #F6F7F9; position: relative; margin: 0px 0px 80px 0px}
.member_m_wh {width: 1280px; height: 916px; padding: 60px calc(50% - 640px); background-color: white; position: relative; margin: 0px 0px 80px 0px}

.member_name {font-size: 50px; line-height: 50px; font-weight: 700; text-align: center;}
div.member_name span {font-size: 32px; font-weight: 400;}


.member_txt_1 {position: absolute; top: 120px; left: 20%; color: #E6E6E6; font-size: 130px; font-family: "EB Garamond"; line-height: 140px}
.member_img_1 {position: absolute; bottom: 0px; left: 30%; width: 40%; height: 80%; background-size: contain; background-position: center; background-repeat: no-repeat;}
.member_his_1 {position: absolute; top: 300px; left: 70%; font-size: 18px; font-weight: 400; line-height: 40px;}

.member_txt_0 {position: absolute; top: 200px; right: 20%; color: #E6E6E6; font-size: 130px; font-family: "EB Garamond"; line-height: 140px}
.member_img_0 {position: absolute; bottom: 0px; left: 30%; width: 40%; height: 80%; background-size: contain; background-position: center; background-repeat: no-repeat;}
.member_his_0 {position: absolute; top: 300px; left: 20%; font-size: 18px; font-weight: 400; line-height: 40px;}


.equip_tab {margin: 100px 0px 0px 0px; text-align: center; font-size: 24px; font-weight: 400;}
div.equip_tab a {text-decoration: none; margin: 0px 20px; color: #333; cursor: pointer;}

.equip_m_lef {float: left; width: 620px; height: 400px; background: white; box-shadow: 0px 0px 5px #dfdfdf; margin: 0px 0px 40px 0px}
.equip_m_rig {float: right; width: 620px; height: 400px; background: white; box-shadow: 0px 0px 5px #dfdfdf; margin: 0px 0px 40px 0px}
.equip_mp {float: left; width: 280px; height: 400px; background-color: #f2f2f2; background-size: cover; background-position: center; background-repeat: no-repeat;}
.equip_mc {float: right; width: 260px; padding: 100px 30px 0px 30px;}

.eqiup_mct {font-size: 22px; font-weight: 500; margin: 0px 0px 10px 0px; letter-spacing: -1px;}
.equip_mcc {font-size: 20px; font-weight: 500; color: #FF6200; margin: 0px 10px 30px 0px; letter-spacing: -1px;}
.equip_mcb {font-size: 16px; line-height: 24px; font-weight: 500; margin: 0px 10px 0px 0px; letter-spacing: -1px;}

.info_banner_1 {width: 1920px; height: 700px; background-image: url('/garage/images/img_info_1.png'); margin: 0px auto}

.info_m {margin: 0px 0px 120px 0px}
.info_ml {float: left; width: 600px}
.info_map {float: left; width: 600px; height: 500px}

div.info_ml img {width: 100%}
.info_mr {float: right; width: 650px; border-top: 1px solid #e9e9e9; padding: 55px 0px 0px 0px}
.info_mrt {font-size: 28px; font-weight: 700; margin: 0px 0px 15px 0px}
.info_mrc {font-size: 20px; font-weight: 400; line-height: 36px;}
div.info_mrc span {font-size: 18px}

.bbs_m {height: 90px; line-height: 90px; border-bottom: 1px solid #e9e9e9; cursor: pointer;}
.bbs_mt {float: left; width: 80%; font-size: 22px; font-weight: 600;}
.bbs_mc {float: right; width: 20%; font-size: 20px; font-weight: 500; text-align: right; color: #7d7d7d}

.bbs_m2 {height: 90px; line-height: 90px; border-bottom: 1px solid #e9e9e9; cursor: pointer;}
.bbs_mt2 {float: left; width: 80%; font-size: 22px; font-weight: 600;}
.bbs_mc2 {float: right; width: 20%; font-size: 20px; font-weight: 500; text-align: right; color: #7d7d7d}

.bbs_view {margin: 50px 20px; min-height: 500px; font-size: 20px; font-weight: 400; line-height: 30px}
.bbs_return {width: 163px; height: 53px; line-height: 53px; margin: 180px auto; border: 1px solid #DADADA; border-radius: 10px; text-align: center; cursor: pointer;}
.resv_lef {float: left; width: 785px}

.resv_rig {position: fixed; top: 110px; right: calc(50% - 650px); width: 420px; background: green; margin: 0px 0px 0px 0px; padding: 10px 10px 50px 10px; background: white}


.resv_m_s {float: left; padding: 0px 0px; text-align: center; width: 145px; line-height: 50px; border: 1px solid #FF7017; margin: 0px 10px 10px 0px; font-size: 16px; color: white; background-color: #FF6200; cursor: pointer;}
.resv_m {float: left; padding: 0px 0px; text-align: center; width: 145px; line-height: 50px; border: 1px solid #878787; margin: 0px 10px 10px 0px; font-size: 16px; color: #878787; cursor: pointer;}
.resv_pic {width: 100%; height: 600px; background-color: #f2f2f2; margin: 30px 0px 40px 0px}

.resv_title {border-top: 1px solid #dfdfdf; padding: 50px 0px 0px 0px; font-size: 30px; font-weight: 600; margin: 60px 0px 15px 0px}
.resv_title_se {font-size: 20px; font-weight: 500; color: #FF7017}
.resv_title_detail {line-height: 24px; font-size: 16px; font-weight: 400px; color: #717171; margin: 20px 0px 80px 0px}

.resv_event_m {margin: 40px 0px 0px 0px; padding: 0px 0px 25px 0px; border-bottom: 1px solid #dadada;}
.resv_event_tab {float: left; height: 36px; line-height: 36px; text-align: center; color: white; background-color: #FF7017; color: white; font-size: 14px; margin: 0px 0px 20px 0px; padding: 0px 15px}
.resv_event_lef {float: left; width: 70%; font-size: 18px; line-height: 22px; font-weight: 400; color: #686868;}
.resv_event_lef_t {font-size: 22px; font-weight: 600; color: black;}
.resv_event_lef_c {font-size: 15px; font-weight: 500; color: #686868; margin: 12px 0px 15px 0px;}
.resv_event_price {font-size: 24px; color: black; font-weight: 500;}
div.resv_event_price span {color: #d2d2d2; text-decoration: line-through; font-weight: normal;}
.resv_event_price_rate {float: left; color: #FF7017; text-decoration: none; margin: 0px 10px 0px 0px; font-weight: 600}

.resv_event_rig {float: right; font-size: 26px; font-weight: 500;}
.resv_event_bt {width: 136px; height: 40px; line-height: 40px; border: 1px solid #ff6200; border-radius: 8px; color: #FF6200; text-align: center; line-height: 44px; font-size: 16px; font-weight: 400; margin: 30px 0px 0px 0px; cursor: pointer;}
.resv_event_bt_s {width: 136px; height: 42px; line-height: 42px; border-radius: 8px; color: white; text-align: center; line-height: 44px; font-size: 16px; font-weight: 400; margin: 30px 0px 0px 0px; background-color: #FF6200; cursor: pointer;}


.resv_event_detail {font-size: 16px; color: #4d4d4d; background-image: url('/garage/images/arrow_down.png'); background-size: 30px; background-position: right center; background-repeat: no-repeat; padding: 0px 50px 0px 0px; text-align: right; cursor: pointer;}
.resv_event_detail_on {font-size: 16px; color: #4d4d4d; background-image: url('/garage/images/arrow_up.png'); background-size: 30px; background-position: right center; background-repeat: no-repeat; padding: 0px 50px 0px 0px; text-align: right; cursor: pointer;}

.resv_event_body {min-height: 400px; display: none;}


.resv_cart {background-color: #F6F7F9}
.resv_cart_body, .resv_cart_body_bottom {
    overflow-y: scroll;
    transition: height 0.5s ease-in-out; /* 핵심 */
}
.resv_cart_body {background-color: #F6F7F9; height: calc(100vh - 500px) }
.resv_cart_body_bottom {background-color: #F6F7F9; height: calc(100vh - 800px) }

.resv_cart_body::-webkit-scrollbar,
.resv_cart_body_bottom::-webkit-scrollbar {
    display: none;
}


/* 나머지 요소들 (기존과 동일) */
.resv_cart_title {height: 24px; line-height: 24px; padding: 20px 20px 10px 20px; font-size: 18px; font-weight: 400; color: #a1a1a1;}
.resv_cart_total {padding: 40px 0px; font-size: 20px;}
.resv_submit {height: 58px; line-height: 58px; margin: 0px 0px; background-color: #FF7017; border-radius: 10px; text-align: center; color: white; font-size: 22px; cursor: pointer;}


.resv_1 {float: left; width: 450px; height: calc(80vh - 40px); background-color: white; border-radius: 10px; padding: 20px 20px; box-shadow: 0px 0px 10px gray; overflow-y: scroll;}
.resv_2 {float: left; width: 350px; height: calc(80vh - 40px); background-color: white; border-radius: 10px; padding: 20px 15px; box-shadow: 0px 0px 10px gray; margin: 0px 20px; overflow-y: scroll;}
.resv_3 {float: left; width: 340px; height: calc(80vh - 40px); background-color: white; border-radius: 10px; padding: 20px 15px; box-shadow: 0px 0px 10px gray; overflow-y: scroll;}

.resv_1::-webkit-scrollbar {display: none}
.resv_2::-webkit-scrollbar {display: none}
.resv_3::-webkit-scrollbar {display: none}

.feedback_m {float: left; width: 400px; height: 160px; margin: 0px 40px 40px 0px; color: white}
.feedback_m_s {float: left; width: 540px; height: 220px; margin: 0px 0px 44px 0px; color: white}

.feedback_ml {float: left; width: 50%; height: 160px; background-image: url('/garage/images/feedback_ml.png'); background-size: cover; background-position: center; cursor: pointer;}
.feedback_ml_pic {float: left; width: 50%; height: 160px; background-size: cover; background-position: center; cursor: pointer;}
.feedback_mr {float: right; width: 50%; height: 160px; background-color: #FF6200; line-height: 220px; text-align: center; font-size: 40px; cursor: pointer;}

.mypage_w {width: 1280px; min-height: 916px; padding: 0px calc(50% - 640px) 200px calc(50% - 640px)}
.mypage_vacant {color: #7c7c7c; font-size: 24px}
.mypage_vacant_bt {width: 305px; height: 58px; line-height: 58px; border-radius: 10px; background-color: #FF6200; font-size: 24px; color: white; margin: 50px 0px; text-align: center; cursor: pointer;}

.mypage_m {border: 1px solid #A4A4A4; color: #FF6200; background-image: url('/garage/images/ic_arw_down.png'); background-size: 40px; background-position: calc(100% - 30px) 30px; background-repeat: no-repeat; margin: 0px 0px 40px 0px}
.mypage_info {padding: 25px 40px; cursor: pointer;}
div.mypage_info span {font-size: 26px; font-weight: 600; color: black}

.mypage_view {display: none; background-color: #F6F7F9; width: calc(100% - 80px); padding: 0px 40px; color: black;}

.mypage_view_lef {float: left; width: 200px; height: 80px; line-height: 80px; border-bottom: 1px solid #E9E9E9; font-size: 20px; font-weight: 700;}
.mypage_view_rig {float: left; width: calc(100% - 200px); height: 80px; line-height: 80px; border-bottom: 1px solid #E9E9E9; font-size: 20px; font-weight: 400;}
.mypage_view_rig_se {float: left; width: calc(100% - 200px); height: 30px; line-height: 30px; padding: 25px 0px; border-bottom: 1px solid #E9E9E9; font-size: 20px; font-weight: 400;}

.mypage_view_bt {float: left; width: 143px; height: 46px; line-height: 46px; padding: 0px; text-align: center; background-color: white; border: 1px solid #DADADA; border-radius: 5px; margin: 30px 15px 30px 440px; cursor: pointer;}
.mypage_view_bt2 {float: left; width: 143px; height: 46px; line-height: 46px; padding: 0px; text-align: center; background-color: white; border: 1px solid #DADADA; border-radius: 5px; margin: 30px 15px 30px 0px; cursor: pointer;}
.mypage_view_bt3 {height: 46px; line-height: 46px; padding: 30px 0px 30px 0px; cursor: pointer; color: #C50000; text-align: center; font-size: 22px}

.resv_go_title {font-size: 22px; font-weight: 500; color: black; margin: 0px 0px 10px 0px}
div.resv_go_title span {color: #FF6200; font-weight: 700; font-family: "Pretendard";}
.resv_go_m {line-height: 24px; padding: 20px 0px; border-bottom: 1px solid #c0c0c0;}
.resv_go_m_title {float: left; width: 65%; font-size: 16px; font-weight: 500;}
.resv_go_m_price {float: right; font-size: 16px; font-weight: 500;}
.resv_go_m_close {float: right; width: 24px; height: 24px; background-image: url('/garage/images/ic_close.png'); background-size: 15px; background-position: center; background-repeat: no-repeat; margin: 0px 0px 0px 10px; cursor: pointer;}
.resv_go_cart {height: 27vh; overflow-y: scroll;}
.resv_go_cart::-webkit-scrollbar {
    display: none;
}
.resv_go_reco_t {font-size: 22px; font-weight: 500; margin: 50px 0px 20px 0px}

.resv_go_reco_m {margin: 0px 15px 15px 0px}
.resv_go_reco_mchk {float: left; width: 18px; height: 18px; margin: 30px 0px; border: 1px solid #c5c5c5; border-radius: 2px; cursor: pointer;}
.resv_go_reco_mchk_s {float: left; width: 18px; height: 18px; margin: 30px 0px; border: 1px solid #FF6200; border-radius: 2px; cursor: pointer; background-color: #FF6200; background-image: url('/garage/images/ic_inner_check.png'); background-size: 70%; background-position: center; background-repeat: no-repeat;}
.resv_go_reco_mp {float: left; width: 80px; height: 80px; background-color: #f2f2f2; margin: 0px 10px; background-size: cover; background-position: center; background-repeat: no-repeat;}
.resv_go_reco_mc {float: left; width: calc(100% - 140px); padding: 10px 0px; overflow: hidden; font-size: 12px}

.resv_go_reco_mct {font-size: 15px; font-weight: 700; width: 100%; line-height: 20px; margin: 0px 0px 0px 0px}
.resv_go_reco_mcc {float: left; height: 16px; line-height: 16px; border: 1px solid #FF6200; border-radius: 3px; margin: 5px 2px 5px 0px; padding: 0px 5px; font-size: 9px; color: #FF6200; background-color: #fbf8f7}
.resv_go_reco_mcp {font-size: 15px; font-weight: 700;}

.resv_go_total {margin: 30px 0px 0px 0px}
.resv_go_total_t {font-size: 20px; font-weight: 600; }
.resv_go_total_c {margin: 15px 0px 5px 0px}
.resv_go_total_ct {float: left; font-size: 18px; font-weight: 600; }
div.resv_go_total_ct span {color: #FF6200}
.resv_go_total_cc {float: right; font-size: 22px; font-weight: 600;}
.resv_go_total_b {font-size: 14px; font-weight: 400; color: #a6a6a6}

.resv_ppl {margin: 30px 0px 0px 0px;}
.resv_ppl_l {float: left; width: 25%; height: 40px; line-height: 40px; color: black; font-size: 18px;}
.resv_ppl_r {float: right; width: 75%}
.ipt_resv_ppl_r {width: calc(100% - 22px); height: 38px; line-height: 38px; border: 1px solid #dadada; border-radius: 4px; padding: 0px 10px; font-size: 14px}
.ipt_resv_ppl_r_large {width: calc(100% - 22px); height: 88px; line-height: 24px; border: 1px solid #dadada; border-radius: 4px; padding: 0px 10px; font-size: 14px}

.resv_ppl_box {border-top: 1px solid #e9e9e9; padding: 30px 0px; margin: 30px 0px;}
.resv_ppl_chk_s {float: left; width: 20px; height: 20px; border-radius: 2px; background-color: #FF6200; cursor: pointer; background-image: url('/garage/images/ic_inner_check.png'); background-size: 70%; background-position: center; background-repeat: no-repeat;}
.resv_ppl_chk {float: left; width: 20px; height: 20px; border-radius: 2px; background-color: #dfdfdf; cursor: pointer;}
.resv_ppl_chk_txt {float: left; height: 20px; line-height: 20px; font-size: 18px; margin: 0px 10px}
.resv_ppl_chk_gray {margin: 10px 10px 40px 10px; font-size: 13px; color: #a6a6a6; line-height: 20px;}

.resv_ppl_bt {height: 55px; line-height: 55px; color: white; text-align: center; background-color: #FF6200; font-size: 18px; font-weight: 700; margin: 50px 0px 10px 0px; border-radius: 10px; cursor: pointer;}
.resv_ppl_bt_gray {height: 55px; line-height: 55px; color: white; text-align: center; background-color: #d2d2d2; font-size: 18px; font-weight: 500; border-radius: 10px; cursor: pointer;}

.resv_view {padding: 20px 0px;}


/* 팝업 전체 래퍼 */
.popup_w {width: 1280px; margin: 10vh auto;}

/* 팝업 창 */
.popup {width: 1080px; height: 750px; top: calc(50vh - 375px); left: calc(50% - 540px); font-size: 18px; z-index: 1000000000; position: fixed}

/* .popup_navi_pc {height: 68px; line-height: 68px; text-align: center; margin: 5px 0px 0px 0px} */
.popup_navi {height: 68px; line-height: 68px; text-align: center; margin: 0px 0px 0px 0px}

.popup_navi_pc {
    display: flex;          /* flex 박스 적용 */
    height: 68px;
    line-height: 68px;
    text-align: center;
    margin: 2px 0px 0px 0px;
    gap: 2px; 
}
.popup_bt {
    flex: 1;                /* 개수에 상관없이 남은 공간을 동일하게 나눠 가짐 */
    height: 68px;
    border-radius: 3px;
    background-color: white;
    color: black;
    cursor: pointer;
    box-sizing: border-box; /* 테두리 포함 계산 */
}

/* 활성화된 버튼 스타일 */
.popup_bt_s {
    flex: 1;
    height: 68px;
    border-radius: 3px;
    background-color: #FF7017;
    color: white;
    cursor: pointer;
    box-sizing: border-box;
}

/* 닫기 버튼 등 UI */
.popup_img_close {position: absolute; z-index: 10; top: 18px; right: 18px; width: 20px; height: 20px; background-image: url('/garage/images/ic_popup_close.png'); cursor: pointer;}
.popup_img_exit {position: absolute; z-index: 10; bottom: 18px; left: 18px; cursor: pointer;}
div.popup_img_exit a {color: white;}

.cart_m {border-bottom: 1px solid #c0c0c0; line-height: 20px; margin: 0px 20px; padding: 15px 0px; font-size: 18px; font-weight: 400;}
.cart_m_t {float: left; width: 60%; line-height: 20px; }
.cart_m_c {float: right; height: 20px; line-height: 20px; margin: 0px 20px}
.cart_m_x {float: right; width: 20px; height: 20px; margin: 0px 0px; background-image: url('/garage/images/ic_close.png'); background-size: 14px; background-position: center; background-repeat: no-repeat; cursor: pointer;}

/* [중요] 이미지가 보여지는 '액자' 역할 (여기서 넘치는 걸 숨김) */
.popup_img {
    position: relative;
    width: 1080px;
    height: 680px;
    overflow: hidden; /* 마스크 역할 */
    z-index: 1000000;
}

/* [중요] 실제 움직이는 '필름' 역할 */
#pbox_img {
    display: flex;       /* 가로 배치 */
    flex-wrap: nowrap;   /* 줄바꿈 금지 */
    width: 100%;         /* 부모 너비(1080px)와 동일하게 설정하여 JS 계산 기준 잡기 */
    height: 100%;
    /* overflow: hidden;  <-- [삭제 필] 이게 있으면 2번째 장부터 잘려서 안 보입니다! */
}

/* [중요] 개별 이미지 */
.popup_img_banner {
    position: relative; /* static 대신 relative 권장 (필요시 absolute 자식 배치 위해) */
    width: 100%;        /* 부모(#pbox_img) 너비인 1080px을 꽉 채움 */
    flex-shrink: 0;     /* [필수] 공간이 모자라도 절대 줄어들지 않음 (이거 없으면 찌그러짐) */
    height: 680px !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



/* calednar */

.calendar {padding: 0px 2.5%;}
.calendar_tr {width: 100%; height: 40px; border-bottom: 1px solid #E8EAF0; text-align: center; overflow: hidden}

.calendar_td_sat {float: left; width: 15%; height: 38px; line-height: 48px; font-size: 16px; color: #222222; position: relative; cursor: pointer;}
.calendar_td {float: left; width: 14%; height: 38px; line-height: 48px; font-size: 16px; color: #222222; position: relative; cursor: pointer;}
.calendar_td_sun {float: left; width: 15%; height: 38px; line-height: 48px; font-size: 16px; color: #E40000; position: relative}

.calendar_td_this_day {position: absolute; top: 4px; left: calc(50% - 16px); border-radius: 50%; width: 32px; height: 32px; line-height: 32px; background-color: #FF6200; color: white; text-align: center}
.calendar_td_view_day {position: absolute; top: 4px; left: calc(50% - 16px); border-radius: 50%; width: 32px; height: 32px; line-height: 32px; color: black; text-align: center}

/*.calendar_td_view_day {height: calc((100vh - 170px) / 6); overflow: hidden}*/

.cal_month_w {width: 95%; padding: 0px 2.5%; height: 48px; background: white; text-align: center; margin: 0px 0px 0px 0px}
.cal_day_m {float: left; width: 14%; height: 48px; line-height: 48px; font-size: 16px}
.cal_day_m_sat {float: left; width: 15%; height: 48px; line-height: 48px; font-size: 16px; color: #222222}
.cal_day_m_sun {float: left; width: 15%; height: 48px; line-height: 48px; font-size: 16px; color: #E40000}

.cal_month {position: relative; height: 18px; line-height: 18px; text-align: center; margin: 40px 10px 10px 10px; font-size: 17px; font-weight: 500; color: #4a5660;}
.cal_prev {position: absolute; top:0px; left: 0px; width: 18px; height: 18px; background-image: url('/garage/images/ic_prev.png'); background-size: 100%; background-position: cover; background-repeat: no-repeat; cursor: pointer;}
.cal_next {position: absolute; top: 0px; right: 0px; width: 18px; height: 18px; background-image: url('/garage/images/ic_next.png'); background-size: 100%; background-position: cover; background-repeat: no-repeat; cursor: pointer;}

.cal_time_title {font-size: 18px; margin: 30px 0px 10px 0px}
.cal_time {float: left; width: 80px; height: 32px; line-height: 32px; text-align: center; border-radius: 5px; font-size: 14px; border: 1px solid #dadada; margin: 0px 5px 5px 0px; cursor: pointer;}
.cal_time_off {float: left; width: 80px; height: 32px; line-height: 32px; text-align: center; border-radius: 5px; font-size: 14px; background-color: #F6F7F9; color: #bfbfbf; border: 1px solid #dadada; margin: 0px 5px 5px 0px}
.cal_time_this {float: left; width: 80px; height: 32px; line-height: 32px; text-align: center; border-radius: 5px; font-size: 14px; background-color: #fffaf7; color: #FF6200;  border: 1px solid #FF6200; margin: 0px 5px 5px 0px}
.cal_time_off_this {float: left; width: 80px; height: 32px; line-height: 32px; text-align: center; border-radius: 5px; font-size: 14px; background-color: #fffaf7; color: #FF6200;  border: 1px solid #FF6200; margin: 0px 5px 5px 0px}

/* feedback */
.feedback_view_inner {width: 1000px; height: 780px; position: fixed; top: calc(50vh - 390px); left: calc(50% - 500px)}
.feedback_view_inner_w {height: 600px; background-color: white}
.feedback_view_inner_title {font-size: 26px; line-height: 40px; height: 40px; padding: 20px 0px; text-align: center; background-color: white}
.feedback_view_inner_photo {width: 900px; margin: 0px auto;}
.feedback_view_inner_photo_lef {float: left; width: 450px; height: 370px}
.feedback_view_inner_photo_rig {float: left; width: 450px; height: 370px}

.feedback_view_inner_txt_lef {float: left; width: 450px; height: 40px; line-height: 40px; font-size: 20px; font-weight: bold; text-align: center; padding: 10px 0px 0px 0px}
.feedback_view_inner_txt_rig {float: left; width: 450px; height: 40px; line-height: 40px; font-size: 20px; font-weight: bold; text-align: center; padding: 10px 0px 0px 0px}

.feedback_view_txt {font-size: 13px; text-align: center; line-height: 22px; font-weight: 600; margin: 20px 0px}

.feedback_view_list {width: 1000px; height: 120px; margin: 15px auto}
.feedback_view_list_1 {float: left; width: 322px; height: 150px; margin: 0px; border: 1px solid white}
.feedback_view_list_2 {float: left; width: 322px; height: 150px; margin: 0px 14px; border: 1px solid white}
.feedback_view_list_3 {float: left; width: 322px; height: 150px; margin: 0px; border: 1px solid white}
.feedback_view_list_p {float: left; width: 161px; height: 150px;}

.feedback_view_close {position: fixed; top: calc(50vh - 425px); right: calc(50% - 500px); width: 20px; height: 20px; background-image: url('/garage/images/ic_close.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; cursor: pointer;}

.feedback_view_prev {position: fixed; top: calc(50vh - 90px); left: calc(50% - 550px); width: 40px; height: 40px; background-image: url('/garage/images/feedback_view_prev.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; cursor: pointer}
.feedback_view_next {position: fixed; top: calc(50vh - 90px); right: calc(50% - 550px); width: 40px; height: 40px; background-image: url('/garage/images/feedback_view_next.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; cursor: pointer}


/* login */
.login_inner {width: 650px; padding: 45px 125px; position: fixed; top: calc(50vh - 300px); left: calc(50% - 445px); background-color: white; text-align: center; border-radius: 10px;}
.login_title {font-size: 26px; font-weight: bold;}
.login_title_se {font-size: 16px; color: #787878; margin: 20px 0px 40px 0px}
.login_kakao {height: 49px; line-height: 49px; background-color: #FAE100; color: black; font-size: 16px; font-weight: 700; text-align: center; border-radius: 5px; margin: 36px 0px 0px 0px; cursor: pointer;}
div.login_kakao a {text-decoration: none; color: black;}
.login_number {height: 49px; line-height: 49px; background-color: #FF6200; color: white; font-size: 16px; font-weight: 700; text-align: center; border-radius: 5px; margin: 10px 0px 0px 0px; cursor: pointer;}

.login_ipt {margin: 20px 0px 10px 0px; color: black; font-size: 16px; font-weight: bold; text-align: left;}
.ipt_login {width: calc(100% - 22px); height: 60px; line-height: 60px; border: 1px solid #dadada; border-radius: 5px; padding: 0px 10px; font-size: 18px; margin: 0px 0px 10px 0px}
.ipt_login2 {width: calc(100% - 22px); height: 60px; line-height: 60px; border: 1px solid #dadada; border-radius: 5px; padding: 0px 10px; font-size: 18px; margin: 0px 0px 10px 0px}

.login_ipt_se {color: #787878; margin: 0px 0px 30px 0px; font-size: 14px; text-align: left;}
.bt_login {width: 100%; height: 62px; line-height: 62px; border: 0px; background-color: #FF6200; color: white; text-align: center; border-radius: 10px; cursor: pointer; margin: 0px 0px 10px 0px; font-size: 20px}
.login_lef {float: left; width: 400px}
.login_rig {float: right; width: 230px}

.login_view_close {position: fixed; top: calc(50vh - 340px); right: calc(50% - 445px); width: 20px; height: 20px; background-image: url('/garage/images/ic_close.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; cursor: pointer;}


.terms_wrap {width: 1200px; margin: 0px auto 100px auto}
.terms_title {font-size: 40px; text-align: center; font-weight: bold; margin: 100px 0px 20px 0px;}
.terms_title_sub {font-size: 18px; text-align: center; color: #777777; margin: 10px 0px 50px 0px}
.terms_body_title {font-size: 24px; font-weight: bold; margin: 30px 0px 5px 0px}
.terms_body_title_se {font-size: 20px; font-weight: bold; margin: 20px 0px 0px 0px}
.terms_body {font-size: 17px; line-height: 28px; margin: 10px 0px; color: #777}
.terms_body_square {font-size: 17px; line-height: 28px; margin: 10px 0px; color: #777; border: 1px  solid #dfdfdf; padding: 25px}


.view_youtube {margin: calc(50vh - 250px) calc(50% - 400px)}
.close_youtube {position: fixed; top: calc(50vh - 340px); right: calc(50% - 400px); width: 20px; height: 20px; background-image: url('/garage/images/ic_close.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; cursor: pointer;}
.viewmore_youtube {position: absolute; bottom: -10px; right: calc(50% - 630px); font-weight: bold; font-size: 16px}
div.viewmore_youtube a {color: white; cursor: pointer;}


.view_youtube_frame {width: 800px; height: 500px; position: absolute; top: calc(50vh - 300px); left: calc(50% - 400px)}


.c_sentence_myinfo_logout {float: right; padding: 0px 15px; line-height: 36px; border: 1px solid #e9e9e9; border-radius: 5px; font-size: 14px; cursor: pointer; margin: 10px 0px 0px 0px}