@charset "utf-8";
/*************************************************************************
* @ 서비스명   : contents
* @ 파일명     : /css/contents.css
* @ 페이지설명  : contents.css
* @ 작성일     : 2024.11.18
**************************************************************************/
* {
    box-sizing: border-box;
}
body{margin:0px;}
main .layout{width:1120px;margin:0 auto;box-sizing: border-box;}

main .layout .section01{width:100%;display:flex;}
main .layout .section01 .img{width:100%}
main .layout .section01 .left{width:66%;aspect-ratio:75/135;background-image: url("/html/images/contents/main.jpg");background-size:cover;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;line-height:1;}
main .layout .section01 .left .t1{font-size:115px;color:#fff;}
main .layout .section01 .left .t1 .bold{font-weight:800;}
main .layout .section01 .right{width:34%;padding:40px 60px 50px 0px;display:flex;flex-direction:column;justify-content:space-between;}
main .layout .section01 .right .t1{text-align:right;font-size:38px;line-height:2;color:#00579d;}
main .layout .section01 .right .t1 .bold{font-weight:600;}
main .layout .section01 .right .t2{margin-top:155px;font-size:115px;line-height:1;background: url("/html/images/contents/main.jpg");background-size:auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
main .layout .section01 .right .t2 .bold{font-weight:800;}
main .layout .section01 .right .logo{text-align:right;}
main .layout .section01 .right .logo img{width:230px;}

main .layout .section02{background:#f4f4f4;width:100%;padding:99px 105px 90px 105px;display:flex;flex-direction:column;align-items:center;}
main .layout .section02 .t1{font-size:42px;margin-bottom:10px;}
main .layout .section02 .t2{font-size:68px;margin-bottom:10px;font-weight:700;text-align: center;}
main .layout .section02 .t3{font-size:31px;padding-bottom:60px;}
main .layout .section02 .line{border-bottom:1px solid;width:70px;margin-bottom:40px;}
main .layout .section02 .t4{font-size:47px;font-weight:600;}
main .layout .section02 .t5{font-size:40px;padding-bottom:10px;}
main .layout .section02 .t6{font-size:44px;font-weight:600;}

main .layout .section03{width:100%;}
main .layout .section03 .t1{font-size:46px;font-weight:500;color:#9fa0a0;text-align:center;padding-bottom:60px;letter-spacing:5.5px;}
main .layout .section03 .t2{font-size:44px;text-align:center;line-height:1.7;}

main .layout .section04{width:100%;padding:75px 105px 60px 105px;background:#f4f4f4;}
main .layout .section04 .t1{font-size:46px;font-weight:500;color:#9fa0a0;text-align:center;padding-bottom:30px;letter-spacing:5.5px;}
main .layout .section04 .calendar{margin-top:40px;}
main .layout .section04 .top{display:flex;justify-content:space-between;align-items:center;}
main .layout .section04 .top .may{font-size:63px;color:#727171;font-weight:600;}
main .layout .section04 .top .may .en{font-size:42px;padding-left:10px;}
main .layout .section04 .top .open{font-size:40px;font-weight:600;}
main .layout .section04 .day{width: 100%;margin-top:15px;background:#fff;padding:65px 25px 38px 25px;border-radius:50px;}
main .layout .section04 .weekdays {list-style: none;padding: 0;margin: 0;display: grid;grid-template-columns: repeat(7, 1fr);}
main .layout .section04 .weekdays li {padding: 10px;text-align: center;font-size: 37px;}
main .layout .section04 .weekdays li:nth-child(1) {color: red;}
main .layout .section04 .days {list-style: none;padding: 0;margin: 0;display: grid;grid-template-columns: repeat(7, 1fr);}
main .layout .section04 .days li {margin:15px 22px;padding:13px 3px;text-align: center;font-size: 37px;}
main .layout .section04 .days li:hover {background-color: #f1f1f1;}
main .layout .section04 .days li:nth-child(1) {color: red;}
main .layout .section04 .days li:nth-child(8) {color: red;}
main .layout .section04 .days li:nth-child(15) {color: red;}
main .layout .section04 .days li:nth-child(22) {color: red;}
main .layout .section04 .days li:nth-child(29) {color: red;}
main .layout .section04 .days li:nth-child(36) {color: red;}
main .layout .section04 .days .start{background:#595757;border-radius:50px;color:#fff;font-weight:600;}
main .layout .section04 .days .ing{background:#e6e6e6;border-radius:50px;}
main .layout .section04 .time{font-size:42px;margin-top:60px;text-align: center;}

main .layout .section05{width:100%;padding:60px 65px 150px 65px}
main .layout .section05 .line{display:flex;gap:82px;justify-content:center;align-items:center;margin-top:60px;}
main .layout .section05 .t1{font-size:42px;}
main .layout .section05 .bt{display:flex;gap:65px;}
main .layout .section05 img{width:122px;}

main .layout .section06{width:100%;padding:0px 105px;margin-top: 30px;}
main .layout .section06 .t1{font-size:46px;font-weight:500;color:#9fa0a0;text-align:center;padding-bottom:60px;letter-spacing:5.5px;}
/* main .layout .section06 .img{text-align: center;display:flex;gap:58px;flex-direction:column;} */
/* main .layout .section06 .img .main-img{width:100%;} */
main .layout .section06 .img .main-img img{height:630px;width: 100%;object-fit: contain;}
/* main .layout .section06 .img .sub-img{display:flex;gap:15px;flex-direction:row;} */
main .layout .section06 .img .sub-img img{height:140px;width: 100%;object-fit: contain;}

main .layout .section07{width:100%;padding:140px 105px 150px 105px;}
main .layout .section07 .t1{font-size:46px;font-weight:500;color:#9fa0a0;text-align:center;padding-bottom:60px;letter-spacing:5.5px;}
main .layout .section07 .video{width:100%;height:570px;text-align:center;}
main .layout .section07 .video.long-video iframe{width:100%;height:570px;}
main .layout .section07 .youtube-bt{text-align:center;font-size: 30px;margin-top:20px;}
main .layout .section07 .youtube-bt a{color: black;text-decoration: none;}

main .layout .section08{width:100%;padding:90px 105px 150px 105px;background:#f4f4f4;}
main .layout .section08 .t1{font-size:46px;font-weight:500;color:#9fa0a0;text-align:center;padding-bottom:60px;letter-spacing:5.5px;}
main .layout .section08 img{width:100%}
main .layout .section08 .ebook-bt{margin-top:5px;text-align:center;font-size: 30px;}

main .layout .section08-1{width:100%;padding:0;}
main .layout .section08-1 img{width:100%;}


main .layout .section09{width:100%;padding:120px 105px 95px 105px;}
main .layout .section09 .t1{font-size:46px;font-weight:500;color:#9fa0a0;text-align:center;padding-bottom:30px;letter-spacing:5.5px;}
main .layout .section09 .line{margin-top:70px;}
main .layout .section09 .t2{font-size:42px;}
main .layout .section09 .t3{font-size:37px;color:#595757;}
main .layout .section09 .t4{display:flex;gap:20px;margin-top:30px;}
main .layout .section09 .t4 .number{width:calc(100% - 125px);height:100px;font-size:44px;font-weight:600;border:1px solid#b5b5b6;border-radius:50px;display:flex;align-items:center;padding:0px 40px;}
main .layout .section09 .t4 .capy{width:140px;height:100px;font-size:41px;font-weight:600;color:#fff;background:#9fa0a0;border-radius:50px;border:0px;}

main .layout .section10{width:100%;padding:0px 105px 0px 105px;margin-top:25px;background:#f4f4f4;display:flex;align-items:center;justify-content:space-between;}
main .layout .section10 .left .t1{font-size:42px;padding-bottom:30px;}
main .layout .section10 .left a{font-size:37px;font-weight:600;color:#fff;background:#595757;border-radius:25px;padding:10px 40px;text-decoration: none;}
main .layout .section10 .right img{width:440px;}

main .layout .section11{width:100%;padding:100px 105px 60px 105px;}
main .layout .section11 .t1{font-size:46px;font-weight:500;color:#9fa0a0;text-align:center;padding-bottom:100px;letter-spacing:5.5px;}
main .layout .section11 .text{display:flex;justify-content:space-between;}
main .layout .section11 .text .t2{font-size:42px;padding-bottom:15px;}
main .layout .section11 .text .t3{font-size:37px;color:#595757;}
main .layout .section11 .text img{width:120px;}

main .layout .section12{width:100%;}
.root_daum_roughmap{width:100% !important;height:700px !important;}
.root_daum_roughmap .wrap_map{width:100% !important;height:700px !important;}
.root_daum_roughmap .wrap_controllers{display:none !important;}

main .layout .section13{width:100%;padding:64px 105px 87px 105px;}
main .layout .section13 .t1{font-size:33px;font-weight:600;color:#9fa0a0;text-align:center;}
main .layout .section13 .icon{display:flex;margin-top:60px;justify-content:space-between;}
main .layout .section13 .icon .icon-01{display:flex;gap:27px;flex-direction:column;font-size:35px;color:#595757;align-items:center;text-decoration: none;}
main .layout .section13 .icon .icon-01 img{width:150px;}
main .layout .section13 .t2{font-size:42px;color:#727171;font-weight:600;margin-top:100px;}
main .layout .section13 .t3{font-size:37px;margin-top:10px;}
main .layout .section13 .event{margin-top:110px;margin-left: -105px;margin-right: -105px;}
main .layout .section13 .event img{width:100%}
main .layout .section13 .event .event-t1{text-align:center;font-size:46px;font-weight:600;color:#9fa0a0;padding-bottom:50px;border-bottom:1px solid#9fa0a0;}
main .layout .section13 .event .event-t1 span{font-size:33px}
main .layout .section13 .event .event-t2{text-align:center;padding:25px 0px;font-size:44px;border-bottom:1px solid#9fa0a0;}
main .layout .section13 .sns{display:flex;margin-top:105px;justify-content:space-between;}
main .layout .section13 .sns img{width:95px;margin-bottom:65px;}
main .layout .section13 .capy{text-align:center;}
main .layout .section13 .capy button{font-size:35px;color:#595757;padding:10px 40px;background:#dcdddd;border-radius:50px;border:0px;}

main .layout .section14{width:100%;padding:85px 105px;display:flex;justify-content:space-between;align-items:center;}
main .layout .section14 .logo img{width:183px;}
main .layout .section14 .info{display:flex;;align-items:center;}
main .layout .section14 .info .name{font-size:39px;color:#595757;margin-right: 25px;}
main .layout .section14 .info .number{font-size:51px;color:#595757;font-weight:600;}






/* tablet */
@media all and (max-width:1280px) {
main .layout{width:100%}

main .layout .section01 .left{width:60%;aspect-ratio:65/135;}
main .layout .section01 .left .t1{font-size:40px;}
main .layout .section01 .right{width:40%;margin-top:35px;}
main .layout .section01 .right{padding:15px 20px 20px 0px;margin-top:0px;}
main .layout .section01 .right .t1{font-size:17px;}
main .layout .section01 .right .t2{font-size:40px;margin-top:28px;}
main .layout .section01 .right .logo img{width:110px;}

main .layout .section02{padding:30px;}
main .layout .section02 .t1{font-size:14px;}
main .layout .section02 .t2{font-size:21px;}
main .layout .section02 .t3{font-size:13px;padding-bottom:23px;}
main .layout .section02 .line{width:35px;margin-bottom:18px;}
main .layout .section02 .t4{font-size:16px;}
main .layout .section02 .t5{font-size:14px;padding-bottom:5px;}
main .layout .section02 .t6{font-size:16px;}

main .layout .section03{}
main .layout .section03 .t1{font-size:16px;letter-spacing:1.5;padding-bottom:20px;}
main .layout .section03 .t2{font-size:14px;}

main .layout .section04{padding:30px 30px 25px 30px;}
main .layout .section04 .t1{font-size:16px;letter-spacing:1.5;padding-bottom:10px;}
main .layout .section04 .top .may{font-size:22px;}
main .layout .section04 .top .may .en{font-size:16px;padding-left:6px;}
main .layout .section04 .top .open{font-size:15px;letter-spacing:-1;}
main .layout .section04 .calendar{margin-top:17px;}
main .layout .section04 .day{margin-top:10px;border-radius:15px;padding:10px;}
main .layout .section04 .weekdays li{font-size:14px;}
main .layout .section04 .days li{font-size:14px;margin:5px;padding:1px;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;}
main .layout .section04 .time{font-size:15px;margin-top:18px;}

main .layout .section05{padding:25px 0px 45px 0px;}
main .layout .section05 .t1{font-size:14px;letter-spacing:-1}
main .layout .section05 .line{gap:0px;margin-top:20px;}
main .layout .section05 .bt{gap:10px;margin-left: 25px;}
main .layout .section05 img{width:42px;}

main .layout .section06{padding:0px 30px;}
main .layout .section06 .t1{font-size:16px;letter-spacing:1.5;padding-bottom:20px;}
/* main .layout .section06 .img{gap:20px;} */
main .layout .section06 .img .main-img img{height:auto;aspect-ratio:1.5/1;width: 100%;object-fit: contain;}
/* main .layout .section06 .img .sub-img{gap:5px;} */
main .layout .section06 .img .sub-img img{height:auto;aspect-ratio:1.2/1;width: 100%;object-fit: contain;}

main .layout .section07{padding:50px 30px;}
main .layout .section07 .t1{font-size:16px;letter-spacing:1.5;padding-bottom:20px;}
main .layout .section07 .video.long-video {height:auto;aspect-ratio:1.8/1;}
main .layout .section07 .video.long-video iframe{height:auto;aspect-ratio:1.8/1;}
main .layout .section07 .video.short-video {
  height: auto;
  aspect-ratio: 9/16;
  max-width: 100%;
  margin: 0 auto;
}
main .layout .section07 .video.short-video iframe {
  height: auto;
  aspect-ratio: 9/16;
  width: 100%;
  display: block;
}
main .layout .section07 .youtube-bt{font-size: 15px;margin-top:20px;}

main .layout .section08{padding:30px 30px 50px 30px;}
main .layout .section08 .t1{font-size:16px;letter-spacing:1.5;padding-bottom:20px;}
main .layout .section08 .ebook-bt{margin-top:5px;text-align:center;font-size: 11px;}

main .layout .section09{padding:40px 30px;}
main .layout .section09 .t1{font-size:16px;letter-spacing:1;padding-bottom:10px;}
main .layout .section09 .t2{font-size:16px;}
main .layout .section09 .t3{font-size:14px;margin-top:4px;}
main .layout .section09 .line{margin-top:22px;}
main .layout .section09 .t4{gap:10px;}
main .layout .section09 .t4 .number{height:38px;width:calc(100% - 70px);font-size:15px;padding:0px 15px;}
main .layout .section09 .t4 .capy{height:38px;font-size:14px;width:60px;font-weight:normal}
main .layout .section09 .t4{margin-top:10px;}

main .layout .section10{padding:0px 30px;margin-top:10px;}
main .layout .section10 .left{width:60%;}
main .layout .section10 .right{width:40%;}
main .layout .section10 .left .t1{font-size:15px;padding-bottom:15px;}
main .layout .section10 .right img{width:120%}
main .layout .section10 .left a{font-size:13px;padding:5px 15px;font-weight:normal}

main .layout .section11{padding:40px 30px 20px 30px;}
main .layout .section11 .t1{font-size:16px;letter-spacing:1.5;padding-bottom:20px;}
main .layout .section11 .text .t2{font-size:16px;font-weight:700;padding-bottom:8px;}
main .layout .section11 .text .t3{font-size:14px;}
main .layout .section11 .text img{width:45px;}

.root_daum_roughmap{height:auto !important;aspect-ratio:1.6/1;}

main .layout .section13{padding:20px 30px;}
main .layout .section13 .t1{font-size:12px;}
main .layout .section13 .icon{margin-top:25px;}
main .layout .section13 .icon .icon-01 img{width:50px;}
main .layout .section13 .icon .icon-01{gap:8px;font-size:13px;}
main .layout .section13 .t2{font-size:16px;margin-top:30px;}
main .layout .section13 .t3{font-size:15px;margin-top:4px;}
main .layout .section13 .event{margin-top:40px;margin-left: -30px;margin-right: -30px;}
main .layout .section13 .event .event-t1{font-size:16px;padding-bottom:20px;border-bottom:1px solid #cbcbcb;}
main .layout .section13 .event .event-t1 span{font-size:12px;}
main .layout .section13 .event .event-t2{font-size:15px;padding:7px 0px;border-bottom:1px solid #cbcbcb;}
main .layout .section13 .sns{margin-top:40px;}
main .layout .section13 .sns img{width:35px;margin-bottom:25px;}
main .layout .section13 .capy button{font-size:13px;padding:5px 20px;}

main .layout .section14{padding:20px 30px;align-items:flex-end;}
main .layout .section14 .logo img{width:55px;}
main .layout .section14 .info .name{font-size:14px;font-weight:500;margin-right: 5px;}
main .layout .section14 .info .number{font-size:15px;font-weight:800;}




}



/* mobile */
@media all and (max-width:768px) {

}

/* 헤더 */
.guestbook-header {
/*    background: linear-gradient(120deg, black, #fad0c4);*/
	background-color:black;
    text-align: center;
    padding: 20px;
    color: white;
}
.guestbook-header h1 {
    font-size: 24px;
    margin-bottom: 5px;
}
.guestbook-header p {
    font-size: 14px;
}

/* 방명록 폼 */
.guestbook-form {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.guestbook-form input,
.guestbook-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}
.guestbook-form button {
    width: 100%;
    padding: 10px;
    background: black;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

/* 방명록 리스트 */
.guestbook-list {
    padding: 15px 20px;
}
.guestbook-list .entry {
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}
.guestbook-list .entry:last-child {
    border-bottom: none;
}
.guestbook-list .entry h3 {
    font-size: 16px;
    margin-bottom: 5px;
    color: black;
}
.guestbook-list .entry p {
    font-size: 14px;
    color: #555;
}

#music-player {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1000;
}

.player-button {
    position: absolute;
    top: 0;
    right: 0;
    background: #28a745;
    color: white;
    border: none;
    width: 30px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px 0 0 5px;
    transition: all 0.3s ease-in-out;
    font-size:30px;
}

#player-panel {
    position: absolute;
    top: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px 0 0 5px;
    padding: 10px;
    width: 190px;
    height: 50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
     transform: translateX(100%); /* 초기에는 보이지 않도록 설정 */
    transition: transform 0.3s ease-in-out;
}

#player-panel.show {
    transform: translateX(0); /* 보이게 할 때 패널을 오른쪽으로 이동 */
}

audio {
    display: none; /* 숨기고 JS로 제어 */
}

#play-pause {
    background: #A4A9B3;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

#play-pause:hover {
    background: #A4A9B3;
}


/* 헤더 */
.attendance-header {
    background: linear-gradient(120deg, black, #fad0c4);
    text-align: center;
    padding: 20px;
    color: white;
}
.attendance-header h1 {
    font-size: 24px;
    margin-bottom: 5px;
}
.attendance-header p {
    font-size: 14px;
}


.attendance-form {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.attendance-form select, .attendance-form input:not([type="checkbox"]) {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.sectionAttedance #privacy_agree {
    width: 5%;
}
.attendance-form button {
    width: 100%;
    padding: 10px;
    background: black;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.sectionAttedance .privacy-policy {
    margin-top: 15px;
    font-size: 12px;
    color: #888;
    text-align: left;
    padding: 10px;
    border-top: 1px solid #ddd;
}


.holiday-li {
    color:red;
}