﻿/*
* @Author: tiger
* @Date:   2016-03-29 11:05:38
* @Last Modified by:   tiger
* @Last Modified time: 2016-05-10 14:12:21
*/

/* WRAPPER */
.wrapper { position: relative; max-width: 1600px; margin-right: auto; margin-left: auto; background: #fff; }

/* SECTION */
.section { margin-top: 6rem; margin-bottom: 6rem; }
@media (max-width:544px) {
  .section { margin-top: 3rem; margin-bottom: 3rem; }
}

/* FIGURE */
figure { margin-bottom: 0; }

/* CARDS */
.card { margin-bottom: 0; background: transparent; border: none; border-radius: 0; }
.card-text { color: #8c8c8c; }
@media (max-width:1200px) {
  .card { margin-bottom: 1.875rem; }
}
@media (max-width:544px) {
  .card { margin-bottom: .9375rem; }
}

/* MODAL */
.modal-video .modal-content { background-color: transparent; border: none; border-radius: 0; }
.modal-video .close { position: relative; padding: .875rem 1.25rem; background: rgba(0, 0, 0, .4); border-top-left-radius: .3rem; border-top-right-radius: .3rem; text-shadow: none; color: #fff; font-size: .875rem; opacity: 1; font-weight: 300; z-index: 2; }
.modal-video .modal-body { padding: 0; }
@media (min-width:991px) {
  .modal-video .modal-dialog { width: 900px; }
}
@media (min-width:1200px) {
  .modal-video .modal-dialog { width: 1024px; }
}

/* DISPLAY */
.inline-block { display: block; }
.table-block { display: table; width: 100%; height: 100%; }
.table-cell { display: table-cell; vertical-align: middle; }
@media (max-width:544px) {
  .block { display: block !important; }
}

/* BACKGROUNDS */
.bg-cover { width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
@media (min-width:1200px) {
  .bg-fixed { background-position: center bottom; background-attachment: fixed; }
}

/* BUTTONS */
.btn { border-radius: 200px; text-shadow: none; /* reset .cover style */ }
.btn-search { border-radius: 0.25rem; }
.btn-lg { padding: .875rem 2.5rem; }

/* TAGS */
.tag { position: absolute; top: 0; left: 0; padding: .3rem .5rem; }

/* ICONS */
.glyphicon-calendar { color: #25b4b0; }

/* FONTS */
.description { width: 60%; margin-right: auto; margin-left: auto; }
.paragraph { line-height: 1.75; }
.h2 { color: #25b4b0; }
@media (max-width:768px) {
  .description { width: 100%; }
  h1, .h1 { font-size: 2rem; }
  .lead { font-size: 1rem !important; }
}
@media (max-width:767px) {
  .display-4 { font-size: 2.5rem !important; }
}
@media (max-width:1440px) {
  html { font-size: 14px; }
}

/* NAV */
.navbar { padding: 0 2rem 0 0; }
.navbar-absoult { position: absolute; top: 0; right: 0; left: 0; border-bottom: none; z-index: 2; }

/* .NAVBAR-HEADER */
.navbar-brand, .navbar-toggler { height: 80px; }
.navbar-brand { padding-top: 0; padding-bottom: 0; margin-right: 0; }
.navbar-toggler { position: absolute; top: 0; right: 1rem; z-index: 2; }
.navbar-brand img { width: auto; height: 100%; }

/* .NAVBAR-ITEM */
.navbar-nav .nav-item { margin-left: 1.5rem !important; }
.navbar-nav .nav-link { padding-top: 0; padding-bottom: 0; color: #fff !important; line-height: 60px; }
.navbar-nav .nav-link:hover { color: #333333 !important }
.navbar-nav .form-inline { padding-top: 21px; padding-bottom: 21px; }
@media (max-width:991px) {
  .navbar { padding-right: 0; }
  .navbar-brand, .navbar-toggler { height: 60px; }
  .navbar-brand { float: none; display: block; }
  .navbar-nav { padding: 0.5rem 1rem; background: #f4f4f4; }
  .navbar-nav.pull-lg-right { border-top: 1px solid #eaeaea; }
  .navbar-nav .nav-item { float: none; margin-left: 0 !important; }
  .navbar-nav .nav-link { font-size: 14px; line-height: 40px !important; }
  .navbar-nav .form-inline { padding-top: 0; padding-bottom: 0; }
}

/* COVER */
.cover { position: relative; height: 600px; color: #fff; text-shadow: rgba(0, 0, 0, .7) 0px 1px 4px; }
@media (max-width:767px) {
  .cover { height: 320px !important; }
}

/* PAGEHEADER */
.pageheader { border-top: 1px solid #eaeaea; }

/* FLOAT */
.float { position: relative; margin-top: -8rem; z-index: 2; }
.float .card { background: #222; }
@media (max-width:767px) {
  .float { margin-top: .9375rem; }
}

/* TIMELINE */
.timeline { position: relative; }
.timeline-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background-color: #eaeaea; }
.timeline-item [class^=col-]:nth-child(odd) { margin-top: 6rem; }
.timeline [class^=col-]::before { left: 0;        /* default */ top: 50%; position: absolute; width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; background: #fff; border-radius: 50%; border: 2px solid #eaeaea; content: ""; }
.timeline [class^=col-]:nth-child(odd)::before { left: 100%; }
.timeline-item [class^=col-]:nth-child(odd) .card { margin-right: 3rem; }
.timeline-item [class^=col-]:nth-child(even) .card { margin-left: 3rem; }
.timeline-item .card a { position: relative; }
.timeline-item .card-block { padding: 1.875rem; }
@media (max-width:767px) {
  .timeline-line { left: 7px; bottom: 0; }
  .timeline-item [class^=col-] { padding-right: 3rem; padding-left: 3rem; margin-top: 0 !important; margin-bottom: 3rem; }
  .timeline [class^=col-]::before { left: 20px !important; }
  .timeline-item .card { margin-right: 0 !important; margin-left: 0 !important; }
  .timeline-item .product a { float: none !important; }
}

/* DEIVCES */
.devices img { width: 75% !important; }

/* ARTICLE */
.article .card-block { background: #f4f4f4; }
.article a:hover .card-title { color: #25b4b0; }

/* QUOTE */
.quote .avatar { display: inline-block; background: url(images/pattern.gif) 0 0 repeat; }
.quote .avatar img { position: relative; top: 1.875rem; left: 1.875rem; }
.quote .card-block { margin-top: 1.875rem; }

/* PRODUCTS */
.product a { position: relative; }
.timeline-item [class^=col-]:nth-child(odd) .product a { float: right; }
.timeline-item [class^=col-]:nth-child(even) .product a { float: left; }
.product img { width: 490px; height: auto; margin: 0 auto; margin-bottom: 1rem; }
.product .figure-caption { font-size: 100%; }

/* PRODUCTS-LIST */
.products-list [class^=col-] { margin-top: 3rem; }
.products-list .card { text-align: center; }
.products-list ul { margin-top: .5rem; margin-bottom: 0; }
.products-list ul span { display: inline-block; width: 1rem; height: 1rem; border: 1px solid rgba(0, 0, 0, .1); border-radius: 50%; }

/* PRODUCTS-DETAIL */
.products-detail { margin-bottom: 3rem; }
.products-detail ul { margin-top: .5rem; }
.products-detail ul span { display: inline-block; width: 1.5rem; height: 1.5rem; border: 1px solid rgba(0, 0, 0, .2); border-radius: 50%; }

/* SHOP */
@media (min-width:991px) {
  .shop [class^=col-] { margin-bottom: 1.875rem; }
  .shop [class^=col-]:last-child(3) { margin-bottom: 0; }
}

/* MOCKUP */
.mockup { position: relative; width: 100%; overflow: hidden; }
.mockup .container, .mockup hr { position: relative; z-index: 2; }
.mockup-item { position: absolute; }

/* PARALLAX */
#parallax-port { position: relative; overflow: hidden; width: 100%; height: 300px; border-left: 1px solid #eaeaea; border-right: 1px solid #eaeaea; padding: 0; }
.parallax-layer { position: absolute; top: 0; left: 0; white-space: nowrap; }
.parallax-layer div { display: inline-block; width: 300px; height: 300px; margin-right: 1rem; margin-left: 1rem; }

/* QNA */
.qna .panel { padding-bottom: 2rem; }
.qna .panel-heading { margin-bottom: 1rem; border-bottom: 1px solid #eaeaea; }
.qna .panel-title { margin-bottom: .25rem; }

/* FOOTER */
footer a:hover { color: #333333 !important; }
@media (max-width:768px) {
  .footer-nav [class^=col-]:nth-child(1), .footer-nav [class^=col-]:nth-child(2) { margin-bottom: 2rem; }
}

/* MATERIALS */
@media (min-width:768px) {
  .material { position: relative; left: -15%; }
}
@media (min-width:1024px) {
  .material .col-lg-8 { margin-top: .5rem; }
}
@media (min-width:1200px) {
  .material .col-lg-8 { margin-top: 1rem; }
}
@media (min-width:1600px) {
  .material .col-lg-8 { margin-top: 1.5rem; }
}

/* COMPATIBILITY */
.compatibility { border: 1px solid #25b4b0; }

/* SNS */
.snsbar { position: fixed; right: 0; bottom: 5rem; }
.snsbar a { display: block; width: 2.5rem; height: 2.5rem; margin-bottom: .25rem; border-bottom-left-radius: .25rem; border-top-left-radius: .25rem; }
.snsbar .weibo { background: #25b4b0 url(images/weibo.png) center no-repeat; }
.snsbar .wechat { background: #25b4b0 url(images/wechat.png) center no-repeat; }
.snsbar .wechat:hover .figure { display: block; }
.snsbar .top { background: #8c8c8c url(images/top.png) center no-repeat; }
.snsbar .figure { position: absolute; display: none; right: 3.25rem; bottom: 0; background: #fff; border: 1px solid #eaeaea; border-radius: .5rem; }

/* PARTNERS */
.partners .nav-item + .nav-item { margin-left: 0 !important; }
.partners .nav-link { display: block; }
.partners .nav-link.active { background: #25b4b0; border-radius: .25rem; }
.partners .nav-link.active p { color: #fff; }

/* STEP */
.step .row { position: relative; }
.step hr { position: absolute; top: 19px; right: 0; left: 0; border-top-width: 2px; }
.step-num { display: inline-block; width: 40px; height: 40px; border: 2px solid #eaeaea; border-radius: 50%; background: #fff; line-height: 36px; text-align: center; }