@charset "utf-8";
@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700;800&display=swap');

body{
  background: #e2ded0;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 0.5px;
}

.sec{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .title{
  font-size: 32px;
  font-weight: 700;
  line-height: 50px;
  margin-bottom: 20px;
}
.box .sub_title{
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 20px;
}
.box p{
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
}
.btn{
  width: 265px;
  background: rgba(255, 255, 255, .35);
  color: #fff;
  text-align: center;
  display: block;
  padding: 12px 0;
  transition: all .3s;
  border-radius: 3px;
}
.btn:hover{
  background: rgba(255, 255, 255, 1);
  color: #000;
}

.owl-carousel .owl-nav button{
  width: 40px;
  height: 40px;
  background-color: transparent;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  position: absolute;
  bottom: 50%;
  margin-top: -20px;
  z-index: 1;
}
.owl-carousel .owl-nav button span{
  display: none;
}
.owl-carousel .owl-dots button{
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  opacity: .5;
}
.owl-carousel .owl-dots button.active{
  opacity: 1;
}
.owl-carousel .owl-dots button span{
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
}
.full_slide .owl-nav .owl-prev{
  background-image: url('../images/arrow-l-1.svg');
  left: 5%;
}
.full_slide .owl-nav .owl-next{
  background-image: url('../images/arrow-r-1.svg');
  right: 5%;
}
.full_slide .owl-dots{
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 20px;
}
.content_slide .owl-nav .owl-prev{
  background-image: url('../images/arrow-l-2.svg');
  left: -7%;
}
.content_slide .owl-nav .owl-next{
  background-image: url('../images/arrow-r-2.svg');
  right: -7%;
}
.content_slide .owl-dots{
  text-align: center;
  margin-top: 30px;
}
.mb{
  display: none !important;
}
#about .about_wrap,
#cabins .section6 .flex{
  position: relative;
  z-index: 1;
}


/* header */
#header{
  width: 100%;
  height: 70px;
  background: #e2ded0;
  padding: 0 3.6%;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: -70px;
  z-index: 998;
  transition: all .3s;
}
#header.active{
  top: 0;
}
#header .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22.5px 0;
  position: relative;
}
#header .logo{
  width: 140px;
  height: 25px;
  background: url('../images/logo-header.svg') center / 100% auto;
  text-indent: -9999px;
  display: block;
}
#header .nav li{
  display: inline-flex;
  padding: 0 10px;
  position: relative;
}
#header .nav li a{
  color: #000;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  display: inline-block;
  vertical-align: middle;
  padding: 5px 0;
  border-bottom: 1px solid #e2ded0;
  transition: all .3s;
}
#header .nav li a:hover,
#header .nav li.active a{
  border-color: #000;
}
#header .nav li .lan{
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
}
#header .nav li .lan::after{
  content: "";
  width: 10px;
  height: 5px;
  background: url('../images/arrow-toggle.svg') center / 100% auto;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  margin-bottom: 3px;
}
#header .nav li .lan_list{
  display: none;
  width: 85px;
  background: #e2ded0;
  padding: 0 10px;
  position: absolute;
  left: 0;
  top: 100%;
  box-sizing: border-box;
}
#header .nav li .lan_list a{
  display: block;
  padding: 5px 0;
  margin: 5px 0;
}
#header .nav .info{
  display: none;
}

/* mobile */
#mobi_btn{
  display: none;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -15px;
}
#mobi_btn span,
#mobi_btn::before,
#mobi_btn::after{
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  display: block;
  position: absolute;
  left: 0;
  transition: all .3s;
}
#mobi_btn span{
  top: 14px;
}
#mobi_btn::before{
  top: 6px;
}
#mobi_btn::after{
  bottom: 6px;
}
#mobi_btn.active span{
  display: none;
}
#mobi_btn.active::before{
  top: 14px;
  transform: rotate(45deg);
}
#mobi_btn.active::after{
  bottom: 14px;
  transform: rotate(-45deg);
}

