body{background-image: url(../img/common/bg.png); background-attachment: fixed; background-size: 797px 293px; background-position: center 100px; background-repeat: no-repeat;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    body{background-size: 69.87vw 25.60vw!important;}
}

/* section01 */
#section01{ overflow: hidden; position: relative; width: 100%; height: 100vh;  top: 0; left: 0; background-color: #fff; }
/* 
#section01 .videoWrap{position:absolute; width: 100%; height:100%; top: 0; left: 0; margin:0; pointer-events: none; }
#section06 .videoWrap {position:absolute; width: 100%; height:100%; top: 0; left: 0; margin:0; pointer-events: none;}
#section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed,
#section06 .videoWrap iframe, #section08 .videoWrap object, #section08 .videoWrap embed{ position:absolute; top:0; left:0; width:100%; height:100%; opacity: 1; transform: scale(1.2); pointer-events: none; } 
*/

#section01 .videoWrap {position:absolute;width: 100%;height: 100vh;overflow: hidden}
#section01 .videoWrap .inner {width: 100%;height: 100%;min-width: 100%;min-height: 100%;display: block;overflow: hidden;z-index: 1}
#section01 .videoWrap .inner {position: absolute;top: 50%;left: 50%;transform:translate3d(-50%, -50%, 0);object-fit: cover}
#section01 .videoWrap .inner #fullVideo {width: 100%;height: 100%;display: block}

#section01 .fullSlogan{ position: fixed; top: calc(50% - 150px); width: 100%; }
#section01 .fullSlogan .wrap{ overflow: hidden;}
#section01 .fullSlogan .wrap .line{ width: 1px; height: 50px; background-color: #fff; margin-right: 40px;}
#section01 .fullSlogan .wrap p{ line-height: 28px; padding-right: 40px;}
#section01 .fullSlogan .wrap a{ width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; -webkit-backdrop-filter: blur(16px) saturate(180%); background-color: rgba(255, 255, 255, 0.75);}
#section01 .control{ font-size: 0; position: absolute; bottom: 80px; left: 0; right: 0; margin: 0 auto; width: 170px; text-align: center; z-index: 10;}
#section01 .control li{ display: inline-block; padding: 0 5px;}
#section01 .control li a{ display: block; font-size: 18px; color: #fff; width: 40px; height: 40px; line-height: 38px; border-radius: 50%; border: 2px solid #fff; text-align: center;}
#section01 .control li i{ color: #fff; position: relative; }
#section01 .play-pause a.hide{ display: none;}
#section01 .control .mute-onoff a.hide{ display: none;}
.vidbox .ratio iframe, .end-video .videoWrap iframe, #cutvideo1, #cutvideo2{pointer-events: none;}
.m-play{ display: none;}

.scrolldown{ position: absolute; bottom: 40px; z-index: 11;}
#section01.scroll{ position: relative;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01 { overflow: hidden; position: relative; width: 100%; height:100vh; margin-top: 0; z-index: 0;}
    /*
    #section01 .videoWrap{position:absolute; width: 100%; height:100%; top: 0; left: 0;  }
    #section01 .videoWrap, #section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{ pointer-events: unset;}
    #section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{ opacity: 1; transform: scale(3.6);}
    */
    #section01 .fullSlogan { top: calc(50% - 50px); display: block; position: absolute;}
    #section01 .fullSlogan h3{ font-size: 24px;}
    #section01 .control li a{ display: block; font-size: 10px; color: #fff; width: 20px; height: 20px; line-height: 17px; border-radius: 50%; border: 1px solid #fff; text-align: center;}
    #section01 .control{ bottom: 30px; display: none; }
    
}


