@import url(normalize.css);
@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900&display=swap');

/* ------------------------------------------
defult
--------------------------------------------- */

body {
    margin: 0;
    padding: 0;
    font-family: 'Heebo', sans-serif;
    font-size: 75%;
    word-wrap: break-word;
    word-break: keep-all;
    white-space: normal;
}

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

.clearfix {
    display: inline-block;
    clear: both;
}

*html .clearfix {
    height: 1%;
}


/* Hides from IE-mac \*/

.clearfix {
    display: block;
    clear: both;
}

ul li {
    list-style-type: none;
}

a,
a:visited,
a:active {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

a:hover,
a:visited:hover,
a:active:hover {
    text-decoration: none;
}

a:hover img {
    text-decoration: none;
    opacity: 0.5;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

img,
img a,
img a:hover {
    border: 0;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}


/* ------------------------------------------
header
--------------------------------------------- */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 90;
}

#top {
    background: rgba(255, 255, 255, 0);
    display: flex;
    justify-content: space-between;
}

header #logo {
    padding: 30px 0 0 55px;
}

header #logo img {
    width: 100%;
    height: auto;
    width: 150px;
    height: 48px;
}

@media screen and (max-width: 768px) {
    header #logo {
        padding: 30px 0 0 20px;
    }
    header #logo img {
        width: 110px;
    }
}

@media screen and (max-width: 520px) {
    header #logo {
        padding: 22px 0 0 20px;
    }
    header #logo img {
        width: 90px;
    }
}

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


/* ------------------------------------------
header menu
--------------------------------------------- */

header #navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 25px 30px 0 0;
    padding: 0 0 20px 0;
}

header #navbar .menuicon {
    cursor: pointer;
    margin: 0 20px 0 0;
}

header #navbar .mobileBar {
    cursor: pointer;
    margin: 0 20px 0 0;
    font-size: 1.5rem;
}

header #navbar .productBTN {
    background: #edca3d;
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    padding: 25px 40px;
    cursor: pointer;
    border: 1px solid #fff;
}

header #navbar .productBTN img {
    width: 50px;
    margin: 0 0 0 15px;
}

header #navbar .productBTN:hover {
    text-decoration: none;
    background: #1C89C5;
    color: #fff;
    transition: background 0.5s ease;
    transition: color 0.5s ease;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px 8px 30px 8px;
    text-decoration: none;
    font-size: 1.5rem;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus .productOverlay a:hover,
.productOverlay a:focus,
.overlay a.active {
    color: #fff;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 4rem;
    z-index: 120;
}

#container,
header {
    transition: margin-right .5s;
}

.productOverlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 110;
    top: 0;
    right: 0;
    background: #1C89C5;
    overflow-x: hidden;
    transition: 0.5s;
}

.producOverlay-content {
    width: 100%;
    height: 80%;
    margin: auto;
    display: grid;
    justify-content: center;
    align-items: center;
}

.productOverlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 4rem;
    z-index: 120;
}

.product {
    width: 100%;
    padding: 60px 0 0 0;
}

.product .product_spec {
    width: 100%;
    display: flex;
    align-items: center;
}

.product .product_spec span {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 0 20px;
}

.product .product_spec img {
    width: 80px;
}

.product .product_item {
    display: inline-flex;
    margin: 50px 0 0 100px;
    color: #000;
    letter-spacing: 0.5px;
    flex-wrap: wrap;
}

.product .product_item div {
    margin: 0 50px 0 0;
    text-align: center;
    line-height: 2rem;
}

.product .product_item div a {
    font-weight: 500;
    font-size: 1rem;
}

.product .product_item div a img {
    width: 75px;
    transition: 0.3s;
}

.product .product_item div a:hover,
.product .product_item div a.active {
    color: #fff;
}

.product .product_item div a:hover img,
.product .product_item div a.active img {
    width: 85px;
}

