@charset 'utf-8';
@import url(../font/fonts.css);

:root {--font:14px;}
	* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html, body {font-size:12px/1.5;height: unset !important;width:unset !important}
body {min-width:320px;font-family:'SCoreDream', '맑은 고딕','Malgun Gothic','NanumMyeongjoBold','돋움','Dotum','Arial','sans-serif';font-size:12px/1.5;line-height:1.5;color:#666;overflow-x: hidden;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td, textarea, pre {margin:0;padding:0;}
input, select {font-family:'Nanum Gothic', '맑은 고딕','Malgun Gothic','돋움','Dotum','Arial','sans-serif';}
h1, h2, h3, h4, h5, h6 {font-size:1.6rem;font-weight:normal;}
address, em {font-style:normal;}
ul, ol, li {list-style:none;}
fieldset, img {border:none;}
img {max-width:100%;}
/*스크린 리더 only*/
.sr-only {position:absolute;overflow:hidden;clip:rect(0, 0, 0, 0);width:1px;height:1px;margin:-1px;padding:0;border:0;}
a:hover, a:visited, a:link {text-decoration:none;}
.dp_none {position:absolute;top:-9999px;left:-9999px;}
/* 상단 : 전체메뉴 */

#gnb {z-index:2;box-sizing:border-box;width:100%;background-color:#8a5e69;position: relative;} 
#gnb  ul{display:flex; gap:5px;height:100%;}
#gnb  ul li{color:#fff; font-size:20px;background:#7b4d58;width:100%;box-shadow: inset 0 -5px #673944;}
#gnb  ul li a{width:100% ;color:#fff; display:flex;justify-content: center;align-items: center;height: 100%;min-height:64px;text-align: center;padding:10px 0;line-height: 1.17;}
#gnb  ul li.on{background:#e83662;box-shadow: inset 0 5px #c91542 ;}
#gnb  ul li br{display: none;}
.btn-top {position:fixed;z-index:10;bottom:-80px;right:0;display:block;width:50px;height:75px;font-size:0;transition:1s;opacity:0;background: url(../images/2026/btn-top.png) center no-repeat;background-size:contain;} 
.btn-top.show {bottom:80px;opacity:1;} 
/* 메인 : 컨텐츠 */

#menu {background-color:#fef1f3 ;box-shadow:inset 0 -3px #f28492;} 
#menu ul {display:flex;padding-top:10px;} 
#menu.fixed {position:fixed;z-index:1;top:0;} 
#menu {width:100%;} 
#menu * {box-sizing:border-box;} 
#menu .tab {display:grid;text-align:center;grid-template-columns:1fr 1fr;} 
#menu li {flex:1 1;font-size:32px;} 
#menu li a {display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;padding:22px 0;font-size:32px;font-weight:500;line-height:26px;color:#a14e64;border:1px solid #c28c9a;border-bottom:3px solid #f28492;border-radius:30px 30px 0 0;background:#e9bbc7;} 
#menu li span {display:flex;align-items:center;}
#menu li span:before {margin-right:14px;content:'';background-repeat:no-repeat;background-size:contain;} 
#menu li:nth-child(1) span:before {width:43px;background-image:url(../images/2026/ico-menu1-off.png);aspect-ratio:43 / 40;} 
#menu li:nth-child(2) span:before {width:30px;background-image:url(../images/2026/ico-menu2-off.png);aspect-ratio:30 / 38;} 
#menu li:nth-child(1).on span:before {width:43px;background-image:url(../images/2026/ico-menu1-on.png);aspect-ratio:43 / 40;} 
#menu li:nth-child(2).on span:before {width:30px;background-image:url(../images/2026/ico-menu2-on.png);aspect-ratio:30 / 38;} 
#menu li.on {position:relative;z-index:1;} 
#menu li.on:after {position:absolute;top:100%;left:calc(50% - 12px);display:block;width:0;height:0;content:'';border-right-color:transparent !important;border-bottom-color:transparent !important;border-left-color:transparent !important;background:none;} 
#menu li.on a {font-weight:600;color:#ff007e;border:3px solid #f28492;border-bottom-color:#fff ;background:#fff;} 
#menu li.on a span {position:relative;z-index:0;} 
/*************** footer *****************/
.footer {border-top:1px solid #cecece;} 
.footer .copyright {display:flex;align-items:center;justify-content:center;height:70px;font-size:14px;text-align:center;letter-spacing:normal;color:#666;}

/*************** contents *****************/
#visual {position:relative;overflow:hidden;max-height:910px;color:#222;background:linear-gradient(#cbe4ff, #fef1f2);} 
#visual .visualContent:before {position:absolute;z-index:-1;top:0;left:calc(50% - 1000px);width:100%;max-width:773px;content:'';background:url(../images/2026/bg-visual-bf.png) right top no-repeat;aspect-ratio:773 / 878;}
#visual .visualContent:after {position:absolute;z-index:-1;top:0;left:calc(50% + 176px);width:100%;max-width:824px;content:'';background:url(../images/2026/bg-visual-af.png) left top no-repeat;aspect-ratio:824 / 878;}
.visualContent {position:relative;z-index:0;width:100%;max-width:1000px;margin:0 auto;padding-top:63px;} 
.visualContent .title-wrap {display:flex;align-items:center;flex-direction:column;margin-bottom:23px;gap:28px;}
.visualContent .title-wrap p {display:flex;align-items:center;justify-content:center;width:100%;max-width:383px;font-size:30px;text-align:center;border:1px solid #222;border-radius:50vh;aspect-ratio:383 / 56;} 
.visualContent .text-wrap {display:flex;align-items:center;flex-direction:column;justify-content:flex-start;font-size:28px;line-height:1.28;text-align:center;} 
.visualContent .btn {display:flex;align-items:center;justify-content:center;margin-top:16px;padding:13px 17px;background:#ea2c00;} 
.visualContent .btn em {display:contents;color:#fffeb8;} 
.visualContent .btn span {display:inline-flex;align-items:center;font-size:24px;font-weight:bold;color:#fff;} 
.visualContent .btn span:before {width:47px;margin-right:15px;line-height:inherit;content:'';color:inherit;background:url(../images/2026/ico-visual-btn-bf.png) center / contain;aspect-ratio:47 / 40;} 
.visualContent .btn span:after {width:21px;margin-left:18px;line-height:inherit;content:'';color:inherit;background:url(../images/2026/ico-visual-btn-af.png) center / contain;aspect-ratio:21 / 18;} 
.visualContent .img-family {width:100%;max-width:424px;content:'';background:url(../images/2026/ico-family.png) no-repeat;aspect-ratio:424 / 325;} 


.inner-wrap {width:100%;max-width:1000px;margin:0 auto;} 
.contents {box-sizing:border-box;min-height:100vh;padding:100px 0 120px;} 
.contents .cont-tit {display:flex;align-items:center;flex-direction:column;} 
.contents .cont-tit h3 {display:flex;align-items:center;flex-direction:column;margin-bottom:24px;gap:17px;} 
.contents .cont-tit h3:before {width:20px;height:8px;content:'';border-radius:50vh;background:#ff007e;} 
.contents .cont-tit p {font-size:26px;line-height:1.385;color:#333;text-align: center;}
.cont-timeline .year {position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:300px;;margin:0 auto;border:2px solid #000;border-radius:50vh;aspect-ratio:3 / 1;}
.cont-timeline .year:before, .cont-timeline .year:after {position:absolute;top:calc(50% - 7.5px);left:12%;width:15px;content:'';border-radius:100%;background-color:#000;aspect-ratio:1 / 1;;}
.cont-timeline .year:after {right:12%;left:unset;}
.cont-timeline .year span {display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:290px;font-size:40px;font-weight:bold;text-align:center;color:#222;border:1px solid #000;border-radius:50vh;aspect-ratio:29 / 9;}

#cont01 {background:linear-gradient(#fff1f3 calc(100% - 1px), #fff calc(100% - 1px));}
.cont-timeline {margin-top:75px;}
.month-wrap {display:flex;margin-top:66px;padding:0 35px;gap:70px;}
.month {width:100%;}
.month dt {position:relative;}
.month dt:before {position:absolute;top:-16px;left:37px;width:12px;height:17px;content:'';border-radius:6px 6px 0 0;}
.month dt:after {position:absolute;top:-16px;right:37px;width:12px;height:17px;content:'';border-radius:6px 6px 0 0;}
.month dd {padding:9.3% 0 0 15.8%;line-height:1;background-repeat:repeat-y;background-position-x:32px;background-position-y:-1px;}
.month .calendar {text-align:center;border:10px solid;border-radius:20px;}
.month .calendar .txt-eng {padding:2px 0;font-size:24px;letter-spacing:0;color:#222;}
.month .calendar .txt-kor {padding:3px 0;font-size:36px;font-weight:bold;border-radius:0 0 10px 10px;background-color:#fff;}
.month li {position:relative;color:#333;}
.month ul {display:flex;flex-direction:column;width:85%;gap:100px;}
.month .date {font-size:28px;font-weight:bold;line-height:1;}
.month p {font-size:20px;line-height:1;text-align:center;word-break:auto-phrase;}
.month li:before {position:absolute;left:-15.6%;width:38px;height:auto;content:'';background-size:contain;aspect-ratio:38 / 28;}
.month li .img {margin:13px 0 20px;}
.march .calendar {border-color:#f29d23;background-color:#f29d23;}
.march dt:before, .march dt:after {background:#f29d23;}
.april dt:before, .april dt:after {background:#ff8830;}
.march .calendar .txt-kor {color:#bb5000;}
.april .calendar {border-color:#ff8830;background-color:#ff8830;}
.april .calendar .txt-kor {color:#f54500;}
.march dd {background-image:url(../images/2026/line-march.png);}
.april dd {background-image:url(../images/2026/line-april.png);}
.march li:before {background-image:url(../images/2026/ico-date-march.png);}
.april li:before {background-image:url(../images/2026/ico-date-april.png);}

.travelcontlist {padding-top:73px;}
.travelcontlist .travel-tab {margin-bottom:60px;} 
.travelcontlist .travel-tab ul {display:grid;gap:23px;grid-template-columns:repeat(3, 1fr);} 
.travelcontlist .travel-tab li {font-size:30px;font-weight:400;color:#fff;border:5px solid #ff4663;border-radius:25px;background:#ff4663;} 
.travelcontlist .travel-tab li a {display:flex;align-items:center;justify-content:center;height:70px;color:inherit;} 
.travelcontlist .travel-tab li.on {position:relative;font-weight:600;;color:#ff4663;background-color:#fff;} 
.travelcontlist .travel-tab li.on:before {position:absolute;width:35px;height:100%;content:'';background:url(../images/2026/bg-cont-tab.png) center no-repeat;} 
.travelcontlist .travel-tab li.on:after {position:absolute;right:0;bottom:0;width:35px;height:100%;content:'';transform:rotateY(180deg);background:url(../images/2026/bg-cont-tab.png) center no-repeat;} 
.travelcontlist .card {position:relative;display:flex;padding:50px 40px;background:linear-gradient(transparent 45px,  #f8f8f8 45px, #f8f8f8 calc(100% - 45px),transparent calc(100% - 45px) );gap:30px;;} 
.travelcontlist .card::before {position:absolute;top:0;left:0;width:100%;height:50px;content:'';background:url(../images/2026/bg-card.png) no-repeat;aspect-ratio:1000 / 50;}
.travelcontlist .card::after {position:absolute;bottom:0;left:0;width:100%;height:50px;content:'';transform:rotateX(180deg);background:url(../images/2026/bg-card.png) no-repeat;background-size:contain;aspect-ratio:1000 / 50;;}
.travelcontlist .map-thumb {flex-shrink:0;width:400px;aspect-ratio:400 / 250;} 
.travelcontlist .travel-cont {display:flex;flex-direction:column;width:100%;} 
.travelcontlist .travel-header {display:flex;align-items:center;flex-direction:row-reverse;justify-content:space-between;margin-top:-8px;margin-bottom:8px;font-size:30px;color:#333;} 
.travelcontlist .travel-header .travel-category {height:30px;padding:0 15px ;font-size:18px ;font-weight:500;color:#fff;border-radius:50vh;} 
.travelcontlist .travel-header .category01 {background-color:#138fc2;} 
.travelcontlist .travel-header .category02 {background-color:#e54393;} 
.travelcontlist .travel-header .category03 {background-color:#b240c0;} 
.travelcontlist .travel-header .category04 {background-color:#ed5316;} 
.travelcontlist .travel-header .travel-copy {font-size:30px;color:#333;} 
.travelcontlist .travel-footer {display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;margin-top:13px;gap:10px;} 
.travelcontlist .travel-desc {font-size:16px;line-height:1.375;word-break:auto-phrase;color:#666;} 
.travelcontlist .travel-address {display:flex;flex-direction:column;gap:10px;}
.travelcontlist .travel-address .address-code:not(:empty) {display:inline-flex;padding:3px 12px;font-size:16px;color:#333;border-radius:50vh;background:#e5e5e5;} 
.travelcontlist .travel-address .address-code:before {flex-shrink:0;width:15px;height:21px;margin-right:5px;line-height:inherit;content:'';color:inherit;background:url(../images/2026/ico-map.png) no-repeat center;} 
.travelcontlist .travel-actions {display:flex;flex-wrap:wrap;gap:9px;}
.travelcontlist .travel-actions .btn {padding:9px 20px 9px 30px;font-size:18px;font-size:16px;line-height:1;color:#333;border:1px solid #333;background-color:#fff;} 
.travelcontlist .travel-actions .btn span {display:inline-flex;align-items:center;font-size:inherit;font-weight:500;line-height:inherit;} 
.travelcontlist .travel-actions .btn span:after {width:12px;margin-left:8px;line-height:inherit;content:'';color:inherit;background:url(../images/2026/ico-link.png) center / 100%;aspect-ratio:1 / 1;} 

/* 지도 레이어 팝업 */
.mask {position:fixed;z-index:200;top:0;left:0;display:none;width:100%;height:100%;background:rgba(256,256,256,.8);}
.poplayer {position:fixed;z-index:201;top:0;left:0;display:none;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;}
.poplayer .holder {position:relative;z-index:2;height:100%;margin:0 auto;padding:0;}
.poplayer .contentbox {position:relative;background:#fff;}
.poplayer .header {position:relative;display:flex;align-items:center;height:60px;padding:0 15vw 0 5vw;background-color:#ff2c60;}
.poplayer .header .title {font-size:calc(var(--font) * 1.4);font-weight:700;word-wrap:break-word;word-break:break-all;color:#fff;}
.poplayer .contentbox {overflow:hidden;height:100%;}
.poplayer .contentbox .content {position:relative;height:calc(100% - 60px);margin-top:.3rem;padding:15px;}
.poplayer .contentbox iframe {position:relative;overflow:hidden;box-sizing:border-box;width:100%;height:99%;border:0;}
.poplayer .buttons {position:absolute;top:50%;right:.5em;display:block;transform:translateY(-50%);}
.poplayer .buttons li {float:left;overflow:hidden;}
.poplayer .buttons > li > a {position:relative;display:block;width:40px;height:40px;background:url('https://www.seoul.go.kr/res_newseoul_story/springflowerway/images/btn/btn-popup-close_2026.png') no-repeat center center;}
.poplayer .buttons > li > a > span {position:absolute;top:-9999px;left:-9999px;}
.poplayer .buttons li.del {padding:0 9px;border-left:none;}
.poplayer .buttons li.del a {width:81px;}
.poplayer .buttons li.del a span {position:relative;top:50%;display:inline-block;width:81px;height:36px;margin-top:-18px;font-size:calc(var(--font) * 1.1);line-height:35px;cursor:pointer;text-align:center;letter-spacing:-1px;color:#fff;border:1px solid #e1384a;border-radius:4px;background:#e94455;}
.poplayer .imgbuttons .btn_prev, .poplayer .imgbuttons .btn_next {position:absolute;top:50%;margin-top:-34px;}
.poplayer .imgbuttons .btn_prev {left:34px;}
.poplayer .imgbuttons .btn_next {right:34px;}


@media all and (max-width: 1024px) {.visualContent {max-width:100vw;}
	#visual .visualContent:before {top:0;left:0;width:44.72vw;max-width:unset;background-image:url(../images/2026/m-bg-visual-bf.png);background-size:contain;aspect-ratio:322 / 436;}
	#visual .visualContent:after {top:0;right:0;left:unset;width:36.8vw;max-width:unset;background-image:url(../images/2026/m-bg-visual-af.png);background-size:contain;aspect-ratio:265 / 577;}
}
@media all and (max-width: 999px) {
	#menu li a {padding:14px 0;font-size:3.2vw;border-radius:20px 20px 0 0 ;}
	#menu li span:before {margin-right:7px;}
	#menu li:nth-child(1) span:before {width:unset !important;height:4vw;}
	#menu li:nth-child(2) span:before {width:unset !important;height:3.8vw;}
	.contents {padding:50px 15px 60px;}
	.visualContent .title-wrap p {width:auto;height:6vw;padding:0 3vw;font-size:3vw;aspect-ratio:unset;}
	.title-wrap h2 {width:76vw;}
	.visualContent .text-wrap {font-size:2.8vw;}
	.visualContent .btn span {font-size:2.8vw;}
	.contents .cont-tit h3 img {height:7.63vw; max-height:50px;}
	.contents .cont-tit p {font-size:2.8vw;}
	.month-wrap {margin-top:40px;padding:0 10px;gap:5vw;}
	.cont-timeline .year {width:40vw;}
	.cont-timeline .year span {width:38.7vw;font-size:4vw;}
	.cont-timeline .year:before, .cont-timeline .year:after {top:calc(50% - .75vw);;width:1.5vw;}
	.month .calendar .txt-eng {font-size:2.4vw;}
	.month .calendar .txt-kor {font-size:3.6vw;}
	.month .date {font-size:2.8vw;}
	.month p {font-size:2vw;}
	.travelcontlist {padding-top:40px;}
	.travelcontlist .travel-tab {margin-bottom:30px;}
	.travelcontlist .travel-tab li {font-size:3vw;border-radius: 20px;}
	.travelcontlist .card {padding:30px 20px;background:linear-gradient(transparent 3vw,  #f8f8f8 3vw, #f8f8f8 calc(100% - 3vw),transparent calc(100% - 3vw) );gap:15px;}
	.travelcontlist .card:before, .travelcontlist .card:after {z-index:-1;background-size:contain;}
	.travelcontlist .map-thumb {width:40vw;}
	.travelcontlist .travel-header .travel-copy {margin-top:0;font-size:3vw;}
	.travelcontlist .travel-desc {font-size:16px;}
}
@media all and (max-width: 768px) {
.travelcontlist .travel-actions .btn{padding:6px 11px 6px 14px;}
.travelcontlist .travel-actions .btn span:after{margin-left: 4px;}
.travelcontlist .travel-tab li a{height: unset;padding: 12px;}
.travelcontlist .travel-tab ul{gap: 18px;}
}
@media all and (max-width: 500px) {
	#gnb  ul li br {display:block;}
	#menu li a {font-size:20px;}
	#menu li:nth-child(1) span:before {height:25px;}
	#menu li:nth-child(2) span:before {height:19px;}
	.contents {padding:40px 15px 50px;}
	.visualContent .title-wrap p {width:auto;height:unset;padding:4px 14px;font-size:17px;}
	.title-wrap h2 {width:76vw;}
	.visualContent .img-family {width:55vw;background-size:contain;}
	.visualContent .text-wrap {font-size:16px;}
	.visualContent .btn {padding:7px 9px;}
	.visualContent .btn span {font-size:16px;}
	.visualContent .btn span:before {width:1.5em;margin-right:7px;}
	.visualContent .btn span:after {width:.875em;margin-left:8px;}
	.contents .cont-tit p {font-size:18px;}
	.month-wrap {flex-wrap:wrap;margin-bottom:30px;gap:60px;}
	.month .calendar .txt-eng {font-size:16px;}
	.month .calendar .txt-kor {font-size:20px;}
	.month .date {font-size:18px;}
	.month p {font-size:16px;}
	.month li:before {top:-3px;left:-14.6%;width:34px;}
	.month ul {gap:30px;}
	.travelcontlist {padding-top:20px;}
	.travelcontlist .travel-tab {margin-bottom:15px;}
	.travel-sec {margin:0 -15px;}
	.travelcontlist .travel-tab ul {gap:10px 15px;grid-template-columns:repeat(2, 1fr);}
	.travelcontlist .travel-tab li {font-size:20px;border-width:3px;border-radius:16px;}
	.travelcontlist .travel-tab li.on:before, .travelcontlist .travel-tab li.on:after {width:24px;background-size:contain;}
	.travelcontlist .travel-tab a {height:unset !important;padding:7px 0;font-weight:normal;}
	.travelcontlist .travel-tab li.on a {font-weight:bold;}
	.travelcontlist .travel-sec li {border-bottom:1px solid #e5e5e5;}
	.travelcontlist .travel-sec li:first-child {border-top:1px solid #e5e5e5;}
	.travelcontlist .card {padding:20px 0;padding-right:15px;background:none;}
	.travelcontlist .map-thumb {width:50vw;}
	.travelcontlist .travel-header {flex-direction:row;}
	.travelcontlist .travel-header .travel-copy {font-size:20px;}
	.travelcontlist .travel-header .travel-category {display:none;}
	.travelcontlist .card:before, .travelcontlist .card:after {display:none;}
	.travelcontlist .travel-address .address-code:not(:empty) {padding:0;font-size:15px;line-height:1.35;border-radius:0;background:none;}
	.travelcontlist .travel-address .address-code:before {width:1.35em;height:1.35em;border-radius:100%;background-color:#e5e5e5;background-size:auto 16px;}

	.travelcontlist .travel-footer {margin:0;}
	.travelcontlist .travel-desc {display:none;}
	.travelcontlist .travel-actions {gap:5px;}
	.travelcontlist .travel-actions .btn {padding:5px 5px 5px 6px;font-size:13px;}
	.travelcontlist .travel-actions .btn span:after {width:10px;margin-left:2px;}
}