.wow { animation-duration: .7s; animation-name: fadeInUp; } section#productBox {width: 1320px;margin: 0 auto;overflow: initial;} section {position: relative;padding: 1vw 0 42px;} section >.bg {width: 100%;height: 100%;top: 0;left: 0;z-index: 1;opacity: .3;} section >.info {font-size: 0;z-index: 2;} section .title {line-height: 120%;text-align: center;font-family: 'DM Serif Display', serif;font-size: 55px;letter-spacing: 1.5px;} section .more {margin: 60px 0 30px 0;text-align: center;} section .more a {position: relative;padding: 15px 100px;display: inline-block;color: #ffffff;} section .more font {text-align: center;text-transform: uppercase;letter-spacing: 2px;font-size: 16px;font-weight: bold;} section .more a svg.arrow {position: absolute;width: 20px;right: 7px;top: calc((100% - 11.41px) / 2);} section .more.white a {padding: 15px 45px;border: 2px solid #fff;border-radius: 50px;} section .more.white span {right: 30px;position: absolute;width: 80px;height: 1px;background: #000;display: block;right: 0;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;} section .more.white:after { width: 252px; } section .more.white span {position: absolute;width: 80px;height: 1px;background: #5a5a5a;display: block;right: -50px;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;} section .more.white span:before {position: absolute;width: 0;height: 0;border-style: solid;border-width: 0 16px 7px 0;border-color: transparent transparent #ffffff transparent;right: -1px;bottom: 50%;content: "";content: "";background: url(/images/36/news_arrow.svg) no-repeat center / contain;} section .more.white a:after { position: absolute; width: 0; height: 100%; background: #d20320; display: block; top: 0; left: 0; content: ""; z-index: 1; -webkit-transition-duration: .2s; transition-duration: .2s; } section .more.white .news_list_btn { top: 14px;} section .more.white .news_list_btn {transform: translate(50%,-50%);position: absolute;width: 60px;height: 1px;background: #ffffff;display: block;right: -20px;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;display: none;} section .more.white .news_list_btn:after {content: "";left: 50%;height: 0px;width: 0px;position: absolute;top: 50%;transform: translate(10%,-50%);border: 20px solid rgb(236 236 236 / 22%);border-radius: 50px;transition: all .3s;z-index: -1;} section .more.white a::hover .news_list_btn:after { transform: translate(-50%,-50%) scale(1);} section .more.white a:hover .news_list_btn {height: 1px;width: 50px;} #wrap {position: relative;overflow: hidden;} #wrap .wrapBg { position: absolute; z-index: 1; } #wrap .wrapBg.diamond {width: 320px;height: 2210px;background: rgb(0 85 216 / 16%);-webkit-transform: rotate(95deg);-moz-transform: rotate(95deg);transform: rotate(95deg);top: -1180px;right: 40%;} #wrap .wrapBg.diamond.bottombox { width: 1467px; height: 1467px; bottom: -430px; top: auto; } /* bgTxt */ .bgTxt {position: absolute;z-index: 1;} #aboutBox .bgTxt.stitle:after {background: rgb(121 111 99);transition: all ease-in-out .3s;content: "";position: absolute;bottom: -28px;transform: rotate(180deg);width: 100%;height: 19px;display: block;} #productBox .bgTxt.stitle{text-transform: uppercase;-webkit-text-stroke: 1px rgb(167 167 167 / 20%);-webkit-text-fill-color: transparent;display: none;} .bgTxt.stitle {font-size: 120px;color: #796f63;line-height: 50%;text-transform: uppercase;left: -310px;top: 40%;font-weight: 900;} .bgTxt.title { width: 100%; text-align: right; font-size: 140px; color: #edf1f3; } .bg2Txt.stitle {-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;font-size: 120px;font-family: 'DM Serif Display', serif;color: rgb(234 213 186 / 72%);line-height: 50%;text-transform: uppercase;font-weight: 100;-webkit-text-stroke: 1px rgb(167 167 167 / 20%);-webkit-text-fill-color: transparent;} .bg2Txt.title { width: 100%; text-align: right; font-size: 140px; color: #edf1f3; } /* boxTitle */ h2.boxTitle {position: relative;font-weight: normal;} h2.boxTitle font {display: block;font-size: 50px;line-height: 100%;text-transform: uppercase;color: #ffffff;text-align: center;font-weight: 100;letter-spacing: 2.5px;margin-bottom: 10px;} h2.boxTitle span {padding: 0 0px 0px;width: 100%;font-weight: 100;font-size: 17px;top: 10px;letter-spacing: 4.2px;color: #ffffff;} .roomttile{padding: 0px 40px;overflow: hidden;} .roomttile h2 {text-align: center;} .roomttile p {font-size: 64px;letter-spacing: .1em;text-align: center;font-weight: 100;text-transform: uppercase;} #productBox .roomttile p::before {content: '';position: absolute;right: 0px;bottom: 0px;width: 30px;height: 3px;background-color: #4a4a4a;} /* ADvideo */ #ADvideo .bg {opacity: 1.2;} #ADvideo >.info_AD {margin: auto;width: 1600px;} #ADvideo ul {margin-top: 0vw;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;} #ADvideo ul li {position: relative;width: calc(100% / 5 - 20px);margin: 10px;} #ADvideo ul li a {position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 5;} #ADvideo ul li >div {overflow: hidden;position: relative;margin: 0 0px;z-index: 0;border-radius: 30px;} #ADvideo ul li .img:before {position: absolute;width: 100%;height: 100%;background: rgb(0 0 0 / 0%);display: block;top: 0;left: 0;opacity: 0;z-index: 2;content: "";border-radius: 30px;} #ADvideo ul li .img img {position: relative;width: 100%;height: 450px;object-fit: cover;z-index: 1;display: block;width: 100%;-webkit-transition: all 8s linear;-o-transition: all 8s linear;transition: all 8s linear;} #ADvideo ul li:hover:after {opacity: 0} #ADvideo ul li:hover .img img {-webkit-transform: scale(1.4);transform: scale(1.4);} #ADvideo ul li:hover .info_AD h3 {bottom: 30px;opacity: 0;} #ADvideo ul li:hover .info_AD .titleBox {opacity: 0;letter-spacing: 1.2em;} #ADvideo ul li:after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: rgb(17 17 17 / 60%);background: linear-gradient(0deg, rgb(0 0 0)20%, rgb(255 255 255 / 0%)50%);opacity: .7;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;border-radius: 30px;} #ADvideo ul li:after {opacity: .7;} #ADvideo ul li .info_AD {position: absolute;z-index: 1;left: 0;top: 0;right: 0;bottom: 0;background: linear-gradient(to bottom,rgb(0 0 0 / 33%) 0%,rgb(0 0 0 / 17%) 63%,rgb(255 255 255 / 0%) 100%);} #ADvideo ul li .info_AD .price { position: absolute; padding: 5px 15px; background: rgb(0 0 0 / .6); top: -39px; left: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #ADvideo ul li .info_AD .price font { margin: 0 10px; display: inline-block; font-weight: 300; color: #fff; } #ADvideo ul li .info_AD .price font.old { color: rgb(255 255 255 / .4); } #ADvideo ul li .info_AD h3 {margin: 1.2em 0.8em;position: absolute;height: auto;bottom: 50px;left: 0;font-weight: 400;font-size: 38px;line-height: 130%;letter-spacing: .07em;color: #fff;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: horizontal;text-transform: uppercase;} #ADvideo ul li .info_AD .titleBox{z-index: unset;text-align: center;margin: 1.2em 1.8em 2.2em;position: absolute;left: 0;bottom: 0;} #ADvideo ul li .info_AD article {font-size: 19px;color: #fff;letter-spacing: 0.2em;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;display: contents;} #ADvideo ul li .info_AD .project-zoom {position: absolute;left: 50%;top: 50%;width: 9em;height: 9em;margin: -4.5em;border-radius: 50%;border: 1px solid rgb(181 181 181 / 52%);overflow: hidden;opacity: 0;-webkit-transform: scale(.5);-ms-transform: scale(.5);-o-transform: scale(.5);transform: scale(.5);-webkit-transition: all .7s;-o-transition: all .7s;transition: all .7s;} #ADvideo ul li .info_AD .project-zoom:after {content: '';position: absolute;left: 50%;top: 50%;width: 2.625em;height: 2.625em;background: url(/images/37/pd-icon.png) 0 0 no-repeat;background-size: cover;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%)} #ADvideo ul li:hover .project-zoom {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1)} #ADvideo .more {margin-top: 10px;} #ADvideo .more a {position: relative;padding: 0px 60px;border: 1px rgb(255 255 255 / 0%) solid;background-color: rgb(255 255 255 / 0%);display: inline-block;color: #464646;} #ADvideo .more font {text-align: center;color: #3e3e3e;} #ADvideo .more a svg.arrow {position: absolute;width: 20px;right: 7px;top: calc((100% - 11.41px) / 2);} /* newsBox */ #newsBox {margin: 0px auto 0;padding: 0;margin-left: auto;} #newsBox .text-parallax {background: no-repeat 0 0;display: inline-block;position: relative;left: calc(100% - 170px);top: 130px;z-index: 2;} #newsBox .text-parallax-content {line-height: 1;overflow: hidden;left: 0;font-weight: 800;letter-spacing: 1.5px;display: inline-block;position: relative;font-size: 120px;-webkit-text-stroke: 1px rgb(88 88 88);-webkit-text-fill-color: transparent;} #newsBox .info {width: calc(100% - 0px);display: inline-block;vertical-align: text-bottom;} #newsBox .info .tit.row {width: 100%;line-height: 120%;text-align: left;font-size: 45px;color: #ffffff;letter-spacing: 1.5px;padding: 0px 0px 0px 0;z-index: 15;text-transform: uppercase;border-bottom: 1px solid #fff;margin-bottom: 0px;} #newsBox .info .tit.row span{letter-spacing: 3.5px;font-size: 20px;font-weight: bold;line-height: 120%;display: block;} #newsBox .info .tit.row:after {width: 80px;height: 4px;display: block;content: "";margin-top: 35px;background: #fff;} #newsBox .info .more{text-align: right;position: absolute;margin-top: 0px;top: 60px;left: 500px;} #newsBox .info .tit a {display: block;color: #ffffff;font-weight: 100;letter-spacing: 6px;font-size: 50px;text-transform: uppercase;} #newsBox .info .btn font { margin: 0 15px; font-size: 0; display: inline-block; } #newsBox .info .btn font span { margin-left: 10px; display: inline-block; font-weight: 400; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-size: 13px; } #newsBox .info .btn font span:first-child { padding-left: 18.03px; } #newsBox .info ul li {position: relative;font-size: 0;padding: 10px 0 0;} #newsBox .info ul{display: flex;flex-wrap: wrap;justify-content: space-between;} #newsBox .info ul li{position: relative;width:25%;transition: 0.9s;} #newsBox .info ul li:after{content: "";width: calc(1px + 100%);height: calc(1px + 100%);display: block;background:#1a1a1a;position: absolute;z-index: 5;opacity: 0;top: -1px;left: -1px;transition: 0.8s;} #newsBox .info ul li:hover:after{opacity: 0;} #newsBox .info ul li:before{content: "";width: 1px;height: calc(100% - 40px);display: block;background: #cccccc1c;left: 0;bottom: 0;position: absolute;z-index: 1;} #newsBox .info ul li .item{padding:40px;position: relative;z-index: 10;} #newsBox .info ul li .item a.photo {position: absolute;width: calc(100% - 0px);height: calc(100% - 0px);top: 0px;left: 0px;-webkit-transform: translateY(30px);-ms-transform: translateY(30px);transform: translateY(30px);opacity: 0;z-index: -1;} #newsBox .info ul li .item:hover a.photo {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);opacity: 0;} #newsBox .info ul li .date{font-size: 12px;color:#999;display: flex;font-family: 'Montserrat', sans-serif;align-items: center;padding-bottom: 10px;} #newsBox .info ul li:hover .date{color:#fff;} #newsBox .info ul li .date strong{line-height: 40px;padding-right: 10px;font-size: 40px;font-weight: 500;font-family: 'Noto Sans TC';color: #fff;} #newsBox .info ul li .date b{line-height: 15px;font-weight: normal;transform: translateY(0px);font-family: 'Noto Sans TC';line-height: 150%;color: #fff;} #newsBox .info ul li h3{margin-bottom: 20px;} #newsBox .info ul li h3 a{color: #f3f3f3;font-size: 16px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-height: 25px;height: 50px;overflow: hidden;font-weight: bold;} #newsBox .info ul li:hover h3 a{color: #fff;} #newsBox .info ul li p a{color: #ffffff;font-size: 14px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-height: 25px;height: 50px;overflow: hidden;font-weight: 300;} #newsBox .info .btn{padding-top: 50px;} #newsBox .info .btn a{color: rgb(251 251 251);padding: 10px 20px;font-family: 'Montserrat', sans-serif;font-weight: 200;letter-spacing: 1.5px;position: relative;display: inline-block;border: 2px solid #fff;border-radius: 50px;} #newsBox .info .btn a span{position: relative;z-index: 10;font-size: 13px;font-family: 'Lato', 'Noto Sans TC', sans-serif;text-transform: uppercase;font-weight: bold;} #newsBox .info .btn a:hover{color:#fff;padding: 10px 30px;} #newsBox .info .btn a:after{content: "";display:inline-block;opacity: 0;position: relative;transform:translateX(20px);z-index: 11;width: 0;height: 0;border-style: solid;border-width: 4px 0 4px 8px;border-color: transparent transparent transparent #ffffff;transition: 0.6s;} #newsBox .info .btn a:hover:after{opacity: 1;transform:translateX(10px);} /* productBox */ #productBox .bg {opacity: 1.2;} #productBox >.info {margin: 0;} #productBox ul { position: relative; margin-top: 40px; width: 100%; } #productBox ul li {position: relative; overflow: hidden;display: inline-block;vertical-align: top;} #productBox ul li:last-child .info,#productBox ul li:last-child:after{background: none;} #productBox ul li:last-child{border: none;} #productBox ul li:last-child:hover{border: none;} #productBox ul li a {position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 5;} #productBox ul li >div {overflow: hidden;position: relative;margin: 5px;z-index: 0;} #productBox ul li .img img {position: relative;width: 100%;height:100%;object-fit: cover;z-index: 1;display: block;-webkit-transition: all 8s linear;-o-transition: all 8s linear;transition: all 8s linear;} #productBox ul li:hover:after {opacity: 0} #productBox ul li:hover .img img {-webkit-transform: scale(1.4);transform: scale(1.4);} #productBox ul li:hover .info .titleBox {letter-spacing: 4.2px;} #productBox ul li:after {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: rgb(17 17 17 / 60%);opacity: .7;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;} #productBox ul li:after {opacity: .4} #productBox ul li .info {position: absolute;z-index: 1;left: 0;top: 0;right: 0;bottom: 0;background: linear-gradient(to bottom,rgb(76 76 76 / 17%) 0%,rgb(0 0 0 / 17%) 63%,rgb(255 255 255 / 0%) 100%);overflow: overlay;} #productBox ul li .info .price { position: absolute; padding: 5px 15px; background: rgb(0 0 0 / .6); top: -39px; left: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #productBox ul li .info .price font { margin: 0 10px; display: inline-block; font-weight: 300; color: #fff; } #productBox ul li .info .price font.old { color: rgb(255 255 255 / .4); } #productBox ul li .info h3 {margin-bottom: 0px;font-weight: 600;font-size: 34px;line-height: 120%;height: 50px;letter-spacing: .05em;color: #fff;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;} #productBox ul li .info .titleBox{z-index: unset;text-align: right;margin: 1.2em 3.0em 1.2em;position: absolute;z-index: 1;top: 110px;right: 0;bottom: 0;} #productBox ul li .info .titleBox h4{color: #ffffff;text-align: right;font-size: 30px;} #productBox ul li .info .titleBox p{color: #656565;text-align: right;} #productBox ul li .info article {font-size: 18px;color: #fff;letter-spacing: 2.2px;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;display: contents;} #productBox ul li .info h3:after{background: rgb(255 255 255 / 80%);transition: all ease-in-out .3s;content: "";position: absolute;bottom: 32px;transform: rotate(180deg);width: 100%;height: 1px;display: block;} #productBox ul li .info .titleBox p:after {background: rgb(255 255 255 / 26%);transition: all ease-in-out .3s;content: "";position: absolute;bottom: 46px;transform: rotate(180deg);width: 100%;height: 5px;display: block;} #productBox ul li .info .project-zoom {position: absolute;left: 25%;top: 65%;margin: -4.5em;overflow: hidden;opacity: 0;-webkit-transform: scale(.5);-ms-transform: scale(.5);-o-transform: scale(.5);transform: scale(.5);-webkit-transition: all .7s;-o-transition: all .7s;transition: all .7s;} #productBox ul li:hover .project-zoom {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);} #productBox ul li:hover{} #productBox .more {margin-top: 10px;} #productBox .more a {position: relative;padding: 0px 60px;border: 1px rgb(255 255 255 / 0%) solid;background-color: rgb(255 255 255 / 0%);display: inline-block;color: #464646;} #productBox .more font {text-align: center;color: #3e3e3e;} #productBox .more a svg.arrow {position: absolute;width: 20px;right: 7px;top: calc((100% - 11.41px) / 2);} /* aboutBox */ #aboutBox {background: none;z-index: 5;margin: 0vw 0 0vw;padding: 50px 0;} #aboutBox .bg {opacity: 1;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;background-attachment: fixed;} #aboutBox .info {color: #fff;width: 100%;position: relative;overflow: hidden;} #aboutBox .info .info_bg {-webkit-animation: 50s rotate360 infinite linear;animation: 50s rotate360 infinite linear;-webkit-animation-play-state: running;animation-play-state: running;position: absolute;left: 50%;margin-left: -275px;} @-webkit-keyframes rotate360 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate360 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } #aboutBox .info .roomttile {padding: 0 0 40px;} #aboutBox .info h2.boxTitle font{text-align: center;line-height: 120%;display: inline-block;color: #ffffff;font-weight: bold;letter-spacing: 5px;z-index: 3;font-size: 20px;margin-bottom: 0px;position: inherit;} #aboutBox .info h2.boxTitle span{line-height: 20%;font-size: 20px;font-weight: 400;z-index: -1;color: #ffffff;padding: 0;} #aboutBox .info article{width: 600px;margin: auto;color: #dfdfdf;} /* icon */ #ssicon .bxslider{display: flex;justify-content: space-between;flex-direction: row;width: 1140px;margin: auto;position: relative;} #ssicon .bxslider:before {position: absolute;width: 100%;height: 1px;background: rgb(255 255 255 / 14%);display: block;bottom: 90.5px;left: 0;z-index: -1;content: "";} #ssicon .bxslider .sslishTxt{display: flex;flex-direction: column;justify-content: center;align-items: center;} #ssicon .bxslider .sslishTxt a {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;opacity: .3;display: none;} #ssicon .bxslider .sslishTxt img{transition: all 0.5s ease-in-out;opacity: 1;transform: scaleX(-1);width: 140px;} #ssicon .bxslider .sslishTxt:hover img2{-webkit-transform: translateY(-10%);transform: translateY(-10%);animation-name: elementor-animation-buzz-out;animation-duration: .75s;animation-timing-function: linear;animation-iteration-count: 1;} #ssicon .bxslider .sslishTxt:hover .noBox{background-color: rgb(84 164 255);-webkit-transform: translateY(-10%);transform: translateY(-10%);} #ssicon .bxslider .sslishTxt .noBox{width: 22px;height: 22px;text-align: center;border: 1px solid rgb(255 255 255 / 14%);background-color: #011e4d;padding: 7px;border-radius: 50%;position: relative;color: #fff;} #ssicon .bxslider .sslishTxt .ssTxt{margin-top: 20px;} #ssicon .bxslider .sslishTxt .ssTxt article,#ssicon .bxslider .sslishTxt .ssTxt h3{text-align: center;color: #fff;font-weight: 200;} /* news */ #secabout >div {position: relative;} #secabout #customBox ul li article { margin: 3vw 0 5vw; text-align: center; line-height: 190%; color: #1f1f1f; } #secabout #subBox .left {transform: translateX(-560px);width: calc(100% - 180px);height: 100%;top: 0;left: 0;z-index: 3;} #secabout #subBox .right .bgTxt {position: absolute;z-index: 1;} #secabout #subBox .right .bgTxt.stitle {-webkit-writing-mode: vertical-lr;writing-mode: tb-rl;font-size: 160px;font-family: 'DM Serif Display', serif;color: rgb(234 213 186 / 72%);line-height: 50%;text-transform: uppercase;font-weight: 100;top: -9vw;z-index: 3;right: 0px;} #secabout #subBox .right .bgTxt.title { width: 100%; text-align: left; font-size: 140px; color: #edf1f3; } #secabout #subBox .bList .mofd{position: relative;margin: 10px;} #secabout #subBox .bList .photo{background-size: cover;background-repeat: no-repeat;background-position: center;} #secabout #subBox .bList .photo img{height: 600px;} #secabout #subBox .bList .mofd h3{transition: ease .3s;position: absolute;bottom: 0px;left: 0px;width: 100%;height: 60px;text-align: center;line-height: 60px;box-sizing: border-box;border-right: 1px solid #888;} #secabout #subBox .bList .mofd h3 a{color: #fff;display: block;width: 100%;} #secabout #subBox .bList .mofd:hover h3{} @media screen and (max-width:1680px) { #aboutBox .info .title{font-size: 52px;line-height: 100%;} } @media screen and (max-width:1560px) { #aboutBox .bgTxt.stitle {font-size: 96px;letter-spacing: 74.2px;} #ADvideo >.info_AD{width:95%;} } @media screen and (max-width:1441px) { #productBox ul li .info {padding: 25px 5px 40px;width: calc(100% - 10px);} #aboutBox:before{top: 240px;right: 320px;} #aboutBox .info .title1, #aboutBox .info .title{margin: 8px 5vw 0vw 17vw;} #aboutBox .info .txtBox {padding: 2vw 0vw 4vw;} #aboutBox .text-parallax-content{ font-size: 140px;} #aboutBox .text-parallax{left: calc(50% - 170px);} #secabout #subBox .left {transform: translateX(-400px);width: calc(100% - 40px);height: 100%;top: 0;left: 0;z-index: 3;} .bgTxt.stitle{font-size: 70px;} #secabout #subBox .right .bgTxt.stitle{top: -7vw;z-index: 3;right: 0px;font-size: 150px;} #productBox ul li .info h3{} #productBox ul li .info .titleBox{} } @media screen and (max-width:1440px) { #ADvideo ul li .info_AD {padding: 25px 5px 40px;width: calc(100% - 10px);} #ADvideo ul li .info_AD h3{ font-size: 30px; } #ADvideo ul li .info_AD .titleBox{} } @media screen and (max-width:1366px) { #aboutBox .info .title1, #aboutBox .info .title{margin: 8px 0vw 0vw 14vw;} #aboutBox .info .txtBox {padding: 2vw 0vw 3vw;} #secabout #subBox .right{width: 95%;} #newsBox {margin: 0px auto 0;padding: 0;margin-left: auto;} #aboutBox .bgTxt.stitle {font-size: 90px;letter-spacing: 56.2px;} section#productBox{width: 93%;} #ADvideo >.info_AD{width: 95%;margin-top: 30px;} #ADvideo ul li .img img{height: 420px;} } @media screen and (min-width:1281px) { section .more a:hover {} section .more a:hover font { color: #fff; } section .more a:hover svg { fill: #fff; } section .more.white a:hover .news_list_btn:after {border: 0px solid rgb(236 236 236 / 22%);left: 100%;} section .more.white a:hover font {letter-spacing: 3.5px;} section .more.white a:hover svg { fill: #1f1f1f; } #productBox ul li:hover .img:before , #bookBox .list ul li:hover .img:before {opacity: 1;} #secabout #subBox .right{position: initial;width: 1280px;z-index: 2;margin: auto;} #ADvideo ul li:hover .img:before { opacity: 1; } } @media screen and (max-width:1280px) { #bookBox .list ul li .img { margin: 0 20px 0 60px; } #secabout #subBox .left {transform: translateX(-330px);width: calc(100% - 0px);} #aboutBox .text-parallax-content{font-size: 150px;} #newsBox {margin: 30px;} #newsBox .text-parallax-content{font-size: 110px;} #aboutBox:before {right: 244px;} #aboutBox .bgTxt.stitle {font-size: 82px;letter-spacing: 56.2px;top: -6%;left: 0px;} #aboutBox .info {width: 90%;} #aboutBox .info .title1, #aboutBox .info .title{margin: 8px 5vw 0vw 12vw;} #aboutBox .info .txtBox {} #aboutBox .info .txtBox b{ margin-left: 0px;} } @media (max-width: 1180px) { } @media screen and (max-width:1140px) { #ADvideo ul li .img img{height: 480px;} #ADvideo ul li .info_AD h3{margin: 1.2em 0.9em 1.2em;font-size: 27px;} #ADvideo ul li .info_AD .titleBox{margin: 1.2em 1.5em 2.2em;} #ADvideo ul li .info_AD article{font-size: 20px;} #ssicon .bxslider{width: 95%;} } @media screen and (min-width:1025px) { #productBox ul { padding-top: 355px; display: grid; grid-template-columns: 40% 60%; grid-template-areas: "item1 item3" "item2 item3"; } #productBox ul li:nth-child(1) , #productBox ul li:nth-child(2) { position: absolute; width: 50%; height: 350px; top: 0; left: 0; } #productBox ul li:nth-child(2) { left: auto; right: 0; } #productBox ul li:nth-child(3) { grid-area: item1; } #productBox ul li:nth-child(4) { grid-area: item2; } #productBox ul li:nth-child(5) { grid-area: item3; } #productBox ul li:nth-child(5) .img { position: absolute; width: calc(100% - 10px); height: calc(100% - 10px); } } @media screen and (max-width:1024px) { #ADvideo ul li{width: calc(100% / 3 - 20px);} section .more a { padding: 10px 80px 10px 20px; } #secabout #subBox .right {width: 100%;right: 0px;top: 0;position: initial;} #aboutBox .bg {width: 100%;height: calc(100% - (12vw + 54px));top: calc(7vw + 54px);z-index: 1;position: initial;display: block;} #aboutBox .info .txtBox {padding: 3vw 1vw 5vw 2vw;background: none;} #aboutBox .info .txtBox h3{text-align: left;} #aboutBox .info:after,#aboutBox:before{display: none;} #secabout:before { width: 90vw; } #secabout #customBox { width: 70vw; } #secabout #subBox .left {transform: translateX(0px);width: calc(100% - 0px);} #secabout #subBox .bList .photo img{height: 360px;} #aboutBox .info {width: 100%;} #aboutBox .info .txtBox b{width: 60%;} #aboutBox .text-parallax{left: calc(100% - 170px);} #aboutBox .info .txtBox .more{margin-top: 30px;} #aboutBox{margin: 0vw 0 0px;padding: 2vw 0 0px;} #aboutBox .bgTxt.stitle {display: none;} #aboutBox .text-parallax-content{font-size: 100px;} #ADvideo >.info_AD,section#productBox{width: 90%;} } @media screen and (max-width:980px) { #secabout:before { width: 0; } #secabout #customBox { width: 90vw; } #bookBox { padding-bottom: 5vw; } #bookBox .info { padding-bottom: 90px; } #bookBox .topBox , #bookBox .topBox .title { position: initial; } #bookBox .topBox .more { position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; } #ADvideo ul li .info_AD h3{margin: 36px;font-size: 26px;} #ADvideo ul li .info_AD .titleBox{margin: 10px 34px 40px;} } @media screen and (max-width:768px) { #ADvideo ul li{width: calc(50% - 20px);} #bookBox .list ul li .img { margin: 0 0 0 100px; } #bookBox .list ul li .img img { height: 55vw; } #secabout #subBox .bList .photo img{height: 240px;} .newsArea ul li{width: 50%;} .newsArea ul li:before {width: 100%;height: 1px;} #aboutBox .bg{background-attachment: inherit;} h2.boxTitle font,h2.boxTitle span{text-align: center;display: block;} #aboutBox .info h2.boxTitle font,#aboutBox .info h2.boxTitle span{font-size: 16px;} #ssicon .bxslider{width: 95%;display: flex;flex-direction: row;flex-wrap: wrap;} #ssicon .bxslider .ssDate{width: 50%;} #ssicon .bxslider:before{background: rgb(255 255 255 / 0%);} #productBox .roomttile h2{display: flex;flex-direction: column;} #newsBox .info .tit a{font-size: 36px;} h2.boxTitle font{font-size: 36px;} .roomttile p {position: relative;float: inherit;text-align: center;font-size: 45px;} } @media screen and (max-width:640px) { #ADvideo ul li .img img {height: 430px;} #bookBox .list ul li .img , #bookBox .list ul li:nth-child(2n) .img { margin: 0 5vw; } #bookBox .list ul li .info , #bookBox .list ul li:nth-child(2n) .info { margin: -10% auto 0; width: 70%; } #secabout #subBox .bList .photo img{height: 380px;} .bgTxt.stitle,#aboutBox .info .txtBox .longbar{display: none;} #aboutBox .info .txtBox b{width: 86%;} .newsArea ul li{width: 100%;} #aboutBox:after,.bg2Txt.stitle{display: none;} #aboutBox .info h2.boxTitle span{left: 30%;} #aboutBox .info .roomttile{padding: 10px 40px 30px 40px;} #aboutBox .info .world_con .service{width: 100%;margin-right: 6%;} #aboutBox .info .world_con .service.box1{width: 100%;margin-bottom: 10%;} #aboutBox .info .world_con .service h3{text-align: center;} #aboutBox .info .world_con .service.box1 .memo{padding: 30px 0 20px;text-align: center;font-size: 17px;} #aboutBox .info .world_con .service.box1 h3{display: none;} #aboutBox .info .world_con .service.box1 .memo::before{left: 45%;bottom: 60px;} #newsBox .info .btn{padding-top: 20px;} section{padding: 5vw 0 0px;} #aboutBox .info .info_bg{left: 50%;margin-left: -185px;} #aboutBox .info article{width: 83%;} } @media screen and (max-width:480px) { #ADvideo ul li{width: calc(100% - 20px);} .bgTxt.stitle{display: none;} #newsBox {margin: 0 auto 0;padding: 27px;} #newsBox .text-parallax{left: calc(100% - 100px);top: 100px;} #newsBox .text-parallax-content {font-size: 80px;} #newsBox .info .tit a {font-size: 35px;line-height: 120%;} footer #footergooglemap #page-form h2{font-size: 35px;line-height: 120%;margin: 0px 0 20px;} #aboutBox .info .title1, #aboutBox .info .title{margin: 8px 5vw 0vw 7vw;} #aboutBox .info .title{font-size: 43px;} #aboutBox .info .txtBox {padding: 1vw 0vw 7vw 0vw;} } @media screen and (max-width:375px) { #newsBox .text-parallax-content {font-size: 60px;} #newsBox .text-parallax{top: 100px;left: calc(100% - 80px);} #newsBox .info{width: calc(100% - 0px);} }