/* index2 */


/* scrollbar */
/* ::-webkit-scrollbar {
    width: 7px;
}
::-webkit-scrollbar-track {
    background: #eee; 
}
::-webkit-scrollbar-thumb {
    background: #777; 
    border-radius:10px;
    transition: all .8s;
}
::-webkit-scrollbar-thumb:hover {
    background: #555; 
} */

/* loading */
    .page-loader img{
        transform: translate(-50%,-50%);
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 14%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
}
    .page-loader svg{
        width: 50px;
        transform: translate(-50%,-50%);
        position: absolute;
        top: 55%;
        left: 50%;
    }
    @media screen and (max-width: 1200px) {
        .page-loader img{
            max-width: 20%;
        }
    }
    @media screen and (max-width: 1024px) {
        .page-loader img{
            max-width: 60%;
        }
    }
/* end-loading */

/* 直式三層nav */

    @media (min-width: 768px){
        
        .navbar-custom .dropdown-menu{
            position:absolute;
            display:block;
            visibility:hidden;
            opacity:0;
            left:0;
            width:auto;
                height:auto;
                display:block;
        }
    }
    
    @media screen and (max-width: 1024px) {
        .navbar-custom .dropdown-menu{
            width:auto;
            height:auto;
            /* display:block; */
        }
    }
    @media (max-width: 768px){
        
        .navbar-custom .dropdown-menu{
            text-align: center;
        }
        .navbar-custom .dropdown-menu>li{
            border-bottom:1px solid #ccc
        }
        .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover{
            background-color: unset!important;
            font-weight: bold;
        }
    }

    #navbar{
        transition: all 1s;
        top:0;
        margin-bottom: 0;
    }
    @media screen and (max-width: 767px) {
        .navbar-custom{
            /* top:0 ; */
        }
        #navbar.hidee{
            /* top:-130px ; */
            transition: all .3s;
            position: relative;
        }
        .navbar .container .navbar-collapse.collapse ul.navbar-right.hideee{
            bottom:-55px;
        }
    }
    
    .nav > li {
        position: relative;
        
    }
    
    @media screen and (min-width: 767px){
        ul.nav.navmain>li.dropdown {
        display: flex;
        align-items: center;
        }
    }
    .navbar-custom .dropdown-menu>li>a {
        border-bottom:none !important;
        padding: 11px 35px 11px 15px;
        margin-right: 0;
        transition: all .5s;
        /* width:270px; */
    }

    .navbar-custom .dropdown-menu>li>ul>li {
        padding:0;
    }
    .navbar-custom .dropdown-menu>li>ul>li>a:hover {
        /* color: #fff; */
    }

    .dropdown, .dropup {
        position: relative;
    }
/* nav hello bar */
.navbar .bar{
    text-align: center;
    flex: 1;
    position: relative;
    padding: 10px 28px 10px 5px;
    /* border-top: 1px solid #cacaca; */
    color: #fff;
    font-size: medium;
    letter-spacing: 0.2pt;
}
.navbar .bar>span{
    margin-left: 45px;
}
.navbar .bar a{
    margin-left: 15px;
    border: 1px solid #fff;
    padding: 4px 25px;
    border-radius: 2px;
    background-color: transparent;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
      color: #fff
}
.navbar .bar a:hover{
    background-color: #fff;
    color:#222;
    letter-spacing: 2px;
}
.navbar .bar .bar_btn{
    display: inline-block;
}
.navbar .bar .adclose{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all .5s;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}
.navbar .bar .adclose:hover{
    background-color: #eee;
    color:#333;
    border: 1px solid #aaa;
    transform: translateY(-50%) rotate(90deg);
}


/* end-nav hello bar */
    

    
/* nav phone */
    .navbar-fixed-top .navbar-collapse {
        max-height: 100vh;
        height: 100vh;
    }

    .navbar-nav .open .dropdown-menu > li > a{
        position: relative;
    }

    
    /* ham animate */
    .change span.icon-bar{
        transition: all .4s;
    }
    .change span.icon-bar:nth-child(2) {
        -webkit-transform: rotate(-45deg) translate(-6px, 6px);
        transform: rotate(-45deg) translate(-3px, 3px);
    }

    .change span.icon-bar:nth-child(3) {
        opacity: 0;
    }

    .change span.icon-bar:nth-child(4) {
        -webkit-transform: rotate(45deg) translate(-5px, -6px);
        transform: rotate(45deg) translate(-5px, -5px);
    }
    .position{
        position: fixed;
    }
    /* end-ham animate */

