@charset "UTF-8";

section .wrap {min-height: 250rem;position: relative; border-top: 1px solid #323232;margin: 100rem auto; background-repeat: no-repeat; background-position: top 80rem right 110rem;}
.h2 {position: absolute; top: 100rem; left: 0; z-index: 10;}
h2 {font-family: var(--point_font); font-weight: 700; font-size: 32rem;}
.h2 + * {padding-top: 226rem;}
.s-tit {font-family: var(--point_font); display: flex; flex-wrap: wrap; align-items: center; gap: 10rem;}
.s-tit::before {content: ''; width: 30rem; height: 14rem; display: block; background: url('/WebContent/design/sunbi/img/main/icon-h2.png') no-repeat center/contain;}
.slides {overflow: hidden; box-sizing: border-box; position: relative; z-index: 1;}
.slides.peek-right {overflow: visible; }
.slides.peek-right:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3000px;
    width: 3000px;
    background: #ffffff;
    z-index: 4;
    pointer-events: none;
}
.slides.peek-right .swiper-wrapper {
    position: relative;
    z-index: 3;
}
.slides .swiper-wrapper {align-items: stretch;}
.slides .swiper-slide.is-outside { pointer-events: none;}
.slides .swiper-slide.is-outside a {  pointer-events: none; cursor: default;}
.slides .swiper-slide.is-outside a:focus {outline: none;}
.slide-control {position: absolute; top: 138rem; left: 320rem; display: flex; flex-wrap: wrap; gap: 15rem; z-index: 10}
.slide-control a {display: block; position: static; text-indent: -999999rem; width: 24rem; height: 24rem; margin:0; background: url('/WebContent/design/sunbi/img/main/control.png') no-repeat 0 100%/400%;}
.slide-control a.swiper-button-pause {background-position: 33.33% 100%;}
.slide-control a.swiper-button-play {background-position: 66.66% 100%; display: none;}
.slide-control a.swiper-button-next {background-position: 100% 100%;}
.slides.peek-right .slide-control {
    margin-right: 90rem;
}
a.btn-more {position: absolute; top: 135rem; right:0; z-index: 10; display: block; width: 30rem; height: 30rem; background: url('/WebContent/design/sunbi/img/main/btn-more.png') no-repeat 100% 0/200%; text-indent: -999999rem;}
@media all and (max-width: 1420px) {
  .slide-control {left: 280rem;}
}
@media all and (max-width: 1150px) {
  .slide-control {left: 200rem;}
}
@media all and (max-width: 1024px) {
  h2 {font-size: 28rem;}
}
@media all and (max-width: 680px) {
  .slide-control {left: 0; top: 180rem;}
}
@media all and (max-width: 500px) {
  section:not(#visual) .wrap {background-image: none !important;}
}

#visual .wrap {
  background: url('/WebContent/design/sunbi/img/main/visual-bg.png'), linear-gradient(0deg, rgba(35, 93, 105, 1) 0%, rgba(61, 130, 146, 1) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom;
  background-size: contain;
  padding-left: 38%;
  padding-right: 120rem;
  padding-top: 80rem;
  border-top: none;
  margin: 0 auto;
}
#visual .wrap::after {content: ''; display: block; width: 28%; height: 492rem; background: url('/WebContent/design/sunbi/img/main/visual-char.png') no-repeat bottom left/contain; position: absolute; left: 9%; bottom: -35rem;}

#visual .display {font-family: var(--point_font); color: #ffffff; margin-bottom: 90rem; position: relative;}
#visual .display::before {content: ''; display: block; width: 30%; max-width: 188rem; height: 100rem; position: absolute; top: 0; left: calc(-30% - 100rem); background: url('/WebContent/design/sunbi/img/main/visual-obj.png') no-repeat 0 0 /contain;}
#visual .display .medium {font-size: 48rem; font-weight: 700;}
#visual .display .small {font-size: 24rem; font-weight: 400;}
#visual .program {position: relative;padding-bottom: 30rem;}
#visual .program h2, #visual .program .s-tit {color: #ffffff;}
#visual .program .h2 {top:0;}
#visual .program .program-list {overflow: hidden; padding-top: 126rem;}
#visual .program .slide-control {top: 38rem;}
#visual .program .slide-control a {background-position-y: 0; }
#visual .program .img {overflow: hidden; height: 143rem; width: 100%;}
#visual .program .img img {min-height: 100%; min-width: 100%;max-height: 100%;}
#visual .program .info {
  width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10rem;
    padding: 15rem;
    position: relative;
    background: #ffffff;
}

