@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import "bootstrap/bootstrap.css";
@import "jquery.mCustomScrollbar.css";
@import "default.css";
@import "animate.css";
@import "fonts/style.css";
@import "fonts/fontello2/css/icon.css";
@import "fonts/fontello/css/iconm.css";
@import "plugins.css";
@import "cs-select.css";
@import "jquery.fancybox.css";

/* ==========================================================================
    public
 ========================================================================== */

.mc {
    color: #36cfd7 !important;
}

.wp {
    width: 100%;
    overflow: hidden;
}

.container {
    max-width: 1600px;
}


a[href] {
    text-decoration: none;
    outline: 0;
}

.opacity0 {
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-transition: .5s;
    transition: .5s;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.pic-center {
    text-align: center;
    margin-bottom: 15px;
}

.pic-center img {
    display: inline-block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.p3 {
    padding-top: 3%;
    padding-bottom: 3%;
}

/*pagination*/
.pagination>li>a,
.pagination>li>span {
    border: 0;
    margin: 0px 1px;
    color: #707070;
    font-size: 120%;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    background-color: #36CFD7;
    border-color: none;
    color: #fff;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #36CFD7;
    border-color: none;
}

.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
    cursor: default;
    color: #ccc;
}

/*header*/

#header {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 0 20px #999999;
    background-color: #fff;
    transition: .5s;
    opacity: 0;
    animation: fadeIn 1s .2s both;
}

.no-js #header,
.no-cssanimations #header {
    opacity: 1;
}

.max-sm-size #header {
    max-height: 100%;
    overflow-y: auto;
}


#header .container {
    padding: 0;
}

.header-top {
    text-align: right;
    padding: 1em 0;
    width: 100%;
    opacity: 0;
    animation: fadeIn .5s .5s both;
    position: relative;
    z-index: 19999;
}

.no-js .header-top,
.no-cssanimations .header-top {
    opacity: 1;
}

.header-top .language {
    display: inline-block;
    position: relative;
    z-index: 19999;
}

.header-top .language button {
    border: 0;
    box-shadow: 0 0 0 transparent;
}

.header-top .language button img {
    margin-right: 5px;
}

.header-top .language button:focus,
.header-top .language button:hover {
    background-color: transparent;
    box-shadow: 0 0 0 transparent;
}

.header-top .language .dropdown-menu {
    min-width: 0;
}

.header-top .language .dropdown-menu>li>a img {
    margin-right: 5px;
}

.header-top .icon-chat,
.header-top .search,
.header-top .share,
.header-top .iconM-email {
    display: inline-block;
    margin: 0 10px 5px;
}

.header-top .icon-chat {
    color: #929797;
    font-family: 'Open Sans', Arial, serif, "微軟正黑體" !important;
}

.header-top .icon-chat:before {
    font-family: 'icomoon';
    margin-right: 5px;
}

.header-top .icon-chat:hover {
    color: #36cfd7;
}

.header-top .iconM-email {
    font-size: 16px;
}

.header-top .iconM-email:hover {
    color: #36cfd7;
}

.header-top .search {
    border-bottom: 1px solid #ccc;
    position: relative;
    z-index: 10;
}

.header-top .search input {
    border: 0;
    width: 140px;
    background-color: transparent;
}

.header-top .share {
    margin-top: 11px;
    margin-bottom: 0;
}

.header-top .share>a {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #929797;
    color: #fff;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s;
    transition: .5s;
    text-align: center;
    box-sizing: border-box;
    margin: 0 .5em;
    line-height: 25px;
    vertical-align: middle;
}

.header-top .share>a:hover {
    -webkit-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    transform: rotate(359deg);
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #36cfd7;
}

.header-top .share .iconM-google:before {
    font-size: 12px;
    margin-left: -2px;
}

.max-xs-size .header-top .share {
    margin: 5px 0 0;
    text-align: center;
    width: 100%;
}

.max-xs-size .header-top .share>a {
    margin: 0 1em;
}


/*navbar 選單*/

.navbar {
    background-color: transparent;
    border: 0;
    margin-bottom: 0;
}

.navbar .navbar-header h2 {
    margin: 0;
    padding-left: 10px;
    display: inline-block;
    margin-left: 15px;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

.navbar .mainNav {
    padding-left: 0;
    padding-right: 0;
}

.navbar .mainNav>ul>li {
    position: static;
}

.navbar .mainNav .item {
    display: block;
    position: relative;
}

.navbar .mainNav .item a {
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
    color: #929797;
}

.safari .navbar .mainNav .item a {
    font-weight: bold;
}

.navbar .mainNav .item:hover a {
    color: #333;
}

.navbar .mainNav .item .mobile-touch {
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    cursor: pointer;
    z-index: 10;
}

.navbar .mainNav .item .mobile-touch+a {
    pointer-events: all;
}

.navbar .mainNav .item .icon-more_vert:before {
    content: "\e5d4";
    display: inline-block;
    font-size: x-large;
}

.navbar .mainNav .dropdown-menu[role="menu"] {
    width: 110vw;
    right: 0;
    left: -10vw;
    top: 67px;
    position: absolute;
    box-shadow: inset -15px 0 15px -15px transparent, inset 0 -15px 15px -15px transparent, inset 0 15px 15px -15px #999999, 15px 0 15px -15px transparent;
    background-color: rgba(255, 255, 255, 1);
}

.navbar .mainNav .dropdown-menu[role="menu"] .list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    text-align: center;
}


.navbar .mainNav .dropdown-menu[role="menu"] .list>a {
    padding: .8em;
    text-align: center;
    display: inline-block;
}

.navbar .mainNav .dropdown-menu[role="menu"] .list>a:hover {
    color: #333;
}

.navbar .mainNav .dropdown-menu[role="menu"]:before {
    content: '';
    width: 100%;
    height: 6px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #FEFEFE;
    z-index: 2;
}

.max-sm-size .navbar .mainNav .dropdown-menu[role="menu"]:before {
    display: none;
}

.navbar .mainNav .dropdown-menu[role="menu"]:after {
    content: '';
    width: 100%;
    height: 5px;
    display: block;
    background-color: transparent;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    box-shadow: -5px 0 5px -5px transparent, 0 -5px 5px -5px transparent, 0 4px 8px 0px #bdbcbc, 5px 0 5px -5px transparent;
}

.navbar .language {
    margin-left: 3em;
}

.navbar .language .btn {
    box-shadow: 0 0 0 transparent;
    background-color: transparent;
    border: 0;
    padding: 15px 15px;
    color: #929797;
    font-size: 0;
}

.navbar .language .btn .caret {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: .5s;
    transition: .5s;
    margin-left: 3px;
}

.navbar .language .btn[aria-expanded="true"] .caret {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s;
    transition: .5s;
}

.navbar .language .dropdown-menu[role="language-menu"] {
    padding: 0;
    text-align: center;
    min-width: 0;
}

.navbar .language ul li a {
    font-size: 0;
}

.navbar .language+li>a {
    padding-right: 0;
}

.safari .navbar .language+li>a {
    font-weight: bold;
}

.navbar .navbar-right {
    margin-right: 15px;
}