/* end - nav phone */


/* search */

    .navbar-custom .dropdown-menu>li>i {
    font-size:25px;
        position: absolute;
        top: 50%;
        right: 60px;
        transform: translateY(-50%);
        cursor: pointer;
    }
    .navbar-custom .dropdown-menu>li>input {
        border-radius: 2px;
        background:transparent;
        border:none;
        box-shadow: none;
        outline: none;
        width:500px;
        /* height: 45px; */
        font-size: 20px;
        line-height: 15px;
        color: #fff;
        /* margin-top: 15%; */
        margin: 50px;
        padding: 5px;
    }
    .navbar-custom .dropdown>a>input{
        border-radius: 2px;
        background:transparent;
        border:none;
        box-shadow: none;
        outline: none;
        display: none;
        padding: 4px;
        width: 100px;
    }
    @media screen and (max-width: 767px) {
        .navbar-custom .dropdown>a>input{
            display: inline-block;
        }
    }

    .searchinput::-webkit-input-placeholder { color:rgba(255,255,255,.7);letter-spacing: 2px; }
    .searchinput:-moz-placeholder {color:rgba(255,255,255,.7); letter-spacing: 2px; }
    .searchinput::-moz-placeholder { color:rgba(255,255,255,.7); letter-spacing: 2px;}
    .searchinput:-ms-input-placeholder { color:rgba(255,255,255,.7);letter-spacing: 2px; }


    .searchinput:focus::-webkit-input-placeholder { color: #fff;letter-spacing: 2px; }
    .searchinput:focus:-moz-placeholder { color: #fff; letter-spacing: 2px; }
    .searchinput:focus::-moz-placeholder { color: #fff; letter-spacing: 2px;}
    .searchinput:focus:-ms-input-placeholder { color: #fff;letter-spacing: 2px; }

    #search>.searchinput:focus{
        /* border: 1px solid #bbb; */
    }

/* end - search */

/* end - 直式三層nav */


/* parallax */

    .full_page {
        /* height: 60vh; */
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 38px;
        box-shadow: 0vw 0vw 5vw #666 inset;
    }

    .project {
        background: url("http://photo.queenshop.com.tw/www/index/assets/images/project.jpg") center center no-repeat fixed;
        background-size: cover;
        /* height:70vh; */
    }
    @media screen and (max-width: 1024px) {
        .project{
            /* height:40vh; */
        }
    }

/* end - parallax */

/* end - index2 */


/* index3 */

/* new product */
.module>.main>.new_pro{
    width:60%;
    display: flex;
    justify-content: center;
}
@media screen and (max-width: 1200px) {
    .module>.main>.new_pro{
        width:100%;
    }
}
.new_pro>.pro_card{
    flex:4;
    margin:5px;
}
.new_pro>.pro_card>a>figure{
    overflow: hidden;
    margin:10px 0;
    position: relative;
}
.new_pro>.pro_card>a>figure>img{
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.new_pro>.pro_card>a:hover>figure>img{
    transform: scale(1.2);
}

.pro_box{
    background: rgba(0,0,0,.5);
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    opacity: 0;
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.new_pro>.pro_card>a:hover>figure>.pro_box{
    /* width:100%; */
    opacity: 1;
}
.pro_info{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    color:#fff;
    text-align: center;
}
.pro_info>p{
    margin-top:55%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    /* transition-delay: .5s; */
    font-size: 11pt;
    letter-spacing: 1px;
    margin-bottom: 0;
}
.pro_info>p>span{
    display: block;
}
.new_pro>.pro_card>a:hover>figure>.pro_info>p{
    margin-top:50%;
    opacity: 1;
}

.pro_card>a>figure>.pro_info>.pro_color{
   /* background: yellow; */
   width:100%;
   height:10px;
   display: flex;
   justify-content: center;
}
.pro_card>a>figure>.pro_info>.pro_color>.colorcircle{
    width:10px ;
    height:10px;
    border-radius: 50%;
    margin:0 4px;
    opacity: 0;
    transition: all .5s;
    /* border:1px solid rgba(255,255,255,.4); */
}
.new_pro>.pro_card>a:hover>figure>.pro_info>.pro_color>.colorcircle{
    opacity: 1; 
}

/* section */
.section figure img,
.section1 figure img, 
.section2 figure img, 
.section3 figure img,
.section4 figure img,
.section5 figure img{
    width:100%;
}
.section,
.section1,
.section2,
.section3,
.section4,
.section5{
    display: flex;
    justify-content: center;
}
/* .section3 figure img:nth-child(1){
    transition: all .8s ;
    position: absolute;
    top:0;
    left:0;
    margin: 0;
}
.section3 figure:hover img:nth-child(1){
    opacity: 0;
} */

/* scroll function - figure */
section figure{
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}
section figure.in-view{
    opacity: 1;
    transform: translateY(0);
}

/* brand */
.brand>.container{
    padding-bottom: 70px;
}
.brand .container .row .col-sm-3 .icon-list{
    height: 200px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

}

.brand .container .row .col-sm-3 p,
.brand .container .row .col-sm-3 li,
.brand .container .row .col-sm-3 a,
.brand .container .row .col-sm-3 h5{
    color:#fff;
    letter-spacing: 1.5px;
}
.brand .container .row .col-sm-3 h5{
    letter-spacing: 5px;
}
@media screen and (max-width: 1260px) {
    .brand>.container{
        width:100%;
    }
}
@media screen and (max-width: 900px) {
    .brand>.container{
        margin:0
    }
}

@media screen and (max-width:890px) {
    .brand>.container{
        margin:0;
        padding:0;
    }
}

@media screen and (max-width:870px) {
    .brand>.container>.row>.col-sm-3{
        padding:0 5px;
    }
}
@media screen and (max-width:780px) {
    .brand>.container>.row>.col-sm-3{
        padding:0 2px;
    }
}
@media screen and (max-width:767px) {
    .brand>.container{
        padding:0 15px;
    }
    .brand>.container>.row>.col-sm-3{
        padding:0 15px;
    }
    
}

        /* brand on phone */
        .brandicon{
            display: none;
        }
        .brand{
            display: block;
            transition: all .4s ease-in;
            padding-bottom: 0;
        }
        .brandphone{
            display: none;
        }
        @media screen and (max-width: 767px){
            .brandicon{
                display: block;
            }
            .brand{
                display: none;
            }
            .brandphone{
                background: #111;
                color:#fff;
                display: block;
                letter-spacing: 1px;
                padding-top: 20px;
                position: absolute;
                width:100%;
            }
            .brandphone ul{
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
            }
            .brandphone #info ul{
                height: 200px;
            }
            .brandphone li{
                list-style: none;
                padding: 5px 0;
            
            }
            .brandphone a,
            .brandphone p{
                color:#aaa;
                letter-spacing: 2px;
            }
            .brandphone a:hover{
                color:#fff;
            }
            .brandphone #info a:before {
                content: "\00BB";
                color: #666666;
                padding-right: 5px;
            }
            .tab {
                overflow: hidden;
                display: flex;
                justify-content: center;
            }

            .tab button {
                position: relative;
                letter-spacing: 3px;
                background-color: inherit;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 10px 6px;
                transition: 0.3s;
                border-bottom:1px solid transparent;
                transition: all .5s;
            }
            .tab button::after{
                display: inline-block;
                /* margin-left: 4px; */
                font: normal normal normal 14px/1 FontAwesome;
                font-size: 9px;
                content: "\f107";
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
            }
            .tab button:hover{
                color:#bbb;
            }

            .tab button.active {
                color:#bbb;
            }

            .tabcontent {
                display: none;
                padding: 6px 12px;
                margin: 0 auto;
                width:50%;
            }
        }
        @media screen and (max-width: 690px){
            .tabcontent{
                width:70%;
            }
        }
        @media screen and (max-width: 497px){
            .tabcontent{
                width:90%;
            }
        }

/* footer */
footer.footer{
    text-align: center;
    transition: all .4s ease-in;
}
.footer p.copyright{
     color:#ddd;
} 
.footer p.copyright a{
    color:#fff;
} 
@media screen and (max-width:500px){
    footer.footer .container{
        width:100%;
        padding: 0;
    }
    footer.footer .container .col-sm-12{
        padding: 0;
    }
}