* { -webkit-tap-highlight-color: transparent; } /* header */ header{position: fixed; top: 0; display: block; width: 100%; z-index: 999999; font-size: 16px; transition: 0.5s; border-bottom: 1px solid rgba(0.749, 0.749, 0.749, 0.3); background: #fff;} header #pcHeaderTop{max-width: 1786px; margin: 0 auto; display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 17px 0;} header #pcHeaderBtm{display: flex; width: 100%; max-width: 907px; justify-content: space-between;} header #pcHeaderTop .hd-logo-cont { width: 154px; } header #pcHeaderTop .hd-logo-cont img{width: 100%;} header #pcHeaderTop .hd-location { padding: 0 50px; display: flex; align-items: center; font-size: 1.063rem; font-weight: 400; color: #3c3c3c; letter-spacing: -.4px;} header #pcHeaderTop .hd-location img { margin-right: 11px; } header #gnb{display: flex; width: 100%; justify-content: space-between;} header #gnb li a{position: relative; display: block; text-align: center; white-space: nowrap; font-size: 1.063rem; width: auto; letter-spacing: -.5px; font-weight: 500; color: #3c3c3c;} header #gnb li a::after{position: absolute; left: 0; bottom: -5px; transition: .3s; display: inline-block; content: ""; height: 1.5px; width: 0px; background: #2d3930;} header #gnb li a:hover::after{width: 100%;} header .hd-left{display: flex;} header.hd-scroll{background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);} #quickList .top_close{text-align: center; justify-content: center; padding-left: 0; border-top-left-radius: 10px; border-top-right-radius: 10px;} #quickList li:nth-child(-n+5){transform: translateY(0px); transition: transform .5s;} #quickList.back li:nth-child(n+2):nth-child(-n+5){background: #2d3930;} #quickList.active li:nth-child(-n+5){transform: translateY(168px); position: relative; z-index: 1;} #quickList .log_img , #quickList .close_img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity .5s;} #quickList .log_img{opacity: 0;} #quickList.active .log_img{opacity: 1; max-width: 91px;} #quickList.active .close_img{opacity: 0;} #container{background-color: #fff;} /* main */ .hidden-cont{overflow: hidden;} #secMainBanner{position: relative; display: flex; align-items: center; width: 100%; height: 100svh; overflow: hidden} @keyframes bgZoomOut{ 0%{transform: scale(1.2)} 100%{transform: scale(1)} } #secMainBanner .contents{position: relative; display: flex; width: 90%; max-width: 1600px; margin-inline: auto; z-index: 1; align-items: center; justify-content: start; gap: 200px;} #secMainBanner .main-text-area{color: #fff; width: auto; text-align: left; display: flex; flex-direction: column; gap: 35px; margin-bottom: 15px; letter-spacing: -.7px;} #secMainBanner .main-text-area .hidden-cont{text-align: left; font-size: 1.875rem; font-weight: 500;} #secMainBanner .main-text-area .dd-mt{display: block; font-size: 3.25rem; font-weight: 700;} #secMainBanner .page_wrap .hero-pagination{display: flex; align-items: center;} #secMainBanner .page_wrap{position: absolute; bottom: 30.5%; color: #fff; z-index: 10; width: 90%; max-width: 1600px; left: 50%; transform: translateX(-50%);} #secMainBanner .swiper-pagination-clickable .swiper-pagination-bullet{background: none;} #secMainBanner .progress_wrap{width: 24px; height: 2px; display: inline-block; background: rgba(255, 255, 255, .5); position: relative;} #secMainBanner .progress_wrap .progress{ position:absolute; inset:0; background:#fff; height:100%; width:100%; transform:scaleX(0); transform-origin:left; transition: transform 6s linear;} #secMainBanner .progress_wrap.is-run .progress{ transform:scaleX(1);} #secMainBanner .page_wrap span.swiper-pagination-bullet{display: flex; align-items: center; margin: 0 5px; width: 18px;} #secMainBanner .page_wrap span.swiper-pagination-bullet-active{width: 50px; display: flex; gap: 7px; align-items: center;} .main-text-area b{font-weight: 600;} .hidden-cont{overflow: hidden} .drop-down{display: inline-block; opacity: 0; transform: translateY(-100%); animation: dropDown 0.8s ease-out forwards} @keyframes dropDown{ 0%{transform: translateY(-100%); opacity: 0} 100%{transform: translateY(0); opacity: 1} } .main-text-area .hidden-cont:nth-child(1) .drop-down{animation-delay: 0.1s} .main-text-area .hidden-cont:nth-child(2) .drop-down{animation-delay: 0.5s} .main-text-area .hidden-cont:nth-child(3) .drop-down{animation-delay: 0.9s} #secMainBanner .swiper{height: 100%;} #secMainBanner .swiper-slide{display: flex; align-items: center; } #secMainBanner .background{animation: bgZoomOut 8s ease-out forwards; width: 100%; height: 100%; position: absolute;} #secMainBanner .visual01{background: url(../img/bong_img/visual01.png) center center / cover no-repeat; height: 100%;} #secMainBanner .visual02{background: url(../img/bong_img/visual02.png) center center / cover no-repeat; height: 100%;} #secMainBanner .visual03{background: url(../img/bong_img/visual03.png) center center / cover no-repeat; height: 100%;} .section01_bg{background: #f8f7f5;} #section01{max-width: 1435px; margin: 0 auto; width: 100%; padding: 155px 0;} #section01 .txt_box{color: #262626; text-align: center;} #section01 .txt_box p{font-size: 1.625rem; font-weight: 400; padding-bottom: 33px; letter-spacing: -1px;} #section01 .txt_box h3{font-size: 2.375rem; font-weight: 700;} #section01 .sec01_list_wrap{width: 100%; padding-top: 80px;} #section01 .sec01_list_wrap ul{display: flex; gap: 15px;} #section01 .sec01_list_wrap ul li{height: 375px; width: 19%; display: flex; align-items: start; flex-direction: column; justify-content: end; padding: 36px 45px; border-radius: 30px; overflow: hidden; position: relative; transition: .8s; cursor: pointer;} #section01 .sec01_list_wrap ul li::after{display: inline-block; opacity: 0; transition: .8s; content: ""; width: 100%; height: 50%; bottom: 0; left: 0; position: absolute; background: linear-gradient( to bottom, rgba(113,113,113,0) 0%, rgba(113,113,113,0.85) 100%); pointer-events: none; z-index: 0;} #section01 .sec01_list_wrap ul li.active::after{opacity: 1;} #section01 .sec01_list_wrap ul li h3{font-size: 1.75rem; color: #fff; font-weight: 600; line-height: 1.5; position: relative; z-index: 2;} #section01 .sec01_list_wrap ul li:first-child{background: url(../img/bong_img/sect01_list01_bg.png) center center / cover no-repeat;} #section01 .sec01_list_wrap ul li:nth-child(2){background: url(../img/bong_img/sect01_list02_bg.png) center center / cover no-repeat;} #section01 .sec01_list_wrap ul li:nth-child(3){background: url(../img/bong_img/sect01_list03_bg.png) center center / cover no-repeat;} #section01 .sec01_list_wrap ul li:last-child{background: url(../img/bong_img/sect01_list04_bg.png) center center / cover no-repeat;} #section01 .sec01_list_wrap ul li.active{width: 40%;} #section01 .sec01_list_wrap ul li p{letter-spacing: -.3px; height: 0px; overflow: hidden; display: flex; align-items: end; color: #fff; font-size: 1.063rem; line-height: 1.6; position: relative; z-index: 2; transition: .8s;} #section01 .sec01_list_wrap ul li.active p{height: 95px; width: 500px;} #section01 .sec01_list_wrap ul li:nth-child(2).active p{height: 120px;} .section02_bg{ background: url(../img/bong_img/sect02_bg.png) center center / cover no-repeat;} #section02{max-width: 1435px; margin: 0 auto; width: 100%; padding: 167px 0 156px;} #section02 .txt_box{color: #fff; text-align: center;} #section02 .txt_box p{font-size: 1.625rem; font-weight: 400; padding-bottom: 33px; letter-spacing: -1px;} #section02 .txt_box h3{font-size: 2.375rem; font-weight: 700; letter-spacing: -.3px;} #section02 .section02_slide{padding-top: 80px;} #section02 .section02_slide_cate ul{display: flex; border-radius: 30px; justify-content: center; width: 395px; margin: 0 auto; background: #888888;} #section02 .section02_slide_cate ul li{padding: 15px 35px; color: #fff; font-size: 1.063rem; font-weight: 600; border-radius: 30px; overflow: hidden; cursor: pointer; } #section02 .section02_slide_cate ul li.active{background: #283a2c;} #section02 .section02_slide_bottom{max-width: 1040px; margin: 0 auto; width: 100%; padding-top: 40px;} #section02 .section02_slide_imgbox li{display: none;} #section02 .section02_slide_imgbox li.active{display: block;} #section02 .sec02_info_list{display: flex;justify-content: space-between; padding-top: 46px;} #section02 .sec02_info_list li{width: 210px; height: 210px; border-radius: 50%; color: #fff; font-size: 1.25rem; line-height: 1.6; text-align: center; justify-content: center; display: flex; align-items: center; background: #283a2c; letter-spacing: -.5px;} #section03{max-width: 895px; margin: 0 auto; width: 100%; padding: 0 0 170px; text-align: center;} #section03 .txt_box{color: #fff; } #section03 .txt_box h3{font-size: 2.375rem; font-weight: 700; letter-spacing: -.3px; line-height: 1.5;} #section03 .sect03_list{width: 100%; padding-top: 70px;} #section03 .sect03_list ul{display: flex; flex-direction: column; gap: 16px;} #section03 .sect03_list li{display: flex; align-items: center; justify-content: start; padding: 27px 0 27px 115px; background: #fff; border: 1px solid #283a2c; border-radius: 50px; overflow: hidden; gap: 13px;} #section03 .sect03_list li p{font-size: 1.563rem; font-weight: 400; color: #3c3c3c; letter-spacing: -.3px;} #section03 .sect03_list li p b{font-weight: 600;} .section04_bg{background: #f8f7f5;} #section04{max-width: 1435px; margin: 0 auto; width: 100%; padding: 165px 0;} #section04 .txt_box{color: #262626; text-align: center;} #section04 .txt_box p{font-size: 1.625rem; font-weight: 400; padding-bottom: 33px; letter-spacing: -1px;} #section04 .txt_box h3{font-size: 2.375rem; font-weight: 700; letter-spacing: -.3px;} #section04 .sect04_list{padding-top: 80px;} #section04 .sect04_list ul:nth-of-type(2){padding-top: 32px;} #section04 .sect04_list ul{display: flex; gap: 10px; justify-content: center;} #section04 .sect04_list ul li{position: relative; display: flex; flex-direction: column; align-items: center; border-radius: 24px; overflow: hidden; transition: .5s; cursor: pointer;} #section04 .sect04_list ul li:hover{ box-shadow: 0 3px 18px rgba(113,113,113,0.28);} #section04 .sect04_list ul li .list_txt_box{padding: 32px 26px 28px; width: 100%; color: #fff; text-align: center; background: #8e857a; transition: .5s; height: 100%;} #section04 .sect04_list ul li:hover .list_txt_box{background: #283a2c;} #section04 .sect04_list ul li h3{font-size: 1.563rem; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.5); letter-spacing: -1.3px;} #section04 .sect04_list ul li p{font-size: 1.063rem; padding-top: 14px; line-height: 1.5; letter-spacing: -.3px;} #section04 .sect04_list ul li p b{font-weight: 700;} #section04 .sect04_list ul li .mark{padding: 7px 13px; border-radius: 30px; background: #283a2c; color: #fff; font-size: 1.063rem; position: absolute; top: 25px; right: 17px; font-weight: 600;} .section05_bg{background: #fcfbfa;} #section05{max-width: 1435px; margin: 0 auto; width: 100%; padding: 165px 0;} #section05 .txt_box{color: #262626; text-align: center;} #section05 .txt_box p{font-size: 1.625rem; font-weight: 400; padding-bottom: 33px; letter-spacing: -1px;} #section05 .txt_box h3{font-size: 2.375rem; font-weight: 700; letter-spacing: -.3px;} #section05 .sect05_inner{display: flex; justify-content: center; align-items: start; width: 100%; padding-top: 105px;} #section05 .sect05_inner > div{width: 50%;} #section05 .sect05_inner .left_cont{text-align: center; padding-right: 20px;} #section05 .sect05_inner .right_cont h3{position: relative; text-align: center; font-size: 2rem; line-height: 1.6; color: #000; padding-top: 50px; font-family: "나눔명조"; font-weight: 700; letter-spacing: -1px;} #section05 .sect05_inner .right_cont h3::after{content: ""; left: 5px; top: 31px; position: absolute; display: inline-block; width: 45px; height: 40px; background: url(../img/bong_img/import01.png) center center / contain no-repeat;} #section05 .sect05_inner .right_cont h3::before{content: ""; right: 7px; bottom: -7px; position: absolute; display: inline-block; width: 45px; height: 40px; background: url(../img/bong_img/import02.png) center center / contain no-repeat;} #section05 .sect05_inner .left_cont h3{position: relative; text-align: center; font-size: 2rem; line-height: 1.6; color: #000; padding-top: 50px; font-family: "나눔명조"; font-weight: 700; letter-spacing: -1px;} #section05 .sect05_inner .left_cont h3::after{content: ""; left: 5px; top: 31px; position: absolute; display: inline-block; width: 45px; height: 40px; background: url(../img/bong_img/import01.png) center center / contain no-repeat;} #section05 .sect05_inner .left_cont h3::before{content: ""; right: 7px; bottom: -7px; position: absolute; display: inline-block; width: 45px; height: 40px; background: url(../img/bong_img/import02.png) center center / contain no-repeat;} #section05 .top_box{display: flex; gap: 17px; align-items: end; padding-left: 6px;} #section05 .top_box h4{font-size: 3.488rem; font-weight: 700;} #section05 .top_box span{font-size: 1.744rem; font-weight: 600;} #section05 .name_box{padding-top: 93px; padding-left: 167px;} #section05 .list_box{padding-top: 50px; font-size: 1.25rem; color: #000; max-width: 300px; width: 100%;} #section05 .list_box ul{display: flex; flex-direction: column; gap: 22px;} #section05 .list_box ul li{letter-spacing: .3px;} .section06_bg{background: #ebe9e5;} #section06{max-width: 1435px; margin: 0 auto; width: 100%; padding: 165px 0;} #section06 .txt_box{color: #262626; text-align: center;} #section06 .txt_box p{font-size: 1.625rem; font-weight: 400; padding-bottom: 33px; letter-spacing: -1px;} #section06 .txt_box h3{font-size: 2.375rem; font-weight: 700; letter-spacing: -.3px;} #section06 .bongYoutubeSwiper {padding-top: 80px; padding-bottom: 90px;} #section06 .bongYoutubeSwiper .swiper-pagination {bottom: 0; top: auto; background: #c5c4c2; max-width: 790px; left: 50%; transform: translateX(-50%);} #section06 .bongYoutubeSwiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #746349;} #section06 .bongYoutubeSwiper h3{font-size: 1.25rem; padding: 16px 20px;} .notice_wrap {max-width: 1500px; margin: 180px auto;} .notice_search{display:flex;justify-content:flex-end;margin-bottom:90px;gap:10px} .notice_search select{appearance:none;-webkit-appearance:none;border:1px solid #ddd;padding:10px 40px 10px 20px;border-radius:50px;color:#555;outline:0;font-size:15px;cursor:pointer;min-width:100px;background:url("../img/ssssdfsdfs.png") calc(100% - 15px) center no-repeat #fff} .search_box{position:relative;width:300px} .notice_search input{width:100%;border:1px solid #dddddd;padding:13px 45px 13px 20px;border-radius:50px;outline:0;font-size:15px;color:#333;box-sizing:border-box} .notice_search button{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:0 0;border:none;cursor:pointer;padding:0;display:flex;align-items:center} .notice_search button svg{width:18px;height:18px;stroke:#999} .notice_search input:placeholder{color:#969696} .notice_table{width:100%;border-top:3px solid #344082;border-collapse:collapse} .notice_table th{padding:21px 0;border-bottom:1px solid #ddd;color:#676767;font-weight:500;background:#f4f4f4;font-size:17px} .notice_table td{padding:20px 0;border-bottom:1px solid #eee;text-align:center;color:#606060;font-size:17px;vertical-align:middle} .td_subject{text-align:left!important;padding-left:20px!important;display:flex;align-items:center;gap:100px} .td_subject a{color:#000;text-decoration:none;font-weight:500;font-size:17px;transition:color .3s} .td_subject a:hover{color:#000;text-decoration:underline} .notice_thumb{width:224px;height:119px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:4px;flex-shrink:0} .notice_thumb img{width:100%;height:100%;object-fit:cover} .notice_thumb span{font-size:12px;color:#bbb} .paging_wrap{margin-top:40px;text-align:center;display:flex;justify-content:center;gap:5px} .paging_wrap a,.paging_wrap strong{display:inline-block;min-width:32px;height:32px;line-height:30px;border:1px solid #eee;color:#888;text-decoration:none;border-radius:4px;font-size:13px;margin:0 2px} .paging_wrap strong{background:#333;color:#fff;border-color:#333;font-weight:500} .paging_wrap a:hover{background:#f5f5f5;color:#333} .view_wrap{border-top:2px solid #333} .view_head{background:#fbfbfb;padding:20px;border-bottom:1px solid #eee} .view_title{font-size:22px;font-weight:600;color:#333;margin-bottom:10px} .view_info{font-size:13px;color:#888;display:flex;gap:20px} .view_content{padding:40px 20px;min-height:300px;line-height:1.6;color:#444;border-bottom:1px solid #ddd} .view_content img{max-width:100%} .btn_list_wrap{margin-top:20px;text-align:right} .btn_list{display:inline-block;padding:10px 40px;background:#333;color:#fff;text-decoration:none;border-radius:0;font-size:14px;transition:background .3s} .btn_list:hover{background:#555} .view_wrap { border-top: 1px solid #dddddd; margin-top: 50px; } .view_head { display: flex; justify-content: flex-end; align-items: center; padding: 25px 10px; border-bottom: 1px solid #eee; background: #fdfdfd; } .view_title { font-size: 20px; font-weight: 500; color: #0f0f0f; margin: 0; width: auto; position: absolute; left: 50%; transform: translate(-50%, 0);} .view_date { font-size: 15px; color: #b7b7b7; font-weight: 300; padding-right: 21px; font-weight: 400;} .view_content { padding: 60px 20px; min-height: 400px; text-align: center; color: #444; border-bottom: 1px solid #eee; line-height: 1.8; } .view_content img { max-width: 100%; display: inline-block; margin-bottom: 20px; } .view_btn_wrap { margin-top: 40px; display: flex; justify-content: center; position: relative; } .btn_group { display: flex; gap: 8px; } .btn_view { display: inline-flex; align-items: center; justify-content: center; min-width: 90px; height: 42px; border-radius: 40px; font-size: 15px; text-decoration: none; transition: all 0.3s; } .btn_white { border: 1px solid #ddd; background: #fff; color: #666; } .btn_white:hover { border-color: #333; color: #333; } a.btn_dark { border: 1px solid #746349; background: #746349; color: #fff; } .btn_dark:hover { background: #746349; } .btn_group_right { position: absolute; right: 0; top: 0; display: flex; gap: 8px; } /* ////////////////////////////////////////////// sub3-1 아카이브 ////////////////////////////////////////////////*/ .archive_wrap { max-width: 1500px; margin: 180px auto; } .archive_top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 80px; } .tab_filter { display: flex; gap: 10px; } .tab_btn { padding: 9px 25px; border-radius: 50px; background: #f5f5f5; color: #888; font-size: 15px; text-decoration: none; border: 1px solid #eee; transition: all 0.3s; } .tab_btn.active { background: #344082; color: #fff; border-color: #344082; } .tab_btn:hover { background: #e0e0e0; } .tab_btn.active:hover { background: #263066; } .archive_search { display: flex; align-items: center; gap: 10px; } .archive_select { appearance:none;-webkit-appearance:none;border:1px solid #ddd;padding:10px 40px 10px 20px;border-radius:50px;color:#555;outline:0;font-size:15px;cursor:pointer;min-width:100px;background:url("../img/ssssdfsdfs.png") calc(100% - 15px) center no-repeat #fff } .search_box select{appearance:none;-webkit-appearance:none;border:1px solid #ddd;padding:10px 40px 10px 20px;border-radius:50px;color:#555;outline:0;font-size:15px;cursor:pointer;min-width:100px;background:url("../img/ssssdfsdfs.png") calc(100% - 15px) center no-repeat #fff} .search_box{position:relative;width:300px} .search_box input{width:100%;border:1px solid #dddddd;padding:10px 45px 10px 20px;border-radius:50px;outline:0;font-size:15px;color:#333;box-sizing:border-box} .search_box button{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:0 0;border:none;cursor:pointer;padding:0;display:flex;align-items:center} .search_box button svg{width:18px;height:18px;stroke:#999} .search_box input:placeholder{color:#969696} .archive_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px; } .archive_item { display: block; text-decoration: none; group: hover; } .ar_thumb { width: 100%; aspect-ratio: 16/9; background: #f0f0f0; border-radius: 4px; overflow: hidden; position: relative; margin-bottom: 22px; } .ar_thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .archive_item:hover .ar_thumb img { transform: scale(1.05); } .ar_thumb span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ddd; font-size: 14px; } .ar_info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .ar_badge { padding: 3px 14px; background: #344082; color: #fff; font-size: 17px; font-weight: 500; } .ar_date { font-size: 15px; color: #b7b7b7; } .ar_title { font-size: 20px; color: #0f0f0f; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .archive_item:hover .ar_title { text-decoration: underline; } .paging_wrap { margin-top: 60px; text-align: center; display: flex; justify-content: center; gap: 5px; } .paging_wrap a, .paging_wrap strong { display: inline-block; min-width: 32px; height: 32px; line-height: 30px; border: 1px solid #eee; color: #888; text-decoration: none; border-radius: 4px; font-size: 13px; margin: 0 2px; } .paging_wrap strong { background: #333; color: #fff; border-color: #333; font-weight: 500; } .paging_wrap a:hover { background: #f5f5f5; color: #333; } .archive_wrap .view_badge { padding: 5px 15px; background: #746349; color: #fff; font-size: 13px; flex-shrink: 0; } .archive_wrap .view_title { text-align: left;display: flex; align-items: center; gap: 19px; } .view_media_box { max-width: 800px; margin: 0 auto 40px; } .view_media_box iframe { width: 100%; aspect-ratio: 16/9; } .view_media_box img { max-width: 100%; height: auto; } #section07{max-width: 1435px; margin: 0 auto; width: 100%; padding: 165px 0;} #section07 .txt_box{color: #262626; text-align: left;} #section07 .txt_box p{font-size: 1.625rem; font-weight: 400; padding-bottom: 33px; letter-spacing: -1px;} #section07 .txt_box h3{font-size: 2.375rem; font-weight: 700; letter-spacing: -.3px;} #section07 .section07_inner{display: flex; justify-content: space-between;} #section07 .tour_bottom{padding-top: 54px;} #section07 .right_cont{width: 100%; max-width: 900px;} #section07 .left_cont{width: 100%; max-width: 495px; position: relative;} #section07 .tour_bottom .swiper-slide img{transition: .3s; cursor: pointer;} #section07 .tour_bottom .swiper-slide:hover img{filter: brightness(.8);} #section07 .left_cont{padding-top: 110px;} #section07 .btn_wrap{width: 105px; position: absolute; display: flex; gap: 9px; bottom: 0; right: 0;} #section07 .btn_wrap div{transition: .3s; overflow: hidden; height: 48px; width: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #d5d5d5; cursor: pointer;} #section07 .btn_wrap div:hover{background: #2d3930;} #section08{padding: 88px 0 132px; background: #b7b0a7;} #section08 .section08_inner{display: flex; justify-content: space-between; width: 100%; max-width: 1610px; margin: 0 auto;} #section08 .bottom_txt{display: flex; justify-content: space-between; width: 100%; max-width: 1610px; margin: 0 auto; background: #283a2c; color: #fff; gap: 74px;} #section08 .section08_inner > div{width: 50%; display: flex; justify-content: center; flex-direction: column;} #section08 .section08_inner > div.right_cont{width: calc(50% - 74px);} #section08 .section08_inner h3{padding-left: 47px; font-size: 2rem; font-weight: 700; color: #262626; letter-spacing: -.6px;} #section08 .section08_inner .right_cont li:first-child{padding-top: 44px;} #section08 .section08_inner .right_cont li{padding: 49px 45px; display: flex; gap: 42px; align-items: start; color: #262626; border-bottom: 2px solid rgba(202, 199, 193, .8);} #section08 .section08_inner .right_cont li > div{min-width: 400px;} #section08 .section08_inner .right_cont li h4{font-size: 1.563rem; font-weight: 600; letter-spacing: -.3px;} #section08 .section08_inner .right_cont li p{line-height: 1.5; font-size: 1.125rem; font-weight: 500; display: flex; gap: 24px; letter-spacing: -.3px;} #section08 .section08_inner .right_cont li:nth-child(2) p{font-weight: 400; letter-spacing: .9px; padding-bottom: 5px;} #section08 .section08_inner .right_cont li:last-child{padding-bottom: 0; border-bottom: none;} #section08 .section08_inner .right_cont li p .days{font-weight: 600; max-width: 74px; width: 100%; display: flex; justify-content: space-between; align-items: center;} #section08 .section08_inner .right_cont li .close_days{font-weight: 400; display: flex; align-items: center; font-size: 1rem; line-height: 1.5; letter-spacing: .5px;} #section08 .section08_inner .right_cont li .close_days:first-of-type{padding-top: 8px;} #section08 .section08_inner .right_cont li .num{color: #262626; font-weight: 600; font-size: 1.563rem; display: flex; align-items: center; line-height: 1;} #section08 .section08_inner .right_cont .btn_wrap{display: flex; gap: 15px; padding-top: 19px;} #section08 .section08_inner .right_cont .btn_wrap a{transition: .3s; padding: 11px 0; width: 160px; display: flex; align-items: center; background: #283a2c; color: #fff; border-radius: 4px; overflow: hidden; align-items: center; justify-content: center; gap: 7px; font-size: 1.063rem; font-weight: 400;} #section08 .section08_inner .right_cont .btn_wrap a:hover{background: #fff; color: #262626;} #section08 .section08_inner .right_cont .btn_wrap a img{ filter: brightness(0) invert(1); transition: .3s;} #section08 .section08_inner .right_cont .btn_wrap a:hover img {filter: initial;} #section08 .bottom_txt{padding: 45px 0; text-align: center; display: flex; justify-content: center; align-items: center; margin-top: 50px;} #section08 .bottom_txt p{font-size: 1.25rem; color: #eaeaea; font-weight: 500; line-height: 1.5; letter-spacing: .6px;} footer{position:relative;padding: 10px 0 40px; background-color: #000000; color: #ffffff; font-size: 16px; } footer .ft-top{width: 95%; max-width: 1600px; margin: 0 auto; padding-bottom: 17px; border-bottom: 1px solid rgba(197, 196, 194, .5);} footer .ft-wrap{position:relative; display: flex; align-items: start; justify-content: space-between; width: 95%; max-width: 1600px; margin: 0 auto; padding-top: 29px;} footer .ft-info{text-align: right; line-height: 2; font-size: 0.875rem; color: #a9a9a9;} footer .ft-link span{display: inline-block; margin: 0 10px;} footer a{color: #ffffff;font-size: 0.875rem;} footer .copy{margin-top: 20px; font-size: 0.875rem; color: #a9a9a9; width: 100%;} /* main */ #btnQuick{background: none; border: none; position: fixed; right: 80px; bottom: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 18px; z-index: 1000;} #btnQuick>img{width: 40px;} #btnQuick.active>img{width: 25px;} #quickList{position: absolute; right: 0; display: flex; flex-direction: column; gap: 2px; animation: bounce 0.8s infinite alternate; overflow: hidden; border-radius: 10px;} #quickList li{display: flex; width: 140px; padding: 10px 0 10px 15px; height: 40px; background-color: #fff; } #quickList li a{display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;} #quickList li a img{max-width: 24px;} #quickList .top_btn {padding-left: 0; text-align: center; justify-content: center; background: #2d3930; font-size: 18px; font-weight: 600; color: #fff; position: relative; z-index: 10;} #section06 .swiper-button-next,#section06 .swiper-button-prev{display: none;} @keyframes bounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); /* 자기 높이의 20%만큼 위로 이동 */ } } @keyframes scrollDown{ 0%{top: 0px; opacity: 0} 10%{top: 0px; opacity: 1} 90%{top: 8.333vw; opacity: 1;} 100%{top: 8.333vw; opacity: 0} } @media (max-width: 1440px){ header #pcHeaderTop{padding: 17px 5%;} header #pcHeaderTop .hd-location{display: none;} #section01{padding: 5vw 5%; max-width: 100%;} #section01 .sec01_list_wrap{padding-top: 4vw;} #section02{padding: 5vw 5%; max-width: 100%;} #section02 .section02_slide{padding-top: 4vw;} #section03{padding: 0 5% 5vw; max-width: 100%;} #section03 .sect03_list{padding-top: 4vw;} #section04{padding: 5vw 5%; max-width: 100%;} #section04 .sect04_list{padding-top: 4vw;} #section05{padding: 5vw 5%; max-width: 100%;} #section05 .sect05_inner{flex-wrap: wrap;} #section05 .sect05_inner{padding-top: 4vw;} #section06{padding: 5vw 5%; max-width: 100%;} #section06 .bongYoutubeSwiper{padding-top: 4vw;} #section07{padding: 5vw 5%; max-width: 100%;} #section07 .section07_inner{flex-wrap: wrap; justify-content: center; gap: 4vw;} #section07 .left_cont{padding-top: 0; text-align: center;} #section07 .txt_box{text-align: center;} #section07 .btn_wrap{display: none;} #section08{padding: 5vw 5%; max-width: 100%;} #section08 .section08_inner{flex-wrap: wrap; gap: 4vw;} #section08 .section08_inner > div{width: 100%;} #section08 .section08_inner > div.right_cont{width: 100%;} } @media (max-width: 1024px){ .pc_br{display: none;} header { border-bottom: 0.235vw solid #d0d0d0; } #moHeader { display: flex; justify-content: space-between; width: 90%; margin: 3.765vw auto; } #moHeader .hd-logo-cont { max-width: 52%; } #moHeader .hd-logo-cont img { width: 100%; } #moHeader .hd-right-cont { display: flex; gap: 7.059vw; } #moHeader .hd-right-cont a { display: inline-block; width: 5.412vw; } #moHeader .hd-right-cont a img { width: 100%; } #moHeader .hd-right-cont button { display: inline-block; background-color: transparent; border: 0; padding: 0; margin: 0; } #moHeader .hd-right-cont button span { display: block; width: 9.412vw; height: 0; border: 0.235vw solid #000; } #moHeader .hd-right-cont button span:nth-child(2) { margin: 1.412vw 0; } #moNav{position: absolute; top: 0; right: -100%; display: flex; flex-direction: column; width: 60%; height: 100vh; background-color: #283a2c; z-index: 9999999; transition: right 0.5s;} #moNav *{color: #fff; font-size: 3.294vw;} #moNav .btn-wrap{padding: 0 4.5vw; text-align: right;} #moNav button{display: inline-flex; align-items: center; gap: 1.882vw; font-size: 2.8vw; background-color: transparent; padding: 0; margin: 0; border: 0; height: 13.536vw;} #moNav button img{width: 4.706vw;} #moNav ul{padding: 5vw 4.5vw; border-top: 1px solid #fff;} #moNav ul li{margin-bottom: 5vw;} #moNav>span{margin-top: 5vw; padding: 0 4.5vw; font-size: 2.8vw;} #moNav a.mo-nav-tel{display: flex; align-items: center; gap: 1.176vw; padding: 0 4.5vw; font-size: 6.118vw;} #moNav a.mo-nav-tel span {padding-bottom: 1.176vw; font-size: 6.118vw;} #secMainBanner .main-text-area .hidden-cont{font-size: 3vw;} #secMainBanner .main-text-area .dd-mt{font-size: 5vw;} #section01 .sec01_list_wrap ul{flex-wrap: wrap;} #section01 .sec01_list_wrap ul li{height: auto; width: 100%;} #section01 .sec01_list_wrap ul li.active{width: 100%;} #section01 .sec01_list_wrap ul li{padding: 5vw; gap: 2vw;} #section01 .sec01_list_wrap ul li p{height: auto; width: auto;} #section01 .sec01_list_wrap ul li.active p{height: auto; width: auto;} #section01 .sec01_list_wrap ul li:nth-child(2).active p{height: auto;} #section05 .sect05_inner > div{width: 100%;} #section05 .name_box{padding: 0; padding-top: 3vw;} #section05 .top_box{justify-content: center; padding-left: 0;} #section05 .list_box{padding-top: 3vw; margin: 0 auto;} #section05 .list_box ul{width: 100%;} #section01 .txt_box p{padding-bottom: 2vw;} #section02 .txt_box p{padding-bottom: 2vw;} #section03 .txt_box p{padding-bottom: 2vw;} #section04 .txt_box p{padding-bottom: 2vw;} #section05 .txt_box p{padding-bottom: 2vw;} #section06 .txt_box p{padding-bottom: 2vw;} #section07 .txt_box p{padding-bottom: 2vw;} #section08 .txt_box p{padding-bottom: 2vw;} } #section04 .sect04_list ul.mo_list_768{display: none;} .mo_list_768{display: none;} .mo_br_768{display: none;} #section08 .section08_inner .right_cont li.mo_list_768{display: none;} @media (max-width: 768px){ .mo_br_768{display: block;} .pc_list_768{display: none;} .mo_list_768{display: block;} #btnQuick{bottom: 45%; right: 3vw;} #secMainBanner .main-text-area .dd-mt{line-height: 1.5;} #section01{padding: 10vw 5%;} #section02{padding: 10vw 5%;} #section03{padding: 0 5% 10vw;} #section04{padding: 10vw 5%;} #section05{padding: 10vw 5%;} #section06{padding: 10vw 5%;} #section07{padding: 10vw 5%;} #section08{padding: 10vw 5%;} #section01 .txt_box h3{font-size: 5vw; line-height: 1.5;} #section02 .txt_box h3{font-size: 5vw; line-height: 1.5;} #section03 .txt_box h3{font-size: 5vw; line-height: 1.5;} #section04 .txt_box h3{font-size: 5vw; line-height: 1.5;} #section05 .txt_box h3{font-size: 5vw; line-height: 1.5;} #section06 .txt_box h3{font-size: 5vw; line-height: 1.5;} #section07 .txt_box h3{font-size: 5vw; line-height: 1.5;} #section01 .txt_box p{font-size: 3vw;} #section02 .txt_box p{font-size: 3vw;} #section03 .txt_box p{font-size: 3vw;} #section04 .txt_box p{font-size: 3vw;} #section05 .txt_box p{font-size: 3vw;} #section06 .txt_box p{font-size: 3vw;} #section07 .txt_box p{font-size: 3vw;} #section03 .sect03_list li{padding: 3vw;} #section02 .sec02_info_list li{width: 20vw; height: 20vw; font-size: 2vw;} #section03 .sect03_list li p{font-size: 2vw;} #section04 .sect04_list ul li{max-width: 44vw;} #section04 .sect04_list ul li h3{font-size: 2.5vw;} #section04 .sect04_list ul li p{font-size: 2.2vw;} #section04 .sect04_list ul li .list_txt_box{padding: 2vw; padding-top: 3vw;} #section04 .sect04_list ul.pc_list_768{display: none;} #section04 .sect04_list ul.mo_list_768{display: flex; flex-wrap: wrap;} #section05 .sect05_inner .left_cont{padding-right: 0;} #section05 .sect05_inner .left_cont h3{padding-top: 0; padding-bottom: 3vw;} #section05 .sect05_inner .left_cont h3::after {top: 0;} #section05 .sect05_inner .left_cont h3::before {bottom: 0;} #section08 .bottom_txt p{font-size: 3vw;} #section08 .section08_inner h3{font-size: 4vw; padding-left: 3vw;} #section08 .section08_inner .right_cont li{padding: 3vw;} #section08 .section08_inner .right_cont li:first-child{padding-top: 5vw;} footer .ft-wrap{flex-wrap: wrap; gap: 2vw;} footer .ft-info{text-align: left;} #section08 .section08_inner .right_cont li h4{font-size: 4vw;} #section08 .section08_inner .right_cont li p{font-size: 2.8vw;} #section08 .section08_inner .right_cont li.pc_list_768{display: none;} #section08 .section08_inner .right_cont li.mo_list_768{display: flex; flex-direction: column;} #section08 .section08_inner .right_cont li.mo_list_768 > div{display: flex; gap: 3vw;} #section08 .section08_inner .right_cont li{gap: 3vw;} #section08 .section08_inner .right_cont .btn_wrap{padding-top: 0;} #section08 .section08_inner .right_cont li > div{min-width: 0; width: 100%;} #moHeader .hd-right-cont a{display: flex; align-items: center;} #secMainBanner .main-text-area{gap: 3vw;} } .mo_br_425{display: none;} @media (max-width: 425px){ #section06 .swiper-button-next,#section06 .swiper-button-prev{display: flex; align-items: center; justify-content: center;} .mo_br_425{display: block;} #secMainBanner .main-text-area .hidden-cont.dd-mt{font-size: 8vw;} #secMainBanner .main-text-area .hidden-cont{font-size: 5vw;} #section01 .txt_box h3{font-size: 7vw;} #section02 .txt_box h3{font-size: 7vw;} #section03 .txt_box h3{font-size: 7vw;} #section04 .txt_box h3{font-size: 7vw;} #section05 .txt_box h3{font-size: 7vw;} #section06 .txt_box h3{font-size: 7vw;} #section07 .txt_box h3{font-size: 7vw;} #section01 .txt_box p{font-size: 4vw;} #section02 .txt_box p{font-size: 4vw;} #section03 .txt_box p{font-size: 4vw;} #section04 .txt_box p{font-size: 4vw;} #section05 .txt_box p{font-size: 4vw;} #section06 .txt_box p{font-size: 4vw;} #section07 .txt_box p{font-size: 4vw;} #section01 .sec01_list_wrap ul li h3{font-size: 5vw;} #section01 .sec01_list_wrap ul li.active p{font-size: 2.8vw;} #section01 .sec01_list_wrap ul li p{font-size: 2.8vw;} #section03 .sect03_list li p{font-size: 2.8vw;} #section03 .sect03_list li{gap: .5vw;} #section03 .sect03_list li img{width: 4vw;} #section05 .sect05_inner .left_cont h3{font-size: 4vw;} #section02 .sec02_info_list li{font-size: 2.4vw; width: 22vw; height: 22vw;} #section04 .sect04_list ul li {width: 43vw;} #section04 .sect04_list ul li .mark{font-size: 2.5vw; top: 3vw; right: 3vw;} #section04 .sect04_list ul li h3{font-size: 3vw; padding-bottom: 3vw;} #section04 .sect04_list ul li p{padding-top: 3vw; font-size: 2.5vw;} #section05 .top_box h4{font-size: 7vw;} #section05 .list_box{font-size: 3.3vw;} #section05 .top_box span{font-size: 4vw;} #section05 .list_box {max-width: 100%; padding-top: 5vw;} #section05 .top_box{justify-content: start;} #section05 .name_box{padding-top: 10vw;} #section05 .sect05_inner .left_cont h3::after{height: 20px;} #section06 .bongYoutubeSwiper img{width: 100%;} #section06 .bongYoutubeSwiper{padding-bottom: 5vw;} #section08 .section08_inner .right_cont li p{font-size: 3vw;} #section08 .section08_inner .right_cont li .close_days{font-size: 3vw;} #section08 .section08_inner .right_cont li > div{width: 100%;} #section08 .section08_inner .right_cont li .num{font-size: 3.8vw;} #section08 .bottom_txt{padding: 5vw 0;} #section07 .tour_bottom{padding-top: 2vw;} #section05 .sect05_inner .left_cont h3::after{width: 20px;} #section05 .sect05_inner .left_cont h3::before{width: 20px;} #section06 .bongYoutubeSwiper h3{font-size: 4vw;} footer .copy{font-size: 2.8vw;} footer .ft-info{font-size: 2.8vw;} footer .ft-info a{font-size: 2.8vw;} footer .ft-top img{width: 30vw;} #moHeader .hd-logo-cont img{width: 30vw;} #btnQuick{bottom: 20svh;} #quickList li a{font-size: 2.8vw;} #section08 .section08_inner .right_cont .btn_wrap a{font-size: 3vw;} #quickList li{width: 120px;} #moNav .btn-wrap{height: 16vw; display: flex; align-items: center; justify-content: end;} #section06 .swiper-button-next,#section06 .swiper-button-prev{top: 40%; color: #fff;} #section06 .swiper-button-next:after,#section06 .swiper-button-prev:after {font-size: 7vw;} #section02 .section02_slide_cate ul{width: auto;} #section02 .section02_slide_cate ul li{font-size: 3.2vw; width: 100%; padding: 3vw; text-align: center;} #section05 .list_box ul{gap: 3vw;} .ft-link a{font-size: 3vw;} footer .ft-link span{margin: 0 1vw;} .view_btn_wrap{flex-wrap: wrap;} .btn_group_right{top: 50px; right: 50%; transform: translateX(50%);} .archive_wrap .view_title{width: 100%; text-align: center; justify-content: center;} .archive_wrap{margin: 0 auto 150px;} .view_wrap{margin: 0;} .combria{display: none;} #section03 .sect03_list ul{gap: 3vw;} #secMainBanner .visual01{background: url(../img/bong_img/visual01.png) center right -350px / cover no-repeat;} #secMainBanner .visual02{background: url(../img/bong_img/visual02.png) center right -350px / cover no-repeat;} #secMainBanner .visual03{background: url(../img/bong_img/visual03.png) center right -350px / cover no-repeat;} }