@charset "UTF-8";

/* ============================================================== contents ============================================================== */
/*  ========== main  ========== */
.main-visual{position: relative; width: 100%; height: 100vh; height: 100dvh; background-color: #4F6B7A; overflow: hidden;}
.main-visual::before {content:""; display: block; position: absolute; top:0; left:0; width: 100%; height: 100%; background: url(../images/pic/main_bg.svg) no-repeat center / cover; z-index: 10000;}
.main-visual video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover; background-color: #4F6B7A; transform: translateZ(0);}
.main-visual video.mobile-video { display: none; }
.main-visual .visual-txt { position: absolute; top: 80px; left: 50%; transform: translateX(-50%);  text-align: center; z-index: 100000;transition:all 2s; }
.main-visual .visual-txt .main-tit {font-family: "Playfair Display", serif; font-size:170px; color: #4F6B7A;font-weight: 700; width: max-content;transform: scale(1);  transition:all 2s;}
.main-visual .visual-txt .main-txt {display:none; font-size:22px;color: white; text-shadow: 0 6px 24px rgba(0,0,0,0.2); }

.active.main-visual::before {transform: scale(10); z-index: 10; transition:all 2s 1s;}
.active.main-visual .visual-txt { top: 50%; left: 50%; transform: translate(-50%, -50%);text-align: center; z-index: 10;transition:all 2s; }
.active.main-visual .visual-txt .main-tit { transform: scale(0.5);  color: white;  text-shadow: 0 6px 24px rgba(0,0,0,0.2); transition:all 2s; }
.active.main-visual .visual-txt .main-txt {display:block; animation: visualTxtFade 10s cubic-bezier(.22,.9,.31,1) forwards; }
@keyframes visualTxtFade { from { opacity: 0; } to { opacity: 1; } }
/* 이용절차 */
.main-section .wrap {max-width: 1520px;}
.step-top-area {position: relative; background-color: #EDECE9; padding: 240px 0;}
.step-top-area .top-txt-box h3 {font-family: "Playfair Display", serif; font-size:100px; color:#4F6B7A; } 
.step-top-area .top-txt-box p {font-size:18px;line-height: 1.6; padding-top:30px;} 
.step-top-area .right-img-box {position: absolute; right:0; top:160px; width: 100%; height: 100%; max-width: 1050px; max-height: 1050px; background: url(../images/pic/main_img_01.png) no-repeat center/100%; border-radius:180px 0 180px 20px; overflow: hidden; z-index: 10;}
.step-bottom-area {position: relative; background-color: #4F6B7A; padding:300px 0 140px; } 
.step-bottom-tit {display:flex; align-items: center; justify-content: space-between;}
.step-bottom-tit > h3{color:#EDECE9;}
.step-bottom-tit > p {color:#EDECE9; text-align: right;}
.step-slide-swiper {padding-top:70px;}
.step-slide-swiper li {position: relative; border-radius: 20px; overflow: hidden; width: 350px;}
.step-slide-swiper li .step-txt-box {position: absolute; bottom:0; left:0; right:0; padding:26px 30px; color:#EDECE9; background-color: rgba(49,57,66,0.7);}
.step-slide-swiper li .step-txt-box h4 {font-size:24px; color:#EDECE9;}
.step-slide-swiper li .step-txt-box p {font-size:16px; padding-top:10px;}
/* 해양장 이미지 */
.ocean-img-area {background-color: #EDECE9; padding:120px 0;overflow: hidden;  }
.ocean-img-area .wrap {position: relative; display: flex; align-items: center; gap: 100px;}
.ocean-img-swiper {width: 740px; height: 780px; border-radius: 20px 300px 20px 100px; overflow: hidden;}
.ocean-slide-box .swiper-button-next:after,.ocean-slide-box .swiper-button-prev:after {display: none;}
.ocean-slide-box .swiper-button-prev {top:0;; left:auto; right:110px; width: 60px; height: 60px; background: url(../images/arrow_prev.svg) no-repeat center / 100%;}
.ocean-slide-box .swiper-button-next {top:0; right:36px; width: 60px; height: 60px; background: url(../images/arrow_next.svg) no-repeat center / 100%;}
.ocean-slide-box .swiper-button-prev:hover { background: url(../images/arrow_prev_hover.svg) no-repeat center / 100%;}
.ocean-slide-box .swiper-button-next:hover { background: url(../images/arrow_next_hover.svg) no-repeat center / 100%;}
.ocean-slide-box .swiper-pagination {display: none;}
.ocean-txt-box .btn-wrap {padding-top:80px;}
.ocean-txt-box span {display: block; font-size: 26px; color:#4F6B7A; padding-bottom:20px;}
.ocean-txt-list {padding-top:20px;}
.ocean-txt-list li {position: relative; font-size: 18px;padding: 6px 0px 6px 14px;}
.ocean-txt-list li::before {content:"";position: absolute; left:0; top:15px;  display:block; width:4px; height:4px; background: #313942; border-radius: 50%;}
.ocean-txt-motion {display: inline-block; font-family: "Playfair Display", serif; font-size: 200px; white-space: nowrap; color: #4F6B7A; padding-top: 80px; opacity: 0.1;will-change: transform;animation: oceanMarquee 30s linear infinite;}
.ocean-txt-motion::after {  content: attr(data-text);  display: inline-block;  padding-left: 3rem;}

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

@media (prefers-reduced-motion: reduce) {
    .ocean-txt-motion { animation: none; }
}

/* 풀배너 */
.full-banner-area { position: relative; width: 100%; background: url(../images/pic/main_img_02.png) no-repeat center / cover; background-attachment: fixed; padding: 80px 0; text-align: center; }
.full-banner-txt { color: white; font-size: 40px; font-weight: 300; line-height: 1.6; letter-spacing: -0.1rem;}
.full-banner-txt b { font-weight: 600; }

/* 메인 : 자주 하는 질문 */
.main-question-area { background-color: #EDECE9; padding: 120px 0 160px; }
.main-question-list {display:grid; grid-template-columns: 1fr 1fr 1fr;  gap:40px; padding-top:70px;}
.main-question-list li { background-color: #fff; padding:36px; border-radius: 20px;}
.main-question-list li .que {position: relative; font-size: 26px; font-weight: 600;line-height: 1.3; padding-left:52px;padding-bottom:30px; border-bottom:1px solid #E6EAEC;}
.main-question-list li .que::before {content:""; display:block; width:36px; height:36px; background: url(../images/ico_q.svg) no-repeat center / 100%; position: absolute; left:0px; top:0%}
.main-question-list li .answer{position: relative; font-size: 18px; padding-left:52px; line-height: 1.6; margin-top:30px; word-break: break-all; }
.main-question-list li .answer::before {content:""; display:block; width:36px; height:36px; background: url(../images/ico_a.svg) no-repeat center / 100%; position: absolute; left:0px; top:0%;}



/*  ======================================== sub ================================================== */
/* sub common */
.sub-tit-area {padding:120px 0 100px; text-align: center;}
.sub-tit-area.only-mobile {display: none;}
.sub-tit-area.only-pc {display: blcok;}
.page-tit-area {padding:120px 0 100px; text-align: center;}
.visual-content {position: relative;width: 100%; height: 100svh;}
.visual-content.product {background: url(../images/pic/pro_visual.png) no-repeat center / cover; background-attachment: fixed;}
.sub-visual-tit {font-size: 80px; color:#fff; font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); width:100%; text-align: center;}
.visual-content.product .sub-visual-tit {animation: subVisualTitFadeIn 5s ease-out 0.4s both;}
@keyframes subVisualTitFadeIn { from { opacity: 0;  } to { opacity: 1;} }
.sub-tit-area.product {padding-top:0;}
@media screen and (max-width: 1024px) {
    .sub-tit-area {padding:100px 0 80px;}
    .page-tit-area {padding:100px 0 80px;}
}
@media screen and (max-width: 920px) {
    .sub-tit-area  {padding:0; font-size:20px; position: fixed; top:24px; left:50%; transform: translateX(-50%); z-index: 1000;}
    .sub-tit-area h3 {font-size: 20px; font-weight: 500;}
    .sub-tit-area.only-mobile {display: block;}
    .sub-tit-area.only-pc {display: none;}
    .page-tit-area {padding:6vw 0 5vw;}
     .visual-content {margin-top:70px; height:calc(100svh - 70px);}
   .visual-content.product {background: url(../images/pic/pro_visual_m.png) no-repeat center / cover;}
   .sub-visual-tit {font-size: 10vw; top:40%;}

}

/*  ========== 오시는 길  ========== */
.location-list {padding-top:20px;}
.location-list li {padding:40px 0; display: flex;align-items: center; border-bottom:1px solid #E6EAEC;}
.location-list li .label {font-size: 30px; font-weight: 600; width:340px; display: flex;align-items: center; gap:22px;}
.location-list li p {font-size: 22px; }
.ico-location-addr {display: inline-block; width:46px; height:46px; background: url(../images/ico_addr.svg) no-repeat center / 100%;}
.ico-location-tel {display: inline-block; width:46px; height:46px; background: url(../images/ico_tel.svg) no-repeat center / 100%;}
.ico-location-trans {display: inline-block; width:46px; height:46px; background: url(../images/ico_trans.svg) no-repeat center / 100%;}
.map-box {width:100%; height: 560px;background: #eaeaea; border-radius: 20px; overflow: hidden;}

/* ========== 상품소개  ========== */
.product-list + h4 {padding-top:100px;}
.product-list {display: grid; grid-template-columns: 1fr 1fr 1fr; gap:54px;}
.product-list li {padding-top:50px;}
.product-list li .img-box {border-radius: 20px; cursor: pointer; overflow: hidden;}
.product-list li .tit {font-size: 26px; padding-top:20px; font-weight: 500; text-align: center;}
/* ==========  상품소개 상세 ========== */
.pro-detail-area {display: flex; width: 100%; height: 380px; border-radius: 20px; overflow: hidden; background-color: #EDECE9; }
.pro-detail-swiper-wrap {width: calc(100% - 400px);height: 380px; }
.pro-detail-swiper {width: 100%; height: 100%;}
.pro-detail-swiper img {object-fit: cover; height: 100%;}
.pro-detail-info { display: flex; align-items: center; flex-direction: column;justify-content: center;width: 400px; padding: 0 40px; box-sizing: border-box;}
.pro-detail-info li {display: flex; justify-content: space-between; align-items: center; width: 100%; padding:30px 0; border-bottom:1px solid #D5D4D1; }
.pro-detail-info li:last-child {border-bottom:0;}
.pro-detail-info li .badge {font-size: 18px; padding:10px 20px 12px; background-color:#4F6B7A; color:#EDECE9; border-radius: 30px; }
.pro-detail-info li p {font-size: 22px; font-weight: 500;}
.pro-detail-info li .price {color:#DF7B7B; font-weight: 700; font-size: 26px;line-height: 1;}
.pro-detail-info li .price span {font-size: 20px;}
/* tap */
.tap-area {padding-top:100px; position: relative;}
.tap-area:after {content:""; display: block; width: 100%; height: 1px; background-color: #D6D8D9;}
.tap-list {display: flex;}
.tap-list li { background-color: #EDEFF1; color:#4F6B7A; font-size:22px; width: 100%; height: 70px; line-height: 68px; text-align: center; border: 1px solid #D6D8D9; border-bottom:0; border-radius: 20px 20px 0 0; cursor: pointer;}
.tap-list li.active {background-color:#4F6B7A; color:#fff; border: 1px solid #4F6B7A;}
.tap-list.col-2 li {width: 50%;} 
.tap-list.col-3 li {width: 33.333%;} 
/* 탬플릿 */
.tap-panel-wrap {padding-top: 80px;}
.tap-panel-wrap .pb20 {padding-bottom:20px !important;}
.tap-panel-wrap .pb30 {padding-bottom:30px !important;}
.tit-txt-50 {font-size: 50px; font-weight: 700; text-align: center; line-height: 1.3; padding-bottom:70px;}
.tit-txt-42 {font-size: 42px; font-weight: 700; text-align: center; line-height: 1.3; padding-bottom:60px;}
.txt-22 {font-size: 22px; text-align: center; line-height: 1.6; padding-bottom:60px;}
.banner-img-box {width: 100%; padding-bottom:70px;}
.color-item-box {padding-bottom:100px;max-width: 830px; display: flex; gap:30px; margin: 0 auto;}
.color-item-box .item-1 { width: 50%; background-color:#4F6B7A; color:#EDECE9; font-size: 24px; padding:30px; text-align: center; line-height: 1.4;}
.color-item-box .item-2 { width: 50%; background-color:#EDECE9; color:#4F6B7A; font-size: 24px; padding:30px; text-align: center; line-height: 1.4; border:1px solid #4F6B7A; box-sizing: border-box;}
.bg-box-area {background-color: #ECF4F7; padding: 80px 100px;}
.step-img-box {display: flex; gap:70px; flex-wrap: wrap;}
.step-img-box li {width: calc(50% - 35px);}
.step-img-box .txt-box {padding-top:30px;}
.step-img-box .txt-box h5 {font-size: 32px; font-weight: 700;}
.step-img-box .txt-box p {font-size: 22px; padding-top:14px; line-height: 1.4;}
/* 안내 */
.pro-info-box {padding-top:50px;}
.pro-info-tit {font-size: 28px; color:#4F6B7A; font-weight: 600; padding-bottom:24px;}
.pro-info-tit:before {content:"";position: relative; top:5px; display: inline-block; width: 34px; height:34px; background: url(../images/ico_info.svg) no-repeat center/100%; margin-right:10px;}
.pro-info-box b {display: block; font-size: 22px; font-weight: 500; padding-left:44px; line-height: 1.4;}
.pro-info-list {padding-left:44px; padding-top:24px;}
.pro-info-list li {position: relative; font-size: 22px; padding-bottom:16px; padding-left:16px; line-height: 1.4}
.pro-info-list li:before {content:""; position: absolute; left:0; top:11px; display:block; width: 4px; height: 4px; background: #313942; border-radius: 50%;}
/* ========== 자주 하는 질문 ========== */
/* 검색창 */
.search-wrap {max-width: 640px; margin:0 auto;}
.search-box {position: relative;}
.search-box input[type="text"] {width: 100%; height:58px; padding: 18px 80px 18px 30px; font-size: 18px;line-height: 1; border: 1px solid #D6D8D9; border-radius: 50px; box-sizing: border-box;}
.search-box input[type="text"]::placeholder {color:#97989A;}
.search-box .btn-search {position: absolute; right:24px; top:16px; color:transparent; font-size: 0;}
/* 질문리스트 */
.question-list-wrap {padding-top:100px;}
.question-list {border-top:1px solid #313942;}
.question-list li {border-bottom:1px solid #E6EAEC;}
.question-list li .que{padding:36px 50px 36px 40px; background: url(../images/ico_down.svg) no-repeat right 36px center / 40px; cursor: pointer;}
.question-list li .que.open {background: url(../images/ico_up.svg) no-repeat right 36px center / 40px;}
.question-list li .que p {position: relative; font-size: 26px; font-weight: 600;line-height: 1.3; padding-left:56px;}
.question-list li .que P::before {content:""; display:block; width:40px; height:40px; background: url(../images/ico_q.svg) no-repeat center / 100%; position: absolute; left:0px; top:0%}
.question-list li .answer {display: none; padding:40px 50px 40px 40px; margin-bottom:36px; word-break: break-all; background-color: #EDECE9; }
.question-list li .answer p {position: relative;padding-left:56px; font-size: 22px; line-height: 1.6; }
.question-list li .answer P::before {content:""; display:block; width:40px; height:40px; background: url(../images/ico_a.svg) no-repeat center / 100%; position: absolute; left:0px; top:0%;}

/* ========== 브랜드스토리 ========== */
.brand-visual {position: relative; width: 100%; height: 100svh; background: url(../images/pic/stroy_visual.png) no-repeat center / cover; z-index: 100; background-attachment: fixed;}
.brand-visual-txt { position: sticky; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 2; color: #fff; text-align: center; padding: 0 20px; animation: visualTxtFade 5s cubic-bezier(.22,.9,.31,1) forwards;}
.brand-visual.wheel-control .brand-visual-txt { animation: none; opacity: 0; transition: opacity 0.6s ease; }
.brand-visual.wheel-control .brand-visual-txt.active { opacity: 1; }
@keyframes visualTxtFade { from { opacity: 0; } to { opacity: 1; } }
.brand-visual .brand-visual-txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; color: white; text-align: center; z-index: 10; }
.brand-visual .brand-visual-txt .tit-img {font-size:80px; font-weight: 700;text-shadow: 0 6px 24px rgba(0,0,0,0.45);  }
.brand-visual .brand-visual-txt p {font-size:40px; padding-top:30px;text-shadow: 0 6px 24px rgba(0,0,0,0.45);line-height: 1.5; }
.brand-visual .brand-visual-txt.txt-2 .tit-img {font-size:60px;}
.brand-visual .brand-visual-txt.txt-2 p {font-size:22px;}

.brand-visual-1 {position: relative; width: 100%; height: 100svh; display: flex;  align-items: center; box-sizing: border-box;}
.brand-visual-1 .wrap {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.brand-visual-1 .left-box h3 {padding-bottom:50px;}
.brand-visual-1 .left-box p { line-height: 1.5; font-size: 20px; padding-bottom:15px; text-align: left;} 
.brand-visual-1 .right-box {max-width: 600px; max-height:668px; border-radius: 20px 300px 20px 100px; overflow: hidden;}
.brand-visual-1 .right-box img {width: 100%; height: 100%; object-fit: cover;}

.brand-visual-2 {position: relative; width: 100%; height: 100svh; background: url(../images/pic/brand_img_02.png) no-repeat center / cover; background-attachment: fixed; display: flex; justify-content:center;  align-items: center; overflow: hidden; box-sizing: border-box;}
.brand-visual-2:after {content:""; display: block; position: absolute; left:0; right:0; top:0%; bottom:0; background: url(../images/pic/brand_img_02_bg.svg) no-repeat center / cover; transform: scale(1); transition: 3s;}
.brand-visual-2-txt { text-align: center; opacity: 0; padding:0 5vw;}
.brand-visual-2-txt h3 {color:#fff; }
.brand-visual-2-txt p {color:#fff; font-size: 20px; padding-top:20px;}
.brand-visual-2.active:after {transform: scale(10); transition: transform 2s 1s;}
.brand-visual-2.active .brand-visual-2-txt {opacity: 1; transition: opacity 1s 1s;}

/* 모션 완료 후 상태 유지 */
.brand-visual-2.done:after {transform: scale(10); transition: none;}
.brand-visual-2.done .brand-visual-2-txt {opacity: 1; transition: none;}

.brand-visual-3 {background-color: #EDECE9; padding: 120px 0 160px;}
.brand-logo-area {padding-top:80px; }
.brand-logo-top { display: flex;flex-direction: column;align-items: center; gap: 30px; text-align: center;padding-bottom:70px;}
.brand-logo-top img {width: 240px; height: 240px;}
.brand-logo-top p {font-size: 28px;}
.brand-logo-bottom {background-color: #fff; padding:0 80px; border-radius: 20px;}
.logo-item-box {display:flex;align-items: center; justify-content: space-between; padding: 70px 90px 60px;}
.logo-item-box .item {display: flex; flex-direction: column; align-items: center; gap:24px;}
.logo-item-box .item .img-box {width: 150px; height: 150px;}
.logo-item-box .item-1 .img-box {background: url(../images/brand_bi_02.svg) no-repeat center / 100%;}
.logo-item-box .item-2 .img-box {background: url(../images/brand_bi_03.svg) no-repeat center / 100%;}
.logo-item-box .item-3 .img-box {background: url(../images/brand_bi_04.svg) no-repeat center / 100%;}
.logo-item-box .item-plus {width: 24px; height: 24px; background: url(../images/ico_plus.svg) no-repeat center / 100%;}
.logo-item-box .item p {font-size: 22px; font-weight: 500;}
.logo-txt-box {padding: 40px 0 70px; border-top:1px solid #E6EAEC; font-size: 18px; text-align: center; line-height: 1.7;}

/* =============================================1520px=========================================== */
    @media (max-width: 1520px) {
    /*=========== main===========*/
    .main-section .wrap {max-width: 100%; padding:0 5vw;}

     /*==========  이용절차 ========== */
    .step-top-area { padding: 10vw 0;}
    .step-top-area .top-txt-box h3 {font-family: "Playfair Display", serif; font-size:clamp(68px, 17vw, 100px); color:#4F6B7A; } 
    .step-top-area .right-img-box {top:10vw; max-width: 60vw; max-height: 60vw; border-radius:12vw 0 12vw 3vw; overflow: hidden; z-index: 10;}
    .step-bottom-area {padding:18vw 0 10vw;} 
    .step-bottom-area .wrap {padding-right:0;}
    .step-bottom-tit > p {display:none}
    .step-slide-swiper {padding-top:40px;}
    .step-slide-swiper li .step-txt-box {padding: 26px;}
    .step-slide-swiper li .step-txt-box h4 {font-size:20px;}
    .step-slide-swiper li .step-txt-box p {font-size:clamp(13px, 3.6vw, 16px);}
    /* ========== 해양장 이미지========== */
    .ocean-img-area { padding:16vw 0;}
    .ocean-img-area .wrap {gap:50px}
    .ocean-img-swiper {width: 50vw; height: 50vw; border-radius: 3vw 20vw 3vw 8vw; overflow: hidden;}
    .ocean-txt-motion {font-size: 150px;}
    /* ========== 메인 : 자주 하는 질문 ========== */
    .main-question-area { padding: 16vw 0;}
    .main-question-list {gap:20px;}
    .main-question-list li {padding: 26px;}
    }

/*=========================================== 태블릿용 :1024px ===========================================*/
    @media screen and (max-width: 1024px) {
    /*=========== main===========*/
     /* 해양장 이미지 */
    .ocean-img-area .wrap { flex-direction: column; align-items: flex-start; gap: 40px;}
    .ocean-slide-box .swiper-button-next, .ocean-slide-box .swiper-button-prev {display: none;}
    .ocean-slide-box .swiper-pagination {display: flex; bottom:-8vw; padding:0 5vw; box-sizing: border-box;}
    .ocean-slide-box .swiper-pagination-bullet {width: 100%; border-radius: 0;height: 2px; background-color: #4F6B7A; margin:0 !important;}
    .ocean-img-swiper {width: 90vw; height:90vw;} 
    .ocean-txt-box {width: 100%;}
    .ocean-txt-motion {font-size: 100px;}

    /*  ========== 오시는 길  ========== */
    .location-list {padding-top:20px;}
    .location-list li {padding:30px 0;flex-direction: column; align-items: flex-start; gap:5px; }
    .location-list li .label {font-size: 24px; width:100%; gap:10px;}
    .location-list li p {font-size: 18px; padding-left:46px; }
    .ico-location-addr {width:36px; height:36px;}
    .ico-location-tel { width:36px; height:36px;}
    .ico-location-trans { width:36px; height:36px;}
    .map-box {height:100vw; border-radius: 0;}
    /* ========== 상품소개 ========== */
    .product-list + h4 {padding-top:70px;}
    .product-list {display: grid; grid-template-columns:1fr; gap:30px;}
    .product-list li {padding-top:30px;}
    .product-list li .img-box {border-radius: 16px;}
    .product-list li .tit {font-size: 22px;}

    /* ========== 브랜드스토리 ========== */
    .brand-visual-1 { padding: 17vw 0; height: auto;}
    .brand-visual-1 .wrap {flex-direction: column-reverse; position: static;}
    .brand-visual-1 .left-box {padding-top:50px;}
    .brand-visual-1 .left-box h3 {position: absolute; top:100px; left:50%; transform: translateX(-50%); text-align: center; width: max-content;padding-bottom:6vw;}
    .brand-visual-1 .left-box p { font-size:clamp(18px, 4.3vw, 20px); text-align: center;} 
    .brand-visual-1 .right-box { width:90vw; height: 95vw; margin-top:100px; border-radius: 3vw 20vw 3vw 10vw; }
    .brand-visual-1 .right-box img {width: 100%; height: 100%; object-fit: cover;}

    .brand-visual-3 {padding: 20vw 0 16vw;}
    .brand-logo-area {padding-top:10vw;}
    .brand-logo-top { display: flex;flex-direction: column;align-items: center; gap: 8vw; text-align: center;padding-bottom:10vw;}
    .brand-logo-top img {width: 40vw; height: 40vw;max-width: 240px; max-height: 240px;}
    .brand-logo-top p {font-size:22px;}
    .brand-logo-bottom {background-color: #fff; padding:0 5vw; border-radius: 4vw;}
    .logo-item-box {flex-direction: column; gap: 8vw; padding:10vw 0vw;}
    .logo-item-box .item {display: flex; flex-direction: column; align-items: center; gap:6vw;}
    .logo-item-box .item .img-box {width: 30vw; height: 30vw; max-width: 150px; max-height: 150px;}
    .logo-item-box .item-plus {width: 5vw; height: 5vw;}
    .logo-item-box .item p {font-size: 5vw;}
    .logo-txt-box {padding: 7vw 0; font-size: 18px; text-align: left;}
    }
/* =============================================920px=========================================== */
    @media (max-width: 920px) {
    /*=========== main===========*/   
     /* ========== 메인비 주얼 ========== */
    .main-visual video.pc-video { display: none; }
    .main-visual video.mobile-video { display: block; }
    .main-visual.type-1{height: 60vh; height: 60dvh;}
    .main-visual .visual-txt {top:30%;}
    .main-visual::before {display: none}
    .main-visual .visual-txt .main-tit {font-size: 14vw; color:#fff;}
    .main-visual .visual-txt .main-txt {font-size: 4vw;}
    .active.main-visual .visual-txt .main-tit {transform: scale(0.7);}
    /* ========== 이용절차==========  */
    .step-top-area {padding:6vw 0 72vw;}
    .step-top-area .right-img-box {top:auto; bottom:-33vw; max-width: 93vw; max-height: 93vw;}
    .step-top-area .top-txt-box p{font-size: 16px; padding-top:10px;}
    .step-bottom-area {padding:46vw 0 16vw; } 
    /* ========== 해양장 이미지 ========== */
    .ocean-txt-list {padding-top:14px}
    .ocean-txt-list li {font-size: 16px; line-height: 1.4;}
    .ocean-txt-box span {font-size: 17px; padding-bottom: 10px;}
    .ocean-txt-box .btn-wrap {padding-top:40px;}
    /*==========  풀배너 ==========*/
    .full-banner-area { padding: 120px 0;background: url(../images/pic/main_img_02_m.png) no-repeat center / cover; }
    .full-banner-txt { font-size: 22px; }
    .full-banner-txt span { font-size: 30px; }
    
    /* ========== 메인 : 자주 하는 질문 ========== */
    .main-question-list {grid-template-columns: 1fr ; padding-top:40px;}
    .main-question-list li {cursor: pointer;}
    .main-question-list li .que {font-size: 20px; padding-left:50px;padding-bottom:0px; padding-right: 30px; border-bottom:0;}
    .main-question-list li .que::before { width:32px; height:32px;}
    .main-question-list li .que::after {content:""; position: absolute; right:-10px; top:50%; transform: translateY(-50%); width:40px; height:40px; background: url(../images/ico_down.svg) no-repeat center / 100%;}
    .main-question-list li .answer{display: none; font-size: 17px; padding-left:48px; margin-top:20px }
    .main-question-list li .answer::before {width:32px; height:32px;}
    
    .main-question-list li.active .que { border-bottom: 1px solid #E6EAEC;padding-bottom: 20px;}
    .main-question-list li.active  .que::after {transform:  translateY(-65%) rotate(180deg);}
    .main-question-list li.active .answer {display: block;}

    /* ========== 자주 하는 질문 ========== */
    /* 검색창 */
    .search-wrap {max-width: 100%; margin:0 auto; padding-top:30px;}
    /* 질문리스트 */
    .question-list-wrap {padding-top:40px;}
    .question-list li .que{padding:24px 50px 24px 20px; background: url(../images/ico_down.svg) no-repeat right 20px center / 30px; cursor: pointer;}
    .question-list li .que.open {background: url(../images/ico_up.svg) no-repeat right 20px center / 30px;}
    .question-list li .que p {font-size: 22px; font-weight: 600;line-height: 1.3; padding-left:50px;}
    .question-list li .que P::before { width:36px; height:36px; }
    .question-list li .answer {display: none; padding:30px 20px; margin-bottom:26px; ; }
    .question-list li .answer p {padding-left:50px; font-size: 18px; }
    .question-list li .answer P::before {width:36px; height:36px; }

    /* ========== 브랜드스토리 ========== */
    .brand-visual { background: url(../images/pic/stroy_visual_m.png) no-repeat center / cover;}
    .brand-visual-txt { position: sticky; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 2; color: #fff; text-align: center; padding: 0 20px; animation: visualTxtFade 5s cubic-bezier(.22,.9,.31,1) forwards;}
    .brand-visual.wheel-control .brand-visual-txt { animation: none; opacity: 0; transition: opacity 0.6s ease; }
    .brand-visual.wheel-control .brand-visual-txt.active { opacity: 1; }
    @keyframes visualTxtFade { from { opacity: 0; } to { opacity: 1; } }
    .brand-visual .brand-visual-txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; color: white; text-align: center; z-index: 10; }
    .brand-visual .brand-visual-txt .tit-img {font-size:10vw; }
    .brand-visual .brand-visual-txt p {font-size:5vw; padding-top:3vw;}
    .brand-visual .brand-visual-txt.txt-2 {opacity: 1;}
    .brand-visual .brand-visual-txt.txt-2 .tit-img {font-size:7vw;}
    .brand-visual .brand-visual-txt.txt-2 p {font-size:4.5vw;}

    .brand-visual-2 { background: url(../images/pic/brand_img_02_m.png) no-repeat center / cover; }
    /* .brand-visual-2:after { background:transparent url(../images/pic/brand_img_02_bg_m.svg) no-repeat center / cover;} */
    .brand-visual-2-txt h3 {font-size: 34px;}
    .brand-visual-2-txt p {color:#fff; font-size: 16px; padding-top:20px;}
    .brand-visual-2.active:after { transition: transform 3s 0.5s;}
    .brand-visual-2.active .brand-visual-2-txt { transition: opacity 1s 1s;}
    /* ==========  상품소개 상세 ========== */
    .pro-detail-area { height: auto; border-radius: 5vw;flex-direction: column; }
    .pro-detail-swiper-wrap {width: 100%;height: 60vw; }
    .pro-detail-swiper {width: 100%; height: 100%;}
    .pro-detail-info {width: 100%; padding: 1vw 6vw;}
    .pro-detail-info li {padding:20px 0;}
    .pro-detail-info li .badge {font-size: 16px; padding:8px 16px 10px;}
    .pro-detail-info li p {font-size: 22px;}
    .pro-detail-info li .price span {font-size: 18px;}
    /* tap */
    .tap-area {padding-top:16vw;}
    .tap-list li {font-size:18px; height: 56px; line-height: 54px;  border-radius: 5vw 5vw 0 0;}
    .tap-list li.active {background-color:#4F6B7A; color:#fff;}
    .tap-list.col-2 li {width: 50%;} 
    .tap-list.col-3 li {width: 33.333%;} 
    /* 탬플릿 */
    .tap-panel-wrap {padding-top: 10vw;}
    .tap-panel-wrap .pb20 {padding-bottom:4vw !important;}
    .tap-panel-wrap .pb30 {padding-bottom:6vw !important;}
    .tit-txt-50 {font-size: clamp(28px, 6vw, 50px); padding-bottom:10vw;}
    .tit-txt-42 {font-size: clamp(24px, 5vw, 42px);padding-bottom:8vw;}
    .txt-22 {font-size: clamp(18px, 4vw, 22px);padding-bottom:8vw;}

    .banner-img-box { padding-bottom:10vw;}
    .color-item-box {padding-bottom:10vw; max-width: 100%;gap:10px;}
    .color-item-box .item-1 {font-size: clamp(16px, 3.8vw, 24px); padding:4vw;}
    .color-item-box .item-2 {font-size: clamp(16px, 3.8vw, 24px); padding:4vw;}
    .bg-box-area { padding:8vw 5vw;}
    .step-img-box {gap:8vw;}
    .step-img-box li {width:100%;}
    .step-img-box .txt-box {padding-top:6vw;}
    .step-img-box .txt-box h5 {font-size:clamp(22px, 5vw, 32px);}
    .step-img-box .txt-box p {font-size: clamp(16px, 3.5vw, 22px); padding-top:3vw;}
    /* 안내 */
    .pro-info-box {padding-top:8vw;}
    .pro-info-tit {font-size: clamp(22px, 5vw, 28px); color:#4F6B7A; font-weight: 600; padding-bottom:24px;}
    .pro-info-tit:before {top:3px; width: 30px; height:30px;margin-right:8px;}
    .pro-info-box b {font-size: clamp(18px, 3.5vw, 22px);  padding-left:36px;}
    .pro-info-list {padding-left:36px; padding-top:4vw;}
    .pro-info-list li {position: relative; font-size: clamp(18px, 3.5vw, 22px); padding-bottom:10px; padding-left:12px;}
}   

/* =============================================768px=========================================== */
    @media (max-width: 768px) {
    /* ========== 브랜드스토리 ========== */
    .brand-visual-1 .wrap {align-items: flex-start;}
    .brand-visual-1 .left-box h3 {left:7vw; text-align: left; transform: none;}
    .brand-visual-1 .left-box p {text-align: left;}
    }