@charset "utf-8"; /* 틀 */ .subContainer_img { margin-top: 96px; } @media all and (max-width: 1200px) { .subContainer_img { margin-top: 66px; } } @media all and (max-width: 600px) {} /* 서브 비쥬얼 */ .section_1 { padding: 0 5%; } .slide1 { margin-bottom: 1.5% !important; } .slide1 .visual { position: relative; } .slide1 .txt_wrap { display: flex; gap: 2vw; flex-wrap: wrap; position: absolute; bottom: 4%; left: 2%; z-index: 1; } .slide1 .keyword_tit { display: flex; gap: 0.5vw; align-items: center; font-size: calc(12px + 0.4vw); font-weight: 200; color: #fff; } .slide1 .keyword_tit::before { display: inline-block; width: 20px; height: 20px; background-image: url("https://visitbusan.net/archive/images/main_img/ico-mappin.png"); background-repeat: no-repeat; background-position: center center; content: ''; } .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 { 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 .img_wrap { overflow: hidden; max-height: 700px; } .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(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); content: ''; } .slide1 .img_wrap img { width: 100%; object-fit: fill; } .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 { width: 30%; /* flex-shrink: 0; */ } .btn_area_slide1 { display: flex; gap: 1vw; align-items: center; } .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 .dots_slide1 ul li.slick-active button::before { background-color: #E4007F; 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"); } @media all and (max-width: 900px) { .btn_area_slide1 { gap: 2vw; justify-content: flex-end; } .btn_area_slide1 .num.active { order: 1; } .btn_area_slide1 .dots_slide1 { display: none; } } @media all and (max-width: 600px) { .slide1_title { width: calc(100% - 103px); } } /* 최신자료 */ .section_2 { margin-top: 2%; border-top: 1px solid #f2f2f2; } .slide2 .slick-track { display: flex; align-items: flex-end; } .slide2 .slick-slide { padding: 0 15px; } .slide2 .slick-slide.slick-active { width: 355px; } .slide2 .txt_wrap { display: flex; justify-content: center; margin-top: 1.5vw; } .slide2 .keyword_tit { font-size: calc(12px + 0.5vw); font-weight: 300; color: #111; } .slide2 .img_wrap { overflow: hidden; height: 380px; border-radius: 20px; } .slide2 .img_wrap img { width: 100%; height: 100%; object-fit: cover; } .slide2_title_group { display: flex; flex-direction: column; margin-top: 3vw; margin-right: 5%; margin-bottom: 3%; margin-left: 5%; max-width: 1903px; } .slide2_title_group>.group { display: flex; align-items: center; justify-content: space-between; } .slide2_title_sub { margin-left: 20px; font-size: calc(12px + 0.3vw); font-weight: 300; color: #666; } .slide2_title .tit { font-size: calc(12px + 1.5vw); font-weight: 700; color: #000; } .btn_area_slide2_wrap { display: inline-block; margin-left: 20px; vertical-align: middle; } .btn_area_slide2 {} .btn_area_slide2 .group_btn { display: flex; border: 1px solid #ddd; border-radius: 50px; } .btn_area_slide2 .group_btn>button { display: flex; align-items: center; } .btn_area_slide2 .prev { padding: 0.8vw 0.5vw 0.8vw 1.3vw; } .btn_area_slide2 .next { padding: 0.8vw 1.3vw 0.8vw 0.5vw; } .btn_area_slide2 .btn_more .link { display: flex; gap: 0.5vw; align-items: center; padding: 0.5vw 1vw; border: 1px solid #ddd; background-color: #fff; font-size: calc(12px + 0.3vw); font-weight: 300; color: #111; } .btn_area_slide2 .btn_more .link::after { display: inline-block; width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/main_img/ico-more.png"); background-repeat: no-repeat; background-position: center center; content: ''; } @media all and (max-width: 1200px) { .section_2 { margin-top: 2%; } .slide2 .slick-list { padding: 0 5%; } .slide2 .slick-slide { padding: 0 5px; } .slide2 .img_wrap { height: 200px; } .slide2_title_group { margin-right: 5%; margin-bottom: 3%; margin-left: 5%; max-width: unset; } } @media all and (max-width: 900px) { .btn_area_slide2 .prev { padding: 0.8vw 1vw 0.8vw 1.3vw; } .btn_area_slide2 .next { padding: 0.8vw 1.3vw 0.8vw 1vw; } } @media all and (max-width: 600px) { .section_2 { padding-top: 4%; } .slide2_title_sub { display: none; } } /* 인기자료 */ .section_3 { margin-top: 7%; margin-bottom: 7%; position: relative; background-color: #fafafa; } .slide3 .visual { display: flex !important; } .slide3 .txt_wrap { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 2vw 5vw; background-color: #fafafa; max-width: 50%; } .slide3 .txt_group { display: flex; gap: 2vw; flex-direction: column; } .slide3 .sup_tit { font-size: calc(12px + 0.3vw); font-weight: 600; color: #000; } .slide3 .sub_tit { font-size: calc(12px + 0.4vw); font-weight: 300; line-height: calc(12px + 1.3vw); color: #666; } .slide3 .keyword_tit { font-size: calc(12px + 1.4vw); font-weight: 500; color: #000; } .slide3 .keyword_list { display: flex; gap: 0.4vw; flex-wrap: wrap; } .slide3 .keyword_list li a { display: flex; align-items: center; padding: 0.3vw 0.8vw; border: 1px solid rgb(0 0 0 / 12%); font-size: calc(11px + 0.2vw); font-weight: 300; color: #111; border-radius: 30px; } .slide3 .keyword_list li a::before { display: inline-block; margin-right: 0.3vw; font-size: calc(12px + 0.2vw); font-weight: 100; content: '#'; } .slide3 .keyword_btns { display: flex; } .slide3 .btn-keyword { flex-shrink: 0; padding: 0.6vw 1.2vw; background-color: #151515; font-size: calc(12px + 0.3vw); font-weight: 100; color: #fff; border-radius: 7px; } .slide3 .img_wrap { flex-grow: 1; } .slide3 .img_wrap img { width: 100%; max-width: 1450px; height: 100vw; max-height: 640px; object-fit: cover; } .btn_area_slide3_wrap { position: absolute; right: 5%; bottom: 5%; } .btn_area_slide3 { display: flex; } .btn_area_slide3>* { display: flex; align-items: center; justify-content: center; margin-left: -1px; border: 1px solid #ddd; width: 3vw; height: 3vw; } @media all and (max-width: 1200px) { .slide3 .img_wrap img { max-height: 520px; object-fit: cover; } .btn_area_slide3>* { width: 4vw; height: 4vw; } } @media all and (max-width: 900px) { .slide3 .txt_wrap { flex-shrink: 0; } .slide3 .keyword_list li a { padding: 0.3vw 1.3vw; } .slide3 .btn-keyword { padding: 0.8vw 2vw; } .slide3 .img_wrap {} .slide3 .img_wrap img { max-height: 300px; } .btn_area_slide3>* { width: 5vw; height: 5vw; } } @media all and (max-width: 600px) { .slide3 .visual { flex-direction: column; } .slide3 .txt_wrap { justify-content: flex-start; padding: 5vw 5vw; width: 100%; max-width: 100%; } .slide3 .txt_group { gap: 3vw; } .slide3 .keyword_list { gap: 3px; row-gap: 4px; } .slide3 .keyword_list li a { padding: 2px 10px; } .slide3 .keyword_btns { margin-top: 2%; } .slide3 .img_wrap { width: 100%; height: 100%; max-height: 300px; } .btn_area_slide3_wrap { margin-top: -5%; padding: 0 5% 5% 5%; position: unset; position: relative; bottom: 2.5%; } .btn_area_slide3 { justify-content: flex-end; } .btn_area_slide3>* { width: 30px; height: 30px; } } /* 추천키워드 */ .section_4 { margin-bottom: 7%; padding: 0 10%; } .Thumbnail_list {} .slide4 .Thumbnail_list ul { display: flex; gap: 10px; flex-wrap: wrap; flex-direction: row; padding: 1px; /*탭슬라이드 오른쪽 1px선이 생겨서 추가한 값*/ } .slide4 .Thumbnail_list li { width: calc((100% - 30px)/4); } .slide4 .visual { position: relative; } .slide4 .txt_wrap { display: flex; gap: 2vw; position: absolute; bottom: 0; left: 0; z-index: 2; } .slide4 .keyword_tit { display: flex; align-items: center; padding: 0.3vw 1vw 0.2vw 1vw; background-color: rgba(0, 0, 0, 0.7); font-size: calc(12px + 0.2vw); font-weight: 100; color: #fff; } .slide4 .img_wrap { overflow: hidden; height: 100vw; max-height: 260px; } .slide4 .img_wrap a { position: relative; z-index: 1; } .slide4 .img_wrap::after { display: block; padding-top: 10%; position: absolute; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); content: ''; } .slide4 .img_wrap:hover::after { background: unset; } .slide4 .img_wrap:hover img { transition-duration: 0.5s; transform: scale(1.1); } .slide4 .img_wrap img { width: 100%; height: 100%; object-fit: fill; } .slide4_title_txt_wrap { display: flex; align-items: center; justify-content: space-between; } .slide4_title_txt { font-size: calc(12px + 1.4vw); font-weight: 700; color: #000; } .slide4_title .slick-slide { padding: 0 3px; } .slide4_title.keyword_list { margin: 2vw -3px; } .slide4_title.keyword_list .li button { padding: 0.2vw 1vw 0.35vw 1vw; border: 1px solid #ddd; font-size: calc(12px + 0.2vw); border-radius: 30px; } .slide4_title.keyword_list .slick-current .li button { border-color: #E4007F; color: #E4007F; } .slide4_title.keyword_list .li button::before { display: inline-block; margin-right: 5px; content: '#'; } .btn_area_slide4 { display: flex; gap: 1vw; align-items: center; } .btn_area_slide4 .btn_more { display: flex; gap: 0.5vw; align-items: center; font-size: calc(11px + 0.4vw); font-weight: 300; color: #111; } .btn_area_slide4 .btn_more::after { display: inline-block; width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/main_img/ico-more.png"); background-repeat: no-repeat; background-position: center center; content: ''; } @media all and (max-width: 1200px) { .slide4 .img_wrap { max-height: 220px; } } @media all and (max-width: 900px) { .slide4 .Thumbnail_list li { width: calc((100% - 10px)/2); } } @media all and (max-width: 600px) { .section_4 { padding: 0 5%; } .slide4 .Thumbnail_list ul {} .slide4 .keyword_tit { padding: 3px 10px; } .slide4 .img_wrap { max-height: 44vw; } .slide4_title.keyword_list .li button { padding: 2px 9px; } } /* 추천키워드 */ .section_5 { margin-bottom: 7%; padding: 0 9%; } .slide5 .Thumbnail_list ul { display: flex; gap: 1.5%; flex-wrap: wrap; padding: 1px; /*탭슬라이드 오른쪽 1px선이 생겨서 추가한 값*/ } .slide5 .Thumbnail_list li { padding-right: 1.5%; width: calc((100% - 4.5%) / 4); } .slide5 .Thumbnail_list li:not(:last-child) { border-right: 1px solid #ddd; } .slide5 .txt_wrap { display: flex; margin-top: 8%; } .slide5 .keyword_tit { margin-bottom: 5%; } .slide5 .keyword_tit span { padding: 0.3vw 1vw 0.2vw 1vw; background-color: #E4007F; font-size: calc(11px + 0.1vw); font-weight: 100; color: #fff; border-radius: 20px; } .slide5 .keyword_txt { font-size: calc(12px + 0.4vw); font-weight: 300; color: #000; } .slide5 .keyword_list { display: flex; gap: 0.5vw; } .slide5 .keyword_list li a::before { display: inline-block; margin-right: 0.3vw; font-size: calc(12px + 0.2vw); font-weight: 100; color: #fff; content: '#'; } .slide5 .keyword_list li a { 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; } .slide5 .img_wrap { overflow: hidden; height: 100vw; max-height: 320px; border-radius: 20px; } .slide5 .img_wrap a { position: relative; } .slide5 .img_wrap img { width: 100%; height: 100%; object-fit: fill; } .slide5_title_txt_wrap { display: flex; align-items: center; justify-content: space-between; } .slide5_title_txt { font-size: calc(12px + 1.4vw); font-weight: 700; color: #000; } .slide5_title .slick-slide { padding: 0 3px; } .slide5_title.keyword_list { margin: 2vw -3px; } .slide5_title.keyword_list .li button { padding: 0.2vw 1vw 0.35vw 1vw; border: 1px solid #ddd; font-size: calc(12px + 0.2vw); border-radius: 30px; } .slide5_title.keyword_list .slick-current .li button { border-color: #E4007F; color: #E4007F; } .slide5_title.keyword_list .li button::before { display: inline-block; margin-right: 5px; content: '#'; } .slide5_title .tit { font-size: calc(12px + 0.7vw); color: #000; } .btn_area_slide5 { display: flex; gap: 1vw; align-items: center; } .btn_area_slide5>div { flex-shrink: 1; } .btn_area_slide5 .num { font-size: calc(12px + 0.4vw); font-weight: 300; color: #666; } .btn_area_slide5 .num.active { font-weight: 500; color: #000; } .btn_area_slide5 .dots_slide5 { flex-grow: 1; } .btn_area_slide5 .dots_slide5 ul { display: flex; position: unset; } .btn_area_slide5 .dots_slide5 ul li { flex-grow: 1; margin: unset; } .btn_area_slide5 .dots_slide5 ul li button { padding: 5px 0; width: 100%; } .btn_area_slide5 .dots_slide5 ul li button::before { display: block; position: unset; width: 100%; height: 3px; background-color: #E5E5E5; content: ''; opacity: unset; } .btn_area_slide5 .dots_slide5 ul li.slick-active button::before { background-color: #E4007F; opacity: unset; } .btn_area_slide5 .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_slide5 .btn_play.on { background-image: url("https://visitbusan.net/archive/images/main_img/ico-stop.png"); } .btn_area_slide5 .btn_more { display: flex; gap: 0.5vw; align-items: center; font-size: calc(11px + 0.4vw); font-weight: 300; color: #111; } .btn_area_slide5 .btn_more::after { display: inline-block; width: 24px; height: 24px; background-image: url("https://visitbusan.net/archive/images/main_img/ico-more.png"); background-repeat: no-repeat; background-position: center center; content: ''; } @media all and (max-width: 1200px) { .slide5 .img_wrap { max-height: 250px; } } @media all and (max-width: 900px) { .slide5 .Thumbnail_list ul { gap: 2%; margin-right: -2%; row-gap: 4vw; } .slide5 .Thumbnail_list li { width: calc((100% - 3%) / 2); } .slide5 .Thumbnail_list li:not(:last-child) { border-right: unset; } } @media all and (max-width: 600px) { .section_5 { padding: 0 5%; } .slide5 .keyword_tit span { padding: 3px 10px; } .slide5 .img_wrap { max-height: 44vw; } .slide5_title.keyword_list .li button { padding: 2px 10px; } }