.mainContentWrap {width:100%; max-width:1500px; margin:0 auto;}

.topSpace {height:90px;}






/*
    ******************************* 메인 비주얼 *******************************
*/
.mainVisual {position:relative;}
.mainVisual .swiper-slide {position:relative; height:790px;}
.mainVisual .swiper-slide .visualImg {
    height: 100%;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 130%;
    transition: all 3s cubic-bezier(0, 0.55, 0.45, 1);
}

.mainVisual .swiper-slide:nth-of-type(1) .visualImg {background-image:url("/app/layout/web/images/main/mainVisual1.jpg");}
.mainVisual .swiper-slide:nth-of-type(2) .visualImg {background-image:url("/app/layout/web/images/main/mainVisual2.jpg");}
.mainVisual .swiper-slide:nth-of-type(3) .visualImg {background-image:url("/app/layout/web/images/main/mainVisual3.jpg");}
.mainVisual .swiper-slide:nth-of-type(4) .visualImg {background-image:url("/app/layout/web/images/main/mainVisual4.jpg");}

.mainVisual .swiper-slide .visualImg_m {
    display: none;
    width: 100%;
    overflow: hidden;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: 115% auto;
    transition: all 3s cubic-bezier(0, 0.55, 0.45, 1);
}
.mainVisual .swiper-slide .visualImg_m > img{width:100%;}
.mainVisual .swiper-slide:nth-of-type(1) .visualImg_m {background-image:url("/app/layout/web/images/main/mainVisual_m1.jpg");}
.mainVisual .swiper-slide:nth-of-type(2) .visualImg_m {background-image:url("/app/layout/web/images/main/mainVisual_m2.jpg");}
.mainVisual .swiper-slide:nth-of-type(3) .visualImg_m {background-image:url("/app/layout/web/images/main/mainVisual_m3.jpg");}
.mainVisual .swiper-slide:nth-of-type(4) .visualImg_m {background-image:url("/app/layout/web/images/main/mainVisual_m4.jpg");}