#visual .program .info .name {
  width: 100%;
    font-family: var(--point_font);
    font-size: 20rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#visual .program .info .sub {
    color: #555555;
    font-size: 14rem;
    overflow: hidden;
    height: 45rem;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#visual .program a.btn-more {top: 38rem; background-position-x: 0;}

#visual .notice-simple {color: #ffffff; display: flex; flex-wrap: wrap; position: relative; padding-bottom: 30rem;}
#visual .notice-simple .tit {font-family: var(--point_font); width: 96rem; display: block;}
#visual .notice-simple .subject {display: block; width: calc(100% - 96rem); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 70rem;}
#visual .notice-simple a.btn-more {top: 26rem; background-position-x: 0;}
.scroll {position: absolute; right: 0; bottom: -40rem; font-family: var(--point_font); padding-left: 24rem; background: url('/WebContent/design/sunbi/img/main/arrow-scroll.png') no-repeat left center;}
@media all and (max-width: 1340px) {
  #visual .wrap {padding: 40rem 40rem 0;}
  #visual .wrap::after {bottom: 0; right: 90rem; left: auto; background-position-y: top; height: 85%;}
  #visual .display {margin-bottom: 80rem;}
}
@media all and (max-width: 1150px) {
  #visual .program .slide-control {left: 265rem;}
}
@media all and (max-width: 680px) {
  #visual .wrap {padding: 30rem 30rem 0;}
  #visual .display {margin-bottom: 60rem;}
  #visual .wrap::after {display: none;}
  #visual .program .img {height: 180rem;}
  #visual .program .slide-control {left: 0; top: 80rem;}
}
@media all and (max-width: 480px) {
  #visual .display .medium {font-size: 36rem;}
  #visual .notice-simple .subject {width: 100%; padding-right: 0; margin-top: 10rem;}
}

#cont01 .wrap {border-top: none; background-image: url('/WebContent/design/sunbi/img/main/cont01-char.png');}
.gallary-slide img {height:325rem; width: 100%;}
.gallary-slide a {position: relative; display: block;}
.gallary-slide .info {position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); color: #ffffff; padding: 30rem; opacity:0; transition: all 0.2s;}
.gallary-slide a:hover .info {opacity: 1;}
.gallary-slide .info .subject {font-family: var(--point_font); font-size: 20rem; font-weight: 700;}
@media all and (max-width: 1340px) {
  #cont01 .wrap {margin-top: 0;}
}