@media screen and (max-width: 1280px) {
    header #navbar .nav-collapse {
        display: none;
    }
    header #navbar .mobileBar {
        display: block;
    }
    .product .product_item {
        margin: 50px 0 0 0;
    }
}

@media screen and (max-width: 1023px) {
    .product .product_spec img {
        width: 50px;
    }
    .product .product_item {
        display: initial;
        margin: 0;
        flex-wrap: initial;
    }
    .product .product_item div {
        margin: 0 0 0 75px;
        text-align: left;
        line-height: 1.2rem;
    }
    .product .product_item div a {
        font-size: 1rem;
    }
    .product .product_item div a img {
        display: none;
    }
}

@media screen and (max-width: 520px) {
    header #navbar {
        margin: 15px 15px 0 0;
    }
    header #navbar .productBTN {
        padding: 20px 25px;
    }
    header #navbar .productBTN img {
        display: none;
    }
    header #navbar .menuicon:nth-child(2),
    header #navbar .menuicon:nth-child(3) {
        display: none;
    }
    header #navbar .mobileBar {
        margin: 0 15px 0 0;
    }
    .producOverlay-content {
        left: 0;
    }
    .product .product_item div {
        margin: 0;
        line-height: 1rem;
    }
    .product .product_spec span {
        font-size: 1.5rem;
        font-weight: bold;
        margin: 0 0 0 15px;
    }
}

@media screen and (max-width: 360px) {
    header #navbar .productBTN img {
        display: none;
        margin: 0;
    }
    .overlay-content {
        top: 15%;
    }
}


/* ------------------------------------------
content-background
--------------------------------------------- */

.contentBG {
    background: #f2f2f2;
}


/* ------------------------------------------
banner-image
--------------------------------------------- */

#public_image {
    margin: 0;
    padding: 0;
    background: #fff url(../images/public.jpg) center center fixed no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
}

#public_image div {
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 1.5px;
    color: #fff;
    align-self: center;
}

.banner_image,
.about_image {
    margin: 0;
    padding: 0;
    background: #fff url(../images/banner_product.jpg) center center fixed no-repeat;
    background-size: cover;
    width: 100%;
    height: 35vh;
    display: flex;
}

.about_image {
    background: #fff url(../images/banner_about.jpg) top center fixed no-repeat;
}

.banner_image div,
.about_image div {
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 1.5px;
    color: #000;
    align-self: center;
    padding: 50px 0 0 55px;
}

@media screen and (max-width: 1024px) {
    .banner_image,
    .about_image {
        background-size: cover;
    }
}

@media screen and (max-width: 768px) {
    #public_image {
        background: #fff url(../images/public_mobile.jpg) center left no-repeat;
        background-size: cover;
        text-align: center;
    }
    #public_image div,
    .banner_image div,
    .about_image div {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 520px) {
    #public_image {
        background-size: 520px;
    }
    .banner_image,
    .about_image {
        height: 30vh;
    }
    #public_image div,
    .banner_image div,
    .about_image div {
        font-size: 1.8rem;
    }
    .banner_image div,
    .about_image div {
        padding: 50px 0 0 20px;
    }
}

@media screen and (max-width: 320px) {
    #public_image {
        background-size: 320px;
    }
}


/* ------------------------------------------
index-hot sale
--------------------------------------------- */

#hot_sale {
    padding: 8%;
}

.block_title,
#news .news_item .news_content div,
.product_content .product_name .product_name_headline {
    color: #1C89C5;
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 1.5px;
    margin: 0 0 3% 0;
}

#hot_sale .sale_item {
    display: inline-flex;
    flex-wrap: wrap;
    vertical-align: top;
    width: 100%;
}

.rwdimg {
    display: block;
    width: 48.5%;
    height: 0;
    padding: 0 0 32% 0;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#hot_sale .sale_item .rwdimg {
    position: relative;
    margin: 0 40px 0 0;
    overflow: hidden;
}

#hot_sale .sale_item .sale02 {
    margin: 0 0 40px 0;
}