.max-lg-size .navbar h2 img {
    width: 180px;
    margin-top: 5px;
}

.max-lg-size .navbar .language {
    margin-left: 0;
}

.max-md-size .navbar h2 img {
    width: 120px;
    margin-top: 13px;
}

.max-md-size .navbar .language .btn {
    padding-left: 0;
    padding-right: 0;
}

.max-md-size .navbar .language+li>a {
    font-size: 10px;
    padding-left: 5px;
    padding-right: 0;
}

.min-sm-size .mainNav>ul>li {
    // padding-bottom: 1em;
}

.min-sm-size .mainNav>ul>li:hover .dropdown-menu[role="menu"] {
    display: block;
    opacity: 1;
    -webkit-transition: .8s;
    transition: .8s;
    pointer-events: all;
}

.min-sm-size .dropdown-menu[role="menu"] {
    opacity: 0;
    -webkit-transition: .8s;
    transition: .8s;
    pointer-events: none;
}


.max-sm-size .navbar {
    margin-bottom: 0;
}

.max-sm-size .navbar-nav {
    width: 100%;
    margin: 0;
    text-align: center;
}

.max-sm-size .navbar-nav>li {
    border-bottom: 1px solid #E7E7E7;
}

.max-sm-size .navbar-nav>li>a {
    font-size: 15px;
    padding: 1em 0;
}

.max-sm-size .dropdown-menu[role="menu"] {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    padding-left: 0 !important;
    max-width: 100%;
    opacity: 1;
    pointer-events: all;
    padding: 0;
}

.max-sm-size .dropdown-menu[role="menu"]:after {
    display: none !important;
}

.max-sm-size .dropdown-menu[role="menu"] .list>a {
    width: 100%;
}

.max-sm-size .dropdown-menu[role="menu"] .list>a:nth-of-type(even) {
    background-color: #F7F5F5;
}

.max-sm-size .item .mobile-touch {
    pointer-events: all !important;
    visibility: visible !important;
}

.max-sm-size .item .mobile-touch+a {
    pointer-events: none !important;
}

.max-sm-size .language .btn-group {
    width: 100%;
}

.max-sm-size .language .btn-group.open .btn {
    border-bottom: 1px solid #E7E7E7;
    box-shadow: -5px 0 5px -5px transparent, 0 -5px 5px -5px transparent, 0 15px 15px -15px #999999, 5px 0 5px -5px transparent;
}

.max-sm-size .language .btn {
    width: 100%;
    padding: 1em 0;
    font-size: 15px;
}

.max-sm-size .language .dropdown-menu {
    text-align: center;
    padding: 0;
}

.max-sm-size .language .dropdown-menu li {
    border-bottom: 1px solid #E7E7E7;
}

.max-sm-size .language .dropdown-menu li a {
    padding: 1em 0 !important;
    font-size: 15px;
}


/*footer*/

.footer a:hover {
    color: #151515;
}

.footer .share {
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.footer .share>span {
    margin-right: 15px;
    font-size: 18px;
    font-weight: bold;
}

.footer .share>a {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    margin: 0 10px;
    text-align: center;
    line-height: 40px;
    background: url(images/common/icon-bk.png) center no-repeat;
    color: #fff;
    font-size: 20px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s;
    transition: .5s;
    margin-bottom: 5px;
}

.footer .share>a:hover {
    -webkit-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    transform: rotate(359deg);
    -webkit-transition: .5s;
    transition: .5s;
}

.footer .share .iconM-google {
    font-size: 18px;
}

.footer .share .iconM-google:before {
    margin-right: 10px;
}

.footer .footer-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.footer .footer-nav .row {
    margin: 0;
    margin-bottom: .5em;
}

.footer .copyright {
    padding: 15px 0;
    text-align: center;
    font-size: 12px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.footer .copyright sup {
    top: -.1em !important;
    font-family: "Open Sans";
}

.footer .bottom-link {
    margin-left: 2em;
}

.max-xs-size .footer .share>span {
    font-size: 16px;
    width: 100%;
    display: block;
    margin-bottom: 1em;
}

.max-xs-size .footer .share>a {
    margin: 0px 5px;
    -webkit-transition: .5s;
    transition: .5s;
}


/* ==========================================================================
    index
 ========================================================================== */

#banner,
#mBanner {
    opacity: 0;
    -webkit-animation: fadeIn 1s .5s both;
    animation: fadeIn 1s .5s both;
}

#banner .slider {
    height: 700px;
}

.max-lg-size #banner .slider {
    height: 500px;
}

.max-md-size #banner .slider {
    height: 400px;
}

#mBanner .slider {
    height: 300px;
}

#banner .slider .pic,
#mBanner .slider .pic {
    position: relative;
}

#banner .slider .pic .container,
#mBanner .slider .pic .container {
    height: 100%;
}

#banner .slider .pic .slogan,
#mBanner .slider .pic .slogan {
    position: absolute;
    width: 100%;
    bottom: 15%;
    padding-left: 12%;
    font-size: 78px;
    z-index: 10;
    color: #fff;
}

#banner .slider .pic .play,
#mBanner .slider .pic .play {
    width: 83px;
    height: 83px;
    background: url(images/solution/play.png) center no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
}

.play2 {
    width: 83px;
    height: 83px;
    background: url(images/solution/play.png) center no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10;
}

.fancybox-close {
    background: none;
    top: -23px;
    right: 0;
    width: 20px;
    height: 20px;
}

.fancybox-close:before {
    content: "\e5cd";
    font-family: 'icomoon' !important;
    font-size: 20px;
    color: #fff;
}

.fancybox-prev span {
    background: url(images/product/left.png) center no-repeat;
    background-size: contain;
}

.fancybox-next span {
    background: url(images/product/right.png) center no-repeat;
    background-size: contain;
}

#banner .slick-dots {
    max-width: 1100px;
    margin: 0 auto;
    display: block;
    position: relative;
    bottom: 60px;
    text-align: right;
    padding: 0px 15px;
}

.max-md-size #banner .slick-dots {
    bottom: 40px;
}

#mBanner .slick-dots {
    bottom: 5px;
    padding: 0px 10px;
}

#banner .slick-dots li,
#mBanner .slick-dots li {
    width: 50px;
    height: 6px;
    margin: 0px 3px;
    opacity: .5;
}

#banner .slick-dots li button,
#mBanner .slick-dots li button {
    width: 50px;
    height: 6px;
    padding: 0;
    border-radius: 0;
    background-color: #fff;
}

#banner .slick-dots li.slick-active,
#mBanner .slick-dots li.slick-active {
    opacity: 1;
}

.article {
    color: #929797;
}

.article .head {
    margin: 3em 0;
}

.article .head .title {
    font-weight: bold;
    margin: 1em 0;
    color: #70777D;
    font-size: 36px;
}

.article .head .description {
    font-size: 20px;
    line-height: 1.5;
}

.max-sm-size .article .head .title {
    font-size: 24px;
}

.max-sm-size .article .head .description {
    font-size: 18px;
}

#about .body .list .item {
    width: 48%;
    margin: 0 1%;
    display: inline-block;
    float: left;
    box-shadow: 0px 0px 10px #ddd;
    margin-bottom: 20px;
}

