/* header디자인 */
header {
    background: #40305fd3;
    ;
}

header .wrap {
    margin: 0 20px;
}

header .menu a {
    font-size: 1.2rem;
}

.moonT,
.sunT,
.material-symbols-outlined {
    display: none;
}

.toggle {
    position: absolute;
    top: 20px;
    left: 95px;
}

/* inner */
.course_sun,
.course_night {
    width: 100%;
    margin: 0 auto;
    bottom: 0;
    right: 0;
}

.course_sun {
    display: none;
}

ul.tabs {
    justify-content: center;
}

ul.tabs li {
    background: #40305fd3;
    width: 50%;
    text-align: center;
    font-weight: 300;
}

ul.tabs li.current {
    background: #ffffffc4;
    color: #40305f;
    border-radius: 0;
}

.tab-content.current {
    display: none;
}

.left h1 {
    font-size: 1.3rem;
}

.left h2 {
    font-size: 0.8rem;
    margin: 0 30px;
    letter-spacing: 0px;
    line-height: 24px;
    overflow-y: auto;
    padding: 0 2px;
}

.left img {
    height: 35%;
    margin: 25px 30px;
}

.left {
    padding: 60px 0;
}

/* map 구조 */
.map {
    padding-top: 150px;
}

.road,
.sun_road {
    top: 122px;
    left: 50px;
    width: 750px;
}

img[class^="place"] {
    width: 225px;
}

.place1 {
    top: 361px;
    left: 9px;
}

.place2 {
    top: 224px;
    left: 156px;
}

.wrap3 .place3 {
    top: 201px;
    left: 289px;
    width: 150px;
}

.wrap4 .place4 {
    top: 117px;
    left: 360px;
    width: 187.5px;
}

.place5 {
    top: 105px;
    left: 97px;
}

.place6 {
    top: 147px;
    left: 566px;
}

.wrap7 .place7 {
    top: 368px;
    left: 407px;
    width: 86.15px;
}

.wrap8 .place8 {
    top: 286px;
    left: 485px;
    width: 60px;
}

.wrap9 .place9 {
    top: 147px;
    left: 543px;
    width: 75px;
}

.wrap10 .place10 {
    top: 70px;
    left: 468px;
    width: 123.75px;
}

.star {
    top: 156px;
    left: 8px;
    width: 685px;
}

.tree {
    top: 119px;
    left: 83px;
    width: 726px;
}

.lightBar {
    top: 282px;
    left: 201px;
    width: 598px;
}

.ani {
    top: 250px;
    left: 33px;
    width: 565px;
}

.sun_tree {
    top: 80px;
    left: 77px;
    width: 754px;
}

.n_course1 {
    width: 219px;
    top: 134px;
    left: 406px;
}

.n_course2 {
    width: 551px;
    top: 199px;
    left: 56px;
}

.s_course1 {
    width: 339px;
    top: 208px;
    left: 64px;
}

.s_course2 {
    width: 434px;
    top: 286px;
    left: 72px;
}

.s_course3 {
    width: 519px;
    top: 215px;
    left: 68px;
}

.map div p {
    display: none;
}
.cultureLogo, .cultureLogo2 {
    height: 75px;
    width: 125px;
    right: 35px;
}
/* modal창 디자인 */
#modal .modal-window {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px 0 rgba(39, 15, 46, 0.37);
    backdrop-filter: blur( 13.5px );
    border-radius: 10px;
    width: 320px;
    height: 500px;
    position: relative;
    top: -20px;
    padding: 35px 20px;
    z-index: 30;
}

#modal .title h2 {
    font-size: 1.2rem;
}
#modal .close-area {
    font-size: 1rem;
    padding: 0px 6px;
}
#modal .content {
    margin-top: 20px;
    color: rgb(31, 31, 31);
    text-align: center;
}
#modal .content h3{
    color: black;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 23px;
    font-family: 'Eulyoo1945-Regular';
    word-break: keep-all;
}
#modal .content p{
    color: rgb(49, 49, 49);
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 26px;
    margin-top: 50px;
    word-break: keep-all;

}
/* 테마변경 */
.sun #sun,
.sun .sunT{
    display: none;
}
.sun header {
    background: #f0f0f0c5;
}
/* 마우스 호버 */
.map div p,
.sun .map div p {
    border-left: none;
    padding: 0 5px;
    font-weight: 500;
    font-size: 0.7rem;
    height: fit-content;
}
.map div p{
    background: rgba(40, 0, 56, 0.377);  
}
.sun .map div p{
    background: rgba(255, 255, 255, 0.829);  
}
.map .wrap10 p {
    top: 69px;
    left: 544px;
    height: fit-content;
}

.map .wrap9 p {
    top: 152px;
    left: 591px;
    height: fit-content;
}

.map .wrap8 p {
    top: 327px;
    left: 528px;
    height: fit-content;
}

.map .wrap7 p {
    top: 369px;
    left: 442px;
    height: fit-content;
}

.map .wrap6 p {
    top: 161px;
    left: 723px;
    height: fit-content;
}

.map .wrap5 p {
    top: 117px;
    left: 264px;
    height: fit-content;
}

.map .wrap4 p {
    top: 140px;
    left: 434px;
    height: fit-content;
}

.map .wrap3 p {
    top: 258px;
    left: 395px;
    height: fit-content;
}

.map .wrap2 p {
    top: 318px;
    left: 309px;
    height: fit-content;
}

.map .wrap1 p {
    top: 414px;
    left: 159px;
    height: fit-content;
}

.map .wrap10 p,
.map .wrap8 p,
.map .wrap4 p,
.map .wrap1 p,
.sun .map .wrap10 p,
.sun .map .wrap8 p,
.sun .map .wrap4 p,
.sun .map .wrap1 p {
    border-right: none;
    text-align: left;
}