#section02{padding: 120px 0; position: relative; overflow: hidden; background-color: #fff;}
#section02 .wrap1440{ position: relative;}
#section02 .tit{ position: absolute; top: 0; left: 0;}
#section02 .tit h3{ padding-right: 125px; position: relative;}
#section02 .tit h3:after{ content: ''; width: 60px; height: 1px; background-color: #000; position: absolute; right: 0; bottom: 10px; display: block;}
#section02 .btm-tit{ position: absolute; bottom: 0; right: 0; text-align: right;}
#section02 .btm-tit p{ padding-left: 64px; }
#section02 .flex-wrap{ display: flex; flex-direction: column; justify-content: center;}
#section02 .flex-wrap > div{ font-size: 0; display: block;}
#section02 .flex-wrap > div.top{ text-align: left; padding-bottom: 30px;}
#section02 .flex-wrap > div.top > div{ margin-right: 30px;}
#section02 .flex-wrap > div.btm{ text-align: right; display: flex; align-items: flex-start; justify-content: flex-end;}
#section02 .flex-wrap > div.btm > div{ margin-left: 30px;}
#section02 .flex-wrap > div > div{ display: inline-block;}
#section02 .flex-wrap .movie-wrap{ position: relative; overflow: hidden;}
#section02 .flex-wrap .movie-wrap iframe{ position: absolute; left: -50%; top: 0; width: 200%; height: 100%;}
#section02 .flex-wrap .img-wrap{ position: relative;}
#section02 .flex-wrap .box01{ width: 299px; height: 293px;}
#section02 .flex-wrap .box02{ width: 376px; height: 369px;}
#section02 .flex-wrap .box03{ width: 566px; height: 520px;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section02{ padding: 50px 0;}
    #section02 .tit{ position: relative; top: 0; left: 0; display: inline-block;}
    #section02 .tit h3{ padding-right: 40px; }
    #section02 .tit h3:after{width: 30px; bottom: 5px;}
    #section02 .btm-tit{ position: relative; bottom: 0; right: 0; text-align: right;}
    #section02 .btm-tit p{ padding-left: 0; }
    #section02 .btm-tit h3{ padding-right: 15px;}
    #section02 .flex-wrap > div.top{ text-align: left; padding-bottom: 0;}
    #section02 .flex-wrap > div.top > div{ margin-right: 0; margin-bottom: 15px;}
    #section02 .flex-wrap > div.btm{ display: block;}
    #section02 .flex-wrap > div.btm > div{ margin-left: 0; margin-bottom: 15px;}
    #section02 .flex-wrap > div > div{ display: inline-block;}
    #section02 .flex-wrap > div.top .box01, #section02 .flex-wrap > div.btm .box02{ margin-right: 7.5px;}
    #section02 .flex-wrap > div.top .box02, #section02 .flex-wrap > div.btm .box01{ margin-left: 7.5px;}
    #section02 .flex-wrap .box01{ width: calc(50% - 7.5px); height: 42.67vw; }
    #section02 .flex-wrap .box02{ width: calc(50% - 7.5px); height: 42.67vw;}
    #section02 .flex-wrap .box03{ width: 100%; height: 81.33vw; }

}


#section03{ padding: 120px 0; position: relative; text-align: center; background-color: #707070;}
#section03 .flex-wrap{ display: flex; width: 100%; justify-content: center; align-items: center;}
#section03 .flex-wrap .wrap{ width: 380px; border-left: 1px solid rgba(255,255,255,.4);}
#section03 .flex-wrap .wrap:first-child{ border-left: 0;}
#section03 .flex-wrap .wrap svg{ margin-bottom: 20px;}
#section03 .flex-wrap .wrap p{ line-height: 20px;}
#section03 .svg-ani{
    stroke-dasharray: 500px;    
    stroke-dashoffset: 500; 
}
#section03 .svg-ani.active{
    animation: ani 5s linear normal 1 forwards;
}
@keyframes ani {
    0% {
      stroke-dashoffset: 500px;  
    }
    100% {
      stroke-dashoffset: 0;
    }
}