#about .body .list .item .pic {
    height: 480px;
}

.max-sm-size #about .body .list .item .pic {
    height: 250px;
}

#about .body .list .item .pic img {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

#about .body .list .item .txt {
    padding: 2em;
    color: #70787B;
    height: 200px;
    box-sizing: border-box;
}

#about .body .list .item .txt h3 {
    margin-top: 0;
}

#about .body .list .item .txt p {
    font-size: 16px;
}

#about .body .list .item:hover .pic img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

.max-sm-size #about .body .list .item {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
}


/* ==========================================================================
    solution
 ========================================================================== */

#banner.pagebanner {
    position: relative;
    max-height: 580px;
    min-height: 433px;
    overflow: hidden;
    background: -webkit-radial-gradient(to right, #A1E518, #4CD4D1);
    background: -o-radial-gradient(to right, #A1E518, #4CD4D1);
    background: -moz-radial-gradient(to right, #A1E518, #4CD4D1);
    background: linear-gradient(to right, #A1E518, #4CD4D1);
}

#banner.pagebanner:before {
    content: '';
    position: absolute;
    bottom: 0;
    z-index: 10;
    height: 27px;
    width: 100%;
    display: block;
    background: url(images/common/banner-bar.png) center;
    background-size: cover;
}

.max-sm-size #banner.pagebanner {
    min-height: 0;
    height: 300px;
    max-height: 300px;
}

.max-sm-size #banner.pagebanner .slider {
    height: 100%;
}

.max-sm-size #banner.pagebanner .video {
    height: 100%;
}

.max-sm-size #banner.pagebanner #video {
    height: 300px !important;
}

#banner .video {
    width: 100%;
    height: 640px;
    position: relative;
}

#banner .video .play {
    position: absolute;
    width: 83px;
    height: 83px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 20;
    cursor: pointer;
}

#banner .video .play:hover:after {
    content: '';
    width: 83px;
    height: 83px;
    background-color: #fff;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

#banner .video .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.photoBlock {
    position: relative;
    height: 600px;
    width: 100%;
    box-shadow: -5px 0 5px -5px transparent, 0 -5px 5px -5px transparent, 0 15px 15px -15px #999999, 5px 0 5px -5px transparent;
    margin: 2em 0;
}

