@charset "UTF-8";

h2 {font-family: 'Godo', sans-serif; font-size:32rem; color:var(--p_color); font-weight:600; line-height: 1.45;}
.more_list {display:block; width:40rem; height:40rem; background:#EFF4FF url('/WebContent/design/sunbichon/img/layout/icon_control.svg') no-repeat 100% 0/500% auto; text-indent:-9999rem;}
.go {display:flex; align-items:center; justify-content:center; max-width:130rem; min-height:40rem; background:var(--p_color); font-weight:600; padding:7rem 0; color:#fff;}

.control {display:flex; align-items:center;}
.control button,
.control a {display:block; width:40rem; height:40rem; background:#EFF4FF url('/WebContent/design/sunbichon/img/layout/icon_control.svg') no-repeat 100% 0/500% auto; text-indent:-9999rem; border:0;}
.control .prev {background-position:0 0;}
.control .stop {background-position:25% 0;}
.control .play {background-position:50% 0;}
.control .next {background-position:75% 0;}

.head .lg {font-family: 'Godo', sans-serif; color:var(--p_color); font-size:32rem; font-weight:600; line-height: 1.4;}
.head .lg span {font-size:48rem;}
@media all and (max-width:599px){
    .head .lg { line-height: 1.3;}
}

#container {background:#E9EDF5;}

/*팝업창*/
.layer {position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; opacity:0; visibility:hidden; transition:all 0.5s;}
.layer::before {content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7);}
.layer > div {position:absolute; top:50%; left:50%; width:100%; height:100%; padding:40rem 0; overflow-y:auto; overflow-x:hidden; transform:translate(-50%, -50%);}
.layer .wrap {position:relative; z-index:1; padding:0; max-width:500rem;}
.layer.on {opacity:1; visibility:visible;}
.layer.on .wrap {animation:fadeInUp 1s;}
.layer .control {background:#fff; display:flex; align-items:center; width:180rem; justify-content:center; margin:0 auto; border-radius:100rem; padding:8rem 25rem 8rem 15rem;}
.layer .btn {margin-right:15rem;}
.layer .pager {position:relative; display:flex; align-items:center; margin:0 -14rem;}
.layer .pager::before {content:''; position:absolute; top:50%; left:50%; width:1px; height:10px; background:#111111; transform:translate(-50%, -50%) rotate(35deg); }
.layer .pager span {display:block; padding:0 14rem}
.layer .pager span.current {color:#3356F1;font-weight:600;}
.layer .control {margin-bottom:20rem;}
.layer .control .btn {display:flex; align-items:center;}
.layer .control .btn a {display:block; position:relative; width:24rem; height:24rem; text-indent:-9999px;  background:url('/WebContent/design/reserve/img/main/control.svg') no-repeat 0 0/400% auto;}
.layer .control .btn a.prev {background-position:0 0;}
.layer .control .btn a.stop {background-position:33.333% 0;}
.layer .control .btn a.play {background-position:66.666% 0; display:none;}
.layer .control .btn a.next {background-position:99.999% 0;}
.layer .close {background:#fff; display:flex; position:relative; border-radius:var(--border-radius25); border-top-left-radius:0; border-top-right-radius:0;}
.layer .close::before {content:''; position:absolute; top:50%; left:50%; width:1px; height:12px; background:#656565; transform:translate(-50%, -50%)}
.layer .close a {width:50%; display: flex; align-items: center; justify-content: center; font-weight:500; padding:16rem 10rem;}
.layer .slick-list {border-radius:var(--border-radius25); border-bottom-left-radius:0; border-bottom-right-radius:0;}
.layer .slick-list img {width:100%;}
@media all and (max-width:599px){
  .layer .wrap {width:calc(100% - 40rem);}
  .layer .close a {font-size:15rem; padding:12rem 5rem;}
}

/**/
.visual {position:relative;}
.visual::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#002D57; opacity:0.4; z-index:1;}
.visual .slide li {height:100vh; background-repeat:no-repeat; background-size:cover;}
.visual .wrap {position:absolute; top:0; left:50%; color:#fff; padding-top:200rem; transform:translateX(-50%); z-index:2;}
.visual .scroll {position:absolute; bottom:0; left:50%; background:#E9EDF5; width:80rem; height:80rem; display:flex; flex-direction:column; justify-content:center; align-items:center; font-weight:600; color:var(--p_color); transform:translateX(-50%); z-index:2;}
.visual .scroll::after {content:''; flex-shrink:0; flex-grow:0; display:blcok; margin-top:10rem; width:14rem; height:14rem; background:url('/WebContent/design/sunbichon/img/main/icon_scroll.svg') no-repeat 0 0/contain;}
.visual .slogan p {font-family: 'Godo', sans-serif; color:#fff; font-weight:600; line-height:1.45;}
.visual .slogan .md {font-size:32rem; }
.visual .slogan .lg {font-size:48rem; }
@media all and (max-width:1023px){
    .visual .wrap {padding-top:0; height:100%;}
    .visual .slogan {text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; padding:0 20rem;}
}
@media all and (max-width:599px){
    .visual .slogan .md {font-size:28rem; }
    .visual .slogan .lg {font-size:44rem; }
    .visual .slogan .lg {line-height:1.5}
}
@media all and (max-width:360px){
    .visual .slogan .md {font-size:24rem; }
    .visual .slogan .lg {font-size:40rem; }
}

/**/
.house {position:relative; padding-top:80rem; background: url('/WebContent/design/sunbichon/img/main/cont-bg01.png') no-repeat top 190rem right;}
.house::before {content:''; position:absolute; top:0; left:calc(-50% + 11rem); width:100%; height:100%; background:#e9edf5; z-index:1;}
.house .wrap {max-width:1600rem;}
.house .left {width:calc(45.813% - 78rem); z-index:2;}
.house .left .group {position:relative;}
.house .left .group img {width:100%; height:700rem; object-fit:cover;}
.house .left .group .reserve {position:absolute; top:0; right:0; display:flex; justify-content:center; align-items:center; width:80rem; height:80rem; background:var(--p_color); text-align: center; color:#fff; font-weight:600; line-height:1.4;}
.house .left .group .reserve::before {content:""; position:absolute; top:6rem; right:6rem; width:16rem; height:16rem; background:url('/WebContent/design/sunbichon/img/layout/icon_arrow.svg') no-repeat 0 0/200% auto; transform:rotate(45deg);}
.house .left .tit {font-family: 'Godo', sans-serif; font-size:24rem; font-weight:600; color:var(--p_color); margin-top:25rem;}
.house .left .slick-list {overflow:visible;}
.house .right {width:calc(54.188% - 78rem); position:relative;}
.house .right .slick-slider {transform:translateX(-34%);}
.house .right .slide_group {position:absolute; width:100%; bottom:0; left:0;}
.house .right .slick-list {overflow:visible; margin:0 -7rem;}
/* .house .right .slick-current {display:none !important;} */
.house .right .img {margin:0 7rem;}
.house .right .img img {width:100%; height:310rem; object-fit:cover;}
.house .right .control {position:absolute; bottom:63rem; left:-80rem; z-index:2}
.house .right .bar { margin-top:61rem; background-color:#C7D4EE; background-image:linear-gradient(to right, #154198, #154198); background-repeat:no-repeat; background-position:0 0; background-size:0 0; width:100%; height:2px; transition:background-size 0.4s ease-in-out;}
.house .right .top {position:relative; z-index:10;}
.house .right .top .md {margin:50rem 0;}

@media all and (max-width:1700px){
    .house .wrap {max-width:1360rem;}
}
@media all and (max-width:1440px){
    .house::before {left:calc(-50% + 30rem);}
    .house .wrap {max-width:100%;}
    .house .left {width:calc(50% - 30rem); }
    .house .right {width:calc(50% - 30rem);}
    .house .right .control {left:0;}
}
@media all and (max-width:768px){
    .house { padding-bottom:80rem; background: none;}
    .house::before {display:none;}
    .house .wrap {flex-wrap:wrap;}
    .house .left {width:100%; order:1;}
    .house .left .group {margin:0 7rem; transition:all 0.3s;}
    .house .left .group img {height:400rem;}
    .house .left .group .reserve {opacity:0; transition:all 0.3s; width:130rem; height:40rem; top:auto; bottom:0;}
    .house .left .group .reserve::before {display:none;}
    .house .left .group .reserve br {display:none;}
    .house .left .tit {text-align:center; opacity:0;}
    .house .left .slick-current .group .reserve {opacity:1;}
    .house .left .slick-current .tit {opacity:1;}
    .house .right {width:100%; order:0; text-align:center; margin-bottom:80rem; position:static;}
    .house .right .slide {display:none;}
    .house .right .go {margin:0 auto;}
    .house .right .control {position:absolute; bottom:0; left:20rem;}
    .house .right .bar {position:absolute; right:20rem; bottom:20rem; margin-top:0; width:calc(100% - 150rem);}
}
@media all and (max-width:599px){
    .house .left .group img {height:300rem;}
}

/**/
.activity {position:relative; z-index:3; padding:240rem 0 160rem; background: url('/WebContent/design/sunbichon/img/main/cont-bg02.png') no-repeat bottom center;}
.activity ul {display: flex; justify-content:space-between;}
.activity ul li {width:calc(50% - 145rem); position:relative;}
.activity ul li span {display:block; position:absolute; top:-80rem; left:50%; transform:translateX(-50%); font-size:128rem; color:#C7D4EE; line-height:1.2; letter-spacing:-10rem;}
.activity ul li img {width:100%; height:410rem; object-fit: cover;}
.activity ul li h3 {margin:30rem 0 0 0; font-family: 'Godo', sans-serif; font-size:32rem; font-weight:600; text-align:center; color:var(--p_color);}
.activity ul li p {margin:50rem auto; max-width:520rem; min-height:77rem; text-align:center;}
.activity ul li a {margin:0 auto;}
@media all and (max-width:1440px){
    .activity {padding:80rem 0;}
    .activity ul li {width:calc(50% - 30rem);}
    .activity ul li span {font-size:60rem; position:static; letter-spacing:0; transform:translateX(0); text-align:center;  margin-bottom:25rem;}
    .activity ul li p {padding:0 25rem;}
}
@media all and (max-width:768px){
    .activity {background: none;}
    .activity ul {flex-wrap:wrap;}
    .activity ul li {width:100%; margin-bottom:80rem;}
    .activity ul li:last-child {margin-bottom:0;}
    .activity ul li p {margin:25rem auto;}
    .activity ul li img {height:300rem;}
}
@media all and (max-width:599px){
    .activity ul li span {font-size:50rem;}
}

/**/
.sunbichon {position:relative; padding-top:160rem;}
.sunbichon::before {content:''; position:absolute; top:0; left:0; width:100%; height: 100%; max-height:1270rem; background:url('/WebContent/design/sunbichon/img/main/bg1.jpg') no-repeat 0 0/cover; }
.sunbichon::after {content:''; position:absolute; top:0; left:0; width:100%; height: 100%; max-height:1270rem; background:#878CB1; opacity:0.65;}
.sunbichon .box {background:#fff; padding:0; position:relative; width:1600rem; margin:0 auto; padding:80rem 0; z-index:1;}
.sunbichon .basic_layout {align-items: flex-end;}
.memory {position:relative;}
.memory .left {position:relative;}
.memory .left .txt {padding:78rem 38rem 45rem 268rem; position:absolute; right:0;}
.memory .left .txt::before {content:''; position:absolute; bottom:0; left:-77rem; width:267rem; height:350rem; background:url('/WebContent/design/sunbichon/img/main/memory3.jpg') no-repeat center/cover; z-index:2;}
.memory .left .img img {width:100%; height:528rem; object-fit:cover;}
.memory .left .pager {position:absolute; bottom:20rem; right:30rem; display:flex; align-items:center; color:#fff;}
.memory .left .pager::before {content:''; position:absolute; top:50%; left:50%; width:1px; height:20rem; background:#fff; transform:translate(-50%, -50%) rotate(30deg);}
.memory .left .pager .current {font-size:32rem; font-weight:600; padding-right:25rem;}
.memory .left .pager .total {font-size:24rem; padding-left:10rem; margin-top:4rem;}
.memory .right {position:relative; display: flex; flex-direction: column; justify-content: space-between; align-self: stretch;}
.memory .right .slick-current {display: none !important;}
.memory .right .img img {width:100%; height:227rem; object-fit:cover;}
.memory .right .top .go {margin:50rem 0;}
.memory .right .control {position:absolute; bottom:0; left:-80rem; z-index:2}
.media {align-items:flex-end; margin-top:160rem;}
.gallery {position:relative;}
.gallery h2 {margin-bottom:20rem;}
.gallery .list {display: flex; margin:0 -7rem;}
.gallery .list li {width:33.333%; padding:0 7rem;}
.gallery .list li a {display: block; background:#FAFBFD; height: 100%;}
.gallery .list .img {height:180rem; overflow: hidden; position: relative; }
.gallery .list .img::-webkit-scrollbar {display: none;}
.gallery .list .img img {width:100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.gallery .list .group { padding:15rem;}
.gallery .list .group .tit {font-size:18rem; font-weight:600; line-height: 1.5;}
.gallery .list .group .txt {display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; height:6.4em; color:#7c7c7c; line-height:1.6; word-wrap:break-word;text-overflow:ellipsis; margin-top:15rem;}
.gallery .more_list {position:absolute; top:0;  right:0;}
.reserve_house { position:relative; height:565rem; background:url('/WebContent/design/sunbichon/img/main/img4.jpg') no-repeat 0 0/cover; }
.reserve_house::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(-180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%); }
.reserve_house a {display:block; font-family: 'Godo', sans-serif; font-size:32rem; color:#fff; position:relative; width:100%; height:100%; padding:40rem; line-height:1.3;}

@media all and (max-width:1700px){
    .sunbichon .box {max-width:calc(100% - 60rem);}
    .sunbichon .box .wrap {max-width:100%; padding-left:30rem; padding-right:30rem;}
}
@media all and (max-width:1440px){
    .sunbichon {padding-top:80rem;}
    .memory .left .txt {padding:30rem 38rem 0 3rem;}
    .memory .left .txt::before {display:none;}
    .memory .right .control {left:0;}
    .media {margin-top:80rem;}
    .reserve_house {background-position:center 70%;}
}
@media all and (max-width:1023px){
    .memory {padding-bottom:90rem;}
    .memory .left {position:static;}
    .memory .left .txt {padding:0 27rem; bottom:0;}
    .memory .left .pager {bottom:auto; right:auto; top:15rem; left:55rem;}
    .memory .left .pager::before {height:10rem;}
    .memory .left .pager .current {font-size:17rem;}
    .memory .left .pager .total {font-size:17rem; margin-top:0;}
    .media {flex-wrap:wrap; margin-top:40rem;}
    .media .left {width:100%;}
    .media .right {width:100%;}
    .reserve_house {height:auto; margin-top:40rem;}
}
@media all and (max-width:768px){
    .sunbichon .box {max-width:calc(100% - 40rem); padding-top:40rem;}
    .sunbichon .box .wrap {padding-left:20rem; padding-right:20rem;}
    .memory  {padding-bottom:0;}
    .memory .basic_layout {flex-wrap:wrap;}
    .memory .left {width:100%; order:1; position:relative;}
    .memory .left .txt {position:static; padding:25rem 2rem 0 2rem;}
    .memory .left .img img {height:300rem;}
    .memory .left .pager {top:15rem; left:25rem;}
    .memory .right {width:100%; order:0; text-align:center;}
    .memory .right .top .go {margin:50rem auto;}
    .memory .right .slide {display:none;}
    .memory .right .control {bottom:-40rem; right:0; left:inherit;}
    .gallery .list {flex-wrap:wrap; margin:-7rem;}
    .gallery .list li {width:50%; padding:7rem;}
    .gallery .list .img {height:auto; overflow-y:hidden;  }
    .gallery .list .img img {height:180rem; object-fit: cover;}
    .reserve_house a {text-align:center;}
}
@media all and (max-width:599px){
    .gallery .list {margin:-7rem 0;}
    .gallery .list li {width:100%; padding:7rem 0;}
}

/**/
.notice {padding:60rem 0 80rem; background: url('/WebContent/design/sunbichon/img/main/cont-bg03.png') no-repeat bottom left;}
.notice article {position:relative;}
.notice h2 {margin-bottom:20rem;}
.notice .more_list {position:absolute; top:0; right:0;}
.board .list li {display:flex; justify-content:space-between; align-items: center; padding:15rem 5rem; border-bottom:1px solid #C7D4EE;}
.board .list li a {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight:600; width:100%; padding-right:40rem;}
.board .list li span {display:block; flex-shrink:0; flex-grow:0;}
.board .more_list {position:absolute; top:0; right:0;}
.information {display:flex; flex-direction:column; justify-content:space-between;}
.information > p {font-family: 'Godo', sans-serif; font-size: 18rem; font-weight: 600; margin-bottom: 20rem;}
.information > p span {color: var(--p_color);}
.information .timetable {display: flex; flex-wrap: wrap; gap: 10rem;}
.information .timetable > li {width: 100%; padding: 16rem 20rem; background: #FAFBFD; border: 1px solid #D3DEF3;}
.information .timetable .tit strong {font-size: 18rem; color: var(--p_color); font-family:'Godo', '맑은 고딕', sans-serif; margin-right: 10rem;}
.information .timetable .time {font-size: 18rem; color: var(--p_color);}

@media all and (max-width:768px){
    .notice {background: none;}
    .notice .wrap {flex-wrap:wrap;}
    .notice .left {width:100%;}
    .notice .right {width:100%; margin-top:60rem;}
}
@media all and (max-width:360px){
    .board .list li {flex-wrap:wrap;}
    .board .list li a {padding-right:0; margin-bottom:10rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; height:3.4em; line-height:1.7; word-wrap:break-word; white-space:wrap;}
}