html, body { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-variant-ligatures: no-common-ligatures; quotes: "“" "”"; font-synthesis: none; -moz-font-feature-settings: 'kern'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; direction: ltr; font-style: normal; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; letter-spacing: -.022em; line-height: 1.47059; font-family: "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; color: #333; } .bg-colors { position: relative !important; z-index: 100 !important; } video { &::-webkit-media-controls { display:none !important; } &::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; } } video::-webkit-media-controls { display:none !important; } .press .page__title { color: #111; font: 60px/1 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; max-width: 1270px!important; margin-left: auto!important; margin-right: auto!important; padding-left: 1%; padding-right: 1%; } .press { position: relative; background: #fff; z-index: 1; } div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } iframe { width: 100% !important; min-height: 1850px !important; max-width: 100% !important; } @media (min-width: 1000px) { /* line 96, ../sass/components/_wysiwyg-node.scss */ iframe { max-width: none; } } @media (min-width: 601px) { /* line 96, ../sass/components/_wysiwyg-node.scss */ iframe { max-width: 100%; } } @media (min-width: 769px) { /* line 96, ../sass/components/_wysiwyg-node.scss */ iframe { max-width: none; } } @media (max-width: 600px) { /* line 96, ../sass/components/_wysiwyg-node.scss */ iframe { max-width: 100%; } } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } textarea { resize: none; } address { font-style: normal; } input, textarea, button, select { outline: none; font: inherit; -webkit-font-smoothing: inherit; -webkit-appearance: none; } @font-face { font-family: "Foundry Sterling Book"; src: url("../fonts/fostbook-webfont.eot"); src: url("../fonts/fostbook-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fostbook-webfont.woff") format("woff"), url("../fonts/fostbook-webfont.ttf") format("truetype"), url("../fonts/fostbook-webfont.svg#Foundry Sterling Book") format("svg"); font-weight: 400; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "Foundry Sterling Book"; src: url("../fonts/fostbook-webfont.svg#Foundry Sterling Book") format("svg"); font-weight: 400; font-style: normal; } } @font-face { font-family: "Foundry Sterling Demi"; src: url("../fonts/fostdemi-webfont.eot"); src: url("../fonts/fostdemi-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fostdemi-webfont.woff") format("woff"), url("../fonts/fostdemi-webfont.ttf") format("truetype"), url("../fonts/fostdemi-webfont.svg#Foundry Sterling Demi") format("svg"); font-weight: 400; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "Foundry Sterling Demi"; src: url("../fonts/fostdemi-webfont.svg#Foundry Sterling Demi") format("svg"); font-weight: 400; font-style: normal; } } @font-face { font-family: "Foundry Sterling Medium"; src: url("../fonts/fostmedm-webfont.eot"); src: url("../fonts/fostmedm-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fostmedm-webfont.woff") format("woff"), url("../fonts/fostmedm-webfont.ttf") format("truetype"), url("../fonts/fostmedm-webfont.svg#Foundry Sterling Medium") format("svg"); font-weight: 400; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "Foundry Sterling Medium"; src: url("../fonts/fostmedm-webfont.svg#Foundry Sterling Medium") format("svg"); font-weight: 400; font-style: normal; } } @font-face { font-family: "Foundry Sterling Bold"; src: url("../fonts/fostbold-webfont.eot"); src: url("../fonts/fostbold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fostbold-webfont.woff") format("woff"), url("../fonts/fostmbold-webfont.ttf") format("truetype"), url("../fonts/fostbold-webfont.svg#Foundry Sterling Bold") format("svg"); font-weight: 400; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "Foundry Sterling Bold"; src: url("../fonts/fostbold-webfont.svg#Foundry Sterling Medium") format("svg"); font-weight: 400; font-style: normal; } } @font-face { font-family: "Foundry Sterling Extra Bold"; src: url("../fonts/fostebold-webfont.eot"); src: url("../fonts/fostebold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fostebold-webfont.woff") format("woff"), url("../fonts/fostebold-webfont.ttf") format("truetype"), url("../fonts/fostebold-webfont.svg#Foundry Sterling Extra Bold") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "Foundry Sterling Extra Bold"; src: url("../fonts/fostebold-webfont.svg#Foundry Sterling Medium") format("svg"); font-weight: normal; font-style: normal; } } .orange-font { color: #f58024; } .purple-font { color: #5e267c; } .bold-font { font-family: "Foundry Sterling Bold", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } .extra-bold-font { font-family: "Foundry Sterling Extra Bold", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } .page-overview .section-hero.section { width: 100%; } .icon::before, .icon::after, .more::before, .more::after { color: inherit; font-style: normal; font-weight: inherit; font-size: inherit; line-height: 1; position: relative; z-index: 1; alt: ''; text-decoration: none !important; } .icon::before, .icon::after, .more::before, .more::after { text-decoration: none } .icon::before, .more::before { display: none } .icon-after::after, .more::after { margin-left: -0.8em; top: 0 } .icon-before::before { padding-right: .3em; display: inline-block; top: 0 } .icon-before::after { display: none } .icon-wrapper .icon, .icon-wrapper .more::after, .icon-wrapper .icon-before::before, .icon-wrapper .icon-after::after { display: inline } .icon-wrapper { text-decoration: none !important; } .more::before, .more::after { content: ""; } .more-block { margin-top: .5em } .overlay { top: 0px !important; right: 0; background: linear-gradient(145deg, rgba(255, 141, 5, 0.71) 3.78%, rgba(123, 50, 162, 0.84) 87.82%); width: 100%; height: 120vh; position: absolute; } svg.link-arrow { width: 12px; height: 12px; fill: #f58024; } svg.link-arrow-menu { width: 10px; height: 10px; fill: #000; margin-left: -1.1em; margin-top: 17px; } .btns { text-align: center; margin-top: 55px; max-width: 1070px; margin-left: auto; margin-right: auto; } @media (max-width:735px) { .btns { text-align: left; margin-top: 60px; margin-bottom: 60px; width: 88%; } .btn-frame-lt, .btn-frame { margin-bottom: 60px !important; width: 100% !important; padding-left: 14% !important; padding-right: 14% !important; font: 5vw/1.2 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif !important; } } .btns__sections { text-align: center; margin-top: 50px; margin-right: 35px; max-width: 1070px; margin-left: auto; margin-right: auto; } @media (min-width:736px) and (max-width: 1068px){ .btns__sections { margin-top: 0px !important; } } .btn { margin-bottom: 0px; border: 0px solid #f58024; color: #f58024 !important; padding-right: 3px; padding-bottom: 9px; cursor: pointer; border-radius: 4px; -webkit-appearance: none; display: inline-block; height: auto; background: none; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; font-weight: 400; text-align: center; font: 22px/1.2 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; letter-spacing: .011em; margin-top: .7em; } .btn:hover { border: 0px solid #f58024; color: #f58024; text-decoration: underline; background-color: rgba(0, 78, 145, 0) !important; } .btn-frame-lt { margin-bottom: 0px; border: 1px solid #f58024 !important; color: #f58024 !important; padding-left: 30px; padding-right: 30px; padding-bottom: 9px; cursor: pointer; border-radius: 4px; -webkit-appearance: none; display: inline-block; height: auto; background: none; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; font-weight: 400; text-align: center; font: 22px/1.2 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; letter-spacing: .011em; margin-top: 1.7em; padding-top: 5px; } .btn-frame-lt:hover { border: 1px solid #111 !important; color: #111 !important; background-color: rgba(0, 78, 145, 0) !important; } .btn-frame { margin-bottom: 0px; border: 1px solid #fff !important; color: #fff !important; padding-left: 30px; padding-right: 30px; padding-bottom: 9px; cursor: pointer; border-radius: 4px; -webkit-appearance: none; display: inline-block; height: auto; background: none; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; font-weight: 400; text-align: center; font: 22px/1.2 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; letter-spacing: .011em; margin-top: 1.7em; padding-top: 5px; } .btn-frame:hover { border: 1px solid #f58024 !important; color: #f58024 !important; background-color: rgba(0, 78, 145, 0) !important; } .arrow::after { display: inline; content: ">"; padding-left: .3em; top: 0; text-decoration: none !important; color: inherit; font-style: normal; font-weight: inherit; font-size: inherit; line-height: 1; position: relative; z-index: 1; alt: ''; } .btns { margin-bottom: 75px; } @media (max-width:735px) { .btns__sections { text-align: left; margin-top: 60px; width: 88%; } .btn { margin-bottom: 0px !important; border: 0px solid #f58024 !important; color: #f58024 !important; padding-left: 0px !important; padding-right: 0px; padding-bottom: 9px; cursor: pointer; border-radius: 4px; -webkit-appearance: none; display: inline !important; height: auto; background: none; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; font-weight: 400; text-align: left !important; font: 5vw/1.2 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif !important; letter-spacing: .011em; margin-left: 0px !important; margin-right: 2px !important; width: max-content; cursor: pointer; } .btn-inner { width: auto; } } .footnote { vertical-align: inherit; color: inherit } .footnote:hover { text-decoration: none } .references { border-bottom: 1px solid #d6d6d6; color: #888; margin: 0 auto; padding-bottom: 20px; padding-top: 80px; min-width: 1024px; max-width: 980px; margin-left: auto; margin-right: auto; } @media (min-width:736px) and (max-width: 1068px){ .references { border-bottom: 1px solid #d6d6d6; color: #888; margin: 0 auto; padding-bottom: 20px; padding-top: 80px; min-width: 80%; max-width: 90%; margin-left: auto; margin-right: auto; } .ac-gf-footer-legal { position: relative; top: -3px; z-index: 1; margin-bottom: 20px; margin-top: 20px; font-family: "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; min-width: 1024px; max-width: 980px; margin-left: auto; margin-right: auto; color: #888; margin: 0 auto; padding-bottom: 20px; padding-top: 5px !important; min-width: 80% !important; max-width: 90% !important; margin-left: auto; margin-right: auto; } .footer-legal { position: relative; top: -3px; z-index: 1; margin-bottom: 20px; margin-top: 20px; font-family: "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; min-width: 80% !important; max-width: 90% !important; margin-left: auto !important; margin-right: auto !important; } } @media (max-width:735px) { .references { border-bottom: 1px solid #d6d6d6; color: #888; margin: 0 auto; padding-bottom: 20px; padding-top: 80px; min-width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; width: 88% !important; } } .references ol { list-style-position: outside; margin: 0; padding: 0 21px } .references ol li { list-style-type: decimal } .references ul { list-style: none; margin: 0 } .references li { padding-bottom: 0.8em } .references p, .references li { font-size: 12px; line-height: 1.33341; font-weight: 400; letter-spacing: -.01em; } .references small { font-size: 1em } .footer-legal { position: relative; top: -3px; z-index: 1; margin-bottom: 20px; margin-top: 20px; font-family: "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; min-width: 1024px; max-width: 980px; margin-left: auto; margin-right: auto; } .footer-legal::before, .footer-legal::after { content: ' '; display: table } .footer-legal::after { clear: both } @media only screen and (max-width: 735px) { .footer-legal { padding-top: 7px; padding-bottom: 20px; min-width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; width: 88% !important; } } .footer-legal-links { margin-right: 30px; float: left; margin-top: 5px } .footer-legal-link:hover { text-decoration: underline; color: #333; } @media only screen and (max-width: 735px) { .footer-legal-copyright, .footer-legal-links { margin-right: 0; float: none } } .footer-legal-copyright { max-height: 9999px; float: right; margin-right: 0px; color: #9C9C9C; } .footer-legal-links { position: relative; top: -5px; z-index: 1 } .footer-legal-link { border-right: 1px solid #d6d6d6; margin-right: 7px; padding-right: 10px; display: inline-block; margin-top: 5px; white-space: nowrap; cursor: pointer; color: #9C9C9C; } .footer-legal-link:last-child { border: none; margin: 0; padding: 0 } .fight-myopia-footer { font-size: 12px; line-height: 1.33341; font-weight: 400; letter-spacing: -.01em; background-color: #fafafa; color: #333; min-width: 1024px; overflow: hidden; position: relative; z-index: 999; } @media only screen and (max-width: 1044px) { .fight-myopia-footer { min-width: 320px; } .footer-legal-copyright { float: left; } } @media only screen and (max-width: 735px) { .fight-myopia-footer { padding: 0 16px; } .footer-legal-copyright { float: left; } } .ct-btn-scroll { width: 49px; height: 49px; position: absolute; bottom: 30px; left: 0; right: 0; margin: auto; padding-top: 500px; z-index: 9; border-radius: 50%; -webkit-transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out; } html,body { height: 100%; background: #fff; } body { overflow-y: scroll; } a { color: #626262; text-decoration: none; } .link,.page__text a,.myopia__causes__item__link { position: relative; display: inline-block; color: #1a1a1a; -webkit-transition: color .35s ease,border-color .35s ease; transition: color .35s ease,border-color .35s ease; } .link:after,.page__text a:after,.myopia__causes__item__link:after { content: ''; position: absolute; width: 100%; bottom: 0; left: 0; height: 1px; background-color: #1a1a1a; -webkit-transition: -webkit-transform .35s ease,background-color .35s ease; transition: transform .35s ease,background-color .35s ease; } .m-no-touch .link:hover,.m-no-touch .page__text a:hover,.m-no-touch .myopia__causes__item__link:hover { color: #fff; border-color: #fff; -webkit-transition-duration: .175s; transition-duration: .175s; } .m-no-touch .link:hover:after,.m-no-touch .page__text a:hover:after,.m-no-touch .myopia__causes__item__link:hover:after { background-color: #fff; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); -webkit-transition-duration: .175s; transition-duration: .175s; } .swiper-container { margin: 0 auto; position: relative; overflow: hidden; z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical>.swiper-wrapper { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition-property: -webkit-transform; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide,.swiper-wrapper { -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .swiper-container-multirow>.swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-fles-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode>.swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -ms-flex: 0 0 auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-button-prev,.swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none; } .swiper-button-prev,.swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } .swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next,.swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; } .swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-white .swiper-pagination-bullet { background: #fff; } .swiper-pagination-bullet-active { opacity: 1; background: #007aff; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000; } .swiper-container-vertical>.swiper-pagination { right: 10px; top: 50%; -webkit-transform: translate3d(0,-50%,0); -ms-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .swiper-container-vertical>.swiper-pagination .swiper-pagination-bullet { margin: 5px 0; display: block; } .swiper-container-horizontal>.swiper-pagination { bottom: 10px; left: 0; width: 100%; } .swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet { margin: 0 5px; } .swiper-container-3d { -webkit-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-wrapper,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image: linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image: linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image: linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0)); background-image: linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0)); } .swiper-container-coverflow .swiper-wrapper { -ms-perspective: 1200px; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-prev,.swiper-container-cube .swiper-slide-next+.swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); } .swiper-container-cube.swiper-container-vertical .swiper-cube-shadow { z-index: 0; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0,0,0,.1); } .swiper-container-horizontal>.swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical>.swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0,0,0,.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12,end)infinite; animation: swiper-preloader-spin 1s steps(12,end)infinite; } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .page { position: relative; overflow: hidden; min-width: 320px; min-height: 100%; } .l-loading .page { min-height: 0; height: 100%; } .page__inner { position: relative; margin: 0 auto; padding: 0 20px; max-width: 1340px; box-sizing: border-box; } .page__inner:after { display: table; content: ''; } .page__screen { position: relative; padding: 200px 0 0px; /* min-height: 100vh; */ box-sizing: border-box; } .page__screen__misight { position: relative; padding: 0px 0 0px; /* min-height: 100vh; */ box-sizing: border-box; } .page__screen__ecp { position: relative; padding: 200px 0 60px; min-height: 100vh; box-sizing: border-box; } .m-touch .page__screen { min-height: initial; padding: 70px 0 0px !important; } @media (max-height:1080px) { .m-touch .page__screen { padding: 70px 0 0px !important; } } @media (max-height:900px) { .m-touch .page__screen { padding: 50px 0 40px; } } @media (max-height:550px) { .m-touch .page__screen { padding: 60px 0 30px; } } @media (max-height:350px) { .m-touch .page__screen { padding: 40px 0 20px; } } .page__screen:before { display: table; content: ''; } .page__title { line-height: .95; font-size: 240px; text-align: center; letter-spacing: -.04em; font: 80px/1 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; margin-bottom: 20px; } @media (min-width:736px) and (max-width: 1068px){ .page__title { font-size: 70px; margin-bottom: 0px; width: 86%; margin-left: auto; margin-right: auto; } .myopia__causes__item_misight .myopia__causes__item__img { height: 90vw !important; } } @media (max-width:735px) { .page__title { font-size: 48px !important; margin-bottom: 0px; width: 88%; margin-left: auto; margin-right: auto; text-align: left !important; } } .page__title__misight__2 { line-height: .95; font-size: 240px; text-align: center; letter-spacing: -.04em; font: 60px/1 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; width: 1000px; margin-left: auto; margin-right: auto; } @media (min-width:736px) and (max-width: 1068px){ .page__title__misight__2 { padding: 100px 0 0px !important; width: 70%; margin-left: auto; margin-right: auto; font: 40px/1.2 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } } @media (max-width:735px) { .page__title__misight__2 { font-size: 40px; line-height: 1.125; font-weight: 600; text-align: left; max-width: 88%; margin: 0 auto 0px; padding: 50px 0 20px; } } .page__title__line { margin: 0 auto 41px; display: block; width: 120px; height: 2px; } @media (min-width:736px) and (max-width: 1068px){ .page__title__line { margin-top: 10px; } } @media (max-width:735px) { .page__title__line { margin-top: 20px; margin-bottom: 30px; } } .page__text { max-width: 1200px; margin: 20px auto 20px; padding: 0 20px; text-align: center; color: #000; font: 23px/1.44 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } @media (max-width:735px) { .page__text { margin: 50px auto 20px !important; max-width: 88%; padding: 0 0px; direction: ltr; text-align: left; quotes: "“" "”"; list-style: none; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; letter-spacing: -.032em; font: 20px/1.47059 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } } @media (max-height:900px) { .m-touch .page__text { margin: 10px auto 50px !important; } } @media (max-height:550px) { .m-touch .page__text { margin: 10px auto 50px !important; } } @media (max-height:350px) { .m-touch .page__text { margin: 10px auto 50px !important; } } .page__text__theres__help { max-width: 1100px; margin: 20px auto 20px; padding: 0 20px; text-align: center; color: #000; font: 27px/1.44 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } @media (max-width:735px) { .page__text__theres__help { margin: 50px auto 20px !important; max-width: 88%; padding: 0 0px; direction: ltr; text-align: left; quotes: "“" "”"; list-style: none; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; letter-spacing: -.032em; font: 20px/1.47059 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } } @media (max-height:900px) { .m-touch .page__text__theres__help { margin: 10px auto 50px !important; font-size: 6.8vw; } } @media (max-height:550px) { .m-touch .page__text__theres__help { margin: 10px auto 0px !important; max-width: 90%; font-size: 25px; } } @media (max-height:350px) { .m-touch .page__text__theres__help { margin: 10px auto 50px !important; } } @media (min-width:736px) and (max-width: 1068px){ .page__text__theres__help { max-width: 80%; } } .page__text__misight__2 { max-width: 650px; margin: 0 auto 40px; padding: 20px 20px; font-size: 24px; text-align: center; line-height: 1.38105; } @media (max-width:735px) { .page__text__misight__2 { max-width: 88%; padding: 0 0px; direction: ltr; text-align: left; quotes: "“" "”"; list-style: none; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 20px; line-height: 1.47059; letter-spacing: -.032em; } } @media (max-height:735px) { .m-touch .page__text__misight__2 { margin-bottom: 20px; } } @media (max-height:550px) { .m-touch .page__text__misight__2 { margin-bottom: 60px; } } @media (max-height:350px) { .m-touch .page__text__misight__2 { margin-bottom: 40px; } } sup, sub { vertical-align: baseline; position: relative; top: -0.4em; } sub { font-size: 75% !important; } sup { top: -1.3em; font-size: 40% !important; } sup_headline { top: -2.9em; font-size: 20% !important; letter-spacing: -.04em; vertical-align: baseline; position: relative; } sup_registered { top: -1.2em; font-size: 40% !important; letter-spacing: -.04em; vertical-align: baseline; position: relative; } .page__title__intro-1 { line-height: .95; font-size: 140px; text-align: center; letter-spacing: -.04em; font: 80px/1.2 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; color: #642e88; max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 0px; } @media (min-width:736px) and (max-width: 1068px){ .page__title__intro-1 { font-size: 11vw; } } @media (max-width:735px) { .page__title__intro-1 { font-size: 11vw; text-align: left; max-width: 89%; } } .page__title__line__intro-1 { margin: 0 auto 41px; display: block; width: 120px; height: 2px; } @media (min-width:736px) and (max-width: 1068px){ .page__title__line__intro-1 { margin-top: 10px; } .page__text__intro-1 { width: 90%; } } @media (max-width:735px) { .page__title__line__intro-1 { margin-top: 20px; margin-bottom: 30px; } } .page__text__intro-1 { max-width: 880px; margin: 5px auto 12px; padding: 0 20px; font-size: 28px; text-align: center; color: #642e88; font: 28px/1.44 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } @media (max-width:735px) { .page__text__intro-1 { font-size: 20px; line-height: 1.44; max-width: 88%; text-align: left; } } @media (max-height:900px) { .m-touch .page__text__intro-1 { margin-bottom: 15px; margin-top: 8px; } } @media (max-height:550px) { .m-touch .page__text__intro-1 { margin-bottom: 60px; } } @media (max-height:350px) { .m-touch .page__text__intro-1 { margin-bottom: 40px; } } .page__title__intro-2 { line-height: .95; font-size: 140px; text-align: center; letter-spacing: -.04em; font: 40px/1.2 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-style: normal; color: #111; max-width: 1050px; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 70px; } @media (min-width:736px) and (max-width: 1068px){ .page__title__intro-2 { font-size: 40px; width: 80%; max-width: 100% !important; } .events .page__text { color: #333; margin-bottom: 50px; width: 76%; } } @media (max-width:735px) { .page__title__intro-2 { text-align: left; font-size: 28px; line-height: 1.14286; font-weight: 600; padding-bottom: 10px; width: 88% !important; margin-top: 30px; } } .page__title__3 { line-height: .95; font-size: 140px; text-align: center; letter-spacing: -.04em; font: 40px/1.2 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; color: #fff; max-width: 750px; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 20px; } @media (min-width:736px) and (max-width: 1068px){ .page__title__3 { font-size: 40px; } .myopia__causes__item__body { max-width: 860px; margin-left: auto; margin-right: auto; width: 90%; } } @media (max-width:735px) { .page__title__3 { max-width: 88%; text-align: left; font-size: 28px; line-height: 1.14286; font-weight: 600; } } .page__title__line__3 { margin: 0 auto 41px; display: block; width: 120px; height: 2px; } @media (min-width:736px) and (max-width: 1068px){ .page__title__line__intro-2 { margin-top: 10px; } } @media (max-width:735px) { .page__title__line__intro-2 { margin-top: 20px; margin-bottom: 30px; } } .page__text__intro-2 { max-width: 1200px; margin: 50px auto 20px; padding: 0 20px; text-align: center; color: #333; font: 23px/1.44 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } @media (min-width:736px) and (max-width: 1068px){ .page__text__intro-2 { width: 85% !important; margin-top: 0px; } } @media (max-width:735px) { .page__text__intro-2 { padding: 0 0px; direction: ltr; text-align: left; quotes: "“" "”"; list-style: none; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 18px; margin: 10px auto 50px !important; width: 88%; } .eye__health__video__container { max-width: 475px; margin-left: 0 !important; margin-right: 0 !important; margin-top: 3px; } } #locator_search { float: left; width: 946px; border: 1px solid #fff !important; background: #fff !important; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; margin: 10px 0 !important; } @media (max-height:900px) { .m-touch .page__text__intro-2 { margin-bottom: 100px; font: 20px/1.47059 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-style: normal; quotes: "“" "”"; letter-spacing: -.012em; } } @media (max-height:550px) { .m-touch .page__text__intro-2 { margin-bottom: 60px; } } @media (max-height:350px) { .m-touch .page__text__intro-2 { margin-bottom: 40px; } } .page__text__3 { max-width: 800px; margin: 0 auto 20px; padding: 0 20px; font-size: 28px; text-align: center; color: #fff; } @media (max-width:735px) { .page__text__3 { max-width: 88%; font: 20px/1.47059 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-style: normal; quotes: "“" "”"; letter-spacing: -.012em; text-align: left; } } @media (max-height:900px) { .m-touch .page__text__3 { } } @media (max-height:550px) { .m-touch .page__text__3 { margin-bottom: 60px; } } @media (max-height:350px) { .m-touch .page__text__3 { margin-bottom: 40px; } } .page__text__4 { max-width: 700px; margin: 0 auto 20px; font-size: 22px; margin-left: 40px; margin-right: 50px; } @media (max-width:735px) { .page__text__4 { max-width: 88%; margin-left: auto; margin-right: auto; direction: ltr; text-align: left; quotes: "“" "”"; list-style: none; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; letter-spacing: -.032em; margin-bottom: 15px; font: 20px/1.47059 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } .typography-manifesto { margin-left: 0px; } } @media (max-height:550px) { .m-touch .page__text__4 { margin-bottom: 60px; } } @media (max-height:350px) { .m-touch .page__text__4 { margin-bottom: 40px; } } .page__text__5 { margin: 10px auto 20px; font-size: 24px; color: #5e267c; font-family: "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; line-height: 1.4; } @media (max-width:735px) { .page__text__5 { width: 88% !important; margin-left: auto; margin-right: auto; } } @media (min-width:736px) and (max-width: 1068px){ .m-touch .page__text__5 { margin-bottom: 10px; } .clients .page__text { color: #333; width: 80%; } .page__text__4 { font-size: 22px; margin-left: auto !important; margin-right: auto !important; width: 70% !important; max-width: 100% !important; } .myopia__causes__item__title { color: #333; white-space: nowrap; margin-left: -.05em; letter-spacing: -.05em; max-width: 900px; margin: 0 auto 20px; padding: 0 20px; font-size: 33px; text-align: center; line-height: 1.38105; } .section__items-wrap { margin: 0 -150px; padding-bottom: 40px; } .myopia__causes__item__text { line-height: .95; text-align: center; letter-spacing: -.04em; font-style: normal; color: #111; font-variant-ligatures: no-common-ligatures; font: 53px/1.1 "Foundry Sterling Bold", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif !important; } .typography-manifesto-2 { line-height: .95; font-size: 140px; letter-spacing: -.04em; font: 40px/1.2 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; color: #111; margin-left: auto !important; width: 85%; margin-right: auto; } } @media (max-height:735px) { .m-touch .page__text__5 { margin-bottom: 0px; } } @media (max-height:350px) { .m-touch .page__text__5 { margin-bottom: 0px; } } .typography-manifesto { line-height: .95; font-size: 140px; letter-spacing: -.04em; font: 40px/1.2 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; color: #111; margin-left: 40px; margin-top: 12%; margin-right: 70px; } .typography-manifesto-2 { line-height: .95; font-size: 140px; letter-spacing: -.04em; font: 40px/1.2 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; color: #111; margin-left: 80px; } .typography-manifesto-lifestyle { line-height: .95; font-size: 140px; letter-spacing: -.04em; font: 40px/1.2 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; color: #111; margin-top: 8%; margin-left: 40px; } .typography-manifesto-3 { font-size: 140px; letter-spacing: -.04em; font: 100px/1.2 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; color: #5e267c; padding-right: 15px; text-align: right; -webkit-margin-before: 0em; -webkit-margin-after: 0em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } @media (max-width:735px) { .typography-manifesto, .typography-manifesto-2 { letter-spacing: -.04em; font: 28px/1.14286 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; /* font-weight: 400; */ font-style: normal; color: #111; margin-left: auto; margin-right: auto; max-width: 88%; text-align: left; padding-bottom: 10px; width: 88%; margin-top: 5%; } } @media (max-width:735px) { .typography-manifesto-lifestyle { letter-spacing: -.04em; font: 28px/1.14286 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; /* font-weight: 400; */ font-style: normal; color: #111; margin-left: auto; margin-right: auto; max-width: 88%; text-align: left; padding-bottom: 10px; width: 88%; margin-top: 10px; } } .percentage-image-1 { height: 95px; float: right; margin-top: 2px; } .percentage-image-2 { height: 95px; float: right; margin-top: 2px; } .percentage-image-3 { height: 95px; float: right; margin-top: 2px; } @media (min-width:736px) and (max-width: 1068px){ .percentage-image-1 { height: 80px; float: right; margin-top: 14px; } .percentage-image-2 { height: 80px; float: right; margin-top: 14px; } .percentage-image-3 { height: 80px; float: right; margin-top: 14px; } } @media (max-width:735px) { .percentage-image-1 { height: 95px; float: left; margin-top: 2px; padding-left: 5%; } .percentage-image-2 { height: 95px; float: left; margin-top: 2px; padding-left: 5%; } .percentage-image-3 { height: 95px; float: left; margin-top: 2px; padding-left: 5%; } } h1, h2, h3, h4, h5, h6 { color: #111; } ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, hgroup, p, blockquote, figure, form, fieldset, input, legend, pre, abbr, button { margin: 0; padding: 0; } h4 { display: block; -webkit-margin-before: 0em; -webkit-margin-after: 0.36em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; } .column-copy { margin-top: 13px; } .large-5 { width: 47%; } .large-offset-1 { margin-left: 8.33333%; } .row::after { clear: both; } .intro-text { margin-bottom: 0px; } .intro-text-mobile { margin-bottom: 0px; display: none; } .intro-text-desktop { margin-bottom: 0px; } .row { position: relative; z-index: 1; } .row::before, .row::after { content: ' '; display: table; } .large-4 { width: 49%; } .large-4-misight { width: 38.5%; } .large-offset-1 { margin-left: 8.33333%; } .column { box-sizing: border-box; position: relative; z-index: 1; margin: 0; padding: 0; float: left; } @media (min-width:736px) and (max-width: 1068px){ .medium-offset-0 { margin-left: 0; } .intro-text { margin-bottom: 0px; } .intro-text-mobile { margin-bottom: 50px; } .intro-text-desktop { margin-bottom: 50px; } .column-copy { margin-top: 10px; } .medium-7 { width: 45%; } .medium-7-a { width: 100%; text-align: center; } .section-content { padding: 0px 0; } .section-content-2 { padding: 0px 0; } .typography-manifesto { margin-top: 3%; width: 100% !important; margin-left: 0px; } .section-hero .hero-text-wrap { padding-top: 149px; padding-bottom: 630px; } .typography-headline-elevated { font-size: 48px; line-height: 1.08365; font-weight: 600; letter-spacing: -.003em; font-family: "Foundry Sterling Book", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } .page-teaching-tools { margin-top: 80px !important; } } @media only screen and (max-width: 765px) { .medium-7 { width: 100%; } .medium-7-a { width: 100%; } .large-4 { width: 100%; } } @media only screen and (max-width: 735px){ .small-12 { width: 100% !important; } .intro-text { margin-bottom: 0px; margin-top: 0px; } .intro-text-desktop { display: none; } .intro-text-mobile { margin-bottom: 0px; margin-top: -15px; display: block } .small-offset-0 { margin-left: 0; margin-bottom: 45px; } .section-content { padding-top: 30px !important; padding: 0px 0; } } @media (min-width:736px) and (max-width: 1068px){ .large-9 { width: 75%; } .intro-text-desktop { display: none; } .intro-text-mobile { margin-bottom: 30px; margin-top: 60px; display: block } .large-4 { width: 100% !important; text-align: center; } } @media only screen and (max-width: 735px) { .large-7 { width: 58.33333%; } } .page-overview .section-hero .hero-text-wrap { padding-top: 180px; padding-bottom: 958px; } .large-centered { margin-left: auto; margin-right: auto; float: none; } .page-overview .section-hero .overview-headline, .page-overview .section-hero .overview-intro-copy { text-align: center; color: #fff; } .fightmyopia-logo__burger img { height: 20px; } @media (max-width: 1024px) { .fightmyopia-logo__burger img { display: none; } } .fightmyopia-logo { position: fixed; z-index: 999999; top: 3px; left: 16px; color: #111; font: 18px/1.44 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.03em; -webkit-text-size-adjust: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateZ(0); transform: translateZ(0); } @media (max-width: 1024px) { .fightmyopia-logo { position: absolute; z-index: 900; font: 18px/1.44 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.03em; -webkit-text-size-adjust: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateZ(0); transform: translateZ(0); font-size: 20px; display: block; text-align: left; width: 100%; top: 0px; left: 0px; } .fightmyopia-logo__label { border-bottom: 1px solid #fafafa8c; color: #fff !important; padding: 0px; font-size: 24px; line-height: 1; padding-top: 18px !important; padding-bottom: 15px !important; padding-left: 25px !important; } .fightmyopia-logo__menu { display: none !important; } } @media (max-width:735px) { .fightmyopia-logo { right: 0; top: 0; left: 0; position: absolute; } } .fightmyopia-logo__label { display: block; padding: 25px; font-weight: 900; font-size: 24px; line-height: 1; } @media (max-width:735px) { .fightmyopia-logo__label { padding-top: 17px; padding-bottom: 15px; font-size: 20px; display: block; text-align: left; border-bottom: 1px solid #fafafa8c; color: #fff !important; width: 100%; } } .fightmyopia-logo__label,.fightmyopia-logo__label:hover { color: #000; text-decoration: none; } .fightmyopia-logo__label__amp { color: #000; } .fightmyopia-logo__menu { display: none; position: relative; padding: 0; -webkit-transition: opacity .35s; transition: opacity .35s; } .fightmyopia-logo__menu_active { display: block; } .fightmyopia-logo__menu_hide { opacity: 0; } .fightmyopia-logo__menu__item { overflow: hidden; font-weight: 700; font: 18px/1.0 "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; opacity: 0; -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); -webkit-transition: opacity .35s,-webkit-transform .35s cubic-bezier(.215,.61,.355,1); transition: opacity .35s,transform .35s cubic-bezier(.215,.61,.355,1); width: 400px; } .fightmyopia-logo__menu__item:nth-child(1) { -webkit-transition-delay: .035s; transition-delay: .035s; } .fightmyopia-logo__menu__item:nth-child(2) { -webkit-transition-delay: .07s; transition-delay: .07s; } .fightmyopia-logo__menu__item:nth-child(3) { -webkit-transition-delay: .105s; transition-delay: .105s; } .fightmyopia-logo__menu__item:nth-child(4) { -webkit-transition-delay: .14s; transition-delay: .14s; } .fightmyopia-logo__menu__item:nth-child(5) { -webkit-transition-delay: .175s; transition-delay: .175s; } .fightmyopia-logo__menu__item__link { float: left; position: relative; padding: 11px 25px; -webkit-transition: color .35s; transition: color .35s; letter-spacing: 0em; font-family:  "Foundry Sterling Medium", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; } .fightmyopia-logo__menu__item__link,.fightmyopia-logo__menu__item__link:hover { color: #1a1a1a; text-decoration: none; } .fightmyopia-logo__menu__item__link:after { position: absolute; top: 31px; left: 25px; right: 25px; overflow: hidden; height: 0.09em; background: #1a1a1a; -webkit-transition: opacity .35s; transition: opacity .35s; opacity: 0; content: ''; } .fightmyopia-logo__menu__item__link:hover:after { opacity: 1; -webkit-transition-duration: .175s; transition-duration: .175s; } .fightmyopia-logo__menu_show .fightmyopia-logo__menu__item { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .fightmyopia-work-button { position: fixed; z-index: 900; top: 20px; right: 20px; width: 140px; height: 40px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #1a1a1a; cursor: pointer; -webkit-font-smoothing: antialiased; letter-spacing: -.03em; -webkit-text-size-adjust: 100%; -webkit-transition: opacity .35s; transition: opacity .35s; } @media (max-width:735px) { .fightmyopia-work-button { display: none; } } .fightmyopia-work-button_phone { display: none; width: 30px; padding: 20px; top: 0; right: 0; height: 20px; background-color: rgba(255,255,255,0); } .fightmyopia-work-button_phone:before { display: none; } @media (max-width:735px) { .fightmyopia-work-button_phone { display: block; } } .fightmyopia-work-button_phone__line { margin-bottom: 4px; height: 4px; background-color: #1a1a1a; } .fightmyopia-work-button_hidden { opacity: 0; } .fightmyopia-work-button__content,.fightmyopia-work-button:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; border: 2px solid #1a1a1a; } .fightmyopia-work-button__content { background: #FFF; color: #1a1a1a; font: 700 18px/38px 'A&I Circular',Arial,Helvetica,sans-serif; text-align: center; -webkit-transition: -webkit-transform .175s; transition: transform .175s; } .m-no-touch .fightmyopia-work-button:hover .fightmyopia-work-button__content { -webkit-transform: translateX(-2px)translateY(-2px); -ms-transform: translateX(-2px)translateY(-2px); transform: translateX(-2px)translateY(-2px); } .m-touch .fightmyopia-work-button:active .fightmyopia-work-button__content,.m-no-touch .fightmyopia-work-button:active .fightmyopia-work-button__content { -webkit-transform: translateX(2px)translateY(2px); -ms-transform: translateX(2px)translateY(2px); transform: translateX(2px)translateY(2px); } .fightmyopia-work-button:before { top: 4px; left: 4px; content: ''; -webkit-transition: background-color .35s,-webkit-transform .35s; transition: background-color .35s,transform .35s; } .fightmyopia-work-button:hover:before { background-color: #FFF; -webkit-transition-duration: .175s; transition-duration: .175s; } .fightmyopia-works__panel { position: fixed; overflow: hidden; z-index: 1000; top: 0; left: 100%; margin-left: 10px; width: 360px; height: 100%; background: #242529; color: #FFF; font: 18px/1.44 'A&I Circular',Arial,Helvetica,sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.03em; -webkit-text-size-adjust: 100%; -webkit-transform: translateX(0)translateZ(0); transform: translateX(0)translateZ(0); -webkit-transition: background-color .35s; transition: background-color .35s; } @media (max-width:360px) { .fightmyopia-works__panel { width: 320px; } } .fightmyopia-works__panel_active { -webkit-transform: translateX(-370px)translateZ(0); transform: translateX(-370px)translateZ(0); -webkit-transition: background-color .35s,-webkit-transform .2625s cubic-bezier(.215,.61,.355,1); transition: background-color .35s,transform .2625s cubic-bezier(.215,.61,.355,1); } @media (max-width:360px) { .fightmyopia-works__panel_active { -webkit-transform: translateX(-320px)translateZ(0); transform: translateX(-320px)translateZ(0); } } .fightmyopia-works__panel_item-hover { background-color: transparent; background-color: rgba(26,26,26,0); } .fightmyopia-works__panel__content { position: relative; padding: 38px 0; } .fightmyopia-works__panel__item { display: block; color: #FFF; padding: 18px 30px 20px 35px; -webkit-transition: background-color .35s,opacity .35s; transition: background-color .35s,opacity .35s; } @media (max-width:360px) { .fightmyopia-works__panel__item { padding: 15px 20px 20px 25px; } } .fightmyopia-works__panel__item,.fightmyopia-works__panel__item:hover { text-decoration: none; } .fightmyopia-works__panel__item:last-child { margin-bottom: 0; } .fightmyopia-works__panel__item_hover { background-color: #999; -webkit-transition-duration: .175s; transition-duration: .175s; } .fightmyopia-works__panel__item__title { display: block; font-size: 35px; line-height: 1; } @media (max-width:360px) { .fightmyopia-works__panel__item__title { font-size: 30px; } } .fightmyopia-works__panel__item__tags { display: block; padding-top: 4px; color: #666; color: rgba(255,255,255,.33); font-size: 11px; text-transform: uppercase; font-weight: 700; -webkit-transition: color .35s; transition: color .35s; letter-spacing: .05em; } .fightmyopia-works__panel_item-hover .fightmyopia-works__panel__item__tags { color: rgba(0,0,0,.5); } .fightmyopia-works__panel__item_hover .fightmyopia-works__panel__item__tags { color: #1a1a1a; -webkit-transition-duration: .175s; transition-duration: .175s; } .fightmyopia-works__panel_item-hover .fightmyopia-works__panel__item_hover { opacity: 1; } .fightmyopia-works__panel__close { position: absolute; right: 0; top: 0; width: 80px; height: 80px; background: url("../images/fightmyopia-works/close.svg") no-repeat 50% 50%; -webkit-transition: opacity .35s cubic-bezier(.55,.055,.675,.19),-webkit-transform .35s .035s cubic-bezier(.55,.055,.675,.19); transition: opacity .35s cubic-bezier(.55,.055,.675,.19),transform .35s .035s cubic-bezier(.55,.055,.675,.19); opacity: .75; cursor: pointer; } .fightmyopia-works__panel__close:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1); opacity: 1; -webkit-transition-duration: .175s; transition-duration: .175s; } .fightmyopia-works__panel_item-hover .fightmyopia-works__panel__close { -webkit-transition-duration: .175s; transition-duration: .175s; } .fightmyopia-works__pictures { position: fixed; top: 0; width: 100%; height: 100%; left: 110%; z-index: 880; } .fightmyopia-works__pictures_active { left: 0; } .fightmyopia-works__pictures__item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: cover; opacity: 0; -webkit-transition: opacity .35s cubic-bezier(.39,.575,.565,1); transition: opacity .35s cubic-bezier(.39,.575,.565,1); } .fightmyopia-works__pictures__item_prev { -webkit-transition-duration: .35s; transition-duration: .35s; } .fightmyopia-works__pictures__item_active { opacity: 1; } .fightmyopia-works__pictures__item_prev { -webkit-transition-delay: .35s; transition-delay: .35s; } .fightmyopia-works__pictures__item_active.fightmyopia-works__pictures__item_prev { -webkit-transition: none; transition: none; } .fightmyopia-works__overlay { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 890; } .fightmyopia-works__overlay_active { display: block; } .fightmyopia-works .iScrollVerticalScrollbar { position: absolute; right: 0; top: 0; height: 100%; width: 3px; opacity: .75; } .fightmyopia-works .iScrollIndicator { position: absolute; width: 100%; left: 0; top: 0; height: 0; background: #FFF; } .loading { left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; position: fixed; background: #fafafa; -webkit-transition: opacity .175s cubic-bezier(.55,.055,.675,.19); transition: opacity .175s cubic-bezier(.55,.055,.675,.19); opacity: 0; } .l-loading .loading { opacity: 1; } .loading__icon { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin-left: -29px; margin-top: -29px; background: url("../images/loading.svg") no-repeat 0 0; background-size: 58px 58px; } @-webkit-keyframes arrow { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(6px); transform: translateY(6px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes arrow { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(6px); transform: translateY(6px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .intro { position: relative; padding-top: 0vh; padding-bottom: 0vh; color: #FFF; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 50; } .m-touch .intro { padding-top: 0; padding-bottom: 0px; } .intro__decor { left: 0; top: 0; width: 100%; height: 100%; position: fixed; } .m-touch .intro__decor { position: fixed; } .intro__decor__inner { } .m-touch .intro__home { position: relative; height: 0px !important; } .intro__person { position: fixed; z-index: 60; bottom: 0; box-sizing: border-box; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; text-align: center; } .m-touch .intro__person { position: absolute; } .intro__person__content,.intro__person__content__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .intro__person_anton .intro__person__content { -webkit-transform: translateX(31%); -ms-transform: translateX(31%); transform: translateX(31%); } .intro__person_irene .intro__person__content { -webkit-transform: translateX(-22%); -ms-transform: translateX(-22%); transform: translateX(-22%); } .intro__person_anton { margin-right: 100px; right: 48.5%; height: 88.2%; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .m-touch .intro__person_anton { margin-right: 35px; } .intro__person_irene { margin-left: 100px; left: 51.5%; height: 77.4%; -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; } .m-touch .intro__person_irene { margin-left: 35px; } .intro__person__frame { position: absolute; top: 0; height: 100%; opacity: 0; -webkit-transition: opacity .175s .07s; transition: opacity .175s .07s; } .intro__person_anton .intro__person__frame { right: 0; } .intro__person_irene .intro__person__frame { left: 0; } .intro__person_1 .intro__person__frame_1,.intro__person_2 .intro__person__frame_2,.intro__person_3 .intro__person__frame_3,.intro__person_4 .intro__person__frame_4 { opacity: 1; -webkit-transition-delay: .00001s; transition-delay: .00001s; } .intro__person__area { position: absolute; bottom: 0; height: 100%; } .intro__person_anton .intro__person__area { top: 5%; left: 11%; width: 58%; } .intro__person_irene .intro__person__area { top: 0; left: 22%; width: 50%; } .intro__about { display: table; width: 100%; min-height: 100vh; } .m-touch .intro__about { display: block; -webkit-transform: translateZ(0); transform: translateZ(0); } .intro__about__content { position: relative; display: table-cell; vertical-align: top; text-align: center; } .m-touch .intro__about__content { display: block; } .intro__about__content__text { width: 100%; padding: 0 20px; max-width: 1100px; letter-spacing: -.04em; font: 70px/1 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; padding-top: 27vh; position: relative; vertical-align: top; text-align: center; margin-right: auto; margin-left: auto; } @media (min-width:736px) and (max-width: 1068px){ .intro__about__content__text { font-size: 7.5vh; width: 80%; padding: 20vw 0px 0px 0px; } } @media (min-width:667px) and (max-width: 736px){ .intro__about__content__text { font-size: 45px; line-height: 1.1; padding-right: 0px; padding-left: 0px; text-align: left; width: 88%; padding-top: 16vh; } } @media (max-width:665px) { .intro__about__content__text { font-size: 11vw; line-height: 1.1; padding-right: 0px; padding-left: 0px; text-align: left; width: 88%; padding-top: 16vh; } } @media (max-width:330px) { .intro__about__content__text { font-size: 11vw; line-height: 1.0; padding-right: 0px; padding-left: 0px; text-align: left; width: 88%; padding-top: 18vh; } } .intro__doing { position: relative; text-align: center; } .m-touch .intro__doing { margin-bottom: 40px; -webkit-transform: translateZ(0); transform: translateZ(0); } .intro__doing__title { position: relative; padding-bottom: 56px; margin-bottom: 75px; font-size: 13px; text-transform: uppercase; font-weight: 700; opacity: .3; } .m-touch .intro__doing__title { opacity: 1; } .intro__doing__title:after { position: absolute; left: 50%; bottom: 0; height: 2px; background: #FFF; width: 120px; margin-left: -60px; content: ''; } .intro__doing__item { display: block; margin: 0 -1000px; font-size: 240px; line-height: 1.08; font-weight: 700; white-space: nowrap; letter-spacing: -.055em; } .intro__doing__item_ux { margin-bottom: -.25em; } @media (max-width:1550px) { .intro__doing__item { font-size: 170px; } } @media (max-width:1300px) { .intro__doing__item { font-size: 150px; } } @media (min-width:736px) and (max-width: 1068px){ .intro__doing__item { font-size: 95px; } } @media (max-width:735px) { .intro__doing__item { font-size: 75px; } } @media (max-width:479px) { .intro__doing__item { font-size: 50px; } } @media (max-width: 1024px) { .ecp-logo__locator img { display: none; } } .ecp-locator { position: fixed; z-index: 999999; top: 3px; right: 105px; color: #111; -webkit-font-smoothing: antialiased; letter-spacing: -.03em; -webkit-text-size-adjust: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateZ(0); transform: translateZ(0); float: right; } .ecp-logo__label { font-weight: 900; font-size: 24px; line-height: 1; background-color: rgba(0,0,0,0); border-width: 0px; cursor: pointer; display: inline; } .ecp-logo__locator img { height: 20px; padding-top: 25px; padding-bottom: 25px; padding-right: 0px; padding-left: 0px; transition: all 0.5s ease-in-out; } .ecp-logo__locator img:hover { opacity: 0.5; } @media (max-width: 1024px) { .language-selector-en img { display: block; } } .language-selector-en { position: fixed; z-index: 999999; top: 3px; right: 62px; color: #111; -webkit-font-smoothing: antialiased; letter-spacing: -.03em; -webkit-text-size-adjust: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateZ(0); transform: translateZ(0); float: right; } @media (max-width: 1024px) { .language-selector-en-mobile img { display: block; } } .language-selector-en-mobile { position: absolute; z-index: 999999; top: 3px; right: 54px; color: #111; -webkit-font-smoothing: antialiased; letter-spacing: -.03em; -webkit-text-size-adjust: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateZ(0); transform: translateZ(0); float: right; } @media (max-width: 1024px) { .language-selector-fr img { display: block; } } @media (max-width: 1024px) { .language-selector-fr-mobile img { display: block; } } .language-selector-fr { position: fixed; z-index: 999999; top: 3px; right: 38px; color: #111; -webkit-font-smoothing: antialiased; letter-spacing: -.03em; -webkit-text-size-adjust: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateZ(0); transform: translateZ(0); float: right; } .language-selector-fr-mobile { position: absolute; z-index: 999999; top: 3px; right: 30px; color: #111; -webkit-font-smoothing: antialiased; letter-spacing: -.03em; -webkit-text-size-adjust: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transform: translateZ(0); transform: translateZ(0); float: right; } @media (max-width: 1024px) { .EN__selector img { display: none; } } .EN__selector img { height: 20px; padding-top: 25px; padding-bottom: 25px; padding-right: 0px; padding-left: 0px; transition: all 0.5s ease-in-out; } @media (max-width: 1024px) { .FR__selector img { display: none; } } .FR__selector img { height: 20px; padding-top: 25px; padding-bottom: 25px; padding-right: 0px; padding-left: 0px; opacity: 0.25; transition: all 0.5s ease-in-out; } .EN__selector img:hover { opacity: 0.5; } @media (max-width: 1023px) { .EN__selector_mobile img { display: block; } } @media (min-width: 1024px) { .EN__selector_mobile img { display: none; } } @media (max-width: 1024px) { .EN__selector_mobile img { height: 20px; padding-top: 16px; padding-bottom: 13px; padding-right: 0px; padding-left: 0px; transition: all 0.5s ease-in-out; } } @media (max-width: 735px) { .EN__selector_mobile img { height: 20px; padding-top: 14px; padding-bottom: 13px; padding-right: 0px; padding-left: 0px; transition: all 0.5s ease-in-out; } } @media (max-width: 1023px) { .FR__selector_mobile img { display: block; } } @media (min-width: 1024px) { .FR__selector_mobile img { display: none; } } @media (max-width: 1023px) { .FR__selector_mobile img { height: 20px; padding-top: 16px; padding-bottom: 13px; padding-right: 0px; padding-left: 0px; opacity: 0.3; transition: all 0.5s ease-in-out; } } @media (max-width: 735px) { .FR__selector_mobile img { height: 20px; padding-top: 14px; padding-bottom: 13px; padding-right: 0px; padding-left: 0px; opacity: 0.3; transition: all 0.5s ease-in-out; } } .EN__selector_mobile img:hover { opacity: 0.5; } .intro__arrow { position: fixed; z-index: 99; bottom: -25px; left: 50%; width: 140px; margin-left: -70px; height: 120px; cursor: pointer; -webkit-animation: arrow 1s infinite; animation: arrow 1s infinite; } .intro__arrow__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../images/ui/arrow-bottom.svg") no-repeat 50% 50%; background-size: 43px 24px; } .m-touch .intro__arrow { position: fixed; } .white__background { background-color: #fff; padding: 2%; } .purple__background { background-color: #5e267c; padding: 20px; margin-top: 100px; max-width: 915px; margin-left: auto; margin-right: auto; } @media (max-width:735px) { .purple__background { background-color: #5e267c; padding: 20px; margin-top: 100px; max-width: 78%; margin-left: auto; margin-right: auto; margin-bottom: 40px; } } .page-teaching-tools { margin-top: 100px; } @media (min-width:736px) and (max-width: 1068px){ .page-teaching-tools .section-content { padding: 0px 0 } } @media only screen and (max-width: 735px) { .page-teaching-tools .section-content { padding: 0; } } @media (min-width:736px) and (max-width: 1068px){ .page-teaching-tools .section-content-2 { padding: 0px 0; margin-top: -100px; } .typography-manifesto-lifestyle { line-height: .95; font-size: 140px; letter-spacing: -.04em; font: 40px/1.2 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; color: #111; margin-top: 2%; } } @media only screen and (max-width: 735px) { .page-teaching-tools .section-content-2 { padding: 95px 0 } } .page-teaching-tools .alternate { background-color: #f2f2f2 } .page-teaching-tools .subsection-row { margin-bottom: 153px } @media (min-width:736px) and (max-width: 1068px){ .page-teaching-tools .subsection-row { margin-bottom: 130px } } @media only screen and (max-width: 735px) { .page-teaching-tools .subsection-row { margin-bottom: 66px } } .page-teaching-tools .subsection-row:last-child { margin-bottom: 0 } .page-teaching-tools .intro-text { margin-bottom: 64px } @media (min-width:736px) and (max-width: 1068px){ .page-teaching-tools .intro-text { margin-bottom: 50px; margin-top: -30px; } } @media only screen and (max-width: 735px) { .page-teaching-tools .intro-text { margin-bottom: 30px } } .page-teaching-tools .eyebrow-icon { margin-bottom: 16px } .page-teaching-tools .column-copy { margin-top: 13px } @media (min-width:736px) and (max-width: 1068px){ .page-teaching-tools .column-copy { margin-top: 10px; text-align: center; width: 100%; } } .misight__section__3 { margin-top: 0px; } .misight-block-2 { margin-top: 0px; padding-top: 80px; } .orange__background { background-color: #db7f31; padding: 2%; } .what-causes-myopia { position: relative; padding: 0 0 50px; background: #fcf0e3; box-sizing: border-box; z-index: 100; } .m-touch .what-causes-myopia { -webkit-transform: translateZ(0); transform: translateZ(0); } @media (max-width:735px) { .what-causes-myopia { padding-bottom: 300px; } .m-touch .what-causes-myopia { padding-bottom: 130px; } } .what-causes-myopia .page__title { color: #000; } .what-causes-myopia .page__title__line { background-color: #57de91; } .what-causes-myopia .page__text { color: #000; margin-bottom: 50px; } .what-causes-myopia .page__text a { color: #000; border-color: #000; } .what-causes-myopia .page__inner { box-sizing: border-box; } .what-causes-myopia__items-wrap { margin: 0 -150px; } .what-causes-myopia__item { display: block; position: relative; padding: 0px 150px 28px; box-sizing: border-box; -webkit-transition: background-color .35s ease; transition: background-color .35s ease; } @media (max-width:735px) { .what-causes-myopia__item { padding: 39px 150px; } } .what-causes-myopia__item__inner { display: block; position: relative; margin: 0 auto; padding: 0 20px; max-width: 1070px; box-sizing: border-box; } .what-causes-myopia__item__inner:after { display: block; display: block; height: 0; overflow: hidden; clear: both; display: table; content: ''; } .what-causes-myopia__item__inner__link { display: inline-block; } .m-no-touch .what-causes-myopia__item__inner__link:hover,.m-no-touch .what-causes-myopia__item__inner__link:hover .what-causes-myopia__item__date:before,.m-no-touch .what-causes-myopia__item__inner__link:hover .what-causes-myopia__item__title,.m-no-touch .what-causes-myopia__item__inner__link:hover .what-causes-myopia__item__title:after,.m-no-touch .what-causes-myopia__item__inner__link:hover .what-causes-myopia__item__place { -webkit-transition-duration: .2625s; transition-duration: .2625s; } .m-no-touch .what-causes-myopia__item__inner__link:hover .what-causes-myopia__item__title:after { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .m-no-touch .what-causes-myopia__item__inner__link:hover .what-causes-myopia__item__date:before { background-color: #57599f; } .m-no-touch .what-causes-myopia__item__inner__link:hover .what-causes-myopia__item__title { color: #57de91; } .what-causes-myopia__item:nth-child(2n) .what-causes-myopia__item__inner { } @media (max-width:735px) { .what-causes-myopia__item:nth-child(2n) .what-causes-myopia__item__inner { margin-left: 0; } } .what-causes-myopia__item__date { display: block; float: left; width: 115px; line-height: 1; font-size: 13px; font-weight: 700; color: #57de91; letter-spacing: .001em; text-transform: uppercase; } .what-causes-myopia__item__date__line { display: block; margin-bottom: 18px; width: 100px; height: 2px; background-color: #1a1a1a; -webkit-transition: background-color .35s ease; transition: background-color .35s ease; } @media (max-width:735px) { .what-causes-myopia__item__date { float: none; margin-bottom: 10px; font-size: 12px; } } .what-causes-myopia__item__body { display: block; float: left; font-size: 80px; } @media (max-width:1300px) { .what-causes-myopia__item__body { font-size: 60px; } } @media (min-width:736px) and (max-width: 1068px){ .what-causes-myopia__item__body { font-size: 50px; } } @media (max-width:735px) { .what-causes-myopia__item__body { float: none; font-size: 40px; } } @media (max-width:479px) { .what-causes-myopia__item__body { font-size: 32px; } } .what-causes-myopia__item__title { display: block; position: relative; left: -.05em; letter-spacing: -.055em; line-height: 1.02; color: #fff; -webkit-transition: color .35s ease; transition: color .35s ease; } .what-causes-myopia__item__title:after { content: ''; display: inline-block; margin-left: 20px; height: 46px; width: 62px; opacity: 0; -webkit-transform: translateX(-15px); -ms-transform: translateX(-15px); transform: translateX(-15px); background-size: 62px 46px; background-position: center; background-repeat: no-repeat; background-image: url("../../images/ui/arrow-right-green.svg"); -webkit-transition: -webkit-transform .35s ease,opacity .175s ease; transition: transform .35s ease,opacity .175s ease; } @media (max-width:1300px) { .what-causes-myopia__item__title:after { width: 40px; height: 36.715px; background-size: 40px 36.715px; } } @media (min-width:736px) and (max-width: 1068px){ .what-causes-myopia__item__title:after { width: 30px; margin-left: 15px; height: 29.372px; background-size: 30px 29.372px; } } .what-causes-myopia__item__place { display: block; font-family: 'A&I Garamond',Georgia,Times,serif; line-height: 1.275; letter-spacing: -.047em; -webkit-transition: color .35s ease; transition: color .35s ease; } .what-causes-myopia__stats { position: relative; padding-top: 13px; color: #fff; } .what-causes-myopia__stats:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } @media (max-width:990px) { .what-causes-myopia__stats { text-align: center; } } @media (min-width:736px) and (max-width: 1068px){ .what-causes-myopia__stats { padding-top: 20px; } } @media (max-width:735px) { .what-causes-myopia__stats { margin: 0; text-align: center; border-top: none; } } .what-causes-myopia__stats__line { margin: 87px auto 0; position: relative; height: 2px; background-color: #fff; } @media (max-width:735px) { .what-causes-myopia__stats__line { margin: 0; display: none; } } .what-causes-myopia__stats__item { float: left; } @media (max-width:735px) { .what-causes-myopia__stats__item { display: none; } } .what-causes-myopia__stats__items { float: left; } @media (max-width:990px) { .what-causes-myopia__stats__items { margin-left: 32px; display: inline-block; text-align: left; float: none; } .what-causes-myopia__stats__items:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } } .what-causes-myopia__stats__item__count { font-size: 60px; margin-right: 3px; letter-spacing: -.03em; } @media (max-width:1260px) { .what-causes-myopia__stats__item__count { font-size: 50px; } } @media (max-width:1110px) { .what-causes-myopia__stats__item__count { font-size: 40px; } } @media (min-width:736px) and (max-width: 1068px){ .what-causes-myopia__stats__item__count { font-size: 38px; } } .what-causes-myopia__stats__item__label { display: inline-block; max-width: 90px; font-size: 13px; letter-spacing: -.001em; text-transform: uppercase; } @media (max-width:1110px) { .what-causes-myopia__stats__item__label { font-size: 11px; } } .what-causes-myopia__stats__item:before { content: '/'; margin: 0 14px 0 31px; display: inline-block; color: #686aa9; font-size: 60px; } @media (max-width:1260px) { .what-causes-myopia__stats__item:before { font-size: 50px; margin: 0 2px 0 6px; } } @media (max-width:1110px) { .what-causes-myopia__stats__item:before { font-size: 40px; } } .what-causes-myopia__stats__item:first-child:before { display: none; content: ''; } .what-causes-myopia__stats__btn { position: relative; float: left; margin-top: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 200px; color: #fff; text-align: center; } .what-causes-myopia__stats__btn_ml { margin-left: 35px; } @media (max-width:500px) { .what-causes-myopia__stats__btn_ml { margin-left: 0; } } @media (max-width:1260px) { .what-causes-myopia__stats__btn { margin-top: 12px; } } @media (max-width:1110px) { .what-causes-myopia__stats__btn { margin-top: 5px; margin-right: 4px; } } @media (max-width:990px) { .what-causes-myopia__stats__btn { float: none; display: inline-block; } } @media (max-width:735px) { .what-causes-myopia__stats__btn { display: inline-block; margin-top: 20px; float: none; margin-right: 0; } } @media (max-width:500px) { .what-causes-myopia__stats__btn { display: block; margin: 0 auto 30px; } } .what-causes-myopia__stats__btns { float: right; } @media (max-width:990px) { .what-causes-myopia__stats__btns { float: none; text-align: center; } } .what-causes-myopia__stats__btn__content { position: relative; display: block; padding: 6px 10px 5px; background-color: #57599f; border: 2px solid #fff; -webkit-transition: background-color .35s ease,color .35s ease,-webkit-transform .175s; transition: background-color .35s ease,color .35s ease,transform .175s; } @media (max-width:735px) { .what-causes-myopia__stats__btn__content { margin-left: -2px; } } .m-no-touch .what-causes-myopia__stats__btn:hover .what-causes-myopia__stats__btn__content { background-color: #fff; color: #57599f; -webkit-transition-duration: .175s; transition-duration: .175s; -webkit-transform: translateX(-2px)translateY(-2px); -ms-transform: translateX(-2px)translateY(-2px); transform: translateX(-2px)translateY(-2px); } .m-touch .what-causes-myopia__stats__btn:active .what-causes-myopia__stats__btn__content,.m-no-touch .what-causes-myopia__stats__btn:active .what-causes-myopia__stats__btn__content { background-color: #fff; color: #57599f; -webkit-transform: translateX(2px)translateY(2px); -ms-transform: translateX(2px)translateY(2px); transform: translateX(2px)translateY(2px); } .what-causes-myopia__stats__btn:before { position: absolute; display: block; content: ''; top: 4px; left: 4px; right: -4px; bottom: -4px; border: 2px solid #fff; } .what-causes-myopia__past { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 400; overflow: hidden; opacity: 0; -webkit-transition: opacity .42s cubic-bezier(.55,.055,.675,.19); transition: opacity .42s cubic-bezier(.55,.055,.675,.19); } .what-causes-myopia__past .iScrollVerticalScrollbar { position: absolute; right: 0; top: 0; height: 100%; width: 3px; opacity: .75; } .what-causes-myopia__past .iScrollIndicator { position: absolute; width: 100%; left: 0; top: 0; height: 0; background: #FFF; } .what-causes-myopia__past__scroll { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 400; } .what-causes-myopia__past__scroll__inner { padding: 140px 0; } @media (min-width:736px) and (max-width: 1068px){ .what-causes-myopia__past__scroll__inner { padding: 100px 0; } } @media (max-width:735px) { .what-causes-myopia__past__scroll__inner { padding: 60px 0; } } .what-causes-myopia__past.i-closed { -webkit-transition-delay: .07s; transition-delay: .07s; } .what-causes-myopia__past.i-opened { opacity: 1; -webkit-transition-duration: .28s; transition-duration: .28s; -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1); } .what-causes-myopia__past__bg { background-color: #57599f; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 399; } .what-causes-myopia__past__inner { position: relative; z-index: 401; -webkit-transition: -webkit-transform .42s cubic-bezier(.55,.055,.675,.19); transition: transform .42s cubic-bezier(.55,.055,.675,.19); } .what-causes-myopia__past__title { position: relative; margin-bottom: 40px; margin-left: -.05em; line-height: 1; font-size: 80px; color: #57de91; letter-spacing: -.05em; font-family: 'A&I Garamond',Georgia,Times,serif; opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); -webkit-transition: -webkit-transform .49s cubic-bezier(.215,.61,.355,1),opacity .35s cubic-bezier(.215,.61,.355,1); transition: transform .49s cubic-bezier(.215,.61,.355,1),opacity .35s cubic-bezier(.215,.61,.355,1); -webkit-transition-delay: .001s; transition-delay: .001s; } @media (min-width:736px) and (max-width: 1068px){ .what-causes-myopia__past__title { font-size: 70px; } } @media (max-width:735px) { .what-causes-myopia__past__title { margin-bottom: 10px; font-size: 40px; } } .i-closed .what-causes-myopia__past__title { -webkit-transform: translateX(-140px); -ms-transform: translateX(-140px); transform: translateX(-140px); -webkit-transition-timing-function: cubic-bezier(.55,.055,.675,.19); transition-timing-function: cubic-bezier(.55,.055,.675,.19); -webkit-transition-delay: .001s; transition-delay: .001s; } .i-opened .what-causes-myopia__past__title { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: .21s; transition-delay: .21s; } .what-causes-myopia__past__title__back { position: absolute; top: 0; left: -110px; bottom: 20px; width: 62px; -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); background-size: 62px 46px; background-position: center; background-repeat: no-repeat; cursor: pointer; background-image: url("../../images/ui/arrow-left.svg"); -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; } @media (max-width:1500px) { .what-causes-myopia__past__title__back { position: relative; display: inline-block; margin-right: 10px; height: 46px; left: 0; } } @media (min-width:736px) and (max-width: 1068px){ .what-causes-myopia__past__title__back { width: 50px; background-size: 40px 36.715px; } } @media (max-width:735px) { .what-causes-myopia__past__title__back { top: 10px; width: 30px; background-size: 30px 29.372px; } } .m-no-touch .what-causes-myopia__past__title__back:hover { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; } .what-causes-myopia__past__container { margin: 0 -13px; } .what-causes-myopia__past__container:after { display: block; content: ''; height: 0; overflow: hidden; clear: both; } .what-causes-myopia__past__column { float: left; width: 25%; opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); -webkit-transition: -webkit-transform .56s cubic-bezier(.215,.61,.355,1),opacity .42s cubic-bezier(.215,.61,.355,1); transition: transform .56s cubic-bezier(.215,.61,.355,1),opacity .42s cubic-bezier(.215,.61,.355,1); -webkit-transition-delay: .001s; transition-delay: .001s; } @media (max-width:1200px) { .what-causes-myopia__past__column { width: 33.3333%; } } @media (max-width:850px) { .what-causes-myopia__past__column { width: 50%; } } @media (max-width:600px) { .what-causes-myopia__past__column { width: 100%; } } .i-closed .what-causes-myopia__past__column { -webkit-transition: -webkit-transform .42s cubic-bezier(.55,.055,.675,.19),opacity .28s cubic-bezier(.55,.055,.675,.19); transition: transform .42s cubic-bezier(.55,.055,.675,.19),opacity .28s cubic-bezier(.55,.055,.675,.19); -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } .i-closed .what-causes-myopia__past__column:nth-child(1) { -webkit-transition-delay: .001s; transition-delay: .001s; } .i-closed .what-causes-myopia__past__column:nth-child(2) { -webkit-transition-delay: .075s; transition-delay: .075s; } .i-closed .what-causes-myopia__past__column:nth-child(3) { -webkit-transition-delay: .1695s; transition-delay: .1695s; } .i-closed .what-causes-myopia__past__column:nth-child(4) { -webkit-transition-delay: .264s; transition-delay: .264s; } .i-opened .what-causes-myopia__past__column { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .i-opened .what-causes-myopia__past__column:nth-child(1) { -webkit-transition-delay: .18s; transition-delay: .18s; } .i-opened .what-causes-myopia__past__column:nth-child(2) { -webkit-transition-delay: .239s; transition-delay: .239s; } .i-opened .what-causes-myopia__past__column:nth-child(3) { -webkit-transition-delay: .298s; transition-delay: .298s; } .i-opened .what-causes-myopia__past__column:nth-child(4) { -webkit-transition-delay: .357s; transition-delay: .357s; } .what-causes-myopia__past__item { display: block; padding: 0 13px; cursor: default; -webkit-transition: background-color .35s ease; transition: background-color .35s ease; } .what-causes-myopia__past__item__inner { display: block; padding: 20px 0 16px; border-bottom: 1px solid #686aa9; -webkit-transition: border-color .35s ease; transition: border-color .35s ease; } .what-causes-myopia__past__item:last-child .what-causes-myopia__past__item__inner { border-bottom: none; } .what-causes-myopia__past__item__title { display: block; color: #fff; font-size: 18px; letter-spacing: -.025em; -webkit-transition: color .35s ease; transition: color .35s ease; } .what-causes-myopia__past__item__place { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.005em; text-transform: uppercase; } .m-no-touch .what-causes-myopia__past__item.i-link { cursor: pointer; } .m-no-touch .what-causes-myopia__past__item.i-link:hover { background-color: #fff; } .m-no-touch .what-causes-myopia__past__item.i-link:hover,.m-no-touch .what-causes-myopia__past__item.i-link:hover .what-causes-myopia__past__item__inner,.m-no-touch .what-causes-myopia__past__item.i-link:hover .what-causes-myopia__past__item__title { -webkit-transition-duration: .175s; transition-duration: .175s; } .m-no-touch .what-causes-myopia__past__item.i-link:hover .what-causes-myopia__past__item__inner { border-color: #fff; } .m-no-touch .what-causes-myopia__past__item.i-link:hover .what-causes-myopia__past__item__title { color: #57599f; } .clients { position: relative; background: #fff; z-index: 100; padding-bottom: 100px; } @media (max-width: 735px){ .clients { position: relative; background: #fff; z-index: 100; padding-bottom: 0px; } .take-on-myopie-2 { padding-top: 30px !important; height: 190px !important; right: 0% !important; } } @media (min-width:736px) and (max-width: 1068px){ .clients { position: relative; background: #fff; z-index: 100; padding-bottom: 0px; } .take-on-myopie-2 { padding-top: 50px !important; height: 190px !important; right: -18vh !important; } } .intro-1 { position: relative; background: #fff; z-index: 100; } .intro-1 .page__screen { position: relative; padding: 100px 0 0px; min-height: 20vh; box-sizing: border-box; } @media (max-height: 900px) { .intro-1 .page__screen { position: relative; padding: 50px 0 0px; min-height: 20vh; box-sizing: border-box; } } .home__video__container { width: 100%; height: 100%; overflow: visible } @media only screen and (min-width: 750px) { .home__video__container { height: 45vw; max-height: none } } .home__video { height: 100vh; -o-object-fit: cover; object-fit: cover; overflow: hidden; position: absolute; z-index: -99; } @media only screen and (min-width: 940px) { .home__video { left: 0; width: 100% } } @media only screen and (min-width: 750px) { .home__video { left: -3vw; width: 103vw } } @media only screen and (min-width: 620px) { .home__video { left: -20vw; width: 120vw } } @media only screen and (min-width: 550px) { .home__video { left: -25vw; width: 125vw } } @media only screen and (min-width: 345px) { .home__video { left: -20vw; width: 120vw } } .home__hero__video { height: 100%; left: 0vw; position: relative; width: 100%; -o-object-fit: cover; object-fit: cover; top: -2px; -moz-transition: all 3.5s; -o-transition: all 3.5s; -webkit-transition: all 3.5s; transition: all 3.5s; } @media only screen and (min-width:750px) { .home__hero__video { left: 0vw; } } @media only screen and (min-width:940px) { .home__hero { margin-bottom: 0px; } } @media only screen and (min-width:940px) { .home__hero { margin-bottom: 0px; } } .home__hero__video__2 { height: 100%; left: 0vw; position: relative; width: 100vw; -o-object-fit: cover; object-fit: cover; top: -2px; -moz-transition: all 3.5s; -o-transition: all 3.5s; -webkit-transition: all 3.5s; transition: all 3.5s; width: 100% } @media only screen and (min-width:750px) { .home__hero__video__2 { } } @media (min-width:736px) and (max-width: 1068px){ .home__hero__video__2 { left: 0; width: 55% !important; margin-left: auto; margin-right: auto; } } .events { position: relative; padding: 0 0 50px; background: #fee9c7; box-sizing: border-box; z-index: 100; margin-bottom: -2px; } .m-touch .events { -webkit-transform: translateZ(0); transform: translateZ(0); position: initial; } @media (max-width:735px) { .events { padding-bottom: 0px; } } .events .page__title { color: #111; } .events .page__title__line { background-color: #111; } .events .page__text { color: #333; margin-bottom: 50px; } .events .page__text a { color: #333; border-color: #333; } .events .page__inner { box-sizing: border-box; } .section__items-wrap { margin: 0 -150px; padding-bottom: 40px; } .events__item { display: block; position: relative; padding: 0px 150px 28px; box-sizing: border-box; -webkit-transition: background-color .35s ease; transition: background-color .35s ease; } @media (max-width:735px) { .events__item { padding: 0px 150px; } } .home__hero__video__container { max-width: 850px; margin-left: auto; margin-right: auto; } @media (min-width:736px) and (max-width: 1068px){ .home__hero__video__container { max-width: 100%; text-align: center; } .purple__background { max-width: 83% !important; margin-bottom: 100px; } .eye__health__video__container { max-width: 100% !important; margin-left: auto; margin-right: auto; text-align: center; } .home__hero__video { left: 0; width: 75vw; } } .multiple__videos { max-width: 850px; margin-left: auto; margin-right: auto; display: none; height: 100%; left: 0vw; position: relative; width: 100vw; } @keyframes fade-in { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fade-in { /* Firefox */ from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fade-in { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } @-o-keyframes fade-in { /* Opera */ from { opacity:0; } to { opacity: 1; } } @keyframes fade-out { from { opacity:1; } to { opacity:0; } } @-moz-keyframes fade-out { /* Firefox */ from { opacity:1; } to { opacity:0; } } @-webkit-keyframes fade-out { /* Safari and Chrome */ from { opacity:1; } to { opacity:0; } } @-o-keyframes fade-out { /* Opera */ from { opacity:1; } to { opacity: 0; } } .eye__health__video__container { max-width: 855px; margin-left: auto; margin-right: auto; } .square-image { max-width: 400px; margin-left: 80px; } .events__item__inner { display: block; position: relative; margin: 0 auto; max-width: 1070px; box-sizing: border-box; } .events__item__inner:after { display: block; display: block; height: 0; overflow: hidden; clear: both; display: table; content: ''; } .events__item__inner__2 { display: block; position: relative; margin: 0 auto; max-width: 1070px; box-sizing: border-box; } .events__item__inner__2:after { display: block; height: 0; overflow: hidden; clear: both; display: table; content: ''; } .events__item__inner__link { display: inline-block; } .m-no-touch .events__item__inner__link:hover,.m-no-touch .events__item__inner__link:hover .events__item__date:before,.m-no-touch .events__item__inner__link:hover .events__item__title,.m-no-touch .events__item__inner__link:hover .events__item__title:after,.m-no-touch .events__item__inner__link:hover .events__item__place { -webkit-transition-duration: .2625s; transition-duration: .2625s; } .m-no-touch .events__item__inner__link:hover .events__item__title:after { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .m-no-touch .events__item__inner__link:hover .events__item__date:before { background-color: #57599f; } .m-no-touch .events__item__inner__link:hover .events__item__title { color: #57de91; } .events__item:nth-child(2n) .events__item__inner { } @media (max-width:735px) { .events__item:nth-child(2n) .events__item__inner { margin-left: auto; margin-right: auto; } .events__item__inner__2 { margin-bottom: -120px; } } .events__item__date { display: block; float: left; width: 115px; line-height: 1; font-size: 13px; font-weight: 700; color: #57de91; letter-spacing: .001em; text-transform: uppercase; } .events__item__date__line { display: block; margin-bottom: 18px; width: 100px; height: 2px; background-color: #1a1a1a; -webkit-transition: background-color .35s ease; transition: background-color .35s ease; } @media (max-width:735px) { .events__item__date { float: none; margin-bottom: 10px; font-size: 12px; } } .events__item__body { display: block; float: left; font-size: 80px; } @media (max-width:1300px) { .events__item__body { font-size: 60px; } } @media (min-width:736px) and (max-width: 1068px){ .events__item__body { font-size: 50px; } } @media (max-width:735px) { .events__item__body { float: none; font-size: 40px; } } @media (max-width:479px) { .events__item__body { font-size: 32px; } } .events__item__title { display: block; position: relative; left: -.05em; letter-spacing: -.055em; line-height: 1.02; color: #fff; -webkit-transition: color .35s ease; transition: color .35s ease; } .events__item__title:after { content: ''; display: inline-block; margin-left: 20px; height: 46px; width: 62px; opacity: 0; -webkit-transform: translateX(-15px); -ms-transform: translateX(-15px); transform: translateX(-15px); background-size: 62px 46px; background-position: center; background-repeat: no-repeat; background-image: url("../../images/ui/arrow-right-green.svg"); -webkit-transition: -webkit-transform .35s ease,opacity .175s ease; transition: transform .35s ease,opacity .175s ease; } @media (max-width:1300px) { .events__item__title:after { width: 40px; height: 36.715px; background-size: 40px 36.715px; } } @media (min-width:736px) and (max-width: 1068px){ .events__item__title:after { width: 30px; margin-left: 15px; height: 29.372px; background-size: 30px 29.372px; } } .events__item__place { display: block; font-family: 'A&I Garamond',Georgia,Times,serif; line-height: 1.275; letter-spacing: -.047em; -webkit-transition: color .35s ease; transition: color .35s ease; } .events__stats { position: relative; padding-top: 13px; color: #fff; } .events__stats:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } @media (max-width:990px) { .events__stats { text-align: center; } } @media (min-width:736px) and (max-width: 1068px){ .events__stats { padding-top: 20px; } } @media (max-width:735px) { .events__stats { margin: 0; text-align: center; border-top: none; } } .events__stats__line { margin: 87px auto 0; position: relative; height: 2px; background-color: #fff; } @media (max-width:735px) { .events__stats__line { margin: 0; display: none; } } .events__stats__item { float: left; } @media (max-width:735px) { .events__stats__item { display: none; } } .events__stats__items { float: left; } @media (max-width:990px) { .events__stats__items { margin-left: 32px; display: inline-block; text-align: left; float: none; } .events__stats__items:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } } .events__stats__item__count { font-size: 60px; margin-right: 3px; letter-spacing: -.03em; } @media (max-width:1260px) { .events__stats__item__count { font-size: 50px; } } @media (max-width:1110px) { .events__stats__item__count { font-size: 40px; } } @media (min-width:736px) and (max-width: 1068px){ .events__stats__item__count { font-size: 38px; } } .events__stats__item__label { display: inline-block; max-width: 90px; font-size: 13px; letter-spacing: -.001em; text-transform: uppercase; } @media (max-width:1110px) { .events__stats__item__label { font-size: 11px; } } .events__stats__item:before { content: '/'; margin: 0 14px 0 31px; display: inline-block; color: #686aa9; font-size: 60px; } @media (max-width:1260px) { .events__stats__item:before { font-size: 50px; margin: 0 2px 0 6px; } } @media (max-width:1110px) { .events__stats__item:before { font-size: 40px; } } .events__stats__item:first-child:before { display: none; content: ''; } .events__stats__btn { position: relative; float: left; margin-top: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 200px; color: #fff; text-align: center; } .events__stats__btn_ml { margin-left: 35px; } @media (max-width:500px) { .events__stats__btn_ml { margin-left: 0; } } @media (max-width:1260px) { .events__stats__btn { margin-top: 12px; } } @media (max-width:1110px) { .events__stats__btn { margin-top: 5px; margin-right: 4px; } } @media (max-width:990px) { .events__stats__btn { float: none; display: inline-block; } } @media (max-width:735px) { .events__stats__btn { display: inline-block; margin-top: 20px; float: none; margin-right: 0; } } @media (max-width:500px) { .events__stats__btn { display: block; margin: 0 auto 30px; } } .events__stats__btns { float: right; } @media (max-width:990px) { .events__stats__btns { float: none; text-align: center; } } .events__stats__btn__content { position: relative; display: block; padding: 6px 10px 5px; background-color: #57599f; border: 2px solid #fff; -webkit-transition: background-color .35s ease,color .35s ease,-webkit-transform .175s; transition: background-color .35s ease,color .35s ease,transform .175s; } @media (max-width:735px) { .events__stats__btn__content { margin-left: -2px; } } .m-no-touch .events__stats__btn:hover .events__stats__btn__content { background-color: #fff; color: #57599f; -webkit-transition-duration: .175s; transition-duration: .175s; -webkit-transform: translateX(-2px)translateY(-2px); -ms-transform: translateX(-2px)translateY(-2px); transform: translateX(-2px)translateY(-2px); } .m-touch .events__stats__btn:active .events__stats__btn__content,.m-no-touch .events__stats__btn:active .events__stats__btn__content { background-color: #fff; color: #57599f; -webkit-transform: translateX(2px)translateY(2px); -ms-transform: translateX(2px)translateY(2px); transform: translateX(2px)translateY(2px); } .events__stats__btn:before { position: absolute; display: block; content: ''; top: 4px; left: 4px; right: -4px; bottom: -4px; border: 2px solid #fff; } .events__past { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 400; overflow: hidden; opacity: 0; -webkit-transition: opacity .42s cubic-bezier(.55,.055,.675,.19); transition: opacity .42s cubic-bezier(.55,.055,.675,.19); } .events__past .iScrollVerticalScrollbar { position: absolute; right: 0; top: 0; height: 100%; width: 3px; opacity: .75; } .events__past .iScrollIndicator { position: absolute; width: 100%; left: 0; top: 0; height: 0; background: #FFF; } .events__past__scroll { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 400; } .events__past__scroll__inner { padding: 140px 0; } @media (min-width:736px) and (max-width: 1068px){ .events__past__scroll__inner { padding: 100px 0; } } @media (max-width:735px) { .events__past__scroll__inner { padding: 60px 0; } } .events__past.i-closed { -webkit-transition-delay: .07s; transition-delay: .07s; } .events__past.i-opened { opacity: 1; -webkit-transition-duration: .28s; transition-duration: .28s; -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1); } .events__past__bg { background-color: #57599f; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 399; } .events__past__inner { position: relative; z-index: 401; -webkit-transition: -webkit-transform .42s cubic-bezier(.55,.055,.675,.19); transition: transform .42s cubic-bezier(.55,.055,.675,.19); } .events__past__title { position: relative; margin-bottom: 40px; margin-left: -.05em; line-height: 1; font-size: 80px; color: #57de91; letter-spacing: -.05em; font-family: 'A&I Garamond',Georgia,Times,serif; opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); -webkit-transition: -webkit-transform .49s cubic-bezier(.215,.61,.355,1),opacity .35s cubic-bezier(.215,.61,.355,1); transition: transform .49s cubic-bezier(.215,.61,.355,1),opacity .35s cubic-bezier(.215,.61,.355,1); -webkit-transition-delay: .001s; transition-delay: .001s; } @media (min-width:736px) and (max-width: 1068px){ .events__past__title { font-size: 70px; } } @media (max-width:735px) { .events__past__title { margin-bottom: 10px; font-size: 40px; } } .i-closed .events__past__title { -webkit-transform: translateX(-140px); -ms-transform: translateX(-140px); transform: translateX(-140px); -webkit-transition-timing-function: cubic-bezier(.55,.055,.675,.19); transition-timing-function: cubic-bezier(.55,.055,.675,.19); -webkit-transition-delay: .001s; transition-delay: .001s; } .i-opened .events__past__title { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: .21s; transition-delay: .21s; } .events__past__title__back { position: absolute; top: 0; left: -110px; bottom: 20px; width: 62px; -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); background-size: 62px 46px; background-position: center; background-repeat: no-repeat; cursor: pointer; background-image: url("../../images/ui/arrow-left.svg"); -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; } @media (max-width:1500px) { .events__past__title__back { position: relative; display: inline-block; margin-right: 10px; height: 46px; left: 0; } } @media (min-width:736px) and (max-width: 1068px){ .events__past__title__back { width: 50px; background-size: 40px 36.715px; } } @media (max-width:735px) { .events__past__title__back { top: 10px; width: 30px; background-size: 30px 29.372px; } } .m-no-touch .events__past__title__back:hover { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; } .events__past__container { margin: 0 -13px; } .events__past__container:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } .events__past__column { float: left; width: 25%; opacity: 0; -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); -webkit-transition: -webkit-transform .56s cubic-bezier(.215,.61,.355,1),opacity .42s cubic-bezier(.215,.61,.355,1); transition: transform .56s cubic-bezier(.215,.61,.355,1),opacity .42s cubic-bezier(.215,.61,.355,1); -webkit-transition-delay: .001s; transition-delay: .001s; } @media (max-width:1200px) { .events__past__column { width: 33.3333%; } } @media (max-width:850px) { .events__past__column { width: 50%; } } @media (max-width:600px) { .events__past__column { width: 100%; } } .i-closed .events__past__column { -webkit-transition: -webkit-transform .42s cubic-bezier(.55,.055,.675,.19),opacity .28s cubic-bezier(.55,.055,.675,.19); transition: transform .42s cubic-bezier(.55,.055,.675,.19),opacity .28s cubic-bezier(.55,.055,.675,.19); -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } .i-closed .events__past__column:nth-child(1) { -webkit-transition-delay: .001s; transition-delay: .001s; } .i-closed .events__past__column:nth-child(2) { -webkit-transition-delay: .075s; transition-delay: .075s; } .i-closed .events__past__column:nth-child(3) { -webkit-transition-delay: .1695s; transition-delay: .1695s; } .i-closed .events__past__column:nth-child(4) { -webkit-transition-delay: .264s; transition-delay: .264s; } .i-opened .events__past__column { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .i-opened .events__past__column:nth-child(1) { -webkit-transition-delay: .18s; transition-delay: .18s; } .i-opened .events__past__column:nth-child(2) { -webkit-transition-delay: .239s; transition-delay: .239s; } .i-opened .events__past__column:nth-child(3) { -webkit-transition-delay: .298s; transition-delay: .298s; } .i-opened .events__past__column:nth-child(4) { -webkit-transition-delay: .357s; transition-delay: .357s; } .events__past__item { display: block; padding: 0 13px; cursor: default; -webkit-transition: background-color .35s ease; transition: background-color .35s ease; } .events__past__item__inner { display: block; padding: 20px 0 16px; border-bottom: 1px solid #686aa9; -webkit-transition: border-color .35s ease; transition: border-color .35s ease; } .events__past__item:last-child .events__past__item__inner { border-bottom: none; } .events__past__item__title { display: block; color: #fff; font-size: 18px; letter-spacing: -.025em; -webkit-transition: color .35s ease; transition: color .35s ease; } .events__past__item__place { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.005em; text-transform: uppercase; } .m-no-touch .events__past__item.i-link { cursor: pointer; } .m-no-touch .events__past__item.i-link:hover { background-color: #fff; } .m-no-touch .events__past__item.i-link:hover,.m-no-touch .events__past__item.i-link:hover .events__past__item__inner,.m-no-touch .events__past__item.i-link:hover .events__past__item__title { -webkit-transition-duration: .175s; transition-duration: .175s; } .m-no-touch .events__past__item.i-link:hover .events__past__item__inner { border-color: #fff; } .m-no-touch .events__past__item.i-link:hover .events__past__item__title { color: #57599f; } .m-touch .clients { -webkit-transform: translateZ(0); transform: translateZ(0); } .clients .page__title { color: #000; } .clients .page__title__line { background-color: #e3e897; } .clients .page__text { color: #333; } .clients .page__text a { color: #333; border-color: #333; } .clients__logos { padding-bottom: 20px; } .clients__logos:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } @media (max-width:735px) { .clients__logos { display: none; } } .clients__logos__item { position: relative; float: left; width: 16.66666%; text-align: center; } .clients__logos__item:after { content: ''; display: block; margin-bottom: 80%; } .clients__logos__item__inner { position: absolute; padding: 10px; top: 0; right: 0; bottom: 0; left: 0; } .clients__logos__item__inner:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .clients__logos__item__img { display: inline-block; vertical-align: middle; max-width: 95%; } .clients__logos_phone { display: none; position: relative; } .clients__logos_phone__inner { margin-bottom: 50px; } .clients__logos_phone__item { width: 50%; float: left; } .clients__logos_phone__item:after { margin-bottom: 110px; } @media (max-width:735px) { .clients__logos_phone { display: block; } } .clients__logos_phone__pagination { position: absolute; bottom: 20px!important; left: 0; right: 0; } .clients__logos_phone__pagination .swiper-pagination-bullet { width: 10px; height: 10px; background-color: transparent; border: 2px solid #fff; box-sizing: border-box; opacity: 1; -webkit-transition: background-color .35s ease; transition: background-color .35s ease; } .clients__logos_phone__pagination .swiper-pagination-bullet-active { background-color: #fff; -webkit-transition-duration: .175s; transition-duration: .175s; } .clients__logos__line { margin: 0 auto; position: relative; height: 2px; background-color: #fff; } .clients__stats { padding: 45px 0; } .clients__stats:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } .clients__stats__item { position: relative; float: left; width: 16.66666%; text-align: center; box-sizing: border-box; } @media (max-width:1300px) { .clients__stats__item { margin-bottom: 40px; width: 33.333%; } } @media (max-width:600px) { .clients__stats__item { width: 50%; } } .clients__stats__item__value { margin-bottom: 18px; font-size: 60px; line-height: 60px; letter-spacing: -.025em; } .clients__stats__item__value__book { display: inline-block; position: relative; top: 5px; } .clients__stats__item__value_plus,.clients__stats__item__value_percent { vertical-align: middle; } .clients__stats__item__value_plus:after,.clients__stats__item__value_percent:after { display: inline-block; font-size: 40px; line-height: 40px; } .clients__stats__item__value_plus:after { position: relative; top: -7px; content: '+'; } .clients__stats__item__value_percent:after { content: '%'; } .clients__stats__item__label { font-size: 13px; text-transform: uppercase; letter-spacing: -.02em; line-height: 19px; font-weight: 700; } @media (max-width:1300px) { .clients__stats__item__label { font-size: 12px; } } .myopia__causes { margin-top: 0px; } @media (max-width:735px) { .myopia__causes { margin-top: -45px; padding: 0 0px; } .myopia__causes__item_misight { padding-top: 0; height: 37vw; } .myopia__causes__item_misight .myopia__causes__item__img { right: -9vw !important; height: 112vw !important; } } .myopia__causes__item { position: relative; } .myopia__causes__item__img { display: block; top: 0vh; position: absolute; } .myopia__causes__item__body { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .active-control { font-family: "Foundry Sterling Bold", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; display: initial; } .myopia__causes__item_misight { padding-top: 110px; height: 150px; } .myopia__causes__item_misight .myopia__causes__item__body { left: 60%; } @media (min-width:736px) and (max-width: 1068px){ .myopia__causes__item_misight .myopia__causes__item__body { left: 55%; } .myopia__causes__item_misight { padding-top: 0; height: 25vw; } } .myopia__causes__item_misight .myopia__causes__item__img { right: 10vw; height: 1100px; } @media (max-width:1300px) { .myopia__causes__item_misight .myopia__causes__item__img { right: 10vw; } } .take-on-myopie-2 { padding-top: 10px; height: 180px; right: -32%; } .take-on-myopie-2 .myopia__causes__item__body { left: 60%; } @media (min-width:736px) and (max-width: 1068px){ .take-on-myopie-2 .myopia__causes__item__body { left: 55%; } } .take-on-myopie-2 .take-on-myopie-2__item__img { right: 10vw; height: 350px; opacity: 0.9; } @media (min-width:736px) and (max-width: 1068px){ .take-on-myopie-2 .take-on-myopie-2__item__img { right: 30%; } } @media (max-width: 735px){ .take-on-myopie-2 .take-on-myopie-2__item__img { right: 30%; } .take-on-myopie-2 .take-on-myopie-2__item__img { right: 10vw; height: 350px; opacity: 0.9; } .myopia__causes__item__body { padding-left: 0px !important; padding-right: 0px !important; } } .myopia__causes__item_urban-walks .myopia__causes__item__body { left: 0%; } @media (min-width:1069px) { .myopia__causes__item_urban-walks { padding-top: 220px; height: 50px; } .myopia__causes__item_urban-walks { padding-top: 480px; height: 300px; } } .myopia__causes__item_urban-walks .myopia__causes__item__body { left: 10%; right: 10%; } @media (min-width:1069px) { .myopia__causes__item_urban-walks .myopia__causes__item__img { left: 730px; height: 490px; opacity: 0.9; } } @media (min-width:735px) and (max-width: 1068px){ .myopia__causes__item_urban-walks .myopia__causes__item__img { left: 55vw; height: 40vw; } .myopia__causes__item_urban-walks { padding-top: 45vw !important; height: 300px !important; } .misight-block-2 { margin-top: 0px !important; padding-top: 200px; } } @media (min-width:667px) and (max-width: 734px){ .myopia__causes__item_urban-walks .myopia__causes__item__img { height: 250px; opacity: 0.9; left: 52vw; top: -230px; } .myopia__causes__item_misight { padding-top: 310px; } } @media (max-width:665px) { .myopia__causes__item_urban-walks .myopia__causes__item__img { height: 200px !important; opacity: 0.9 !important; left: 42vw !important; top: -200px; } .myopia__causes__item_misight { padding-top: 180px; } } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } .myopia__causes__item__title { color: #333; white-space: nowrap; margin-left: -.05em; letter-spacing: -.05em; max-width: 900px; margin: 0 auto 20px; padding: 0 20px; font-size: 38px; text-align: center; line-height: 1.38105; } .myopia__causes__item__text { line-height: .95; text-align: center; letter-spacing: -.04em; font: 58px/1.1 "Foundry Sterling Bold", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-style: normal; color: #111; font-variant-ligatures: no-common-ligatures; } @media (max-width:735px) { .myopia__causes__item__title { color: #333; white-space: nowrap; margin-left: -.05em; letter-spacing: -.05em; max-width: 900px; margin: 0 auto 20px; padding: 0 20px; font-size: 22px; text-align: left; line-height: 1.38105; width: 88%; } .page-teaching-tools { margin-top: 0px; } .myopia__causes__item__text { line-height: .95; letter-spacing: -.04em; font: 38px/1.225 "Foundry Sterling Bold", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; font-weight: 400; font-style: normal; color: #111; margin-left: auto; margin-right: auto; max-width: 88%; text-align: left; } } @media (min-width:736px) and (max-width: 1068px){ .misight-block-2 { margin-top: 0px; } .myopia__causes__item__link { } .myopia__causes_phone { display: none; padding-bottom: 65px; } @media (max-width:735px) { .myopia__causes_phone { display: block; } } .myopia__causes_phone__item { padding: 5px 0; } .myopia__causes_phone__item__img { margin-bottom: 15px; display: block; width: 100%; box-shadow: 0 1px 1px rgba(0,0,0,.2); } .myopia__causes_phone__item__title { margin-left: -.05em; margin-bottom: 10px; line-height: 1; font-size: 40px; color: #fff; } .myopia__causes_phone__pagination { position: absolute; bottom: 0; left: 0; right: 0; } .myopia__causes_phone__pagination .swiper-pagination-bullet { width: 10px; height: 10px; background-color: transparent; border: 2px solid #fff; box-sizing: border-box; opacity: 1; -webkit-transition: background-color .35s ease; transition: background-color .35s ease; } .myopia__causes_phone__pagination .swiper-pagination-bullet-active { background-color: #fff; -webkit-transition-duration: .175s; transition-duration: .175s; } .about { position: relative; background-color: #fff; z-index: 100; padding-bottom: 150px; -webkit-transition: background-color .35s ease; transition: background-color .35s ease; } .what-causes-myopia { position: relative; background-color: #5e267c; z-index: 100; padding-bottom: 150px; -webkit-transition: background-color .35s ease; transition: background-color .35s ease; } .m-touch .about { -webkit-transform: translateZ(0); transform: translateZ(0); } .about .page__screen { margin-bottom: 0; min-height: initial; } .about .page__title { color: #000; } .about .page__title__line { background-color: #5f8db2; } .about .page__text { color: #1a1a1a; margin-bottom: 100px; } .about .page__text a { color: #1a1a1a; border-color: #1a1a1a; } .about__scene { position: relative; display: inline-block; vertical-align: middle; width: 90%; background-color: #f4f8fd; -webkit-transition-property: -webkit-transform; transition-property: transform; } .about__scene,.about__scene.i-move { -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1); -webkit-transition-duration: .42s; transition-duration: .42s; } .about__scene.i-move { -webkit-transition-property: -webkit-transform,-webkit-transform-origin; transition-property: transform,-ms-transform-origin; transition-property: transform,transform-origin; } .m-touch .about__scene { width: 100%; } .about__scene__space { height: 125vh; } .m-touch .about__scene__space { height: 0; } .about__scene__wrap { position: fixed; top: -50%; left: -10%; width: 120%; bottom: -50%; text-align: center; -webkit-transform: translateZ(0); transform: translateZ(0); } .about__scene__wrap.i-loading.i-hidden { display: block; left: -150%; } .m-touch .about__scene__wrap { margin: -100px -20%; width: auto; position: relative; top: auto; right: auto; bottom: auto; left: auto; } .about__scene__wrap.i-transition-opacity { -webkit-transition: opacity .35s cubic-bezier(.215,.61,.355,1); transition: opacity .35s cubic-bezier(.215,.61,.355,1); } .about__scene__wrap:after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .i-info-anton .about__scene,.i-info-irene .about__scene { opacity: 1!important; } .about__scene__pagemask { position: absolute; right: 0; left: 0; height: 4000px; background-color: rgba(52,66,88,.1); opacity: 0; pointer-events: none; -webkit-transition: opacity .35s ease; transition: opacity .35s ease; } .about__scene__pagemask_top { bottom: 100%; } .about__scene__pagemask_bot { top: 100%; } .about__scene__pagemask.i-focused { opacity: 1; -webkit-transition-duration: .175s; transition-duration: .175s; } .i-info-anton .about__scene__pagemask.i-focused,.i-info-irene .about__scene__pagemask.i-focused { opacity: 0; } .about__scene__bg { display: block; width: 100%; -webkit-transform: translateZ(0); transform: translateZ(0); } .about__scene__hover { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; background-size: 100% 100%; -webkit-transition: opacity .35s ease; transition: opacity .35s ease; } .about__scene__hover.i-focused { opacity: 1; -webkit-transition-duration: .175s; transition-duration: .175s; } .i-info-anton .about__scene__hover.i-focused,.i-info-irene .about__scene__hover.i-focused { opacity: 0; } .about__scene__anton,.about__scene__irene { position: absolute; } .about__scene__anton__btn,.about__scene__irene__btn { opacity: 0; position: absolute; float: left; margin-top: 25px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 200px; font-size: 18px; color: #1a1a1a; text-align: center; -webkit-transform: translateY(5%); -ms-transform: translateY(5%); transform: translateY(5%); -webkit-transition: opacity .175s ease,-webkit-transform .175s ease; transition: opacity .175s ease,transform .175s ease; } .i-hoverable .about__scene__anton__btn,.i-hoverable .about__scene__irene__btn { cursor: pointer; } @media (min-width:736px) and (max-width: 1068px){ .about__scene__anton__btn,.about__scene__irene__btn { font-size: 16px; width: 170px; } } @media (max-width:735px) { .about__scene__anton__btn,.about__scene__irene__btn { font-size: 14px; } } @media (max-width:479px) { .about__scene__anton__btn,.about__scene__irene__btn { font-size: 13px; } } .about__scene__anton__btn__content,.about__scene__irene__btn__content { position: relative; display: block; padding: 6px 10px 5px; background-color: #fff; border: 2px solid #1a1a1a; -webkit-transition: -webkit-transform .175s; transition: transform .175s; } @media (min-width:736px) and (max-width: 1068px){ .about__scene__anton__btn__content,.about__scene__irene__btn__content { padding: 5px 5px 4px; } } .about__scene__anton__btn:before,.about__scene__irene__btn:before { position: absolute; display: block; content: ''; top: 4px; left: 4px; right: -4px; bottom: -4px; border: 2px solid #1a1a1a; -webkit-transition: background-color .35s ease,-webkit-transform .175s; transition: background-color .35s ease,transform .175s; } .m-no-touch .about__scene__anton__btn:hover .about__scene__anton__btn__content,.m-no-touch .about__scene__anton__btn:hover .about__scene__irene__btn__content,.m-no-touch .about__scene__irene__btn:hover .about__scene__anton__btn__content,.m-no-touch .about__scene__irene__btn:hover .about__scene__irene__btn__content { -webkit-transition-duration: .175s; transition-duration: .175s; -webkit-transform: translateX(-2px)translateY(-2px); -ms-transform: translateX(-2px)translateY(-2px); transform: translateX(-2px)translateY(-2px); } .m-touch .about__scene__anton__btn:active .about__scene__anton__btn__content,.m-touch .about__scene__anton__btn:active .about__scene__irene__btn__content,.m-touch .about__scene__irene__btn:active .about__scene__anton__btn__content,.m-touch .about__scene__irene__btn:active .about__scene__irene__btn__content,.m-no-touch .about__scene__anton__btn:active .about__scene__anton__btn__content,.m-no-touch .about__scene__anton__btn:active .about__scene__irene__btn__content,.m-no-touch .about__scene__irene__btn:active .about__scene__anton__btn__content,.m-no-touch .about__scene__irene__btn:active .about__scene__irene__btn__content { -webkit-transform: translateX(2px)translateY(2px); -ms-transform: translateX(2px)translateY(2px); transform: translateX(2px)translateY(2px); } .m-no-touch .about__scene__anton__btn:hover:before,.m-no-touch .about__scene__irene__btn:hover:before,.m-touch .about__scene__anton__btn:active:before,.m-touch .about__scene__irene__btn:active:before,.m-no-touch .about__scene__anton__btn:active:before,.m-no-touch .about__scene__irene__btn:active:before { background-color: #fff; } .about__scene.i-hoverable .about__scene__anton,.about__scene.i-hoverable .about__scene__irene { cursor: pointer; } .m-no-touch .about__scene.i-hoverable .about__scene__anton:hover .about__scene__anton__btn,.m-no-touch .about__scene.i-hoverable .about__scene__irene:hover .about__scene__anton__btn,.m-no-touch .about__scene.i-hoverable .about__scene__anton:hover .about__scene__irene__btn,.m-no-touch .about__scene.i-hoverable .about__scene__irene:hover .about__scene__irene__btn { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition-duration: .175s; transition-duration: .175s; } .about__scene__anton { top: 25%; right: 50.5%; bottom: 22.5%; left: 12.5%; border-radius: 40% 30% 50% 10%; } .about__scene__anton__btn { top: 34%; left: 70%; } .about__scene__irene { top: 26%; right: 15%; bottom: 21%; left: 59%; border-radius: 5% 50% 25% 25%; } .about__scene__irene__btn { bottom: 20%; right: 85%; } .about__scene__snow { overflow: hidden; } .about__scene__snow,.about__scene__snow:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform: translateZ(0); transform: translateZ(0); } .about__scene__snow:after { content: ''; pointer-events: none; background: -webkit-linear-gradient(#f4f8fd,rgba(255,255,255,0)15%,rgba(255,255,255,0)85%,#f4f8fd); background: linear-gradient(#f4f8fd,rgba(255,255,255,0)15%,rgba(255,255,255,0)85%,#f4f8fd); } .i-i.001nfo-anton .about__scene__snow:after,.i-info-irene .about__scene__snow:after { display: none; } .about__scene__snow__item { display: block; position: absolute; top: 0; left: 0; margin-top: -35%; margin-left: -35%; width: 175%; } .about__scene__info { position: fixed; z-index: 1001; top: 40%; } @media (max-height:730px) { .about__scene__info { top: auto; bottom: 40px; } } .about__scene__info__close { z-index: 1002; } .about__scene__info__subtitle,.about__scene__info__text { z-index: 1002; position: relative; } .about__scene__info__title,.about__scene__info__column { z-index: 1002; } .about__scene__info__line { z-index: 1002; position: relative; } .about__scene__info__close { position: fixed; top: 80px; right: 20px; cursor: pointer; opacity: 0; -webkit-transition: opacity .175s ease; transition: opacity .175s ease; } .about__scene__info__close.i-opened { opacity: .65; } .about__scene__info__close.i-opened:hover { opacity: 1; } .about__scene__info__line { width: 120px; height: 2px; background-color: #1a1a1a; margin: 20px 0 23px; opacity: 0; -webkit-transition: opacity .35s cubic-bezier(.645,.045,.355,1),width .35s cubic-bezier(.645,.045,.355,1),-webkit-transform .35s cubic-bezier(.645,.045,.355,1); transition: opacity .35s cubic-bezier(.645,.045,.355,1),width .35s cubic-bezier(.645,.045,.355,1),transform .35s cubic-bezier(.645,.045,.355,1); } .i-info-anton .about__scene__info__line { -webkit-transform: translateX(12px); -ms-transform: translateX(12px); transform: translateX(12px); } .i-info-irene .about__scene__info__line { -webkit-transform: translateX(-12px); -ms-transform: translateX(-12px); transform: translateX(-12px); } .about__scene__info.i-opened .about__scene__info__line { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } .about__scene__info__column { position: relative; float: left; margin: 0 30px; } @media (max-width:1068px),(max-height:730px) { .about__scene__info__column { margin: 0 10px; } } .about__scene__info_anton { left: 50%; } @media (max-width:1220px) { .about__scene__info_anton { left: auto; right: 0; } } @media (min-width:736px) and (max-width: 1068px){ .about__scene__info_anton { right: 20px; } } .about__scene__info_irene { right: 50%; } @media (max-width:1220px) { .about__scene__info_irene { right: auto; left: 0; } } @media (min-width:736px) and (max-width: 1068px){ .about__scene__info_irene { left: 20px; } } .about__scene__info__title { position: relative; margin: 0 30px 35px; line-height: 1; font-size: 80px; letter-spacing: -.065em; } @media (max-width:1068px),(max-height:730px) { .about__scene__info__title { font-size: 60px; margin: 0 10px 20px; } } .about__scene__info_irene .about__scene__info__title { left: -.05em; } .about__scene__info__text { font-size: 17px; font-family: 'A&I Garamond',Georgia,Times,serif; max-width: 240px; } .about__scene__info__subtitle { margin-bottom: 8px; font-size: 13px; text-transform: uppercase; font-weight: 700; } .about__scene__info__title,.about__scene__info__subtitle,.about__scene__info__text { opacity: 0; -webkit-transition: opacity .4025s cubic-bezier(.645,.045,.355,1),-webkit-transform .4375s cubic-bezier(.645,.045,.355,1); transition: opacity .4025s cubic-bezier(.645,.045,.355,1),transform .4375s cubic-bezier(.645,.045,.355,1); } .i-info-anton .about__scene__info__title,.i-info-anton .about__scene__info__subtitle,.i-info-anton .about__scene__info__text { -webkit-transform: translateX(12px); -ms-transform: translateX(12px); transform: translateX(12px); } .i-info-irene .about__scene__info__title,.i-info-irene .about__scene__info__subtitle,.i-info-irene .about__scene__info__text { -webkit-transform: translateX(-12px); -ms-transform: translateX(-12px); transform: translateX(-12px); } .about__scene__info.i-opened .about__scene__info__title,.about__scene__info.i-opened .about__scene__info__subtitle,.about__scene__info.i-opened .about__scene__info__text { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } .about__scene__info__switch { position: fixed; z-index: 1000; top: 0; bottom: 0; width: 25%; cursor: pointer; -webkit-transition: opacity .35s ease; transition: opacity .35s ease; opacity: 0; } .about__scene__info__switch:hover { opacity: .5!important; } .about__scene__info__switch_anton { right: 0; background: -webkit-linear-gradient(left,rgba(255,255,255,0),#fff); background: linear-gradient(to right,rgba(255,255,255,0),#fff); } .about__scene__info__switch_irene { left: 0; background: -webkit-linear-gradient(right,rgba(255,255,255,0),#fff); background: linear-gradient(to left,rgba(255,255,255,0),#fff); } .about__scene__info.i-opened .about__scene__info__switch { opacity: 1; } .contact { position: relative; background: #fafafa; z-index: 100; } .contact:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } .m-touch .contact { -webkit-transform: translateZ(0); transform: translateZ(0); padding-bottom: 160px; } .contact .page__title { color: #fff; } .contact .page__title__line { background-color: #eba722; } .contact .page__text { color: #1a1a1a; max-width: 770px; } .contact .page__text a { color: #1a1a1a; border-color: #1a1a1a; } .contact__screen { position: relative; z-index: 101; min-height: 100vh; } .contact__screen:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } .m-touch .contact__screen { min-height: initial; } .m-touch .contact__screen .page__inner:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } .contact__mark { position: fixed; z-index: 110; left: 50%; top: 50%; margin-left: -33px; margin-top: -81px; padding-bottom: 18px; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } @media (max-width:735px) { .contact__mark { display: none!important; } } .contact__mark__content { display: block; overflow: hidden; width: 60px; height: 60px; background: #1a1a1a; color: #FFF; font-size: 11px; line-height: 62px; border: 2px solid #FFF; border-radius: 50%; text-align: center; text-transform: uppercase; -webkit-transition: color .35s,background-color .35s; transition: color .35s,background-color .35s; } .contact__mark:hover .contact__mark__content { -webkit-transition-duration: .175s; transition-duration: .175s; background-color: #FFF; color: #1a1a1a; } .contact__mark:after { position: absolute; bottom: 0; left: 50%; width: 2px; margin-left: -1px; height: 18px; background: red; content: ''; } .contact__place { position: relative; box-sizing: border-box; } .contact__place:after { display: block; content: ''; height: 0; overflow: hidden; clear: both; } .contact__place__map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; background-color: #5e267c!important; } .contact__place__map__wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; } .contact__place .page__inner { overflow: visible; } @media (max-width:735px) { .contact__place .page__inner { height: auto; max-width: 240px; margin: 0; } } .contact__place__column { position: relative; max-width: 240px; } .contact__place__column__line { display: block; width: 50%; height: 2px; background-color: #1a1a1a; } @media (max-width:735px) { .contact__place__column__line { display: none; } } .contact__place__column_follow:before { border-top: none; } .contact__place__column_follow .contact__place__link__wrap { display: block; margin-right: 15px; } .contact__place__column_right { position: absolute; top: 0; right: 0; } @media (max-width:1360px) { .contact__place__column_right { padding-right: 50px; } } @media (max-width:1300px) { .contact__place__column_right { padding-right: 10px; } } @media (max-width:735px) { .contact__place__column { position: static; } .contact__place__column_right .contact__place__text { display: none; } } .contact__place__title { margin: 30px 0 20px -.05em; font-size: 80px; color: #fff; line-height: 1; white-space: nowrap; letter-spacing: -.06em; } @media (max-width:1300px) { .contact__place__title { font-size: 60px; margin-bottom: 10px; } } @media (min-width:736px) and (max-width: 1068px){ .contact__place__title { font-size: 50px; } } .contact__place__text { margin-bottom: 20px; font-size: 16px; font-family: 'A&I Garamond',Georgia,Times,serif; } @media (max-width:1300px) { .contact__place__text { margin-bottom: 10px; } } .contact__place__link { display: inline; font-size: 10px; border-bottom: 1px solid #1a1a1a; -webkit-transition: color .35s ease,border-color .35s ease; transition: color .35s ease,border-color .35s ease; } .contact__place__link:hover { color: #fff; border-color: #fff; -webkit-transition-duration: .175s; transition-duration: .175s; } .contact__place__link__wrap { -webkit-transform: translateZ(0); transform: translateZ(0); margin-bottom: 5px; } .contact__place__link__wrap_mb { margin-bottom: 30px; } .contact__place__link__text { font-size: 18px; } @media (min-width:736px) and (max-width: 1068px){ .contact__place__link__text { font-size: 16px; } } .contact__photos { position: relative; width: 140%; left: -20%; } .m-touch .contact__photos { margin-top: 40px; } @media (max-width:735px) { .contact__photos { width: 250%; left: -75%; } } .contact__photos__left,.contact__photos__right { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: calc(10% + 90px); z-index: 99; bottom: 0; width: calc(33.333% - 10px); background-size: 62px 46px; background-repeat: no-repeat; cursor: pointer; -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; } .m-touch .contact__photos__left,.m-touch .contact__photos__right { display: none; } .contact__photos__left:hover,.contact__photos__right:hover { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; } .contact__photos__left { left: 0; -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); background-position: calc(50% + 40px)50%; background-image: url("../../images/ui/arrow-left.svg"); } .contact__photos__right { right: 0; -webkit-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); background-position: calc(50% - 40px)50%; background-image: url("../../images/ui/arrow-right.svg"); } .contact__photos__item__inner { padding: 10% 5px 5px; -webkit-transition: -webkit-transform .315s cubic-bezier(.39,.575,.565,1); transition: transform .315s cubic-bezier(.39,.575,.565,1); } @media (max-width:735px) { .contact__photos__item__inner { padding-left: 0; padding-right: 0; } } .contact__photos__item__number { display: inline-block; position: relative; line-height: 1; left: 20px; top: 30px; color: #fff; font-size: 80px; letter-spacing: -.05em; } @media (min-width:736px) and (max-width: 1068px){ .contact__photos__item__number { font-size: 60px; top: 20px; } } @media (max-width:735px) { .contact__photos__item__number { font-size: 40px; top: 18px; } } .contact__photos__item__number:before { position: relative; margin-bottom: 5px; left: 2%; content: ''; display: block; width: 92%; border-top: 2px solid #1a1a1a; } .contact__photos__item__img { display: block; width: 100%; } @media (max-width:735px) { .contact__photos__item__img { box-shadow: 0 1px 1px rgba(0,0,0,.2); } } .press { position: relative; background: #fff; z-index: 1; } .m-touch .press { -webkit-transform: translateZ(0); transform: translateZ(0); } .press .page__title { color: #111; font: 48px/1.1 "Foundry Sterling Demi", Arial, Helvetica, "宋体", "SimSun", "Nimbus Sans L", sans-serif; max-width: 1070px!important; margin-left: auto!important; margin-right: auto!important; } .press .page__title__line { background-color: #eeef8a; } .press .page__text { color: #333; } .press .page__text a { color: #333; border-color: #333; } .press__screen { box-sizing: border-box; padding-bottom: 80px; } @media (max-width:735px) { .press__screen { padding-bottom: 30px; } } .m-touch .press__screen { min-height: initial; } .press__quotes { position: relative; margin-bottom: 80px; font-size: 80px; box-sizing: border-box; min-height: 6em; font-family: 'A&I Garamond',Georgia,Times,serif; } .press__quotes:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } @media (max-width:1300px) { .press__quotes { font-size: 60px; } } @media (min-width:736px) and (max-width: 1068px){ .press__quotes { font-size: 50px; } } @media (max-width:735px) { .press__quotes { padding-top: 1.8em; min-height: 6.3em; } } .press__quotes__control { position: absolute; z-index: 105; top: 0; right: 0; width: 240px; } .press__quotes__control:after { display: block; content: ''; height: 0; overflow: hidden; clear: both; } @media (max-width:735px) { .press__quotes__control { width: auto; } } .press__quotes__control__left,.press__quotes__control__right { position: relative; z-index: 102; display: block; width: 50%; height: 46px; float: left; background-size: 62px 46px; background-position: center; background-repeat: no-repeat; cursor: pointer; -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; } @media (max-width:735px) { .press__quotes__control__left,.press__quotes__control__right { width: 62px; } } @media (max-width:375px) { .press__quotes__control__left,.press__quotes__control__right { width: 40px; background-size: 40px 36.715px; } } .m-no-touch .press__quotes__control__left:hover,.m-no-touch .press__quotes__control__right:hover { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; } .press__quotes__control__left { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); background-image: url("../../images/ui/arrow-left-yellow.svg"); } .press__quotes__control__right { -webkit-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); background-image: url("../../images/ui/arrow-right-yellow.svg"); } @media (max-width:735px) { .press__quotes__control__right { margin-left: 25px; } } .press__quotes__item { position: relative; z-index: 101; -webkit-transition: opacity .35s ease; transition: opacity .35s ease; } .press__quotes__item:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } .press__quotes__item.i-invisible { opacity: 0; } .press__quotes__item__text { float: left; position: relative; padding-right: 260px; box-sizing: border-box; width: 100%; color: #fff; opacity: .5; font-size: 80px; font-family: 'A&I Garamond',Georgia,Times,serif; line-height: 1; letter-spacing: -.04em; -webkit-transition: -webkit-transform .35s cubic-bezier(.215,.61,.355,1); transition: transform .35s cubic-bezier(.215,.61,.355,1); } @media (max-width:1290px) { .press__quotes__item__text { padding-left: 20px; } } @media (max-width:1300px) { .press__quotes__item__text { font-size: 60px; } } @media (min-width:736px) and (max-width: 1068px){ .press__quotes__item__text { font-size: 50px; } } @media (max-width:735px) { .press__quotes__item__text { font-size: 36px; padding-right: 0; opacity: .6; padding-left: 0; } } .i-left .press__quotes__item__text,.i-right .press__quotes__item__text { -webkit-transition-timing-function: cubic-bezier(.55,.055,.675,.19); transition-timing-function: cubic-bezier(.55,.055,.675,.19); } .i-left .press__quotes__item__text { -webkit-transform: translateX(-6%); -ms-transform: translateX(-6%); transform: translateX(-6%); } .i-right .press__quotes__item__text { -webkit-transform: translateX(6%); -ms-transform: translateX(6%); transform: translateX(6%); } .press__quotes__item__label { position: absolute; z-index: 102; top: 80px; right: 0; width: 240px; font-size: 18px; padding-left: 35px; box-sizing: border-box; font-family: 'A&I Circular',Arial,Helvetica,sans-serif; } @media (max-width:735px) { .press__quotes__item__label { right: auto; left: 0; top: -90px; padding-left: 0; } } .press__quotes__item__label__title,.press__quotes__item__label__source { letter-spacing: -.04em; } .press__quotes__item__label__title { display: block; color: #fff; font-size: 13px; text-transform: uppercase; } .press__quotes__item__label__source { display: inline; font-size: 18px; border-bottom: 1px solid #1a1a1a; } .press__sources__container { margin: 0 -13px 80px; } .press__sources__container:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } .press__sources__column { width: 25%; float: left; } @media (max-width:1200px) { .press__sources__column { width: 33.3333%; } } @media (max-width:850px) { .press__sources__column { width: 50%; } } @media (max-width:600px) { .press__sources__column { width: 100%; } } .press__sources__item { padding: 0 13px; } .press__sources__item__inner { padding: 20px 0 16px; margin-top: -1px; border-top: 1px solid transparent; border-bottom: 1px solid #f6dddf; } .footer { background-color: #242529; position: relative; z-index: 100; color: #61636a; } .m-touch .footer { -webkit-transform: translateZ(0); transform: translateZ(0); } .footer__work { padding-top: 70px; padding-bottom: 140px; } @media (max-width:900px) { .footer__work { padding-top: 55px; padding-bottom: 75px; } } .footer__work__title { display: block; width: 283px; height: 80px; margin: 0 auto 95px; background: url("../images/footer/love.png") no-repeat; background-size: 283px auto; } @media (max-width:900px) { .footer__work__title { margin-bottom: 50px; } } .footer__work__list { margin-left: -20px; margin-right: -20px; } .footer__work__list:after { display: block; display: block; content: ''; height: 0; overflow: hidden; clear: both; } @media (max-width:620px) { .footer__work__list { margin-left: 0; margin-right: 0; } } .footer__work__item { float: left; display: block; box-sizing: border-box; width: 50%; padding: 0 20px; color: #61636a; } @media (max-width:620px) { .footer__work__item { width: auto; float: none; margin-bottom: 35px; } } .footer__work__item__picture { display: block; position: relative; margin-bottom: 28px; } @media (max-width:900px) { .footer__work__item__picture { margin-bottom: 20px; } } .footer__work__item__picture:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #FFF; opacity: 0; content: ''; -webkit-transition: opacity .35s; transition: opacity .35s; } .footer__work__item__picture img { display: block; width: 100%; } .m-no-touch .footer__work__item:hover .footer__work__item__picture:after { opacity: .075; -webkit-transition-duration: .175s; transition-duration: .175s; } .footer__work__item__title { display: block; margin-bottom: 8px; color: #FFF; font-size: 35px; line-height: 1.1; } @media (max-width:900px) { .footer__work__item__title { font-size: 30px; } } .footer__work__item__title__name { border-bottom: 2px solid transparent; -webkit-transition: border-bottom-color .35s; transition: border-bottom-color .35s; } .m-no-touch .footer__work__item:hover .footer__work__item__title__name { border-bottom-color: #FFF; -webkit-transition-duration: .175s; transition-duration: .175s; } .footer__work__item__text { display: block; font-size: 16px; } .footer__info { display: table; width: 100%; margin-bottom: 35px; } .footer__info:after { display: block; content: ''; height: 0; overflow: hidden; clear: both; } @media (max-width:900px) { .footer__info { display: block; margin-bottom: 20px; } } .footer__info__item { display: table-cell; vertical-align: top; padding: 0 30px; font-size: 13px; box-sizing: border-box; text-transform: uppercase; text-align: center; border-left: 1px solid #505154; white-space: nowrap; } .footer__info__item:first-child { text-align: left; padding-left: 0; border-left: none; } .footer__info__item:last-child { text-align: right; padding-right: 0; } @media (max-width:1000px) { .footer__info__item { padding: 0 15px; } } @media (max-width:900px) { .footer__info__item { display: block; padding: 0; margin-bottom: 15px; border-left: none; } .footer__info__item,.footer__info__item:first-child,.footer__info__item:last-child { text-align: center; } } .footer__info__item a { -webkit-transition: border-color .35s; transition: border-color .35s; color: #FFF; border-bottom: 1px solid transparent; margin-left: 25px; } @media (max-width:1000px) { .footer__info__item a { margin-left: 13px; } } .footer__info__item a:first-child { margin-left: 0; } .m-no-touch .footer__info__item a:hover { -webkit-transition-duration: .175s; transition-duration: .175s; border-bottom-color: #FFF; } .footer__studio { text-align: center; border-top: 1px solid #3a3b3f; padding-bottom: 7px; font-size: 11px; letter-spacing: .045em; } @media (max-width:735px) { .footer__studio { padding-top: 20px; } } .footer__studio__link { display: inline-block; padding: 25px 0; color: #61636a; vertical-align: middle; } @media (max-width:735px) { .footer__studio__link { display: block; padding-top: 0; padding-bottom: 20px; } } .footer__studio__text,.footer__studio__logo { display: inline-block; vertical-align: middle; } @media (max-width:735px) { .footer__studio__text { display: block; padding-bottom: 10px; } } .footer__studio__text__name { font-weight: 400; border-bottom: 1px solid transparent; -webkit-transition: border-color .35s,color .35s; transition: border-color .35s,color .35s; } .m-no-touch .footer__studio__link:hover .footer__studio__text__name { -webkit-transition-duration: .175s; transition-duration: .175s; color: #FFF; border-bottom-color: #FFF; } .footer__studio__logo { display: inline-block; line-height: 1; width: 132px; height: 23px; margin-left: 8px; } .footer__studio__logo path { position: relative; -webkit-transition: fill .35s ease; transition: fill .35s ease; } .m-no-touch .footer__studio__logo:hover path { -webkit-transition-duration: .175s; transition-duration: .175s; fill: #FFF; } @media (max-width:735px) { .footer__studio__logo { margin-left: 15px; } } .bg-colors { position: relative; z-index: 100; } .m-touch .bg-colors { -webkit-transform: translateZ(0); transform: translateZ(0); } .error { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../images/error/bg.jpg") no-repeat 50% 50%; background-size: cover!important; } @media (max-width:735px) { .error { background-image: url("../images/error/phone-bg.jpg"); } } .error__content { position: absolute; top: 50%; left: 50%; width: 300px; margin-left: -180px; margin-top: -100px; text-align: center; } .error__content__title { font-size: 160px; letter-spacing: -.05em; line-height: 1; font-weight: 700; color: #FFF; } .error__content__text { margin-top: -.2em; padding-left: .15em; } @media (max-width:1500px) { .error__content { margin-top: -85px; } .error__content__title { font-size: 140px; } .error__content__text { font-size: 16px; } } @media (max-width:1200px) { .error__content { margin-top: -80px; } .error__content__title { font-size: 120px; } .error__content__text { font-size: 14px; } } @media (max-width:735px) { .error__content { margin-top: -60px; margin-left: -150px; } } .i-hidden { display: none; } .clearfix:after { display: block; content: ''; height: 0; overflow: hidden; clear: both; }