﻿@charset "utf-8";

/* 設計師用 RWD版CSS檔 style_rwd.css */
/* 說明：
    可提供設計師在此檔，針對RWD版面進行設計；非RWD版面則不需載此CSS檔。*/
@media (min-width: 576px) {
    .banner {
        padding-top: 77px;
    }

    .banner .container {
        padding: 0;
    }

    .banner .banner-area li {
        height: 300px;
    }

    .banner .editor .title {
        font-size: 2.25rem;
        padding-bottom: 15px;
        margin-bottom: 24px;
    }

    .header .navbar .navbar-brand {
        width: 219px;
        height: 47px;
        margin: 15px 0 15px;
    }

    .team-section {
        margin: 70px 0;
    }

    .talents-section {
        padding: 50px 0 70px;
    }

    .slick .slick-arrow {
        width: 50px;
        height: 50px;
        background-size: 16px;
    }

    .slick .slick-prev {
        left: -50px;
    }

    .slick .slick-next {
        right: -50px;
    }

    .footer .siteinfo {
        padding: 24px 0;
    }

    .footer .siteinfo ul>li {
        padding: 0 14px;
    }

    .footer .copyright {
        padding: 20px 0;
    }

    .gotop {
        right: 0;
    }

    .team-sepe-area+.team-sepe-area {
        margin-top: 40px;
    }

    .team-sepe-area .tsepe-box ul li {
        width: 50%;
    }

    .side ul .nav-item {
        margin: 0 5px;
    }
}

@media (min-width: 768px) {
    .header .navbar .navbar-nav>li>a {
        background: -webkit-gradient(linear, left top, right top, from(#a63b3d), color-stop(50%, #a63b3d), color-stop(50%, #000));
        background: linear-gradient(to right, #a63b3d, #a63b3d 50%, #000 50%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% 100%;
        background-position: 100%;
        -webkit-transition: background-position .5s ease;
        transition: background-position .5s ease;
        text-decoration: none;
    }

    .header .navbar-nav .nav-item.nav-lang {
        margin-left: 10px;
    }

    .slick .slick-arrow {
        width: 60px;
        height: 60px;
        background-size: 18px;
    }

    .slick .slick-prev {
        left: -60px;
    }

    .slick .slick-next {
        right: -60px;
    }

    .header .navbar .navbar-brand {
        margin: 26px 0 26px;
    }

    .banner {
        padding-top: 99px;
    }

    .banner .banner-area li {
        height: 350px;
    }

    .gallery-list .item {
        margin-bottom: 20px;
    }

    .gallery-list .item .info .title {
        font-size: 1.5rem;
        padding: 15px;
    }

    .gallery-list .item .info .desc {
        margin: 25px 0;
    }

    #floating .btn-floating {
        display: none;
    }

    #floating {
        top: 110%;
        transition: initial;
    }

    body.floatingAni #floating {
        position: fixed;
        top: 99px;
    }

    .h3 {
        font-size: 1.5rem;
        padding: 15px;
    }

    .team-sepe-area .tsepe-box ul {
        padding: 0 20px 15px;
    }

}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    .intro-sub .limit-width {
        max-width: 60%;
    }
}

@media (max-width: 1199px) {
    .header .banner .banner-area li {
        height: auto;
    }

    .header .banner .banner-area li img {
        display: block;
    }

    .gallery-list.slick {
        margin: 0 60px;
    }

    #floating {
        position: absolute;
        right: 10px;
    }
}

@media (max-width: 991px) {
    .side {
        background: #fbfaf4;
    }

    .side .collapse-side-content.show {
        display: block;
    }

    .side .collapse-side-content {
        display: none;
    }
}

@media (max-width: 767px) {
	.gallery-list .item .info .title {
    min-height: auto;
}
    #floating {
        position: fixed;
        top: auto;
        bottom: 60px;
        right: -40px;
    }

    #floating.open {
        right: 0;
    }

    .header .navbar .lang {
        display: block;
        margin-top: 10px;
    }

    .header .navbar .btn-default {
        color: #ffffff;
        border-color: #fff;
        width: 100%;
    }

    .header .bsnav-mobile .navbar .navbar-brand {
        background-image: url(../images/all/logo_white.svg);
        margin-bottom: 40px;
    }

    .side ul .nav-item {
        width: 100%;
        margin: 0;
    }

    .side ul .nav-item .nav-link {
        font-size: 0.9375rem;
        padding: 6px 21px;
        width: 100%;
    }

    .side .collapse-side-content {
        padding: 5px 10px 1px;
    }

    /*** 手機2欄時，縮小左右間距 ***/
    .mob-two-col>[class*="col-"]:nth-child(2n+1) {
        padding-right: 6px;
    }

    .mob-two-col>[class*="col-"]:nth-child(2n) {
        padding-left: 6px;
    }
}

@media (max-width: 575px) {
	.banner .editor .desc {
		line-height: 1.5;
	}
	
    .gallery-list.slick {
        margin: 0 40px;
    }

    .footer .siteinfo ul {
        padding-right: 17px;
    }

    .navbar-toggler {
        width: 20px;
    }

    .navbar-toggler .navbar-toggler-icon,
    .navbar-toggler .navbar-toggler-icon::after,
    .navbar-toggler .navbar-toggler-icon::before {
        height: 2px;
    }

    .navbar-toggler.toggler-spring .navbar-toggler-icon::before {
        top: 8px;
    }

    .navbar-toggler.toggler-spring .navbar-toggler-icon::after {
        top: 16px;
    }

    .page-info>div {
        width: 100px;
        margin: 0 auto;
    }

}