.mainVisual .visualText {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;}
.mainVisual .visualText .mainText {font-size:75px; color:#dda478; font-family:TheSeasonsR; overflow: hidden;}
.mainVisual .visualText .mainText > span {position:relative; top:-100px; font-family:TheSeasonsR; transition:top 1s ease-out;}
.mainVisual .visualText .subText {font-size:25px; color:rgba(255,255,255,0.5); font-family:Pretendard-Light; overflow: hidden;}
.mainVisual .visualText .subText > span {position:relative; top:-50px; font-family:Pretendard-Light; transition:top 0.6s ease-out;}

.mainVisual .swiper-slide.swiper-slide-active .visualImg {background-size:auto 100%; background-position:center bottom; transition:all 3s cubic-bezier(0, 0.55, 0.45, 1);}
.mainVisual .swiper-slide.swiper-slide-active .visualImg_m {background-size:100% auto; background-position:center -70px; transition:all 3s cubic-bezier(0, 0.55, 0.45, 1);}
.mainVisual .swiper-slide.swiper-slide-active .visualText .mainText > span {top:0; transition:top 1s ease-out; transition-delay: 0.3s;}
.mainVisual .swiper-slide.swiper-slide-active .visualText .subText > span {top:0; transition:top 0.8s ease-out; transition-delay: 0.8s;}

.mainVisual .visualPagination {display:flex; align-items: center; gap:15px; position:absolute; bottom:55px; left:50%; z-index: 10; transform:translateX(-50%);}
.mainVisual .visualPagination .pageNum {display:flex; align-items: center; font-size:18px; color:#ffffff; font-family:Pretendard-Medium;}
.mainVisual .visualPagination .pageNum .num {cursor:pointer;}
.mainVisual .visualPagination .pageNum .progressBar {/*display:none;*/ width:0; height:3px; margin-left:0; background-color:#ffffff;}
.mainVisual .visualPagination .pageNum .progressBar > span {display:block; height:3px; width:0; background-color:#dda478;}

.mainVisual .visualPagination .pageNum.on .progressBar {display:block; width:80px; margin-left:15px;}
.mainVisual .visualPagination .pageNum.on .progressBar > span {width:100%; transition:all 4s linear;}




/*
    ******************************* 바노바기 이벤트 *******************************
*/
.bnbgMain .bnbgEvent {position:relative; padding-top:120px; padding-bottom:120px;}
.bnbgMain .bnbgEvent video {position:absolute; left:0; bottom:0; z-index:-1; width:100%; }
.bnbgMain .bnbgEvent .mainContentWrap {position:relative;}

.bnbgMain .bnbgEvent .slideArea {position:relative;}
.bnbgMain .bnbgEvent .slideArea .moveArrows {position:absolute; right:0; top:-90px; display:flex; justify-content: center; align-items: center; gap:33px;}
.bnbgMain .bnbgEvent .slideArea .moveArrows .arrow {cursor: pointer;}
.bnbgMain .bnbgEvent .slideArea .swiper-slide {position:relative;}
.bnbgMain .bnbgEvent .slideArea .swiper-slide .thumb {border:solid 1px #f0f0f0; box-sizing: border-box;}
.bnbgMain .bnbgEvent .slideArea .swiper-slide .thumb img {display:block; width:100%; filter:grayscale(100%); transition:filter 0.3s linear;}
.bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText {display:flex; flex-direction: column; align-items: flex-start; gap:10px; position:absolute; left:25px; bottom:30px; line-height:1; pointer-events: none;}
.bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .decoText {font-size:15px; color:rgba(255,255,255,0.5); font-family:Pretendard-Light;}
.bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .pdtName {font-size:35px; color:#ffffff; font-family:Pretendard-Regular;}
.bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .price {font-size:50px; color:#dda478; font-family:Pretendard-Bold;}
.bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .price .mark {font-size:30px; font-family:NotoSansM;}
.bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .price .tilde {font-family:Pretendard-Light;}

.bnbgMain .bnbgEvent .slideArea .swiper-slide .thumb:hover img,
.bnbgMain .bnbgEvent .slideArea .swiper-slide .thumb.on img {filter:grayscale(0%); transition:filter 0.3s linear;}

.bnbgMain .bnbgEvent .slideArea .slideMove {display:none; position:absolute; top:0; left:0; z-index:10; width:13vw; height:100%; background-color:rgba(0,0,0,0.25);}
.bnbgMain .bnbgEvent .slideArea .slideMove.slideNext {right:0; left:auto;}




    /*
        ******************************* 검색 *******************************
    */
.bnbgMain .bnbgSearch {display:flex; align-items: center; width:100%; height:260px;}

.bnbgMain .bnbgSearch .titleArea {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 44%;
    height:100%;
    padding-right: 20px;
    box-sizing: border-box;
    background-image: url("/app/layout/web/images/main/searchAreaBg.jpg");
    background-repeat: no-repeat;
    background-position:center center;
    background-size:cover;
}
.bnbgMain .bnbgSearch .titleArea .innerWrap {display: flex; flex-direction: column; gap: 15px; align-items: flex-end;}
.bnbgMain .bnbgSearch .titleArea .innerWrap .text {font-size:25px; color:#ffffff; font-family:Pretendard-Light; padding-right:45px; box-sizing: border-box;}
.bnbgMain .bnbgSearch .titleArea .innerWrap .text > span {color:#f3dfcf; font-family:Pretendard-SemiBold;}

.bnbgMain .bnbgSearch .searchArea {display:flex; align-items: center; position:relative; width:56%; height:100%; padding:0 55px; box-sizing: border-box; overflow: hidden; background-color:#f5f5f5;}
.bnbgMain .bnbgSearch .searchArea .rotateLogo {display:flex; justify-content: center; align-items: center; position:absolute; top:50%; left:520px; transform:translateY(-50%); width:440px; height:440px;}
.bnbgMain .bnbgSearch .searchArea .rotateLogo .logo {animation: logoSpin 10s linear infinite;}
.bnbgMain .bnbgSearch .searchArea .rotateLogo .circle {position:absolute; top:0; left:0; width:100%; height:100%; animation: logoSpin 10s linear infinite;}
@keyframes logoSpin {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}
.bnbgMain .bnbgSearch .searchArea .searchBar {position:relative; z-index: 1;/*position: absolute; top: 50%; left: 60px; transform: translateY(-50%);*/ width:100%;}
.bnbgMain .bnbgSearch .searchArea .searchBar .bar {
    display: flex;
    align-items: center;
    max-width: 690px;
    width:100%;
    height: 60px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
    border-radius:5px;
    margin-top:50px;
    background-color: #ffffff;
}
.bnbgMain .bnbgSearch .searchArea .searchBar .iconCell {width:85px; text-align:center; font-size:0; border-right:solid 1px #e0e0e0;}
.bnbgMain .bnbgSearch .searchArea .searchBar .inputCell {flex:1; height:100%; padding:0 20px; box-sizing: border-box;}
.bnbgMain .bnbgSearch .searchArea .searchBar .inputCell input {width:100%; height:100%; font-size:20px; color:#333333; font-family:Pretendard-Light;}
.bnbgMain .bnbgSearch .searchArea .searchBar .inputCell input::placeholder {color:#cccccc;}
.bnbgMain .bnbgSearch .searchArea .searchBar .hash {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* position:absolute; bottom:-50px; left:50%; transform:translateX(-50%);*/
    width: 100%;
    max-width: 690px;
    margin-top:25px;
}

.bnbgMain .bnbgSearch .searchArea .searchBar .hash a {font-size:18px; color:#909090; font-family:Pretendard-Light;}





/*
    ******************************* 바노바기 스토리 *******************************
*/
.bnbgMain .bnbgStory {padding-top:120px; padding-bottom:120px;}

.bnbgMain .bnbgStory .imageArea {display:flex; align-items: center; justify-content: center; gap:30px; height:500px; margin-bottom:60px;}
.bnbgMain .bnbgStory .imageArea > div {flex:1; height:100%; overflow:hidden; cursor:pointer;}
.bnbgMain .bnbgStory .imageArea > div:first-child {width:54%; flex:none; border-radius:0 0 0 30px;}
.bnbgMain .bnbgStory .imageArea > div:last-child {border-radius:0 30px 0 0;}
.bnbgMain .bnbgStory .imageArea > div img {display:block; width:100%; height:100%; filter:grayscale(100%); transition:filter 0.3s linear; object-fit:cover;}
.bnbgMain .bnbgStory .imageArea > div:hover img,
.bnbgMain .bnbgStory .imageArea > div.on img {filter:grayscale(0); transition:filter 0.3s linear;}

.bnbgMain .bnbgStory .textArea {display:flex; justify-content: space-between; align-items: center; padding:0 30px; box-sizing: border-box;}
.bnbgMain .bnbgStory .textArea .textCell {font-size:20px; color:#909090; font-family:Pretendard-Light; line-height:1.4;}
.bnbgMain .bnbgStory .textArea .textCell .color1 {color:#dda478; font-family:Pretendard-Medium;}
.bnbgMain .bnbgStory .textArea .textCell .color2 {color:#303030; font-family:Pretendard-Medium;}


/*
    *** 스토리 모바일 스와이퍼
*/
.bnbgMain .bnbgStory .imageArea_m {display:none; border-radius:0 15px 0 15px; overflow: hidden; margin-bottom:45px;}
.bnbgMain .bnbgStory .imageArea_m img {width:100%;}







@media (max-width: 1500px) {

    .mainContentWrap {padding-left:15px; padding-right:15px; box-sizing: border-box;}

}



@media (max-width: 1280px) {

    /*
        **************************************** 메인 공통요소 *******************************************
    */

    /*
        *** 섹션 타이틀
    */
    .cl_bnbgMainSectionTitle {gap:15px; margin-bottom:55px;}
    .cl_bnbgMainSectionTitle .decoText {font-size:16px;}
    .cl_bnbgMainSectionTitle .title {font-size:50px;}
    .cl_bnbgMainSectionTitle .desc {font-size:16px;}



    /*
        *** 화살표 버튼
    */
    .cl_arrowButton {
        height: 40px;
        font-size: 18px;
    }
    .cl_arrowButton:after {content:""; width:8px; height:16px; margin-left:25px;}




    /*
        ******************************* 검색 *******************************
    */
    .bnbgMain .bnbgSearch {height:200px;}

    .bnbgMain .bnbgSearch .titleArea {
        padding-right: 10px;
    }
    .bnbgMain .bnbgSearch .titleArea .innerWrap > img {height:13px;}
    .bnbgMain .bnbgSearch .titleArea .innerWrap .text {font-size:18px; padding-right:30px;}

    .bnbgMain .bnbgSearch .searchArea {padding:0 30px;}
    .bnbgMain .bnbgSearch .searchArea .rotateLogo {left:60%; width:340px; height:340px;}
    .bnbgMain .bnbgSearch .searchArea .rotateLogo .logo {width:45%}

    .bnbgMain .bnbgSearch .searchArea .searchBar .bar {
        height: 50px;
        margin-top:40px;
    }
    .bnbgMain .bnbgSearch .searchArea .searchBar .iconCell {width:70px;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .iconCell > img {width:25px;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .inputCell {padding:0 15px;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .inputCell input {font-size:18px;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .hash {
        margin-top:20px;
    }

    .bnbgMain .bnbgSearch .searchArea .searchBar .hash a {font-size:16px;}





    /*
        ******************************* 바노바기 스토리 *******************************
    */
    .bnbgMain .bnbgStory .imageArea {gap:25px; height:450px; margin-bottom:60px;}

    .bnbgMain .bnbgStory .textArea {padding:0 25px;}
    .bnbgMain .bnbgStory .textArea .textCell {font-size:17px; line-height:1.4;}


}





@media (max-width: 1024px) {
    /*
        ******************************* 바노바기 이벤트 *******************************
    */
    .bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText {gap:10px; left:15px; bottom:20px;}
    .bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .decoText {font-size:13px;}
    .bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .pdtName {font-size:26px;}
    .bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .price {font-size:32px;}
    .bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .price .mark {font-size:24px;}



    /*
        ******************************* 검색 *******************************
    */
    .bnbgMain .bnbgSearch {flex-direction: column; width:100%; height:auto;}

    .bnbgMain .bnbgSearch .titleArea {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height:125px;
        padding-right: 0;
    }
    .bnbgMain .bnbgSearch .titleArea .innerWrap {gap: 10px; align-items: center;}
    .bnbgMain .bnbgSearch .titleArea .innerWrap .text {font-size:15px; padding-right:0;}
    .bnbgMain .bnbgSearch .titleArea .innerWrap .decoTextImg {width:320px; margin-left:12px;}

    .bnbgMain .bnbgSearch .searchArea {width:100%; height:150px; overflow: hidden;}
    .bnbgMain .bnbgSearch .searchArea .rotateLogo {top:50%; left:auto; right:-80px; width:220px; height:220px;}
    .bnbgMain .bnbgSearch .searchArea .rotateLogo .logo {width:90px;}
    .bnbgMain .bnbgSearch .searchArea .searchBar {width:100%; padding-left:15px; padding-right:15px; box-sizing: border-box;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .bar {width: 100%; height: 45px; max-width:none;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .iconCell {width:45px;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .iconCell img {width:20px; padding:5px 0;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .inputCell {padding:0 10px;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .inputCell input {font-size:14px;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .hash {gap:10px; position:static; transform:translateX(0); max-width:none; margin-top:18px;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .hash a {font-size:14px;}
}




@media (max-width: 768px) {
    .topSpace {height:52px;}



    /*
        **************************************** 메인 공통요소 *******************************************
    */
    .cl_bnbgMainSectionTitle {margin-bottom:40px;}
    .cl_bnbgMainSectionTitle .decoText {font-size:13px;}
    .cl_bnbgMainSectionTitle .title {font-size:35px;}
    .cl_bnbgMainSectionTitle .desc {font-size:13px;}


    /*
        *** 화살표 버튼
    */
    .cl_arrowButton {
        height: 30px;
        font-size: 14px;
        padding:0 15px;
    }
    .cl_arrowButton:after {content:""; width:6px; height:12px; margin-left:17px;}



    /*
        ******************************* 메인 비주얼 *******************************
    */
    .mainVisual {position:relative;}
    .mainVisual .swiper-slide {height:auto;}

    .mainVisual .swiper-slide .visualImg {display:none;}
    .mainVisual .swiper-slide .visualImg_m {display:block;}
    .mainVisual .swiper-slide .visualImg_m img {width:100%;}

    .mainVisual .visualText {width:100%;}
    .mainVisual .visualText .mainText {font-size:45px;}
    .mainVisual .visualText .subText {font-size:15px;}

    .mainVisual .visualPagination {gap:10px; bottom:30px;}
    .mainVisual .visualPagination .pageNum {font-size:13px;}
    .mainVisual .visualPagination .pageNum .progressBar {height:2px;}
    .mainVisual .visualPagination .pageNum .progressBar > span {height:2px;}

    .mainVisual .visualPagination .pageNum.on .progressBar {width:35px; margin-left:10px;}




    /*
        ******************************* 바노바기 이벤트 *******************************
    */
    .bnbgMain .bnbgEvent {padding-top:60px; padding-bottom:110px;}
    .bnbgMain .bnbgEvent video {display:none;}
    .bnbgMain .bnbgEvent .mainContentWrap:nth-of-type(2) {padding-left:0; padding-right:0;}

    .bnbgMain .bnbgEvent .slideArea .moveArrows {right:auto; left:50%; top:auto; bottom:-50px; transform:translateX(-50%); gap:20px;}
    .bnbgMain .bnbgEvent .slideArea .moveArrows > img {height:13px;}
    .bnbgMain .bnbgEvent .slideArea .moveArrows .arrow img {height:20px;}
    .bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText {gap:10px; left:15px; bottom:15px;}
    .bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .decoText {font-size:12px;}
    .bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .pdtName {font-size:23px;}
    .bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .price {font-size:30px;}
    .bnbgMain .bnbgEvent .slideArea .swiper-slide .infoText .price .mark {font-size:18px;}

    .bnbgMain .bnbgEvent .slideArea .slideMove {display:block;}



    /*
        ******************************* 검색 *******************************
    */
    .bnbgMain .bnbgSearch .searchArea .searchBar .hash {gap: 0; justify-content: space-between;}
    .bnbgMain .bnbgSearch .searchArea .searchBar .hash a {font-size:12px;}
    .bnbgMain .bnbgSearch .searchArea {padding:0px;}


    /*
        ******************************* 바노바기 스토리 *******************************
    */
    .bnbgMain .bnbgStory {padding-top:60px; padding-bottom:60px;}

    .bnbgMain .bnbgStory .imageArea {display:none;}

    .bnbgMain .bnbgStory .textArea {flex-direction: column; gap:25px; padding:0;}
    .bnbgMain .bnbgStory .textArea .textCell {font-size:13px;}

    .bnbgMain .bnbgStory .imageArea_m {display:block;}

}