#section03 a.more{ position: relative; }
#section03 a.more .arrow{ position: relative; z-index: 2; padding-left: 10px;}
#section03 a.more .turn{ position: absolute; top: 0; right: 0; top: -6px; right: -12px; opacity: 0; transition: .3s; animation: turn 5s linear normal infinite forwards; z-index: 1;}
#section03 a.more:hover .turn{ opacity: 1;}
@keyframes turn {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section03{ padding: 50px 0; }
    #section03 .flex-wrap{ flex-direction: column;}
    #section03 .flex-wrap .wrap{ width: 100%; border-left: 0; padding-top: 40px;}
    #section03 .flex-wrap .wrap svg{ margin-bottom: 10px; transform: scale(0.8);}
    #section03 .flex-wrap .wrap p{ line-height: 20px;}
    #section03 a.more .turn{ opacity: 1;}

}



#section04{ padding: 120px 0 240px; text-align: center;}
#section04 div.none-mo{ display: flex!important; justify-content: space-between; flex-wrap: wrap;}
#section04 .room-con{ display: block; text-align: left; margin-bottom: 90px;}
#section04 .room-con:nth-child(2), #section04 .room-con:nth-child(5){ padding-top: 100px;}
#section04 .room-con .img-wrap{ position: relative; width: 460px; height: 560px;}
#section04 .room-con .img-wrap:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid rgba(174,173,173,0); transition: .5s; box-sizing: border-box;}
#section04 .room-con:hover .img-wrap:after{ border: 30px solid rgba(174,173,173,.8); }
#section04 .room-con .tit p{ display: inline-block;}
#section04 .room-con .tit p.enM{ letter-spacing: 0.02em;}
#section04 .room-con .tit p.koB{ padding-left: 10px;}
#section04 .room-con ul li{ line-height: 20px;}
#section04 .room-con ul li span{ padding-right: 5px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section04{ padding: 50px 0;}
    #section04 div.none-mo{ display: none!important;}
    #section04 div.none-pc{ display: block!important; width: 100%;}
    #section04 .room-con{ display: inline-block; text-align: left; margin-bottom: 0;}
    #section04 .room-con:nth-child(2), #section04 .room-con:nth-child(5){ padding-top: 0;}
    #section04 .room-con .img-wrap{ width: 100%; height: 98.00vw;}
}



#section06{padding: 120px 0 90px; text-align: center;}
#section06 .flex-wrap{ display: flex!important; flex-wrap: wrap; justify-content: space-between;}
#section06 .fac-con{ display: block; width: 337px; height: 337px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; margin-bottom: 30px;}
#section06 .fac-con .wrap{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.6); display: table; padding: 50px; word-break: keep-all; transition: .3s; opacity: 0; text-align: center;}
#section06 .fac-con .wrap h4{ line-height: 35px; }
#section06 .fac-con .wrap p{ line-height: 20px; }
#section06 .fac-con:hover .wrap{ opacity: 1;}
#section06 div.more{ position: relative; display: inline-block; }
#section06 div.more .arrow{ position: relative; z-index: 2; padding-left: 10px;}
#section06 div.more .turn{ position: absolute; top: 0; right: 0; top: -6px; right: -12px; opacity: 0; transition: .3s; animation: turn 5s linear normal infinite forwards; z-index: 1;}
#section06 .fac-con:hover div.more .turn{ opacity: 1;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section06{ text-align: left; padding: 50px 0;}
    #section06 .flex-wrap{ display: none!important; flex-wrap: wrap; justify-content: space-between;}
    #section06 .none-pc{ display: block!important; width: 100%;}
    #section06 .fac-con{ width: 100%; height: 80.67vw; margin-bottom: 0;}
    #section06 .fac-con .wrap{ padding: 10px; }
    #section06 .fac-con .wrap h4{ line-height: 28px; }
    #section06 .fac-con .wrap p{ line-height: 18px; }
    #section06 .none-pc .btn-wrap{ display: flex; justify-content: space-between;}
    #section06 .none-pc .btn-wrap .fac-con{ width: 42.80vw; height: 42.80vw;}
    #section06 .none-pc .btn-wrap .fac-con .wrap{opacity: 1; padding: 0 10px; }
    #section06 .fac-con div.more .turn{ opacity: 1;}
}



#section07{ width: 100%; height: 0; padding-top: 56.25%; position: relative;}
#section07 iframe{ position: absolute; width: 100%; top: 0; left: 0; height: 100%;}