.photoBlock>.container {
    position: absolute;
    top: 0;
    left: 0;
    height: 600px;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

.photoBlock .slogan {
    position: absolute;
    top: 25%;
    z-index: 10;
    font-size: 42px;
    line-height: 1.3;
    font-weight: lighter;
    color: #373737;
    text-shadow: 1px 1px 8px #999;
    font-family: "Myriad Pro" !important;
}

.photoBlock .slogan.right {
    right: 15px;
    text-align: right;
}

.photoBlock .slogan.left {
    left: 15px;
    text-align: left;
}

.photoBlock .pic {
    height: 600px;
}

.photoBlock .text {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 1.5em 0;
    color: #333;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}

.max-md-size .photoBlock .slogan {
    font-size: 30px;
}

.max-sm-size .photoBlock {
    height: auto;
}

.max-sm-size .photoBlock>.container {
    height: 300px;
}

.max-sm-size .photoBlock .slogan {
    font-size: 22px;
    top: 50%;
}

.max-sm-size .photoBlock .pic {
    height: 300px;
}

.max-sm-size .photoBlock .text {
    position: relative;
}

.photoBlock2 {
    height: auto;
    background-color: #E1E1E1;
}

.photoBlock2 .text {
    position: relative;
    background-color: transparent;
}

.photoBlock2.deep {
    background-color: #9A968D;
}

.photoBlock2.deep .slogan {
    text-shadow: 1px 1px 8px #333;
}

.photoBlock2.deep .slogan,
.photoBlock2.deep .text {
    color: #fff;
}

.solutionOther {
    background-color: #DBDBDB;
    padding: 1em 10%;
    margin-bottom: 2em;
    box-shadow: -5px 0 5px -5px transparent, 0 -5px 5px -5px transparent, 0 15px 15px -15px #999999, 5px 0 5px -5px transparent;
    text-align: center;
}

.solutionOther .title {
    color: #333;
    font-weight: bold;
    font-size: 36px;
}

.solutionOther .slider .slick-prev,
.solutionOther .slider .slick-next {
    background-color: transparent;
    color: #929797;
    border: 2px solid #929797;
    margin-top: -27.5px;
}

.solutionOther .slider .slick-prev:before {
    content: '\f104';
}

.solutionOther .slider .slick-next:before {
    content: '\f105';
}

.solutionOther .item {
    width: 20%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 1em;
    box-sizing: border-box;
}

.solutionOther .item .pic {
    width: 100%;
    height: auto !important;
    margin-bottom: 2em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.solutionOther .item .pic img {
    width: 300px;
    max-width: 100%;
}

.solutionOther .item .name {
    font-size: 20px;
    padding: 0 0 1em;
}

.solutionOther .item:hover .name {
    color: #333;
}

.solutionOther.threes .item {
    width: 30%;
    padding: 1em 2%;
}

.max-sm-size .solutionOther .item {
    width: 50%;
}

.max-sm-size .solutionOther.threes .item {
    width: 100%;
}

.max-xs-size .solutionOther .item {
    width: 100%;
}

.materials .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.materials .item {
    width: 50%;
    border: 5px solid #fff;
    background-color: #D0D0D0;
    display: inline-block;
    vertical-align: top;
}

.materials .item .pic {
    height: 183px;
    width: 100%;
}

.materials .item .text {
    padding: 1.8em;
    color: #333;
}

.materials .item .title {
    font-weight: bold;
}

.materials .item .title h4 {
    font-size: 21px;
    margin-top: 0;
}

.materials .item .title h5 {
    font-size: 16px;
}

.max-sm-size .materials .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.max-sm-size .materials .item {
    width: 100%;
}

.technologies {
    padding: 0px 10%;
    margin-bottom: 3em;
}

.technologies .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.technologies .item {
    width: 25%;
    display: inline-block;
    background-color: #9A968D;
    border: 3px solid #fff;
}

.technologies .item .pic {
    height: 200px;
    width: 100%;
    border: 1px solid #e6e6e6;
    border-bottom: 0;
    box-sizing: border-box;
}

.technologies .item .pic img {
    width: auto !important;
    height: auto !important;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 1s;
    transition: 1s;
}

.technologies .item .text {
    color: #fff;
    padding: 1.8em;
}

.technologies .item:hover .pic img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: 1s;
    transition: 1s;
}

.max-md-size .technologies .item {
    width: 50%;
}

.max-sm-size .technologies {
    padding: 0;
}

.max-sm-size .technologies .flex {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

.max-sm-size .technologies .item {
    margin: auto;
}

.max-xs-size .technologies .item {
    width: 100%;
}

.technologies.mobile {
    margin-top: 3em;
}

.technologies.mobile .item {
    background-color: #E0DFDB;
    max-width: 320px;
}

.technologies.mobile .item:nth-of-type(even) {
    background-color: #D0D0D0;
}

.technologies.mobile .item .text {
    color: #333;
    padding: .5em 1.5em;
}

.technologies.mobile .item .text .title {
    font-size: 21px;
}

.technologies.mobile .item .text p {
    font-size: 16px;
}


/* ==========================================================================
    solution
 ========================================================================== */

.productList .item {
    display: inline-block;
    width: 25%;
    text-align: center;
    margin-bottom: 1em;
    padding: 0px 1em;
    box-sizing: border-box;
    vertical-align: top;
    float: left;
}

.productList .item .pic {
    width: 100%;
    margin-bottom: 1em;
    height: 130px;
    line-height: 130px;
}

.productList .item .pic img {
    max-width: 100%;
    max-height: 100%;
}

.productList .item .name {
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
}

.productList .item:hover .name {
    color: #333;
}

.max-sm-size .productList .item {
    width: 50%;
}


/* ==========================================================================
    product
 ========================================================================== */

.product-top {
    background-color: #F2F2F2;
    padding-top: 3em;
    padding-bottom: 160px;
    visibility: hidden;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    box-shadow: 0 0 20px #999;
    width: 100%;
}

.productInfo {
    width: 50%;
    float: right;
    padding-left: 50px;
}

.productInfo .name {
    font-size: 48px;
    font-weight: lighter;
    margin-top: 0;
}

.productInfo .descript {
    font-size: 21px;
    line-height: 1.8;
    max-height: 232px;
}

.max-lg-size .productInfo .descript {
    max-height: 180px;
}

.max-md-size .productInfo .descript {
    max-height: none;
}

.productInfo .descript .mCSB_dragger_bar {
    background-color: #929797 !important;
}

.product-gallery {
    width: 50%;
    float: left;
    position: relative;
}

.product-gallery .scrollTo {
    position: absolute;
    right: -100%;
    bottom: 45px;
    z-index: 10;
    width: 100%;
    opacity: 1;
    transition: .5s;
    pointer-events: all;
}

.product-gallery .mCS_no_scrollbar+.scrollTo {
    opacity: 0;
    pointer-events: none;
    transition: .5s;
}

.product-gallery .scrollTo a {
    margin: 0 5px;
    font-size: 28px;
    position: absolute;
    bottom: 0;
}

.product-gallery .scrollTo a.left {
    background: url(images/product/left.png) center no-repeat;
    width: 25px;
    height: 25px;
    background-size: contain;
    display: inline-block;
    left: 15px;
}

.product-gallery .scrollTo a.right {
    background: url(images/product/right.png) center no-repeat;
    width: 25px;
    height: 25px;
    background-size: contain;
    display: inline-block;
    right: -35px;
}

.product-gallery .tabs {
    position: absolute;
    width: 100%;
    height: 150px;
    right: -100%;
    top: 430px;
    padding-left: 50px;
    border-bottom: 0;
    margin-bottom: 0;
    margin-bottom: -16px;
}

.max-md-size .product-gallery .tabs {
    position: relative;
    top: auto;
}

.product-gallery .tabs p {
    font-size: 16px;
    font-weight: bold;
}

.product-gallery .tabs [class*="tab"] {
    width: 120px;
    height: 90px;
    display: inline-block;
    margin: 10px 5px 0;
    cursor: pointer;
    text-align: center;
    background-color: #fff;
    line-height: 90px;
}

.product-gallery .tabs .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: transparent;
}

.product-gallery .tabs .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail {
    background-color: transparent;
}

.product-gallery .tabs .mCSB_dragger_bar {
    background-color: #929797 !important;
}

.product-gallery .tab-content {
    position: relative;
    // height: 560px;
}

.product-gallery .tab-content>div[class^="content-"] {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 1;
    // height: 560px;
}

.product-gallery .tab-content>div.current-cont {
    position: relative;
    opacity: 1;
    pointer-events: all;
    z-index: 5;
}

.product-gallery .gallery {
    width: 100%;
}

.product-gallery .gallery .slider-for {
    width: 100%;
}

.max-md-size .product-gallery .gallery .slider-for {
    height: auto;
    max-height: 560px;
}

.product-gallery .gallery .slider-for .item {
    width: 100%;
    display: table;
    background-color: #fff;
}

.product-gallery .gallery .slider-for .item a {
    display: block;
    width: 100%;
    height: 100%;
}

.product-gallery .gallery .slider-nav {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 25px;
}

.product-gallery .gallery .slider-nav .item {
    width: 105px;
    padding: 0px;
    padding-right: 5px;
}

.product-gallery .gallery .slider-nav .item>span {
    width: 100%;
    height: 100%;
    border: 1px solid #E1E1E1;
    cursor: pointer;
    background-color: #fff;
}

.product-gallery .gallery .slider-nav .item>span img {
    max-width: 100%;
}

.product-gallery .gallery .slider-nav .slick-prev,
.product-gallery .gallery .slider-nav .slick-next {
    margin-top: -25px;
    background-color: transparent;
    color: #929797;
    z-index: 5;
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
}

.product-gallery .gallery .slider-nav .slick-prev:hover,
.product-gallery .gallery .slider-nav .slick-next:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    border: 2px solid #929797;
}

.min-md-size .product-gallery .gallery .slider-nav .slick-prev {
    left: -40px;
}

.min-md-size .product-gallery .gallery .slider-nav .slick-next {
    right: -40px;
}

.product-gallery .gallery .slider-nav .slick-prev:before {
    content: '\f104';
}

.product-gallery .gallery .slider-nav .slick-next:before {
    content: '\f105';
}

.product-features ul {
    width: 80%;
    margin: auto !important;
    margin-bottom: 1.5em !important;
}

.product-features ul li {
    width: 50%;
    font-size: 21px;
    margin: 1em 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.product-features ul li img {
    margin-right: 1em;
}

.product-features .photos {
    background-color: #F2F2F2;
    box-shadow: 0 5px 20px #999;
    padding: 3em 0;
}

.product-features .photos .container {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
}

.product-features .photos .container:before {
    display: none;
}

.product-features .photos .item- {
    width: 33.3%;
    float: left;
}

.product-features .photos .item .pic {
    height: 320px;
    width: 100%;
}

.product-features .photos .item p {
    padding: 0 5px;
}

.max-mx-size .scrollTo {
    display: none;
}

.max-sm-size .product-features ul li {
    width: 100%;
    font-size: 16px;
    margin: 0.5em 0;
}

.max-md-size .product-features .photos .container {
    grid-template-columns: 50% 50%;
}

.max-sm-size .product-features .photos .container {
    grid-template-columns: 100%;
}

.max-sm-size .product-features .photos .item- {
    width: 100%;
}

.max-xs-size .product-features ul li {
    text-align: center;
    flex-direction: column;
}

.max-xs-size .product-features ul li img {
    display: block;
    margin: auto;
}

.product-like {
    text-align: center;
}

.product-like .head .title {
    font-size: 36px;
    margin: 2em 0;
}

.product-like .slider {
    margin: 3em 0 4em;
    padding: 0 10%;
}

.product-like .item {
    width: 25%;
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
}

.product-like .item .pic img {
    max-width: 100%;
}

.product-like .slider .item {
    text-align: center;
    display: block;
    outline: 0;
}


.product-like .slider .item>a {
    display: inline-block;
    outline: 0;
    width: 290px;
    max-width: 100%;
}

.product-like .slider .item .pic {
    height: 230px;
    line-height: 230px;
}

.product-like .slider .item .pic img {
    max-width: 100%;
}

.product-like .slider .item p {
    font-size: 16px;
}

.product-like .slider .slick-prev,
.product-like .slider .slick-next {
    z-index: 10;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    color: transparent;
}

.product-like .slider .slick-prev:hover,
.product-like .slider .slick-next:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
}

.product-like .slider .slick-prev {
    background: url(images/product/left.png) center no-repeat;
    left: 0;
}

.product-like .slider .slick-next {
    background: url(images/product/right.png) center no-repeat;
    right: 0;
}

.max-md-size .product-top {
    padding-bottom: 0;
}

.max-md-size .productInfo {
    width: 100%;
    float: none;
}

.max-md-size .productInfo .descript {
    height: auto;
}

.max-md-size .product-gallery {
    width: 100%;
    float: none;
}

.max-md-size .product-gallery .tabs {
    position: relative;
    right: 0;
    margin-bottom: 1em;
}

.max-md-size .product-gallery .gallery .slider-nav {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.max-md-size .productInfo {
    padding-left: 0;
}

.max-xs-size .productInfo .name {
    font-size: 32px;
}

.max-xs-size .productInfo .descript {
    font-size: 16px;
}

.max-md-size .product-gallery .tabs {
    padding-left: 0;
}

.max-xs-size .product-gallery .tabs li {
    width: 30%;
    margin: 10px 1% 0;
}

.max-sm-size .product-like .item {
    width: 90%;
    // margin: 0 4%;
}

/*product youtube-btn*/

.video-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #F2F2F2;
    color: #929797;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    transition: .5s;
    margin: 1em 5px;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
    border: 1px solid #929797;
    display: inline-block;
}

.video-link:before {
    width: auto;
}

.video-link:hover {
    color: #fff;
    background-color: #929797;
    transition: .5s;
}

.video-link .icon-video {
    background: url(images/common/video.svg) center no-repeat;
    width: 40px;
    height: 40px;
}


/*product youtube*/

div[id^="myModal"] {
    padding-left: 0 !important;
    max-width: 100vw;
}

div[id^="myModal"] .modal-dialog {
    transform: translateY(-50%) !important;
    margin: 0 auto;
    margin-top: 50vh;
    width: 100%;
    max-width: 1024px;
}

div[id^="myModal"] .modal-content {
    box-shadow: 0 0 0 transparent !important;
    border: 0 !important;
    background-color: transparent;
}

div[id^="myModal"] .modal-header {
    padding: 0;
    border-bottom: 0;
    text-align: right;
}

div[id^="myModal"] .icon-close {
    margin: 5px;
    font-size: 20px;
    color: #fff;
}

div[id^="myModal"] .modal-body {
    padding: 0;
}

div[id^="myModal"] .modal-body iframe {
    width: 100%;
    height: 600px;
    max-height: 100%;
}


/* ==========================================================================
    support
 ========================================================================== */

.folder {
    margin-bottom: 2em;
    box-shadow: 5px 5px 15px #D4D4D4;
}


.folder:first-of-type>.title>span.icon-add {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

.folder:first-of-type>.title.open>span.icon-add {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.folder:first-of-type>.contain {
    display: block;
    background-color: #F2F2F2;
}

.folder:first-of-type>.contain img {
    max-width: 100%;
}

.folder>.title {
    background-color: #929797;
    color: #fff;
    padding: 1em;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    -webkit-transition: .5s;
    transition: .5s;
    height: 55px;
}

.folder>.title>span.icon-add {
    float: right;
    font-size: 25px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: .5s;
    transition: .5s;
}

.folder>.title>span.icon-add:before {
    content: '\e145';
}

.folder>.title.open {
    background-color: #F2F2F2;
    color: #929797;
    -webkit-transition: .5s;
    transition: .5s;
}

.folder>.title.open>span.icon-add {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s;
    transition: .5s;
}

.folder>.title.open>span.icon-add:before {
    content: '\e15b';
}

.folder>.contain {
    padding: 1em;
    font-size: 15px;
    background-color: #F2F2F2;
    line-height: 1.8;
    display: none;
}

.folder.folder-maxH {
    max-height: 55px;
    overflow: hidden;
    -webkit-transition: 1s;
    transition: 1s;
}

.folder.folder-maxH.show {
    max-height: 500vh;
    -webkit-transition: 1s;
    transition: 1s;
}

.folder.folder-maxH.folder-dw.show {
    max-height: 343px;
}

.folder.folder-maxH>.contain {
    display: block;
}

.subfolder {
    margin-bottom: 2em;
}
.subfolder>.title {
    background-color: #929797;
    color: #fff;
    padding: 1em;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}

.subfolder>.title>span {
    float: left;
    font-size: 25px;
    margin-right: 15px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: .5s;
    transition: .5s;
}

.subfolder>.title>span:before {
    content: '\e145';
}

.subfolder>.title.open>span {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s;
    transition: .5s;
}

.subfolder>.title.open>span:before {
    content: '\e15b';
}

.subfolder>.contain {
    padding: 1em;
    font-size: 15px;
    background-color: #fff;
    line-height: 1.8;
    display: none;
}

.dm-slider {
    padding: 0px 10%;
}

.dm-slider .item {
    text-align: center;
    padding: 0 .5em;
}

.dm-slider .slick-prev,
.dm-slider .slick-next {
    background-color: transparent;
    color: #929797;
    border: 2px solid #929797;
    margin-top: -27.5px;
}

.dm-slider .slick-prev {
    left: 20px;
}

.dm-slider .slick-next {
    right: 20px;
}

.dm-slider .slick-prev:before {
    content: '\f104';
}

.dm-slider .slick-next:before {
    content: '\f105';
}

.news-folder>.title {
    font-size: 21px;
    font-weight: bold;
    padding: 1em 1em 1em 50px;
    color: #fff;
}

.news-folder>.contain {
    padding: 10px 50px 30px;
}

.news-folder>.title.open {
    color: #5f6464;
}

.news-item {
    display: block;
    margin-bottom: 2em;
}

.news-item time {
    font-size: 16px;
}

.news-item .title {
    font-size: 16px;
    margin: .5em 0;
    font-weight: bold;
    color: #5f6464;
}

.news-item p {
    overflow: hidden;
}

.news-item p:after {
    content: 'Read More';
    font-weight: bold;
    color: #5f6464;
}

.news-item:hover {
    color: #5f6464;
}

.news-item:hover p:after {
    color: #36CFD7;
}

.news-cont {
    background-color: #F3F3F3;
    box-shadow: 5px 5px 15px #D4D4D4;
    padding: 5em;
    margin-bottom: 3em;
}

.max-sm-size .news-cont {
    padding: 2em;
}

.news-cont .button {
    margin-top: 50px;
}

.max-sm-size .news-cont .button {
    margin-top: 20px;
}

#newsIn {
    background: url(images/common/banner-bar.png) center top no-repeat;
}

#newsIn .head {
    margin: 0 0 2em;
    padding-top: 3em;
}

#newsIn .head .container {
    padding-left: calc(5em + 15px);
    padding-right: calc(5em + 15px);
}

