@charset "utf-8";

.inner { width: 100%; max-width: 1240px; margin: 0 auto; }

/* ===========================
    Common
=========================== */

:root{

    --main-color:#0b2f6a;
    --sub-color:#4aa7ff;
    --text-color:#222;
    --gray-color:#777;
    --border-color:#e5e5e5;
    --bg-color:#f8f9fb;

}

body{

    font-family:'Pretendard',sans-serif;
    color:var(--text-color);
    line-height:1.5;

}

.mo-only {display: none!important;}

/* ===========================
    Header
=========================== */

.header{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:90px;

    background:#fff;

    z-index:999;

}

.header .inner{

    display:flex;
    justify-content:space-between;
    align-items:center;

    height:100%;

}

.logo img{

    height:42px;

}

.gnb ul{

    display:flex;
    gap:50px;

}

.gnb a{

    font-size:17px;
    font-weight:600;
    transition: .3s;

}

.gnb a:hover{color:var(--sub-color);}

.menu-btn {display: none;}

.header_right{

    display:flex;
    align-items:center;
    gap:20px;

}

.btn_book{

    display:flex;
    justify-content:center;
    align-items:center;

    width:150px;
    height:48px;

    background:var(--main-color);
    color:#fff;

    border-radius:8px;

    transition:.3s;

}

.btn_book:hover{

    background:var(--sub-color);

}


/*언어 선택*/
.lang{
    position:relative;
}

.lang-btn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 40px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    font-weight:500;
}

.arrow{
    font-size:10px;
    transition:.3s;
}

.lang-list{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:150px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.1);
    overflow:hidden;

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.3s;
}

.lang-list li a{
    display:block;
    padding:12px 16px;
    color:#333;
    text-decoration:none;
}

.lang-list li a:hover{
    background:#f5f5f5;
}

