/* ===================================
    Crafto - Hosting
====================================== */
/* font */


@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap');
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'YESMyoungjo-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/YESMyoungjo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'JalnanGothic';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');


.hanhwa {   font-family: 'hanhwa' !important;}
.Jalnan {font-family: 'yg-jalnan' !important; }
.YESMyoungjo {font-family: 'YESMyoungjo-Regular' !important;}
.JalnanGothic {font-family: 'JalnanGothic' !important; }
.notosanskr {font-family: 'Noto Sans KR' !important; }

@font-face {
    font-family: 'hanhwa';
    src: url('../../fonts/02HanwhaR.woff') format('woff');
}
/* variable */
:root {
    --alt-font:"IBM Plex Sans KR", 'Inter', sans-serif;
    --primary-font:"IBM Plex Sans KR", 'Inter', sans-serif;
    --base-color: #152bca;
    --dark-gray: #181b31;
    --green: #0fc978;
    --medium-gray: #6e7982;
}
.card {border:none}
/* reset */
::-webkit-input-placeholder {
    color: #6e7982 !important;
    text-overflow: ellipsis;
}
::-moz-placeholder {
    color: #6e7982 !important;
    text-overflow: ellipsis;
    opacity: 1;
}
:-ms-input-placeholder {
    color: #6e7982 !important;
    text-overflow: ellipsis;
    opacity: 1;
}

body{
    line-height: 30px;
    font-family: "IBM Plex Sans KR";
}


.active_colorset {color:hsla(232, 53%, 45%, 1) !important}
.header_form {
    color:#0D6EFD !important;
    padding:0 10px;
    font-weight:600 !important;
    font-size:2.1rem;

    line-height:1.5;
    margin-right:80px;
}
.header_tel {
    color:#00BD8D!important;
    font-weight:700;
    line-height:1.5;
    font-size:2.1rem;
    padding:0 5px;
    margin-right:0px;
    margin-top:0px;
}


@media(max-width:768px){

    .header_form {
        color:#000 !important;
        padding:0 3px;
        font-weight:500;
        font-size:1.25rem;
        margin-right:0px;
        font-family: "IBM Plex Sans ;
    }
    .header_tel {
        color:#00BD8D !important;
        font-weight:700;
        font-size:1.4rem;
        padding:0 3px;
        margin-right:8px;
        margin-top:15px;
        font-family: "IBM Plex Sans ;
    }
}

