@charset "UTF-8";

/* 字型 */
@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');
@import url('https://fonts.googleapis.com/css?family=Lato|Noto+Sans+TC&display=swap');
body {
    font-family: Lato, "Noto Sans TC", sans-serif;
    font-size: 18px;
    line-height: 1.5em;
    color: #000;
}

/* color */
:root {
    --red: #e60012;    
    --blue: #359fda;
    --blue-100: #E5E9F2;
    --blue-200: #F4F9FC;
    --blue-300: #84BAE2;
    --blue-400: #ACB8D4;
    --blue-500: #7387B8;
    --blue-800: #00257E;
    --orange-100: #f5c720;
    --orange: #f08224;
    --green: #21b082;
    --green-500: #8fc31f;
    --green-100:#9fd8c6;
    --pink: #eb6a9a;
    --pink-600: #F2304E;
    --pink-800: #7C003A;
    --white:#FFF;
    --gray: #f4f4f4;
    --gray-100: #F5F5F5;
    --gray-200: #d9d9d9;    
    --gray-500: rgb(117, 117, 117);
    --black: #000;
}

h2,
h3,
h4,
h5{
    font-family: Lato, "Noto Sans TC", "微軟正黑體", sans-serif;
    font-weight: 600;
    margin: 0;
}

a{
    color:var(--blue);
}

a:hover{
    color:var(--orange);
    text-decoration: none;
}

label {
    font-weight: 500;
    margin-bottom: 0;
}

input{
    font-size: 18px !important;
}

select, button {
    font-size: 1.125rem !important;
}

input[type=radio] {
    margin-top: 0;
    margin-right: 6px;
}

ul li {
    position: relative;
    list-style-type: none;
    margin-left: -1.5rem;
}

ul li:before {
    position: absolute;
    content: "";
    background: url("../images/point_orange.png");
    width: 20px;
    height: 25px;
    margin-left: -2.5rem;
    text-indent: 0;
}

ul li.note:before{
    content:"※";
    background:transparent;
}

button {
    background: var(--blue-800);
    border: 0;
    border-radius: 5rem;
    color: var(--blue-100);
    padding: .5rem 3rem;
}

button:hover {
    background: var(--blue-100);
    border:1px solid var(--blue-800);
    color: var(--blue-800);
}

.container-fluid{
    padding:0;
}

.align-top {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.bold{
    font-weight:700;
}

.orange{
    color:var(--orange);
}

.blue{
    color:var(--blue);
}

.green{
    color:var(--green);
}

/* Button */
.btn-blue{
    background:var(--blue);
    color:#FFF;
}

.btn-orange{
    background:var(--orange);
    color:#000;
}

.btn-pink{
    background:var(--pink-600);
    color:#FFF;
}

/* nav */
.navbar {
    border: 0;
}

 .navbar-brand{
    height:auto;
}

.navbar-wrap{
    display:flex;
    align-items:center;
}

.navbar-default .navbar-collapse{
    width:100%;
}

.navbar-active{
    box-shadow:3px 3px 3px var(--gray-100);
}



.navbar .menu-item ul li:before{
    background:none;
}

.navbar .menu-item ul li a{
    display:inline-flex;
    position:relative;
    align-items:center;
}

.navbar .menu-item ul li+li{
    padding-left: 30px;
}

.navbar .menu-item ul li:nth-child(1) a{    
    color:var(--blue);
}

.navbar .menu-item ul li:nth-child(2) a{    
    color:var(--green);
}

.navbar .menu-item ul li:nth-child(3) a{    
    color:var(--orange);
}

.navbar .menu-item ul li:nth-child(4) a{    
    color:var(--pink);
}

.navbar .menu-item ul li a:before{
    position:absolute;
    content:"";
    width:30px;
    height:30px;
    top:auto;
    left:-20px;
}

.navbar .menu-item ul li:nth-child(1) a:before{    
    background:url("../images/navbar_point01.png");    
}

.navbar .menu-item ul li:nth-child(2) a:before{    
    background:url("../images/navbar_point02.png");    
}

.navbar .menu-item ul li:nth-child(3) a:before{    
    background:url("../images/navbar_point03.png");    
}

.navbar .menu-item ul li:nth-child(4) a:before{    
    background:url("../images/navbar_point04.png");    
}


.navbar .menu-item ul li a:hover:before{
    transition:.3s;
    transform:translateY(0.2em);
    top:12px;
}

.navbar .menu-item ul li a:after{
    position:absolute;
    content:"";
    width:0;
    right:0;
    bottom:5px;
    transition:.3s;
}

.navbar .menu-item ul li a:hover:after{
    width:90%;
}

.navbar .menu-item ul li:nth-child(1) a:after{
    border-bottom:1px solid var(--blue);
}

.navbar .menu-item ul li:nth-child(2) a:after{
    border-bottom:1px solid var(--green);
}

.navbar .menu-item ul li:nth-child(3) a:after{
    border-bottom:1px solid var(--orange);
}

.navbar .menu-item ul li:nth-child(4) a:after{
    border-bottom:1px solid var(--pink);
}

.navbar-default .navbar-toggle{
    border:0;
}

.navbar-default .navbar-toggle:hover{
    background:transparent;
}

.navbar-default .navbar-toggle .icon-bar{
    background:var(--red);
}

@media screen and (max-width:1330px){

}

@media screen and (max-width:1200px){
    
}

@media screen and (max-width:1024px){
    
}

@media screen and (max-width:992px){
    .nav>li>a{
        padding:6px 10px;
    }    
}

@media screen and (max-width:767px){
    nav .container{
        padding:0;
    }

    .navbar-wrap{
        flex-wrap:wrap;
    }

    .navbar{
        box-shadow:3px 3px 3px var(--gray-100);
    }

    .header-item{
       display:flex;
       width:100%;
       align-items:center;
    }

    .nav-Logo{
        width:90%;
    }

    .nav-Logo img{
        width:60%;
    }

    .sort-group{
        width:100%;
        margin-bottom: 50px;
    }

    .sort-group+.sort-group:before{
        content:"\f063";
        top:-40px;
        left:50%;
    }

    .navbar-default .navbar-collapse{
        padding:0;
    }

    .navbar-nav{
        margin:0;
    }

    .navbar .menu-item ul li+li{
        padding-left: 0;
    }

    .navbar .menu-item ul li{
        padding:6px 30px 6px 50px !important;
    }

    .navbar .menu-item ul li:nth-child(1){
        background:var(--blue);
    }

    .navbar .menu-item ul li:nth-child(2){
        background:var(--green);
    }

    .navbar .menu-item ul li:nth-child(3){
        background:var(--orange);
    }

    .navbar .menu-item ul li:nth-child(4){
        background:var(--pink);
    }

    .navbar .menu-item ul li a{
        width:100%;
        color:#FFF !important;
    }

    .navbar .menu-item ul li a:before{
        left:-30px;
    }

    .navbar .menu-item ul li a:hover:before{
        top:auto;
        left:-25px;
    }

    .navbar .menu-item ul li:nth-child(1) a:before{    
        background:url("../images/navbar_point01a.png");    
    }
    
    .navbar .menu-item ul li:nth-child(2) a:before{    
        background:url("../images/navbar_point02a.png");    
    }
    
    .navbar .menu-item ul li:nth-child(3) a:before{    
        background:url("../images/navbar_point03a.png");    
    }
    
    .navbar .menu-item ul li:nth-child(4) a:before{    
        background:url("../images/navbar_point04a.png");    
    }

    .navbar .menu-item ul li:hover{
        opacity: .7;
    }
}

@media screen and (max-width:576px){
}