#mobile{
  display: none;
  width: 100vw;
  height: 100vh;
  background: #e2ded0;
  position: fixed;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 70px 3.6% 0 3.6%;
  z-index: -1;
}
#mobile::before{
  content: "";
  width: 100%;
  height: 1px;
  background: #000;
  display: block;
  margin: 0 auto;
}
#mobile li:first-child{
  margin-top: 50px;
}
#mobile li{
  position: relative;
}
#mobile li a{
  color: #000;
  font-size: 16px;
  display: block;
  padding: 15px 0;
}
#mobile li .lan{
  background: none;
  border: none;
  color: #000;
  font-size: 16px;
}
#mobile li .lan::after{
  content: "";
  width: 10px;
  height: 5px;
  background: url('../images/arrow-toggle.svg') center / 100% auto;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  margin-bottom: 3px;
}
#mobile li .lan_list{
  display: none;
  max-width: 100%;
  padding: 0 10px;
  position: absolute;
  left: 40px;
  top: 0;
  box-sizing: border-box;
}
#mobile .info{
  width: 100%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  padding: 0 3.6%;
  box-sizing: border-box;
}
#mobile .info .sns{
  display: flex;
  align-items: center;
}
#mobile .info .sns a{
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  display: inline-block;
  margin-right: 15px;
  padding: 0;
}
#mobile .info .ig{
  background-image: url('../images/footer-ig2.svg');
}
#mobile .info .fb{
  background-image: url('../images/footer-fb2.svg');
}
#mobile .info .yt{
  background-image: url('../images/footer-yt2.svg');
}


/* top */
#top{
  background: url('../images/bg-1.jpg') bottom / cover;
  position: relative;
  background-attachment: fixed;
}
#top .logo{
  width: 11.4%;
  height: 0;
  background: url('../images/s1-logo.svg') top / 100% auto;
  text-indent: -9999px;
  padding-top: 12%;
}
#top .notice{
  width: 100%;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 100;
  text-align: center;
  letter-spacing: 1px;
  display: block;
  position: absolute;
  left: 0;
  bottom: 40px;
}
#top .notice::after{
  content: "";
  width: 40px;
  height: 20px;
  background: url('../images/arrow-scroll.svg') center / 100% auto no-repeat;
  display: block;
  margin: 20px auto 0  auto;
}

/* about */
#about{
  position: relative;
}
#about::after{
  content: "";
  width: 100%;
  height: 50%;
  background: #b8bda1;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}
#about .about_wrap{
  max-width: 1440px;
  width: 80%;
  margin: 0 auto;
  padding: 120px 0;
}
#about .about_wrap .box p{
  margin-top: 30px;
}
#about .about_wrap .img{
  margin-top: 5vw;
}
#about .about_wrap .img img{
  width: 100%;
  height: auto;
  display: block;
}
#about .about_wrap .top{
  max-width: 800px;
  width: 100%;
  margin-left: auto;
}
#about .about_wrap .bottom{
  max-width: 730px;
  width: 100%;
  margin-top: 80px;
}

/* service */
#service .service_wrap{
  max-width: 1440px;
  width: 80%;
  margin: 0 auto;
  padding: 120px 0;
  display: flex;
  justify-content: space-between;
}
#service .service_wrap .box{
  width: 65%;
}
#service .service_wrap .img_list{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
#service .service_wrap .img{
  width: 22%;
}
#service .service_wrap .img img{
  width: 100%;
  height: auto;
  display: block;
}
#service .service_wrap .text_list{
  width: 31%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#service .service_wrap .text_list p{
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
}

/* cabins */
#cabins .main .item{
  position: relative;
}
#cabins .main .cabins_bg_slide img{
  width: 100%;
  height: auto;
}
#cabins .main .box{
  width: 75%;
  height: calc(75% - 30px);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  z-index: 1;
}
#cabins .main .box .title{
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 0;
}
#cabins .main .box .btn{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
#cabins .sub .container{
  max-width: 1440px;
  width: 80%;
  margin: 0 auto;
  padding: 100px 0;
}
#cabins .section4.container,
#cabins .section7 .container{
  padding-top: 0;
} 
#cabins .sub .flex{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#cabins .sub .flex .img{
  width: 50%;
  margin-top: 0;
}
#cabins .sub .flex .box{
  width: 45%;
}
#cabins .container img{
  width: 100%;
  height: auto;
  display: block;
}
#cabins .section1 .box .title,
#cabins .section1 .img{
  margin-bottom: 30px;
}
#cabins .section1 .img{
  padding-top: 6vh;
}
#cabins .section1 .box{
  margin-left: 10%;
}
#cabins .section2 .item_slide .wrap{
  display: flex;
}
#cabins .section2 .item_slide .wrap .box{
  width: 27%;
  margin-left: 3%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#cabins .section2 .item_slide .wrap .box p{
  margin: 25px 0;
}
#cabins .section2 .item_slide .wrap .main_img{
  width: 60%;
}
#cabins .section2 .full_slide .owl-dots{
  position: static;
  margin-top: 30px;
}
#cabins .section4 .list{
  list-style: decimal outside;
  padding-left: 20px;
}
#cabins .section4 .list li{
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  margin: 5px 0;
}
#cabins .section6{
  position: relative;
}
#cabins .section6::after{
  content: "";
  width: 100%;
  height: 70%;
  max-height: 600px;
  background: #a4978b;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}