#newsIn .head .title {
    font-size: 36px;
    margin: .5em 0;
}

#newsIn .head time {
    font-size: 16px;
}

.max-sm-size #newsIn .head .container {
    padding-left: 2em;
    padding-right: 2em;
}

.max-sm-size .news-in {
    padding: 2em;
}

.news-in {
    background-color: #F3F3F3;
    box-shadow: 5px 5px 15px #D4D4D4;
    padding: 5em;
    font-size: 16px;
    line-height: 1.8;
}

.news-in img {
    max-width: 100%;
}

.pager li a {
    color: #5f6464;
    font-size: 16px;
    font-weight: bold;
    background-color: #fff;
    border: 0;
}

.pager li a>span {
    font-size: 18px;
    vertical-align: middle;
}

.pager li a:hover {
    background-color: #fff;
    color: #36cfd7;
}

.pager li.disabled a {
    opacity: .7;
    pointer-events: none;
}

.pager li.disabled a:hover {
    color: #5f6464;
}


/* ==========================================================================
    history
 ========================================================================== */

.history-slider {
    padding: 0px 10%;
    margin-bottom: 100px;
}

.max-sm-size .history-slider {
    padding: 0;
}

.max-sm-size .history-slider .slider-for {
    height: auto;
}

.history-slider .slider-nav {
    margin-bottom: 2em;
}

