@charset "UTF-8";
/* ---------------------------------------------------
>>> 1.0 main
    section 01 - BG & search area
    section 02 - promotion - special price
    section 03 - banner
    section 04 - promotion - popular, golf
    section 05 - map & boxes
>>> 2.0 reserve
    section 01 - search area
    section 02 - list - card type
    section 03 - list - list type
>>> 3.0 reserve-form
    section 01 - car info
    section 02 - who info
    section 03 - driver info
    section 04 - insurance select
    section 05 - agree
    section 06 - pay info
    button 
>>> 4.0 reserve-check
    section 01 - reserve check form
>>> 5.0 chk-result
    section 01 - car info
    section 02 - rent info
    section 03 - who info
    section 04 - driver info
    section 05 - pay info
    button 
>>> 6.0 rent-info
    section 01 - qualification
    section 02 - rent process
    section 03 - cancel policy
    section 04 - attention
>>> 7.0 insurance-info
    section 01 - general info
    section 02 - insurance info
    section 03 - except info
    section 04 - accident
>>> 8.0 BBS
    section 01 - sub menu area
    section 02 - 01 - noti - list
    section 02 - 02 - noti - view
    section 02 - 03 - FAQ - list
    section 02 - 04 - Q&A - list
    section 02 - 05 - Q&A - view
    section 02 - 06 - Q&A - write
    section 02 - 07 - Q&A - lock
>>> 9.0 Policy - Privacy & Use
>>> 10.0 admin - login
>>> 11.0 long term
    section 01 - long head
>>> 12.0 company
*/