#hot_sale .sale_item .rwdimg a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 80;
    transition: all 0.5s ease-out;
}

#hot_sale .sale_item .rwdimg div {
    position: absolute;
    bottom: 0;
    padding: 20px 0 20px 20px;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    background: rgba(17, 103, 151, 0.6);
    width: 100%;
}

#hot_sale .sale_item .rwdimg a:hover {
    background: rgba(30, 137, 197, 0.5);
}

@media screen and (max-width: 1586px) {
    .rwdimg {
        width: 48%;
    }
}

@media screen and (max-width: 1189px) {
    .rwdimg {
        width: 47.5%;
    }
}

@media screen and (max-width: 951px) {
    .rwdimg {
        width: 47%;
    }
}

@media screen and (max-width: 793px) {
    .rwdimg {
        width: 46.5%;
    }
}

@media screen and (max-width: 768px) {
    #hot_sale {
        padding: 15% 10%;
    }
    #hot_sale .sale_item {
        display: initial;
    }
    .rwdimg {
        width: 100%;
        padding: 0 0 50% 0;
    }
    #hot_sale .sale_item .rwdimg {
        margin: 0 0 50px 0;
    }
    #hot_sale .sale_item .sale02:last-child {
        margin: 0;
    }
    #hot_sale .sale_item .rwdimg div {
        padding: 15px 0 15px 20px;
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 520px) {
    #hot_sale .sale_title {
        font-size: 2rem;
    }
    .rwdimg {
        padding: 0 0 60% 0;
    }
    #hot_sale .sale_item .rwdimg div {
        font-size: 1rem;
    }
}


/* ------------------------------------------
index-news
--------------------------------------------- */

#news {
    padding: 8%;
    background: #f2f2f2;
}


/*#news .news_item {
    display: flex;
}*/

#news .news_item .news_content {
    margin: 0 0 50px 0;
}

#news .news_item .news_content div {
    color: #1C89C5;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 1.5px;
    margin: 0 0 30px 0;
}

.news_content div a {
    color: #1C89C5;
}

.news_content p a {
    color: #1C89C5;
    text-decoration: underline;
}

#news .news_item .news_content:last-child {
    margin: 0;
}

#news .news_item .news_content p {
    width: 90%;
    color: #1f1f1f;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.5rem;
}

#news .news_item .news_content:last-child p {
    margin: 0 0 20px 0;
}

#news .news_item div ul,
#news .news_item div ul li,
#news .news_item div ul li .hint {
    margin: 0;
    padding: 0;
}

#news .news_item div ul li,
#news .news_item div ul li .hint {
    font-size: 1rem;
}

#news .news_item div ul li ul {
    margin: 10px 0 20px 10px;
}

#news .news_item div ul li ul li {
    font-weight: 400;
    color: #1f1f1f;
    font-size: 0.8rem;
    line-height: 1.5rem;
}

#news .news_item .news_content button {
    cursor: pointer;
    color: #1C89C5;
    font-size: 0.9rem;
    font-weight: 400;
    background: none;
    border: 1px solid #1C89C5;
    padding: 2.5% 12%;
    outline: none;
    margin: 5% 0 0 0;
    float: right;
}

#news .news_item .news_content button:hover {
    background: #1C89C5;
    color: #fff;
    transition: all .2s cubic-bezier(.02, .42, .24, .74);
}

#news .news_item .news_content .news_img {
    display: flex;
    margin: 3% 0 0 0;
}

#news .news_item .news_content .news_img img {
    width: 35%;
    margin: 0 5% 0 0;
}

@media screen and (max-width: 800px) {
    #news .news_item .news_content {
        margin: 0 0 6% 0;
    }
    #news .news_item .news_content p {
        width: 95%;
    }
    #news .news_item .news_content:last-child {
        margin: 0 0 8% 0;
    }
    #news .news_item .news_content button {
        padding: 1.8% 10%;
        margin: 1% 5% 0 0;
    }
    #news .news_item .news_content .news_img img {
        width: 45%;
    }
}

