
@media screen and (min-width:1281px){
	div.navBar{background-color:transparent !important}
	div.navBar.scrolled{        background-color: #fff !important}
	div.navBlank{height: 0 !important}
	#header h1.logo img{filter: brightness(0) invert(1)}
	div.navBar.scrolled #header h1.logo img{filter:none}
	div.navBar #header li.depth0 > a{color: #fff !important}
	div.navBar.scrolled #header li.depth0 > a{color:var(--color-text) !important}
	#top a.btn i.login{fill:#fff !important}
}



span.main-title{display: block; font-weight: 600; color: #CBCBCB}
h2.main-title{line-height: 153%; font-family: 'Gyeonggi Cheonnyeon Batang', serif}
p.main-title{line-height: 160%}
a.main-title{display: flex; align-items: center; font-weight: 600; color: var(--color-text)}
a.main-title i{display: flex; justify-content: center; align-items: center; background-color: var(--color-button-background); border-radius: 50%; transition:.3s}
a.main-title:hover i{background-color: #1c2b1d}
a.main-title i svg{width: 5px; fill: #fff}
@media screen and (max-width:1280px){
	span.main-title{font-size: 1.2rem; margin-bottom: 2rem}
	h2.main-title{font-size: 2rem; margin-bottom: 2rem}
	p.main-title{margin-bottom: 2.67rem}
	a.main-title i{width: 1.67rem; height: 1.67rem; margin-left: 10px}
}
@media screen and (min-width:1281px){
	span.main-title{font-size: 1.37rem; margin-bottom: 3.12rem}
	h2.main-title{font-size: 2.5rem; white-space: pre-line; margin-bottom: 3.12rem}
	p.main-title{font-size: 1.13rem; margin-bottom: 3.75rem}
	a.main-title i{width: 2.19rem; height: 2.19rem; margin-left: 0.94rem}
}


div.cont.cont1{display: flex}
div.cont1-img{overflow: hidden; flex-shrink: 0}
div.cont1-img img{width: 100%}
@media screen and (max-width:767px){
	div.cont.cont1{flex-direction: column}
	div.cont.cont1 div.main-title{margin-bottom: 3.57rem}
	div.cont1-img{display: flex; align-items: center; width: 100%; height:21.42rem}
}
@media screen and (min-width:768px) and (max-width:1280px){
	div.cont.cont1 div.main-title{margin-right: 3.33rem}
	div.cont1-img{width: calc(100% / 2 - 3.33rem); height: 30rem}
}
@media screen and (max-width:1280px){
	section#section1{margin: 6.67rem 0}
	div.cont1-img{border-radius: 0.67rem}
}
@media screen and (min-width:1281px){
	section#section1{margin: 9.37rem 0}
	div.cont.cont1 div.main-title{margin-right: 6.25rem}
	div.cont1-img{border-radius: 1.25rem; width: calc(100% / 2 - 6.25rem)}
}


section#section2{background: url(/image/main/section2_backimg.jpg) no-repeat 50% 0 rgb(0 3 16 / 36%); background-size: cover; background-blend-mode: multiply}
div.cont.cont2 span.main-title{color: rgb(255 255 255 / 60%); text-align: center}
div.cont.cont2 h2.main-title{text-align: center; color: #fff}
div.cont2-box{}
div.cont2-box-guide{background: var(--color-secondary); flex-shrink: 0; box-sizing: border-box}
h3.cont2-box-guide{color: #fff}
p.cont2-box-guide{color: #fff; white-space: pre-line; line-height: 150%}
a.cont2-box-guide{display: flex; color: #fff; font-weight: 600}
a.cont2-box-guide i{display: block; transition: .3s;}
a.cont2-box-guide:hover i{margin-left: 20px}
a.cont2-box-guide i svg{fill: #fff}
div.cont2-box-category{display: flex; flex-direction: column; flex: 1 1 auto}
div.cont2-box-category{display: flex}
ul.cont2-box-category{display: flex; flex-wrap:wrap; height: 100%}
li.cont2-box-category{display: flex;  flex-direction: column; box-sizing: border-box; background-color: #fff}
p.cont2-box-category{line-height: 150%; color: var(--color-text-light)}
a.cont2-box-category{display: flex; justify-content: end}
a.cont2-box-category i{display: flex; justify-content: center; align-items: center; background-color: var(--color-button-background); border-radius: 50%; transition:.3s}
a.cont2-box-category:hover i{background-color: #1c2b1d}
a.cont2-box-category i svg{width: 5px; fill: #fff}
@media screen and (max-width:767px){
	li.cont2-box-category{width:100%}
}
@media screen and (min-width:768px) and (max-width:1280px){
	li.cont2-box-category{width:calc((100% - (0.67rem * 2)) / 3)}
}
@media screen and (max-width:1280px){
	section#section2{padding: 6.67rem 0}
	div.cont2-box{margin-top: 3.33rem}
	div.cont2-box-guide{width: 100%; margin-bottom: 0.67rem; border-radius: 1.25rem; padding: 2rem}
	h3.cont2-box-guide{font-size: 1.6rem; margin-bottom: 1.25rem}
	a.cont2-box-guide{justify-content: flex-end; margin-top: 0.67rem; font-size: 14px}
	a.cont2-box-guide i{width: 6px; margin-left: 0.67rem}
	ul.cont2-box-category{gap: 0.67rem}
	li.cont2-box-category{padding:2rem; border-radius: 1.25rem}
	h3.cont2-box-category{margin-bottom: 0.67rem}
	p.cont2-box-category{font-size: 14px}
	a.cont2-box-category{margin-top: auto}
	a.cont2-box-category i{width: 2.19rem; height: 2.19rem;}
}
@media screen and (min-width:1281px){
	section#section2{padding: 9.37rem 0}
	div.cont2-box{display: flex; gap: 1.25rem; margin-top: 5rem}
	div.cont2-box-guide{width: calc(100% / 3); border-radius: 1.25rem; padding: 3.12rem 2.5rem 3.75rem}
	h3.cont2-box-guide{font-size: 24px; margin-bottom: 1.25rem}
	a.cont2-box-guide{margin-top: 30px; font-size: 14px}
	a.cont2-box-guide i{width: 6px; margin-left: 15px}
	ul.cont2-box-category{gap: 1.25rem}
	li.cont2-box-category{width:calc((100% - (1.25rem * 2)) / 3); padding:30px; border-radius: 1.25rem}
	h3.cont2-box-category{margin-bottom: 1.25rem}
	p.cont2-box-category{font-size: 14px}
	a.cont2-box-category{margin-top: auto}
	a.cont2-box-category i{width: 2.19rem; height: 2.19rem;}
}


section#section3{background-color: var(--color-background-secondary)}
div.cont.cont3{display: flex; flex-wrap: wrap}
div.cont3-list{border-top: 2px solid var(--color-primary)}
a.cont3-list{display: flex; justify-content: space-between; color:var(--color-text); border-bottom: 1px solid var(--color-border)}
p.cont3-list-title{overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: keep-all; font-weight: 600}
span.cont3-list-date{display: block; color: var(--color-text-lighter)}

@media screen and (max-width:767px){
	div.cont.cont3 div.main-title{width: 100%; margin-bottom: 3.57rem}
}
@media screen and (min-width:768px) and (max-width:1280px){
	div.cont.cont3 div.main-title{width: calc(100% / 2)}
	div.cont3-list{width: calc(100% / 2)}
}
@media screen and (max-width:1280px){
	section#section3{padding: 6.67rem 0}
	div.cont3-list{flex: 1 1 auto}
	a.cont3-list{padding: 1.25rem 0}
	p.cont3-list-title{padding-right:1.33rem}
	
}
@media screen and (min-width:1281px){
	section#section3{padding: 9.37rem 0}
	div.cont.cont3 div.main-title{width: calc(100% / 2)}
	div.cont3-list{width: calc(100% / 2)}
	a.cont3-list{padding: 1.25rem 0}
	p.cont3-list-title{padding-right:1.25rem}
}

section#section4{position: relative; background: url(/image/main/section4_backimg.jpg) no-repeat 50% 0 var(--color-background-secondary); background-size: cover; background-blend-mode: overlay}
div.cont.cont4 span.main-title{text-align: center}
div.cont.cont4 h2.main-title{text-align: center}
div.cont.cont4 a.main-title{justify-content: center}

div.swiper.cont4-list{overflow: hidden}
ul.cont4-list{display: flex}
li.cont4-list{flex-shrink: 0; aspect-ratio: 1 / 1; overflow: hidden; display: flex; justify-content: center; align-items: center}
li.cont4-list img {max-width: 100%}
div.cont4-list-arrow-next, div.cont4-list-arrow-prev{position: absolute; cursor:pointer}
div.cont4-list-arrow svg{opacity: .2}
div.cont4-list-arrow-next:hover svg, div.cont4-list-arrow-prev:hover svg{opacity: 1}

@media screen and (max-width:767px){
	div.cont4-list-arrow{display: none}
}
@media screen and (max-width:1280px){
	section#section4{padding: 6.67rem 0}
	div.swiper.cont4-list{margin-top: 50px}
	div.cont4-list-arrow-next, div.cont4-list-arrow-prev{top: 71%}
	div.cont4-list-arrow-next{left: 50px}
	div.cont4-list-arrow-prev{right: 50px}
	div.cont4-list-arrow svg{height: 36px}
}
@media screen and (min-width:1281px){
	section#section4{padding: 9.37rem 0}
	div.swiper.cont4-list{margin-top: 80px}
	div.cont4-list-arrow-next, div.cont4-list-arrow-prev{top: 74%}
	div.cont4-list-arrow-next{left: -80px}
	div.cont4-list-arrow-prev{right: -80px}
	div.cont4-list-arrow svg{height: 36px}
}
div.cont.cont5{display: flex; align-items:center}
div.cont5-map{flex-shrink: 0; border: 1px solid var(--color-border); overflow: hidden}
div.cont5-map div#daumRoughmapContainer1755569863365{width: 100%}
div.cont5-map .wrap_map{height: 500px}
div.cont5-map span.map_border{border: 0 !important; background-color: transparent !important}
div.cont5-map .root_daum_roughmap .wrap_controllers{display: none}
p.cont5-text-num{font-weight: 600}
p.cont5-text-loca{display: flex; line-height: 180%}
p.cont5-text-loca i svg{fill: var(--color-icon-fill-primary)}
h2.cont5-text{font-family: 'Gyeonggi Cheonnyeon Batang', serif}
div.cont5-text-button{display: flex; align-items: center}
div.cont5-text-button button{display: flex; align-items: center; justify-content: center; font-weight: 600; border-radius: 500px}
div.cont5-text-button button.naver{background-color: #1252A1; color: #fff}
div.cont5-text-button button.kakao{background-color: #F6E230; color: var(--color-text)}
div.cont5-text-button button i{display: flex; align-items: center}
div.cont5-text-button button.naver svg path{fill: #88BB36}
div.cont5-text-button button.naver svg circle{fill: #fff}
div.cont5-text-button button.kakao svg{fill: #007DFD}
@media screen and (max-width:1280px){
	section#section5{margin: 6.67rem 0}
	div.cont.cont5{gap: 3.33rem; flex-direction: column-reverse; align-items: flex-start}
	div.cont5-map{width:100%; border-radius: 10px}
	div.cont5-text{width: 100%}
	h2.cont5-text{font-size: 1.6rem; margin-bottom: 1.33rem}
	p.cont5-text-num{font-size: 2.13rem; margin-bottom: 1.33rem}
	p.cont5-text-loca{margin-bottom: 2rem}
	p.cont5-text-loca i{margin: 2px 8px 0 0}
	p.cont5-text-loca i svg{width: 0.67rem}
	div.cont5-text-button{gap: 10px}
	div.cont5-text-button button{font-size: 1rem; width: calc((100% - 1.25rem) / 2); height: 2.67rem; padding:0 10px}
	div.cont5-text-button button i{margin-right: 10px}
	div.cont5-text-button button svg{width: 1rem}
}
@media screen and (min-width:1281px){
	section#section5{margin: 9.37rem 0}
	div.cont.cont5{gap: 100px}
	div.cont5-map{width: calc(100% / 2); border-radius: 20px}
	h2.cont5-text{font-size: 2.5rem; margin-bottom: 1.87rem}
	p.cont5-text-num{font-size: 43px; margin-bottom: 1.87rem}
	p.cont5-text-loca{margin-bottom: 3.125rem}
	p.cont5-text-loca i{margin: 2px 10px 0 0}
	p.cont5-text-loca i svg{width: 11px}
	div.cont5-text-button{gap: 10px}
	div.cont5-text-button button{font-size: 16px; width: calc((100% - 1.25rem) / 2); height: 3.75rem; padding:0 20px}
	div.cont5-text-button button i{margin-right: 15px}
	div.cont5-text-button button svg{width: 16px}
}
