/* ===============================================================
    * full video
=============================================================== */
.full-video {position: relative; width: 100%; height: 100vh; overflow: hidden;}
.full-video .video-wrap {position: relative; width: 100%; height: 100%; background: #222;}
.full-video .video-wrap iframe {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.full-video .control {position: absolute; bottom: 120px; left: 0; right: 0; margin: 0 auto; width: 170px; text-align: center;}
.full-video .control li {display: inline-block; padding: 0 5px;}
.full-video .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;}
.full-video .control li i {color: #fff;}
.full-video .control .play-pause a.hide{ display: none;}
.full-video .control .mute-onoff a.hide{ display: none;}

.full-video .main-tit {position: absolute; z-index: 10; left: 50%; top: 45%; transform: translate(-50%,-50%); padding-left: 120px; text-shadow: 1px 1px 4px rgba(52, 43, 37, 0.2);}
.full-video .main-tit h2 {font-size: 40px; line-height: 80px;}
.full-video .main-tit h3 {font-size: 80px; line-height: 80px;}
.full-video .main-tit a {margin-top: 50px; width: 180px; height: 50px; line-height: 50px; text-align: center; font-size: 14px; letter-spacing: 0.1em; text-transform: capitalize; border: 1px solid #fff; color: #fff; transition: .4s;}
.full-video .main-tit a:hover {background: #fff; color: var(--color-1);}

.ei-Iframes {position:relative;width: 100%;height: 100vh;overflow: hidden}
.ei-Iframes::before {position:absolute;width:100%;height:100%;content:"";display:block;z-index:2}
.ei-Iframes .iframe {position: relative;width: 100%;height: 100%;display: block;overflow: hidden;z-index: 1}
.ei-Iframes .iframe .video {width: auto;height: auto;min-width: 100%;min-height: 100%;display: block}
.ei-Iframes .iframe .video {position: absolute;top: 50%;left: 50%;transform:translate3d(-50%, -50%, 0);object-fit: cover}
.ei-Iframes .control {position: absolute; z-index: 100; bottom: 120px; left: 0; right: 0; margin: 0 auto; width: 170px; text-align: center;}
.ei-Iframes .control li {display: inline-block; padding: 0 5px;}
.ei-Iframes .control li a {display: block; font-size: 18px; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; border: 2px solid #fff; text-align: center;}
.ei-Iframes .control li i {color: #fff;}
.ei-Iframes .control .play-pause a.hide{ display: none;}
.ei-Iframes .control .mute-onoff a.hide{ display: none;}

.scrollTo {position: absolute; z-index: 10; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 40px; color: #fff; cursor: pointer;}
@media (max-width: 992px){
    .full-video {height: 100vh; overflow: hidden;}
    .full-video .main-tit {top: 50%; padding: 0 15px;}
    .full-video .main-tit h2 {font-size: 20px; line-height: 40px;}
    .full-video .main-tit h3 {font-size: 40px; line-height: 40px;}
    .full-video .main-tit a {margin-top: 30px; width: 125px; height: 35px; line-height: 35px; font-size: 12px;}

    .ei-Iframes {height: 100vh;}
    
    .scrollTo {font-size: 30px; bottom: 15px;}
}

/* ===============================================================
    * video-box
=============================================================== */
.video-box {overflow: hidden;}
.video-top {position: relative; padding-top: 9.38vw;}
.video-top h2 {position: absolute; text-align: right; font-size: 110px; line-height: 117px; top: -20px; left: 0; width: calc(40% - 4vw);}
.video-top .vid-wrap {position: relative; padding-bottom: 6.25vw;}
.video-top .vid-wrap:after {content: ''; position: absolute; top: -6.25vw; bottom: 0; right: 0; width: 50%; background: var(--color-3); z-index: -1;}
.video-top .vid-wrap .width-max {display: flex; justify-content: space-between; align-items: flex-end;}
.video-top .vid-box {position: relative; width: 60%; order: 2;}
.video-top .vid-box:after {content: ''; position: absolute; width: 100%; top: -6.25vw; bottom: -6.25vw; left: -6.25vw; background: var(--color-3); z-index: -1;}
.vid-box .ratio {position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; pointer-events: none;}
.vid-box .ratio iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.video-top .top-txt {order: 1; width: 40%;}
.video-top .top-txt p {font-size: 12px; line-height: 32px; color: #aaa; margin-bottom: 40px;}
.video-top .top-txt span {font-size: 16px; letter-spacing: 0.1em; margin-bottom: 60px; display: block;}

.vid-btm {position: relative; margin-top: 120px;}
.vid-btm:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30%; background: var(--color-3); z-index: -1;}
.vid-btm .width-max {display: flex; justify-content: space-between; align-items: center; background: #fff;}
.vid-btm .vid-box {width: 55%;}
.vid-btm .btm-txt {width: 45%; padding-left: 80px;}
.vid-btm .btm-txt h3 {font-size: 34px; line-height: 48px;}
.vid-btm .btm-txt .line {width: 100px; height: 1px; background: var(--color-1); margin: 40px 0;}
.vid-btm .btm-txt h4 {font-size: 15px; line-height: 30px; color: #444; margin-bottom: 40px;}
.vid-btm .btm-txt p {font-size: 12px; line-height: 24px; color: #afafaf;}
@media (max-width: 992px){
    .video-top {padding-top: 0;}
    .video-top h2 {position: static; font-size: 70px; line-height: 75px; width: 100%; padding: 0 15px;}
    .video-top .vid-wrap {display: block; padding-bottom: 0;}
    .video-top .vid-wrap:after {display: none;}
    .video-top .vid-wrap .width-max {display: block; padding: 0;}
    .video-top .vid-box {width: 100%; padding: 0 15px; margin-top: 30px;}
    .video-top .vid-box:after {top: -60px; bottom: -30px; left: 0; right: 0;}
    .video-top .top-txt {width: 100%; margin-top: 60px; padding: 0 15px;}
    .video-top .top-txt p {font-size: 12px; line-height: 20px; margin-bottom: 30px;}
    .video-top .top-txt span {font-size: 14px;}

    .vid-btm {margin-top: 60px;}
    .vid-btm:after {width: 45px; top: 100px; bottom: -60px;}
    .vid-btm .width-max {display: block; background: none;}
    .vid-btm .vid-box {width: 100%;}
    .vid-btm .btm-txt {width: 100%; padding-left: 0;}
    .vid-btm .btm-txt h3 {font-size: 22px; line-height: 29px; margin-top: 30px;}
    .vid-btm .btm-txt .line {width: 50px; margin: 30px 0;}
    .vid-btm .btm-txt h4 {font-size: 12px; line-height: 20px; margin-bottom: 30px;}
    .vid-btm .btm-txt p {font-size: 12px; line-height: 17px;}

    .vid-box .ratio {pointer-events: initial;}
}

/* ===============================================================
    * main room
=============================================================== */
.main-room {position: relative;}
.main-room:after {content: ''; position: absolute; top: 0; right: 0; width: 600px; height: 156px; background: var(--color-3); z-index: -1;}
.main-room .width-max {position: relative;}
.main-room .tit {position: absolute; top: -60px; right: 0; width: calc(100% / 3);}
.main-room .tit h2 {text-align: right; font-size: 100px;}
.main-room .tit h3 {font-size: 15px; line-height: 30px; color: #444; margin: 70px 0 30px;}
.main-room .tit p {font-size: 12px; line-height: 24px; color: #afafaf; margin-bottom: 60px;}
.main-room .tit .room-ctrl {position: relative; z-index: 100; display: flex; justify-content: flex-start; align-items: center;}
.main-room .tit .room-ctrl .nav-btn {font-size: 28px; margin-right: 40px; color: #777; transition: .4s; cursor: pointer;}
.main-room .tit .room-ctrl .nav-btn:hover {color: var(--color-1);}

.room-container {margin-top: 36px; padding-bottom: 60px;}
.room-container .swiper-slide {display: flex; justify-content: space-between; align-items: flex-end;}
.room-container .imgwrap {width: 60%; height: 770px; overflow: hidden;}
.room-container .imgwrap img {transition: .4s;}
.room-container .txtwrap {position: relative; width: 40%; height: 420px;}
.room-container .txtwrap a {position: absolute; z-index: 100; width: calc(100% + 80px); bottom: -60px; right: 0; background: var(--color-3);}
.room-container .txtwrap .view {position: absolute; right: 0; top: -30px; font-size: 14px; letter-spacing: 0.1em;}
.room-container .txtwrap .box {padding: 60px 60px 30px;}
.room-container .txtwrap .txtbox h3 {font-size: 40px; margin-bottom: 20px;}
.room-container .txtwrap .txtbox h4 {font-size: 18px;}
.room-container .txtwrap .txtbox .unit {position: relative; width: 100%; height: 54px; background: rgba(52,43,37,.1);}
.room-container .txtwrap .txtbox .unit p {position: absolute; text-align: right; left: 60px; right: 40px; top: 50%; transform: translateY(-50%); font-size: 15px; line-height: 18px;}
.room-container .txtwrap .txtbox ul {padding: 30px 60px 0;}
.room-container .txtwrap .txtbox ul li {display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px;}
.room-container .txtwrap .txtbox ul li span {width: 50px; height: 50px; line-height: 50px; border-radius: 50%; text-align: center; border: 1px solid rgba(52,43,37,.4); font-size: 18px;}
.room-container .txtwrap .txtbox ul li div {width: calc(100% - 50px); font-size: 14px; letter-spacing: -0.02em; padding-left: 10px;}

.room-container .swiper-slide:hover .imgwrap img {transform: scale(1.1);}

@media (max-width: 992px){
    .main-room:after {width: calc(100% - 15px); height: 82px;}
    .main-room .tit {position: static; width: 100%;}
    .main-room .tit h2 {font-size: 60px; margin-top: -10px;}
    .main-room .tit h3 {font-size: 14px; line-height: 22px; margin: 30px 0;}
    .main-room .tit p {font-size: 12px; line-height: 19px; margin-bottom: 30px;}
    .main-room .tit .room-ctrl {width: 100%;}
    .main-room .tit .room-ctrl .nav-btn {font-size: 25px; margin-right: 20px;}
    .main-room .tit .room-ctrl .view {position: absolute; right: 0; bottom: 0; font-size: 12px; letter-spacing: 0.1em;}

    .room-container {margin-top: 30px; padding-bottom: 0;}
    .room-container .swiper-slide {display: block;}
    .room-container .imgwrap {width: 100%; height: 235px;}
    .room-container .txtwrap {width: calc(100% - 15px); height: 295px; margin-left: 15px; margin-top: -15px;}
    .room-container .txtwrap a {position: static; width: 100%;}
    .room-container .txtwrap .view {display: none;}
    .room-container .txtwrap .box {padding: 30px 15px;}
    .room-container .txtwrap .txtbox h3 {font-size: 25px; margin-bottom: 10px;}
    .room-container .txtwrap .txtbox h4 {font-size: 12px;}
    .room-container .txtwrap .txtbox .unit {height: 41px;}
    .room-container .txtwrap .txtbox .unit p {left: 15px; right: 15px; font-size: 12px; line-height: 16px;}
    .room-container .txtwrap .txtbox ul {padding: 30px 15px 0;}
    .room-container .txtwrap .txtbox ul li span {width: 35px; height: 35px; line-height: 35px; font-size: 14px;}
    .room-container .txtwrap .txtbox ul li div {width: calc(100% - 35px); font-size: 12px; line-height: 16px;}
}

/* ===============================================================
    * main sv
=============================================================== */
.main-sv h2 {font-size: 24px; letter-spacing: 0.1em; margin-bottom: 80px;}
.main-sv .list {display: flex; justify-content: space-between; align-items: center;}
.main-sv .item {width: calc(50% - 15px);}
.main-sv .item .imgbox {position: relative; width: 100%; height: 450px;}
.main-sv .item .imgbox:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(34,34,34,.7); opacity: 0; transition: .4s;}
.main-sv .item .imgbox img {transition: .4s;}
.main-sv .item .imgbox .btn-more {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; color: #fff; border-color: #fff;}
.main-sv .item .imgbox .btn-more:hover {box-shadow: none;}
.main-sv .txtbox {width: 100%; padding-top: 20px; display: flex; justify-content: flex-start; align-items: center;}
.main-sv .txtbox h3 {font-size: 30px; margin-right: 20px;}
.main-sv .txtbox h4 {font-size: 16px;}
.main-sv .item:hover .imgbox:after {opacity: 1;}
.main-sv .item:hover .btn-more {background: #fff; color: var(--color-1);}
@media (max-width: 992px){
    .main-sv h2 {font-size: 16px; margin-bottom: 40px;}
    .main-sv .item {width: calc(50% - 5px);}
    .main-sv .item .imgbox {height: 90px;}
    .main-sv .item .imgbox:after {display: none;}
    .main-sv .item .imgbox .btn-more {display: none;}
    .main-sv .txtbox {padding-top: 10px; display: block;}
    .main-sv .txtbox h3 {font-size: 16px; margin-right: 0; margin-bottom: 5px;}
    .main-sv .txtbox h4 {font-size: 12px;}
}

.end-video {padding-top: 0;}
.end-video .ratio {position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; pointer-events: none;}
.end-video .ratio iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}