@media screen and (max-width: 520px) {
    #news .news_item .news_content p {
        font-size: 0.8rem;
        line-height: 1.2rem;
    }
    #news .news_item .news_content .news_img {
        flex-direction: column;
        margin: 3% 0 0 0;
    }
    #news .news_item .news_content .news_img img {
        width: 100%;
        margin: 0 auto 3% auto;
    }
}

@media screen and (max-width: 320px) {
    #news .news_item .news_content:last-child {
        margin: 0 0 10% 0;
    }
}


/* ------------------------------------------
index-about
--------------------------------------------- */

#about {
    padding: 8%;
    color: #fff;
    background: #1C89C5;
}

#about .block_title {
    color: #fff;
    margin: 0;
}

#about .about_content {
    display: flex;
    justify-content: center;
    align-self: center;
    padding: 30px 0 0 0;
    width: 100%;
}

#about .about_img {
    align-self: center;
}

#about .about_article {
    margin: 0 0 0 50px;
    width: 80%;
    align-self: center;
}

#about .about_content p {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.8rem;
    margin: 0 0 20px 0;
}

#about .about_content .moreBTN a {
    display: block;
    cursor: pointer;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 400;
    padding: 15px 0;
    background: none;
    border: 1px solid #fff;
    color: #fff;
    width: 180px;
    text-align: center;
    margin: 30px 0 0 0;
}

#about .about_content .moreBTN a:hover {
    color: #1C89C5;
    background: #fff;
    transition: all .2s cubic-bezier(.02, .42, .24, .74);
}

@media screen and (max-width: 1024px) {
    #about .about_content {
        flex-direction: column;
    }
    #about .about_img {
        width: 60%;
        align-self: flex-start;
    }
    #about .about_article {
        margin: 30px 0 0 0;
        width: 100%;
        align-self: flex-start;
    }
}

@media screen and (max-width: 560px) {
    #about .about_img {
        width: 100%;
    }
}

@media screen and (max-width: 400px) {
    #about .about_content p {
        font-size: 0.9rem;
        line-height: 1.8rem;
    }
}


/* ------------------------------------------
page-bread
--------------------------------------------- */

.bread {
    padding: 15px 10%;
    background: #1C89C5;
}

.bread .breadrow {
    display: flex;
    letter-spacing: 0.5px;
}

.bread .breadrow div a {
    color: #01466b;
}

.bread .breadrow div.active {
    color: #fff;
}

.bread .breadrow div:first-child {
    margin: 0 10px 0 0;
}

.bread .breadrow div:first-child:after {
    color: #fff;
    content: "\003E";
    margin: 0 0 0 10px;
}

@media screen and (max-width: 768px) {
    .bread {
        padding: 15px 5%;
    }
}


/* ------------------------------------------
page-product、about
--------------------------------------------- */

.product_content {
    padding: 30px 0 0 0;
}

.product_content .product_name {
    padding: 5% 10% 3% 10%;
}


/*.product_content .product_name .product_name_headline {
    display: inline-flex;
}*/