.main_title {font-weight:400; font-size:2.4rem; margin-bottom:50px; line-height:3rem;}
.main_title strong{font-weight:700 !important}
.main_title .bar{width:80px; height:3px; position:relative; display:inline-block; top:-10px; background:#fff;}
.main_title .bar2{width:45px; height:3px; position:relative; display:inline-block; top:-10px; background:#fff;}
.main_deco_text {color:#93FBFF;font-weight:700!important; font-size:3.5rem; margin-bottom:0px;}
.main_title_h2 {color:#fff; font-weight:700!important;  font-size:3.5rem;}
.main_title_h2  strong {color:#FFFAA9; font-size:4rem !important}
.main_vip {color: rgba(248, 194, 79, 0.30); text-align:center;  font-size:4rem; letter-spacing: -5px; margin-bottom:100px;}
.contents_people {position:relative;}

.contents_people .people {position:relative; z-index:12; width:150% !important;  max-width:120%; right:0; bottom:-90px!important; display:block}
.contents_people .people_bg {position:absolute; z-index:11; right:0; top:5%; max-width:70%; display:block}


.h2_title {
    leading-trim: both;
    text-edge: cap;
    font-family: "IBM Plex Sans KR";
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -2px;
}
.section-title_3{
    color: #0A0A0A;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "IBM Plex Sans KR";
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -2px;
}
.section-subtitle{
    color: #0A0A0A;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "IBM Plex Sans KR";
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -2.6px;
}
.info-card {background:#092056!important; color:#fff; padding: 45px 88px;
    justify-content: center;
    align-items: center;
    margin-bottom:20px;
    line-height:1.2;
    font-size:2rem;
}

.t-dark {color:#0A0A0A !important}
.t-green {}
.t-yellow {color:#E5AB2D}

.price-section {background:#eef3ff !important; padding-bottom: 0}
.price-section .price {color:#E5AB2D; }
.price-section .price-note {color:#0A0A0A;font-weight: 400;
    line-height: normal;
    letter-spacing: -.45px; }
.process-section{background:#eef3ff !important; padding-bottom:0px; padding-top:0}
.process-section .arrow {position:absolute; top:calc(50% - 30px); right:-40px;}
.process-section .process-item img {max-width:120px;  height:120px; margin:0 auto; text-align:center}
.process-section .arrow img {width:36px; height: auto;}
.process-section .process-title {color:#000000; font-size:1.4rem; letter-spacing: -1px;  line-height:1.2; text-align: center}
.process-section .process-subtitle {color:#000000}
.process-section .process-icon {display:block; height:100%; min-height:55px;}
.process-section .process-item {text-align:center; position:relative;}

.process-section .last img  {margin-top:0px !important}
.price-section .installment-badge {
border-radius: 40px;
background: var(--yellow500, #E5AB2D);
    color:#fff;
    font-size: 20px;
    font-style: normal;
    display: inline-block;
    font-weight: 600;
    padding:10px 20px;
    line-height: normal;
    letter-spacing: -.5px;
}

@media (max-width:768px) {

    .price-section {background:#eef3ff !important; padding-bottom: 0}
    .price-section .price {color:#E5AB2D; }
    .price-section .price-note {color:#0A0A0A;font-weight: 400;
        line-height: normal;
        letter-spacing: -.45px; }
    .process-section{background:#eef3ff !important; padding-bottom:0px; padding-top:0}
    .process-section .arrow {position:absolute; top:12px; right:-18px;}
    .process-section .arrow img {width:18px;}
    .process-section .process-title {color:#000000; font-size:14px; letter-spacing: -1px;  line-height:20px; text-align: center}
    .process-section .process-subtitle {color:#000000}
    .process-section .process-icon {display:block; height:100%; min-height:55px;}
    .process-section .process-item {text-align:center; position:relative;}
    .process-section .process-item img {max-width:40px;  max-height:50px;  margin:0 auto; text-align:center}
    .price-section .installment-badge {
        border-radius: 40px;
        background: var(--yellow500, #E5AB2D);
        color:#fff;
        font-size: 20px;
        font-style: normal;
        display: inline-block;
        font-weight: 600;
        padding:10px 20px;
        line-height: normal;
        letter-spacing: -.5px;
    }

}
.details-section {background:#eef3ff; padding-bottom:30px}
.details-list ul {padding:0 10px }

.details-list li {color:#000; list-style: disc;}
.details-list .category-title {color:#000}
.formsection  {background:#092056}
.formsection .form-control { margin-top:8px; background:none !important; border:none ; color:#fff; border-radius: 0; border-bottom:1px solid #fff; outline: none}
.formsection .form-label {margin-top:10px; margin-bottom:0; font-weight:500}
.formsection .form-check-label {font-size:1.2rem; border:none; backgroud:none; color:#fff; margin-left:0; padding:0 !important}
.formsection .form-check-label button {padding:0; margin-top:1px;}
.formsection .form-check-input {width:14px; height:14px; border-radius:0; padding:0; margin-top:10px;}
.formsection .submits {padding:15px; height:80px; background:#fff; font-weight:500; font-size:1.8rem; border-radius: 8px; margin-top:30px; color:#092056 !important;font-family: "IBM Plex Sans KR";}
.formsection .arrow_form {max-width:36px;}

@media(max-width:768px) {

    .formsection  {background:#092056}
    .formsection .form-control { margin-top:8px; background:none !important; border:none ; color:#fff; border-radius: 0; border-bottom:1px solid #fff; outline: none}
    .formsection .form-label {margin-top:10px; margin-bottom:0; font-weight:500}
    .formsection .form-check-label {font-size:1.2rem; border:none; backgroud:none; color:#fff; margin-left:0; padding:0 !important}
    .formsection .form-check-label button {padding:0; margin-top:1px;}
    .formsection .form-check-input {width:14px; height:14px; border-radius:0; padding:0; margin-top:10px;}
    .formsection .submits {padding:8px; background:#fff; color:#092056;  height:auto; font-weight:500; font-size:1.25rem; border-radius: 8px; margin-top:10px;}
    .formsection .arrow_form {max-width:18px;margin-left:5px;}
}


@media (max-width:768px) {

    .h2_title {
        leading-trim: both;
        text-edge: cap;
        font-family: "IBM Plex Sans KR";
        font-size: 2.2rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -2px;
        margin-bottom:10px;
    }
    .section-title_3{
        color: #0A0A0A;
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        font-family: "IBM Plex Sans KR";
        font-size: 2rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -2px;
    }
    .section-subtitle{
        color: #0A0A0A;
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        font-family: "IBM Plex Sans KR";
        font-size: 1.8rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -1.6px;
    }
    .info-card {background:#092056!important; color:#fff; padding: 10px 15px;
        justify-content: center;
        align-items: center;
        margin-bottom:20px;
        font-size:1.4rem;
        line-height:1.2;
        letter-spacing: -1px;
    }
    .details-list li {color:#000; font-size:16px;}
    .price-section .price {color:#E5AB2D; font-weight:400}
    .price-section .price-note {
        color:#0A0A0A;
        font-weight: 400;
        font-size:1.2rem;
        line-height: normal;
        letter-spacing: -1.0px; }

    .price-section .installment-badge {
        border-radius: 18px !important;
        background: var(--yellow500, #E5AB2D);
        color:#fff;
        font-size: 20px;
        font-style: normal;
        display: inline-block;
        font-weight: 600;
        padding:5px 10px;
        line-height: normal;
        letter-spacing: -.5px;
    }
    .details-section {background:#eef3ff}
    .details-list ul {padding:0 10px }

    .details-list li {color:#000; list-style: disc !important;
        font-family: "IBM Plex Sans KR";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: -1.1px;
        line-height:20px;

    }
    .details-list .category-title {color:#000; margin-bottom:0}


}






.why-section {background: #F7F7F7;}
.why-section .card {
    background:#fff;
    padding:30px 17px;
    border-radius: 24px;
    min-height:190px;

}
.why-section .card .d-flex {
    align-items: center !important;
    height: 100%;
}
.why-section .card h4 {color:#092056; font-size:1.5rem;  line-height:1.4;  letter-spacing: -1.5px}
.why-section .card p {font-size:1.2rem; word-break: keep-all;  colro:#545454; font-weight:500; line-height:1.4; letter-spacing: -0.5px}
.why-section .why-img {width:80px; height:auto;}
.why-section .why-img img {max-width:50px}

@media (max-width:768px) {


    .why-section {background: #F7F7F7;}
    .why-section .card {
        background:#fff;
        padding:30px 17px;
        border-radius: 24px;
        min-height:auto;

    }
    .why-section .card .d-flex {
        align-items: center !important;
        height: 100%;
    }
    .why-section .card h4 {color:#092056; font-size:1.2rem;  line-height:1.4;  letter-spacing: -1px}
    .why-section .card p {font-size:1.2rem; word-break: keep-all;  colro:#545454; font-weight:500; line-height:1.4; letter-spacing: -0.5px}
    .why-section .why-img {width:80px; height:auto;}
    .why-section .why-img img {max-width:50px}

}
.safe-payment-section {background:#fff !important; margin-top:20px;}
.safe-payment-section h3 {border-radius: 60px;
    background: #092056;
    color: #93FBFF !important;
    leading-trim: both;
    text-edge: cap;
    font-family: "IBM Plex Sans KR";
    font-size: 24px;
    font-style: normal;
    padding:14px 32px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.2px;
}

.safe-payment-section .list-unstyled {background:#fff; border-radius: 24px; margin-top:-60px;  padding:30px 20px}
.safe-payment-section .list-unstyled li {font-weight:600;color: #0A0A0A;  margin-left:30px;}
.safe-payment-section .contents_box_main {background:#F7F7F7; padding:50px; border-radius: 24px;}
.safe-payment-section .contents_box {background:#fff; padding:15px; border-radius: 24px;}
.safe-payment-section .contents_box .box_head {margin-top:20px;}
.safe-payment-section .section_description {color: var(--navy900, #092056);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "IBM Plex Sans KR";
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.2px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;}


.safe-payment-section ul {background:#fff; border-radius: 24px; margin-top:-45px;  padding:30px 20px 10px}
.safe-payment-section li {font-weight:600;color: #0A0A0A; list-style:disc !important;  margin-left:0px; font-size:1.3rem !important;}
.safe-payment-section .ship_img {max-width:15%; margin-top:70px;}


.cruise-features-section {background:#EEF3FF}
.cruise-features-section h2 {color:#0A0A0A; position:relative;}
.cruise-features-section h2 span {color:#00BD8D;}
.cruise-features-section .quote_img {max-width:35px; !important; position:absolute;}
.cruise-features-section .before_q {left:-60px; top:-15px}
.cruise-features-section .after_q {right:-60px; bottom:-15px}
.cruise-features-section .cruise-box h3 {color: var(--navy900, #092056);
    text-align: center;
    leading-trim: both;
    position: relative;
    text-edge: cap;
    font-family: "IBM Plex Sans KR";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    z-index:1;
    padding:0;
    margin:15px 0 5px;
    line-height: normal;
    letter-spacing: -1.2px;}
.cruise-features-section .cruise-box h3 span {
    position: relative;
    margin-top:10px;
    padding:0;

    display: inline-block;
}
.special_label {position:absolute; max-width:50%; left:-25px; top:-50px; z-index:1}
.cruise-features-section .cruise-box span:before{content:""; left:0; width:100%; display:inline; z-index:-1;  background:#FBFFA2; position:absolute; top:25px; height:10px;}
.cruise-features-section .cruise-box p {    color:#545454;  line-height: normal;   letter-spacing: -1.2px;  font-size: 16px;}
.cruise-expert-section {background:#fff !important}

.pc_gray {background:#F7F7F7 !important; padding:50px; border-radius: 20px; }

.cruise-expert-section .card {background:#fff !important;  /* Flexbox로 수직 중앙 정렬 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 수직 중앙 정렬 */
    align-items: center; /* 수평 중앙 정렬 */
    margin:0 5px;
    font-size:1.2rem;
    text-align: center;  vertical-align:middle; height:100%;  padding:8px; border-radius: 4px; border:none}

.cruise-expert-section .card-body {    padding:30px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 카드 바디 내부도 중앙 정렬 */
    align-items: center;
    height: 100%; }
.cruise-expert-section .card h5 { font-size:1.4rem !important; color:#092056!important; line-height:1.2; font-family: "IBM Plex Sans KR";  letter-spacing:-1.8px; font-weight:500;}
.cruise-expert-section .card .text-primary {color:#3647AF !important}


    .cruise-expert-section .flag_img{width:50px;}
.cruise-expert-section2 {background:#092056!important; margin:15px;  border-radius: 16px;}
.cruise-expert-section2 h2 {font-size:1.4rem; }
.cruise-expert-section2 p {
    leading-trim: both;
    text-edge: cap;
    font-family: "IBM Plex Sans KR";
    font-size: 1.8rem;
    font-style: 1.5;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0px;
}
.cruise-expert-section2 .text-blues {color:#93FBFF}



@media(max-width:768px){
    .cruise-features-section {background:#EEF3FF}
    .cruise-features-section h2 {color:#0A0A0A; position:relative;}
    .cruise-features-section h2 span {color:#00BD8D;font-size:32px;}
    .cruise-features-section .quote_img {max-width:35px; !important; position:absolute;}
    .cruise-features-section .before_q {left:-60px; top:-15px}
    .cruise-features-section .after_q {right:-60px; bottom:-15px}
    .cruise-features-section .cruise-box h3 {color: var(--navy900, #092056);
        text-align: center;
        leading-trim: both;
        position: relative;
        text-edge: cap;
        font-family: "IBM Plex Sans KR";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        z-index:1;
        padding:0;
        margin:15px 0 5px;
        line-height: normal;
        letter-spacing: -1.2px;}
    .cruise-features-section .cruise-box h3 span {
        position: relative;
        margin-top:10px;
        padding:0;
        display: inline-block;
    }
    .special_label {position:absolute; max-width:50%; left:-10px; top:-25px; z-index:1}
    .cruise-features-section .cruise-box span:before{content:""; left:0; width:100%; display:inline; z-index:-1;  background:#FBFFA2; position:absolute; top:25px; height:10px;}
    .cruise-features-section .cruise-box p {    color:#545454;  line-height: normal;   letter-spacing: -1.2px;  font-size: 16px;}
    .cruise-expert-section {background:#F7F7F7 !important}
    .cruise-expert-section .card {background:#fff !important;  /* Flexbox로 수직 중앙 정렬 */
        display: flex;
        flex-direction: column;

        justify-content: center; /* 수직 중앙 정렬 */
        align-items: center; /* 수평 중앙 정렬 */
        margin:0 5px;
        font-size:1.2rem;
        text-align: center;  vertical-align:middle; height:100%;  padding:8px; border-radius: 4px; border:none}

    .cruise-expert-section .card-body {    padding:10px 0px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* 카드 바디 내부도 중앙 정렬 */
        align-items: center;
        height: 100%; }
    .cruise-expert-section .card h5 { font-size:1.2rem !important; line-height:1.2; font-family: "IBM Plex Sans KR";  letter-spacing:-1.8px; font-weight:500;}
    .cruise-expert-section .flag_img{width:50px;}
    .cruise-expert-section2 {background:#092056!important; margin:0; border-radius: 0}
    .cruise-expert-section2 h2 {font-size:1.4rem; }
    .cruise-expert-section2 p {

        leading-trim: both;
        text-edge: cap;
        font-family: "IBM Plex Sans KR";
        font-size: 1.4rem;
        font-style: 1.5;
        font-weight: 600;
        line-height: normal;
        letter-spacing: -0px;
    }
    .cruise-expert-section2 .text-blues {color:#93FBFF}

    .pc_gray {
        background: #F7F7F7 !important;
        padding: 0px;
        border-radius: 20px;
    }
}
.stepbox {padding:10px;}
.stepbox  h2 {color: var(--navy900, #092056);
    font-size:2.5rem;
    font-family: "IBM Plex Sans KR";
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top:15px;
}

.stepbox  h4 {color: var(--navy900, #092056);
    color: var(--black900, #0A0A0A);
    font-size:1.5rem;
    font-family: "IBM Plex Sans KR";
    font-style: normal;
    font-weight: 500;
    line-height: normal;}



.stepbox  h5 {color: var(--navy900, #092056);
    color: var(--black900, #0A0A0A);
    font-family: "IBM Plex Sans KR";
    font-style: normal;
    font-size:20px;
    font-weight: 500;
    line-height: normal;}
.cruise-cabin-guide {padding:200px 0 }
.cruise-cabin-guide .card {background:#fff!important; border-radius: 20px 16px 16px 20px !important; overflow: hidden!important;}
.cruise-cabin-guide .card img{width:100%; display:block !important; max-height:220px;}
.cruise-cabin-guide .card-body{height:315px; background: #F7F7F7; position:relative; border-radius: 0 8px 8px 0!important;}
.cruise-cabin-guide h5 {font-weight:600 !important; color:#092056; font-size:24px;}
.cruise-cabin-guide .con_badge {position:absolute; background:#3647AF !important;  right:0; font-size:16px; font-weight:500; letter-spacing: -1px;  border-radius: 20px 0 0 20px !important;}
.cruise-cabin-guide .list-unstyled {color:#092056; margin-top:30px;  font-size:16px; margin-left: 30px;  line-height:26px; letter-spacing: -1.4px;}
.cruise-cabin-guide .list-unstyled li{list-style: disc !important; word-break: keep-all}
.cruise-cabin-guide .rounded-start {border-radius: 20px 0 0 20px !important;}
.cruise-cabin-guide .check_label {position:absolute; right:-25px; top:-15px; z-index:1; max-width:50px;}



@media(max-width:768px) {
    .cruise-cabin-guide {padding:80px 0 }
    .cruise-cabin-guide .card {background:#fff!important; border-radius: 20px 8px 8px 20px !important; overflow: hidden!important;}
    .cruise-cabin-guide .card-body{height:100%; max-height:220px;  background: #F7F7F7; position:relative; border-radius: 0 8px 8px 0!important;}
    .cruise-cabin-guide h5 {font-weight:600 !important; color:#092056; font-size:16px;}
    .cruise-cabin-guide .con_badge {position:absolute; background:#3647AF !important;  right:0; font-size:11px; font-weight:500; letter-spacing: -0.8px;  border-radius: 20px 0 0 20px !important;}
    .cruise-cabin-guide .list-unstyled {color:#092056; margin-top:15px;  font-size:0.8rem; margin-left: 15px;  line-height:18px; letter-spacing: -1.1px;}
    .cruise-cabin-guide .list-unstyled li{list-style: disc !important}
    .cruise-cabin-guide .rounded-start {border-radius: 20px 0 0 20px !important; }
    .cruise-cabin-guide .room-info-container {
        align-items: stretch; /* 자식 요소들의 높이를 같게 만듦 */
        margin-bottom: 0px;
    }

}


.cruise-courses-section {}
.cruise-courses-section .card {border-radius: 20px !important; margin:5px 5px 5px; overflow: hidden}
.cruise-courses-section .card .card-img-top {height: 250px; object-fit: cover;}
.cruise-courses-section .card-body {padding:10px; background:#F7F7F7 !important; height:100% }

.cruise-courses-section .card-title {color:  #092056;
    font-family: "IBM Plex Sans KR";
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: normal;}


.cruise-courses-section .card-text {color:  #092056;
    font-family: "IBM Plex Sans KR";
    font-size: 1.2rem;
    font-style: normal;
    line-height:1.3;
    font-weight: 400;
    margin:8px 0;

    background:#F7F7F7;
    letter-spacing: -0.7px;
    min-height:60px;

  }
.contry {width:100%;position:relative; margin-top:20px;}
.contry span {font-size:1rem; line-height: 1.5!important; display:inline-block; vertical-align: top; color:#0A0A0A!important; padding-left:5px;}
.western-mediterranean-detail .stepbox h6 .vevtors {width:55%; display: inline-block;  z-index:-1; position:absolute;     top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}

@media(max-width:768px){



    .cruise-courses-section {}
    .cruise-courses-section .card {border-radius: 20px !important; margin:5px 5px 5px; overflow: hidden}
    .cruise-courses-section .card .card-img-top {height: 150px; object-fit: cover;}
    .cruise-courses-section .card-body {padding:10px; background:#F7F7F7 !important; height:100% }

    .cruise-courses-section .card-title {color:  #092056;
        font-family: "IBM Plex Sans KR";
        font-size: 1.23rem;
        font-style: normal;
        font-weight: 600;
        letter-spacing: -0.5px;
        line-height: normal;}


    .cruise-courses-section .card-text {color:  #092056;
        font-family: "IBM Plex Sans KR";
        font-size: 1rem;
        font-style: normal;
        line-height:1.3;
        font-weight: 400;
        margin:8px 0;

        background:#F7F7F7;
        letter-spacing: -0.7px;
        min-height:60px;

    }
    .contry {width:100%;position:relative; margin-top:20px;}
    .contry span {font-size:0.8rem; line-height: 14px!important; display:block !important; vertical-align: top; padding-left: 0!important}



}

@font-face {
    font-family: 'LOTTERIADDAG';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/LOTTERIADDAG.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.lotteria {font-family: 'LOTTERIADDAG' !important}
.lotteria {font-size:2rem; font-weight: 400 !important;}
.lotteria span{font-size:2.4rem;}
.lotteria .star_img {max-width:50px; position:absolute; right:-55px; bottom:3px;}
.western-mediterranean-detail h5 {margin-bottom:0;}
.western-mediterranean-detail .img-fluid {height:712px;object-fit: cover;}
.western-mediterranean-detail .position-relative img {width:60px; height:60px; border-radius: 100%; object-fit: cover;  margin-bottom:10px;}
.western-mediterranean-detail .stepbox {padding-left:20px; height:548px;}
.western-mediterranean-detail .stepbox h6 {color: #0A0A0A;
    text-align: center;
    font-family: "IBM Plex Sans KR";
    font-size: 1.12rem;
    font-style: normal;
    position:relative;
    font-weight: 500 !important;

    z-index:1;
    margin-top:15px;
    margin-bottom:0;
    line-height: normal;
    word-break: keep-all;
    line-height:18px;
}
.western-mediterranean-detail .stepbox h6 .vevtors {width:55%; display: inline-block;  z-index:-1; position:absolute;     top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}


.north_eu {display:flex!important;}

.western-mediterranean-detail .bottom-description {background: #EEF3FF !important;
    display: inline-block;
    width:100%;
    padding: 34px 15px;
    color: #545454;
    text-align: center;
    font-family: "IBM Plex Sans KR";
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: normal;
    border-radius: 0!important;
}

.asia .rounded-circle {max-width:60px !important; max-height:60px; margin:10px; }

.mediterranean {background: linear-gradient(180deg, #092056 3.83%, #1B4FAA 25.91%, #0057A5 44.29%, #00BD8D 100%);
padding:10px 0
}


.gray_arrow {position:absolute; top:calc(50% - 20px); right:-8px;  }
.gray_arrow img {max-width:30px;max-height:40px; }


.gray_arrow_down img:first-child {
    max-width: 40px;
    max-height: 40px;
    margin-right:-54px!important;
    margin-top:-35px;
    margin-left:50px !important;
    transform: rotate(270deg); /* 왼쪽 → 아래 */
}
.gray_arrow_down img:last-child {
    max-width: 40px;
    max-height: 40px;
    margin-right:-15px!important;
    margin-top:-0px;
    margin-left:11px !important;
    transform: rotate(90deg); /* 왼쪽 → 아래 */
}
.gray_arrow_down2 img {
    max-width: 35px;
    margin-top:10px;
    max-height: 40px;
    margin-left:-15px;
    transform: rotate(120deg); /* 왼쪽 → 아래 */
}

.gray_arrow_down2 img:first-child {
    max-width: 35px;
    max-height: 35px;
    margin-right:-57px!important;
    margin-top:-10px;
    margin-left:0px !important;
    transform: rotate(-60deg); /* 왼쪽 → 아래 */
}
.gray_arrow_down2 img:last-child {
    max-width: 35px;
    max-height: 35px;
    margin-right:20px!important;
    margin-top:20px;
    margin-left:10px !important;
    transform: rotate(120deg); /* 왼쪽 → 아래 */
}
.asia .gray_arrow {position:absolute; top:calc(50% - 12px); right:-8px;  }
.asia .gray_arrow img {max-width:16px;max-height:25px; }


@media(max-width:768px){


    .western-mediterranean-detail .img-fluid {height:230px;object-fit: cover;}
    .western-mediterranean-detail .position-relative img {width:60px; height:60px; border-radius: 100%; object-fit: cover;  margin-bottom:10px;}
    .western-mediterranean-detail .stepbox {height:auto !important;}
    .western-mediterranean-detail .stepbox h6 {color: #0A0A0A;
        text-align: center;
        font-family: "IBM Plex Sans KR";
        font-size: 1.12rem;
        font-style: normal;
        font-weight: 500 !important;

        margin-top:15px;
        margin-bottom:0;
        line-height: normal;
        word-break: keep-all;
        line-height:18px;
    }
    .western-mediterranean-detail .bottom-description {background: #EEF3FF !important;
        display: inline-block;
        width:100%;
        padding: 30px 15px;
        color: #545454;
        text-align: center;
        font-family: "IBM Plex Sans KR";
        font-size: 1.3rem;
        font-style: normal;
        font-weight: 600;
        letter-spacing: -1px;
        line-height: normal;
    }

    .asia .rounded-circle {max-width:46px !important; max-height:46px; margin:10px; }

    .mediterranean {background: linear-gradient(180deg, #092056 3.83%, #1B4FAA 25.91%, #0057A5 44.29%, #00BD8D 100%);
        padding:10px 0
    }


    .gray_arrow {position:absolute; top:calc(50% - 20px); right:-8px;  }
    .gray_arrow img {max-width:16px;max-height:25px; }
    .gray_arrow_down img {
        max-width: 25px;
        max-height: 30px;
        margin-top:-20px;
        transform: rotate(90deg); /* 왼쪽 → 아래 */
    }



    .gray_arrow_down img:first-child {
        max-width: 30px;
        max-height: 30px;
        margin-right:-44px!important;
        margin-top:-45px;
        margin-left:50px !important;
        transform: rotate(270deg); /* 왼쪽 → 아래 */
    }
    .gray_arrow_down img:last-child {
        max-width: 30px;
        max-height: 30px;
        margin-right:-13px!important;
        margin-top:-10px;
        margin-left:10px !important;
        transform: rotate(90deg); /* 왼쪽 → 아래 */
    }
    .gray_arrow_down2 img {
        max-width: 25px;
        margin-top:10px;
        max-height: 30px;
        margin-left:-15px;
        transform: rotate(120deg); /* 왼쪽 → 아래 */
    }
    .gray_arrow_down2 img:first-child {
        max-width: 30px;
        max-height: 30px;
        margin-right:-52px!important;
        margin-top:-10px;
        margin-left:0px !important;
        transform: rotate(-60deg); /* 왼쪽 → 아래 */
    }
    .gray_arrow_down2 img:last-child {
        max-width: 30px;
        max-height: 30px;
        margin-right:5px!important;
        margin-top:20px;
        margin-left:10px !important;
        transform: rotate(120deg); /* 왼쪽 → 아래 */
    }
    .western-mediterranean-detail .stepbox h6 .vevtors {width:80%; display: inline-block;  z-index:-1; position:absolute;     top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);}

    .asia .gray_arrow {position:absolute; top:calc(50% - 12px); right:-8px;  }
    .asia .gray_arrow img {max-width:16px;max-height:25px; }



}


.cruise-activities-guide  .relative {position:relative;}
.position-relative {position:relative;}
.cruise-activities-guide h5 {position: relative; z-index:50 !important}

.cruise-activities-guide .desc {background:#EEF3FF;
    color: #0A0A0A !important;
    text-align: center;
    font-family: "IBM Plex Sans KR";
    font-size: 1.4rem;
    line-height:1.2;
    font-style: normal;
    position: relative;
    z-index:-4!important;
    padding:10px 0px !important;
    border-radius: 36px;
    font-weight: 500;
    line-height: normal;
}
.desc_img {position:absolute; right:-5px; top:45px; z-index:6}
.desc_img img {max-width:65px; }
.cruise-activities-guide .desc span {
    color: #092056;
    position:relative;
    font-weight: 700;

}


.cruise-activities-guide .card{margin:3px;}
.cruise-activities-guide .card h4 {color:#fff; font-weight:600; display:block !important; text-align:center; font-size:1.4rem;  padding:5px 0 ; background: rgba(9, 32, 86, 0.90) !important;}
.cruise-activities-guide .guide_info {line-height:1.4; font-size:1.2rem; letter-spacing: -0.5px}
.cruise-activities-guide  .card-img-top {height: 500px; object-fit: cover;}


.after_yellow {position:relative !important; }
.after_yellow:after{
    content: "";
    left: 0;
    width: 100%;
    display: block;
    z-index:-1;

    background: #FBFFA2;
    position: absolute;
    top: 16px;
    height: 10px;}




@media(max-width:768px){

    .cruise-activities-guide  .relative {position:relative;}
    .position-relative {position:relative;}
    .cruise-activities-guide .desc {background:#EEF3FF;
        color: #0A0A0A !important;
        text-align: center;
        font-family: "IBM Plex Sans KR";
        font-size: 18px;
        font-style: normal;
        z-index:-1!important;
        padding:10px 0px !important;
        border-radius: 36px;
        font-weight: 500;
        line-height: normal;
    }
    .desc_img {position:absolute; right:-5px; top:30px}
    .desc_img img {max-width:55px; }
    .cruise-activities-guide .desc span {;
        color: #092056;
        position:relative;
        font-weight: 700;
    }
    .cruise-activities-guide .card{margin:3px;}
    .cruise-activities-guide .card h4 {color:#fff; font-weight:600; display:block !important; text-align:center; font-size:1.4rem;  padding:5px 0 ; background: rgba(9, 32, 86, 0.90) !important;}
    .cruise-activities-guide .guide_info {line-height:1.4; font-size:1.2rem; letter-spacing: -0.5px}
    .cruise-activities-guide .card-img-top{height: 250px !important; object-fit: cover;}

 .after_yellow {position:relative !important; }
 .after_yellow:after{
        content: "";
        left: 0;
        width: 100%;
        display: block;
        z-index:-1;

        background: #FBFFA2;
        position: absolute;
        top: 16px;
        height: 10px;}

}



.hdtour-vision-section-one {position:absolute; background:rgba(0,0,0,0.7);height:600px; width:100%;}
.hdtour-vision-section-one-img {height:600px;}
.hdtour-vision-section-two {background:#092056; height:700px !important; background-position: center; background-size:cover; padding-top:100px; padding-bottom:0px;}

.hdtour-vision-section-two_pc {background:url('/theme/barit/images/IT_trd032tg08394 1.png'); height:600px !important; background-position: center; background-size:cover; }



.hdtour-vision-section-two h2 {bottom:0;  font-size:2rem; line-height:1.3; font-weight:400; color:#F7F7F7; }
.hdtour-vision-section-two_pc h2 {bottom:0;  font-size:2rem; line-height:1.3; font-weight:400; color:#F7F7F7}
.hdtour-vision-section {padding-bottom: 0 }
.hdtour-vision-section .vision_title {font-family: 'yg-jalnan' !important; font-weight:700; color:#C5A262!important; }
.hdtour-vision-section .vision_title_sub {color:#c5a262!important; font-size:1.25rem; letter-spacing: -0.5px;}
.hdtour-vision-section p {font-size:1.2rem; line-height:1.5}
.bg-theme-navy  {background:#092056; padding:50px 0 100px }
.bg-theme-navy h3 {font-size:2rem; font-weight:400; line-height:1.5; letter-spacing: 0}
.important-notice-section {background:#EAEAEA;}
.important-notice-section .atimg {max-width:15% !important;}
.important-notice-section li {
    color:#000;
    font-style: normal;
    font-weight: 400;
    font-size:1rem;
    line-height: normal;
    letter-spacing: -1.45px;
    list-style: none;
    position: relative;
    padding-left: 20px;
}
.important-notice-section li::before {
    content: "- ";
    position: absolute;
    left: 10px;
}

.hd-footer {background:#F7F7F7 !important; color:#545454 !important}
.hd-footer address { line-height:18px!important; color:#545454 !important; font-weight:400; font-size:1rem; letter-spacing: -0.8px}
.copyright{font-size:1rem;}


@media(max-width:768px){


    .hdtour-vision-section-one {position:absolute; background:rgba(0,0,0,0.7);height:300px; width:100%;}
    .hdtour-vision-section-one-img {height:300px;}
    .hdtour-vision-section-two {background:url('/theme/barit/images/IT_trd032tg08394 1.png'); height:350px !important; background-position: center; background-size:cover;}
    .hdtour-vision-section-two_pc {background:none !important;height:250px !important; }
    .hdtour-vision-section-two_pc h2 {bottom:0;  font-size:2rem; line-height:1.3; font-weight:400; color:#F7F7F7}



    .hdtour-vision-section {padding-bottom: 0 }
    .hdtour-vision-section .vision_title {font-family: 'yg-jalnan' !important; font-weight:700; color:#C5A262!important; }
    .hdtour-vision-section .vision_title_sub {color:#c5a262!important; font-size:1.25rem; letter-spacing: -0.5px;}
    .hdtour-vision-section p {font-size:1.2rem; line-height:1.5}
    .bg-theme-navy  {background:#092056; padding:30px 0}
    .bg-theme-navy h3 {font-size:1.4rem; font-weight:400; line-height:1.5; letter-spacing: 0}
    .important-notice-section {background:#EAEAEA;}
    .important-notice-section .atimg {max-width:15% !important;}
    .important-notice-section li {
        color:#000;
        font-style: normal;
        font-weight: 400;
        font-size:1rem;
        line-height: normal;
        letter-spacing: -1.0px;
        list-style: none;
        position: relative;
        padding-left: 20px;
    }
    .important-notice-section li::before {
        content: "- ";
        position: absolute;
        left: 10px;
    }

    .hd-footer {background:#F7F7F7 !important; color:#545454 !important}
    .hd-footer address { line-height:18px!important; color:#545454 !important; font-weight:400; font-size:12px; letter-spacing: -0.8px}



}

@media (max-width:768px) {
    .safe-payment-section .contents_box_main {
        background: #F7F7F7;
        padding: 15px;
        border-radius: 24px;
    }
    .safe-payment-section h3 {border-radius: 20px;
        background: #092056;
        color: #93FBFF !important;
        leading-trim: both;
        text-edge: cap;
        font-family: "IBM Plex Sans KR";
        font-size: 1.5rem;
        font-style: normal;
        padding:10px 24px;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -.2px;
    }


    .safe-payment-section .contents_box {background:#F7F7F7; padding:15px; border-radius: 24px;}
    .safe-payment-section .contents_box .box_head {margin-top:20px;}

    .safe-payment-section .section_description {color: var(--navy900, #092056);
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        font-family: "IBM Plex Sans KR";
        font-size: 1.8rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.6;

        letter-spacing: -1.2px;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;}

    .safe-payment-section ul {background:#fff; border-radius: 24px; margin-top:-45px;  padding:30px 20px 10px}
    .safe-payment-section li {font-weight:600;color: #0A0A0A; list-style:disc !important;  margin-left:0px; font-size:1.2rem !important;}
    .safe-payment-section .ship_img {max-width:30%; margin-top:10px;}
}


.header-icon .icon > a {
    font-size: 15px;
}
header .navbar-brand img {
    max-height: 54px;
}

footer{position:relative !important; z-index:555 !important;}


.section_mains {background-image: url('/theme/barit/images/Texture.png'); height:700px;background-color: #19283d; paddinb-bottom:50px;
}

.sticky .header-transparent .header-button .btn {
    background-color: var(--dark-gray);
    color: var(--white);
}
.sticky .header-transparent .header-button .btn:hover {
    border-color: var(--dark-gray);
}
.navbar .navbar-nav .nav-link {
    font-size: 17px;
}
/* bg background color */
.bg-midnight-dark-blue {
    background-color: #191d3c;
}
.bg-dark-blue {
    background-color: #183f80;
}
.bg-arsenic-grey {
    background-color: #535353 !important;
}
.bg-transparent-white-light {
    background-color: rgba(255, 255, 255, .1) !important;
}
/* btn */
.btn {
    text-transform: initial;
    letter-spacing: 0px;
}
.btn i,
.btn.btn-hover-animation-switch .btn-icon {
    margin-left: 6px;
}
/* button type */
.btn.btn-switch-text.btn-extra-large > span {
    font-size: 17px;
    padding: 16px 36px;
}
.btn.btn-switch-text.btn-large > span {
    font-size:15px;
    padding: 14px 34px;
}
.btn.btn-switch-text.btn-medium > span {
    font-size: 14px;
    padding: 12px 28px;
}
.btn.btn-switch-text.btn-small > span {
    font-size: 13px;
    padding: 8px 20px;
}
.btn.btn-switch-text.btn-very-small > span {
    font-size: 12px;
    padding: 6px 20px;
}
.btn.btn-link {
    padding: 0 0 2px;
}
.btn-yellow {
    background-color: var(--yellow);
    color: var(--dark-gray);
}
.btn-yellow:hover {
    background-color: transparent;
    border-color: var(--yellow);
    color: var(--yellow);
}
.btn.btn-box-shadow.btn-yellow:hover {
    background-color: var(--yellow) !important;
    color: var(--dark-gray) !important;
}
.btn-green {
    background-color: var(--green);
    color: var(--white);
}
.btn-green:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--dark-gray);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 25px;
}
/* page title */
.page-title-extra-small h2 {
    font-size: 3.25rem;
    line-height: 3.425rem;
}
/* checkbox */
.form-check-input:checked {
    background-color: var(--base-color) !important;
    border-color: var(--base-color) !important;
}
.form-check-input:focus {
    outline: none;
    box-shadow: none;
}
/* footer */
footer {
    padding-top: 100px;
}
footer .footer-logo img {
    max-height: 32px;
}
.footer-dark a:hover {
    color: var(--white);
}
footer ul li {
    margin-bottom: 0;
}
/*  subcribe style 02  */
.newsletter-style-02 .btn i {
    top: -1px;
}
.newsletter-style-02 input {
    font-size: 14px;
}

/* media query responsive */
@media (max-width: 991px) {
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner {
        background-image: url(../../images/demo-hosting-mobile-menu-bg.jpg);
        background-position: center center;
        background-size: cover;
    }
}
@media (max-width: 1199px) {
    .btn.btn-switch-text.btn-small > span {
        padding: 6px 18px;
    }
    footer {
        padding-top: 80px;
    }
    .btn.btn-switch-text.btn-extra-large > span {
        padding: 16px 30px;
    }
    .btn.btn-switch-text.btn-large > span {
        padding: 14px 30px;
    }
}
@media (max-width: 767px) {
    footer {
        padding-top: 50px;
    }
    .newsletter-style-02 .btn i {
        top: 0;
    }
}


.noto-serif {
    font-family: "Noto Serif KR", serif;
}
.main_visual_bgc {background:#9754e3 !important}
.speech-bubble {
    position: relative;
    background-color: #fff;
    border-radius: 50px;
    padding: 20px 35px;
    min-width: 200px;

    display:inline;
    min-height: 60px;
    margin-bottom:50px;
}
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: 7px;
    border-width: 40px 40px 0 0px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}
.text-main {color:#052052 !important;}
.tuor_title  h3 {font-size:32px; font-weight:700; color:#000; margin-bottom:10px; color}
.tuor_title  p {font-size:26px; font-weight:400; color:#000 ; margin-bottom:0; line-height:35px;}
.iconbox {background:#fff; border-radius: 16px; margin-bottom:15px; max-width:100%; margin:10px auto;
    padding:15px 0;
}
.iconbox-right h6 {margin-bottom:10px; font-size:16px; background:#fff177; display:inline; border-radius: 16px; color:#052052;  padding:0px 8px; font-weight:600;}
.iconbox-right p {margin-bottom:0; margin-top:5px; letter-spacing: -2px}
.iconbox img {margin:0 15px;}
.iconbox span {font-weight:400; font-size:18px; color:#333; letter-spacing: -1px; line-height:20px; text-align:center; }


.quick_sumbit  .checkbox_input {}
@media(max-width:768px) {
    .iconbox {background:#fff; border-radius: 16px; margin-bottom:15px; max-width:100%; margin:10px auto;padding:15px 0;}
    .iconbox img {margin:0px auto 0; width:100%; display:block; min-width:45px}
    .iconbox span {font-weight:400; font-size:18px; color:#333; letter-spacing: -1px; line-height:20px; text-align:center; }
    .iconbox-right h6 {margin-bottom:10px; font-size:14px; background:#fff177; display:inline; border-radius: 16px; color:#052052;  padding:0px 8px; font-weight:600;}
    .iconbox-right p {margin-bottom:0; margin-top:5px; font-size:14px; }
    .tuor_title {padding:15px}
    .tuor_title  h3 {font-size:20px; font-weight:700; color:#000; margin-bottom:10px; color:#000}
    .tuor_title  p {font-size:16px; font-weight:400; color:#000 ; margin-bottom:0;  line-height:20px;}
}
.h2_deco {position:relative; color:#052052;  border:4px solid #052052; border-radius:36px;  padding:0px 20px 5px; z-index:1;}
.h2_deco:after{

    position:absolute;
    bottom:5px;
    left:0;
    content:"";
    height:20px;
    width:100%;
    display:inline;
}
.section1_title:after {
    content:"";
    position:absolute;
    background:rgba(250,250,199,0.9);
    z-index: -1;
}
.section3_title:after {
    content:"";
    position:absolute;
    background:rgba(255,255,255,0.7);
    z-index: -1;
}
.section4_title:after {
     content:"";
     position:absolute;
     background:rgba(172,110,239,0.6);
     z-index: -1;
 }
.section5_title:after {
    content:"";
    position:absolute;
    background:rgba(255,230,141,0.6);
    z-index: -1;
}
.section8_title:after {
    content:"";
    position:absolute;
    background:rgba(238,249,255,1);
    z-index: -1;
}

.moneys {z-index:2;  top: 0%; left: 50%; transform: translate(-50%, -120%);  display:none !important}


.bar_banner01 {background-image: url('../images/pc-bar-banner.jpg')}
.bar_banner02 {background-image: url('../images/pc-bar-banner2.jpg')}

.section11_bg {background-image: url('../images/public/sectionbg_11.jpg'); background-position:50%; background-size: inherit }
.section12_bg {background-image: url('../images/public/sectionbg_12.jpg'); background-position:50%; background-size: inherit }
.m_fixed {display:none}


.toggle-button {
    position: relative;
    display: inline-block;
    color: #fff;
    margin: 0 0px;
}
.toggle-button label {
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
}
.toggle-button input {
    display: none;
}
.toggle-button__icon {
    cursor: pointer;
    pointer-events: none;
}
.toggle-button__icon:before,
.toggle-button__icon:after {
    content: "";
    position: absolute;
    transition: 0.2s ease-out;
}

@media only screen and (max-width: 480px) {
    .toggle-button--valo {
        display: block;
        width: 110px;
        margin: 0 auto 10px auto;
    }
}

.toggle-button--valo label {
    width: 110px;
    height: 20px;
    line-height: 20px;
    transition: all 0.2s;
}
.toggle-button--valo label:before,
.toggle-button--valo label:after {
    position: absolute;
    top: 0;
    left: 30px;
    width: 110px;
    transition: all 0.2s 0.1s ease-out;
}
.toggle-button--valo label:before {
    content: attr(data-text);
}

.toggle-button--valo input:checked ~ .toggle-button__icon:after {
    transform: translate(0, 0);
    animation: show 0.2s;
}

.toggle-button--valo .toggle-button__icon {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    overflow: hidden;
    border-radius: 50%;
}
.toggle-button--valo .toggle-button__icon:before,
.toggle-button--valo .toggle-button__icon:after {
    border-radius: 50%;
}
.toggle-button--valo .toggle-button__icon:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--valo .toggle-button__icon:after {
    top: 4px;
    left: 4px;
    width: 60%;
    height: 60%;
    background: #61b136;
    animation: hide 0.2s ease-out;
    transform: translate(0, 200%);
    transition: none;
}

.toggle-button--valo:hover input:not(:checked) ~ .toggle-button__icon {
    animation: hover 0.2s;
}

.toggle-button--valo:hover input:not(:checked) ~ label:before {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.on_mobiles {margin-top:60%;}

.mna2  {background-image: url('/assets/images/main/bar2.jpg')}
@media (max-width:768px) {
    .transition-inner-all {margin-bottom:15px;}
.mna2  {background-image: url('/assets/images/main/mbar2.png'); background-size:cover;}}
@keyframes hide {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -200%);
    }
}

@keyframes show {
    0% {
        transform: translate(0, 200%);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes hover {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.toggle-button--tuli {
    display: block;
    width: 110px;
    margin: 0 auto 10px auto;
}
.toggle-button--tuli label {
    width: 110px;
    height: 20px;
    line-height: 20px;
    transition: all 0.2s;
}
.toggle-button--tuli label:before,
.toggle-button--tuli label:after {
    position: absolute;
    top: 0;
    left: 30px;
    width: 110px;
    transition: all 0.2s 0.1s ease-out;
}
.toggle-button--tuli label:before {
    content: attr(data-text);
}
.toggle-button--tuli input:checked ~ .toggle-button__icon:after {
    transform: translate(0, 0);
    animation: slideLeft 0.2s;
}
.toggle-button--tuli .toggle-button__icon {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    overflow: hidden;
    border-radius: 50%;
}
.toggle-button--tuli .toggle-button__icon:before,
.toggle-button--tuli .toggle-button__icon:after {
    border-radius: 50%;
}
.toggle-button--tuli .toggle-button__icon:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--tuli .toggle-button__icon:after {
    top: 4px;
    left: 4px;
    width: 60%;
    height: 60%;
    background: #61b136;
    animation: slideRight 0.2s ease-out;
    transform: translate(0, 200%);
    transition: none;
}
.toggle-button--tuli:hover input:not(:checked) ~ .toggle-button__icon {
    animation: hover 0.2s;
}
.toggle-button--tuli:hover input:not(:checked) ~ label:before {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

@keyframes slideRight {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-200%, 0);
    }
}

@keyframes slideLeft {
    0% {
        transform: translate(200%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes hover {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@media only screen and (max-width: 480px) {
    .toggle-button--maa {
        display: inline-block;
        width: 80px;
        margin:0;
    }
}

.toggle-button--maa label {
    width: 80px;
    height: 20px;
    line-height: 20px;
    transition: all 0.2s;
}
.toggle-button--maa label:before,
.toggle-button--maa label:after {
    position: absolute;
    top: -2px;
    left: 30px;
    width: 80px;
    transition: all 0.2s 0.1s ease-out;
}
.toggle-button--maa label:before {
    content: attr(data-text);
}

.toggle-button--maa input:checked ~ .toggle-button__icon:before {
    animation: wave 0.7s ease-out;
}

.toggle-button--maa input:checked ~ .toggle-button__icon:after {
    transform: scale(1);
    animation: zoomIn 0.2s;
}

.toggle-button--maa .toggle-button__icon {
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border:1px solid #9754e3;
    background: #fff;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--maa .toggle-button__icon:before,
.toggle-button--maa .toggle-button__icon:after {
    border-radius: 50%;
}
.toggle-button--maa .toggle-button__icon:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
}
.toggle-button--maa .toggle-button__icon:after {
    top: 5px;
    left: 5px;
    width: 50%;
    height: 50%;
    background: #9754e3;
    animation: zoomOut 0.2s ease-out;
    transform: scale(0);
    transition: none;
}

.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon {
    animation: hover 0.2s;
}

.toggle-button--maa:hover input:not(:checked) ~ label:before {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

@keyframes zoomOut {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    90% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes hover {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes wave {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    40% {
        opacity: 0.2;
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@media only screen and (max-width: 480px) {
    .toggle-button--taivas {
        display: block;
        width: 110px;
        margin: 0 auto 10px auto;
    }
}

.toggle-button--taivas label {
    width: 110px;
    height: 20px;
    line-height: 20px;
    transition: all 0.2s;
}
.toggle-button--taivas label:before,
.toggle-button--taivas label:after {
    position: absolute;
    top: 0;
    left: 30px;
    width: 110px;
    transition: all 0.2s 0.1s ease-out;
}
.toggle-button--taivas label:before {
    content: attr(data-text);
}

.toggle-button--taivas input:checked ~ .toggle-button__icon:before {
    animation: wave 0.7s ease-out;
}

.toggle-button--taivas input:checked ~ .toggle-button__icon:after {
    opacity: 1;
    animation: zoomFadeIn 0.4s;
}

.toggle-button--taivas .toggle-button__icon {
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    overflow: visible;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--taivas .toggle-button__icon:before,
.toggle-button--taivas .toggle-button__icon:after {
    border-radius: 50%;
}
.toggle-button--taivas .toggle-button__icon:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
}
.toggle-button--taivas .toggle-button__icon:after {
    top: 4px;
    left: 4px;
    width: 60%;
    height: 60%;
    background: #61b136;
    animation: zoomFadeOut 0.2s ease-out;
    opacity: 0;
    transition: none;
}

.toggle-button--taivas:hover input:not(:checked) ~ .toggle-button__icon {
    animation: hover 0.2s;
}

.toggle-button--taivas:hover input:not(:checked) ~ label:before {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

@keyframes zoomFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes zoomFadeIn {
    0% {
        opacity: 0;
        transform: scale(3);
    }
    90% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes hover {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes wave {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    40% {
        opacity: 0.2;
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/*
 * Toggle button variables
 */
/*
 * Toggle button styles
 */
.toggle-button--niitty label {
    line-height: 20px;
}

.toggle-button--niitty input[type="radio"]:checked ~ .toggle-button__icon {
    background: #fff;
}
.toggle-button--niitty
input[type="radio"]:checked
~ .toggle-button__icon:before,
.toggle-button--niitty
input[type="radio"]:checked
~ .toggle-button__icon:after {
    opacity: 1;
}

.toggle-button--niitty .toggle-button__icon {
    display: inline-block;
    float: left;
    position: relative;
    width: 20px;
    height: 20px;
    transition: all 0.2s;
    margin-right: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.toggle-button--niitty .toggle-button__icon:before,
.toggle-button--niitty .toggle-button__icon:after {
    top: 5px;
    left: 2px;
    width: 12px;
    height: 2px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    top: 35%;
    background: #61b136;
    opacity: 0;
    transform-origin: left center;
}
.toggle-button--niitty .toggle-button__icon:before {
    transform: translate(0, 0) rotate(45deg) scale(0.6, 1);
}
.toggle-button--niitty .toggle-button__icon:after {
    transform: translate(4px, 6px) rotate(-45deg);
}

.toggle-button--niitty:hover
input[type="radio"]:not(:checked)
~ .toggle-button__icon {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 480px) {
    .toggle-button--nummi {
        display: block;
        width: 110px;
        margin: 0 auto 10px auto;
    }
}

.toggle-button--nummi label {
    width: 110px;
    height: 20px;
    line-height: 20px;
    transition: all 0.2s;
}
.toggle-button--nummi label:before,
.toggle-button--nummi label:after {
    position: absolute;
    top: 0;
    left: 30px;
    width: 110px;
    transition: all 0.2s 0.1s ease-out;
}
.toggle-button--nummi label:before {
    content: attr(data-text);
}

.toggle-button--nummi input:checked ~ .toggle-button__icon {
    animation: wiggle 0.2s ease-out;
}
.toggle-button--nummi input:checked ~ .toggle-button__icon:after {
    animation: flyInRight 0.4s;
    transform: translate(0);
}

.toggle-button--nummi .toggle-button__icon {
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--nummi .toggle-button__icon:before,
.toggle-button--nummi .toggle-button__icon:after {
    border-radius: 50%;
}
.toggle-button--nummi .toggle-button__icon:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
}
.toggle-button--nummi .toggle-button__icon:after {
    top: 4px;
    left: 4px;
    width: 60%;
    height: 60%;
    background: #61b136;
    transition: none;
    transform: translate(200%);
    animation: flyOutLeft 0.4s;
}

.toggle-button--nummi:hover input:not(:checked) ~ .toggle-button__icon {
    animation: hover 0.2s;
}

.toggle-button--nummi:hover input:not(:checked) ~ label:before {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

@keyframes flyInRight {
    0% {
        transform: translate(200%);
    }
    50% {
        transform: translate(200%);
    }
    70% {
        transform: translate(-50%);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes flyOutLeft {
    0% {
        transform: translate(0);
    }
    70% {
        transform: translate(0);
    }
    100% {
        transform: translate(-200%);
    }
}

@keyframes wiggle {
    0% {
        transform: translate(0);
    }
    80% {
        transform: translate(5px);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes hover {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@media only screen and (max-width: 480px) {
    .toggle-button--meri {
        display: block;
        width: 110px;
        margin: 0 auto 10px auto;
    }
}

.toggle-button--meri label {
    width: 110px;
    height: 20px;
    line-height: 20px;
    transition: all 0.2s;
}
.toggle-button--meri label:before,
.toggle-button--meri label:after {
    position: absolute;
    top: 0;
    left: 30px;
    width: 110px;
    transition: all 0.2s 0.1s ease-out;
}
.toggle-button--meri label:before {
    content: attr(data-text);
}

.toggle-button--meri input:checked ~ .toggle-button__icon:before {
    transition-delay: 0;
    transform: rotateY(0deg);
}

.toggle-button--meri input:checked ~ .toggle-button__icon:after {
    transition-delay: 0.2s;
    transform: rotateY(0deg);
}

.toggle-button--meri .toggle-button__icon {
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
    perspective: 800;
    transform-style: preserve-3d;
}
.toggle-button--meri .toggle-button__icon:before,
.toggle-button--meri .toggle-button__icon:after {
    top: 4px;
    width: 6px;
    height: 12px;
    background: #61b136;
}
.toggle-button--meri .toggle-button__icon:before {
    left: 4px;
    border-radius: 12px 0 0 12px;
    transform: rotateY(90deg);
    transform-origin: right center;
}
.toggle-button--meri .toggle-button__icon:after {
    right: 4px;
    border-radius: 0 12px 12px 0;
    transform: rotateY(90deg);
    transform-origin: left center;
    transition-delay: 0.2s;
}

.toggle-button--meri:hover input:not(:checked) ~ .toggle-button__icon {
    animation: hover 0.2s;
}

.m_main_bg_2 {display:none;}

.go_travel img {width:100%; display:block; margin-bottom:15px;}

@media (max-width:768px) {
    .go_travel img {width:100%; display:block; margin-bottom:10px;}
    header .navbar-brand img {
        max-height: 50px;
    }
    .section_mains {background-image: url('../theme/barit/images/ints.png');
        background-size:cover;
        height:65vh;
    }
    .m_main_bg_2 {background-image: url('../theme/barit/images/ints.png');
        background-size:cover;
        display:block;
        position:absolute; bottom:0px;
    }
    .boni_contact img {max-width:80%;}

    .outside-box-right-7 {
        margin-right: 0;
    }
    .full-screen.ipad-top-space-margin {
        height: calc(80vh - 50px) !important;
    }
    .onms {margin-top:100px;}
    .speech-bubble {
        position: relative;
        background-color: #fff;
        border-radius: 50px;
        padding: 20px 10px;
        min-width: 150px;
        display:inline;
        min-height: 40px;
        margin-bottom:50px;
    }
    .speech-bubble::after {
        content: '';
        position: absolute;
        bottom: -15px;
        right: 15px;
        border-width: 20px 20px 0 0px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
    }
    .moneys {z-index:2;  top:-100vh; left: 80%; transform: translate(-25%, 75%);  display:none !important}
    .bar_banner01 {background-image: url('../images/mobile-bar-banner.jpg')}
    .bar_banner02 {background-image: url('../images/mobile-bar-banner2.jpg')}
    .section11_bg {background-image: url('../images/public/sectionbg_11m.jpg'); background-position:center; background-size: cover }
    .section12_bg {background-image: url('../images/public/sectionbg_12m.jpg'); background-position:center; background-size: cover }
    .check_img {max-width:30px;}
    .clock {max-width:40px; position: absolute; top:15px; left:-10px; }
    .footer_addlink a {font-size:12px;}
    .ad-border {border-top:1px solid rgba(255,255,255,0.5); padding-top:15px;  text-align:center;}

    .m_fixed {position:fixed; opacity:0; overflow:hidden;  bottom:0; left:0; background:#6a49be; padding:15px 5px; min-height:100px; z-index:10!important; width:100%; display:block;}
    .footer_deco_contact {max-width:80%; margin-top:10px;}
    .footer_deco_people{max-width:60%;}

    .l_kakao {width:100%; padding:10px;font-weight:900;}
    .l_contact {width:100%; padding:10px;font-weight:900; }
    .arrow-right {
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid #0F2941; /* 화살표 색상 설정 */
        background-color: transparent; /* 배경 투명 */
    }

    .visibles {opacity: 1}
}

@media (max-width:485px) {
    .onms {margin-top:-120px;}

}
.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #ffffff !important;
    padding-right: calc(1.5em + .75rem);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%239754e3' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e`) !important;
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.boxes input[type="checkbox"] + label:last-child {
    margin-bottom: 0;
}
.boxes input[type="checkbox"] + label {
    display: block;
    position: relative;

    padding-left: 5px;
    margin-bottom: 20px;
    color: #333;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.boxes input[type="checkbox"] {
    display: none;
}
.boxes input[type="checkbox"] + label:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #9754e3;
    position: absolute;
    left: 30px;
    top: 5px;
    opacity: 1;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}
.boxes input[type="checkbox"]:checked + label:before {
    width: 10px;
    top: 2px;
    left: 20px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


@media(max-width:768px){


    .boxes input[type="checkbox"] + label {
        display: block;
        position: relative;
        padding-left: 5px;
        margin-bottom: 20px;
        font-size:12px !important;
        color: #333;
        cursor: pointer;
        width:100% !important;
        max-width:300px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .boxes input[type="checkbox"] + label:before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        border: 1px solid #9754e3;
        position: absolute;
        left: 10px;
        top: 5px;
        opacity: 1;
        -webkit-transition: all .12s, border-color .08s;
        transition: all .12s, border-color .08s;
    }

}


.itembox {border:1px solid #d9d9d9 !important; margin-bottom:20px !important}
.itembox p {margin-top:15px; color:#121212; letter-spacing: -1px;}

@media (max-width:768px) {
    .itembox p {margin-top:15px; color:#121212; letter-spacing: -1px; font-size:12px;  padding:0 8px;}
}


.page-breadcrumb {
    position: relative;
    margin-top: 5px;
}
.page-breadcrumb li {
    position: relative;
    display: inline-block;
    margin-right: 7px;
    padding-right: 46px;
    font-size: 16px;
    color: #000;
    font-weight: 500;
    text-transform: capitalize;
}

.page-breadcrumb li:after {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    transition: all .4s ease 0s;
    right: 0;

    width: 36px;
    height: 36px;
    background: url('/theme/barit/images/gray_arrow.png');
    background-size:contain;
}

.page-breadcrumb li:last-child {
    color: #000;
    padding-right: 0;
    margin-right: 0;
    background:none
}
.page-breadcrumb li:last-child:after {
    display: none;
}
.breadcrumb-item+.breadcrumb-item::before {content:"" !important}