.history-slider .slider-nav .item {
    text-align: center;
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.history-slider .slider-nav .item .year {
    width: 100%;
    font-size: 16px;
    cursor: pointer;
    line-height: 65px;
    position: absolute;
    display: block;
    height: 65px;
}

.history-slider .slider-nav .item .year:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    z-index: 1;
    cursor: default;
    width: 100%;
    height: 4px;
    background: url(images/about/line.png) center no-repeat;
}

.history-slider .slider-nav .item .dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: block;
    background-color: #D8DCDD;
    margin: auto;
    margin-top: 65px;
    position: relative;
    z-index: 5;
    cursor: pointer;
}

.history-slider .slider-nav .item.slick-current .year {
    font-size: 38px;
    color: #36cfd7;
}

.history-slider .slider-nav .item.slick-current .dot {
    width: 25px;
    height: 25px;
    margin-top: 60px;
    cursor: pointer;
}

.history-slider .slider-nav .item.slick-current .dot:after {
    content: '';
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 50%;
    position: absolute;
    z-index: -5;
    left: 5px;
    top: 5px;
    background-color: #fff;
}

.history-slider .slider-for {
    padding: 2em;
}

.history-slider .slider-for .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.history-slider .slider-for .item.right {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.history-slider .slider-for .item .pic img {
    max-width: 100%;
}

.history-slider .slider-for .item .text {
    padding: 0 3em;
    text-align: center;
}

.history-slider .slider-for .slick-prev,
.history-slider .slider-for .slick-next {
    background-color: transparent;
    color: #929797;
}

.min-sm-size .history-slider .slider-for .slick-prev {
    left: -65px;
}

.history-slider .slider-for .slick-prev:before {
    content: '\f104';
    font-size: 60px;
}

.min-sm-size .history-slider .slider-for .slick-next {
    right: -65px;
}

.history-slider .slider-for .slick-next:before {
    content: '\f105';
    font-size: 60px;
}

.max-sm-size .history-slider .slider-for .item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.max-sm-size .history-slider .slider-for .item .pic {
    margin-bottom: 2em;
    width: 70% !important;
}

.max-sm-size .history-slider .slider-for .item .text {
    padding: 0;
}

.max-sm-size .history-slider .slider-nav .item.slick-current .year {
    font-size: 32px;
}

.max-sm-size .history-slider .slider-for .slick-next {
    right: 0;
}

.max-sm-size .history-slider .slider-for .slick-prev {
    left: 0;
}

/* ==========================================================================
    contact
 ========================================================================== */

form.contact {
    width: 80%;
}

form.contact label {
    font-size: 16px;
}

form.contact .form-group {
    // position: relative;
}

form.contact .form-group.row {
    margin-left: 0;
    margin-right: 0;
}

form.contact .form-group.row div[class^="col-"] {
    position: static !important;
}

.min-sm-size form.contact .form-group.row .col-sm-6:first-of-type {
    padding-right: 5px;
}

.min-sm-size form.contact .form-group.row .col-sm-6:last-of-type {
    padding-left: 5px;
}

form.contact .form-control {
    border: 0;
    border-radius: 0;
    height: 40px;
}

form.contact textarea.form-control {
    height: auto;
}

form.contact #reload-img {
    float: right;
    margin-top: -36px;
    cursor: pointer;
}

form.contact .tip {
    color: #929797;
    font-size: 16px;
    display: block;
    margin-bottom: 15px;
}

form.contact .btn {
    width: 48%;
    border: 0;
    background-color: #989898;
    color: #fff;
    border-radius: 0;
    font-size: 21px;
    -webkit-transition: .5s;
    transition: .5s;
}

form.contact .btn:first-of-type {
    margin-right: 2%;
}

form.contact .btn:hover {
    background-color: #36cfd7;
    -webkit-transition: .5s;
    transition: .5s;
}

.max-sm-size form.contact {
    width: 100%;
}

.form-control:focus {
    border-color: #B2B2B2;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(178, 178, 178, 0.6);
}


/* ==========================================================================
    career
 ========================================================================== */

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.max-sm-size .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.career-left {
    float: left;
    width: 40%;
    padding-right: 2em;
    box-sizing: border-box;
}

.career-right {
    float: right;
    width: 60%;
    padding-left: 2em;
    box-sizing: border-box;
    border-left: 1px solid #D5D5D5;
}

.career-right .title,
.career-right .place {
    color: #5f6464;
    font-weight: bold;
    margin: 1em 0;
}

.career-right .title {
    margin-top: 0;
}

.career-right .place {
    font-size: 16px;
}

.career-right ul li {
    margin: 1em 0;
    font-size: 16px;
    text-decoration: underline;
}

.career-right .location {
    margin-bottom: 2em;
}

.career-right .location li {
    text-decoration: none;
    margin: .5em 0;
}

.career-right .location li b {
    color: #5f6464;
}

form.career .btn {
    width: 100%;
    max-width: 500px;
    border: 0;
    background-color: #989898;
    color: #fff;
    border-radius: 0;
    font-size: 21px;
    -webkit-transition: .5s;
    transition: .5s;
    margin-top: 2em;
}

form.career .btn:first-of-type {
    margin-right: 2%;
}

form.career .btn:hover {
    background-color: #36cfd7;
    -webkit-transition: .5s;
    transition: .5s;
}

.max-sm-size .career-left {
    width: 100%;
    margin-bottom: 3em;
    padding-right: 0;
}

.max-sm-size .career-right {
    width: 100%;
    border-left: 0;
}

.max-sm-size div.cs-select,
.max-sm-size form.career .btn {
    max-width: 100%;
}

