/*default font family*/
    body{font-family:'Roboto'; font-weight: 300; padding-top: 60px !important;}  
    h1, h2 ,h3, h4 {
        font-weight: 400;
    }
    /*main font color*/
    .font-color-white, .nav > li > a, .fc-header{ color: white; }
    .font-color-gray p, .font-color-gray li, .fc-content-desc{ color: #666; font-size: 20px; line-height: 1.5; }
    .font-color-darkgray h3, .fc-content-subtitle, .fc-price{ color: #404040; font-size: 28px; }
    .fc-price{ font-size: 36px; }
    .font-color-black h2, .fc-content-title{ color: #000; font-size: 40px; }
    a{color: #666;}
    a:hover,a:active,a:focus, a:focus:hover{color: #666;}

    /*main background color*/
        /* Set 1: white background + #DFDFDF line color*/
        .line +.line{
            border-top: 1px solid #DFDFDF;
            width: 100%;
        }

        /* Set 2: gray background + #B8B8B8 line color*/
        .bgc-gray{background-color: #EBEBEB;}
        .bgc-gray-line +.bgc-gray-line{
            border-top: 1px solid #B8B8B8;
            width: 100%;
        }

    .border-gray{border: 1px solid #DDD;} /*for header btn-hamburger border*/

/* layout setting*/
    .row-1440 { 
        max-width:1440px; 
        margin:0 auto;
        padding-left: 135px;
        padding-right: 135px;}
        @media screen and (max-width: 1360px){
            .row-1440{
                padding-left: 100px;
                padding-right: 100px;
            }
        }
        @media screen and (max-width: 1300px){
            .row-1440{
                padding-left: 60px;
                padding-right: 60px;
            }
        }
        @media screen and (max-width: 1200px){
            .row-1440{
                padding-left: 50px;
                padding-right: 50px;
            }
        }
        @media screen and (max-width: 768px){
            .row-1440{
                padding-left: 30px;
                padding-right: 30px;
            }
        }
        @media screen and (max-width: 500px){
            .row-1440{
                padding-left: 0;
                padding-right: 0;
            }
        }

    .header-container{
        margin-top: 15px;
        margin-bottom: 15px;
    }

    /*.nav-pills > li:active > a:hover,.nav-pills > li:active > a:focus{background-color: transparent;}*/
    .nav>li>a:hover,
    .nav>li>a:focus {
        text-decoration: none;
        background-color: transparent;
    }
    
    /*content + loop container total=60px*/
        /*set 1*/
        .content-container{
            margin-top: 30px;
            margin-bottom: 30px;
        }
        .loop-container{
            padding-top: 30px;
            padding-bottom: 30px;
        }

        /*set 2*/
        .loop-container2{
            padding-top: 60px;
            padding-bottom: 60px;
        }

    .logo-gensis2-img{
        max-width: 100%
    }
   
    .card-container{padding-top: 30px;}
        .card{
            border: 1px solid white;
            width: 86%;
            padding: 9%;}
            @media screen and (max-width: 991px){ .card{width: 92%;padding: 6%}}
            @media screen and (max-width: 400px){ .card{ width: 100%; } }
        .card-desc{max-width: 100%;}

    .banner{
        max-width: 100%;
    }

    .banner-container{
        padding-top: 40px;
        padding-bottom: 40px;
    }
        .banner-container h1{font-size: 66px;}
        .banner-container p{font-size: 36px;}
        @media screen and (max-width: 1024px){
            #app .banner-container, #content .banner-container{padding-top: 0}
        }
        @media screen and (max-width: 991px){
            .banner-container h1{font-size: 60px}
            .banner-container p{font-size: 34px;}
        }
        @media screen and (max-width: 880px){
            .banner-container h1{font-size: 50px}
            .banner-container p{font-size: 28px;}
        }
        @media screen and (max-width: 768px){
            .banner-container h1{font-size: 50px}
            .banner-container p{font-size: 28px;}
        }

/*common UI*/
    /*.btn-default:active,.btn-default:active:hover,.btn-default:active:focus, .btn-default:focus, .btn-default:hover{background-color: transparent;}*/

    .btn-center{     /*div+button need to be center*/
        width: 100%;
        text-align: center;
    }
    /*daz btn 1*/
    .btn-daz,.btn-daz-hover{
        background-color: #82BE10;
        border: 2px solid #82BE10;
        color: white;
        padding: 13px 30px;
        font-size: 22px;}
        .btn-daz:hover, .btn-daz:focus, .btn-daz:active, .btn-daz:active:focus{
            background-color: #82BE10;
            border: none;
            color: white;
            outline:none;
        }
        .btn-daz-hover:hover, .btn-daz-hover:focus, .btn-daz-hover:active, .btn-daz-hover:active:focus{
            background-color: transparent;
            border: 2px solid #82BE10;
            color: #82BE10;
            outline:none;
        }

    /*考慮把下列這段移到各頁css*/
    .btn-daz-1{
        margin-top: 55px;
        width: 250px;
    }
    .btn-daz-2, .btn-daz-3{
        font-size: 18px;
    }
    .btn-daz-3{
        width: 48%;
    }
    .btn-daz-3 + .btn-daz-3{
        margin-left: 3%
    }

    /*daz btn 2*/
    .btn-daz-border,.btn-daz-border-hover{
        border: 1px solid #82BE10;
        color: #82BE10;
        padding: 13px 30px;
        font-size: 22px;}
        .btn-daz-border:hover, .btn-daz-border:focus, .btn-daz-border:active, .btn-daz-border:active:focus{
            border: 1px solid #82BE10;
            color: #82BE10;
            background-color: white;
            outline:none;
        }
        .btn-daz-border-hover:hover, .btn-daz-border-hover:focus, .btn-daz-border-hover:active, .btn-daz-border-hover:active:focus{
            border: 1px solid #82BE10;
            color: white;
            background-color: #82BE10;
            outline:none;
        }

    .btn:active, .btn.active{box-shadow: none;}

    /*btn grounp*/
    @media screen and (min-width: 1480px){
    .btn-container{
        width: 94%;
        text-align: center;}
    }
    @media screen and (max-width: 767px){
    .btn-container{
        text-align: center;}   
    }

    /*appear scroll y*/
    @media screen and (max-width: 767px){
        .scroll{
            white-space: nowrap;
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            margin-top: 30px;
        }
    }


/*common class*/
    .clearfix:after{       
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;}

    .right{float: right;}
    .left{float: left;}
    .center{margin: 0 auto;}

    .break-word{ word-wrap: break-word; }

    .border{border: 1px solid red;}

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
        padding-right: 0;
        padding-left: 0;
    }
    
    /*thumb*/
        /*set1*/
        .thumbview-li{
            max-width: 24%;
            display: inline-block;
            margin-left: 1%;
        }
        .thumbview-li img{width: 100%;}

        /*set2*/
        .thumbview-li-4{
            max-width: 49%;
            display: inline-block;
            margin-left: 1%;}

        .thumbview-li-4 img{width: 100%;}

        @media screen and (max-width: 768px){
            .thumbview-li,.thumbview-li-4{ margin-left: 0; }
            .thumbview-li + .thumbview-li,.thumbview-li-4 + .thumbview-li-4{ margin-left: 1% }
            .thumbview-li{max-width: 23%}
            .thumbview-li-4{max-width: 47%;}
        }

    /* remove chrome's input highlighting */
    *:focus,*:active,*:focus:active,*:hover{ outline:none; }


    button::-moz-focus-inner {
        border: 0;
    }



    .display-none{display: none;}
    .display-block{display: block;}
    .list-style-type-none{list-style-type: none;}

    .cursor{cursor: pointer;} /* img or button can use*/
    
    .line-through{text-decoration: line-through;}

    /*default to orgin*/
    .m0{margin: 0;}
    .mb0{margin-bottom: 0;}
    .p0{padding: 0;}
    @media screen and (max-width: 767px){
        .mb24{margin-bottom: 24px;}
    }

    .red{
        background-color: red;
    }

    .blue{
        background-color: blue;
    }