/*------------------------------------------------------------------ Project: Nantes - multi purpose one-page template Version: 1.0 Last change: 18/02/2016 [...] Designed by: MOOZ Themes / www.MOOZthemes.com Primary use: One page -------------------------------------------------------------------*/ /* main font for menu. */ /*@import url(http://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900);*/ /* font for headings, text, tags */ /*@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800);*/ /*-------------------- 1. General --------------------*/ * { font-family: "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", "Helvetica Neue", Helvetica, Arial, sans-serif, serif; } html { height: 100%; } body { height: 100%; margin: 0px; /* min-width: 830px; */ } h1, h2, h3, h4, h5, h6 { font-weight: 300; letter-spacing: 0.4px; color: #232323; } p { font-size: 15px; font-weight: 300; line-height: 23px; letter-spacing: 0.2px; color: #444444; } .fa { color: #fff; } .dark-bg p { color: #B1B1B1; } a:hover, a:focus, a:active, a.active { color: #fff; text-decoration: none; } a, a:hover, a:focus, a:active, a.active { outline: 0; text-decoration: none; } .container-fluid { padding-right: 0; padding-left: 0; } /*::selection {*/ /*text-shadow: none;*/ /*background: #fed136;*/ /*}*/ @media (min-width: 768px) { section { padding: 77px 0; } } /*section {*/ /*padding: 77px 0;*/ /*}*/ /*ul {*/ /*padding-left: 10px;*/ /*padding-top: 10px;*/ /*}*/ ul li { list-style: none; /*padding-bottom: 10px;*/ /*font-size: 12px;*/ /*font-weight: 500;*/ line-height: 23px; letter-spacing: 0.5px; color: #000000; } /*section ul li:before {*/ /*font-family: FontAwesome;*/ /*font-weight: normal;*/ /*font-style: normal;*/ /*display: inline-block;*/ /*text-decoration: inherit;*/ /*content: "\f105";*/ /*padding-right: 7px;*/ /*color: #23AD21;*/ /*}*/ /*-------------------- 1.1 Reset bootstrap --------------------*/ .row-0-gutter { margin-left: -13px; margin-right: -13px; } .col-0-gutter { padding-left: 0; padding-right: 0; } /*-------------------- 3. Header --------------------*/ header { /*margin-top: 80px;*/ } .slider-container { position: relative; } .owl-wrapper-outer { height: 100% !important; } .owl-wrapper { height: 100%; } .owl-slider-item { position: relative; height: 100%; background-color: #000; } .owl-slider .owl-controls { position: absolute; left: 0; top: 90%; width: 100%; } .owl-slider .owl-controls .owl-nav [class*=owl-] { padding: 30px 40px; background: rgba(0, 0, 0, 0.26); border-radius: 0; margin: 0; font-size: 30px; z-index: 1000; } .owl-slider .owl-controls .owl-nav [class*=owl-]:hover { background: #000; color: #fff; text-decoration: none; } .owl-slider .owl-controls .owl-prev { float: left; } .owl-slider .owl-controls .owl-next { float: right; } .intro-text { /*padding-top: 50px;*/ /*padding-bottom: 50px;*/ position: absolute; top: 32%; text-align: center; transform: translateX(-50%); left: 50%; width: 1000px; -webkit-font-smoothing: antialiased; } @media (min-width: 768px) { /*.intro-text {*/ /*padding-top: 230px;*/ /*padding-bottom: 200px;*/ /*}*/ } .intro-text .intro-lead-in { display: inline-block; margin-bottom: 25px; padding: 4px 20px; letter-spacing: 3px; font-size: 28px; color: #fff; font-weight: 100; line-height: 40px; } .intro-text .intro-lead-in.cyxy-trs-source .cyxy-trs-target{ font-size: 28px; line-height:40px; margin-top: 20px; display: block; letter-spacing: 2px } /*.intro-text .intro-lead-in[contenteditable="true"]{*/ /*font-size: 20px;*/ /*line-height:20px;*/ /*margin-top: -80px;*/ /*}*/ .intro-text .intro-subslogan[contenteditable="true"]{ font-size: 14px; max-width:600px; margin: -60px auto 30px; line-height:20px; } @media (min-width: 768px) { .intro-text .intro-lead-in { font-size: 56px; letter-spacing: 6px; /*line-height: 40px;*/ margin-bottom: 57px; } } .intro-text .intro-heading { font-weight: 900; font-size: 30px; line-height: 48px; margin-bottom: 20px; letter-spacing: -3px; word-spacing: 10px; color: #FFFFFF; text-shadow: 1px 1px 1px rgb(0, 0, 0); } .a-show-video { color: #4CA177; } .a-show-video:hover, .a-show-video:focus, .a-show-video:active { color: #4CA177; opacity: 0.7; text-decoration: underline; } @media (min-width: 768px) { .intro-text .intro-heading { line-height: 70px; font-size: 50px; margin-bottom: 30px; } } .intro-text .intro-subslogan { /*position: absolute;*/ /*display: inline-block;*/ top: 1px; font-size: 18px; text-align: center; line-height: 20px; color: #fff; left: 50%; } @media (min-width: 768px) { .intro-text .intro-subslogan { line-height: 30px; font-size: 24px; letter-spacing: 3px; margin-bottom: 70px; } } #play-video { cursor: pointer; left: 50%; transform: translateX(-50%); position: absolute; } #xiaoyi-try { color: #424242; background-color: white; opacity: 0.6; } /*#play-video {*/ /*opacity: 0.1;*/ /*}*/ #play-video a { width: 58px; height: 58px; display: block; text-align: center; color: #FFFFFF; border: 2px solid #fff; /*background: #A9A9B1;*/ /*background: #fff;*/ opacity: 0.9; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; /* background color transition */ -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; } #play-video a:hover { background-color: rgba(255, 255, 255, 0.3); /*background: #555555;*/ /*opacity: 0.8;*/ } #play-video i { margin-top: 20px; /* margin: auto; */ font-size: 18px; margin-left: 3px; } .white-button { /*background-color: #fff;*/ width: 160px; padding: 10px; text-transform: uppercase; font-weight: 500; font-size: 16px; display: inline-block; margin-left: 10px; margin-right: 10px; color: #fff; /*opacity: 0.8;*/ border: 1px solid #fff; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .white-button.cyxy-trs-source{ position: relative; } .white-button.cyxy-trs-source .cyxy-trs-target{ display: block; font-size: 12px; } @media (max-width: 768px) { .white-button { width: 120px; padding: 4px; margin-top: 20px; font-size: 10px; } } .white-button:hover { background-color: rgba(255, 255, 255, 0.3); /*opacity: 0.95;*/ color: #ffffff; text-decoration: none; /*pointer-events: none*/ } .white-button:active { text-decoration: none; } .white-button:visited { text-decoration: none; } .gray-button { background-color: #fff; width: 160px; padding: 10px; text-transform: uppercase; font-weight: 500; font-size: 16px; display: inline-block; margin-left: 10px; margin-right: 10px; opacity: 0.9; color: #fff; border: 1px solid #fff; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .gray-button:hover { opacity: 0.3; text-decoration: none; } /*.play-video {*/ /*width: 59px;*/ /*height: 59px;*/ /*}*/ /*-------------------- QR Code --------------------*/ .QRcodes { position: absolute; display: block; /*float: right;*/ margin: auto; /*left: 100%;*/ /*top: 36%;*/ cursor: pointer; right: 0px; bottom: 0px; z-index: 1000; } .code-item { width: 220px; padding: 15px; /*display: block;*/ text-align: center; font-weight: 500; font-size: 16px; /*display: table-column;*/ margin-left: 10px; margin-top: 3px; color: #fff; /*opacity: 0.3;*/ background-color: rgba(255, 255, 255, 0.15); /*border: 1px solid #fff;*/ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .code-item .cyxy-trs-source{ position: relative; } .code-item .cyxy-trs-source .cyxy-trs-target{ position: absolute; font-size: 12px; transform:translateX(-50%); left:50%; top:16px; display: inline-block; width:200px; text-align: center; } .code-item:hover { /*opacity: 0.9;*/ background-color: rgba(255, 255, 255, 0.3); text-decoration: none; } @media (max-width: 768px) { .code-item { width: 110px; padding: 6px; font-size: 12px; } } /*#app-qrcodes .code-item {*/ /*background-color: rgba(255, 255, 255, 0.66);*/ /*}*/ .code-item a { color: #fff; font-size: 14px; display: block; -webkit-font-smoothing: antialiased; /*padding-bottom: 6px;*/ /*color: #fff;*/ opacity: 0.9; } #app-qrcodes { left: 70%; margin-left: 24px; bottom: 40px; } #app-qrcodes .code-item a { opacity: 1; } #app-store{ width: 230px; bottom: 80px; left: 70%; display: none; margin-left: 33px; right:unset; top: 45%; } #app-store > div{ margin-bottom :40px; } #app-store > div >a{ width: 100%; height:100%; display: block; } #app-store > div img{ width: 100%; transition: background .3s; border-radius: 5px; overflow: hidden; } #app-store > div img:hover{ background: rgba(0,0,0,0.2); } .code-item img { padding: 10px; /*opacity: 0.9;*/ } .ai-qrimg{ display: none; } .wx-qrimg { display: none; } .pro-qrimg { display: none; } .free-qrimg { display: inline; } .goole-qrimg{ display: none; } .goole-qr{ display: none; } /*-------------------- 6. Modal --------------------*/ #intro-video { /*display: none;*/ /*position: absolute;*/ /*transform: translateX(-50%);*/ /*z-index: 1000;*/ /*display: inline-block;*/ /*position: fixed;*/ /*text-align: center;*/ } .modal-content { border-radius: 0; transform: translateY(12%); /*left: 50%;*/ /* top: 1000%; */ /* margin: 0 auto; */ /*transform: translateY(18%) translateX(-325px);*/ } .modal-header .close { font-size: 30px; } .modal-title { text-transform: uppercase; font-size: 23px; } .modal-body { padding: 0; } .modal-body p { margin: 30px 20px; color: #2D2D2D; } .modal-works { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 500; color: #fff; margin: 25px 20px; } .modal-works span { background-color: #FED136; margin-right: 15px; padding: 5px 10px; } .owl-theme .owl-dots { /*padding-top: 270px;*/ } .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #fff; opacity: 0.9; } .owl-theme .owl-dots .owl-dot span { width: 30px; height: 5px; margin: 0px 7px 0 7px; /*position: absolute;*/ background: #fff; opacity: 0.3; display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 2px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #fff; opacity: 1; border-radius: 2px; } .carousel, .item, .active { height: 100%; } .carousel-indicators { bottom: 9%; /*margin: 0;*/ /*width: 100%;*/ } .carousel-indicators li { width: 30px; height: 5px; margin: 0px 3px 0 3px; /*position: absolute;*/ background: #fff; opacity: 0.3; display: inline-block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 2px; } .carousel-indicators .active { width: 30px; height: 5px; margin: 0px 3px 0 3px; background: #fff; opacity: 1; } .carousel-inner { height: 100%; } /* Background images are set within the HTML using inline CSS, not here */ .fill { width: 100%; height: 100%; opacity: 0.9; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .owl-item { -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); } #app-qrcode { cursor: pointer; left: 73%; position: absolute; bottom: 40px; } #app-qrcode a { width: 58px; height: 58px; display: block; text-align: center; color: #FFFFFF; border: 2px solid #fff; /*background: #A9A9B1;*/ /*background: #fff;*/ opacity: 0.9; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; /* background color transition */ -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; } #app-qrcode a:hover { background-color: rgba(255, 255, 255, 0.3); /*background: #555555;*/ /*opacity: 0.8;*/ } #app-qrcode i { margin-top: 18px; /* margin: auto; */ font-size: 20px; margin-left: 2px; } .read-div { margin: 10px 10px; } .read-title { display: inline-block; font-size: 16px; } .read-title.cyxy-trs-source .cyxy-trs-target{ display: block; font-size: 12px; } .read-href { /*background-color: #fff;*/ /*width: 80px;*/ /*height: 32px;*/ /*padding: 6px;*/ /*text-transform: uppercase;*/ /*font-weight: 500;*/ font-size: 14px; /*margin: 8px 30px;*/ color: #5ebb8d; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .read-href.cyxy-trs-source .cyxy-trs-target{ display: block; } .read-href:hover, .read-href:focus { border: 1px solid #5ebb8d; padding: 1px 8px; background-color: #5ebb8d; color: #fff; cursor: pointer; text-decoration: none; border-radius: 3px; margin-left: -15px; }