.productBTN {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.product_content .product_name .product_name_headline .product_storyBTN {
    background: #1C89C5;
    color: #fff;
    font-size: 0.75rem;
    width: 180px;
    text-align: center;
    padding: 15px 0;
    margin: 30px 0;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.product_content .product_name .product_name_headline .product_storyBTN:hover {
    text-decoration: none;
    background: #000;
    color: #fff;
}

.product_content .product_name .product_name_headline .product_specBTN a {
    display: block;
    background: #284764;
    color: #fff;
    font-size: 0.75rem;
    width: 300px;
    text-align: center;
    padding: 15px 0;
    margin: 30px 20px;
    box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.product_content .product_name .product_name_headline .product_specBTN a:hover {
    text-decoration: none;
    background: #000;
    color: #fff;
}

.product_content .product_name .product_name_subtitle {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 2rem;
}

.product_content .product_name .product_name_subtitle span a {
    text-decoration: underline;
    color: #1C89C5;
}

.product_content .product_name img {
    float: right;
    padding: 0 0 20px 20px;
}

.product_content .product_name .product_name_subtitle img {
    float: initial;
    padding: 0 10px 10px 0;
}

.product_content p {
    padding: 0 10% 3% 10%;
    color: #1f1f1f;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 2rem;
}

.product_content p a {
    text-decoration: underline;
    color: #1E89C5;
}

.product_content p.article {
    padding: 0 15% 3% 15%;
}

.about_pic {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center;
}

.about_pic div {
    width: 50%;
    margin: 50px 0;
}

.about_pic div img {
    width: 70%;
}

.product_image {
    width: 80%;
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .product_content .product_name {
        padding: 5% 5% 3% 5%;
    }
    .product_content p {
        padding: 0 5% 5% 5%;
    }
    .product_content p.article {
        padding: 0 10% 5% 10%;
    }
    .product_content .product_name img {
        width: 100%;
        padding: 0 0 5% 0;
        float: initial;
    }
    .product_content .product_name .Ssize {
        margin: 30px auto;
        width: 40%;
    }
    .product_content .product_name .Msize {
        margin: 30px auto;
        width: 70%;
    }
    .product_content .product_name .SSsize {
        margin: 0 auto;
        width: 30%;
    }
}

@media screen and (max-width: 768px) {
    .about_pic {
        display: initial;
        flex-wrap: initial;
        margin: 0 auto;
        text-align: center;
    }
    .about_pic div {
        width: 100%;
        margin: 50px 0;
    }
    .about_pic div img {
        width: 80%;
    }
}

@media screen and (max-width: 600px) {
    .productBTN {
        flex-direction: column;
    }
    .product_content .product_name .product_name_headline .product_specBTN a {
        margin: 0 0 25px 0;
    }
}

@media screen and (max-width: 560px) {
    .product_content .product_name .product_name_subtitle {
        line-height: 1.7rem;
    }
    .product_content p {
        line-height: 1.5rem;
    }
    .product_content p.article {
        line-height: 1.5rem;
    }
    .product_content .product_name .product_name_headline {
        display: initial;
    }
    .product_content .product_name .product_name_headline .product_storyBTN {
        margin: 25px 0;
    }
    .product_content .product_content_pic img {
        content: url(../images/pic37_mobile.jpg);
    }
}

@media screen and (max-width: 320px) {
    .product_content .product_name .product_name_subtitle {
        line-height: 1.5rem;
    }
    .product_content p {
        line-height: 1.2rem;
    }
}


/* ------------------------------------------
page-product-child MENU
--------------------------------------------- */

.product_navbar {
    overflow: hidden;
    background: #000;
    width: 100%;
}

.product_navbar a {
    float: left;
    font-size: 0.9rem;
    color: white;
    text-align: center;
    padding: 18px 0;
    text-decoration: none;
}

.product_navbar .woven_subnav a {
    width: 14.28%;
}

.product_navbar .laminate_subnav a {
    width: 50%;
}

.product_navbar .accessories_subnav a {
    width: 16.66%;
}

.product_navbar .special_subnav a {
    width: 100%;
}

.subnav {
    float: left;
    overflow: hidden;
    width: 33.333%;
    /* Four links of equal widths */
}

.subnav .subnavbtn {
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    outline: none;
    color: white;
    padding: 25px 0;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    width: 100%;
    cursor: pointer;
}

.navbar a:hover,
.subnav:hover .subnavbtn {
    background: #1C89C5;
}

.subnav .subnavbtn.active {
    background: #72ABD5;
}

.subnav-content {
    /*display: none;*/
    position: absolute;
    left: 0;
    background: #1C89C5;
    width: 100%;
    z-index: 1;
}

.subnav-content a {
    float: left;
    color: white;
    text-decoration: none;
}

.subnav-content a.active {
    background: #72ABD5;
    color: #fff;
}

.subnav .subnavbtn:hover,
.subnav-content a:hover {
    background: #99C3DB;
    color: #000;
}


/*.subnav:hover .subnav-content {
    display: block;
}*/

@media screen and (max-width: 768px) {
    .product_navbar a {
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 500px) {
    .product_navbar {
        display: none;
    }
}


/* ------------------------------------------
contact
--------------------------------------------- */

.contact_store {
    margin: 0;
    padding: 0 10%;
    display: flex;
}

.contact_store .store_location {
    align-self: center;
    padding: 60px 0;
    width: 60%;
}

.contact_store .store_map {
    width: 40%;
    margin: 30px 0;
}

.contact_store .store_map iframe {
    margin: 0;
}

.contact_store .store_name {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 2rem;
    color: #1C89C5;
}

.contact_store .store_address {
    font-size: 1rem;
    letter-spacing: 0.5px;
    padding: 50px 0;
    line-height: 1.8rem;
}

.contact_store .store_address span {
    font-weight: bold;
    color: #1C89C5;
    display: block;
    padding: 0 0 20px 0;
}

.contact_store .store_address img {
    padding: 0 3px 7px 0;
}

.contact_store .store_info ul {
    margin: 0;
    padding: 0;
}

.contact_store .store_info ul li {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding: 0 0 15px 0;
}

.contact_store .store_info ul li img {
    margin: 0 5px 0 0;
}

.contact_store .store_info ul li.fb_item img {
    width: 15px;
}

.contact_store .store_info ul li a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 1024px) {
    .contact_store .store_map {
        margin: 50px 0;
    }
}

@media screen and (max-width: 950px) {
    .contact_store {
        text-align: center;
        margin: 0;
        padding: 10%;
        display: block;
    }
    .contact_store .store_location {
        padding: 0;
        width: 100%;
    }
    .contact_store .store_map {
        width: 100%;
        height: 350px;
        margin: 50px 0 0 0;
    }
}

@media screen and (max-width: 768px) {
    .contact_store .store_address {
        padding: 30px 0;
    }
}

@media screen and (max-width: 560px) {
    .contact_store .store_map {
        margin: 30px 0 0 0;
    }
}


/* ------------------------------------------
page-table
--------------------------------------------- */

.tableStyle {
    padding: 0 10% 5% 10%;
}

@media screen and (max-width: 1024px) {
    .tableStyle {
        padding: 0 5% 5% 5%;
    }
}


/* ------------------------------------------
footer
--------------------------------------------- */

footer {
    background: #1d1d1d;
    padding: 5%;
    display: flex;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-weight: 300;
    letter-spacing: 0.5px;
}

footer .footer_item {
    font-weight: 700;
    margin: 0 0 10% 0;
    align-self: center;
}

footer .footer_item a {
    color: #fff;
}

footer .footer_item a:hover {
    color: #1C89C5;
}

@media screen and (max-width: 768px) {
    footer {
        padding: 8%;
    }
}

@media screen and (max-width: 320px) {
    footer {
        padding: 10%;
    }
}


/* ------------------------------------------
product Story btn
--------------------------------------------- */

.product_storyOverlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 110;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    overflow-x: hidden;
    transition: 0.5s;
}

.product_storyOverlay-content {
    width: 100%;
    height: 100%;
    margin: auto;
}

.product_storyOverlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 4rem;
    z-index: 120;
    color: #fff;
}

.product_storyOverlay-content .storyTitle {
    width: 70%;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    padding: 80px 0 50px 0;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #424242;
    line-height: 2.3rem;
}

.product_storyOverlay-content .storyTitle span {
    font-size: 2rem;
    font-weight: 700;
}

.product_storyOverlay-content .storyContent {
    width: 60%;
    margin: 0 auto;
    padding: 50px 0 0 0;
}

.product_storyOverlay-content .storyContent p {
    text-align: left;
    color: #b3b3b3;
    font-weight: 400;
    font-size: 1rem;
    line-height: 2rem;
    letter-spacing: 0.5px;
    display: block;
    padding: 0 0 50px 0;
}

.product_storyOverlay-content .storyContent p span {
    font-size: 1.8rem;
    font-weight: 700;
}

.product_storyOverlay-content .storyContent div ul {
    margin: 0;
    padding: 0 0 50px 0;
}

.product_storyOverlay-content .storyContent div ul li {
    color: #b3b3b3;
    font-weight: 400;
    font-size: 1rem;
    line-height: 2rem;
    letter-spacing: 0.5px;
}

.product_storyOverlay-content .storyContent div ul li:first-child {
    padding: 0 0 15px 0;
}

.product_storyOverlay-content .storyContent div ul li span {
    font-weight: 700;
}

.product_storyOverlay-content .storyContent .comparisonTitle {
    padding: 15px 0;
    text-align: center;
    background: #818181;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.product_storyOverlay-content .storyContent .comparisonTB {
    margin: 0 0 50px 0;
}

.product_storyOverlay-content .storyContent .comparisonTB .sort {
    float: left;
    width: 20%;
    background: #424242;
}

.product_storyOverlay-content .storyContent .comparisonTB .content_solartex {
    float: left;
    width: 40%;
    background: #333333;
}

.product_storyOverlay-content .storyContent .comparisonTB .content_sunbrella {
    float: right;
    width: 40%;
    background: #333;
}

.product_storyOverlay-content .storyContent .comparisonTB div ul {
    padding: 0;
    margin: 0;
}

.product_storyOverlay-content .storyContent .comparisonTB div ul li {
    margin: 0;
    padding: 0;
    line-height: initial;
    font-size: 0.8rem;
    padding: 10px 0;
    text-align: center;
}

.product_storyOverlay-content .storyContent .comparisonTB .content_solartex ul li {
    color: #1C89C5;
}

.product_storyOverlay-content .storyContent .comparisonTB .content_sunbrella ul li {
    color: #606060;
    border-left: 1px solid #424242;
}

.tb_hint {
    color: #FFC000;
}

.story_hint01 {
    color: #31849B;
}

.story_hint02 {
    color: #E36C0A;
}

.product_storyOverlay-content .storyContent p span.story_hint03 {
    color: #31849B;
    font-size: 1rem;
}

@media screen and (max-width: 1024px) {
    .product_storyOverlay-content .storyContent {
        width: 70%;
    }
}

@media screen and (max-width: 560px) {
    .product_storyOverlay-content .storyTitle {
        width: 80%;
    }
    .product_storyOverlay-content .storyContent {
        width: 80%;
    }
    .product_storyOverlay-content .storyContent p {
        font-size: 0.9rem;
        line-height: 1.8rem;
    }
    .product_storyOverlay-content .storyContent p span {
        font-size: 1.5rem;
    }
}


/* ------------------------------------------
contact table
--------------------------------------------- */

.contact_list {
    width: 60%;
    margin: 30px auto;
    -webkit-animation: fadeInScale 0.7s ease-in-out;
    -moz-animation: fadeInScale 0.7s ease-in-out;
    animation: fadeInScale 0.7s ease-in-out;
}

.contact_list>div {
    margin: 30px 0 0 0;
    font-family: 'Noto Sans TC', sans-serif;
}

.contact_list>div span {
    border-top: 1px #e5e5e5 solid;
    border-bottom: 1px #e5e5e5 solid;
    display: block;
    font-size: 1.2em;
    margin: 0 0 20px 0;
    padding: 20px 0;
    letter-spacing: 1.5px;
}

.contact_list>div ul li {
    font-size: 0.9em;
    line-height: 2em;
    padding: 0 0 0 25px;
    letter-spacing: 0.5px;
}

.contact_list>div ul li a {
    text-decoration: underline;
    color: #000;
}

.contact_list>div ul li a:hover {
    text-decoration: none;
    color: #00b4ff;
}

.contact_list>div ul li:nth-child(1) {
    background: url("../images/icon_home.png") no-repeat left;
}

.contact_list>div ul li:nth-child(2) {
    background: url("../images/icon_tel.png") no-repeat left;
}

.contact_list>div ul li:nth-child(3) {
    background: url("../images/icon_mail.png") no-repeat left;
}

.contact>div ul li:nth-child(4) {
    background: url("../images/icon_chat.png") no-repeat left;
}

@media (max-width: 1024px) {
    .contact_list {
        width: 80%;
    }
}

@media (max-width: 703px) {
    .contact_list>div span {
        font-size: 1em;
    }
    .contact_list>div ul li {
        font-size: 0.75em;
    }
}


/*----------------------------------------*/

@media screen and (max-width: 1400px) {
    .product_content .product_name .product_name_headline,
    .block_title,
    .product_name_headline span {
        font-size: 2.3rem;
    }
}

@media screen and (max-width: 520px) {
    .product_content .product_name .product_name_headline,
    .block_title,
    .product_name_headline span {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 320px) {
    .product_content .product_name .product_name_headline,
    .block_title,
    .product_name_headline span {
        font-size: 1.5rem;
    }
}

.wanted {
    padding: 60px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wanted_title {
    margin: 0 0 30px 0;
    font-size: 2rem;
    font-weight: 700;
}

.wanted .wanted_list {
    width: 50%;
    background: #fff;
    box-shadow: 0 0 10px #00000050;
    border-radius: 20px;
    padding: 50px 80px;
}

.wanted .wanted_list form div {
    margin: 0 0 25px 0;
}

.wanted .wanted_list form input,
.wanted .wanted_list form textarea {
    width: 100%;
    padding: 15px;
    outline: none;
    border-radius: 10px;
    border: 1px solid #BAD1DB;
    color: #1E89C5;
    font-weight: 300;
    font-size: 1rem;
}

.wanted .wanted_list form div:last-child {
    display: flex;
    justify-content: center;
}

.wanted .wanted_list form button {
    border: none;
    outline: none;
    cursor: pointer;
    background: #1E89C5;
    color: #fff;
    border-radius: 200px;
    padding: 10px 30px;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 1px;
    box-shadow: 0 0 5px #00000060;
}

.wanted .wanted_list form button:hover {
    background: #fff;
    color: #1E89C5;
}

@media screen and (max-width: 1440px) {
    .wanted .wanted_list {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    .wanted {
        padding: 0;
    }
}

@media screen and (max-width: 500px) {
    .wanted .wanted_list {
        padding: 30px 50px 30px 30px;
    }
    .wanted_title {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 400px) {
    .wanted_title {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 320px) {
    .wanted_title {
        font-size: 1rem;
    }
}


/* ------------------------------------------
color
--------------------------------------------- */

.color_Lab {
    padding: 0 10% 5% 10%;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-flow: row wrap;
}

.color_Lab .color_Lab_content {
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #00000030;
    background: #fff;
    padding: 10px;
    margin: 0 12px 30px 12px;
    width: 10%;
}

.color_Lab .color_Lab_content .color_Lab_name {
    margin: 10px 0 0 0;
    text-align: center;
    font-size: 1rem;
}

@media screen and (max-width: 1024px) {
    .color_Lab {
        padding: 0 5% 5% 5%;
    }
    .color_Lab .color_Lab_content .color_Lab_name {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 768px) {
    .color_Lab .color_Lab_content {
        padding: 5px;
        width: 15%;
    }
}

@media screen and (max-width: 500px) {
    .color_Lab .color_Lab_content {
        width: 20%;
    }
}

@media screen and (max-width: 375px) {
    .color_Lab .color_Lab_content .color_Lab_name {
        font-size: 0.75rem;
    }
}