#cont02 .wrap {background-image: url('/WebContent/design/sunbi/img/main/cont02-char.png');}
.wedding .box {display: flex; flex-wrap: wrap;}
.wedding .box > div {padding: 105rem 120rem; width: 50%; text-align: center; position: relative;}
.wedding .box > div > * {height: 100%;}
.wedding .box .info {background: url('/WebContent/design/sunbi/img/main/wedding-bg1.png') no-repeat 0 0/100% 100%;}
.wedding .box .reserve {background: url('/WebContent/design/sunbi/img/main/wedding-bg2.png') no-repeat 0 0/100% 100%;}
.wedding .info-box {background: #ffffff; padding: 40rem; display: flex; flex-wrap: wrap; justify-content: center;}
.wedding .info-box ul {text-align: left;}
.wedding .info-box ul li {margin: 4rem 0;}
.wedding .info-box ul li span {display: inline-block; width: 16rem; height: 25rem; background: url('/WebContent/design/sunbi/img/main/icon-wedding.png') no-repeat 0 center/200%; text-indent: -999999rem;  margin-right: 10rem;}
.wedding .info-box ul li:nth-of-type(2) span {background-position-x: 100%;}
.wedding .btn-reserve {background: rgba(0, 0, 0, 0.7); font-weight: 700; color: #ffffff; font-size: 20rem; display: flex; padding: 40rem; justify-content: center; align-items: center;}
.wedding .btn-reserve span {position: relative; padding-left: 30rem;}
.wedding .btn-reserve span::before {content: ''; background: url('/WebContent/design/sunbi/img/main/icon-reserve.png') no-repeat left center/contain; width: 21rem; height: 22rem; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.wedding .btn-reserve span::after {content: ''; background: url('/WebContent/design/sunbi/img/main/arrow-reserve.png') no-repeat right center/contain; width: 10rem; height: 16rem; display: block; position: absolute; right: -45rem; top: 50%; transform: translateY(-50%);}
@media all and (max-width: 1420px) {
  .wedding .box > div {padding: 95rem 110rem;}
  .wedding .info-box {padding: 30rem;}
}
@media all and (max-width: 1340px) {
  .wedding .box > div {padding: 55rem 70rem;}
}
@media all and (max-width: 1090px) {
  .wedding .box > div {width: 100%;padding: 95rem 110rem;}
}
@media all and (max-width: 480px) {
  .wedding .box > div {padding: 65rem 70rem;}
}

#cont03 .wrap {background-image: url('/WebContent/design/sunbi/img/main/cont03-char.png'); background-position-x: right 70rem;}
.tour-slide .swiper-wrapper {align-items: stretch;}
.tour-slide > .swiper-slide {background: #F9F9F9; display: flex;  flex-direction: column; height: auto; box-sizing: border-box; }
.tour-list .img {width: 100%; height: 250rem; overflow: hidden; position: relative; flex-shrink: 0;}
.tour-list .img img {min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.tour-list .info {padding: 30rem 30rem 10rem; box-sizing: border-box; flex: 1 1 auto;}
.tour-list .info .name {font-family: var(--point_font); font-size: 20rem; font-weight: 700;}
.tour-list .info > ul li {margin: 15rem 0; display: flex; flex-wrap: wrap;}
.tour-list .info > ul li strong {display: inline-block; width: 74rem;}
.tour-list .info > ul li > p {width: calc(100% - 74rem);}
.tour-list .info > ul li a {text-decoration: underline;}
.tour-list .info > ul li a[target="_blank"]::after { content:''; display: inline-block; width:13px; height:13px; background:url('/WebContent/design/common/template/sprite.png') no-repeat 0 0; margin:2rem 0 0 5rem; }
.tour-list .btn_wrap { padding: 0 30rem 30rem; gap: 10rem 16rem; width: 100%; margin-top: auto; display: flex;}
.tour-list .btn_wrap a {display:flex; align-items:center; justify-content:center; margin-top: 0;}
.tour-list .btn_wrap a::after {content:''; display: block; flex-shrink:0; width: 14px; height: 14px; background-image: url('/WebContent/design/common/template/sprite.png'); background-repeat: no-repeat; margin-left:8rem;}
.tour-list .btn_wrap .yellow::after { background-position: -180px -40px;}
.tour-list .btn_wrap .green::after { background-position: -180px -80px;}
@media all and (max-width: 1024px) {
  .tour-list .info {padding: 20rem 20rem 10rem; }
  .tour-list .btn_wrap {padding: 0 20rem 20rem;}
}
@media all and (max-width: 480px) {
  .tour-list .btn_wrap a {width: calc(50% - 8rem);}
}
@media all and (max-width: 410px) {
  .tour-list .img {height: 200rem;}
}

#cont04 .wrap {background-image: url('/WebContent/design/sunbi/img/main/cont04-char.png');}
.notice > li {padding: 20rem 66rem 20rem 16rem; background-color: #ffffff; display: flex; justify-content: space-between; border-bottom: 1px solid #dddddd; transition: all 0.2s; position: relative; }
.notice > li:first-of-type {border-top: 1px solid #323232;}
.notice > li::after {content: ''; width: 25rem; height: 25rem; display: block; background: url('/WebContent/design/sunbi/img/main/arrow-notice.png') no-repeat center/contain; position: absolute; top: 20rem; right: 11rem; transition: all 0.2s;}
.notice > li.on {background-color: #F9F9F9;}
.notice > li.on::after {transform: rotate(180deg);}
.notice .toggle{max-width: 750rem; width: calc(100% - 100rem);}
.notice .tit {color: inherit; font-family: var(--point_font); font-weight: 700; display: block; font-size: 17rem; border: none; background: none; line-height: 1.6; width: 100%; white-space: nowrap; text-align: left; text-overflow: ellipsis; overflow: hidden;}
.notice .toggle-btn {cursor: pointer;}
.notice .toggle-list {position: static; margin-top: 20rem;}
.notice .sub {color: #555555; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.notice .btn.black {margin-top: 20rem;}
.notice .date {font-size: 14rem; padding-top: 2rem;}