]@charset "utf-8";
body,html {opacity:0;}

.goto {
    position: fixed;
    right: 2%;
    top: 50%;
    margin-top: -63px;
    z-index: 100;
    /* box-shadow: 0px 0px 16px 1px grey; */
    /* padding: 1em; */
    border-radius: 1em;
    /* overflow: hidden; */
    /* background-color: white; */
}

.goto ul{
    padding: 0;
    margin-top: -50%;
    width: 30px;
}

.goto ul li{
    /* visibility: hidden; */
    margin: .5em 0;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.goto ul li a{
    /* padding: .5em 0 .5em 0em; */
    display: table;
    justify-content: flex-start;
    align-items: center;
    width: 6px;
    height: 6px;
    background: #d4d4d4;
    border-radius: 1em;
    position: absolute;
    transition: .3s ease-in-out;
}

.goto ul li:hover a{background:var(--color-main);}

.goto ul li:after{
    content:"";
    position:absolute;
    display:block;
    width:20px;
    height:20px;
    left: 18%;
    top: 0;
    background: rgb(255 255 255 / 0%);
    border:2px solid var(--color-main);
    border-radius:50%;
    opacity: 0;
    transition: .3s ease-in-out;
}

.goto ul li:hover::after {opacity:1;transition: .3s ease-in-out;}

.goto ul li a span {
    display: table;
    width: 50px;
    height: 50px;
    background-color: var(--color-point4);
    background-repeat: no-repeat;
    margin-right: .5em;
    border-radius: 3em;
    background-position-x: center;
    background-position-y: center;
}

.goto ul li:nth-of-type(1) a span{
    background-image: url(/img/main/goto1.png);
}

.goto ul li:nth-of-type(2) a span{background-image: url(/img/main/goto2.png); background-color: var(--color-point2);}

.goto ul li:nth-of-type(3) a span{background-image: url(/img/main/goto3.png);background-color: var(--color-point3);}

.goto ul li:nth-of-type(4) a span{background-image: url(/img/main/goto4.png);background-color: var(--color-point1);}

.goto ul li:nth-of-type(5) a span{background-image: url(/img/main/goto5.png);background-color: var(--color-point6);}

.goto > a{
    background-color: var(--color-main);
    /* color: white; */
    width: 100%;
    display: flex;
    padding: 1em;
    align-items: center;
    justify-content: space-around;
}	
.section1 {height: 100vh;overflow: hidden;position: relative;}

.section1 > p {
    position: absolute;
    right: -30px;
    color: black;
    top: 50%;
    transform: rotate(90deg);
    text-transform: uppercase;
    font-style: italic;
    font-size: 1.2em;
    color: var(--color-ft-font-color);
    width: auto;
    height: auto;
}

.section1 .slide1 {
    z-index: 0;
    width: 100%;
    height: 100vh;
}

.section1 .slide1 li{
    width: 100%;
    height: 100vh;
    /* background: black; */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.section1 .slide1 li img{
    width: 100%;
    height: 100vh;
}

.section1 .slide1 li .txt_box{
    width: 100%;
    position: absolute;
    bottom: 16%;
    left: 11%;
    display: flex;
    flex-direction: column;
    color: #fff;
    transition: all .2s;
    text-shadow: 0 4px 8px rgb(0 0 0 / 36%);
}

.section1 .slide1 li .txt_box .txt_1{
    font-size: var(--font-size24);
    opacity: 0;
}

.section1 .slide1 li .txt_box .txt_2{
    font-size: var(--font-size40);
    font-weight: 800;
    opacity: 0;
}

.section1 .slide1 li.on .txt_box .txt_1{
    font-size: var(--font-size24);
    animation-name: slide;
    animation-duration: .3s;
    animation-delay: .2s;
    animation-fill-mode: both;
    text-shadow: 2px 2px 2px black;
}

.section1 .slide1 li.on .txt_box .txt_2{
    font-size: var(--font-size40);
    font-weight: 800;
    animation-name: slide;
    animation-duration: .3s;
    animation-delay: .5s;
    animation-fill-mode: both;
    text-shadow: 2px 2px 2px black;
}

@keyframes slide {
    0%{opacity: 0; transform: translateX(30px);}
    100%{opacity: 1; transform: translateX(0);}
}

.section1 .slide1 li .text {
    left: 50%;
    top: 50%;
    /* width: 50%; */
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 9;
    opacity: 0;
}

.section1 .bx-wrapper {
    box-shadow: none;
    margin-bottom: unset;
    border: 0;
    /* height: 100vh; */
}

.section1 .bx-wrapper .bx-pager{
    height: 10vh;
}

.section1 .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{
    position: absolute;
    bottom: 34px;
    width: 100%;
    /* left: -37%; */
}

.section1 .bx-wrapper .bx-pager .bx-pager-item a{
    background-color: #fff;
}

.section1 .bx-wrapper .bx-pager .bx-pager-item a.active{border: 2px solid #fff;background-color: transparent;}

.section1 .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus{
    background-color: #fff;
}

.section1 .slide_thum {
    position: absolute;
    bottom: 4%;
    right: 2%;
    z-index: 111;
    display: flex;
    flex-direction: row;
}

.section1 .slide_thum li{
    width: 150px;
    height: 90px;
    margin: 0 .2em;
    border: 1px solid white;
    background-size: cover;
    box-shadow: 5px 5px 8px 2px rgb(0 0 0 / 30%);
}

li {display: flex;justify-content: center;}

.section1 .slide_thum li:nth-of-type(1) {background-image: url(/img/slide/thum1.jpg);}

.section1 .slide_thum li:nth-of-type(2) {background-image: url(/img/slide/thum2.jpg);}

.section1 .slide_thum li:nth-of-type(3) {background-image: url(/img/slide/thum3.jpg);}

.section1 .slide_thum li:nth-of-type(4) {background-image: url(/img/slide/thum4.jpg);}

.section1 .icon_link{
    width: var(--width-size);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section1 .icon_link:hover {
    /*margin-top:-1em; */
}

.section1 .icon_link li{
    width: 200px;
    height: 240px;
    transform: translateY(-30px);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    overflow: hidden;
    /* visibility: hidden; */
}

.section1 .icon_link li:hover {
    background-color:
    green;
    border-radius:1em;
    padding:2em 0;
    transform: translateY(-89px);
    /*animation:animatedbang 3s infinite;*/
    /* margin-top: -2em; */
    z-index:111;
    -webkit-transition: .5s ease-in-out; 
    transition: .5s ease-in-out;
    -webkit-backface-visibility: hidden;
}

.section1 .icon_link li a{
    width: 100%;
    height: 170px;
    display: flex;
    justify-content: center;
    padding-bottom: 1em;
    /* padding-top: 4em; */
    margin-top: 1em;
    font-weight: 600;
    font-size: 1.2em;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 1em;
    align-items: flex-end;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    overflow: hidden;
}

.section1 .icon_link li.i_cl1:hover {background-color:var(--color-point4);}

.section1 .icon_link li.i_cl2:hover {background-color:var(--color-point2);}

.section1 .icon_link li.i_cl3:hover {background-color:var(--color-point3);}

.section1 .icon_link li.i_cl4:hover {background-color:var(--color-point1);}

.section1 .icon_link li.i_cl5:hover {background-color:var(--color-point5);}

.section1 .icon_link li.i_cl6:hover {background-color:var(--color-point6);}

.section1 .icon_link li:hover a {
    color:white; margin-top:0;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    -webkit-backface-visibility: hidden;
}

.section1 .icon_link li:nth-of-type(1) a { background-image:url(/img/main/icon1.png)}
.section1 .icon_link li:nth-of-type(1):hover a{background-image:url(/img/main/icon1_over.png);}

.section1 .icon_link li:nth-of-type(2) a { background-image:url(/img/main/icon2.png)}
.section1 .icon_link li:nth-of-type(2):hover a{background-image:url(/img/main/icon2_over.png);}
.section1 .icon_link li:nth-of-type(3) a { background-image:url(/img/main/icon3.png)}
.section1 .icon_link li:nth-of-type(3):hover a{background-image:url(/img/main/icon3_over.png);}
.section1 .icon_link li:nth-of-type(4) a { background-image:url(/img/main/icon4.png)}
.section1 .icon_link li:nth-of-type(4):hover a{background-image:url(/img/main/icon4_over.png);}
.section1 .icon_link li:nth-of-type(5) a { background-image:url(/img/main/icon5.png)}
.section1 .icon_link li:nth-of-type(5):hover a{background-image:url(/img/main/icon5_over.png);}
.section1 .icon_link li:nth-of-type(6) a { background-image:url(/img/main/icon6.png)}
.section1 .icon_link li:nth-of-type(6):hover a{background-image:url(/img/main/icon6_over.png);}


@media screen and (max-width: 1000px) {
.goto {
    display: none;
}

.goto ul{}

.goto ul li{}

.goto ul li a{}

.goto > a{}	

.section1 {height: 100%;}

.section1 .bx-wrapper{/* height: 70vh; */}

.section1 .slide1 {height: 100%;width: 100%;display:block;}

.section1 .slide1 li{height: 52vh;}

.section1 .bx-wrapper .bx-viewport {
    /* height: 50vh; */
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.section1 .slide1 li img{width: 100%;height: 100%;object-fit: cover;}

.section1 .slide1 li .txt_box{
    position: absolute;
    bottom: 16%;
    left: 11%;
    color: #fff;
}

.section1 .slide1 li .txt_box .txt_1{
    font-size: var(--font-size24);
}

.section1 .slide1 li .txt_box .txt_2{
    font-size: var(--font-size40);
    font-weight: 800;
}

.section1 .icon_link{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.section1 .icon_link li{
    width: 50%;
    height: auto;
}

.section1 .icon_link li a{
    font-size: 1.1em;
    text-align: center;
    line-height: 1.2em;
    align-items: center;
    padding-top: 6em;
}

.section1 .bx-controls {
    display: none;
    display: flex;
    width: 100%;
    left: 0;
    position: relative;
    top: 8%;
    left: 0;
}

.section1 p{
    /* display: none; */
}

.section1 .bx-controls .bx-pager {
    display: flex;
    flex-direction: row;
    width: 100%;
    display: none;
}

.section1 .bx-controls .bx-pager .bx-pager-item {
    width: 100%;
}

.section1 .bx-controls .bx-pager .bx-pager-item a{
    width: 100%;
}


.section1 .bx-controls .bx-pager .bx-pager-item a.active{}

}

.section2 {width: 91%;height: 73vh;display: flex;justify-content: space-between;margin-top: 5em;}

.section2 .sec-2_img_bg1{
    background-image: url(/img/main/PROLOGUE1.jpg);
    background-repeat: no-repeat;
    width: 57%;
    background-size: cover;
}

.section2 .sec-2_img_bg2{
    background-image: url(/img/main/PROLOGUE2.jpg);
    background-repeat: no-repeat;
    width: 602px;
    height: 45vh;
}

.section2 .sec-2_flex{
    display: flex;
    flex-direction: column;
    width: 35%;
    height: 73vh;
    justify-content: space-between;
}

.section2 .prologue_txt{
    width: 90%;
}

.section2 .prologue_txt .top-txt{
    font-size: var(--font-size40);
    font-weight: 600;
    margin-bottom: 0.8em;
}

.section2 .prologue_txt .m-txt{
    line-height: 1.7em;
    font-size: 17px;
    word-break: keep-all;
}

@media screen and (max-width: 1000px) {
.section2 {}

.section2 ul.room_slide {}

.section2 ul.room_slide li{flex-wrap: wrap;width: 100%;height: 78vh;}

.section2 ul.room_slide li div{}

.section2 ul.room_slide li div.text{width: 70%;position: absolute;bottom: -15%;left: 15%;}

.section2 ul.room_slide li .img::after{
    content: '';
    display: block;
    width: 310px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.5);
    position: relative;
    top: 13%;
    right: -7%;
}

.section2 ul.room_slide li div.img{
    background-position: left;
    width: 100%;
    height: 70vh;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 0;
    box-shadow: none;}
}

.turn {
    display: flex;
    justify-content: space-evenly;
    width: 15%;
    margin: 0 auto;
}

.turn li{
    font-size: 28px;
    color: #ccc;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
}

.circle {
    display: flex;
    position: absolute;
    top: 94%;
    z-index: 1;
    right: 6%;
}

.circle li{
    background-color: #000;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 0.5em;
    border: 1px solid #fff;
}

.section3 > div.slide {width: var(--width-size);height: 484px;}

.section3 > div.slide .bx-wrapper {
    box-shadow: unset;
    background: unset;
    border: unset;
}

span.color1 {background-color: var(--color-point4);}

span.color2 {background-color: green;}

span.color3 {background-color: var(--color-point1);}

span.color4 {background-color: var(--color-point3);}

.section3 > div.simple_list{
    display: none;
}

.section3 > div.simple_list.on {
    display: block;
}

.section3 > div.simple_list ul{
    display: flex;
    /* margin-left: 27.7px; */
}

.section3 > div.simple_list ul li{
    border: 0;
    width: 382px;
    height: 382px;
    box-shadow: 4px 11px 30px -11px #ccc;
}

.section3 > div.simple_list ul li:nth-last-of-type(1) {
    margin-right: 0;
}

.section3 > div.simple_list ul li div{}

.section3 > div.simple_list ul li a{
    border: 0;
}

.section3 > div.simple_list ul li.empty_li{
    box-shadow: unset;
}

@media screen and (max-width: 1000px) {
.section2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0em;
    height: auto;
}

.section2 > div.notice {
    height: auto;
}
.section2 ul.room_slide li div.text h4{font-size: 3em;}

.section2 ul.room_slide li div.text .m_txt{font-size: 2em;margin-bottom: 1em;margin-top: 1em;font-weight: 400;}

.section2 ul.room_slide li div.text p{
    font-size: var(--font-size26);
    margin-bottom: 2em;
    line-height: 2em;
    font-weight: 400;
}

.section2 ul.room_slide li div.text .b_txt{
    font-size: var(--font-size30);
    font-weight: 400;
}

.section2 .sec-2_img_bg2{
    width: 94%;
    height: 34vh;
    background-size: cover;
}

.section2 > div > div:nth-of-type(1) {
    width: 100%;
    margin-top: 4em;
    margin-bottom: 5em;
}

.section2 .sec-2_flex{
    margin-left: 2em;
    width: 100%;
    height: auto;
}

.section2 > div > div:nth-of-type(1) > div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.section2 > div > div:nth-of-type(1) > div:nth-of-type(2) a {
    width: 100%;
    margin-bottom: 2em;
}

.section2 > div > div:nth-of-type(1) > div:nth-of-type(2) a:after {left: 0;width: 100%;height: 1px;top: 100%;margin-top: 5%;}
.section2 > div > div:nth-of-type(1) > div:nth-of-type(2) a h4 {
    font-size: 1.2em;
}

.section2 > div > div:nth-of-type(1) > div:nth-of-type(2) a p {font-size:1em;}
.section2 > div > div:nth-of-type(2) {}

.section2 > div div.tv div:nth-of-type(1) {
    /* background-size: 100%; */
    height: 19em;
    margin-top: 2em;
    margin-bottom: 1em;
}

.section2 > div div.tv div:nth-of-type(1):before{}

.section2 > div div.tv div:nth-of-type(1):after{display: none;}

.section2 > div div.tv div a span {
    margin-left: 0;
}

.section2 > div.notice .div_lab.on {}

.section2 > div.notice .div_lab .bx-controls-direction {width:100%;}

.section2 > div.notice .div_lab .bx-controls .bx-prev {width: 30px;left: 19%;}

.section2 > div.notice .div_lab .bx-controls .bx-next {width: 30px;left: 21%;}

.section3 > div.slide {
    width: 360px;
    overflow: hidden;
}

.turn {
    width: 27%;
    padding-bottom: 1em;
    margin-top: -1em;
}

.turn li {
    width: 30px;
    height: 30px;
    font-size: 20px;
}

.section2 .sec-2_img_bg1{
    background-size: cover;
    width: 100%;
    height: 35vh;
}

.section2 .prologue_txt .top-txt{}

.section2 .prologue_txt .m-txt{font-size: var(--font-size24);width: 91%;}

}

/* section3 */
.section3{
    position: relative;
    margin-top: 4em;
}
.section3 .roomtype {
    position: relative;
}

.section3 .roomtype::before{
    content: '';
    display: block;
    background-color: #f8f8f8;
    width: 1920px;
    height: 543px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 9em;
    color: #3a3a3a;
    position: absolute;
    top: 182px;
    left: 0;
}

.section3 .roomtype div.text{
    /* background-color: #ededed;
    width: 1920px;
    height: 543px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 9em;
    color: #3a3a3a;
    position: absolute;
    top: 182px;
    left: 0; */
    position: absolute;
    left: 9%;
    top: 178px;
}

.section3 .roomtype div.text h4{font-size: var(--font-size40);font-weight: 600;margin-bottom: 0.8em;width: 100%;margin-top: -0.8em;}

.section3 .hihompy div.text h4:after{content: '';border: 1px solid #fff;width: 343px;display: block;position: relative;top: -49%;left: 84%;z-index: 11;}

.section3 .roomtype div.text a {
    margin-top: 2em;
}

.section3 .roomtype div.text span {line-height: 1.7em;display: block;}

.section3 .sec-2_txt{
    display: flex;
    justify-content: space-around;
    margin-top: 0.5em;
    width: 70%;
    font-size: var(--font-size);
    font-weight: 500;
}

.main_width_setting{
    position:relative;
    width: var(--width-size);
    margin:0 auto;
    clear: both;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5em 0;
}

.section3 .swiper1{
    width: 75%;
    overflow: hidden;
    transform: translate3d(41%, 10px, 10px);
}

.section3 .button_box{
    position: absolute;
    top: 367px;
    left: 11.40%;
    z-index: 2;
}

.section3 .button_box .btn_n{
    background-image: url(/img/icon/prev.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 23px;
}

.section3 .button_box .btn_n::after{
    width: 61px;
    height: 45px;
    content: '';
    display: block;
    border: 1px solid #000;
    padding: .5em;
    position: relative;
    bottom: 15px;
}

.section3 .button_box .btn_p{
    background-image: url(/img/icon/next.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 23px;
    margin-left: 1.5em;
}

.section3 .button_box .btn_p::after{
    width: 61px;
    height: 45px;
    content: '';
    display: block;
    border: 1px solid #000;
    padding: .5em;
    position: relative;
    bottom: 15px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

.swiper-slide.a_box::after, .swiper-slide.b_box::after, .swiper-slide.c_box::after{
    width: 70px;
    height: 70px;
    content: '';
    background-color: #2b5c4fa8;
    display: block;
    color: #fff;
    text-align: center;
    line-height: 70px;
    position: absolute;
    bottom: 0;
    right: -1px;
}

.section3 .swiper1 .swiper-wrapper .swiper-slide.b_box::after{content: '';}

.section3 .swiper1 .swiper-wrapper .swiper-slide.c_box::after{content: '';}


@media screen and (max-width:1000px) {
    .section3 {width: 100%;}

    .section3 > p{position: absolute;z-index: 1;font-weight: 900;font-size: 2em;top: 9%;left: 11%;z-index: 1;font-family: var(--font-point);}
    
    .section3:after {content:"";position: absolute;width: 100%;height: 22%;background-color: #cacaca;top: 19%;z-index: 0; display: none;}
    
    .section3 .roomtype {width: 100%;height: 21vh;}
    
    .section3 .roomtype div.count{position: absolute;right: 18%;top: 12%;display: flex;flex-direction: row;font-size: 2.0em;color: white;flex-wrap: wrap;align-items: center;width: 3em;}
    
    .section3 .roomtype div.count span {
        font-size: .5em;
        font-weight: 100;
    }
    
    .section3 .roomtype div.text{position: absolute;background-color: #ffffff;left: 20px;top: 34px;}
    
    .section3 .roomtype div.text h4{font-size: var(--font-size40);font-family: var(--font-basic);margin-top: 1em;}
    
    .section3 .hihompy div.text h4:after{content: '';border: 1px solid #fff;width: 343px;display: block;position: relative;top: -49%;left: 84%;z-index: 11;}
    
    .section3 .roomtype div.text a {
        margin-top: 2em;
    }
    
    .section3 .roomtype div.text span {line-height: 2em;}
    
    .section3 .sec-2_txt{
        display: flex;
        justify-content: space-around;
        margin-top: 0.5em;
        width: 70%;
        font-size: var(--font-size);
        font-weight: 500;
    }
    
    .main_width_setting{
        position:relative;
        width: var(--width-size);
        margin:0 auto;
        clear: both;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .5em 0;
    }
    
    .section3 .swiper1{
        overflow: hidden;
        transform: translate3d(2%, 10px, 10px);
        width: 900px;
    }
    
    .section3 .button_box{
        position: absolute;
        top: 87%;
        left: 85%;
    }
    
    .section3 .button_box .btn_n{
        background-image: url(/img/icon/prev.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        width: 18px;
    }
    
    .section3 .button_box .btn_p{
        background-image: url(/img/icon/next.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        width: 18px;
        margin-left: 0em;
    }

    .section3 .button_box .btn_n::after{
        width: 56px;
        height: 25px;
        content: '';
        display: block;
        border: 1px solid #000;
        padding: 0.5em;
        position: relative;
        bottom: 17px;
        font-size: 3em;
    }

    .section3 .button_box .btn_p::after{
        width: 61px;
        height: 25px;
        content: '';
        display: block;
        border: 1px solid #000;
        padding: 0.5em;
        position: relative;
        bottom: 17px;
        font-size: 3em;
    }
    
    .swiper-button-next::after,
    .swiper-button-prev::after {
        display: none;
    }
    
    .swiper-slide.a_box::after, .swiper-slide.b_box::after, .swiper-slide.c_box::after{
        width: 50px;
        height: 50px;
		font-size:1.5em;
		line-height: 50px;
    }

    .section3 .swiper1 .swiper-wrapper .swiper-slide img{
        width: 100%;
    }

    .section3 .roomtype::before{
        display: none;
    }

}

.section4 {width: 100%;margin-top: 10em;display: flex;flex-direction: column;}

.section4 .facility_txt .top-txt{
    font-size: var(--font-size40);
    font-weight: 600;
    margin-left: 4em;
    /* margin-bottom: 1em; */
}

.section4 .facility_txt{
    display: flex;
    align-items: end;
}

.section4 .mySwiper2 {
    margin-top: 3em;
}

.section4 .mySwiper2 .swiper-wrapper img{
    width: 100%;
    height: 100%;
}
.section4 .mySwiper2 .swiper-wrapper li:hover .txt_box{opacity:1; background-color:#2b5c4fd1;}

.section4 .mySwiper2 .swiper-wrapper .swiper-slide .txt_box{
    position: absolute;
    height:100%;
    width:100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    color: #fff;
    justify-content: center;
    align-items: center;
    opacity:0;
}

.section4 .mySwiper2 .swiper-wrapper .swiper-slide .t-txt{
   margin-bottom: 0.5em;
   font-size: var(--font-size30);
}

.section4 .s-button_box{
    position: absolute;
    left: 86%;
    z-index: 2;
}

.section4 .s-button_box .btn_n{
    background-image: url(/img/icon/prev.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 23px;
}

.section4 .s-button_box .btn_n::after{
    width: 61px;
    height: 45px;
    content: '';
    display: block;
    border: 1px solid #000;
    padding: 0.5em;
    position: relative;
    bottom: 15px;
}

.section4 .s-button_box .btn_p{
    background-image: url(/img/icon/next.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 23px;
    margin-left: 1.5em;
}

.section4 .s-button_box .btn_p:after{
    width: 61px;
    height: 45px;
    content: '';
    display: block;
    border: 1px solid #000;
    padding: 0.5em;
    position: relative;
    bottom: 15px;
}

.section4 .swiper-button-next::after,
.section4 .swiper-button-prev::after {
    display: none;
}


@media screen and (max-width: 1000px) {

.main_width_setting {width:100%;display: flex;flex-wrap: wrap;padding-left: 1em;}

.section4 {
    height: 100%;
    position: relative;
}

br.mo {display:unset;}

.section2 > ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1em;
}

.bottom_scroll_banner {
    width: 100%;
}


.section4 {width: 100%;margin-top: 9em;display: flex;flex-direction: column;}

.section4 .facility_txt .top-txt{
    font-size: var(--font-size40);
    margin-left: 1em;
}

.section4 .facility_txt{
    display: flex;
    justify-self: start;
    align-items: center;
}

.section4 .mySwiper2 {
    margin-top: 3em;
    width: 900px;
    transform: translateX(2%);
}

.section4 .mySwiper2 .swiper-wrapper img{
    width: 100%;
    height: 100%;
    margin-right: -3em;
}

.section4 .mySwiper2 .swiper-wrapper .swiper-slide .txt_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    color: #fff;
    justify-content: center;
    align-items: center;
}

.section4 .mySwiper2 .swiper-wrapper .swiper-slide .t-txt{
   margin-bottom: 0.5em;
   font-size: var(--font-size30);
}

.section4 .s-button_box{
    position: absolute;
    left: 85%;
    top: 33px;
}

.section4 .s-button_box .btn_n{
    background-image: url(/img/icon/prev.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
}

.section4 .s-button_box .btn_p{
    background-image: url(/img/icon/next.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 18px;
    margin-left: 0em;
}

.section4 .swiper-button-next::after,
.section4 .swiper-button-prev::after {
    display: none;
}

.section4 .s-button_box .btn_n::after{
    width: 61px;
    height: 25px;
    content: '';
    display: block;
    border: 1px solid #000;
    padding: 0.5em;
    position: relative;
    bottom: 17px;
    font-size: 3em;
}

.section4 .s-button_box .btn_p:after{
    width: 61px;
    height: 25px;
    content: '';
    display: block;
    border: 1px solid #000;
    padding: 0.5em;
    position: relative;
    bottom: 17px;
    font-size: 3em;
}
}