* {padding: 0; margin: 0; list-style: none}
html, body {height: 100%}
a {text-decoration: none; outline: none; transition: all .2s ease-in-out}
div {font-family: "Jost", sans-serif; font-optical-sizing: auto; font-style: normal}
b, strong {font-weight: 500}
img {border: 0}
.clear {clear: both}
.left {float: left}
.right {float: right}
.center {text-align: center}
@media (max-width: 700px) {
html {font-size: .8px; line-height: 1.5}
.page {position: relative}
.menu-hide {cursor: pointer; position: fixed; top: 10rem; right: 10rem; z-index: 200; transition: all .2s ease-in-out}
.open {width: 20%; height: 100vh}
.menu {position: fixed; top: 0; left: 0; width: 80%; height: 100%; z-index: 100; display: flex; align-items: center; justify-content: center; font-size: 20rem; line-height: 60rem; font-weight: 500; text-transform: uppercase; transition: all .2s ease-in-out; background: #fff; border-top-right-radius: 20px; border-bottom-right-radius: 20px; transform: translateX(-100%); overflow: hidden}
.menu ul {display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 5vw}
.showmenu {transform: translateX(0) !important; box-shadow: 0 0 40rem 0 rgba(0,0,0,0.2)}
.full {height: 100%; position: relative}
.top {width: 100%; height: 50%; position: absolute; top: 0; left: 0; z-index: 10; text-align: center}
.top h1 {font-weight: 300; color: #000; text-align: center; font-size: 6vw; line-height: 8vw; padding: 2% 5%; background: rgba(255,255,255,0.7)}
.logo {display: block; padding-top: 8vh; margin: 0 auto 3vh auto; width: 70%; height: auto}
.circle {display: none}
.slider {width: 100%; height: 100vw; position: absolute; top: calc(50% - 50vw); right: 0; z-index: 5; overflow: hidden}
.slider:before {content: ""; display: block; width: 100%; height: 28vh; position: absolute; top: 0; left: 0; background: url(img/bgm.png) repeat-x; background-size: contain; z-index: 80}
.slider:after {content: ""; display: block; width: 100%; height: 50%; position: absolute; top: 0; left: 0; z-index: 70; background: url(img/shadow-v.png) repeat-x; background-size: contain}
.welcome {background: rgba(255,216,2,.8); position: absolute; left: 0; bottom: 0; z-index: 15; width: 90%; height: 30vh; display: flex; align-items: center; justify-content: center; font-size: 4.2vw; color: #000; font-weight: 500; line-height: 5vh}
.welcome:after {content: ""; display: block; width: 4vw; height: 100%; position: absolute; top: 0; left: 100%; margin-left: 10rem; background: rgba(255,216,2,.8)}
.welcome:before {content: ""; display: block; width: 52vw; height: 30vw; background: url(img/dots.png) no-repeat; background-size: contain; position: absolute; left: 82%; top: 11vh; z-index: 10}
.content {font-size: 21rem; line-height: 33rem; color: #3e3e3e; font-weight: 300}
.content h2 {font-weight: 400; color: #000; font-size: 44rem; line-height: 54rem; position: relative; margin-bottom: 50rem; padding: 20rem 0}
.content h2:before {content: ""; display: block; width: 10rem; height: 100%; background: #ffe035; position: absolute; top: 0; left: 16rem; z-index: 1}
.content h3 {font-weight: 500; color: #000; font-size: 40rem; line-height: 1.3; margin-bottom: 50rem; border-bottom: 2px solid #ffe035; padding-bottom: 40rem}
.main {position: relative; margin: 120rem 8% 130rem 8%}
.more {width: 320rem; display: block; line-height: 75rem; border-bottom: 4rem solid #ffe035; margin: 50rem auto 0 auto; text-align: center; color: #000; font-size: 22rem; text-transform: uppercase; position: relative; font-weight: 500}
.foto {height: 60vw; margin: 100rem auto 0 auto; position: relative}
.foto-1 {width: 80%; height: 55vw; position: absolute; top: 0; left: 0; z-index: 1}
.foto-2 {width: 135rem; height: 215rem; position: absolute; bottom: 0; right: 0; z-index: 2; box-shadow: 0 0 50rem 0 rgba(0, 0, 0, .2); animation: foto 3s linear infinite}
.gray {background: #f6f6f6; padding: 90rem 0; position: relative}
.gray:after {content: ""; display: block; width: 50%; height: 10rem; background: #ffe035; position: absolute; top: 100%; right: 0}
.about {padding: 0 8%; text-align: center; font-size: 22rem}
.list {display: flex; flex-direction: column; align-items: center; margin-top: 90rem}
.box {display: block; width: 400rem; height: 300rem; position: relative; margin-bottom: 30rem}
.box span {display: block; position: absolute; top: 0; left: 0; z-index: 2; background: #fff; border-bottom-right-radius: 50%; width: 220rem; height: 100%; padding-left: 40rem; overflow: hidden; font-size: 25rem; font-weight: 400; line-height: 32rem; color: #000; text-align: left}
.box span .ico {width: auto; height: 70rem; display: block; margin: 35rem 0 25rem 0}
.box span strong {display: block; font-size: 40rem; line-height: 1.3; margin-bottom: 15rem}
.box-img {display: block; width: auto; height: 100%; float: right; position: relative; z-index: 1}
.flex {display: flex; margin: 0 5rem; justify-content: space-between; flex-wrap: wrap}
.comments {padding: 100rem 8%; background: url(img/bgq.jpg); background-size: cover; margin-bottom: 50rem}
.feae {justify-content: flex-start}
.feas {justify-content: flex-end}
.feae .com {margin: 0 40rem 40rem 0}
.feas .com {margin: 0 0 40rem 40rem}
.com span {background: #f6f6f6; font-size: 18rem; font-weight: 300; line-height: 23rem; color: #4e4e4e; display: block; padding: 25rem; position: relative; margin-bottom: 15rem}
.com strong {color: #000; text-transform: uppercase; font-size: 16rem}
.com-1 {width: 555rem}
.com-2 {width: 415rem}
.com-3 {width: 265rem}
.com-4 {width: 400rem}
.com-5 {width: 310rem}
.com-6 {width: 480rem}
.com-title {margin-bottom: 80rem}
.mores {display: flex; justify-content: center; flex-direction: column; align-items: center}
.mores .more {margin-left: 25rem; margin-right: 25rem; font-size: 17rem}
.contact {margin: 0 8% 120rem 8%; font-size: 20rem}
.contact-flex {display: flex; margin-top: 60rem; flex-direction: column; align-items: center}
.adr {font-size: 24rem; line-height: 40rem}
.adr .map {display: block; width: 100%; height: auto}
.adr-pad {padding: 45rem 0 0 25rem}
.adr ol {margin: 50rem 0 0 0; font-size: 28rem; font-weight: 400; line-height: 50rem}
.adr li {padding-left: 45rem}
.sub {height: 70vw}
.sub .top {height: calc(30vw - 95rem)}
.sub:after {content: ""; display: block; position: absolute; top: 100%; left: 0; height: 60rem; background: #f9f9f9; width: 100%}
.sub .slider {height: 100%; top: 0}
.txt {margin: 100rem 8%}
.ib {display: block; max-width: 100%; height: auto; width: auto; margin: 80rem auto}
.sq {display: flex; flex-wrap: wrap; justify-content: center; counter-reset: counter; padding: 30rem 0 0 0}
.sq li {width: 45%; margin: 30rem .5%; padding: 50rem 2% 40rem 2%; background: #f9f9f9; font-size: 21rem; font-weight: 400; color: #000; text-align: center; position: relative}
.sq li:after {counter-increment: counter; content: counter(counter); display: block; position: absolute; top: 0; left: 50%; text-align: center; width: 60rem; height: 60rem; line-height: 60rem; font-size: 36rem; font-weight: 600; border-radius: 100%; border: 3rem solid #ffe035; transform: translate(-50%,-50%); background: #fff}
.content h4 {font-weight: 500; color: #000; font-size: 32rem; line-height: 1.3; margin-bottom: 50rem}
.adv {display: flex; flex-wrap: wrap; justify-content: center}
.adv li {width: 48%; margin: 3% 1%; text-align: center; font-weight: 500; color: #000}
.adv li img {display: block; width: 140rem; height: 140rem; border-radius: 100%; border: 3rem solid #ffe035; margin: 0 auto 20rem auto}
.txt ul {margin: 40rem 0}
.txt ul li {padding-left: 25rem; position: relative; color: #000; font-weight: 400; margin-bottom: 10rem}
.txt ul li:before {content: ""; display: block; width: 2px; height: 12rem; border-left: 3rem solid #ffe035; border-right: 3rem solid #ffe035; position: absolute; top: 10rem; left: 0}
.photos {margin: 100rem -1% 90rem -1%}
.photos .gal {display: block; width: 23%; height: 18vw; margin: 1%; float: left; overflow: hidden}
.photos .gal:first-child {width: 98%; height: 60vw}
.flex-img {display: flex; margin: 80rem 0; justify-content: space-between; flex-direction: column}
.fi {width: 100%; height: 60vw; margin-bottom: 2vw}
.icos {display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 60rem}
.icos li {width: 45%; margin: 2%; text-align: center; font-weight: 500; color: #000; font-size: 30rem; line-height: 36rem}
.icos span {width: 150rem; height: 150rem; background: #80ba24; display: flex; align-items: center; justify-content: center; border-radius: 100%; margin: 0 auto 30rem auto}
.icos span img {display: block; width: 80rem; height: auto}
.fis {width: 100%}
.fis img {display: block; width: 100%; height: auto}
.offer {display: flex; flex-direction: column; margin: 60rem 0 0 0; justify-content: center}
.offer-box {display: block; width: 100%; margin: 0 0 10rem 0; background: #f9f9f9}
.offer-box i {display: block; height: 260rem}
.offer-box span {display: block; padding: 30rem}
.offer-box strong {font-size: 22rem; color: #000}
.offer-box ul {margin: 20rem 0 0 0}
.foto1 {float: left; width: 49%; height: 60vw; margin-right: 2%; margin-bottom: 3vw}
.foto2 {float: left; width: 49%; height: 60vw; margin-bottom: 3vw}
.foto3 {width: 100%; height: 50vw}
.rdesc {clear: both; width: 100%; padding: 30rem 0}
.rdesc table {width: 100%; border: 0; border-collapse: collapse; text-align: left; border-top: 2px solid #343434}
.rdesc th, .rdesc td {padding-top: 5rem; padding-bottom: 5rem; border-bottom: 1px solid #ddd}
.rdesc th {font-weight: 500; vertical-align: top; padding-right: 15rem}
.back {display: block}
.slides li {height: 60vw}
.r-desc {margin: 40rem 0}
}
@media (min-width: 701px) and (max-width: 1000px) {
html {font-size: .8px; line-height: 1.5}
.page {position: relative}
.menu-hide {cursor: pointer; position: fixed; top: 10rem; right: 10rem; z-index: 200; transition: all .2s ease-in-out}
.open {width: 40%; height: 100vh}
.menu {position: fixed; top: 0; left: 0; width: 60%; height: 100%; z-index: 100; display: flex; align-items: center; justify-content: center; font-size: 20rem; line-height: 70rem; font-weight: 500; text-transform: uppercase; transition: all .2s ease-in-out; background: #fff; border-top-right-radius: 20px; border-bottom-right-radius: 20px; transform: translateX(-100%); overflow: hidden}
.menu:before {content: ""; display: block; width: 70%; padding-bottom: 25%; position: absolute; top: 5%; left: 15%; background: url(img/logo.png) center no-repeat; background-size: contain}
.menu ul {display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 5vw}
.showmenu {transform: translateX(0) !important; box-shadow: 0 0 40rem 0 rgba(0,0,0,0.2)}
.full {height: 100%; position: relative}
.top {width: 100%; height: 50%; position: absolute; top: 0; left: 0; z-index: 10; text-align: center}
.top h1 {font-weight: 300; color: #000; text-align: center; font-size: 4vw; line-height: 8vw; display: inline-block; padding: 0 5%; background: rgba(255,255,255,0.7)}
.logo {display: block; padding-top: 7vh; margin: 0 auto 4vh auto; width: 50%; height: auto}
.circle {display: none}
.slider {width: 100%; height: 100vw; position: absolute; top: calc(50% - 50vw); right: 0; z-index: 5; overflow: hidden}
.slider:before {content: ""; display: block; width: 100%; height: 34vh; position: absolute; top: 0; left: 0; background: url(img/bgm.png) repeat-x; background-size: contain; z-index: 80}
.slider:after {content: ""; display: block; width: 100%; height: 25vw; position: absolute; top: 0; left: 0; z-index: 70; background: url(img/shadow-v.png) repeat-x; background-size: contain}
.welcome {background: rgba(255,216,2,.8); position: absolute; left: 0; bottom: 0; z-index: 15; width: 70%; height: 30vh; display: flex; align-items: center; justify-content: center; font-size: 3vw; color: #000; font-weight: 500; line-height: 5vh}
.welcome:after {content: ""; display: block; width: 4vw; height: 100%; position: absolute; top: 0; left: 100%; margin-left: 10rem; background: rgba(255,216,2,.8)}
.welcome:before {content: ""; display: block; width: 26vw; height: 15vw; background: url(img/dots.png) no-repeat; background-size: contain; position: absolute; left: 93.5%; top: 14vh; z-index: 10}
.content {font-size: 21rem; line-height: 33rem; color: #3e3e3e; font-weight: 300}
.content h2 {font-weight: 400; color: #000; font-size: 50rem; line-height: 56rem; position: relative; margin-bottom: 50rem; padding: 20rem 0}
.content h2:before {content: ""; display: block; width: 10rem; height: 100%; background: #ffe035; position: absolute; top: 0; left: 16rem; z-index: 1}
.content h3 {font-weight: 500; color: #000; font-size: 40rem; line-height: 1.3; margin-bottom: 50rem; border-bottom: 2px solid #ffe035; padding-bottom: 40rem}
.main {position: relative; margin: 140rem 8% 130rem 8%}
.more {width: 320rem; display: block; line-height: 75rem; border-bottom: 4rem solid #ffe035; margin: 50rem auto 0 auto; text-align: center; color: #000; font-size: 22rem; text-transform: uppercase; position: relative; font-weight: 500}
.foto {height: 60vw; margin: 100rem auto 0 auto; position: relative}
.foto-1 {width: 80%; height: 55vw; position: absolute; top: 0; left: 0; z-index: 1}
.foto-2 {width: 270rem; height: 430rem; position: absolute; bottom: 0; right: 0; z-index: 2; box-shadow: 0 0 50rem 0 rgba(0, 0, 0, .2); animation: foto 3s linear infinite}
.gray {background: #f6f6f6; padding: 90rem 0; position: relative}
.gray:after {content: ""; display: block; width: 50%; height: 10rem; background: #ffe035; position: absolute; top: 100%; right: 0}
.about {padding: 0 8%; text-align: center; font-size: 22rem}
.list {display: flex; flex-direction: column; align-items: center; margin-top: 90rem}
.box {display: block; width: 550rem; height: 340rem; position: relative; margin-bottom: 30rem}
.box span {display: block; position: absolute; top: 0; left: 0; z-index: 2; background: #fff; border-bottom-right-radius: 50%; width: 295rem; height: 100%; padding-left: 40rem; overflow: hidden; font-size: 28rem; font-weight: 400; line-height: 36rem; color: #000; text-align: left}
.box span .ico {width: auto; height: 70rem; display: block; margin: 45rem 0 30rem 0}
.box span strong {display: block; font-size: 50rem; line-height: 1.3; margin-bottom: 15rem}
.box-img {display: block; width: auto; height: 100%; float: right; position: relative; z-index: 1}
.flex {display: flex; margin: 0 5rem; justify-content: space-between; flex-wrap: wrap}
.comments {padding: 100rem 8%; background: url(img/bgq.jpg); background-size: cover; margin-bottom: 50rem}
.feae {justify-content: flex-start}
.feas {justify-content: flex-end}
.feae .com {margin: 0 40rem 40rem 0}
.feas .com {margin: 0 0 40rem 40rem}
.com span {background: #f6f6f6; font-size: 18rem; font-weight: 300; line-height: 23rem; color: #4e4e4e; display: block; padding: 25rem; position: relative; margin-bottom: 15rem}
.com strong {color: #000; text-transform: uppercase; font-size: 16rem}
.com-1 {width: 555rem}
.com-2 {width: 415rem}
.com-3 {width: 265rem}
.com-4 {width: 400rem}
.com-5 {width: 310rem}
.com-6 {width: 480rem}
.com-title {margin-bottom: 80rem}
.mores {display: flex; justify-content: center}
.mores .more {margin-left: 25rem; margin-right: 25rem; font-size: 17rem}
.contact {margin: 0 8% 120rem 8%; font-size: 20rem}
.contact-flex {display: flex; margin-top: 60rem; flex-direction: column; align-items: center}
.adr {font-size: 26rem; line-height: 40rem}
.adr .map {display: block; width: 60vw; height: auto}
.adr-pad {padding: 45rem 0 0 25rem}
.adr ol {margin: 50rem 0 0 0; font-size: 34rem; font-weight: 400; line-height: 50rem}
.adr li {padding-left: 45rem}
.sub {height: 55vw}
.sub .top {height: calc(30vw - 95rem)}
.sub:after {content: ""; display: block; position: absolute; top: 100%; left: 0; height: 60rem; background: #f9f9f9; width: 100%}
.sub .slider {height: 100%; top: 0}
.txt {margin: 100rem 8%}
.ib {display: block; max-width: 100%; height: auto; width: auto; margin: 80rem auto}
.sq {display: flex; flex-wrap: wrap; justify-content: center; counter-reset: counter; padding: 30rem 0 0 0}
.sq li {width: 28.333%; margin: 30rem .5%; padding: 50rem 2% 40rem 2%; background: #f9f9f9; font-size: 21rem; font-weight: 400; color: #000; text-align: center; position: relative}
.sq li:after {counter-increment: counter; content: counter(counter); display: block; position: absolute; top: 0; left: 50%; text-align: center; width: 60rem; height: 60rem; line-height: 60rem; font-size: 36rem; font-weight: 600; border-radius: 100%; border: 3rem solid #ffe035; transform: translate(-50%,-50%); background: #fff}
.content h4 {font-weight: 500; color: #000; font-size: 32rem; line-height: 1.3; margin-bottom: 50rem}
.adv {display: flex; flex-wrap: wrap; justify-content: center}
.adv li {width: 28%; margin: 1%; text-align: center; font-weight: 500; color: #000}
.adv li img {display: block; width: 140rem; height: 140rem; border-radius: 100%; border: 3rem solid #ffe035; margin: 0 auto 20rem auto}
.txt ul {margin: 40rem 0}
.txt ul li {padding-left: 45rem; position: relative; color: #000; font-weight: 400; margin-bottom: 10rem}
.txt ul li:before {content: ""; display: block; width: 2px; height: 12rem; border-left: 3rem solid #ffe035; border-right: 3rem solid #ffe035; position: absolute; top: 10rem; left: 20rem}
.photos {margin: 100rem -1% 90rem -1%}
.photos .gal {display: block; width: 23%; height: 18vw; margin: 1%; float: left; overflow: hidden}
.photos .gal:first-child {width: 48%; height: 38vw}
.flex-img {display: flex; margin: 80rem 0; justify-content: space-between}
.fi {width: 49%; height: 30vw}
.icos {display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 60rem}
.icos li {width: 28%; margin: 2%; text-align: center; font-weight: 500; color: #000; font-size: 30rem; line-height: 36rem}
.icos span {width: 150rem; height: 150rem; background: #80ba24; display: flex; align-items: center; justify-content: center; border-radius: 100%; margin: 0 auto 30rem auto}
.icos span img {display: block; width: 80rem; height: auto}
.fis {width: 24%}
.fis img {display: block; width: 100%; height: auto}
.offer {display: flex; flex-wrap: wrap; margin: 60rem -1% 0 -1%; justify-content: center}
.offer-box {display: block; width: 48%; margin: 1%; background: #f9f9f9}
.offer-box i {display: block; height: 260rem}
.offer-box span {display: block; padding: 30rem}
.offer-box strong {font-size: 22rem; color: #000}
.offer-box ul {margin: 20rem 0 0 0}
.rfoto {float: left}
.foto1 {width: 44%; height: 60vw; margin-right: 3%}
.foto2 {width: 53%; height: 34vw; margin-bottom: 3vw}
.foto3 {display: none}
.rdesc {float: left; width: 53%}
.rdesc table {width: 100%; border: 0; border-collapse: collapse; text-align: left; border-top: 2px solid #343434}
.rdesc th, .rdesc td {padding-top: 5rem; padding-bottom: 5rem; border-bottom: 1px solid #ddd}
.rdesc th {font-weight: 500; vertical-align: top; padding-right: 15rem}
.back {display: block}
.slides li {height: 40vw}
.r-desc {margin: 50rem 0}
}
@media (min-width: 1001px) {
html {font-size: .65px; line-height: 1.5}
.page {width: 1500rem; margin: auto; position: relative}
.menu-hide {display: none}
.pad {position: fixed; top: 0; left: 0; height: 75rem; z-index: 40; width: 100%}
.menu {display: block !important; position: fixed; top: 0; left: 0; width: 100%; height: 95rem !important; z-index: 50; transition: all .2s ease-in-out}
.menu ul {display: flex; height: 100%; font-size: 18rem; line-height: 70rem; text-transform: uppercase; font-weight: 500; justify-content: center}
.menu li {height: 100%; margin: 0 1.5vw}
.smaller {height: 75rem !important; background: #fff; box-shadow: 0 0 50rem 0 rgba(0, 0, 0, .2)}
.full {height: 100%; position: relative; margin-bottom: 100rem}
.full:before {content: ""; display: block; width: 100%; height: 34vh; position: absolute; top: 0; left: 0; background: url(img/bgm.png) repeat-x; background-size: contain; z-index: 8}
.top {width: 34%; height: calc(70vh - 95rem); position: absolute; top: 95rem; left: 6%; z-index: 10; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center}
.top h1 {font-weight: 300; color: #000; text-align: center; font-size: 2.1vw; line-height: 1}
.logo {display: block; margin: 0 auto 5vh auto; width: 85%; height: auto}
.circle {width: 24vw; height: 24vw; border-radius: 100%; position: absolute; top: 7vh; left: -2.5vw; z-index: 1}
.circle:before {content: ""; display: block; width: 100%; height: 100%; border-radius: 100%; position: absolute; top: -1.25vw; left: -1.25vw; z-index: 10; border: 1.25vw solid #fff9d7}
.circle:after {content: ""; display: block; width: 100%; height: 100%; border-radius: 100%; position: absolute; top: -4.5vw; left: -4.5vw; z-index: 5; border: 4.5vw solid #fafafa}
.slider {width: 60%; height: 100%; position: absolute; top: 0; right: 0; z-index: 5; overflow: hidden}
.slider:before {content: ""; display: block; width: 10%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; background: url(img/shadow.png) repeat-y; background-size: contain}
.welcome {background: rgba(255,216,2,.8); position: absolute; left: 0; bottom: -100rem; z-index: 15; width: 52%; height: 30vh; padding-bottom: 100rem; display: flex; align-items: center; justify-content: center; font-size: 1.7vw; color: #000; font-weight: 500; line-height: 5vh}
.welcome:after {content: ""; display: block; width: 2.2vw; height: 100%; position: absolute; top: 0; left: 100%; margin-left: 10rem; background: rgba(255,216,2,.8)}
.welcome:before {content: ""; display: block; width: 13.6vw; height: 7.5vw; background: url(img/dots.png) no-repeat; background-size: contain; position: absolute; left: 93.5%; top: 19.5vh; z-index: 10}
.content {font-size: 19rem; line-height: 30rem; color: #3e3e3e; font-weight: 300}
.content h2 {font-weight: 400; color: #000; font-size: 50rem; line-height: 56rem; position: relative; margin-bottom: 50rem; padding: 20rem 0}
.content h2:before {content: ""; display: block; width: 10rem; height: 100%; background: #ffe035; position: absolute; top: 0; left: 16rem; z-index: 1}
.content h3 {font-weight: 500; color: #000; font-size: 40rem; line-height: 1.3; margin-bottom: 50rem; border-bottom: 2px solid #ffe035; padding-bottom: 40rem}
.main {position: relative; margin: 140rem 80rem 130rem 85rem; padding-left: 780rem}
.more {width: 320rem; display: block; line-height: 75rem; border-bottom: 4rem solid #ffe035; margin-top: 50rem; text-align: center; color: #000; font-size: 22rem; text-transform: uppercase; position: relative; font-weight: 500}
.foto {position: absolute; top: 0; left: 0; width: 680rem; height: 100%}
.foto-1 {width: 500rem; height: 500rem; position: absolute; top: 0; left: 0; z-index: 1}
.foto-2 {width: 270rem; height: 430rem; position: absolute; bottom: 0; right: 0; z-index: 2; box-shadow: 0 0 50rem 0 rgba(0, 0, 0, .2); animation: foto 3s linear infinite}
.gray {background: #f6f6f6; padding: 90rem 0; position: relative}
.gray:after {content: ""; display: block; width: 2000rem; height: 10rem; background: #ffe035; position: absolute; top: 100%; left: 50%; margin-left: 360rem}
.about {width: 1130rem; margin: 0 auto; text-align: center; font-size: 20rem}
.list {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 90rem}
.box {display: block; width: 550rem; height: 340rem; position: relative; margin-bottom: 30rem}
.box span {display: block; position: absolute; top: 0; left: 0; z-index: 2; background: #fff; border-bottom-right-radius: 50%; width: 295rem; height: 100%; padding-left: 40rem; overflow: hidden; font-size: 28rem; font-weight: 400; line-height: 36rem; color: #000; text-align: left}
.box span .ico {width: auto; height: 70rem; display: block; margin: 45rem 0 30rem 0}
.box span strong {display: block; font-size: 50rem; line-height: 1.3; margin-bottom: 15rem}
.box-img {display: block; width: auto; height: 100%; float: right; position: relative; z-index: 1}
.flex {display: flex; margin: 0 5rem}
.comments {padding: 200rem 0 100rem 0; background: url(img/bgq.jpg); background-size: cover; margin-bottom: 100rem}
.feae {justify-content: flex-end; align-items: flex-end; margin-bottom: 70rem}
.feae .com {margin-left: 80rem}
.feas {justify-content: flex-start; align-items: flex-start}
.feas .com {margin-right: 80rem}
.com span {background: #f6f6f6; font-size: 17rem; font-weight: 300; line-height: 22rem; color: #4e4e4e; display: block; padding: 25rem; position: relative; margin-bottom: 15rem}
.com strong {color: #000; text-transform: uppercase; font-size: 15rem}
.com-1 {width: 555rem}
.com-2 {width: 415rem}
.com-3 {width: 265rem}
.com-4 {width: 500rem}
.com-5 {width: 310rem}
.com-6 {width: 480rem}
.com-title {position: absolute; bottom: 100%; margin-bottom: -40rem; left: 100rem}
.mores {display: flex; justify-content: center}
.mores .more {margin-left: 25rem; margin-right: 25rem; font-size: 17rem}
.contact {margin: 0 100rem 120rem 100rem; font-size: 20rem}
.contact-flex {display: flex; margin-top: 60rem}
.adr {width: 50%; font-size: 24rem; line-height: 40rem}
.adr .map {display: block; width: 540rem; height: auto}
.adr-pad {padding: 45rem 0 0 25rem}
.adr ol {margin: 50rem 0 0 0; font-size: 30rem; font-weight: 400; line-height: 50rem}
.adr li {padding-left: 45rem}
.sub {height: 30vw}
.sub .top {height: calc(30vw - 95rem)}
.sub:after {content: ""; display: block; position: absolute; top: 100%; left: 0; height: 60rem; background: #f9f9f9; width: 100%}
.txt {margin: 100rem}
.ib {display: block; max-width: 100%; height: auto; width: auto; margin: 80rem auto}
.sq {display: flex; flex-wrap: wrap; justify-content: center; counter-reset: counter; padding: 30rem 0 0 0}
.sq li {width: 15%; margin: 30rem .5%; padding: 50rem 2% 40rem 2%; background: #f9f9f9; font-size: 21rem; font-weight: 400; color: #000; text-align: center; position: relative}
.sq li:after {counter-increment: counter; content: counter(counter); display: block; position: absolute; top: 0; left: 50%; text-align: center; width: 60rem; height: 60rem; line-height: 60rem; font-size: 36rem; font-weight: 600; border-radius: 100%; border: 3rem solid #ffe035; transform: translate(-50%,-50%); background: #fff}
.content h4 {font-weight: 500; color: #000; font-size: 32rem; line-height: 1.3; margin-bottom: 50rem}
.adv {display: flex; flex-wrap: wrap; justify-content: center}
.adv li {width: 14%; margin: 1%; text-align: center; font-weight: 500; color: #000}
.adv li img {display: block; width: 140rem; height: 140rem; border-radius: 100%; border: 3rem solid #ffe035; margin: 0 auto 20rem auto}
.txt ul {margin: 40rem 0}
.txt ul li {padding-left: 45rem; position: relative; color: #000; font-weight: 400; margin-bottom: 10rem}
.txt ul li:before {content: ""; display: block; width: 2px; height: 12rem; border-left: 3rem solid #ffe035; border-right: 3rem solid #ffe035; position: absolute; top: 10rem; left: 20rem}
.photos {margin: 90rem 0}
.photos .gal {display: block; width: 320rem; height: 250rem; margin-left: 30rem; margin-bottom: 30rem; float: left; overflow: hidden}
.photos .gal:first-child {width: 600rem; height: 530rem; margin-left: 0}
.flex-img {display: flex; margin: 80rem 0; justify-content: space-between}
.fi {width: 49%; height: 380rem}
.icos {display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 60rem}
.icos li {width: 14%; margin: 2%; text-align: center; font-weight: 500; color: #000; font-size: 30rem; line-height: 36rem}
.icos span {width: 150rem; height: 150rem; background: #80ba24; display: flex; align-items: center; justify-content: center; border-radius: 100%; margin: 0 auto 30rem auto}
.icos span img {display: block; width: 80rem; height: auto}
.fis {width: 24%}
.fis img {display: block; width: 100%; height: auto}
.offer {display: flex; flex-wrap: wrap; margin: 60rem -1% 0 -1%; justify-content: center}
.offer-box {display: block; width: 31.333%; margin: 1%; background: #f9f9f9}
.offer-box i {display: block; height: 260rem}
.offer-box span {display: block; padding: 30rem}
.offer-box strong {font-size: 22rem; color: #000}
.offer-box ul {margin: 20rem 0 0 0}
.rfoto {float: left}
.foto1 {width: 570rem; height: 702rem; margin-right: 45rem}
.foto2 {width: 685rem; height: 370rem; margin-bottom: 45rem}
.foto3 {width: 330rem; height: 287rem; margin-left: 45rem}
.rdesc {float: left; width: 310rem; font-size: 20rem}
.rdesc table {width: 100%; border: 0; border-collapse: collapse; text-align: left; border-top: 2px solid #343434}
.rdesc th, .rdesc td {padding-top: 13rem; padding-bottom: 13rem; border-bottom: 1px solid #ddd}
.rdesc th {font-weight: 500; vertical-align: top; padding-right: 15rem; white-space: nowrap}
.slides li {height: 400rem}
.r-desc {margin: 80rem 0}
}
@media (min-width: 1201px) {
html {font-size: .8px}
}
@media (min-width: 1701px) {
html {font-size: 1px}
}
#nav-icon {width: 55px; height: 50px; position: absolute; top: 0; right: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out}
#nav-icon i {display: block; position: absolute; right: 20px; height: 2px; width: 25px; background: #7fba24; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out}
#nav-icon i:nth-child(1) {top: 18px}
#nav-icon i:nth-child(2), #nav-icon i:nth-child(3) {top: 24px}
#nav-icon i:nth-child(4) {top: 30px}
.open #nav-icon i:nth-child(1) {top: 24px; width: 0%; right: 20px}
.open #nav-icon i:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg)}
.open #nav-icon i:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg)}
.open #nav-icon i:nth-child(4) {top: 24px; width: 0%; right: 20px}
.menu li a {display: flex; height: 100%; align-items: flex-end; color: #000; position: relative}
.menu li a:hover {color: #999}
.menu li a:before {content: ""; display: block; width: 10rem; height: 100%; background: #ffe035; position: absolute; bottom: 0; left: 50%; margin-left: -5rem; z-index: 1; transition: all .2s ease-in-out; opacity: 0}
.menu li.active a:before {opacity: 1}
.menu li a span {display: block; position: relative; z-index: 2}
.screen {overflow: hidden}
.slider ul, .slider li {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000}
.slider li:after, .light {content: ""; display: block; width: 13%; height: 100%; position: absolute; top: 0; left: 5%; z-index: 3; background: #fff; opacity: .3}
.slider li:before {right: 3%}
.slider video, .slider img {position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover}
.foto-sharp {display: block; width: 74%; height: 100%; position: absolute; top: 0; left: 13%; overflow: hidden; z-index: 2}
.foto-blur {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 1}
.foto-blur video {filter: blur(5rem)}
.foto-blur:before, .foto-blur:after, .slider li:before {content: ""; display: block; width: 8%; height: 100%; position: absolute; top: 0; z-index: 3; background: #fff; opacity: .2}
.shadow-left, .shadow-right {display: block; width: 13%; height: 100%; position: absolute; top: 0; z-index: 3; box-shadow: 0 0 20rem 0 rgba(0, 0, 0, .4)}
.shadow-left, .foto-blur:before, .adv li:nth-child(even):before {left: 0}
.shadow-right, .foto-blur:after {right: 0}
.light {left: 18%; opacity: .1}
.foto img, .gallery a img {display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1}
.content h2 span {position: relative; z-index: 2}
.more span {position: relative; z-index: 2}
.more:before {content: ""; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: #ffe035; z-index: 1; transform: scale(1,0); transition: all .2s ease-in-out; transform-origin: bottom}
.more:after {content: ""; display: block; width: 100%; height: 4rem; position: absolute; bottom: 100%; left: 0; background: #ffe035; transform: scale(0,1); transition: all .2s ease-in-out}
.more:hover:before, .more:hover:after {transform: scale(1,1)}
.about h2 {display: inline-block}
.com {position: relative}
.com:before {content: ""; display: block; width: 96rem; height: 16rem; background: url(img/stars.png) left no-repeat; background-size: contain; position: absolute; top: -25rem; left: 0}
.com span:after {content: ""; display: block; width: 15rem; height: 15rem; position: absolute; top: 100%; left: 25rem; background: url(img/ar.png) top no-repeat; background-size: contain}
.contact a {color: #3e3e3e}
.adr li a {color: #000}
.phone {background: url(img/phone.png) left no-repeat; background-size: 20rem}
.mail {background: url(img/mail.png) left no-repeat; background-size: 20rem}
.copy {display: flex; align-items: center; justify-content: center; font-size: 15rem; line-height: 20rem; padding: 50rem 5%; color: #666; background: #f6f6f6}
.copy img {width: 55px; height: 20px; display: block; margin-left: 10rem}
.flex-control-nav {display: none}
.flexslider ul {margin: 0 !important}
.flexslider li {padding: 0 !important; margin-bottom: 0 !important; position: inherit !important}
.flexslider li:before {display: none !important}
.photos .gal img, .fi img, .offer-box i img {display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; transition: all .2s ease-in-out}
.photos .gal:hover img {transform: scale(1.05); filter: brightness(1.1)}
.more-photos {position: relative}
.more-photos span {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; text-align: center; position: absolute; top: 0; left: 0; z-index: 10; background: rgba(0,0,0,0.6); font-size: 20rem; line-height: 24rem; color: #fff; font-weight: 500}
.hide {display: none}
.back {display: block}
.rfoto img {display: block; width: 100%; height: 100%; object-fit: cover}
.slides li img {display: block; width: 100%; height: 100%; object-fit: cover}
.show {opacity: 0}
.showleft {opacity: 0; transform: translate(-100rem,0)}
.showright {opacity: 0; transform: translate(100rem,0)}
.showtop {opacity: 0; transform: translate(0,-100rem)}
.showbottom {opacity: 0; transform: translate(0,100rem)}
.showscale {opacity: 0; transform: scale(.7)}
.showrotate {opacity: 0; transform: scale(.8) rotate(30deg)}
.showls {opacity: 0; letter-spacing: .2em}
.come-in, .already-visible {animation: come-in 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards}
.ccm-edit-mode .module, .already-visible .module {opacity: 1 !important; transform: translate(0) !important}
ul.ccm-edit-mode-inline-commands {right: -20px !important}
@keyframes come-in {
to {transform: translate(0) scale(1); opacity: 1; letter-spacing: 0}
}
@keyframes foto {
0 {transform: translateY(0)}
50% {transform: translateY(20rem)}
100% {transform: translateY(0)}
}