.bluebar {
    width: 100%;
    height: 27px;
    background: url(images/common/banner-bar.png) center;
    background-size: cover;
    position: relative;
    z-index: 5;
}

/* ==========================================================================
    search
 ========================================================================== */
.searchTitle {
    text-align: center;
    margin: 1em 0;
}

.documentList {
    width: 100%;
    text-align: center;
    min-height: 350px;
    min-height: 35vh;
}

@media (max-height:767px) {
    .max-sm-size .documentList {
        min-height: 180px;
        min-height: 25vh;
    }
}

@media (max-height:700px) {
    .max-sm-size .documentList {
        min-height: 150px;
        min-height: 10vh;
    }
}

.max-sm-size .documentList h3 {
    font-size: 120%;
}

.documentList ul {
    display: inline-block;
    text-align: left;
}

.documentList li {
    margin: .5em 0 !important;
}

.documentList li a {
    font-size: 18px;
}

.documentList li a:hover {
    color: #36CFD7;
}

.searchline {
    margin: 1em 0;
}

#searchResult ul {
    list-style: disc;
}

/* ==========================================================================
    partner
 ========================================================================== */
.teamList .team {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 3% 0;
    border-bottom: 1px solid #D0D0D0;
}

.max-sm-size .teamList .team {
    padding: 30px 0;
}

.teamList .team:first-of-type {
    padding-top: 0;
}

.teamList .team:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.teamList .team .pic {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
}

.teamList .team .text {
    padding: 0px 10px;
}

.teamList .team .text .title {
    font-size: 18px;
    color: #72787C;
}

.teamList .team .text p {
    font-size: 16px;
    margin-bottom: 0;
}

.teamList .team .text a {
    color: #72787C;
}

.teamList .team .text a:hover {
    text-decoration: underline;
}

#cookie-warning {
    background-color: #C2C2C2;
    bottom: 0;
    color: #000 !important;
    display: none;
    font-size: 13px;
    left: 0;
    padding: 15px 0;
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 999999999;
}

#cookie-warning a {
    color: #000;
    text-decoration: underline;
}

.btn-cookieinfo {
    background: none repeat scroll 0 0 #000;
    border: 1px solid #000;
    color: #fff;
    transition: all 350ms ease-in-out 0s;
    border-radius: 0;
    font-size: 14px;
    font-weight: 300;
    outline: medium none !important;
    text-transform: uppercase;
    line-height: 1.5;
    padding: 1px 5px;
}

.btn-cookieinfo:hover,
.btn-cookieinfo:focus,
.btn-cookieinfo:active {
    background-color: #2B2B2B;
    border-color: #2B2B2B;
    color: #fff;
    cursor: pointer;
}

/*-- Cookie --*/

.f36 {
    font-size: 36px;
}

.max-sm-size .f36 {
    font-size: 25px;
}

.f18 {
    font-size: 18px;
}

.f16 {
    font-size: 16px;
}

.button {
    display: inline-block;
    min-width: 170px;
    height: 45px;
    padding: 0 20px;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff !important;
    font-size: 14px;
    line-height: 45px;
    text-align: center;
    transition: background 0.5s, border 0.5s !important;
}

.max-xs-size .button {
    padding: 0 15px;
}

.button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.button.blue {
    background-color: #49BDC5;
    border-color: #49BDC5;
}

.button.blue:hover {
    background-color: #58E1E8;
    border-color: #58E1E8;
}

.button.gray {
    background-color: #C3C3C3;
    border-color: #C3C3C3;
}

.button.gray:hover {
    background-color: #A9A9A9;
    border-color: #A9A9A9;
}

.noneStyle {
    margin: 0;
    padding: 0;
}

.noneStyle>li {
    list-style: none;
}

ul.dash {
    margin: 0;
    padding: 0;
}

ul.dash>li {
    padding-left: 15px;
    position: relative;
    list-style: none;
}

ul.dash>li:before {
    content: '-';
    position: absolute;
    left: 0;
    top: 0;
}

.gray-box {
    padding: 30px 50px;
    max-height: 90vh;
    position: fixed;
    z-index: 1001;
    background-color: rgba(83, 84, 84, 0.9);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.max-md-size .gray-box {
    width: 90vw;
    max-height: 100vh;
    padding: 25px 35px;
    background-color: rgba(83, 84, 84, 1);
}

.gray-box .container:after {
    content: '';
    display: block;
    clear: both;
}

.gray-box .left {
    float: left;
    width: -moz-calc(100% - 170px);
    width: -webkit-calc(100% - 170px);
    width: calc(100% - 170px);
    padding-right: 50px;
}

.max-md-size .gray-box .left {
    float: none;
    width: 100%;
    padding-right: 0;
}

.gray-box .right {
    float: right;
    width: 170px;
}

.max-md-size .gray-box .right {
    float: none;
    width: 100%;
    text-align: center;
}

.gray-box .right .button:first-of-type {
    margin-bottom: 15px;
}

.max-md-size .gray-box .right .button:first-of-type {
    margin-right: 10px;
}

.max-md-size .gray-box .right .button {
    min-width: 0;
    margin-bottom: 0;
}

.gray-box a {
    color: #fff;
    transition: color 0.5s;
}

.gray-box a:hover {
    color: #49BDC5;
}

.gray-box p {
    margin-bottom: 20px;
}

.gray-box .title {
    margin-bottom: 40px;
    line-height: normal;
}

.max-sm-size .gray-box .title {
    margin-bottom: 10px;
}

.gray-box .sub-title {
    margin-bottom: 10px;
    color: #49BDC5;
}

.gray-box .sub-title.red {
    /* color: #943433; */
    color: #FF7E7E;
}

.gray-box .half {
    position: relative;
}

.gray-box .half:after {
    content: '';
    display: block;
    clear: both;
}

.gray-box .half:before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    background-color: #B7B7B8;
}

.max-sm-size .gray-box .half:before {
    content: normal;
}

.gray-box .half .tabs {
    float: left;
    width: 50%;
    padding-right: 50px;
}

.max-sm-size .gray-box .half .tabs {
    float: none;
    width: 100%;
    margin-bottom: 20px;
    padding-right: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #B7B7B8;
}

.gray-box .half .tabs-content {
    float: left;
    width: 50%;
    padding-left: 50px;
}

.max-sm-size .gray-box .half .tabs-content {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-bottom: 20px;
}

.gray-box .tabs {
    display: block !important;
}

.gray-box .tabs ul li a {
    display: block;
    padding: 15px;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}

.gray-box .tabs ul li.active a {
    border-color: #49BDC5;
}

.gray-box .tabs ul li a span {
    display: block;
    color: #C3C3C3;
    font-size: 12px;
    line-height: normal;
}

.gray-box .tabs ul li a .name {
    color: #fff;
    font-size: 17px;
}

.cookie-warning {
    width: 100% !important;
    /* padding: 20px 0px; */
    left: 0;
    bottom: 0;
    background-color: rgba(83, 84, 84, 0.8);
    border-radius: 0;
    display: none;
}

.cookie-warning a {
    color: #fff;
    position: relative;
    transition: color 1s;
}

