@charset "utf-8"; 

/* contents.css */

.swiper-wrapper { height: fit-content; } 

/* ******************* *
* 코스여행
* ******************* */
.course-list { display: flex; align-items: center; flex-wrap: wrap; column-gap: 21px; row-gap: 75px; } 
.course-list li { width: calc(25% - 16px); height: 100%; } 
.course-cont { display: flex; flex-direction: column; border: 1px solid #bfc0c1; width: 100%; background: #fff; border-radius: 31px; overflow: hidden; transition: all .3s; } 
.course-cont:hover { box-shadow: 0px 5px 29px 0px rgba(0,0,0,0.15); } 
.course-cont:hover .course-info::after { opacity: 1; } 
.course-info { padding: 50px 20px 47px; position: relative; } 
.course-info::after { content: ''; display: block; position: absolute; bottom: 65%; right: 0; width: 111px; height: 111px; background: url(../../../../resource/cwtour/images/sub/ico_course_hover.png); opacity: 0; transition: all .3s; z-index: 1; } 

.course-info .tit { color: #101010; font-weight: 800; font-size: 1.4444rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 12px; letter-spacing: -2px; } 
.course-info .desc { color: #999; font-size: .889rem; display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; height: 38px; } 
.course-img { position: relative; padding-top: 87.676%; border-radius: 30px; overflow: hidden; z-index: 1; } 
.course-img img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; object-position: center; } 

@media all and (max-width: 1199px) { 
 .course-list { row-gap: 20px; column-gap: 15px; } 
 .course-list li { width: calc(33% - 8px); } 
 .course-info { padding: 30px 20px 27px; } 
 } 
 @media all and (max-width: 768px) { 
 .course-list li { width: calc(50% - 8px); } 
 .course-cont { border-radius: 20px; } 
 .course-img { padding-top: 70%; border-radius: 20px; } 
 } 
 @media all and (max-width: 480px) { 
 .course-list li { width: 100%; } 
 .course-info .tit { font-weight: 600; font-size: 1.5rem } 
 } 

 /* 상세 */
.course-view { width: 100%; height: 100vh; overflow: hidden; position: relative; font-family: 'GmarketSans', sans-serif; } 
.course-view:not(:first-child):after { content: ''; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, .2); position: absolute; top: 0; left: 0; z-index: -1; backdrop-filter: contrast(.8); } 
.course-view > img { object-fit: cover; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } 
.course-view .cont { color: var(--color-white); display: flex; justify-content: flex-end; height: 100%; flex-direction: column; max-width: 1500px; margin: 0 auto; padding-bottom: 115px; position: relative; z-index: 1; } 
.course-view.intro .cont { align-items: center; justify-content: center; padding-bottom: 0; } 
.course-view.intro .cont .tit { font-size: 2rem; font-weight: 400; margin-bottom: 33px; } 
.course-view .list { display: flex; position: relative; flex-wrap: wrap; justify-content: flex-end; max-width: 990px; width: 100%; } 
.course-view .list li { width: 14.2%; display: flex; flex-direction: column; align-items: center; position: relative; } 
.course-view .list li:first-child:nth-last-child(2),
.course-view .list li:first-child:nth-last-child(2) ~ li { width: 50%; } 
.course-view .list li:first-child:nth-last-child(3),
.course-view .list li:first-child:nth-last-child(3) ~ li { width: 33.3%; } 
.course-view .list li:first-child:nth-last-child(4),
.course-view .list li:first-child:nth-last-child(4) ~ li { width: 25%; } 
.course-view .list li:first-child:nth-last-child(5),
.course-view .list li:first-child:nth-last-child(5) ~ li { width: 20%; } 
.course-view .list li:first-child:nth-last-child(6),
.course-view .list li:first-child:nth-last-child(6) ~ li { width: 16.6%; } 
.course-view .list li:first-child:nth-last-child(7),
.course-view .list li:first-child:nth-last-child(7) ~ li { width: 14.2%; } 
.course-view .list li::after { content: ''; display: block; width: 100%; height: 2px; background: var(--color-white); position: absolute; top: 95px; left: 50%; right: 0; margin: auto; z-index: -1; } 
.course-view .list li:last-child::after,
.course-view .list li:nth-child(7n)::after { display: none; } 

.course-view .list .img { width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; } 
.course-view .list .ico { margin-bottom: 13px; } 
.course-view .list .txt { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; max-width: 120px; word-break: break-all; } 
.course-view .scroll-down { animation: scrollAnimation 2s infinite; position: absolute; bottom: 40px; border: 1px solid var(--color-white); border-radius: 50%; width: 60px; height: 60px; } 
.course-view .scroll-down::before { content: ''; display: block; border: 1px solid transparent; border-bottom-color: var(--color-white); border-right-color: var(--color-white); transform: rotate(45deg); width: 8px; height: 8px; position: absolute; top: 0; bottom: 0; right: 0px; left:0; margin: auto; transition: 0.35s; } 
.course-view .tit-wrap { display: flex; align-items: center; margin-bottom: 15px; } 
.course-view .tit-wrap .tit { font-size: 1.444rem; font-weight: 600; margin-right: 15px; } 
.course-view .tit-wrap .link-btn { background: rgba(255,255,255,0.2) url(../../../../resource/cwtour/images/sub/course/course_spr.png) -55px -55px; display: inline-block; width: 45px; height: 45px; border-radius: 50%; box-shadow: 5px 0 29px rgba(0,0,0,0.15); } 
.course-view .desc { font-size: 1.111rem; } 
.course-view .location { display: flex; align-items: center; background: rgba(255,255,255,.1); padding: 13px 25px; border-radius: 20px; border: 1px solid rgba(255,255,255,.5); margin-top: 26px; } 
.course-view .location > span { display: flex; align-items: center; font-size: .889rem; } 
.course-view .location > span::before { content: ''; display: block; width: 45px; height: 45px; background: url(../../../../resource/cwtour/images/sub/course/course_spr.png); background-position-y: -55px; flex-shrink: 0; } 
.course-view .location .transport { margin-left: 40px; } 
.course-view .location .transport::before { background-position-x: -110px; } 
.course-view .location > a { display: block; color: #fff; background: var(--color-green); font-size: .778rem; margin-left: 40px; padding: 13px 37px; border-radius: 10px; } 
.sidebar { position: fixed; top: 50%; right: 0px; transform: translateY(-50%); } 
.dot { width: 10px; height: 10px; background-color: var(--color-white); margin: 30px 90px; border-radius: 50%; display: block; position: relative; cursor: pointer; } 
.dot.active::before { content: ''; display: block; width: 30px; height: 30px; border-radius: 50%; background-color: var(--color-white); opacity: .2; top: 0; bottom: 0; margin: auto; left: 50%; transform: translateX(-50%); position: absolute; z-index: -1; } 

.course-view .info { display: flex; align-items: center; width: 100%; background: rgba(255,255,255,.1); padding: 13px 25px; border-radius: 20px; border: 1px solid rgba(255,255,255,.5); margin-top: 26px; margin-bottom: 35px; } 
.course-view .info > span { display: flex; align-items: center; font-size: .889rem; } 
.course-view .info > a { display: block; color: #fff; background: var(--color-green); font-size: .778rem; margin-left: 40px; padding: 13px 37px; border-radius: 10px; } 
.course-view.intro.type02 .cont { justify-content: end } 
.course-view.intro.type02 .desc { font-size: 0.8889rem; margin-top: 135px; } 
.course-view.intro.type02 .info > span { display: block; color: #fff; } 
.course-view.intro.type02 .info > span a { color: #fff } 
.course-view02 { padding: 0 0 70px; } 
.course-view02 .top-txt { font-size: 0.8889rem; margin: 50px 0 140px; } 
.course-view02 .map { margin: 0 190px; } 
.course-view02 .tit { font-weight: 600; font-size: 1.5556rem; font-family: 'GmarketSans', sans-serif; margin-top: 105px; margin-bottom: 27px; } 
.course-view02 .tbl td { border-right: 1px solid var(--color-border); } 

.course-view.intro.type03 { position: relative; } 
.course-view.intro.type03::after { content:''; display:block; position:absolute; top:0; left:0; width: 100%; height: 100%; /* filter: contrast(0.7); *//* z-index: 1; */background: #000; opacity: .4; } 
.course-view.type03 .list li::after { top: 16px } 

@keyframes scrollAnimation { 
 0% { 
 transform: translateY(0); 
 } 
 50% { 
 transform: translateY(10px); 
 } 
 100% { 
 transform: translateY(0); 
 } 
 } 

@media all and (max-width: 1500px) { 
 .course-view .cont { max-width: 1200px; } 
 } 

@media all and (max-width: 1199px) { 
.course-view .cont { max-width: 100%; margin: 0 30px; } 
.dot { margin: 30px 15px; } 
 } 
 @media all and (max-width: 1024px) { 
 .course-view .location .transport,
 .course-view .location > a { margin-left: 20px; } 
 .course-view02 .map { margin: 0; } 
 } 
@media all and (max-width: 768px) { 
 .sidebar { display: none; } 
 .dot { margin: 20px 15px; width: 7px; height: 7px; } 
 .dot.active::before { width: 20px; height: 20px; } 
 .course-view.intro .cont .tit { font-size: 1.5rem } 
 .course-view .list li { width: 20%; } 
.course-view .list li:first-child:nth-last-child(6),
.course-view .list li:first-child:nth-last-child(6) ~ li { width: 20%; } 
.course-view .list li:first-child:nth-last-child(7),
.course-view .list li:first-child:nth-last-child(7) ~ li { width: 20%; } 
.course-view .list li::after { content: ''; display: block; width: 100%; height: 2px; background: var(--color-white); position: absolute; top: 95px; left: 50%; right: 0; margin: auto; z-index: -1; } 
.course-view .list li:nth-child(5n)::after { display: none; } 
.course-view .list li:nth-child(7n)::after { content: ''; display: block; width: 100%; height: 2px; background: var(--color-white); position: absolute; top: 95px; left: 50%; right: 0; margin: auto; z-index: -1; } 
.course-view .list li:nth-child(12) { order: 8; } 
.course-view .list li:nth-child(11) { order: 9; } 
.course-view .list li:nth-child(10) { order: 10; } 
.course-view .list li:nth-child(9) { order: 12; } 
.course-view .list li:nth-child(8) { order: 11; } 
.course-view .list li:nth-child(12)::after { display: block; } 
.course-view .list li:nth-child(9)::after { display: none; } 

.course-view.intro.type02 .list li:nth-child(6) { order: 7; } 
.course-view.intro.type02 .list li:nth-child(6)::after { display: none; } 
.course-view.intro.type02 .list li:nth-child(7) { order: 6; } 
.course-view.intro.type02 .desc { margin-top: 30px; } 
.course-view02 .top-txt { margin: 30px 0; font-size: 1rem; line-height: 1.4; text-align: center; } 
 } 
 @media all and (max-width: 640px) { 
 .course-view .desc { line-height: 1.3; font-size: 1rem } 
 .course-view .cont { margin: 0 15px; padding-bottom: 40px; } 
 .course-view .tit-wrap .link-btn { width: 30px; height:30px; background-size: 187px; } 

 .course-view .list .img { width: 70%; } 
 .course-view .list .ico { width: 30%; } 
 
 .course-view .location,
 .course-view .info { flex-direction: column; padding: 9px; } 
 .course-view .location .transport,
 .course-view .location > a,
 .course-view .info > a { margin-left: 0px; margin-top: 8px; padding: 8px 30px; } 
 .course-view .location > span::before { width: 31px; height: 21px; background-size: 150px; background-position-y: -45px; } 
 .course-view .info { margin-top: 10px; margin-bottom: 0; } 
 } 

/* ******************* *
* 여행지찾기
* ******************* */
/* 검색 (아카이브 공통) */
.mecca-search-wrap { margin-bottom: 90px; } 
.mecca-search > div { display: flex; margin-bottom: 15px; transition: 0.4s ease; max-height: 500px; align-items: first baseline; } 
.mecca-search > div:last-child { margin-bottom: 0; } 
.mecca-search .tit { display: flex; align-items: center; font-size: 1.111rem; font-weight: 600; color: #444; min-width: 120px; padding: 2px 0; } 
.mecca-search .tit::after { content: ''; display: block; border-radius: 2px; border: 2px solid transparent; border-bottom-color: var(--color-dark-gray); border-right-color: var(--color-dark-gray); transform: rotate(-45deg) skew(0deg, 0deg); width: 6px; height: 6px; margin-left: 7px; } 
.mecca-search .mecca-cont { display: flex; flex-wrap: wrap; width: calc(100% - 100px); align-items: center; } 
.mecca-search .mecca-cont li { width: calc(14.2% - 11px); margin-right: 14px; margin-bottom: 5px; } 
.mecca-search .mecca-cont li:last-child { margin-right: 0; } 
[class*='mecca-search'] input[type=radio], 
[class*='mecca-search'] input[type=checkbox] { width: 0; height: 0; position: absolute; z-index: -1; opacity: 0; } 
[class*='mecca-search'] input[type=radio]:focus-visible + label,
[class*='mecca-search'] input[type=checkbox]:focus-visible + label { outline: 2px solid #000; } 
[class*='mecca-search'] input[type=radio] + label,
.mecca-search .mecca-cont input[type=checkbox] + label { position: relative; border-radius: 60px; padding: 24px 10px; display: block; text-align: center; border: 1px solid var(--color-light-gray02); background-color: var(--color-light-gray); transition: all .3s; font-weight: 600; cursor: pointer; color: var(--color-dark-gray); } 
[class*='mecca-search'] input[type=radio] + label:hover,
.mecca-search .mecca-cont input[type=checkbox]:not(.all-clear) + label:hover { text-decoration: underline; } 
[class*='mecca-search'] input[type=radio]:checked + label,
.mecca-search .mecca-cont input[type=checkbox]:checked + label { background-color: var(--color-green); color: #fff; border-color: var(--color-green); } 
.mecca-search .mecca-cont input[type=text] { height: 70px; width: 100%; border: 1px solid var(--color-light-gray02); font-size: 0.95em; border-radius: 60px; padding: 0px 75px; background: var(--color-light-gray); } 
.mecca-search .mecca-cont input[type=text]::placeholder { font-size: .9rem; color: var(--color-dark-gray); } 
.mecca-search-btn { background: var(--color-gray); margin-left: -179px; min-width: 179px; height: 70px; border-radius: 60px; border: none; } 
.mecca-search-btn span { display: flex; align-items: center; justify-content: center; color: var(--color-white); } 
.mecca-search-btn span::before { content: ''; display: block; width: 30px; height: 30px; background: url(../../../../resource/cwtour/images/common/layout_sprite.png)no-repeat; background-position-x: -80px; } 
.mecca-search-all-clear { display: flex; justify-content: flex-end; margin-top: 40px; } 
.mecca-search-all-clear input[type=checkbox] + label { position: relative; display: flex; border: none; align-items: center; } 
.mecca-search-all-clear input[type=checkbox]:checked + label { background: none; border: none; color: #333; display: flex; align-items: center; } 
.mecca-search-all-clear input[type=checkbox] + label::before { content: ''; display: block; width: 30px; height: 30px; box-sizing: border-box; cursor: pointer; border-radius: 50%; margin-right: 5px; border: 2px solid var(--color-border); transition: all .3s; } 
.mecca-search-all-clear input[type=checkbox]:checked + label::before { border-color: var(--color-green); background: var(--color-green); } 
.mecca-search-all-clear input[type=checkbox]:checked + label::after { content: ''; width: 14px; height: 9px; display: block; border: 3px solid var(--color-white); border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-3px); position: absolute; left: 9px; top: 0; bottom:0; margin: auto; border-radius: 3px; } 

/* 리스트 */
.mecca-list-wrap { width:100%; position: relative; margin-top: 10px; padding-top: 39px; border-top: 1px solid var(--color-border); } 
.mecca-list { display: flex; flex-wrap: wrap; gap: 20px; } 
.mecca-list > li { width: calc(50% - 10px); cursor: pointer; margin-bottom: 20px; height: auto; min-height: 300px; } 
.mecca-list > li a { display: flex; background: #fff; border: 1px solid var(--color-border); border-radius: 30px; overflow: hidden; transition: all .3s; height: 100%; } 
.mecca-list > li a:hover,
.mecca-list > li a:focus { box-shadow: 3px 3px 5px #ddd; } 
.mecca-list > li a:hover .cate, 
.mecca-list > li a:focus .cate { background: var(--color-orange); } 
.mecca-list .list-img { width: 48.24%; height: auto; position: relative; display: flex; align-items: center; background: #ddd; padding-top: 40.651%; } 
.mecca-list .list-img img { width:100%; height: 100%; transition: 0.2s; object-fit: cover; position: absolute; top: 0; left: 0; } 
.mecca-list .list-cont { font-family: 'GmarketSans', sans-serif; padding: 22px 24px 17px; display:flex; flex-direction:column; align-items: flex-start; width: 51.6%; } 
.mecca-list .list-cont .cate { background: #888; color: #fff; font-size: 0.88rem; padding: 12px 24px; border-radius: 30px; display: block; transition: all .3s; line-height: 1; margin-bottom: 10px; } 
.mecca-list .list-cont .tit { color: var(--color-tit); font-weight: 600; font-size: 1.667rem; word-break: break-all; } 
.mecca-list .list-cont .location { color: var(--color-blue); font-size: .889rem; display: flex; align-items: center; margin-bottom: 20px; } 
.mecca-list .list-cont .location::before { content: ''; display: block; width: 17px; height: 23px; background: url(../../../../resource/cwtour/images/sub/ico_location.png); margin-right: 4px; flex-shrink: 0; } 
.mecca-list .tag { display: flex; flex-wrap: wrap; margin-top: auto; } 
.mecca-list .tag li { display: block; font-size: 0.8889rem; color: var(--color-gray); background: var(--color-light-gray02); padding: 6px 15px 4px; border-radius: 30px; margin-right: 7px; font-family: 'GmarketSans', sans-serif; margin-bottom: 7px; } 


@media all and (max-width: 1199px) { 
 .mecca-search .mecca-cont { width: calc(100% - 90px); } 
 .mecca-search .tit { min-width: 90px; } 
 .mecca-search .mecca-cont li { width: calc(25% - 5px); margin-right: 5px; } 
 .mecca-search .mecca-cont input[type=radio] + label,
 .mecca-search .mecca-cont input[type=checkbox] + label { padding: 15px 10px; } 
 .mecca-search .mecca-cont input[type=text],
 .mecca-search-btn { height: 50px; } 
 .mecca-search .mecca-cont input[type=text] { padding: 0 25px; } 

 .mecca-list .list-cont { padding: 15px; } 
 .mecca-list .list-cont .location { margin-bottom: 0; } 
 .mecca-list .list-cont .cate { padding: 8px 24px; } 
 .mecca-list .list-cont .tit { margin: 13px 0 5px } 
 .mecca-list .tag { margin-top: 15px; } 
 .mecca-list .tag li { margin-bottom: 4px; margin-right: 4px; } 
 } 
@media all and (max-width: 1024px) { 
 .mecca-search-wrap { margin-bottom: 60px; } 
 .mecca-search .mecca-cont input[type=radio] + label,
 .mecca-search .mecca-cont input[type=checkbox] + label { padding: 8px; } 
 .mecca-search .mecca-cont input[type=text],
 .mecca-search-btn { height: 40px; } 
 .mecca-search-btn { min-width: 100px; margin-left: -100px; } 
 .mecca-search-btn span::before { width: 20px; height: 20px; background-size: 150px; background-position: -65px -2px; } 
 .mecca-search-all-clear { margin-top: 20px; } 
 .mecca-search-all-clear input[type=checkbox] + label::before { width: 22px; height: 22px; } 
 .mecca-search-all-clear input[type=checkbox]:checked + label::after { width: 7px; height: 4px; border-width: 2px; border-radius: 0; left: 7px; } 
 .mecca-list-wrap { margin-top: 20px; padding-top: 20px; } 
 .mecca-list { gap: 10px; } 
 .mecca-list > li { width: calc(50% - 5px); margin-bottom: 5px; } 
 .mecca-list > li a { flex-direction: column; } 
 .mecca-list .list-img,
 .mecca-list .list-cont { width: 100%; } 
 .mecca-list .list-img { padding-top: 60%; } 
 
 } 
@media all and (max-width: 640px) { 
 .mecca-list .list-cont .tit { font-size: 1.5rem } 
 .mecca-search .tit { padding: 0; margin-bottom: 10px; width: 100%; } 
 .mecca-search > div { flex-wrap: wrap; } 
 .mecca-search .mecca-cont { width: 100%; } 

 .mecca-search .tit::after { display: none; } 
 .mecca-search .mecca-cont li { width: calc(33.33% - 5px); } 

 } 
@media all and (max-width: 480px) { 

 .mecca-search .mecca-cont input[type=text], 
 .mecca-search-btn { height: 40px; } 
 .mecca-list > li { width: 100%; } 
 .mecca-search .mecca-cont input[type=checkbox] + label,
 .mecca-search .mecca-cont input[type=radio] + label { padding: 8px 0; font-weight: 500; } 
 } 

 /* 상세 */
 @keyframes WaveAnimation { 
 0% { 
 transform: translateX(-100%); 
 } 
 50%, 100% { 
 transform: translateX(100%); 
 } 
 } 
.mecca-info-wrap { display: flex; align-items: flex-start; margin-bottom: 210px; } 
.mecca-info-wrap .img-wrap { width: 49.2%; border-radius: 10px; overflow: hidden; position: relative; padding-top: 30%; } 
.mecca-info-wrap .img-wrap::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; animation: WaveAnimation 1.6s linear 0.5s infinite; background: linear-gradient(90deg, transparent, #ddd, transparent); transform: translateX(-100px); z-index: -1; } 
.mecca-info-wrap .img-wrap img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; } 
.mecca-info-wrap.festival .img-wrap { width: 44.2%; padding-top: 53%; } 
.mecca-info-wrap.festival .img-wrap img { object-fit: fill; } 
.mecca-contents-wrap { width: calc(100% - 49.2% - 75px); margin-left: auto; } 
.mecca-contents-wrap .title-wrap { margin-bottom: 50px; padding-bottom: 25px; border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; align-items: center; } 
.mecca-contents-wrap .title { font-size: 2.556rem; font-family: 'GmarketSans', sans-serif; color: var(--color-black); font-weight: 600; text-overflow: ellipsis; overflow: hidden; max-width: calc(100% - 107px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-right: auto; } 
.mecca-contents-wrap .desc a { display: flex; align-items:center; justify-content: center; width: 55px; height: 55px; border-radius: 50%; position: relative; margin-bottom: 16px; } 
.mecca-contents-wrap .desc a span { background:rgba(255, 88, 53, .5); color: #fff; font-size: .78rem; text-align: center; position: absolute; top: 100%; margin-top: 3px; line-height: 1; padding: 3px; border-radius: 5px; display: flex; align-items: center; justify-content: center; } 
.mecca-contents-wrap .homepage a { background: var(--color-orange) url(../../../../resource/cwtour/images/sub/btn_home.png); } 
.mecca-contents-wrap .vr a { background: var(--color-orange) url(../../../../resource/cwtour/images/sub/btn_vr.png); margin-left: 5px; } 
.mecca-contents-wrap .checkin a { background:  url(../../../../resource/cwtour/images/sub/btn_checkin.png) no-repeat; background-size:cover; margin-left: 5px; } 
.mecca-contents-wrap ul { position: relative; } 
.mecca-contents-wrap li { display: flex; align-items: flex-start; } 
.mecca-contents-wrap li span,
.mecca-contents-wrap li a { font-size: 1.111rem; margin-bottom: 25px; } 
.mecca-contents-wrap li .tit { font-weight: 700; color: var(--color-black); min-width: 115px; } 
.mecca-contents-wrap li .txt { color: var(--color-gray); } 
.mecca-contents-wrap li div.txt { display: flex; flex-wrap: wrap; margin-bottom: 25px; } 
.mecca-contents-wrap .btn-map-link { position: absolute; right: 0; top: -15px; display: flex; align-items: center; font-weight: 600; color: var(--color-orange); font-size: 1.112rem; background: #f5f5f2; padding: 10px 35px; border-radius: 30px; transition: all .3s } 
.mecca-contents-wrap .btn-map-link::after { content: ''; display: block; width: 30px; height: 30px; background: url(../../../../resource/cwtour/images/sub/tourview_spr.png) no-repeat -40px -180px; margin-left: 9px; } 
.mecca-contents-wrap .btn-map-link:hover,
.mecca-contents-wrap .btn-map-link:focus { color: var(--color-yellow); background:var(--color-green) } 
.mecca-contents-wrap .btn-map-link:hover::after,
.mecca-contents-wrap .btn-map-link:focus::after { background-position-x: -80px } 
.mecca-contents-wrap .convenience-item { height: fit-content; position: relative; margin-right: 13px; } 
.mecca-contents-wrap .convenience-item:last-child { margin-right: 0; } 
.mecca-contents-wrap .convenience-item::before { content: ''; display: block; width: 80px; height: 80px; border: 1px solid var(--color-orange); border-radius: 50%; background: url(../../../../resource/cwtour/images/sub/tourview_spr.png) no-repeat; margin-bottom: 5px; } 
.mecca-contents-wrap .convenience-item.on::before { background-color: var(--color-orange); background-position-y: -90px; } 
.mecca-contents-wrap .convenience-item:nth-child(2)::before { background-position-x: -90px; } 
.mecca-contents-wrap .convenience-item:nth-child(3)::before { background-position-x: -180px; } 
.mecca-contents-wrap .convenience-item:nth-child(4)::before { background-position-x: -270px; } 
.mecca-contents-wrap .convenience-item:nth-child(5)::before { background-position-x: -360px; } 
.mecca-contents-wrap .convenience-item:nth-child(6)::before { background-position-x: -450px; } 
.mecca-contents-wrap .name { opacity: 0; font-size: .778rem; background: #f5f5f2; padding: 5px 16px; border-radius: 5px; margin-bottom: 0; position: absolute; top: 100%; } 
.mecca-contents-wrap .convenience-item:hover .name,
.mecca-contents-wrap .convenience-item:focus .name { opacity: 1; } 
.mecca-weather { font-family: 'GmarketSans', sans-serif; width: fit-content; margin-top: -53px; margin-bottom: 53px; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; } 
.mecca-weather .city { background: var(--color-orange); color: #fff; font-weight: 600; padding: 12px 22px; width: fit-content; line-height: 1; border-radius: 30px; margin-bottom: 5px; } 
.weather-info { font-family: 'GmarketSans', sans-serif; display: flex; align-items: center; margin-bottom: 15px; width: 100%; } 
.weather-info .img { width: 30px; height: 30px; display: inline-block; } 
.weather-info .color { color: var(--color-blue); } 
.weather-info span:not(.img) { position: relative; padding-left: 15px; margin-left: 10px; } 
.weather-info span:not(.img)::before { content: ''; display: block; width: 5px; height: 5px; background: var(--color-border); border-radius: 50%; position: absolute; top: 0; bottom: 0; margin: auto; left: 0; } 

.mecca-tab .tab-list { display: flex; border-bottom: 1px solid var(--color-border); justify-content: center; top: 0px; z-index: 2; background: var(--color-white); } 
.mecca-tab .tab-list.fixed { position: fixed; width: 100%; max-width: 1500px; z-index: 10; } 
.mecca-tab .tab-list li { width: 15%; } 
.mecca-tab .tab-list li a { display: block; font-size: 1.556rem; color: #888; font-weight: 600; font-family: 'GmarketSans', sans-serif; position: relative; text-align: center; padding: 24px 0; transition: color .2s; } 
.mecca-tab .tab-list li a:hover,
.mecca-tab .tab-list li a:focus { color: var(--color-black) } 
.mecca-tab .tab-list li a.active { color: var(--color-black) } 
.mecca-tab .tab-list li a.active::after { content: ''; display: block; position: absolute; bottom: 0; width: 100%; height: 5px; background: var(--color-green); } 
.mecca-tab .tab-container .title { font-family: 'GmarketSans', sans-serif; font-size: 1.556rem; color: var(--color-black); font-weight: 600; margin-bottom: 33px; } 
.mecca-tab .tab-container .s-title { display: flex; align-items: stretch; font-family: 'GmarketSans', sans-serif; font-size: 1.222rem; color: var(--color-black); font-weight: 300; } 
.mecca-tab .tab-container .s-title::before { content: ''; display: block; width: 4px; height: 20px; background-color: var(--color-orange); margin-right: 15px; } 
.mecca-tab .tab-content:first-child { border-bottom: 1px solid var(--color-border); padding-bottom: 104px; padding-top: 80px; } 

.mecca-tab .tab-list.fixed + .tab-container .tab-content:first-child { padding-top: 150px } 

.mecca-gallery-wrap { position: relative; margin: 0 127px; display: none; } 
.mecca-gallery-wrap.able { display: block; } 
.mecca-gallery-wrap.able .mecca-gallery-ctrl,
.mecca-gallery-wrap.able .mecca-gallery .nums { display: block; } 
.mecca-gallery-wrap.able .swiper-wrapper { background: none; height: fit-content; } 
.mecca-gallery-wrap.able .mecca-gallery-thumb { display: block; } 
.mecca-gallery { margin-bottom: 21px; position: relative; } 
.mecca-gallery .swiper-wrapper { background: var(--color-light-gray) url(/resource/images/no_img3.png) no-repeat center; background-size: cover; height: 500px; } 
.mecca-gallery .swiper-slide { aspect-ratio: 4/3; overflow: hidden; } 
.mecca-gallery .swiper-slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 
.mecca-gallery-thumb { display: none; overflow: hidden; } 
.mecca-gallery-thumb .swiper-slide { padding-top: 13%; } 
.mecca-gallery-thumb .swiper-slide:not(.swiper-slide-thumb-active)::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-white); opacity: .7; } 
.mecca-gallery-thumb .swiper-slide img { position: absolute; height: 100%; z-index: -1; width: 100%; top: 0; } 
.mecca-gallery-ctrl { display: none; } 
.mecca-gallery-ctrl .btn { position: absolute; top: 32%; width: 100%; height: fit-content; display: flex; justify-content: space-between; z-index: 1; } 
.mecca-gallery-ctrl button { position: relative; border: 1px solid var(--color-green); width: 80px; height: 80px; border-radius: 50%; background: none; } 
.mecca-gallery-ctrl button::before { content: ''; display:block; box-sizing: border-box; } 
.mecca-gallery-ctrl .btn-prev { margin-left: -110px; left: 0; } 
.mecca-gallery-ctrl .btn-next { margin-right: -110px; } 
.mecca-gallery-ctrl .btn-prev::before,
.mecca-gallery-ctrl .btn-next::before { width: 16px; height: 16px; border-width: 2px; border-style: solid; border-color: transparent var(--color-green) var(--color-green) transparent; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 
.mecca-gallery-ctrl .btn-prev::before { transform: translateX(3px) rotate(135deg); } 
.mecca-gallery-ctrl .btn-next::before { transform: translateX(-3px) rotate(-45deg); } 
.mecca-gallery .nums { display: none; position: absolute; z-index: 1; bottom: 32px; left: 0; right: 0; margin: auto; width: fit-content; font-size: .889rem; color: #fff; background: var(--color-black); padding: 10px 50px; border-radius: 30px; } 
.mecca-gallery .nums .current { font-weight: 800; } 

.mecca-tab .contents-area { margin-bottom: 90px; padding-top: 50px; line-height: 1.6; } 
.mecca-tab .contents-area p[data-start], .mecca-tab .contents-area p[data-end] { margin-bottom: 15px; } 
.mecca-tab .tag-wrap { padding-bottom: 100px } 
.mecca-tab .tag-wrap .title { display: flex; align-items: center; } 
.mecca-tab .tag-wrap .title::before { content: ''; display: block; width: 30px; height: 30px; background: url(../../../../resource/cwtour/images/sub/tourview_spr.png) no-repeat -240px -180px; margin-right: 10px; } 
.mecca-tab .tag-wrap .txt { display: flex; align-items: center; flex-wrap: wrap; } 
.mecca-tab .tag-item { display: block; font-size: .889rem; background: #f5f5f2; border-radius: 5px; color: var(--color-gray); padding: 9px 17px; margin-right: 6px; margin-bottom: 6px; } 
.mecca-tab .blog-wrapper { padding: 90px 0; position: relative; height: fit-content; } 
.mecca-tab .blog-wrapper::before { content: ''; display: block; width: 200%; height: 100%; position: absolute; left: -50%; top: 0; background: #f5f5f2; z-index: -1; } 
.mecca-tab .blog-slide { overflow: hidden; } 
.mecca-tab .blog-slide .swiper-slide a { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid black; height: 240px; padding: 25px; border-radius: 15px; transition: all .3s; } 
.mecca-tab .blog-slide .swiper-slide a:hover,
.mecca-tab .blog-slide .swiper-slide a:focus { box-shadow: 0 0 10px rgba(0, 0, 0, .4); } 
.mecca-tab .blog-slide > * { font-size: 0.8889rem; } 
.mecca-tab .blog-slide .swiper-wrapper { padding: 10px; margin: 0 -10px; } 
.mecca-tab .blog-slide .tit { font-size: 1.3333rem; font-weight: 800; margin-bottom: 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 
.mecca-tab .blog-slide .cont { line-height: 1.6; } 
.mecca-tab .blog-slide .info { display: flex; align-items: center; margin-top: auto; } 
.mecca-tab .blog-slide .name { color: #2db400; margin-right: 10px; display: flex; align-items: center; } 
.mecca-tab .blog-slide .name::after { content: ''; display: block; width: 1px; height: 15px; background-color: var(--color-border); margin-left: 10px; } 
.mecca-tab .blog-slide .date { color: #959595; display: flex; align-items: center; } 
.mecca-tab .blog-slide .date::before { content: ''; display: block; width: 30px; height: 30px; background: url(../../../../resource/cwtour/images/sub/tourview_spr.png) no-repeat -200px -180px; } 
.blog-ctrl { width: 100%; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 30px; bottom: 0; margin: auto; } 
.blog-ctrl button { position: relative; border: 1px solid var(--color-green); width: 60px; height: 60px; border-radius: 50%; background: none; } 
.blog-ctrl button::before { content: ''; display:block; box-sizing: border-box; } 
.blog-ctrl .btn-prev { margin-left: -110px; left: 0; } 
.blog-ctrl .btn-next { margin-right: -110px; } 
.blog-ctrl .btn-prev::before,
.blog-ctrl .btn-next::before { width: 10px; height: 10px; border-width: 2px; border-style: solid; border-color: transparent var(--color-green) var(--color-green) transparent; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 
.blog-ctrl .btn-prev::before { transform: translateX(3px) rotate(135deg); } 
.blog-ctrl .btn-next::before { transform: translateX(-3px) rotate(-45deg); } 

.surr-map-wrapper { display: flex; flex-wrap: wrap; margin-top: 100px; } 
.surr-tab { width: 100%; margin-bottom: 21px; } 
.surr-tab > button { border: none; background: none; color: var(--color-gray); font-size: 1.1111rem; margin-right: 42px; } 
.surr-tab > button.on { color: var(--color-green); border-bottom: 5px solid var(--color-green); padding: 8px; font-weight: 800; } 
.surr-map { width: calc(50% - 12px); height: 606px; } 
.surr-list { width: calc(50% - 12px); height: 100%; margin-left: auto; background: #f5f5f2; padding: 40px; border-radius: 10px; } 
.surr-list > div.on ul { max-height: 526px; min-height: 526px; overflow-y: auto; margin-right: -20px; } 
.surr-list ul li { border-bottom: 1px dashed var(--color-border); display: grid; align-items: center; grid-template-columns: calc(100% - 130px) auto; padding-bottom: 20px; margin-bottom: 20px; } 
.surr-list ul li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } 
.surr-list ul li.no-data { display: flex; align-items: center; justify-content: center; height: 100%; } 
.surr-list .title-wrap { display: flex; align-items: center; grid-column: 1; grid-row: 1; margin-bottom: 10px; } 
.surr-list .title-wrap .tit { color: var(--color-green); font-weight: 700; font-size: 1.3333rem; } 
.surr-list .btn-wrap { margin-top: 0; margin-left: 20px; } 
.surr-list .btn-wrap button { background: #dedede; border: none; border-radius: 5px; font-size: 0.7778rem; color: var(--color-gray); padding: 6px 16px; margin-right: 6px; display: flex; align-items: center; transition: all .3s; } 
.surr-list .btn-wrap button::after { content: ''; display: block; width: 5px; height: 5px; border-width: 1px; border-style: solid; border-color: transparent var(--color-gray) var(--color-gray) transparent; transform: rotate(-45deg); transition: all .3s; } 
.surr-list .btn-wrap button:hover,
.surr-list .btn-wrap button:focus { color: var(--color-yellow); background: var(--color-green); } 
.surr-list .btn-wrap button:hover::after,
.surr-list .btn-wrap button:focus::after { border-color: transparent var(--color-yellow) var(--color-yellow) transparent; } 
.surr-list .tel { color: var(--color-gray); grid-column: 1; grid-row: 2; margin-bottom: 4px; } 
.surr-list .addr { color: var(--color-gray); grid-column: 1; grid-row: 3; } 
.surr-list .btn-link { grid-column: 2; grid-row: 1 / span 3; display: flex; border: 1px solid var(--color-green); border-radius: 10px; width: fit-content; align-items: center; justify-content: center; color: var(--color-green); padding: 9px 19px; font-weight: 600; transition: all .3s; } 
.surr-list .btn-link::after { content: ''; display: block; width: 30px; height: 30px; background: url(../../../../resource/cwtour/images/sub/tourview_spr.png) no-repeat -120px -180px; } 
.surr-list .btn-link:hover,
.surr-list .btn-link:focus { background: var(--color-green); color: var(--color-yellow); } 
.surr-list .btn-link:hover::after,
.surr-list .btn-link:focus::after { background-position-x: -160px; } 
.surr-list ul::-webkit-scrollbar { width: 10px; } 
.surr-list ul::-webkit-scrollbar-thumb { background-color: #c4c6c8; border-radius: 10px; } 
.surr-list ul::-webkit-scrollbar-track { background-color: #e9ecef; } 

.info-window { padding: 10px; background-color: var(--color-white); color: var(--color-green); border: 1px solid var(--color-green); border-radius: 5px; } 

@media all and (max-width: 1500px) { 
 .mecca-contents-wrap { width: calc(100% - 49.2% - 30px); } 
 .mecca-contents-wrap .btn-map-link { position: static; margin-bottom: 20px; margin-left: auto; } 
 .blog-ctrl { bottom: inherit; width: fit-content; right: 0; top: 45px; } 
 .blog-ctrl .btn-prev,
 .blog-ctrl .btn-next { margin: 0 10px; } 
 } 

@media all and (max-width: 1199px) { 
 .mecca-info-wrap { margin-bottom: 80px; } 
 .mecca-contents-wrap .title-wrap { margin-bottom: 25px; padding-bottom: 20px; } 
 .mecca-contents-wrap .btn-map-link { padding: 5px 25px; } 
 .mecca-contents-wrap .convenience-item { margin-right: 5px; min-width: 84px; display: flex; flex-direction: column; align-items: center; margin-bottom: 5px; } 
 .mecca-contents-wrap .name { opacity: 1; position: static; padding: 5px 10px; } 
 .mecca-contents-wrap .convenience-item::before { width: 60px; height: 60px; background-size: 410px; } 
 .mecca-contents-wrap .convenience-item.on::before { background-position-y: -70px; } 
 .mecca-contents-wrap .convenience-item:nth-child(2)::before { background-position-x: -70px; } 
 .mecca-contents-wrap .convenience-item:nth-child(3)::before { background-position-x: -140px; } 
 .mecca-contents-wrap .convenience-item:nth-child(4)::before { background-position-x: -210px; } 
 .mecca-contents-wrap .convenience-item:nth-child(5)::before { background-position-x: -280px; } 
 .mecca-contents-wrap .convenience-item:nth-child(6)::before { background-position-x: -349px; } 

 .mecca-tab .tab-list { position: static; } 
 .mecca-tab .tab-list li { width: 20%; } 
 .mecca-tab .tab-list li a { padding: 15px 0; } 
 .mecca-gallery-ctrl button { width: 60px; height: 60px; background-color: rgba(255,255,255,.8); } 
 .mecca-gallery-ctrl .btn-prev { margin-left: -30px; } 
 .mecca-gallery-ctrl .btn-next { margin-right: -30px; } 
 .mecca-gallery-wrap { margin: 0 30px; } 

 .surr-map,
 .surr-list { width: 100%; } 
 .surr-map { height: 500px; } 
 .surr-list > div.on ul { max-height: 300px; min-height: auto; } 
 } 

@media all and (max-width: 1024px) { 
 .mecca-info-wrap { flex-direction: column; position: relative; } 
 .mecca-contents-wrap,
 .mecca-info-wrap .img-wrap,
 .mecca-info-wrap.festival .img-wrap { width: 100%; } 
 .mecca-info-wrap .img-wrap { padding-top: 50%; margin-top: 150px; } 
 .mecca-info-wrap.festival .img-wrap { padding-top: 110% } 
 .mecca-contents-wrap { margin-top: 20px; } 
 .mecca-contents-wrap .title-wrap { width: 100%; padding-bottom: 10px; margin-bottom: 10px; position: absolute; top: 0; } 
 .mecca-contents-wrap ul { width: 100%; } 
 .mecca-contents-wrap .desc a { margin-bottom: 30px; } 
 .mecca-contents-wrap li .tit { min-width: 90px; margin-bottom: 15px; } 
 .mecca-contents-wrap li .txt { margin-bottom: 15px } 
 .mecca-contents-wrap li span { font-size: 1rem; } 
 .mecca-contents-wrap .btn-map-link { padding: 5px 15px; margin-left: auto; margin-bottom: 15px } 
 .mecca-contents-wrap .btn-map-link::after { background-size: 400px; width: 20px; height: 20px; background-position: -33px -137px; margin-left: 5px; } 
 .mecca-contents-wrap .btn-map-link:hover::after, .mecca-contents-wrap .btn-map-link:focus::after { background-position-x: -61px; } 
 .mecca-contents-wrap .convenience-item { min-width: 67px; } 

 .surr-list { padding: 20px; margin-top: 10px; } 
 .surr-list .btn-link { border-radius: 5px; padding: 5px 10px; } 
 } 


@media all and (max-width: 640px) { 
 .mecca-info-wrap { margin-bottom: 10px; } 
 .mecca-info-wrap .img-wrap { margin-top: 118px } 
 .weather-info { margin-bottom: 7px } 
 .weather-info .img { width: 22px; height: 22px; } 
 .mecca-contents-wrap .title { font-size: 1.8rem; max-width: calc(100% - 107px); margin-right: auto; } 
 .mecca-contents-wrap .desc a { width: 35px; height: 35px; background-size: cover; margin-bottom: 30px; } 
 .mecca-contents-wrap .vr a { margin-left: 15px } 
 .mecca-contents-wrap li .tit { min-width: 65px; } 
 .mecca-contents-wrap .btn-map-link { font-size: .9rem; padding: 5px 10px; } 
 .mecca-contents-wrap .btn-map-link::after { background-size: 330px; width: 15px; height: 15px; background-position: -28px -114px; margin-left: 5px; } 
 .mecca-contents-wrap .btn-map-link:hover::after, .mecca-contents-wrap .btn-map-link:focus::after { background-position-x: -51px; } 
 .mecca-contents-wrap .convenience-item::before { width: 40px; height: 40px; background-size: 265px; } 
 .mecca-contents-wrap .convenience-item.on::before { background-position-y: -45px; } 
 .mecca-contents-wrap .convenience-item:nth-child(2)::before { background-position-x: -45px; } 
 .mecca-contents-wrap .convenience-item:nth-child(3)::before { background-position-x: -90px; } 
 .mecca-contents-wrap .convenience-item:nth-child(4)::before { background-position-x: -135px; } 
 .mecca-contents-wrap .convenience-item:nth-child(5)::before { background-position-x: -180px; } 
 .mecca-contents-wrap .convenience-item:nth-child(6)::before { background-position-x: -225px; } 
 .mecca-contents-wrap .name { padding: 3px 7px; } 
 .mecca-tab .tab-list { margin-bottom: 10px; } 
 .mecca-tab .tab-list li { width: 25%; } 
 .mecca-tab .tab-list li a { font-size: 1.2rem; padding: 10px 0; } 
 .mecca-tab .tab-list li a.active::after { height: 3px } 
 .mecca-tab .tab-content:first-child { padding-bottom: 60px; padding-top: 0; } 
 .mecca-tab .tab-container .title { margin-bottom: 20px; font-size: 1.3rem; } 
 .mecca-tab .tag-wrap { padding-bottom: 0; } 
 .mecca-tab .tag-wrap .title::before { width: 20px; height: 20px; background-size: 440px; background-position: -202px -151px; margin-right: 4px; } 
 .mecca-gallery-wrap { margin: 0; } 
 .mecca-gallery .swiper-slide { padding-top: 70%; } 
 .mecca-gallery .nums { bottom: 15px; padding: 7px 30px; } 
 .mecca-gallery-ctrl button { width: 34px; height: 34px; } 
 .mecca-gallery-ctrl .btn-prev::before, .mecca-gallery-ctrl .btn-next::before { width: 10px; height: 10px; } 
 .mecca-gallery-ctrl .btn-prev { margin-left: -10px; } 
 .mecca-gallery-ctrl .btn-next { margin-right: -10px; } 
 .mecca-tab .contents-area { margin-bottom: 60px; } 
 .mecca-tab .blog-wrapper { padding: 40px 0; margin: 60px 0 0; } 

 .mecca-tab .blog-slide .tit { font-size: 1.1rem; margin-bottom: 10px; font-weight: 600; } 
 .mecca-tab .blog-slide .swiper-slide a { height: 200px; } 
 .blog-ctrl { top: 35px; } 
 .blog-ctrl button { width: 34px; height: 34px; } 
 .blog-ctrl .btn-prev,
 .blog-ctrl .btn-next { margin: 0 5px; } 
 

 .surr-map-wrapper { padding-top: 60px; margin-top: 0; } 
 .surr-tab { text-align: center; } 
 .surr-tab > button { margin-right: 20px; } 
 .surr-tab > button.on { font-weight: 600; border-width: 3px; } 
 .surr-map { height: 300px; width: 80%; margin: 0 auto; } 
 .surr-list { width: 80%; margin: 10px auto 0; } 
 .surr-list ul li { padding-bottom: 10px; margin-bottom: 10px; align-items: flex-start; } 
 .surr-list .addr { grid-column: 1 / 3; } 
 .surr-list .title-wrap { flex-direction: column; width: 100%; align-items: flex-start; margin-bottom: 5px; } 
 .surr-list .title-wrap .tit { font-size: 1.111rem; font-weight: 600; } 
 .surr-list .btn-wrap { margin-left: 0; margin-top: 5px; } 
 .surr-list .btn-wrap button { padding: 5px 10px } 
 .surr-list .btn-link { margin-left: auto; margin-right: 10px; grid-row: 1; } 
 .surr-list .btn-link::after { background-size: 460px; background-position: -105px -160px; width: 20px; height: 20px; } 
 .surr-list .btn-link:hover::after,
.surr-list .btn-link:focus::after { background-position-x: -140px; } 

 } 

 @media all and (max-width: 520px) { 
 .mecca-tab .tab-list { flex-wrap: wrap; } 
 .mecca-tab .tab-list li { width: 50%; } 
 } 


/* ******************* *
* 축제 캘린더
* ******************* */
 .festival-cal { margin-bottom: 60px; } 
 .festival-list-form .title-wrap { display: flex; align-items: baseline; margin-bottom: 30px; } 
 .festival-list-form .title-wrap p { font-size: 0.8889rem; margin-left: 12px; font-weight: 600; } 
 .festival-list-form .title { font-family: 'GmarketSans', sans-serif; font-size: 1.5556rem; font-weight: 600; } 
 .festival-list-form .title .color { color: var(--color-orange); } 
 .festival-cal .cal-month { display: flex; align-items: center; justify-content: center; background: #f5f4f2; border-radius: 20px 20px 0 0; padding: 45px 0 20px; } 
 .festival-cal .cal-month p { font-size:1.5556rem; font-weight: 600; color: var(--color-black); } 
 .festival-cal .cal-month p .bold { font-weight: 900; } 
 .festival-cal .cal-month > a { position: relative; background: none; margin: 0 40px; } 
 .festival-cal .cal-month > a::before { content: ''; display:block; box-sizing: border-box; } 
 .festival-cal .cal-month > a.btn-prev::before,
 .festival-cal .cal-month > a.btn-next::before { width: 12px; height: 12px; border-width: 2px; border-style: solid; border-color: transparent var(--color-gray) var(--color-gray) transparent; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 
 .festival-cal .cal-month > a.btn-prev::before { transform: translateX(3px) rotate(135deg); } 
 .festival-cal .cal-month > a.btn-next::before { transform: translateX(-3px) rotate(-45deg); } 

 .festival-cal .cal-tbl { border-bottom: 1px solid var(--color-border); } 
 .festival-cal .cal-tbl thead { position: relative; } 
 .festival-cal .cal-tbl thead::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #f5f4f2; border-radius: 0 0 20px 20px; z-index: -1; } 
 .festival-cal .cal-tbl thead th { padding: 20px 0; font-size: 0.8889rem; } 
 .festival-cal .cal-tbl thead th.sun { color: var(--color-orange); } 
 .festival-cal .cal-tbl tbody td p { font-size: 1.5556rem; } 
 .festival-cal .cal-tbl tbody td .num { color: var(--color-gray); display: flex; flex-direction: column; align-items: center; } 
 .festival-cal .cal-tbl tbody td .num::after { content: ''; display: block; width: 6px; height: 6px; border-width: 1px; border-style: solid; border-color: transparent var(--color-gray) var(--color-gray) transparent; transform: rotate(45deg); } 
 .festival-cal .cal-tbl tbody td a { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 55px; margin: 10px auto 10px; height: 80px; } 
 .festival-cal .cal-tbl tbody td a.today { background: var(--color-green); color: #fff; border-radius: 50px; } 
 .festival-cal .cal-tbl tbody td a.sun { color: var(--color-orange); } 
 .festival-cal .cal-tbl tbody td a.today .num { color: var(--color-yellow); } 
 .festival-cal .cal-tbl tbody td a.today .num::after { border-color: transparent var(--color-yellow) var(--color-yellow) transparent; } 
 .festival-cal .cal-tbl tbody td a:not(.date) { height: 0; margin: 0; } 

 .festival-list-wrap .title { margin-bottom: 30px; } 
 .festival-list { display: flex; flex-wrap: wrap; } 
 .festival-list li { width: calc(25% - 24px); margin-right: 24px; margin-bottom: 24px; } 
 .festival-list li:nth-child(4n) { margin-right: 0; } 
 .festival-list li a:hover .festival-img, 
 .festival-list li a:focus .festival-img { box-shadow: 0px 0px 15px rgba(0,0,0,.5); } 
 .festival-img { position: relative; padding-top: 137.255%; border-radius: 30px; overflow: hidden; margin-bottom: 21px; transition: all .3s; } 
 .festival-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
 .festival-img .group { position: absolute; z-index: 1; display: flex; align-items: center; width: 60px; height: 60px; justify-content: center; border-radius: 10px; margin: 22px; font-weight: 600; } 
 .festival-img .group.festival { color: var(--color-white); background: var(--color-orange); top: 0; left: 0; } 
 .festival-img .group.event { color: var(--color-green); background: #fceea3; top: 0; left: 0; } 
 .festival-info .cate { display: flex; } 
 .festival-info .cate > span { font-size: 0.7778rem; border-radius: 5px; padding: 6px 23px; } 
 .festival-info .cate .area { color: var(--color-green); border: 1px solid var(--color-green); background: var(--color-white); margin-right: 6px; } 
 .festival-info .cate .state { color: var(--color-gray); background: var(--color-light-gray03); } 
 .festival-info .cate .state.ing { background-color: var(--color-green); color: var(--color-white); } 
 .festival-info .tit { font-size: 1.6667rem; font-weight: 800; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 22px 0 12px; color: var(--color-black); } 
 .festival-info .date { font-size: 0.8889rem; font-weight: 600; color: #2a2a2a; } 

 @media all and (max-width: 1024px) { 
 .festival-cal .cal-month { padding: 20px 0 10px; border-radius: 10px 10px 0 0; } 
 .festival-cal .cal-tbl thead::before { border-radius: 0 0 10px 10px; } 
 .festival-cal .cal-tbl tbody td a { margin: 15px auto 0; } 
 .festival-list li { width: calc(33.33% - 10px); margin-right: 15px; margin-bottom: 15px; } 
 .festival-list li:nth-child(4n) { margin-right: 15px; } 
 .festival-list li:nth-child(3n) { margin-right: 0; } 
 .festival-img { border-radius: 15px; margin-bottom: 10px; } 
 .festival-img .group { width: 40px; height: 40px; margin: 15px; } 
 .festival-info .tit { margin: 10px 0 5px; font-size: 1.1rem; font-weight: 700; } 
 .festival-info .cate > span { padding: 5px 15px; } 
 
 } 
@media all and (max-width: 640px) { 
 .festival-cal .cal-month p .bold { font-weight: 700 } 
 .festival-list-form .title-wrap { flex-direction: column; margin-bottom: 15px; } 
 .festival-list-form .title-wrap p { margin-left: 0; margin-top: 3px; font-weight: 400; } 
 .festival-cal .cal-month p { font-size: 1.3rem; font-weight: 400; } 
 .festival-cal .cal-month > a.btn-prev::before, .festival-cal .cal-month > a.btn-next::before { width: 10px; height: 10px; } 
 .festival-cal .cal-tbl thead th { padding: 10px 0; font-size: .8rem; } 
 .festival-cal .cal-tbl tbody td a { margin: 5px auto 0px; height: auto; padding: 10px; width: fit-content; } 
 .festival-cal .cal-tbl tbody td p { font-size: 1.2rem; } 
 .festival-cal .cal-tbl tbody td a .num { font-size: .8rem; } 
 .festival-cal .cal-tbl tbody td .num::after { width: 3px; height: 3px; } 
 .festival-list-wrap .title { margin-bottom: 15px; } 
 } 

@media all and (max-width: 480px) { 
 .festival-list { justify-content: space-between; } 
 .festival-list li { width: calc(50% - 5px); margin-right: 0; margin-bottom: 30px; } 
 .festival-list li:nth-child(4n) { margin-right: 0px; } 
 .festival-list li:nth-child(3n) { margin-right: 0px; } 
 .festival-info .tit { font-weight: 600 } 
 .festival-info .date { font-weight: 400 } 
 } 


/* ******************* *
* 관광지도
* ******************* */
.map-wrapper { display: flex; justify-content: space-between; position: relative; height: calc(100vh - 127px); overflow: hidden; } 
.map-search { width: 400px; position: absolute; z-index: 9; transition: left 0.7s cubic-bezier(0.25, 0.1, 0.15, 1); left:0; } 
.map-search.closed { left: -450px; } 
.map-search-top { padding: 50px 24px 20px; background-color: #ebeae5; } 
.map-search-top .tit { font-size: 1.4444rem; text-align: center; font-family: 'GmarketSans', serif; font-weight: 600; color: var(--color-green); display: flex; align-items: center; justify-content: center; margin-bottom: 23px; } 
.map-search-top .tit:before { content: ''; display: block; width: 30px; height: 30px; margin-right: 5px; background: url(../../../../resource/cwtour/images/sub/map_spr.png) no-repeat; } 
.map-search-top form { display: flex; flex-wrap: wrap; justify-content: space-between; } 
.map-select { width: calc(50% - 3px); position: relative; } 
.map-select::after { content: ''; display: block; width: 30px; height: 30px; background: url(../../../../resource/cwtour/images/sub/map_spr.png) no-repeat -160px; position: absolute; right: 5px; top: 0; bottom: 0; margin: auto; } 
.map-select select { padding: 10px; width: 100%; border-radius: 30px; color: var(--color-gray); font-size: 0.8889rem; background-color: white; border: none; height: 48px; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
.map-select select::-ms-expand { display: none; } 
.map-search-input { margin-top: 7px; width: 100%; display: flex; } 
.map-search-input input { padding: 10px; width: calc(100% - 52px); border-radius: 30px; color: var(--color-gray); font-size: .889rem; border:0; height: 48px; } 
.map-search-input .btn-map-search { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; font-size: 0; text-indent: -9999em; background: var(--color-gray); cursor: pointer; border-radius: 50%; margin-left: -48px; } 
.map-search-input .btn-map-search::before { content: ''; display: block; background: url(../../../../resource/cwtour/images/sub/map_spr.png) no-repeat -40px 0; width: 30px; height: 30px; } 
.map-search-cont { display: flex; justify-content: space-between; align-items: center; margin-top: 35px; } 
.map-search-result { color: var(--color-gray); font-size: .889rem; position: relative; padding-left: 20px; } 
.map-search-result .color { color: var(--color-orange); } 
.map-search-result:before,
.map-search-result::after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; } 
.map-search-result:before { width: 18px; height: 18px; background: var(--color-green); border-radius: 50%; } 
.map-search-result::after { width: 7px; height: 5px; border: 1px solid transparent; border-bottom-color: var(--color-white); border-left-color: var(--color-white); transform: rotate(-45deg); transform-origin: 30% -34%; } 
.map-search-reset { border: none; border-radius: 50%; color: var(--color-white); font-size: .889rem; cursor: pointer; display: flex; align-items: center; background: var(--color-orange); width: 48px; height: 48px; justify-content: center; margin-left: auto; } 
.map-search-reset:after { content: ''; display: block; width: 25px; height: 25px; background: url(../../../../resource/cwtour/images/sub/map_spr.png) no-repeat -83px; } 
.map-list-wrapper { display: flex; justify-content: space-between; align-items: center; height: auto; } 
.map-result-wrapper { height: calc(100vh - 426px); overflow-y: scroll; background-color: #fff; } 
.map-result-wrapper::-webkit-scrollbar { width: 7px; } 
.map-result-wrapper::-webkit-scrollbar-thumb { background: #444; } 
.map-result-wrapper::-webkit-scrollbar-track { background: #aaa; } 
.map-result-list { padding: 0 24px; } 
.map-result-list > li { border-bottom: 1px dashed var(--color-border); padding: 16px 0; } 
.map-list-title-wrap { display: flex; align-items: center; } 
.map-list-title-wrap span { font-size: 0.7778rem; color: var(--color-orange); flex-shrink: 0; } 
.map-list-title { font-size: 1.1111rem; font-family: 'GmarketSans', sans-serif; margin-right: 14px; white-space: nowrap; width: calc(100% - 80px); overflow: hidden; text-overflow: ellipsis; } 
.map-list-addr { font-size: 0.7778rem; color: #888; margin: 3px 0 7px; } 
.map-list-btn-wrap { display: flex; } 
.map-list-btn-wrap button { border: 1px solid var(--color-green); border-radius: 30px; color: var(--color-green); font-size: 0.7778rem; background: none; font-weight: 800; padding: 6px 17px; display: flex; align-items: center; } 
.map-list-btn-wrap .more-view { margin-right: 5px; } 
.map-list-btn-wrap .more-view::after { content: ''; display: block; width: 7px; height: 7px; border: 1px solid transparent; border-bottom-color: var(--color-green); border-left-color: var(--color-green); transform: rotate(-135deg); margin-left: 3px; } 
.map-list-btn-wrap .move-map::after { content: ''; display: block; width: 20px; height: 20px; background: url(../../../../resource/cwtour/images/sub/map_spr.png) no-repeat -124px; } 

.info-window-tit,
.boxtitle { font-size: 0.8889rem; font-weight: 600; background: #fff; padding: 5px; border-radius: 5px; color: var(--color-orange); border: 1px solid var(--color-orange); } 

.info-window-tit.food { color: var(--color-green); border: 1px solid var(--color-green); } 
.info-window-tit.accom { color: #158eef; border: 1px solid #158eef; } 


.map-view { height: 100vh; width: calc(100% - 250px); margin-left: auto; } 
.map-toggle { display: flex; align-items: center; } 
.map-toggle .toggle-tit { margin-right: 5px; color: var(--color-dark-gray); font-size: 0.8889rem; } 
.map-toggle .toggle { position: relative; display: inline-block; width: 53px; height: 26px; } 
.map-toggle .toggle input { display: none; } 
.map-toggle .toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 30px; transition: 0.1s; } 
.map-toggle .toggle .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.1s; } 
.map-toggle .toggle input:checked + .slider { background-color: var(--color-orange); } 
.map-toggle .toggle input:checked + .slider:before { transform: translateX(27px); } 

@media all and (max-width: 1199px) { 
 .map-wrapper { flex-direction: column-reverse; height: auto; overflow: auto; } 
 .map-view { height: 220px; width: 100%; } 
 .map-search { position: static; width: 100%; } 
 .map-search-top { padding: 10px 20px; } 
 .map-search-top .tit { margin-bottom: 7px; font-size: 1.1rem; } 
 .map-search-top .tit:before { background-size: 130px; width: 20px; height: 20px; } 
 .map-search-reset { width: 35px; height: 35px; } 
 .map-search-reset:after { width: 20px; height: 20px; background-size: 140px; background-position-x: -60px; } 
 .map-search-cont { margin-top: 10px; } 
 .map-search-input input,
 .map-select select { height: 35px; } 
 .map-search-input input { width: calc(100% - 40px); } 
 .map-search-input .btn-map-search { width: 35px; height: 35px; margin-left: -35px; } 
 .map-search-input .btn-map-search::before { background-size: 160px; background-position-x: -32px; } 
 .map-result-wrapper { height: calc(100vh - 479px); } 
 .map-list-title { font-size: 1rem; } 
 .map-result-list { padding: 0 15px; } 
 .map-result-list > li { padding: 12px 0; } 
 .map-list-btn-wrap button { padding: 3px 12px; } 
 .map-list-btn-wrap .move-map::after { width: 15px; height: 15px; background-size: 160px; background-position-x: -104px; } 
 .map-list-btn-wrap .more-view::after { width: 4px; height: 4px; } 
 } 

 /* ******************* *
* 아카이브 - 창원의 순간들
* ******************* */
/* 리스트 */
.archive-wrap { display: flex; flex-wrap: wrap; border-top: 1px solid var(--color-border); margin-top: 20px; padding-top: 44px; } 
.archive-wrap > li { width: calc(33.33% - 12px); margin-right: 15px; margin-bottom: 90px; } 
.archive-wrap > li:nth-child(3n) { margin-right: 0; } 
.archive-wrap > li > a { display: block; position: relative; border-radius: 20px; overflow: hidden; transition: all .3s; } 
.archive-wrap > li > a:hover,
.archive-wrap > li > a:focus { box-shadow: 0 10px 10px rgba(0,0,0,.2); } 
.archive-wrap > li > a:hover .cate ,
.archive-wrap > li > a:focus .cate { background: var(--color-orange); } 
.archive-wrap .img { position: relative; padding-top: 75.436%; } 
.archive-wrap .img::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; animation: WaveAnimation 1.6s linear 0.5s infinite; background: linear-gradient(90deg, transparent, #ddd, transparent); transform: translateX(-100px); z-index: -1; } 
.archive-wrap .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.archive-wrap .cate { font-family: 'GmarketSans', sans-serif; color: var(--color-white); font-size: 0.8889rem; background: #888; padding: 11px 30px 9px; display: block; width: fit-content; border-radius: 30px; position: absolute; z-index: 1; margin: 16px 14px; transition: all .3s; } 
.archive-wrap .hover-txt { display: flex; flex-direction: column; color: var(--color-white); position: absolute; bottom: 0; left: 0; font-family: 'GmarketSans', sans-serif; margin: 23px 30px; transition: all .3s; } 
.archive-wrap .hover-txt .area { display: flex; align-items: center; font-size: 0.7778rem; margin-bottom: 9px; } 
.archive-wrap .hover-txt .area::before { content:''; display: block; width: 15px; height: 20px; background: url(../../../../resource/cwtour/images/sub/ico_archive.png) no-repeat; margin-right: 4px; } 
.archive-wrap .hover-txt .tit { font-size: 1.3333rem; font-weight: 600; } 
.archive-wrap .tag-list { display: flex; flex-wrap: wrap; margin-top: 24px; } 
.archive-wrap .tag-list a { display: block; font-size: 0.8889rem; color: var(--color-gray); background: var(--color-light-gray02); padding: 6px 15px 4px; border-radius: 30px; margin-right: 7px; font-family: 'GmarketSans', sans-serif; margin-bottom: 7px; } 
.mecca-search-wrap.archive .mecca-search-btn { position: absolute; bottom: 6px; right: 0; } 
.mecca-search-wrap.archive .mecca-search { position: relative; } 

@media all and (max-width: 1199px) { 
 .mecca-search-wrap.archive .mecca-search-btn { position: static; margin: 20px auto 0; display: block; } 
 .mecca-search-wrap.archive { margin-bottom: 0; } 
 } 
@media all and (max-width: 1024px) { 
 .archive-wrap > li { width: calc(33.33% - 10px); margin-bottom: 60px; } 
 .archive-wrap > li:nth-child(3n) { margin-right: 0; } 
 .archive-wrap > li:nth-child(4n) { margin-right: 15px; } 
 } 

 @media all and (max-width: 640px) { 
 .archive-wrap { justify-content: space-between; } 
 .archive-wrap > li { width: calc(50% - 5px); margin-bottom: 40px; margin-right: 0; } 
 .archive-wrap > li:nth-child(4n) { margin-right: 0; } 
 .archive-wrap .cate { padding: 8px 20px 7px; } 
 .archive-wrap .tag-list a { margin-right: 3px; margin-bottom: 3px; } 
 .archive-wrap .tag-list { margin-top: 15px; } 
 } 
 @media all and (max-width: 480px) { 
 .archive-wrap > li { width: 100%; } 
 .archive-wrap .img { padding-top: 70%; } 
 } 
 
 /* 상세 */
 .archive-view { position: relative; padding-top: 150px; } 
 .archive-view::after { content:''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); backdrop-filter: blur(20px); } 
 .archive-view .inner { position: relative; z-index: 1; } 
 .archive-view .top { max-width: 865px; } 
 .archive-view .title a { display: block; font-size: 2.5556rem; color: var(--color-white); font-weight: 600; font-family: 'GmarketSans', sans-serif; position: relative; width: fit-content; padding-right: 63px; margin-bottom: 30px; } 
 .archive-view .title a::before,
 .archive-view .title a::after { content: ''; display: block; width: 53px; height: 53px; position: absolute; top: 0; right: 0; cursor: pointer; } 
 .archive-view .title a::before { border-radius: 50%; background: rgba(255,255,255,.2); transition: .3s; } 
 .archive-view .title a::after { background: url(../../../../resource/cwtour/images/sub/ico_arrow.png) no-repeat center; } 
.archive-view .title a:hover,
.archive-view .title a:focus { text-decoration: underline; text-underline-offset: 5px; } 
.archive-view .title a:hover::before,
.archive-view .title a:focus::before { box-shadow: 3px 3px 5px rgba(0,0,0,.5); } 
 .archive-view .btn-wrap > a { display: block; color: #fff; font-size: 0.7778rem; background: rgba(0,0,0,.7); padding: 8px 33px; border-radius: 30px; } 
 .archive-view .btn-wrap > a + a { margin-left: 10px; } 
 .archive-view .info { display: flex; gap: 80px; border-top: 1px solid var(--color-white); border-bottom: 1px solid var(--color-white); padding: 60px 0; margin: 190px 0 110px; } 
 .archive-view .info li { display: flex; flex-direction: column; } 
 .archive-view .info span { font-size: 0.8889rem; color: var(--color-white); margin-bottom: 32px; } 
 .archive-view .info span:last-child { margin-bottom: 0; } 
 .archive-view .opentype { display: flex; } 
 .archive-view .opentype .img img { width: 95px; align-items: center; } 
 .archive-view .opentype .desc { color: var(--color-white); margin-left: 15px; } 
 .archive-view .opentype .desc strong { font-size: 1.1111rem; display: block; } 
 .archive-view .opentype .desc span { font-size: 0.7778rem; } 
 .archive-view .btn-wrap .btn-list { font-size: 1.1111rem; padding: 25px 90px; border-radius: 50px; margin-bottom: 130px; } 

 @media all and (max-width: 1024px) { 
 .archive-view { padding-top: 100px; } 
 .archive-view .top { max-width: 100%; } 
 .archive-view .info { padding: 30px 0; margin: 60px 0; } 
 .archive-view .btn-wrap .btn-list { padding: 15px 70px; margin: 20px 0 60px; } 
 } 
 
 @media all and (max-width: 640px) { 
 .archive-view { padding-top: 80px; } 
 .archive-view .title { padding-right: 53px; margin-bottom: 20px; } 
 .archive-view .title::before, .archive-view .title::after { width: 40px; height: 40px; } 
 .archive-view .btn-wrap .btn-list { padding: 12px 45px; } 
 } 


 /* ******************* *
* 카드뉴스
* ******************* */
/* 리스트 */
.card-list { border-top: 2px solid var(--color-green); padding-top: 30px; } 
.card-list ul { display: flex; flex-wrap: wrap; } 
.card-list ul li { width: calc(25% - 12px); margin-right: 16px; margin-bottom: 30px; } 
.card-list ul li:nth-child(4n) { margin-right: 0; } 
.card-list .img { position: relative; width: 100%; padding-top: 100%; border-radius: 20px; overflow: hidden; } 
.card-list .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.card-list .tit { font-size: 1.111rem; font-weight: 800; color: var(--color-black); margin-top: 10px; padding: 0 10px; } 

@media all and (max-width: 1024px) { 
 .card-list ul li { width: calc(33.33% - 12px); margin-right: 16px; } 
 .card-list ul li:nth-child(4n) { margin-right: 16px; } 
 .card-list ul li:nth-child(3n) { margin-right: 0px; } 
 } 
 
 @media all and (max-width: 640px) { 
 .card-list ul { justify-content: space-between; } 
 .card-list ul li { width: calc(50% - 5px); margin-right: 0; } 
 .card-list ul li:nth-child(4n) { margin-right: 0px; } 
 .card-list ul li:nth-child(3n) { margin-right: 0px; } 
 .card-list .img { border-radius: 10px; } 
 .card-list .tit { padding: 0 5px; } 
 } 


 
 /* ******************* *
* 스토리텔링
* ******************* */
[class^="story-telling"] { font-family: 'GmarketSans', sans-serif; } 
.story-intro { width: 100%; height: 100vh; position: relative; } 
.story-intro .cont { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; } 
.story-intro .tit { font-weight: 600; font-size: 3.1111rem; color: var(--color-black); margin-bottom: 23px; line-height: 1; display: flex; align-items: center; } 
.story-intro .tit span { padding-top: 10px; } 
.story-intro .tit .color { color: #cf3100; background: var(--color-yellow); padding: 10px 10px 0; margin: 0 10px; text-align: center; } 
.story-intro .desc { font-size: 1.1111rem; color: var(--color-black); text-align: center; } 
.story-intro02 { width: 100%; height: 100vh; position: relative; padding-top: 145px; } 
.story-intro02 .inner { display: flex; flex-wrap: wrap; z-index: 1; position: relative; } 
.story-intro02 .tit { color: var(--color-white); font-size: 2.5rem; font-weight: 500; width: 100%; margin-bottom: 66px; } 
.story-intro02 .location-list li { margin-bottom: 30px; } 
.story-intro02 .location-list li a { color: var(--color-white); display: flex; align-items: center; transition: all .3s; } 
.story-intro02 .location-list li a::before { content: ''; display: block; width: 35px; height: 35px; background: url(../../../../resource/cwtour/images/sub/storytelling/storytelling_spr.png) no-repeat -45px; margin-right: 10px; } 
.story-intro02 .location-list li a:hover { color: var(--color-yellow); } 
.story-intro02 .location-list li a:hover::before { background-position-x: 0; } 
.story-intro02 .right-cont { color: var(--color-white); text-align: right; margin-left: auto; } 
.story-intro02 .right-cont .top-txt { margin-bottom: 43px; } 
.story-intro02 .right-cont p:not(.top-txt) { line-height: 2; } 
.story-cont .top-txt { width: fit-content; margin: 120px auto; } 
.story-cont .top { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: 0.8889rem; margin-bottom: 57px; } 
.story-cont .top::before { content: ''; display: block; width: 50%; height: 1px; background: #000; } 
.story-cont .cont-wrap { margin-bottom: 180px; display: flex; justify-content: space-between; flex-wrap: wrap; } 
.story-cont .cont-wrap.wide .cont-txt { width: 100%; } 
.story-cont .cont-wrap.wide .cont-txt .addr { margin: 0; } 
.story-cont .cont-wrap.wide .img-wide { margin: 30px 0; } 
.story-cont .cont-txt { width: calc(50% - 20px); display: flex; flex-direction: column; } 
.story-cont .tit { display: flex; align-items: center; font-size: 2rem; font-weight: bold; } 
.story-cont .tit a:hover,
.story-cont .tit a:focus { text-decoration: underline; } 
.story-cont .tit .vr { display: flex; align-items: center; margin-left: 10px; background: var(--color-orange); padding: 0 15px 0 0; border-radius: 30px } 
.story-cont .tit .vr::before { content:''; display:block; width: 45px; height: 45px; background: url(../../../../resource/cwtour/images/sub/btn_vr.png) no-repeat center / contain; border-radius: 50%; } 
.story-cont .tit .vr span { color:#fff; font-size: 1rem; margin-left: 0px; line-height: normal; } 
.story-cont .addr { display: flex; align-items: center; font-size: 1.1111rem; color: var(--color-green); margin-bottom: 60px; } 
.story-cont .addr::before { content: ''; display: block; width: 35px; height: 35px; background: url(../../../../resource/cwtour/images/sub/storytelling/storytelling_spr.png) no-repeat -90px; } 
.story-cont .txt { line-height: 2; } 
.story-cont .cont-illu { margin-top: 66px; text-align: end; } 
.story-cont .cont-illu.left { text-align: right; } 
.story-cont .img-slide { overflow: hidden; position: relative; width: calc(50% - 20px); height: fit-content; } 
.story-cont .img-slide.big { height: 100% } 
.story-cont .img-slide img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; } 
.story-cont .img-slide .btn { position: absolute; top: 0; bottom: 0; margin: auto; width: 100%; height: fit-content; display: flex; justify-content: space-between; z-index: 1; box-sizing: border-box; padding: 0 35px; } 
.story-cont .img-slide button { position: relative; background: none; width: 16px; height: 16px; border: none; } 
.story-cont .img-slide button::before { content: ''; display:block; box-sizing: border-box; } 
.story-cont .img-slide .btn-prev::before,
.story-cont .img-slide .btn-next::before { width: 100%; height: 100%; border-width: 2px; border-style: solid; border-color: transparent var(--color-white) var(--color-white) transparent; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 
.story-cont .img-slide .btn-prev::before { transform: translateX(3px) rotate(135deg); } 
.story-cont .img-slide .btn-next::before { transform: translateX(0) rotate(-45deg); } 
.story-cont .img-slide .pagination { position: absolute; bottom: 8px; z-index: 1; text-align: center; } 
.story-cont .img-slide .swiper-pagination-bullet { width: 10px; height: 10px; border-radius:50%; background: var(--color-white); opacity: .5; } 
.story-cont .img-slide .swiper-pagination-bullet-active { opacity: 1; } 
.story-cont .img-slide .swiper-slide { position: relative; padding-top: 100%; } 
.story-cont .img-slide.big .swiper-slide { position: relative; padding-top: 151%; } 
.story-cont .img-wide { opacity: 0; margin: 110px 0; width: 100%; } 
.story-cont .img-wide.wide { margin: 0; } 
.story-cont .img-scroll-wrap { width: calc(50% - 20px); } 
.story-cont .img-scroll .img { margin-bottom: 10px; } 
.story-cont .cont-img { margin-top: auto; } 
.story-cont .cont-img.cont-illu { margin-top: 66px; } 
.story-cont .cont-img-wrap { display: flex; flex-direction: column; width: calc(50% - 20px); } 
.story-cont .cont-img-wrap .img-slide { width: 100%; } 
.story-cont .cont-img-wrap .img-slide .swiper-slide { padding-top: 73.014%; } 
.story-cont .cont-img-wrap .cont-img { display: flex; margin-top: 15px; justify-content: space-between; } 
.story-cont .cont-scroll .cont-txt { height: fit-content !important; } 
.story-cont .cont-scroll .cont-illu { text-align: start; margin-top: 10px; } 
.cont-wrap .br { display: block; padding-bottom: 5px; } 

.story-telling01 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/1/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling01 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/1/intro02_bg.png) no-repeat bottom; background-size: cover; } 
.story-telling01 .story-intro .tit { color: var(--color-white); } 

.story-telling02 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/2/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling02 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/2/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling03 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/3/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling03 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/3/intro02_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling03 .story-intro .tit { color: var(--color-white); } 
.story-telling03 .story-intro .desc { color: var(--color-white); } 

.story-telling04 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/4/intro_bg.jpg) no-repeat; background-size: cover; } 
.story-telling04 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/4/intro02_bg.jpg) no-repeat; background-size: cover; } 

.story-telling05 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/5/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling05 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/5/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling06 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/6/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling06 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/6/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling07 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/7/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling07 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/7/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling08 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/8/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling08 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/8/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling09 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/9/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling09 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/9/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling10 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/10/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling10 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/10/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling11 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/11/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling11 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/11/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling12 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/12/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling12 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/12/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling13 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/13/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling13 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/13/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling14 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/14/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling14 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/14/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling15 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/15/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling15 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/15/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling16 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/16/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling16 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/16/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling17 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/17/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling17 .title { font-size: 1.6667rem; color: #3c3d42; font-family: 'GmarketSans',sans-serif; font-weight: 600; margin: 75px 0 30px; } 
.story-telling17 .tab-list { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 140px; } 
.story-telling17 .tab-list li { width: calc(12.5% - 7px); } 
.story-telling17 .tab-list li a { border-radius: 60px; padding: 24px 10px; display: block; text-align: center; border: 1px solid var(--color-light-gray); background-color: var(--color-light-gray02); transition: all .3s; cursor: pointer; color:#666; margin-bottom: 20px; } 
.story-telling17 .tab-list li a:hover,
.story-telling17 .tab-list li a:focus { background: var(--color-green); color: #fff; } 

.story-telling17 .cont-wrap04 .cont-txt { margin-top: 0; } 
.story-telling17 .desc { font-size: 1.1111rem; color: var(--color-green); margin: 10px 0 50px; } 

.story-telling18 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/18/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling18 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/18/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling19 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/19/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling19 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/19/intro02_bg.jpeg) no-repeat; background-size: cover; } 

.story-telling20 .story-intro { background: url(../../../../resource/cwtour/images/sub/storytelling/20/intro_bg.jpeg) no-repeat; background-size: cover; } 
.story-telling20 .story-intro02 { background: url(../../../../resource/cwtour/images/sub/storytelling/20/intro02_bg.jpeg) no-repeat; background-size: cover; } 

@media all and (max-width: 1024px) { 
 .story-cont .cont-wrap { flex-direction: column; margin-bottom: 100px; } 
 .story-cont .cont-txt,
 .story-cont .img-slide,
 .story-cont .cont-img-wrap { width: 100%; } 
 .story-cont .cont-txt { margin-bottom: 40px; } 
 .story-cont .cont-img { margin-top: 50px; } 
 .story-cont .cont-img img { width: 100%; } 
 .story-cont .img-slide.big .swiper-slide { padding-top: 100%; } 
 .story-cont .img-scroll-wrap { width: 100%; overflow-x: scroll; margin-bottom: 30px; } 
 .story-cont .top { margin-bottom: 20px; } 
 .story-cont .txt { line-height: 1.6; } 
 .story-cont .cont-wrap.wide .cont-txt { margin-bottom: 0px; } 
 .cont-wrap br { display: none; } 
 .story-intro02 { padding-top: 100px; } 
 .story-intro02 .right-cont .top-txt { margin-bottom: 20px; } 

 .story-cont .img-scroll .img { margin-bottom: 5px; margin-right: 5px; } 
 .story-cont .top-txt { margin: 50px auto; text-align: center; } 
 .story-cont .img-wide { margin: 20px 0 30px; } 
 .story-cont .addr { margin-bottom: 20px; font-size: 1rem; } 
 .story-cont .addr::before { width: 30px; height: 30px; background-position-x: -95px; } 
 .story-cont .cont-illu { margin-top: 30px; display: flex; justify-content: end; } 
 .story-cont .cont-illu img { width: 140px; } 
 .story-cont .tit { font-size: 1.7rem; } 
 
 .cont-slide01 .cont-txt { order: 2; margin-top: 40px; margin-bottom: 0; } 
 .cont-slide01 .img-wide { order: 3; margin-bottom: 0; } 
 .story-cont .cont-scroll { flex-direction: column-reverse; } 
 .story-cont .cont-scroll .cont-txt { margin-top: 0; } 
 .story-cont .cont-scroll .img-scroll { display: flex; width: 300%; } 
 .story-telling17 .tab-list { margin-bottom: 100px; } 
 .story-telling17 .tab-list li { width: calc(20% - 5px); } 
 .story-telling17 .tab-list li a { margin-bottom: 5px; padding: 18px 10px; } 
 .story-telling17 .cont-slide01 .cont-txt { order: 1; margin-bottom: 40px; } 
 .story-telling17 .cont-slide01 .img-slide { order: 2; } 
 .story-telling17 .desc { margin: 10px 0 20px; } 
 
 } 

@media all and (max-width: 640px) { 
 .story-intro .tit { font-size: 2.8rem; } 
 .story-cont .tit { flex-direction: column; align-items: flex-start; } 
 .story-cont .tit .vr { margin-bottom: 10px; margin-left: 0 } 
 .story-cont .tit .vr::before { width: 35px; height: 35px; } 
 .story-intro02 .inner { flex-direction: column; } 
 .story-intro02 .tit { margin-bottom: 30px; } 
 .story-intro02 .location-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 70px; } 
 .story-intro02 .location-list li { margin-bottom: 0; } 
 .story-intro02 .location-list li a::before { width: 30px; height: 30px; margin-right: 5px; } 
 .story-intro02 .right-cont { text-align: left; margin: 0; } 
 .story-telling17 .tab-list { margin-bottom: 60px; } 
 .story-telling17 .tab-list li { width: calc(25% - 5px); } 
 .story-telling17 .tab-list li a { padding: 15px 10px; } 
 .story-telling17 .story-cont .cont-txt { margin-bottom: 30px; } 
 .story-telling17 .cont-wrap01 .cont-txt { order: 1; margin-bottom: 40px; } 
 .story-telling17 .cont-wrap01 .img-slide { order: 2; } 
 } 

 /* ******************* *
* 통합검색
* ******************* */
.total-search-form { position: absolute; width: fit-content; top: 360px; left: 0; right: 0; margin: auto; } 
.total-search-form form { display: flex; align-items: center; } 
.total-search-input { border: none; border-radius: 50px; height: 70px; width: 1016px; padding: 0 30px; } 
.total-search-btn { height: 70px; border-radius: 50px; background: var(--color-gray); color: var(--color-white); border: none; font-size: 1.1111rem; display: flex; align-items: center; justify-content: center; width: 150px; margin-left: -150px; } 
.total-search-btn::before { content: ''; display: block; width: 30px; height: 30px; background: url(../../../../resource/cwtour/images/common/layout_sprite.png) no-repeat -80px 0; } 
.total-search-form .result { color: var(--color-white); font-size: 1.1111rem; margin-top: 20px; text-align: center; } 
.total-search-form .result .color { color: var(--color-orange); } 
.total-search-tab { margin-bottom: 70px; } 
.total-search-tab ul { display: flex; } 
.total-search-tab ul li { width: 33.33%; } 
.total-search-tab ul li a { display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-left: none; width: 100%; height: 100px; color: var(--color-gray); font-weight: 600; } 
.total-search-tab ul li a.active { color: var(--color-white); background: var(--color-green); } 
.total-search-tab ul li:first-child { border-left: 1px solid var(--color-border); } 
.total-search-result .title { border-top: 2px solid var(--color-green); background: #f5f5f2; font-size: 1.1111rem; font-weight: 800; padding: 27px 24px; color: var(--color-black); } 
.total-search-result .s-title::before { content: ''; display: block; width: 10px; height: 10px; background: var(--color-green); border-radius: 50%; margin-right: 10px; } 
.total-search-result .s-title { padding: 20px 0px; font-weight: 800; font-size: 1.1111rem; color: var(--color-green); display: flex; align-items: center; border-bottom: 1px solid var(--color-border); margin: 0 20px -20px; } 
.total-search-result .txt-list { padding: 0 25px; } 
.total-search-result .txt-list li { margin: 50px 0; } 
.total-search-result .txt-list .tit { display: flex; align-items: center; font-size: 1.1111rem; font-weight: 800; color: var(--color-black); } 
.total-search-result .txt-list .tit::before { content: ''; display: block; width: 8px; height: 8px; border-width: 2px; border-style: solid; border-color: transparent var(--color-black) var(--color-black) transparent; transform: rotate(-45deg); margin-right: 5px; } 
.total-search-result .txt-list .tit p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 120px); } 
.total-search-result .txt-list .tit a { display: flex; align-items: center; border: none; background: var(--color-green); color: var(--color-yellow); font-size: 0.7778rem; padding: 5px 15px; border-radius: 5px; margin-left: 15px; } 
.total-search-result .txt-list .tit a::after { content: ''; display: block; width: 6px; height: 6px; border-width: 1px; border-style: solid; border-color: transparent var(--color-yellow) var(--color-yellow) transparent; transform: rotate(-45deg); } 
.total-search-result .txt-list span { font-size: 0.8889rem; color: var(--color-gray); padding-left: 24px; } 
.total-search-result .txt-list .desc { display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; margin: 13px 0 5px; line-height: 1.5; width: 70%; } 
.total-search-result .img-list { display: flex; flex-wrap: wrap; margin: 48px 0; } 
.total-search-result .img-list li { width: calc(25% - 18px); margin-right: 24px; margin-bottom: 24px; } 
.total-search-result .img-list li:nth-child(4n) { margin-right: 0; } 
.total-search-result .img-list .img { position: relative; padding-top: 75.071%; border-radius: 10px; overflow: hidden; border: 1px solid var(--color-border); margin-bottom: 20px; } 
.total-search-result .img-list .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.total-search-result .img-list .cate { color: var(--color-orange); font-size: 0.8889rem; font-weight: 600; } 
.total-search-result .img-list .tit { font-size: 1.1111rem; font-weight: 800; color: var(--color-black); margin: 14px 0 7px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 
.total-search-result .img-list .date { font-size: 0.8889rem; color: var(--color-gray); } 
.total-search-result .folding-wrap { margin-bottom: 60px; } 
.total-search-result .folding-list li { margin: 30px 0 15px; border-bottom: 1px dashed var(--color-border); padding-bottom: 15px; } 

.total-search-result .no-data { color: var(--color-green); font-size: 1.1111rem; text-align: center; background: #f5f5f5; padding: 90px 0; margin-top: -70px; } 
.total-search-result .no-data .color { color: var(--color-orange); font-weight: 600; } 

@media all and (max-width: 1600px) { 
 .total-search-form { top: 300px; } 
 } 
 @media all and (max-width: 1399px) { 
 .total-search-form { position: static; margin-bottom: 60px; } 
 .total-search-input { border: 1px solid var(--color-border); } 
 .total-search-form .result { color: var(--color-black); } 
 } 
 @media all and (max-width: 1024px) { 
 .total-search-form { width: 100%; } 
 .total-search-input { width: 100%; height: 50px; } 
 .total-search-btn { height: 50px; width: 120px; margin-left: -120px; } 
 .total-search-tab ul li a { height: 80px; } 
 .total-search-result .img-list li { width: calc(33.33% - 10px); margin-right: 15px; } 
 .total-search-result .img-list li:nth-child(3n) { margin-right: 0; } 
 .total-search-result .img-list li:nth-child(4n) { margin-right: 15px; } 
 .total-search-result .img-list .img { margin-bottom: 10px; } 
 .total-search-result .img-list .tit { margin: 8px 0 5px; } 
 } 
 @media all and (max-width: 768px) { 
 .total-search-form { margin-bottom: 40px; } 
 .total-search-input,
 .total-search-btn { height: 40px; } 
 .total-search-tab ul { flex-wrap: wrap; margin-bottom: 40px; } 
 .total-search-tab ul li a { height: 50px; } 
 .total-search-result .title { padding: 15px 20px; } 
 .total-search-result .txt-list li { margin: 30px 0; } 
 .total-search-result .img-list { margin: 40px 0; } 

 .total-search-result .folding-wrap .folding-list { padding: 0 20px; } 
 .total-search-result .folding-wrap .folding-inner > .folding-list { max-height: 300px; } 
 .total-search-result .folding-list li { margin: 15px 0; } 
 } 
 @media all and (max-width: 640px) { 
 .total-search-btn { width: 105px; margin-left: -105px; } 
.total-search-result .txt-list .tit::before { width: 5px; height: 5px; } 
.total-search-result .txt-list .tit a { padding: 5px 10px; } 
.total-search-result .txt-list .tit a::after { width: 4px; height: 4px; margin-left: 5px; } 
.total-search-result .txt-list .desc { margin: 7px 0 5px; } 
 .total-search-result .img-list { justify-content: space-between; } 
 .total-search-result .img-list li { width: calc(50% - 5px); margin-right: 0; } 
 .total-search-result .img-list li:nth-child(3n) { margin-right: 0; } 
 .total-search-result .img-list li:nth-child(4n) { margin-right: 0px; } 
 } 
 @media all and (max-width: 480px) { 
 .total-search-tab ul li a { text-align: center } 
 .total-search-result .s-title { padding: 10px 0; margin: 0 15px -15px; } 
 .total-search-result .txt-list { padding: 0 20px; } 
 .total-search-result .txt-list .desc { width: 100%; } 

 } 

 /* ******************* *
* 여행정보 게시판
* ******************* */
/* 음식점 - 입영병장 탭 */
.board-tab { margin-bottom: 150px; } 
.c-tit.shopping { margin-bottom: 30px; } 
.board-tab .tab-list { display: flex; margin-bottom: 20px; } 
.board-tab .tab-list li { width: 50%; } 
.board-tab .tab-list li:first-child:nth-last-child(3),
.board-tab .tab-list li:first-child:nth-last-child(3) ~ li { width: 33.3%; } 
.board-tab .tab-list li:first-child:nth-last-child(4),
.board-tab .tab-list li:first-child:nth-last-child(4) ~ li { width: 25%; } 
.board-tab .tab-list li:first-child:nth-last-child(5),
.board-tab .tab-list li:first-child:nth-last-child(5) ~ li { width: 20%; } 
.board-tab .tab-list li a { display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-left: none; width: 100%; height: 70px; color: var(--color-gray); font-weight: 600; } 
.board-tab .tab-list li a.active { color: var(--color-white); background: var(--color-green); } 
.board-tab .tab-list li:first-child { border-left: 1px solid var(--color-border); } 


/* 쇼핑 - 창원지 지정특산물 이미지 리스트 */
.board-img-list { border-top: 2px solid var(--color-green); padding-top: 30px; margin-top: 50px; } 
.board-img-list ul { display: flex; flex-wrap: wrap; } 
.board-img-list ul li { width: calc(25% - 12px); margin-right: 16px; margin-bottom: 30px; } 
.board-img-list ul li:nth-child(4n) { margin-right: 0; } 
.board-img-list .img { position: relative; width: 100%; border-radius: 20px; overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 1 /1; } 
.board-img-list .img img { width: 100%; height: 100%; display: block; object-fit: cover; } 
.board-img-list .cate { color: var(--color-dark-gray); font-size: 0.8889rem; margin-top: 10px; } 
.board-img-list .tit { font-weight: 600; font-size: 1.1rem; margin: 3px 0 5px; } 
.board-img-list .addr { color: var(--color-gray); font-size: 0.8889rem; } 
.travel-info .tbl .total { background: var(--color-light-gray); } 

 @media all and (max-width: 1199px) { 
.travel-info .tbl td::before { content: attr(data-name); background: #eee; color: #767676; margin-right: 5px; padding: 1px 5px; } 
.travel-info .tbl tr { flex-direction: column; align-items: flex-start; } 
.travel-info .tbl .total td::before { display: none; } 
 } 
@media all and (max-width: 1024px) { 
 .board-img-list ul li { width: calc(33.33% - 12px); margin-right: 16px; } 
 .board-img-list ul li:nth-child(4n) { margin-right: 16px; } 
 .board-img-list ul li:nth-child(3n) { margin-right: 0px; } 
 } 
 
 @media all and (max-width: 640px) { 
 .board-img-list ul { justify-content: space-between; } 
 .board-img-list ul li { width: calc(50% - 5px); margin-right: 0; } 
 .board-img-list ul li:nth-child(4n) { margin-right: 0px; } 
 .board-img-list ul li:nth-child(3n) { margin-right: 0px; } 
 .board-img-list .img { border-radius: 10px; } 
 .board-tab .tab-list { flex-wrap: wrap; } 
 .board-tab .tab-list li:first-child:nth-last-child(3),
 .board-tab .tab-list li:first-child:nth-last-child(3) ~ li { width: 50%; } 
 .board-tab .tab-list li:first-child:nth-last-child(4),
 .board-tab .tab-list li:first-child:nth-last-child(4) ~ li { width: 50%; border-top: 0; } 
 .board-tab .tab-list li:first-child:nth-last-child(5),
 .board-tab .tab-list li:first-child:nth-last-child(5) ~ li { width: 50%; border-top: 0; } 
 .board-tab .tab-list li:nth-child(3),
 .board-tab .tab-list li:nth-child(5) { border-left: 1px solid var(--color-border); } 
 .board-tab .tab-list li a { height: 50px } 
 .board-tab .tab-list li:nth-child(3) a,
 .board-tab .tab-list li:nth-child(4) a,
 .board-tab .tab-list li:nth-child(4) a { border-top: 0 } 
 } 

 
 /* ******************* *
* 맞춤여행
* ******************* */
.custom-travel-wrapper form { width: 100%; overflow: hidden; display: flex; } 
.custom-travel-wrapper .inner { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; height: 100%; position: absolute; top: 0; width: 100%; left: 0; right: 0; margin: 0 auto; } 
[class^='custom-travel'] .title { font-size: 1.2222rem; color: var(--color-white); font-weight: 800; border-bottom: 2px solid var(--color-orange); margin-bottom: 50px; padding-bottom: 10px; } 
[class^='custom-travel'] .step-num { font-size: 1.2222rem; font-weight: 300; color: #ebeae5; margin-bottom: 10px; } 
[class^='custom-travel'] .step-cate { font-size: 2.8889rem; font-weight: 800; color: var(--color-white); margin-bottom: 65px; } 

[class^='custom-travel-step'] { min-width: 100%; height: calc(100vh + 200px); position: relative; } 
.custom-travel-step01 { background: url(../../../../resource/cwtour/images/sub/custom/custom_bg01.jpeg) no-repeat center / cover; } 
.custom-travel-step02 { background: url(../../../../resource/cwtour/images/sub/custom/custom_bg02.jpeg) no-repeat center / cover; } 
.custom-travel-step03 { background: url(../../../../resource/cwtour/images/sub/custom/custom_bg03.jpeg) no-repeat center / cover; } 
[class^='custom-travel-step'] ul { display: flex; justify-content: center; width: 100%; } 
[class^='custom-travel-step'] ul li:not(:last-child) { margin-right: 12px; } 
[class^='custom-travel-step'] ul li { position: relative; } 
[class^='custom-travel-step'] ul li > span { height: fit-content; width: fit-content; color: #fff; font-size: 1rem; font-weight: 800; background: rgba(0,0,0,.8); border-radius: 50px; padding: 15px 20px; display: flex; justify-content: center; transition: .2s; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; min-width: 100px; } 
[class^='custom-travel-step'] ul li.selected > span,
[class^='custom-travel-step'] ul li:hover > span,
[class^='custom-travel-step'] ul li:focus > span { opacity: 1; } 
[class^='custom-travel-step'] ul li input[type="radio"] { width: 0; height: 0; position: absolute; z-index: -1; opacity: 0; } 
[class^='custom-travel-step'] ul li input[type="radio"] + label { width: 230px; height: 300px; border: none; border-radius: 20px; transition: .2s; display: block; cursor: pointer; } 
[class^='custom-travel-step'] ul li input[type="radio"]:checked + label,
[class^='custom-travel-step'] ul li input[type="radio"] + label:hover,
[class^='custom-travel-step'] ul li input[type="radio"] + label:focus { box-shadow: 0 0 0 10px inset var(--color-orange); } 

.step01-btn01 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step1_img1.png) no-repeat center / cover; } 
.step01-btn02 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step1_img2.png) no-repeat center / cover; } 
.step01-btn03 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step1_img3.png) no-repeat center / cover; } 
.step01-btn04 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step1_img4.png) no-repeat center / cover; } 
.step02-btn01 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step2_img1.png) no-repeat center / cover; } 
.step02-btn02 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step2_img2.png) no-repeat center / cover; } 
.step02-btn03 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step2_img3.png) no-repeat center / cover; } 
.step02-btn04 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step2_img4.png) no-repeat center / cover; } 
.step02-btn05 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step2_img5.png) no-repeat center / cover; } 
.step03-btn01 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step3_img1.png) no-repeat center / cover; } 
.step03-btn02 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step3_img2.png) no-repeat center / cover; } 
.step03-btn03 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step3_img3.png) no-repeat center / cover; } 
.step03-btn04 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step3_img4.png) no-repeat center / cover; } 
.step03-btn05 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step3_img5.png) no-repeat center / cover; } 
.step03-btn06 + label { background: url(../../../../resource/cwtour/images/sub/custom/custom_step3_img6.png) no-repeat center / cover; } 
[class^='custom-travel-step'] .next { background: var(--color-orange); color: var(--color-white); font-weight: 800; padding: 20px 50px; border-radius: 50px; display: flex; align-items: center; margin-top: 76px; border: none; } 
[class^='custom-travel-step'] .next::after { content: ''; display: block; width: 8px; height: 8px; border-width: 2px; border-style: solid; border-color: transparent var(--color-white) var(--color-white) transparent; transition: all .3s; transform: rotate(-45deg); margin-left: 6px; } 

/* 결과화면 */
.custom-travel-result .inner { display: flex; flex-direction: column; align-items: center; } 
.custom-travel-result .title,
.custom-travel-result .step-num,
.custom-travel-result .step-cate { color: var(--color-black); text-align: center; } 
.custom-travel-result .step-cate .color { color: var(--color-orange); } 
.custom-travel-result .archive-wrap { width: 100%; } 
.custom-travel-result .archive-wrap > li { margin-bottom: 20px; } 
.custom-travel-result .hover-txt { opacity: 1; } 

@media all and (max-width: 1399px) { 
 [class^='custom-travel'] .step-cate { font-size: 2rem; margin-bottom: 35px; } 
 [class^='custom-travel'] .title { margin-bottom: 30px; } 

 [class^='custom-travel-step'] { height: calc(100vh + 400px); } 
 [class^='custom-travel-step'] ul { flex-wrap: wrap; gap: 12px; } 
 [class^='custom-travel-step'] ul li { display: flex; flex-direction: column; align-items: center; } 
 [class^='custom-travel-step'] ul li:not(:last-child) { margin-right: 0; } 
 [class^='custom-travel-step'] ul li > span { opacity: 1; position: static; margin-top: 5px; padding: 10px 20px; } 
 [class^='custom-travel-step'] ul li > span::before { width: 20px; height: 20px; background-size: cover; } 
 .step01 { max-width: 480px; } 
 .step02,
 .step03 { max-width: 768px; } 
 .step01 li { width: calc(50% - 12px); } 
 .step02 li,
 .step03 li { width: calc(33.33% - 12px); } 
 } 

@media all and (max-width: 768px) { 
 [class^='custom-travel-step'] { height: calc(100vh + 200px); } 
 [class^='custom-travel-step'] ul li > span::before { width: 15px; height: 15px; flex-shrink: 0; } 
 [class^='custom-travel-step'] ul li input[type="radio"] + label { width: 150px; height: 150px; border: none; } 
 .step01 { max-width: 360px; } 
 .step02,
 .step03 { max-width: 480px; } 

 [class^='custom-travel-step'] .next { padding: 15px 50px; } 
 } 

@media all and (max-width: 480px) { 
 [class^='custom-travel-step'] { height: calc(100vh + 50px); } 
 [class^='custom-travel-step'] ul li > span { padding: 10px 5px; font-size: .9rem; min-width: 70px; border-radius: 30px; font-weight: 600; } 
 [class^='custom-travel-step'] ul li > span::before { display: none; } 
 [class^='custom-travel-step'] ul li input[type="radio"] + label { width: 100px; height: 100px; border: none; } 
 [class^='custom-travel'] .title,
 [class^='custom-travel'] .step-cate { font-weight: 600 } 
 [class^='custom-travel-step'] ul li input[type="radio"]:checked + label, [class^='custom-travel-step'] ul li input[type="radio"] + label:hover, [class^='custom-travel-step'] ul li input[type="radio"] + label:focus { box-shadow: 0 0 0 5px inset var(--color-orange); } 
 .step02,
 .step03 { max-width: 360px; } 
 } 

 /* ******************* *
* 여행도우미
* ******************* */
/* 문화관광해설사, 생태관광해설사, 산업관광해설사 */
.moonhaw-info { display: flex; border-radius: 20px; overflow: hidden; margin-bottom: 120px; } 
.moonhaw-info .info-l { background: var(--color-green); color: var(--color-white); width: 33.9%; display: flex; flex-direction: column; justify-content: center; padding: 50px 47px; } 
.moonhaw-info .info-l .tit { font-size: 2rem; font-weight: 800; margin-bottom: 23px; } 
.moonhaw-info .info-l .txt { font-size: 0.8889rem; } 
.moonhaw-info .info-r { background: #f5f5f2; color: var(--color-gray); padding: 50px 47px; width: calc(100% - 33.9%); } 
.moonhaw-info .info-r li { display: flex; align-items: center; margin-bottom: 20px; } 
.moonhaw-info .info-r li:last-child { margin-bottom: 0; } 
.moonhaw-info .info-r .tit { color: var(--color-green); font-weight: 800; display: flex; align-items: center; min-width: 287px; } 
.moonhaw-info .info-r .tit::before { content: ''; display: block; width: 22px; height: 22px; background: url(../../../../resource/cwtour/images/sub/moonhaw_spr.png); margin-right: 15px; } 
.moonhaw-info .info-r .txt { font-size: 0.8889rem; } 
.moonhaw-info .loc .tit::before { background-position: -32px; } 
.moonhaw-info .lan .tit::before { background-position: -64px; } 
.moonhaw-info .apply .tit::before { background-position: -96px; } 
.moonhaw-info .info-txt { color: var(--color-orange); font-weight: 800; text-align: end; margin-top: 72px; } 
@media all and (max-width: 1024px) { 
 .moonhaw-info { flex-direction: column; margin-bottom: 60px; } 
 .moonhaw-info .info-l,
 .moonhaw-info .info-r { width: 100%; padding: 30px 40px; } 
 .moonhaw-info .info-r .tit { min-width: 210px; } 
 .moonhaw-info .info-txt { text-align: center; margin-top: 30px; } 
 } 
@media all and (max-width: 768px) { 
 .moonhaw-info { border-radius: 10px; } 
 .moonhaw-info .info-l .tit { font-size: 1.5rem; margin-bottom: 10px; } 
 .moonhaw-info .info-r .tit::before { margin-right: 6px; } 
 .moonhaw-info .info-r li { flex-direction: column; align-items: flex-start; } 
 .moonhaw-info .info-r .tit { margin-bottom: 10px; } 
 } 
@media all and (max-width: 480px) { 
 .moonhaw-info .info-l, .moonhaw-info .info-r { padding: 20px; } 
 } 

.moonhaw-cont { display: flex; } 
.moonhaw-cont .map-wrap + .tbl-wrap { width: calc(100% - 524px); margin-left: auto; } 
.moonhaw-cont .map-wrap { width: 500px; height: 500px; } 
.moonhaw-cont .map-info { display: flex; align-items: center; color: var(--color-orange); font-size: 0.8889rem; font-weight: 800; margin-top: 28px; } 
.moonhaw-cont .map-info::before { content: ''; display: block; width: 20px; height: 20px; background: url(../../../../resource/cwtour/images/sub/moonhaw_spr.png) -130px; margin-right: 9px; } 

@media all and (max-width: 1024px) { 
 .moonhaw-cont { flex-direction: column; } 
 .moonhaw-cont .tbl-wrap,
 .moonhaw-cont .map-wrap { width: 100%; } 
 .moonhaw-cont .map-wrap { height: 400px; } 
 .moonhaw-cont .tbl-wrap { margin-top: 60px; } 
 } 

 .tbl-wrap-auto.shopping td { border-left: 1px solid var(--color-border); } 
 .tbl-wrap-auto.shopping td:first-child { border-left: none; } 

/* 교통정보 */
.traffic-map { width: 100%; height: 450px; margin-bottom: 60px; border: 1px solid var(--color-border); border-radius: 10px; } 
.traffic .tbl td { border-right: 1px solid var(--color-border); } 
.traffic-tit { display: flex; align-items: center; margin-bottom: 15px; } 
.traffic-tit p { margin-right: 10px; } 
.traffic-info td { display: flex; align-items: center; justify-content: center; } 
.traffic-arr { display: block; border: 1px solid transparent; border-bottom-color: var(--color-dark-gray); border-right-color: var(--color-dark-gray); transform: rotate(-45deg) skew(0deg, 0deg) translatex(-25%); width: 7px; height: 7px; margin: 0 5px; } 

/* 1300관광안내전화 */
.hotline-top { margin-bottom: 100px; } 
.hotline-top .img { text-align: center; margin-bottom: 60px; } 
.hotline-top p .color { color: var(--color-orange); } 
.hotline-bt { border: 1px solid var(--color-border); border-radius: 20px; padding: 20px 30px; } 
.hotline-bt li { display: grid; grid-auto-columns: 98px auto; grid-column-gap: 30px; align-items: center; } 
.hotline-bt li:not(:last-child) { margin-bottom: 20px; border-bottom: 1px dashed var(--color-border); padding-bottom: 20px; } 
.hotline-bt li .tit { font-size: 1.2222rem; font-weight: 600; grid-column: 2; } 
.hotline-bt li .txt { width: 100%; grid-column: 2; } 
.hotline-bt li::before { content: ''; display: block; width: 98px; height: 98px; grid-column: 1; grid-row: 1 / span 2; } 
.hotline-bt li:nth-child(1):before { background: url(../../../../resource/cwtour/images/sub/ico_hotline01.gif) no-repeat center / contain; } 
.hotline-bt li:nth-child(2)::before { background: url(../../../../resource/cwtour/images/sub/ico_hotline02.gif) no-repeat center / contain; } 
.hotline-bt li:nth-child(3)::before { background: url(../../../../resource/cwtour/images/sub/ico_hotline03.gif) no-repeat center / contain; } 
.hotline-bt li:nth-child(4)::before { background: url(../../../../resource/cwtour/images/sub/ico_hotline04.gif) no-repeat center / contain; } 
@media all and (max-width: 640px) { 
 .hotline-top { margin-bottom: 60px; } 
 .hotline-top .img { width: 80%; margin: 0 auto 30px; } 
 .hotline-bt li { grid-auto-columns: 45px auto; grid-column-gap: 15px; } 
 .hotline-bt li::before { width: 45px; height: 45px; } 
 .hotline-bt { padding: 20px; } 
 } 


 /* ******************* *
* vr 관광지
* ******************* */

.vr-wrapper { background: url(../../../../resource/cwtour/images/sub/vr_bg.jpg) no-repeat; height: 100vh; display: flex; background-position-y: 0px; background-size: cover; } 
.vr-map-area { width: calc(100% - 19.636%); display: flex; justify-content: center; align-items: center; } 
.vr-side-area { background: var(--color-green); width: 19.636%; color: #fff; padding: 50px 30px 30px; display: flex; flex-direction: column; } 
.vr-map {background: url(../../../../resource/cwtour/images/sub/vr_map_bg.png) no-repeat center;background-size: contain;-webkit-filter: drop-shadow( 0px 0px 30px rgba(71, 105, 255, 1));filter: drop-shadow( 0px 0px 40px rgba(71, 105, 255, 1));width: 100%;max-width: 1026px;}
.vr-map-area .vr-name { font-family: "SUIT", sans-serif; font-weight: bold; transition: .2s; } 
.vr-map-area .vr-name.green { fill:#009AA0; } 
.vr-map-area .vr-name.blue { fill:#255DC3; } 
.vr-map-area .vr-name.purple { fill:#7000BF; } 
.vr-map-area .vr-link:hover .vr-name { fill: #fff } 
.vr-map-area .vr-name-bg { fill:#fff; transition: .2s; } 
.vr-map-area .vr-link:hover .vr-name-bg.green { fill:#009AA0; } 
.vr-map-area .vr-link:hover .vr-name-bg.blue { fill:#255DC3; } 
.vr-map-area .vr-link:hover .vr-name-bg.purple { fill:#7000BF; } 
.vr-side-area .title { font-family: 'GmarketSans', sans-serif; font-size: 2.2222rem; color: #fff; font-weight: 300; text-align: center; } 
.vr-side-area .title span:not(.desc) { color: #f5f198; font-weight: bold } 
.vr-side-area .title .desc { text-align: center; margin-bottom: 70px; font-size: 1rem; display: block; font-family: 'SUIT', sans-serif } 
.vr-side-area .logo { display: block; background:url(../../../../resource/cwtour/images/sub/vr_logo.png); width: 128px; height: 32px; margin-top: auto; align-self: center; } 
.vr-list:not(:last-child) { border-bottom: 1px solid #fff; padding-bottom: 35px; margin-bottom: 35px; } 
.vr-list [class^="tit"] { display: flex; font-size: 1.3333rem; font-weight: 600; align-items: center; gap: 15px; margin-bottom: 15px; padding: 0 15px; position: relative; padding-left: 43px; } 
.vr-list [class^="tit"]::before { content:''; background:url(../../../../resource/cwtour/images/sub/ico_vr01.png); width: 25px; height: 25px; display: block; position: absolute; left: 0; } 
.vr-list .tit02::before { background:url(../../../../resource/cwtour/images/sub/ico_vr02.png); width: 29px; height: 33px; } 
.vr-list .tit03::before { background:url(../../../../resource/cwtour/images/sub/ico_vr03.png); width: 32px; height: 32px; } 
.vr-list ul { display: flex; flex-direction: column; gap: 10px; padding: 0 45px; } 
.vr-list li a { color: #fff } 
.vr-list li a:hover { text-decoration: underline } 
.vr-list li a span {display: none}

@media all and (max-width: 1399px) { 
.vr-map {width: 100%;background-position-y: center;}
}

@media all and (max-width: 1199px) { 
 .vr-wrapper {flex-direction: column;height: auto;background: #639bff;} 
 .vr-map-area,
 .vr-side-area { width: 100% } 
 .vr-map-area {padding: 130px 10px 30px;} 
 .vr-side-area .title { position: absolute; top: 0; width:100%; background: var(--color-green); left: 0; padding: 20px 0 } 
 .vr-side-area .title .desc { margin-bottom: 0; } 
 } 

@media all and (max-width: 768px) { 
  .vr-list,
 .vr-list:not(:last-child) {border-bottom:none;padding-bottom: 0;margin-bottom: 0;display: contents;}
 .vr-side-area .title .desc,
 .vr-list [class^="tit"] {display: none;}
 .vr-map-area { display: none; } 
 .vr-list-wrap {padding: 30px 15px;display:flex;flex-wrap: wrap;gap: 14px;}
 .vr-side-area .title { position:static; padding: 30px 0 } 
 .vr-side-area {padding: 0 0 30px;background-size: cover;height: 100%;} 
 .vr-list ul {flex-direction: row;flex-wrap: wrap;padding: 0;display: contents;} 
 .vr-list li {width: calc(33.33% - 10px);} 
 .vr-list li a {color: #121212;background: #fff;width: 100%;display: flex;flex-direction: column;align-items: center;padding: 10px;font-weight: 600;border-radius: 10px;gap: 20px;font-size: 1.1rem;} 
 .vr-list li a::before {content:'';display: block;width: 200px;height: 200px;} 
 .vr-list li a.junam::before { background: url(../../../../resource/cwtour/images/sub/vr_junam.png) no-repeat; background-size: cover;} 
 .vr-list li a.sumok::before { background: url(../../../../resource/cwtour/images/sub/vr_sumok.png) no-repeat; background-size: cover;} 
 .vr-list li a.saengtae::before { background: url(../../../../resource/cwtour/images/sub/vr_saengtae.png) no-repeat; background-size: cover;} 
 .vr-list li a.temple::before { background: url(../../../../resource/cwtour/images/sub/vr_temple.png) no-repeat; background-size: cover;} 
 .vr-list li a.garosu::before { background: url(../../../../resource/cwtour/images/sub/vr_garosu.png) no-repeat; background-size: cover;} 
 .vr-list li a.haeyang::before { background: url(../../../../resource/cwtour/images/sub/vr_haeyang.png) no-repeat; background-size: cover;} 
 .vr-list li a.dotseom::before { background: url(../../../../resource/cwtour/images/sub/vr_dotseom.png) no-repeat; background-size: cover;} 
 .vr-list li a.drama::before { background: url(../../../../resource/cwtour/images/sub/vr_drama.png) no-repeat; background-size: cover;} 
 .vr-list li a.samgwi::before { background: url(../../../../resource/cwtour/images/sub/vr_samgwi.png) no-repeat; background-size: cover;} 
 .vr-list li a.gunhang::before { background: url(../../../../resource/cwtour/images/sub/vr_gunhang.png) no-repeat; background-size: cover;} 
 .vr-list li a.gagopa::before { background: url(../../../../resource/cwtour/images/sub/vr_gagopa.png) no-repeat; background-size: cover;} 
 .vr-list li a span {display: block;background: var(--color-orange);color: #fff;padding: 8px 25px;border-radius: 5px;}

 } 

@media all and (max-width: 640px) {
  .vr-list li { width: calc(50% - 7px); } 
  .vr-list li a::before {width: 150px;height: 150px}
 
}