#cabins .section6 .box_img{
  width: 55%;
}
#cabins .section6 .box_img .box,
#cabins .section6 .box_img .img{
  width: 100%;
}
#cabins .section6 .box_img .box .title{
  margin-bottom: 30px;
}
#cabins .section6 .flex > .box{
  width: 40.5%;
}

#cabins .section7{
  background: #a4978b;
}

#cabins .section7 .flex{
  align-items: center;
}
#cabins .section7 .flex .box{
  width: 45%;
}
#cabins .section7 .profile{
  width: 50%;
  display: flex;
  justify-content: space-between;
}
#cabins .section7 .profile li{
  width: 30%;
  text-align: center;
}
#cabins .section7 .profile li:nth-child(2){
  position: relative;
  bottom: 50px;
}
#cabins .section7 .profile li .pic{
  max-width: 200px;
  margin: 0 auto;
}
#cabins .section7 .profile li p span{
  display: inline-block;
}
#cabins .section7 .profile li .pic img{
  border-radius: 50%;
}
#cabins .section7 .profile li .name{
  font-size: 18px;
  line-height: 24px;
  margin-top: 20px;
}
#cabins .section7 .profile li .title{
  font-size: 14px;
  line-height: 18px;
  margin-top: 10px;
}

/* contact */
#contact > .info{
  background: url('../images/bg-5.jpg') center / cover;
}
#contact .info .wrap{
  max-width: 1400px;
  width: 80%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
#contact .info .wrap .box{
  width: 40%;
  color: #fff;
}
#contact .info .wrap .box p{
  margin-top: 20px;
}
#contact .info .wrap .box .list{
  height: 125px;
  overflow-y: auto;
  list-style: disc outside;
  padding-left: 20px;
}
#contact .info .wrap .box .list li{
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
  margin: 5px 0;
}
#contact .info .wrap .box .list li span{
  font-size: 12px;
}
#contact .info .wrap .box .btn{
  margin-top: 25px;
}
#contact .info .wrap .img{
  width: 55%;
}
#contact .info .wrap .img img{
  width: 100%;
  height: auto;
  display: block;
}
#contact .contact_form{
  background: url('../images/bg-6.jpg') top / cover;
}
#contact .contact_form .container{
  max-width: 1200px;
  width: 80%;
  color: #fff;
  margin: 0 auto;
  padding: 120px 0;
}
#contact .contact_form .form{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#contact .contact_form .form .box{
  width: 48%;
}
#contact .contact_form .form .box .title span{
  font-size: 14px;
}
#contact .contact_form .form .box.bottom{
  width: 100%;
}
#contact .contact_form .form .list li:first-child{
  display: flex;
  justify-content: space-between;
}
#contact .contact_form .form .list li label{
  width: 48%;
  display: block;
}
#contact .contact_form .form .list li p{
  margin-top: 30px;
}
#contact .contact_form .form .list li input{
  background: none;
  width: 100%;
  height: 42px;
  color: #fff;
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 3px;
  box-sizing: border-box;
}
#contact .contact_form .wrap{
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
#contact .contact_form .wrap .btn_group,
#contact .contact_form .wrap .msg{
  width: 46%;
}
#contact .contact_form .btn{
  height: 42px;
  font-size: 14px;
  padding: 0;
  border: none;
}
#contact .contact_form .wrap .btn_group .btn{
  width: 100%;
  margin-bottom: 60px;
}
#contact .contact_form .wrap .btn_group .btn:last-child{
  margin-bottom: 0;
}
#contact .contact_form .wrap .btn_group button.active{
  background: rgba(255, 255, 255, 1);
  color: #000;
}
#contact .contact_form .wrap .msg textarea{
  width: 100%;
  height: 100%;
  background: none;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  border: 1px solid #fff;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 10px;
}
#contact .contact_form .bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 60px;
}
#contact .contact_form .form .bottom .label label{
  display: inline-flex;
  align-items: center;
}
#contact .contact_form .form .bottom .label label p{
  max-width: 465px;
  margin-top: 0;
  padding-left: 30px;
  position: relative;
}
#contact .contact_form .form .bottom .label label p span{
  font-size: 13px;
  line-height: 20px;
  display: block;
  margin-top: 5px;
}
#contact .contact_form .form .bottom .label label p::before{
  content:"";
  left: 0;
  top: 4px;
  position: absolute;
  outline: 1px solid #fff;
  border-radius: 3px;
  width: 20px;
  height: 20px;
}
#contact .contact_form .form .bottom .label label p::after{
  display:none;
  content: "";
  left: 5px;
  top: 4px;
  position: absolute;
  width: 7px;
  height: 14px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}