.cookie-warning a::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -2px;
    background-color: #fff;
    transition: 1s;
}

.cookie-warning a:hover {
    color: #36cfd7;
}

.cookie-warning a:hover::before {
    background-color: #36cfd7;
}

.cookie-warning p {
    margin-bottom: 15px;
}

.cookie-warning p:last-child {
    margin-bottom: 0;
}

.cookie-warning .buttons .button {
    height: auto;
    padding: 10px 20px;
    line-height: 22px
}

.max-md-size .cookie-warning {
    padding: 25px 10px;
}

.max-bg-size .cookie-warning .left {
    height: 125px;
    overflow-x: hidden;
    overflow-y: auto;
    width: calc(100% - 185px);
    padding-right: 0;
    -webkit-overflow-scrolling: touch;
}

.max-md-size .cookie-warning .left {
    width: 100%;
}

.max-md-size .cookie-warning .buttons .button {
    margin-top: 20px;
    margin-bottom: 0;
}

/* .max-sm-size .cookie-warning {
    padding: 15px 0;
    background-color: rgba(83, 84, 84, 0.8);
} */
/* .min-sm-size .cookie-warning .buttons .button {
    height: 60px;
} */
/* .cookie-warning .right .button:first-of-type {
    margin-bottom: 15px;
} */
.max-xs-size .cookie-warning .right .button:first-of-type {
    margin-right: 10px;
}

/* .max-xs-size .cookie-warning .right .button {
    min-width: 0;
    margin-bottom: 10px;
} */

.cookie-manage {
    display: none;
    width: 910px;
    /* width: 60vw; */
    top: 42%;
    left: 50%;
    padding-top: 34px;
    z-index: 1002;
    transform: translateX(-50%) translateY(-50%);
}

.max-bg-size .cookie-manage {
    width: 90vw;
    top: 40%;
}

.max-md-size .cookie-manage {
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    padding: 35px;
    border-radius: 0 0 5px 5px;
    transform: translate(0, 0);
    -webkit-overflow-scrolling: touch;
}

/* .max-sm-size .cookie-manage{
    top: 47px;
    height: calc(100vh - 47px);
} */
.cookie-manage .bottom {
    position: relative;
}

.cookie-manage .link {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 9px;
}

.max-xs-size .cookie-manage .link {
    display: inline-block;
    margin-bottom: 10px;
    position: relative;
}

.cookie-manage .buttons {
    text-align: right;
}

.max-xs-size .cookie-manage .buttons {
    text-align: left;
}

.cookie-manage .buttons .button {
    min-width: 0;
}

.cookie-manage .buttons .button:first-of-type {
    margin-right: 10px;
}

.change-settings p {
    margin-bottom: 0;
}

.mail-notice,
.change-settings {
    display: none;
    width: 750px;
    top: 50%;
    left: 50%;
    z-index: 1003;
    transform: translate(-50%, -50%);
}

.mail-notice p,
.change-settings p {
    margin-bottom: 0;
}

.mail-notice p a {
    display: inline-block;
    position: relative;
    color: #fff;
}

.mail-notice p a::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #fff;
    transition: 1s;
}

.mail-notice p a:hover {
    color: #49BDC5;
}

.mail-notice p a:hover::before {
    background-color: #49BDC5;
}

.max-md-size .mail-notice p,
.max-md-size .change-settings p {
    margin-bottom: 25px;
}

.mail-notice .button:last-child,
.change-settings .button:last-child {
    margin-bottom: 0 !important;
}

.mail-notice .button,
.change-settings .button {
    /* height: 50px; */
    height: auto;
    padding: 10px 20px;
    line-height: 22px;
}

.max-sm-size .mail-notice,
.max-sm-size .change-settings {
    width: 90%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.mail-notice:after,
.change-settings:after {
    content: '';
    display: block;
    clear: both;
}

.min-md-size .change-settings {
    top: 50%;
    z-index: 1004;
    transform: translateX(-50%) translateY(-50%);
}

.agree {
    display: block;
    margin: 20px 0;
}

a.link {
    color: #49BDC5;
}

/* Brice 10.21 加簽 */

/* Product video */
.video-slider {
    width: 80%;
    margin: 20px auto;
}

.video-slider .slick-list {
    width: 80%;
    margin: 0 auto;
}

.video-slider .video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%
}

.video-slider iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.video-slider .slick-prev,
.video-slider .slick-next {
    z-index: 10;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    color: transparent;
    background-color: transparent;
    color: #929797;
    border: 2px solid #929797;
}

/* .video-slider .slick-prev:hover,
.video-slider .slick-next:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
} */

.video-slider .slick-prev {
    left: 0;
}

.video-slider .slick-prev:before {
    content: '\f104';
    opacity: 1;
}

.video-slider .slick-next {
    right: 0;
}

.video-slider .slick-next:before {
    opacity: 1;
    content: '\f105';
}

.video-slider .slick-disabled {
    opacity: 0.4;
}

.video-slider .slick-dots li button {
    background: #aaa
}

.video-slider .slick-dots li.slick-active button {
    background: #36cfd7;
}

@media screen and (max-width: 577px) {
    .video-slider {
        width: 100%;
        margin: 20px auto;
    }

    .video-slider .slick-list {
        width: 100%;
        margin: 0 auto;
    }
}

.productList .item .pic {
    display: block;
}

/* FAQ */
@media screen and (min-width: 769px) {
    #faq {
        transition: height 1s;
    }

    #faq .container {
        position: relative;
    }

    .folder-faq {
        box-shadow: none;
        margin-bottom: 1em;
    }

    .folder-faq .title {
        background: transparent;
        color: #999;
    }

    .folder-faq>.title {
        position: relative;
        display: inline-block;
        width: 250px;
    }

    .folder-faq>.title .icon-add {
        display: none;
    }

    .folder-faq .title.open {
        background: transparent;
        color: #474747;
    }

    .folder-faq .title.open:after {
        opacity: 1;
    }

    .folder-faq .title.open~.contain {
        opacity: 1;
    }

    .folder-faq .title.open~.contain:before {
        opacity: 1;
    }

    .folder:first-of-type>.contain {
        background-color: transparent;
    }

    .folder-faq>.contain {
        background-color: #fff;
        border: 1px solid #d4d4d4;
        border-radius: 10px;
        overflow: hidden;
        z-index: 1;
        width: calc(100% - 270px);
        float: right;
        top: 0;
        padding: 0;
        opacity: 0;
        transition: opacity 0.5s;
    }

    .folder-faq>.title:after {
        content: '';
        position: absolute;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        opacity: 0;
        border-style: solid;
        border-width: 12px 20px 12px 0;
        border-color: transparent #d4d4d4 transparent transparent;
        transition: opacity 0.5s;
    }

    .folder-faq .subfolder {
        margin-bottom: 0;
    }

    .folder-faq .subfolder:nth-child(even) {
        background: #f7f7f7;
    }

    .folder-faq .subfolder {
        padding: 10px 50px 10px 10px;
    }

    .folder-faq .subfolder .title .icon-add {
        position: absolute;
        right: 20px;
    }

    .folder-faq .subfolder .contain {
        background: transparent;
    }

}