/* -->>> 1.0 main > section 01 - BG & search area */
#main { position: relative; overflow: hidden; }
.main_bg {
    background-image: url('../img/bg_01.png');
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.bg-inner { max-width: 1100px; margin: auto; padding-top: 190px; padding-bottom: 3%; }
.bg-inner h1 { 
    text-align: center; 
    font-size: 3.6vmin; 
    font-family: MaruBuri; 
    font-weight: 400; 
    line-height: 1.5;
    margin-bottom: 50px;
    text-wrap: balance;
}
.search-box { 
    background: #fff; 
    width: 100%; 
    border-radius: 20px; 
    box-shadow: 0px 0px 25px 0px rgba(71, 121, 157, 0.20);
    display: flex;
    justify-content: space-between;
    padding: 25px 25px 25px 45px;
    position: relative;
}
.search-box .date-select { width: 30%; padding-top: 20px; }
.search-box .sub-select { width: 30%; padding-top: 5px; }
.search-box .date-select .tit, 
.sub-select .tit, .car-select .tit { 
    font-size: 1.125rem;
}
.search-box .date-select .date-area, 
.sub-select .date-area { 
    font-size: 1.625rem; 
    letter-spacing: 0; 
    cursor: pointer;
    border: none;
    font-weight: 500;
    padding: 0;
}
.sub-select .date-area:focus { border: none; }
.time select {
    color: #777676;
    border: none;
    font-size: 1.625rem;
    padding-right: 25px;
    background-position-x: 100%;
    padding-left: 5px;
    margin-left: -10px;
}
.search-box .car-select { width: 20%; padding-top: 20px; }
.search-box .car-select select { 
    border: none;
    border-bottom: 1px solid #898989;
    width: 100%;
    font-size: 1.125rem;
    background-size: 16px;
    padding: 10px 0;
}
.search-box select option { padding: 10px; }
.net-time { margin-top: 5px; }
.search-btn { padding: 2.3%; border-radius: 20px; }
.search-btn::before {
    content: "\f002";
    font: var(--fa-font-solid);
    color: #fff;
    font-size: 2.5rem;
}
.banner-area { margin-top: 30px;}
.banner-area ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.banner-area ul li { 
    background: #fff;
    padding: 30px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 20px;

}
.banner-area ul li:first-child { margin-left: 0;}
.banner-area ul li figure { width: 240px; height: 170px; }
.banner-area ul li figure img { width: 100%; }
.banner-area li:nth-child(2) img { width: 85%;}
.super { padding-top: 20px; }
.banner-area ul li p { font-size: 1.25rem; line-height: 1.5; text-wrap: balance; }


/* -->>> 1.0 main > section 01 - calenda layer */
.datebox {
    background: #fff;
    flex-shrink: 0;
    padding: 2.5rem;
    position: absolute;
    top: 160px; left: 0;
    transition: transform 0.25s ease-out;
    display: none;
    border: 5px solid #c8d8ff; border-radius: 15px;
    color: #777676;
    z-index: 1;
}
.datebox .month-area { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    margin-top: 30px;
    gap: 20px;
}
.datebox .month-area .month {
    background: #fafafa;
    border-radius: 10px;
    padding: 30px 20px 15px 20px;
    font-size: 0.875rem;
    
}
.datebox .month-area .month>header { 
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E4E5E7;
    padding: 0 15px 30px 15px;
    margin-bottom: 30px;
}
.datebox .month-area .month>header p { 
    font-size: 1rem;
    color: #1a202C;
    font-weight: 500;
}
.prev-m { margin-right: 25px; }
.month-tbl>th {
    display: block;
    padding-top: 30px;
}
.month-tbl table thead { margin-bottom: 20px; }
.month-tbl td { 
    border: none; 
    padding: 15px;
    text-align: center;
    height: auto;
}
.output, .datebox-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-size: 1rem;
    align-items: center;
}
.output .out-date {
    display: flex;
    align-items: center;
    border: 1px solid #f6f6f6;
    border-radius: 10px;
    padding: 5px 20px;
    margin-top: 20px;
}
.output .out-date input { border: none; }
.output .out-date select { border: none; }
.datebox-foot { margin-top: 40px; }
.datebox-foot p { font-size: 1.125rem; color: #1A202C; margin-left: 10px;}
.datebox-foot .date-btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.datebox-foot .date-btn button {
    padding: 12px 0;
    font-size: 1.125rem;
}

/* -->>> 1.0 main > section 02 - promotion - special price */
.main-section { padding-top: 130px; }
.main-section hgroup { text-align: center; margin-bottom: 60px; }
.main-section hgroup p { font-size: 1.25rem; color: #777676; margin-bottom: 30px; }
.main-section hgroup h1 { font-size: 3.125rem; font-weight: 500; }
.car-list-card { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    position: relative; 
}
.car-card { 
    border-radius: 15px; 
    border: 1px solid #e0e0e0; 
    background: #fff; 
    overflow: hidden; 
}
.car-card .card-top { padding: 25px 25px 15px 25px; }
.car-card .card-top figure { width: 100%; height:185px; text-align: center; }
.car-card .card-top img { width: 80%; padding: 30px 0 50px 0; }
.label-year { 
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    padding: 2px 7px;
    font-size: 0.875rem;
    background: #fff;
}
.car-name { 
    font-size: 1.375rem; font-weight: 600; 
    margin: 15px 0 12px 0;
}
.car-info { margin-bottom: 2px; }
.car-info span { margin-right: 20px; }
.car-info span:last-child { margin-right: 0px; }
.people::before, .bag::before, .charger::before, .oil::before {
    content: "\e533";
    font: var(--fa-font-solid);
    margin-right: 5px;
}
.bag::before { content: "\f5c1"; }
.charger::before { content: "\f5e7"; }
.oil::before { content: "\f52f"; }
.car-card .card-bottom { 
    display: flex; 
    justify-content: space-between;
    padding: 15px;
}
.price { 
    font-size: 1.625rem; font-weight: 600;
    margin-top: 8px; margin-left: 12px; 
}
.price p { margin-bottom: 0;}
.btn-card-resv { width: 90px; height: 70px; font-size: 1.25rem; font-weight: 500; }
.main-section .more { 
    display: block; 
    width: 190px; 
    padding: 18px;
    margin: 80px auto 0 auto;
    color: #777676;
}

/* -->>> 1.0 main > section 03 - banner */
.sec3 { padding: 130px 0 0; }
.mid-ban { width: 100%; }

/* -->>> 1.0 main > section 04 - promotion - popular, golf */
.bg-gray { background: #f9f9f9; }
.sec4 { padding: 100px 0; }
.arrow { position: absolute; top:40%; width: 100%; }
.arrow img { width: 65px; }
.arrow .arr_left { position: absolute; left: -32px; opacity: 0.5; transform: rotate(180deg); }
.arrow .arr_right { position: absolute; right: -32px; }

/* -->>> 1.0 main > section 05 - map & boxes */
.map { width: 100%;}
.map-area { 
    border: 1px solid #e0e0e0; 
    display: grid; 
    grid-template-columns: 1fr 1fr;
    color: #777676;
}
.map-area .info-area .full-bg { 
    background: #f9f9f9;
    display: flex;
    align-items: center;
    padding: 55px;
    line-height: 1.5;
}
.map-area .info-area .contact { padding: 45px 55px 0; }
.map-area .info-area .contact p { height: 73px; }
.map-area .info-area .bus::before, .add::before, .tel::before, .mail::before {
    content: "\f207";
    font: var(--fa-font-solid);
    background: #8BCEDD; color: #fff;
    border-radius: 50%;
    margin-right: 15px;
    padding: 10px;
    display: inline-block;
    width: 20px; height: 20px;
    font-size: 1.25rem; text-align: center; vertical-align: middle;
}
.map-area .info-area .add::before { content: "\f3c5";}
.map-area .info-area .tel::before { content: "\f590";}
.map-area .info-area .mail::before { content: "\f0e0";}
.map-area .info-area .contact .tel { display: inline-block; }
.map-area .info-area .contact .cs-number { 
    font-size: 1.875rem; color: #1a202C; font-weight: 600; 
    margin-right: 10px; vertical-align: sub;
}
.map-area .info-area .contact .cs-info { 
    border: 1px solid #e0e0e0; 
    padding: 3px 8px; 
    font-size: 1rem; border-radius: 5px;
}
.ban2 ul { 
    margin-top: 50px; 
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px;
}
.ban2 ul li { 
    display: grid;
    justify-content: center;
    padding: 12% 0 7% 0;
}
.ban2 ul li:nth-child(odd) { background: #E8FFD5; }
.ban2 ul li:nth-child(even) { background: #E4F5FF; }
.ban2 ul li figure { width: 100%; }
.ban2 ul li p { line-height: 1.5; margin-top: 25px; }

/* -->>> 2.0 reserve > section 01 - search area */
.sub-section { padding-top: 90px}
.sub-section hgroup { 
    display: flex; 
    flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    margin-bottom: 5px;
    padding: 0 10px;
}
.sub-section hgroup h3 { font-weight: 400; font-size: 1.5rem; }
.sub-section h3 { 
    font-weight: 500; 
    font-size: 1.5rem; 
    margin-bottom: 15px; 
    margin-right: 15px;
}
.sub-section hgroup span { color: #acacac; }
.realtime { 
    border: 1px solid #B1D6EA;
    box-shadow: none;
    padding: 3%;
    gap: 50px;
}
.realtime div:nth-child(3) { width: 15%; }
.sub-btn {
    padding: 15px 20px 15px 75px;
    font-size: 1.25rem; font-weight: 500;
    display: flex; align-items: center;
}
.sub-btn::after {
    content: "\f002";
    font: var(--fa-font-solid);
    color: #fff;
    font-size: 2.188rem;
    margin-left: 42px;
}
.car-type { text-align: center; margin-top: 34px; color: #1A202C; }
.active { color: var(--primary); font-weight: 600; }
.car-type ul { display: flex; flex-wrap: wrap;}
.car-type ul li { position: relative; width: calc(100% / 8);}
.car-type ul li::before {
  content: "";
  background-color: #c0c0c0;
  position: absolute;
  left: 0;
  width: 1px; height: 15px;
}
.car-type ul li:after {
  content: "";
  background-color: #c0c0c0;
  position: absolute;
  right: -1px;
  width: 1px; height: 15px;
}

/* -->>> 2.0 reserve > section 02 - list - card type */
.result-filter {
    display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: center;
    color: #777676;
    padding: 0 10px 20px;
}
.result-filter .flter-right { display: inline-flex; }
.result-filter .right { margin-left: 10px; }
.result-filter .right a { 
    display: inline-block; 
    width: 30px; height: 30px; 
    margin-left: 2px;
    text-align: center;
    vertical-align: middle;
}
.result-filter .right a img { margin-top: 2px; }
.result-filter .right .active { background: #e0e0e0; border-radius: 5px; }
.result-filter .right a:hover { background: #e0e0e0; border-radius: 5px; }
.result-filter .right select {
    border: 1px solid #e0e0e0; 
    padding: 2px 10px; margin-right: 2px;
    font-size: 1rem; border-radius: 5px;
    color: #777676;
}
.result-filter .right select:focus { border-radius: 0;}

/* -->>> 3.0 reserve-form > */
/* -->>> 3.0 reserve-form > section 01 - car info */
.car-info { display: flex; font-size: 0.875rem; flex-wrap: wrap; }
.car-img {
    background-color: #FAFAFA;
    width: 40%;
    padding: 100px 70px 70px 70px;
    text-align: center;
    border-right: 1px solid #e0e0e0;
}
.car-img img { width: 100%; }
.info-right { width: 60%; }
.right-top { padding: 40px 100px 0px 50px; }
.info-right .car-name { 
    font-size: 1.875rem; 
    font-weight: 500; 
    margin-bottom: 15px;
    color: #1A202C;
}
.info-right .quali { margin-top: 20px; }
.info-right .quali span { margin-right: 0px; display: inline-block; }
.info-right .quali span::after {
    content: "|";
    font-size: 0.75rem;
    color: #e0e0e0;
    margin: -5px 7px;
}
.info-right .quali span:last-child::after { content: ""; }
.info-right .option ul {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0 40px 0;
    gap: 1px;
}
.info-right .option ul li { 
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    color: #777676;
    text-align: center;
    border-radius: 2px;
}
.info-right .rent-date-info {
    padding: 20px 120px 20px 55px;
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
}
.info-right .rent-date-info { font-size: 1.125rem; }
.info-right .rent-date-info p { margin-bottom: 10px; }
.info-right .rent-date-info .date { font-size: 1.25rem; }
.info-right .rent-date-info span { margin-right: 0; color: #a6a6a6; }
.info-right .rent-date-info .rent-hours { 
    background: #e0e0e0;
    width: 90px; height: 90px;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.info-right .rent-date-info .rent-hours p { 
    width: 50px; 
    line-height: 16px; 
    margin-bottom: 0; 
    font-size: 0.875rem;
}
/* -->>> 3.0 reserve-form > section 02 - who info */
.info-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.who-same { float: right; margin-top: 10px; }
.sub-info input[type="checkbox"] {
    width: 18px; height: 18px;
    margin-right: 2px;
    overflow: hidden;
}
.sub-info h3 .chk-24 { width: 24px; height: 24px; margin-right: 5px;}
.info-tbl {
    border-top: 2px solid;
    border-top-color: var(--primary);
    margin-top: 15px;
}
.info-tbl table { width: 100%; table-layout: fixed; }
.info-tbl th { 
    font-size: 1rem; 
    font-weight: 400; 
    background: #fafafa;
    padding-left: 30px; 
    width: 15%;
}
.info-tbl td { padding-left: 10px; padding-right: 10px; }
.chk-tbl td { padding-left: 30px; }
.info-tbl table th,td  { 
    border-bottom: 1px solid #e0e0e0; 
    vertical-align: middle;
    text-align: left;     
}
.info-tbl .info-txt {
    font-size: 0.938rem;
    color: #777676;
    line-height: 23px;
    vertical-align: middle;
    padding-left: 10px;
}
.info-tbl .licence { display: flex; width: 100%; }
.info-tbl .licence .licc-active { border: 1px solid #769CFF; color: #769CFF; }
.info-tbl .licence li { 
    text-align: center;
    margin-right: 20px;
    display: flex;
    align-items: center;
    font-size: 0.938rem;
    color: #777676;
}
.info-tbl .licence span { margin: 0; }
.info-tbl .licence li input { margin-right: 5px; width: 16px; height: 16px; }
.info-tbl .insu {
    display: flex;
    gap: 10px;
    color: #777676;
    margin-top: 30px;
}
.info-tbl .insu li { border: 1px solid #e0e0e0;}
.info-tbl .insu li .active { border: 1px solid; border-top-color: var(--primary);}
.info-tbl .insu .active .btn-area .btn-insu { background-color: var(--primary); color: #fff;}
.info-tbl .insu .insu-tit { 
    font-size: 1.125rem; 
    color: #1A202C; 
    text-align: center;
    padding: 20px 0 12px 0;
}
.info-tbl .insu .insu-detail {
    padding: 30px 45px 30px 40px;
    font-size: 0.875rem;
    margin-bottom: 15px;
}
.info-tbl .insu .insu-detail p { margin-bottom: 15px; }
.info-tbl .insu .insu-price { 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color: #1A202C;
    padding: 0 30px 5px 30px;
}
.info-tbl .insu .insu-price span { font-size: 1.375rem; font-weight: 500; }
.info-tbl .insu .btn-area {
    padding: 20px;
    color: #777676;
}
.info-tbl .insu .btn-area .btn-insu { 
    width: 100%; 
    border-radius: 5px;
    height: 43px;
    font-size: 1rem;
    color: #777676;
}
.info-tbl .time { color: #acacac; margin-left: 5px; }
.info-pp { display: grid; grid-template-columns: 1fr; }
.info-pp2 { grid-template-columns: 1fr; }
.info-pp-li { 
    border-bottom: 1px solid #e0e0e0; 
    width: 100%; 
    display: flex; 
    align-items: center;
    overflow: hidden;
}
.info-pp-li label {
    display: flex;
    flex-wrap: wrap;
    height: 60px;
    background: #fafafa;
    align-items: center;
    padding-left: 30px;
    width: 15%;
}
.info-attion { display: flex;}
.input-box {  padding: 0 10px; width: 85%; }
.txt2 { margin-top: 10px; }
.chk-driver { color: #777676; line-height: 1.3;}

/* -->>> 3.0 reserve-form > section 05 - agree tab  */
.tabs {
    position: relative; 
    margin-top: 15px;
    height: 350px; 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 0; 
}
.tab {
    display: inline-flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
}
.tab label { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tab .tab-cont { 
    position: absolute;
    top: 49px; 
    left: 0;
    right: 0;
    background: white;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    height: 300px;
    overflow-y: auto;
    padding: 3%;
    line-height: 1.8;
    color: #777676;
    font-size: 0.875rem;
}
.tab [type="checkbox"]:checked ~ label {
    color: var(--primary);
    font-weight: 500;
}
.tab [type="checkbox"]:checked + label + .tab-cont {
    z-index: 1;
    display: block;
}
.tab input[type=checkbox] { width: 16px; height: 16px; margin-right: 8px;}
.tab-cont h2 { font-size: 0.938rem; font-weight: 700; }
.tab-cont h3 { font-size: 0.875rem; font-weight: 500; }
.tab-cont .disc { margin-left: 30px; margin-top: 5px; line-height: 2;}

/* -->>> 3.0 reserve-form > section 06 - pay info */
.pay-tbl th { text-align: left; padding: 10px 30px; }
.pay-tbl td { 
    text-align: right; 
    padding-right: 30px; 
    vertical-align: middle; 
    font-weight: 500;
}
.pay-net { 
    font-size: 1.563rem; 
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-right: 30px;
    font-weight: 500;
}
.pay-price { 
    font-size: 1.375rem;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-right: 30px;
}
.resv-btn-area { 
    margin: 100px auto 150px auto; 
    display: flex;
    justify-content: center;
}
.resv-btn-area button { 
    width: 200px; height: 60px;
    border-radius: 5px;
    font-size: 1.25rem; font-weight: 500;
    margin: 0 5px;
}
/* -->>> 4.0 reserve-check + >>> 8.0 BBS Q&A - lock */
.wth-sm { max-width: 600px; padding: 170px 100px; }
.wth-sm header { text-align: center;}
.wth-sm h1 { font-size: 2.5rem; }
.wth-sm header p { margin-top: 30px; font-size: 1.125rem; }
.resv-chk-form { margin-top: 90px; }
.resv-chk-form input { 
    padding: 25px; 
    margin-bottom: 35px; margin-top: 10px; 
    border-radius: 10px;
}
.resv-chk-form input::placeholder { font-size: 1rem; }
.resv-chk-form button {
    width: 100%;
    border-radius: 10px;
    font-size: 1.25rem; font-weight: 500;
    padding: 15px;
}
.wth-md { 
    max-width: 830px;
    width: 70%;
    background: #fafafa;
    border-radius: 10px;
    padding: 5% 8%;
    margin: 50px auto 0 auto;
}
.wth-md h1 { font-size: 1.625rem; font-weight: 500; margin-top: 28px;}
.wth-md header p { margin-top: 15px; }
.pw-chk { margin-top: 30px; }
.pw-chk input { margin-bottom: 10px; }

/* >>> 5.0 chk-result */
.result-h1 { font-weight: 500; margin-top: 150px;}

/* -->>> 6.0 rent-info */
/* -->>> 6.0 rent-info > section 01 - qualification */
.qualification { overflow-x: auto; }
.qualification table {
    border-top: 2px solid;
    border-top-color: var(--primary);
    margin-top: 15px;
    width: 100%;
}
.quli-tbl th { padding: 15px;}
.quli-tbl td { padding: 15px;}
.qualification th, td { 
    vertical-align: middle;
    line-height: 1.8;
    text-wrap:nowrap;
}
.qualification th { 
    font-size: 1rem; 
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
} 
.qualification td { color: #777676; } 
.num { color: #777676; margin-top: 25px; }
.num li {
    list-style: decimal; 
    text-indent: 5px; text-align: justify;
    margin-left: 20px; margin-bottom: 20px;
    line-height: 1.5;
}
.num2 li { margin-bottom: 7px; }
.attion::before {
    content: "\f071";
    font: var(--fa-font-solid);
    color: var(--primary);
    margin: 0 7px;
}
/* -->>> 6.0 rent-info > section 02 - rent process */
.take-over { color: #777676;}
.take-over h4 {
    font-size: 1.125rem; font-weight: 500;
    margin-top: 50px; margin-bottom: 15px;
}
.take-over ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.take-over li {
    border: 1px solid #e0e0e0;
    text-align: center;
    padding-bottom: 25px;
}
.take-over p {
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -0.8px;
}
.take-img { 
  width: 100%; 
  height: 220px; 
  padding: 35px 0 25px 0; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.take-img img { width: 65%; }
.airport img { height: 120px; }
.take-txt {
  margin-top: 35px; margin-bottom: 75px; 
  font-size: 1rem;
  border: 1px solid #e0e0e0
}
.take-txt dl { margin-bottom: 0; display: flex; align-items: center; }
.take-txt dt { width: 24%; text-align: center; padding: 20px;}
.take-txt dd { margin-bottom: 0; padding-left: 15px; }
.return-img { padding: 10px 10px 25px 10px; }
.return-img img { width: 100%; }
.policy-cancel { margin-top: 30px;}
.policy-cancel li { margin-bottom: 20px;}
.disc li { list-style: disc; line-height: 1.2; margin-top: 20px; }
.disc2 li { margin-left: 30px; margin-top: 10px; line-height: 1.5;}

/* -->>> 7.0 insurance-info >  */
.open-side { border-right: 1px solid #e0e0e0; }
.accident th { width: 20%; }
.tit-ex { color: #777676; margin: 10px 0;}
.after-acc { margin-top: 30px;}
.after-acc span {
  padding: 10px 25px; 
  border-radius: 5px;
  margin-bottom: 10px;
  display: inline-block;
}
.after-acc ol { margin-left: 20px; line-height: 1.5; margin-top: -15px;}
.after-acc ol li { line-height: 1.3; }


/* -->>> 8.0 BBS >> section 01 - sub menu area */
.cs { 
    max-width: 830px;
    width: 70%;
    margin: auto;
    text-align: center;
    margin-bottom: 30px;
    padding: 0;
}
.cs h1 { font-size: 1.875rem; font-weight: 500; margin-top: 115px;}
.cs .cs-nav {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.cs .cs-nav .item {
    border:1px solid #e0e0e0;
    border-radius: 10px;
}
.cs .cs-nav .item:hover { border-color: var(--primary); }
.m-only { display: none; }
.cs .cs-nav .item a { display: block; padding: 35px 0 25px; }
.cs .cs-nav .item .menutt { color: #777676; display: block; }
.cs .cs-nav .item a img { margin-bottom: 23px; }
.cs .cs-nav .item .active { background: var(--primary); }
.cs .cs-nav .item .active .menutt { color: #fff; }

/* -->>> 8.0 BBS >> section 02 - BBS - list */
.bbs-hd {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}
.bbs-hd .filter { margin-bottom: 8px; }
.bbs-hd .filter, .filter p, .filter ul, .filter li { display: inline; }
.bbs-hd .filter p { margin-right: 50px;}
.bbs-hd .filter .filtered { color: #1A202C; }
.bbs-hd .filter li { color: #777676; }
.bbs-hd .filter li::after {
  content: "|";
  font-size: .875rem;
  color: #e0e0e0;
  margin: 0 10px;
  vertical-align: top;
}
.bbs-hd .filter li:last-child::after { display: none; }
.bbs-hd .bbs-right { display: flex; }
.bbs-search-box { position: relative; }
.bbs-search { 
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 10px;
  width: 270px;
  height: 45px;
  line-height: 40px;
  padding: 0 0.8rem;
  border: 1px solid #e0e0e0;
  outline: var(--primary);
}
.bbs-search-btn {
  background: none;
  position: absolute;
  right: 0;
  top: 3px;
}
.bbs-search-box .bbs-search-btn::after {
  content: "\f002";
  font: var(--fa-font-solid);
  color: #777676;
  font-size: 1.125rem;
}
.bbs-search:focus { background: none; }
.btn-write { 
    width: 130px; height: 45px;
    margin-left: 5px;
}
.bbs-list td { height: 80px; }
.view-tit { text-wrap: wrap; }
.bbs-list th { height: 80px; }
.bbs-no-cap {
    border-radius: 30px;
    width: 70px; height: 35px;
    border: 1px solid #BCCFFF;
    font-size: 0.875rem;
    color: var(--primary);
    display: flex;
    justify-content: center; align-items: center;
    margin-right: 10px;
    background: #fff;
}
.gray { border: 1px solid #e0e0e0; color: #777676;}
.bbs-no, .post-time { color: #a6a6a6; text-align: center; }
.bbs-no { width: 85px; }
.post-time { width: 10%; }
.post-writer { width: 75px; color: #a6a6a6; text-align: center; }
.noti-tit { width: 65%; }
.answer-status { width: 100px; }

/* only admin */
.admin-btn-write { 
  font-size: 1rem; 
  padding: 15px 30px; 
  float: right; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.admin-btn-write:hover { background: var(--hover); color: #fff;}
.cke_sc { display: none;}
.btn_confirm { 
  margin-top: 20px !important;
  display: flex;
  justify-content: space-between;
}
.wrt-cancel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 40px;
  font-size: 1rem;
}
/* >> faq details  */
summary::-webkit-details-marker { display: none !important; }
details summary { 
  border-bottom: 1px solid #e0e0e0;
  padding: 25px 20px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  position: relative;
}
details summary::after {
  content: "\f107";
  font: var(--fa-font-solid);
  position: absolute;
  right: 20px;
}
details[open] summary::after { 
  transform: rotate(180deg); 
  transition: all .5s; 
}
details[open] .faq-answer { display: block; }
.faq-no {
  margin-right: 15px; 
  border-radius: 20px;
  border: 1px solid var(--primary);
  font-size: 0.875rem;
  color: var(--primary);
  width: 40px;
  height: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -10px;
  padding-bottom: 3px;
  flex-shrink: 0;
}
.faq-answer {
    display: none;
    background: #Fff;
    color: #777676;
    line-height: 1.5;
    padding: 40px 30px;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
}

/* -->>> 8.0 BBS >> section 02 BBS - view */
.bbs-contents { line-height: 2; color: #777676;  padding: 35px 0px; }
.qna-tit::before {
  content: "\f023";
  font: var(--fa-font-solid);
  margin-right: 15px;
}
.qna-view-question { 
    padding:  0px 50px;
    min-height: 130px;    
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
}
.reply { 
    padding: 0px 50px;
    min-height: 130px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.bbs-btn-area {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.reply-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: baseline;
    width: 100%;
}
.reply-top .reply-time { color: #a4a4a4;}
.answer {
    background: #FAFAFA;
    color: #777676;
    line-height: 1.8;
    padding: 35px 0px;
    border-bottom: 1px solid #e0e0e0;
}

/* -->>> 8.0 BBS >> section 02 BBS - write */
.bbs-write input { margin: 10px 0; }
.w50 { width: 50% !important;}
.lock { display: inline-block; margin-left: 20px;}
.lock::before {
    content: "\f023";
    font: var(--fa-font-solid);
    margin-right: 15px;
}
.bbs-policy { padding: 15px 0;}
.bbs-policy input { margin-left: 5px;}
.policy-sm-box {
    height: 150px;
    overflow-y: scroll;
    color: #777676;
    padding: 20px;
    line-height: 1.8;
    text-align: justify;
    font-weight: 300;
}
/* -->>> 8.0 BBS >> Pagination */
.pagination {
    margin: 55px 0;
    text-align: center;
}
.pagination .btnView {
    overflow: hidden;
    display: inline-block;
    position: relative;
}
.pagination a {
    float: left;
    width: 32px;
    height: 32px;
    margin: 0 6px;
    font-weight: 600;
    text-align: center;
    line-height: 32px;
}
.pagination a.prev, .pagination a.next {
    position: relative;
    width: 12px;
    height: 32px;
}
.pagination a.prev {
    margin: 0;
    margin-right: 10px;
}
.pagination a.prev:before {
    content: "\f053";
    font: var(--fa-font-solid);
    color:#DEE3FF;
}
.pagination a.next {
    margin: 0;
    margin-left: 10px;
}
.pagination a.next:before {
    content: "\f054";
    font: var(--fa-font-solid);
    color: #777676;
}
.pagination a.no.now {
    color: #fff;
    border-radius: 50%;
    background: var(--primary);
}
/* -->>> 8.0 BBS(CS) >> section 03 - branch */
.map2 {
  border-top: 2px solid;
  border-color: var(--primary);
}
.branch-info {
  background: rgba(0, 0, 0, .75);
  height: 45px;
  color: #fff;
  padding: 0px 35px;
  display: flex;
}
.branch-info ul {
  display: flex;
  align-items: center;
  gap: 30px;
}
.branch-info ul li {
  display: flex;
  align-items: center;
}
.branch-info ul li img { margin-right: 10px; }
.jeju-branch { margin-top: 100px; }

/* -->>> 8.0 BBS(CS) >> section 04 - events */
.main-branch h3, .jeju-branch h3, .cs-events h3 { font-size: 1.25rem; }
.cs-events { border-bottom: 1px solid #E0E0E0; }
.cs-events h3 span { padding: 0 35px 9px 35px; }
.cs-events .on { 
  border-bottom: 2px solid;
  border-color: var(--primary);
  color: var(--primary);
}
.cs-events .off { color: #777676; }
.events-list {
  margin: 50px 0 150px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px 15px;
}
.events-list li .inner { display: block; cursor: pointer; }
.events-list .thum { 
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.events-list .thum img { width: 100%; }
.events-list .tit { 
  font-size: 1.125rem; 
  margin-top: 28px; 
  font-weight: 600;
  margin-bottom: 15px;
}
.events-list .date { color: #777676; }
.events-list li .inner.end { pointer-events: none; }
.events-list li .inner.end .thum::before {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, .7);
}
.events-list li .inner.end .roundTXT {
  position: absolute;
  top: calc(50% - 20px); 
  left: calc(50% - 50px);
  width: 100px; height: 40px;
  border : 1px solid #fff;
  color: #fff;
  border-radius: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -->>> 9.0 Policy - Privacy & Use */
.policy-box {
    border: 1px solid #e0e0e0;
    border-top: 2px solid;
    border-top-color: var(--primary);
    width: 100%; 
    padding: 20px 50px 50px 50px;
    color: #474747;
    line-height: 1.8;
    font-weight: 300;
    text-align: justify;
}
.policy-box h4 { font-size: 1.25rem; margin: 30px 0;}
.policy-box h5 { font-size: 1rem; font-weight: 500; }

/* -->>> 10.0 admin - login */
.admin {
    padding: 80px;
    width: 500px; height: 570px;
    background: #fafafa;
    text-align: center;
    border-radius: 15px;
    margin: 150px auto 0 auto;
}
.admin img { width: 29.412%; }
.welcome { font-size: 2.25rem; margin: 20px 0; letter-spacing: -1.5px; }
.admin-input { margin-top: 30px;  }
.admin-input input {
    height: 60px;
    margin-bottom: 10px;
    border-radius: 10px;
}
.admin-input button { 
    width: 100%; height: 60px; 
    border-radius: 10px;
    font-size: 20px;
    font-weight: 500;
}
/* >>> 11.0 long term */
.long { background-color: #E8F8FF; }
.long-head { 
  padding: 170px 0 110px 0;
  background: url(../img/long-bgimg.png);
  background-repeat: no-repeat;
  background-position: 95% 65%;
  background-size: 25%;
}
.txt h2 { font-size: 3.125rem; color: #05073C; }
.txt p { 
  margin-top: 30px; 
  width: 60%;
  font-size: 1.125rem;
  color: #777676;
  line-height: 1.5;
}
.long-nav .long-nav-box { 
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 70px;
  margin-top: -35px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
}
.long-nav .long-nav-box li { color: #777676; }
.long-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  margin-top: 70px;
  gap: 30px;
}
.long-info div {
  border-radius: 24px;
  border: 1px solid #F2F2F2;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
  padding: 40px 35px 35px 40px;
}
.long-basic { grid-row: auto / span 2; }
.long-info .care {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}
.long-info div img { display: block; margin-bottom: 40px; }
.long-info div:nth-child(5) { grid-row: 4; }
.long-info div strong { font-size: 1.125rem; }
.long-info div p { color: #777676; line-height: 1.5; }
.long-info-p {margin-top: 15px; }
.long-flex { display: flex; align-items: center; gap: 38px; }
.care ul { margin-top: 25px;}
.care ul li { margin-top: 12px;}
.care ul li span {
  background-color: #F2F5FF;
  border-radius: 15px;
  width: 80px; height: 25px;
  display: inline-flex;
  justify-content: center; align-items: center;
  color: #05073C;
  font-size: 0.75rem; font-weight: 600;
  margin-right: 12px;
}
.long-term_02 {
  display: flex;
  justify-content: space-between;
  padding: 80px 50px;
}
.long_02_txt li:first-child { margin-top: 30px;}
.long_02_txt li { margin-top: 90px;}
.long_02_txt strong { font-size: 1.5rem; }
.long_02_txt p { color: #777676; line-height: 1.5; margin-top: 12px; }
.long-compare { 
  background: linear-gradient(#F5FAFB, #fff);
  padding: 150px 0 0 0;
}
.long-compare h3 { font-size: 30px; color: #05073C; text-align: center; }
.compare-tbl { 
  margin-top: 50px;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.04);
  background: #fff;
  width: 100%;
  border-radius: 24px;
}
.compare-tbl th {
  background-color: var(--primary);
  color: #fff;
  padding: 15px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  font-size: 1.25rem; font-weight:400;
}
.compare-tbl td { 
  padding: 20px; 
  color: #777676; 
  border-right: 1px solid #D5E7F4;
  border-bottom: 1px solid #D5E7F4;
}
.compare-tbl td:last-child { border-right: none; }
.compare-tbl .border-none td { border-bottom: none; }
.compare-tbl .td-left {
  color: var(--primary);
  font-weight: 600;
  text-align: center;
}
.compare-tbl tbody td img { margin-right: 5px; vertical-align: sub; }
.long-agree { 
  height: 200px; overflow-y: auto; 
  padding: 3%;
  line-height: 1.8;
  color: #777676;
  font-size: 0.875rem;
  margin: 25px 0 15px 0;
}
.long-agree h3 { font-size: 0.875rem; }
.select-brand { padding: 0 10px; height: 40px; width: 200px; }
.long-form { display: grid; grid-template-columns: 1fr 1fr; gap: 30px }
.long-usedays .startday { width: 160px; margin-right: 5px; }
.long-usedays .month { width: 85px; margin: 0 5px 0 25px; }
.long-personal { margin-top: 130px; }
.long-personal span { margin: 0 12px; }
.jeju-info { margin-top: 70px; }
.long-form .pp2-label { width: 25%; }


/* >>> 12.0 company */
.company { 
  background: url(../img/company-bg.png);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 60%;
  padding: 120px 0 110px 0;
}
.company-contents { 
  width: 1000px; 
  margin: 110px auto;
  display: flex;
  gap: 50px;
}
.company .txt p { margin-top: 20px; }
.company-contents .photo { width: 27% }
.company-contents .photo img { width: 100%; }
.greetings { width: 75%; }
.greetings p { color: var(--body-basic-gray); line-height: 1.5; text-align: justify; }
.ceo-sign { display: flex; align-items: center; margin-top: 90px;}
.ceo-sign img { margin-left: 32px; width: 25%; }