#contact .contact_form .form .bottom .label label input[type=checkbox]{
  display: none;
}
#contact .contact_form .form .bottom .label label input[type=checkbox]:checked+p::before{
  display:none;
}
#contact .contact_form .form .bottom .label label input[type=checkbox]:checked+p::after{
  display: block;
}
#contact .contact_form .bottom .logo{
  width: 80px;
  height: 20px;
  background: url('../images/logo-footer.svg') center / 100% auto no-repeat;
  text-indent: -9999px;
}
#contact .contact_form .bottom .info{
  font-size: 12px;
  display: flex;
  align-items: center;
}
#contact .contact_form .bottom .info .sns{
  display: flex;
  align-items: center;
  margin-right: 50px;
}
#contact .contact_form .bottom .info .sns a{
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  display: inline-block;
  margin-left: 15px;
}
#contact .contact_form .bottom .info .ig{
  background-image: url('../images/footer-ig.svg');
}
#contact .contact_form .bottom .info .fb{
  background-image: url('../images/footer-fb.svg');
}
#contact .contact_form .bottom .info .yt{
  background-image: url('../images/footer-yt.svg');
}

/* side menu */
#sidemenu{
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 997;
  opacity: 0;
  transition: all .3s;
}
#sidemenu.show{
  opacity: 1;
}
#sidemenu a{
  width: 35px;
  color: #fff;
  font-size: 13px;
  line-height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 15px 0;
}
#sidemenu a:nth-child(1){
  background: url('../images/sidemenu-1-2.svg') top / 100% auto no-repeat;
  height: 114px;
}
#sidemenu a:nth-child(2){
  background: url('../images/sidemenu-2-2-en.svg') top / 100% auto no-repeat;
  height: 77px;
}
#sidemenu a:nth-child(3){
  background: url('../images/sidemenu-3-2-en.svg') top / 100% auto no-repeat;
  height: 210px;
}
#sidemenu a:nth-child(3) span{
  white-space:nowrap;
}
#sidemenu a span{
  transform: rotate(90deg);
  display: block;
}

@keyframes hover{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}
#sidemenu a:hover{
  animation:hover 1s infinite normal linear;
}