.lang.active .lang-list{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.lang.active .arrow{
    transform:rotate(180deg);
}

/* ===========================
    Visual
=========================== */

.visual{

    position: relative;

    padding-top: 228px;

    background: url("../img/visual.jpg") no-repeat center center;

    height: 750px;

}

/*.visual .inner{

    display:flex;
    justify-content:space-between;
    align-items:center;
    height:700px;

}*/

.visual_txt{

    width:60%;

}

.sub_title{

    display:inline-block;

    margin-bottom:20px;

    color:var(--sub-color);

    font-size: 17px;
    
    font-weight:700;

}

.visual_title { color: #0c336a; }

.color_p { color : #09959c; }

.visual h2{

    font-size:72px;
    line-height:1.1;
    font-weight:800;

}

.visual p{

    margin-top:30px;

    font-size:22px;
    color:#555;

}

.visual_btn{

    display:flex;
    gap:15px;

    margin-top:50px;

}

.btn_primary{

    display:flex;
    justify-content:center;
    align-items:center;

    width:180px;
    height:56px;

    background:var(--main-color);

    color:#fff;

    border-radius:10px;

}

.btn_line{

    display:flex;
    justify-content:center;
    align-items:center;

    width:180px;
    height:56px;

    border:1px solid var(--main-color);

    border-radius:10px;

    color:var(--main-color);

}

.visual_vehicle{

    width:50%;

}

.visual_vehicle img{

    width:100%;

}

.visual_service{
    margin-top:50px;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.visual_service ul{
    display:flex;
    align-items:center;
}

.visual_service li{
    display:flex;
    align-items:center;
    gap:14px;
    position:relative;
}

.visual_service li:not(:last-child){
    margin-right:26px;
    padding-right:26px;
}

.visual_service li:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:42px;
    background:#133364;
}

.visual_service i{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.visual_service i img{
    width:30px;
    height:30px;
    display:block;
}

.visual_service .txt{
    display:flex;
    flex-direction:column;
}

.visual_service strong{
    font-size:17px;
    font-weight:600;
    color:#1d1d1d;
    line-height:1.2;
}

.visual_service span{
    margin-top:2px;
    font-size:17px;
    font-weight:400;
    color:#1d1d1d;
    line-height:1.2;
}


/* ===========================
    Booking
=========================== */

.booking{

    margin-top:-60px;

}

.booking_box{

    display:flex;

    background:#fff;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    overflow:hidden;

}

.booking_box .item{

    flex:1;

    padding:30px;

    border-right:1px solid #eee;

}

.booking_box span{

    display:block;

    color:#999;

    margin-bottom:8px;

    font-size:13px;

}

.booking_box strong{

    font-size:18px;

}

.booking_box button{

    width:220px;

    border:none;

    background:var(--main-color);

    color:#fff;

    font-size:18px;

    cursor:pointer;

}

/* ===========================
    Section
=========================== */

.service { background: #f7f4ef; padding: 60px 0;  scroll-margin-top:90px;}


section{

    padding-top: 130px;

}

.section_title{

    text-align:center;

    margin-bottom:30px;

}

.section_title span{

    color:var(--sub-color);

    font-weight:700;

}

.section_title h2{

    margin-top:15px;

    font-size:40px;

}

.section_title p{

    margin-top:5px;

    color:#1d1d1d;

    font-size: 1.8rem;

}

/* ===========================
    Card
=========================== */

.card_wrap{

    display: flex;

}

.card_wrap h3 { font-size: 2rem; margin-top: 10px; }

.card_wrap p { margin-top: 10px; }

.card{

    flex: 1; display: flex; flex-direction: column; align-items: center;

    padding:30px;

    border-right:1px solid #ddd;

    text-align:center;

}

.card img { width: 100%; max-width: 60px; }

/* ===========================
    Tour
=========================== */


.tour_list{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.tour_list article{

    overflow:hidden;

    border-radius:20px;

    background:#fff;

    box-shadow:0 10px 20px rgba(0,0,0,.06);

    transition:.3s;

}

.tour_list article:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.tour_list img{

    width:100%;

    display:block;

}

.tour_list h3{

    padding:20px 20px 10px;

}

.tour_list p{

    padding:0 20px 20px;

}

.tour_list .btn_more{

    display:inline-block;

    padding:20px;

    color:var(--main-color);

}

/* ===========================
    Statistics
=========================== */

.statistics{
    position: relative;
    padding: 40px 0;
    background:var(--main-color);
    margin-top: 130px;
}

.statistics ul{

    display:flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-left: 18rem;

}

.statistics li{

    display: flex;

    align-items: center;

    gap: 20px;

    text-align:center;

    color:#fff;

}

.statistics li.tiger img { position: absolute; left: 0; top: -80px; width: 23%; max-width: 247px;}

.statistics li img { width: 8.5rem; }

.statistics li .text { display: flex; flex-direction: column;}

.statistics strong{

    display:block;

    font-size:48px;

    text-align: left;

}

/* ===========================
        Fleet
=========================== */

.fleet{

    background:#fff;

}

.fleet_wrap{

    display:flex;
    align-items:center;
    gap:70px;

}

.fleet_img{

    flex:1;

}

.fleet_img img{

    width:100%;

    display:block;

    object-fit:cover;

    border-radius:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.fleet_info{

    width:470px;

}

.fleet_info li{

    display:flex;

    gap:40px;

    padding:10px 0;

    border-bottom:1px solid #e9edf2;

}

.fleet_info li:first-child{

    padding-top:0;

}

.fleet_info li:last-child{

    border:none;
    padding-bottom:0;

}

.fleet_info .num{

    position:relative;

    width:55px;

    font-size:32px;
    font-weight:700;

    color:#123b7a;

    flex-shrink:0;

}

.fleet_info .num::after{

    content:"";

    position:absolute;

    top:50%;
    right:-20px;

    transform:translateY(-50%);

    width:1px;
    height:60px;

    background:#d9dee5;

}

.fleet_info .text{

    flex:1;

}

.fleet_info h3{

    font-size:2rem;
    font-weight:700;

    color:#1d3157;

    margin-bottom:10px;

}

.fleet_info p{

    font-size:18px;
    line-height:1.5;

    color:#6f7785;

}

/* ===========================
    Footer
=========================== */

.footer {
    background: #f6f6f6;
    padding: 60px 0 25px;
    border-top: 1px solid #e5e5e5;
    position: relative;
}

.footer-inner {
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-logo {
    min-width: 230px;
}

.footer-logo img {
    width: 170px;
}

.footer-desc {
    margin-top: 10px;
    color: #666;
    font-size: 17px;
    line-height: 1.6;
}

.footer-sns {
    display: flex;
    gap: 18px;
    margin-top: 24px;
}

.footer-sns a {
    color: #222;
    font-size: 20px;
    transition: .3s;
}

.footer-sns a:hover {
    color: #002f7b;
}

.footer-sns a img {width: 40px;}

.footer-menu h4,
.footer-contact h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #111;
}

.footer-menu ul {
    list-style: none;
}

.footer-menu li {
    margin-bottom: 10px;
}

.footer-menu li,
.footer-contact p {
    color: #666;
    font-size: 15xspx;
    text-decoration: none;
    transition: .3s;
}

.footer-contact p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.footer-btn {
    display: flex;
    align-items: flex-start;
}

.footer-btn a {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    border: 1px solid #222;
    padding: 16px 34px;
    text-decoration: none;
    color: #222;
    font-weight: 600;
    transition: .3s;
}

.footer-btn a:hover {
    background: #002f7b;
    border-color: #002f7b;
    color: #fff;
}

.footer-bottom {
    margin-top: 50px;
    text-align: center;
    color: #777;
    font-size: 14px;
}

/* ===========================
    태블릿
=========================== */

@media (max-width:1310px) {
    .inner {padding: 0 40px;}
}

@media screen and (max-width:1310px) and (min-width:769px){
    .visual_service {padding: 0 40px;}
}

@media (max-width:1060px) {

    .ta_none {display: none!important;}

    .statistics {margin-top: 110px;}

    .statistics ul {padding-left: 0;}

    .statistics li {flex-direction: column; border-right: 1px solid #999; flex:1; gap: 3px;}

    .statistics li:last-child {border-right: 0;}

    .statistics li img {width: 6.5rem;}

    .statistics strong {text-align: center; font-size: 32px;}
}

@media (max-width:1024px) {
    
    .inner {padding: 0 40px;}

    .header{
        height:80px;
    }

    .menu-btn{
        position: relative;

        display:flex;
        justify-content:center;
        align-items: center;

        width:40px;
        height:40px;

        border:none;
        background:none;

        cursor:pointer;

        z-index:1002;
    }

    .menu-btn span{

    position:absolute;

    width:24px;
    height:2px;

    background:#222;

    transition:.3s;
        }

   .menu-btn span:nth-child(1){

    top:12px;

    }

   .menu-btn span:nth-child(2){

    top:19px;

    }

   .menu-btn span:nth-child(3){

    top:26px;

    }

   /* 햄버거 → X */

   .menu-btn.active span:nth-child(1){

    top:19px;
    transform:rotate(45deg);

   }

   .menu-btn.active span:nth-child(2){

    opacity:0;

   }

   .menu-btn.active span:nth-child(3){

    top:19px;
    transform:rotate(-45deg);

   }

    .header_right{
        display:none;
    }

    .gnb{

    position:fixed;

    top:0;
    right:0;

    width:80%;
    height:100vh;

    background:#fff;

    transform:translateX(100%);

    transition:.35s;

    z-index:1001;

   }

   .gnb.active{

    transform:translateX(0);

   }

   .gnb ul{

    margin-top:120px;

    display:flex;
    flex-direction:column;

    gap:0;

   }

   .gnb li{

    border-bottom:1px solid #eee;

   }

   .gnb a{

    display:block;

    padding:22px 35px;

    font-size:20px;

   }

   .dim{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:998;

   }

   .dim.active{

    opacity:1;

    visibility:visible;

   }

   .visual{

    padding-top: 155px;

    background: url("../img/visual_tablet.jpg") no-repeat center center;

    height: 750px;

   }

   .visual .visual_txt {width: 100%;}

   .visual .visual_txt p { color: #fff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}

    .visual_service { position: absolute; width: 95%; height: 145px; background: #fefefe; bottom: 0; border-radius: 10px 10px 0 0; left: 50%; transform: translateX(-50%);}

    .visual_service ul {height: 100%;}

    .visual_service li {flex-direction: column; flex: 1;}

    .visual_service li:not(:last-child) {padding-right: 0; margin-right: 0;}

    .visual_service i {width: 45px; height: 45px;}

    .visual_service i img {width: 45px; height: 45px;}

    .visual_service .txt {text-align: center;}

   .tour_list{

    grid-template-columns:repeat(2,1fr);

   }

   .fleet_info{

    width:350px;

    }

   .fleet_img img {height: 400px;}

}

/* ===========================
 모바일
=========================== */

@media (max-width:768px){

    .mo_none {display: none!important;}

    .mo-only {display: block!important;}

    .inner {padding: 0 20px}

    .logo img {width: 190px;}

    .visual {padding-top: 130px; background: url("../img/visual_mo.jpg") no-repeat center center; height: 580px;}

    .visual_txt {width: 100%;}

    .visual h2 {font-size: 60px;}

    .visual .visual_txt p{color: #555; margin-top: 10px; text-shadow: none;}

    section {padding-top: 110px;}

    .section_title h2 { font-size: 32px; line-height: 1.2;}

    .service{padding: 30px 0 15px 0;}

    .card_wrap{
        display:flex;
        flex-wrap:wrap;
    }

    .card{
        flex:0 0 50%;
        max-width:50%;
        border:none;
        padding:15px;
    }

    .card:nth-child(1),
    .card:nth-child(2){
        border-bottom:1px solid #ddd;
    }

    .card:nth-child(odd){
        border-right:1px solid #ddd;
    }

    .tour_list {grid-template-columns: repeat(1,1fr); gap: 40px;}

    .fleet_wrap {display: block;}

    .fleet_info {width: 100%; margin-top: 50px;}

    .fleet_img img {height: 300px;}

    .statistics {padding: 30px 0;}
}

@media (max-width:520px){
    .visual h2 {font-size: 38px;}
    .visual .visual_txt p {font-size: 20px;}
    .footer-inner {flex-direction: column;}
    .footer-contact {margin-top: 50px;}
}

@media (max-width:493px){
    .dis-none {display: none;}
}

/* ===========================
 모달
=========================== */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    z-index:9999;

    justify-content:center;
    align-items:center;
}

.modal.active{
    display:flex;
}

.modal-content{
    position:relative;
    max-width:600px;
    width:90%;
}

.modal-content img{
    width:100%;
    display:block;
    border-radius:10px;
}

.close-btn{
    position:absolute;
    top:-45px;
    right:0;
    width:40px;
    height:40px;
    border:none;
    background:none;
    color:#fff;
    font-size:35px;
    cursor:pointer;
}