@charset "utf-8"; /* 틀 */ .subContainer_video { padding-bottom: 5%; background-color: #111111; } /* section1 */ .section_1 {} .slide1 {} .slide1 .slick-arrow { display: none !important; } .slide1 .visual { position: relative; } .slide1 .txt_wrap { display: flex; gap: 3%; justify-content: center; flex-wrap: wrap; flex-direction: column; position: absolute; top: 96px; left: 5%; z-index: 1; width: 90%; height: 57%; } .slide1 .keyword_tit { display: flex; gap: 0.5vw; align-items: center; font-size: calc(12px + 2.5vw); font-weight: 600; color: #fff; } .slide1 .keyword_tit_sub { font-size: calc(12px + 0.4vw); font-weight: 100; color: #fff; } .slide1 .keyword_list { display: flex; gap: 0.5vw; } .slide1 .keyword_list li { flex-shrink: 0; } .slide1 .keyword_list li a::before { display: inline-block; margin-right: 0.3vw; font-size: calc(12px + 0.2vw); font-weight: 100; color: #fff; content: '#'; } .slide1 .keyword_list li a { display: flex; align-items: center; padding: 0.3vw 0.8vw; border: 1px solid rgb(255 255 255 / 40%); font-size: calc(11px + 0.1vw); font-weight: 300; color: #fff; border-radius: 2px; } .slide1 .btn-group { display: flex; margin-top: 2%; } .slide1 .btnPlay { display: flex; align-items: center; padding: 1.5% 2%; background-color: #fff; font-size: calc(12px + 0.2vw); line-height: 1.5rem; color: #111; border-radius: 0.5rem; } .slide1 .btnPlay::before { display: inline-block; margin-right: 8px; width: 10px; height: 10px; background-image: url("https://visitbusan.net/archive/images/icon/ico-play.svg"); background-repeat: no-repeat; background-position: center center; background-size: 10px; content: ''; } .slide1 .btnPlay.line { border: 1px solid #fff; background-color: unset; color: #fff; } .slide1 .btnPlay.line::before { background-image: url("https://visitbusan.net/archive/images/icon/ico-play-line-white.svg"); } .slide1 .img_wrap { overflow: hidden; max-height: 1080px; } .slide1 .img_wrap a { position: relative; } .slide1 .img_wrap::after { display: block; padding-top: 10%; position: absolute; bottom: 0; width: 100%; background: linear-gradient(0deg, rgba(17, 17, 17, 1) 0%, rgba(17, 17, 17, 0) 100%); content: ''; } .slide1 .img_wrap img { width: 100%; filter: brightness(0.5); } .slide1_title_group { display: flex; align-items: center; } .slide1_title { width: 70%; } .slide1_title .tit { padding-right: 15px; overflow: hidden; font-size: calc(12px + 0.7vw); color: #000; white-space: nowrap; text-overflow: ellipsis; } .btn_area_slide1_wrap { display: flex; align-items: center; justify-content: flex-end; margin-top: -18%; padding: 0 5%; position: relative; text-align: right; column-gap: 2%; } .btn_area_slide1 { display: inline-flex; gap: 1vw; flex-shrink: 0; padding: 10px; background-color: #fff; border-radius: 10px; } .btn_area_slide1>* { flex-shrink: 0; } .btn_area_slide1 .num { font-size: calc(12px + 0.4vw); font-weight: 300; color: #666; } .btn_area_slide1 .num.active { font-weight: 500; color: #000; } .btn_area_slide1 .dots_slide1 { flex-grow: 1; } .btn_area_slide1 .dots_slide1 ul { display: flex; position: unset; } .btn_area_slide1 .dots_slide1 ul li { flex-grow: 1; margin: unset; } .btn_area_slide1 .dots_slide1 ul li button { padding: 5px 0; width: 100%; } .btn_area_slide1 .dots_slide1 ul li button::before { display: block; position: unset; width: 100%; height: 3px; background-color: #E5E5E5; content: ''; opacity: unset; } .btn_area_slide1 .btn_play { width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/main_img/ico-play.png"); background-repeat: no-repeat; background-position: center center; } .btn_area_slide1 .btn_play.on { background-image: url("https://visitbusan.net/archive/images/main_img/ico-stop.png"); } .btn_area_slide1 .slick-arrow {} .btn_area_slide1 .prev {} .btn_area_slide1 .next {} .btn_area_slide1 .btn_more { display: flex; } .btn_area_slide1 .btn_more .link { display: flex; gap: 0.5vw; align-items: center; font-size: calc(12px + 0.3vw); font-weight: 300; color: #fff; } .btn_area_slide1 .btn_more .link::after { display: inline-block; width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/icon/ico-more.svg"); background-repeat: no-repeat; background-position: center center; content: ''; } .slide_1_dots { display: inline-flex; flex-shrink: 1; width: 100%; } .slide_1_dots ul.slick-dots { display: flex !important; flex-wrap: nowrap; position: unset; } .slide_1_dots .slick-dots li { margin: unset; width: 100%; } .slide_1_dots .slick-dots button { padding: 5px 0; width: 100%; } .slide_1_dots .slick-dots button::before { display: block; position: unset; width: 100%; height: 3px; background-color: #fff; color: #fff; content: ''; opacity: .25; } .slide_1_dots .slick-dots .slick-active button::before { color: #fff; opacity: .75; } @media all and (max-width: 1200px) { .slide1 .txt_wrap { gap: 2%; top: 66px; height: 80%; } } @media all and (max-width: 900px) { .slide1 .keyword_tit_sub { display: none; } } @media all and (max-width: 600px) { .slide1 .slick-list { padding-bottom: 13%; } .slide1 .txt_wrap { justify-content: end; height: 80%; } .slide1 .btnPlay { padding: 1.5% 4%; } .slide1 .img_wrap img { width: auto; height: 100vw; object-fit: cover; } } /* section2 */ .section_2 { margin-top: 2%; padding: 0 5%; position: relative; } .slide2 .slick-list { margin: 0 -10px; } .slide2 .slick-slide { padding: 0 10px; } .slide2 .txt_wrap { display: flex; justify-content: center; margin-top: 1vw; } .slide2 .keyword_tit { font-size: calc(12px + 0.2vw); font-weight: 300; color: #fff; } .slide2 .img_wrap { padding-top: 56%; overflow: hidden; position: relative; border-radius: 20px; } .slide2 .img_wrap a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .slide2 .img_wrap img { width: 100%; height: 100%; object-fit: cover; } .slide2_title_group { display: flex; margin-bottom: 1.5%; } .slide2_title_group>.group { display: flex; align-items: center; justify-content: space-between; width: 100%; } .slide2_title_sub { font-size: calc(12px + 0.3vw); font-weight: 300; color: #666; } .slide2_title .tit { font-size: calc(12px + 1.0vw); font-weight: 600; color: #fff; } .btn_area_slide2 { display: flex; gap: 1vw; justify-content: space-between; } .btn_area_slide2 .slick-arrow { position: absolute; top: 45%; z-index: 1; width: 50px; height: 50px; background-color: #fff; border-radius: 50px; } .btn_area_slide2 .prev { left: 3.5%; } .btn_area_slide2 .next { right: 3.5%; } .btn_area_slide2 .btn_more { display: flex; } .btn_area_slide2 .btn_more .link { display: flex; gap: 0.5vw; align-items: center; font-size: calc(12px + 0.3vw); font-weight: 300; color: #fff; } .btn_area_slide2 .btn_more .link::after { display: inline-block; width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/icon/ico-more.svg"); background-repeat: no-repeat; background-position: center center; content: ''; } @media all and (max-width: 1200px) { .section_2 { margin-top: 3%; } .btn_area_slide2 .slick-arrow { width: 45px; height: 45px; } .btn_area_slide2 .prev { left: 2.5%; } .btn_area_slide2 .next { right: 2.5%; } } @media all and (max-width: 900px) { .section_2 { margin-top: 5%; } } @media all and (max-width: 600px) { .section_2 { margin-top: 8%; } .slide2 .slick-list { margin: 0 -5px; } .slide2 .slick-slide { margin: 0 -5px; } .btn_area_slide2 .slick-arrow { width: 35px; height: 35px; } .btn_area_slide2 .prev { left: 1%; } .btn_area_slide2 .next { right: 1%; } .slide2 .img_wrap { border-radius: 0px; } } /* section3 */ .section_3 { margin-top: 3%; padding: 0 5%; position: relative; } .slide3 .slick-list { margin: 0 -10px; } .slide3 .slick-slide { padding: 0 10px; } .slide3 .txt_wrap { display: flex; justify-content: center; margin-top: 1vw; } .slide3 .keyword_tit { font-size: calc(12px + 0.2vw); font-weight: 300; color: #fff; } .slide3 .img_wrap { padding-top: 56%; overflow: hidden; position: relative; border-radius: 20px; } .slide3 .img_wrap a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .slide3 .img_wrap img { width: 100%; height: 100%; object-fit: cover; } .slide3_title_group { display: flex; margin-bottom: 1.5%; } .slide3_title_group>.group { display: flex; align-items: center; justify-content: space-between; width: 100%; } .slide3_title_sub { font-size: calc(12px + 0.3vw); font-weight: 300; color: #666; } .slide3_title .tit { font-size: calc(12px + 1.0vw); font-weight: 600; color: #fff; } .btn_area_slide3 { display: flex; gap: 1vw; justify-content: space-between; } .btn_area_slide3 .slick-arrow { position: absolute; top: 45%; z-index: 1; width: 50px; height: 50px; background-color: #fff; border-radius: 50px; } .btn_area_slide3 .prev { left: 3.5%; } .btn_area_slide3 .next { right: 3.5%; } .btn_area_slide3 .btn_more { display: flex; } .btn_area_slide3 .btn_more .link { display: flex; gap: 0.5vw; align-items: center; font-size: calc(12px + 0.3vw); font-weight: 300; color: #fff; } .btn_area_slide3 .btn_more .link::after { display: inline-block; width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/icon/ico-more.svg"); background-repeat: no-repeat; background-position: center center; content: ''; } @media all and (max-width: 1200px) { .btn_area_slide3 .slick-arrow { width: 45px; height: 45px; } .btn_area_slide3 .prev { left: 2.5%; } .btn_area_slide3 .next { right: 2.5%; } } @media all and (max-width: 900px) {} @media all and (max-width: 600px) { .slide3 .slick-list { margin: 0 -5px; } .slide3 .slick-slide { margin: 0 -5px; } .btn_area_slide3 .slick-arrow { width: 35px; height: 35px; } .btn_area_slide3 .prev { left: 1%; } .btn_area_slide3 .next { right: 1%; } .slide3 .img_wrap { border-radius: 0px; } } /* section4 */ .section_4 { margin-top: 3%; padding: 0 5%; position: relative; } .slide4_title_group { display: flex; margin-bottom: 1.5%; } .slide4_title_group>.group { display: flex; align-items: center; justify-content: space-between; width: 100%; } .slide4_title_sub { font-size: calc(12px + 0.3vw); font-weight: 300; color: #666; } .slide4_title .tit { font-size: calc(12px + 1.0vw); font-weight: 600; color: #fff; } .btn_area_slide4 { display: flex; gap: 1vw; justify-content: space-between; } .btn_area_slide4 button { position: absolute; top: 52%; z-index: 2; width: 50px; height: 50px; background-color: #fff; border-radius: 50px; } .btn_area_slide4 .prev { left: 3.5%; } .btn_area_slide4 .next { right: 3.5%; } .btn_area_slide4 .btn_more { display: flex; } .btn_area_slide4 .btn_more .link { display: flex; gap: 0.5vw; align-items: center; font-size: calc(12px + 0.3vw); font-weight: 300; color: #fff; } .btn_area_slide4 .btn_more .link::after { display: inline-block; width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/icon/ico-more.svg"); background-repeat: no-repeat; background-position: center center; content: ''; } .btn_area_slide4 .btn_more { display: flex; } .btn_area_slide4 .btn_more .link { display: flex; gap: 0.5vw; align-items: center; font-size: calc(12px + 0.3vw); font-weight: 300; color: #fff; } .btn_area_slide4 .btn_more .link::after { display: inline-block; width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/icon/ico-more.svg"); background-repeat: no-repeat; background-position: center center; content: ''; } .slide4 .inner { margin: unset; width: unset; } .slide4 .best-top { margin-bottom: 2%; } .slide4 .tab { overflow-x: scroll; } .slide4 .tab::-webkit-scrollbar { display: none; } .slide4 .tab ul { display: flex; gap: 5px; } .slide4 .tab ul li { flex-shrink: 0; } .slide4 .tab ul li a { display: block; padding: 0 20px; border: rgba(225, 225, 225, 0.07); background-color: rgba(225, 225, 225, 0.07); font-size: 1.4rem; font-weight: 300; line-height: 30px; color: #fff; border-radius: 50px; } .slide4 .tab ul li a::before { display: inline-block; margin-right: 4px; content: '#'; } .slide4 .tab ul li.active a { border: none; position: relative; background-color: #fff; color: #111; } .slide4 .best-swiper .swiper-slide .img-box { padding-top: 56%; overflow: hidden; position: relative; border-radius: 20px; } .slide4 .best-swiper .swiper-slide .img-box a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .slide4 .best-swiper .swiper-slide .img-box img { width: 100%; height: 100%; object-fit: cover; } .slide4 .best-swiper .txt-box { display: flex; justify-content: center; margin-top: 1vw; } .slide4 .best-swiper .keyword_tit { font-size: calc(12px + 0.2vw); font-weight: 300; color: #fff; } .slide4 .best-swiper .txt-box .price-box .prev-price::after { display: block; position: absolute; top: 50%; left: 50%; width: 110%; height: 1px; background-color: #888; content: ""; transform: translate3d(-50%, -50%, 0); } @media all and (max-width:1200px) { .slide4 .best-top { margin-bottom: 2.5%; } .btn_area_slide4 button { width: 45px; height: 45px; } .btn_area_slide4 .prev { left: 2.5%; } .btn_area_slide4 .next { right: 2.5%; } } @media all and (max-width:900px) { .slide4 .best-top { margin-bottom: 3%; } } @media all and (max-width:600px) { .slide4 .best-top { margin-bottom: 4%; } .btn_area_slide4 button { width: 35px; height: 35px; } .btn_area_slide4 .prev { left: 1%; } .btn_area_slide4 .next { right: 1%; } .slide4 .tab ul li a { padding: 0 10px; } .slide4 .best-swiper .swiper-slide .img-box { border-radius: 0px; } } /* section5 */ .section_5 { margin-top: 3%; padding: 0 5%; position: relative; } .slide5_title_group { display: flex; margin-bottom: 1.5%; } .slide5_title_group>.group { display: flex; align-items: center; justify-content: space-between; width: 100%; } .slide5_title_sub { font-size: calc(12px + 0.3vw); font-weight: 300; color: #666; } .slide5_title .tit { font-size: calc(12px + 1.0vw); font-weight: 600; color: #fff; } .btn_area_slide5 { display: flex; gap: 1vw; justify-content: space-between; } .btn_area_slide5 button { position: absolute; top: 52%; z-index: 2; width: 50px; height: 50px; background-color: #fff; border-radius: 50px; } .btn_area_slide5 .prev { left: 3.5%; } .btn_area_slide5 .next { right: 3.5%; } .btn_area_slide5 .btn_more { display: flex; } .btn_area_slide5 .btn_more .link { display: flex; gap: 0.5vw; align-items: center; font-size: calc(12px + 0.3vw); font-weight: 300; color: #fff; } .btn_area_slide5 .btn_more .link::after { display: inline-block; width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/icon/ico-more.svg"); background-repeat: no-repeat; background-position: center center; content: ''; } .btn_area_slide5 .btn_more { display: flex; } .btn_area_slide5 .btn_more .link { display: flex; gap: 0.5vw; align-items: center; font-size: calc(12px + 0.3vw); font-weight: 300; color: #fff; } .btn_area_slide5 .btn_more .link::after { display: inline-block; width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/icon/ico-more.svg"); background-repeat: no-repeat; background-position: center center; content: ''; } .slide5 .inner { margin: unset; position: relative; width: unset; } .slide5 .best-top { margin-bottom: 2%; } .slide5 .tab { overflow-x: scroll; } .slide5 .tab::-webkit-scrollbar { display: none; } .slide5 .tab ul { display: flex; gap: 5px; } .slide5 .tab ul li { flex-shrink: 0; } .slide5 .tab ul li a { display: block; padding: 0 20px; border: rgba(225, 225, 225, 0.07); background-color: rgba(225, 225, 225, 0.07); font-size: 1.4rem; font-weight: 300; line-height: 30px; color: #fff; border-radius: 50px; } .slide5 .tab ul li a::before { display: inline-block; margin-right: 4px; content: '#'; } .slide5 .tab ul li.active a { border: none; position: relative; background-color: #fff; color: #111; } .slide5 .best-swiper .swiper-slide .img-box { padding-top: 56%; overflow: hidden; position: relative; border-radius: 20px; } .slide5 .best-swiper .swiper-slide .img-box a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .slide5 .best-swiper .swiper-slide .img-box img { width: 100%; height: 100%; object-fit: cover; } .slide5 .best-swiper .txt-box { display: flex; justify-content: center; margin-top: 1vw; } .slide5 .best-swiper .keyword_tit { font-size: calc(12px + 0.2vw); font-weight: 300; color: #fff; } .slide5 .best-swiper .txt-box .price-box .prev-price::after { display: block; position: absolute; top: 50%; left: 50%; width: 110%; height: 1px; background-color: #888; content: ""; transform: translate3d(-50%, -50%, 0); } @media all and (max-width:1200px) { .slide5 .best-top { margin-bottom: 2.5%; } .btn_area_slide5 button { width: 45px; height: 45px; } .btn_area_slide5 .prev { left: 2.5%; } .btn_area_slide5 .next { right: 2.5%; } } @media all and (max-width:900px) { .slide5 .best-top { margin-bottom: 3%; } } @media all and (max-width:600px) { .slide4 .best-top { margin-bottom: 4%; } .btn_area_slide5 button { width: 35px; height: 35px; } .btn_area_slide5 .prev { left: 1%; } .btn_area_slide5 .next { right: 1%; } .slide5 .tab ul li a { padding: 0 10px; } .slide5 .best-swiper .swiper-slide .img-box { border-radius: 0px; } } /* 공통 */ @media all and (max-width: 1200px) { .section_3, .section_4, .section_5 { margin-top: 2%; padding-top: 2%; border-top: 1px solid rgba(225, 225, 225, 0.07); } } @media all and (max-width: 900px) { .section_3, .section_4, .section_5 { margin-top: 3%; padding-top: 3%; border-top: 1px solid rgba(225, 225, 225, 0.07); } } @media all and (max-width: 600px) { .section_3, .section_4, .section_5 { margin-top: 4%; padding-top: 4%; border-top: 1px solid rgba(225, 225, 225, 0.07); } }