/* RWD */
@media screen and (max-width:1024px){
  .btn:hover{
    background: rgba(255, 255, 255, .35);
    color: #fff;
  }
  #top{
    background: none;
  }
  #top::before{
    content: "";
    width: 100vw;
    height: 100vh;
    background: url('../images/bg-1.jpg') bottom / cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #about,#service,#cabins{
    background: #e2ded0;
  }
  #about .about_wrap .top{
    max-width: 100%;
  }
  #cabins .section1 .box{
    margin-left: 0;
  }
  #cabins .section2 .full_slide .owl-dots{
    margin-top: 0;
  }
  #cabins .sub .flex .img,
  #cabins .sub .flex .box{
    width: 100%;
  }
  #cabins .section4 .box{
    padding-top: 30px;
  }
  #cabins .sub .flex,
  #contact .info .wrap{
    flex-wrap: wrap;
  } 
  #cabins .section6 .flex,
  #cabins .section7 .flex{
    flex-wrap: wrap;
  }
  #cabins .section6::after{
    max-height: inherit;
  }
  #cabins .section6 .box_img,
  #cabins .section6 .flex > .box{
    width: 100%;
  }
  #cabins .section6 .flex > .box{
    padding-top: 30px;
  }
  #cabins .section7{
    padding-top: 0;
  }
  #cabins .section7 .flex .box,
  #cabins .section7 .profile{
    width: 100%;
  }
  #cabins .section7 .profile{
    padding-top: 30px;
  }
  #cabins .section7 .profile li:nth-child(2){
    bottom: -50px;
  }
  #contact .info .wrap{
    flex-direction: column-reverse;
  }  
  #contact .info .wrap .box,
  #contact .info .wrap .img{
    width: 100%;
    margin-top: 20px;
  }
  #contact > .info{
    padding: 80px 0;
  }
  #contact .info.sec{
    height: auto;
  }
}
@media screen and (max-width:1023px) {
  #header .logo{
    margin: 0 auto;
  }
  .nav{
    display: none;
  }
  #mobi_btn{
    display: block;
  }
  #about .about_wrap .img{
    margin-top: 10vw;
  }
  #service.sec{
    height: 70vh;
  }

  #service .list li .img{
    width: 120px;
    padding-top: 120px;
  }
  #contact .contact_form .form .box.bottom{
    flex-wrap: wrap;
  }
  #contact .contact_form .form .box.bottom .label{
    margin-bottom: 20px;
  }
  #contact .contact_form .bottom .info .sns{
    margin-right: 30px;
  }
}
@media screen and (max-width:768px){
  .pc{
    display: none !important;
  }
  .mb{
    display: block !important;
  }
  #cabins .section2 .full_slide .owl-dots{
    position: absolute;
  }
  .owl-carousel .owl-nav button{
    width: 30px;
    height: 30px;
    bottom: 20px;
    margin-top: 0;
  }
  .content_slide .owl-nav .owl-prev{
    background-image: url('../images/arrow-l-1.svg');
    bottom: 0;
    left: 0;
  }
  .content_slide .owl-nav .owl-next{
    background-image: url('../images/arrow-r-1.svg');
    bottom: 0;
    right: 0;
  }
  #top .logo{
    width: 30%;
    padding-top: 31.6%;
    margin-bottom: 30%;
  }
  #top .slogan{
    font-size: 14px;
  }
  #top .slogan span{
    display: block;
    margin: 0;
  }
  #about .about_wrap{
    padding: 60px 0;
  }
  #service .service_wrap{
    flex-wrap: wrap;
    padding: 60px 0;
  }
  #service .service_wrap .box,
  #service .service_wrap .text_list{
    width: 100%;
    margin-bottom: 30px;
  }
  #service .service_wrap .img_list{
    margin-top: 0;
  }
  #service .service_wrap .text_list p{
    padding: 15px 0 5px 0;
  }
  #cabins .section1.container{
    padding-bottom: 50px;
  }
  #cabins .section2 .item_slide{
    width: 80%;
    margin: 0 auto;
  }
  #cabins .section2 .item_slide .wrap{
    flex-wrap: wrap;
    position: relative;
    padding-top: 100px;
  }
  #cabins .section2 .item_slide .wrap .main_img,
  #cabins .section2 .item_slide .wrap > .box{
    width: 100%;
    margin-bottom: 30px;
  }
  #cabins .section2 .item_slide .wrap .box{
    margin-left: 0;
  }
  #cabins .section2 .item_slide .wrap .box .text{
    position: absolute;
    left: 0;
    top: 0;
  }
  #cabins .section2 .item_slide .wrap .box .text p{
    margin: 0;
  }
}
@media screen and (max-width:640px){
  #cabins .section6 .flex > .box{
    margin-top: 0;
  }
  #cabins .section7 .flex .box,
  #cabins .section7 .profile{
    margin-bottom: 40px;
  }
  #contact .info .wrap .box .btn{
    width: 100%;
  }
  #contact .contact_form{
    background: url('../images/bg-6-2.jpg') center / cover;
  }
  #contact .contact_form .container{
    padding: 80px 0;
  }
  #contact .contact_form .form .box{
    width: 100%;
    margin-bottom: 50px;
  }
  #contact .contact_form .form .box .title{
    margin-top: 0;
  }
  #contact .contact_form .wrap{
    flex-wrap: wrap;
  }
  #contact .contact_form .wrap .btn_group,
  #contact .contact_form .wrap .msg{
    width: 100%;
  }
  #contact .contact_form .wrap .msg textarea{
    height: 200px;
  }
  #contact .contact_form .wrap .btn_group{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  #contact .contact_form .wrap .btn_group .btn{
    width: 32%;
    font-size: 14px;
    margin-bottom: 20px;
  }
  #contact .contact_form .bottom{
    margin-top: 0;
    align-items: flex-start;
  }
  #contact .contact_form .bottom .info{
    width: calc(100% - 100px);
    flex-wrap: wrap;
    justify-content: right;
  }
  #contact .contact_form .bottom .info .sns{
    margin: 0 0 10px 0;
  }
}
@media screen and (max-width:480px){
  .box .title span{
    display: block;
  }
  .box .title{
    font-size: 23px;
    line-height: 36px;
  }
  .box .title.en{
    font-size: 23px;
  }
  .box .summary{
    font-size: 16px;
  }
  .box .sub_title{
    font-size: 12px;
    line-height: 18px;
  }
  .full_slide .owl-dots,
  .full_slide .owl-nav button{
    bottom: 40px;
  }
  .full_slide .owl-nav .owl-prev{
    left: 10%;
  }
  .full_slide .owl-nav .owl-next{
    right: 10%;
  }
  #cabins .section2 .full_slide .owl-nav .owl-prev{
    left: 0;
  }
  #cabins .section2 .full_slide .owl-nav .owl-next{
    right: 0;
  }
  #about::after{
    height: 40%;
  }
  #about .about_wrap,
  #cabins .section2 .item_slide,
  #cabins .sub .container{
    margin: 0 0 0 6.5%;
    padding: 50px 0;
  }
  #cabins .section1.container{
    padding: 50px 0 0 0;
  }
  #about .about_wrap .bottom,
  #about .about_wrap .img{
    margin-top: 30px;
  }
  #service .service_wrap{
    width: 70%;
    padding-bottom: 0;
  }
  #service .service_wrap .box{
    position: relative;
  }
  #service .service_wrap .img_list{
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    top: 18px;
    right: 0;
  }
  #service .service_wrap .img:nth-child(2){
    position: relative;
    top: 15px;
  }
  #service .service_wrap .img:nth-child(3){
    position: relative;
    top: 10px;
  }
  #service .service_wrap .text_list p{
    font-size: 14px;
    line-height: 24px;
    padding: 36px 136px 15px 0;
    margin-bottom: 44px;
  }
  #service .service_wrap .text_list p span{
    display: block;
  }
  #service .service_wrap .img{
    width: 126px;
  }
  #cabins .main .box{
    justify-content: flex-start;
  }
  #cabins .section1 .img{
    margin-bottom: 0;
  }
  #cabins .section4.container{
    padding-top: 0;
  }
  #cabins .section4 .box.wow.fadeIn.rellax{
    margin: 30px 0;
  }
  #cabins .section6::after{
    height: 70%;
  }
  #cabins .section6 .box_img .img{
    margin-top: 0;
  }
  #cabins .section7 .container{
    padding-top: 0;
  }
  #cabins .section7 .profile{
    flex-wrap: wrap;
  }
  #cabins .section7 .profile li{
    width: 100%;
    position: static !important;
    margin-top: 30px;
  }
  #cabins .section7 .profile li .name{
    font-size: 18px;
  }
  #cabins .section7 .profile li .title{
    font-size: 14px;
    line-height: 20px;
  }
  #contact .contact_form .wrap .btn_group{
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  #contact .contact_form .wrap .btn_group .btn{
    width: 100%;
  }
  #contact .contact_form .bottom{
    justify-content: center;
    flex-wrap: wrap;
  }
  #contact .contact_form .bottom .info{
    width: 100%;
    justify-content: center;
    margin-top: 30px;
  }
}
@media screen and (max-width: 374px){
  #service .service_wrap h2{
    margin-bottom: 0;
  }
  #service .service_wrap .img{
    width: 95px;
  }
  #service .service_wrap .img_list{
    top: 27px;
  }
  #service .service_wrap .img:nth-child(2){
    top: 2px;
  }
  #service .service_wrap .img:nth-child(3){
    position: relative;
    top: -12px;
  }
  #service .service_wrap .img:nth-child(4){
    position: relative;
    top: -28px;
  }

  #service .service_wrap .text_list p{
    padding: 36px 100px 15px 0;
    margin-bottom: 0;
  }
}