@charset "utf-8";

/*********** 前後台編輯器區塊共用的CSS設定 ***********/



img {

    max-width: 100%;

    max-height: 100%;

    height: auto !important;

    display: inline-block;

    vertical-align: middle;

    line-height: 1;

}

.clearfix:after {

    visibility: hidden;

    display: block;

    font-size: 0;

    content: ' ';

    clear: both;

    height: 0;

}

/* start commented backslash hack \*/

* html .clearfix { height: 1%; }

.clearfix { display: block; }



.col {

    box-sizing: border-box;

}



.index-about-editor .about-row p{

    text-align: center;

    color: #5B4A40;

    font-size:14px;

}

.index-about-editor .col.col1 {
    position: relative;
}

.index-about-editor .col.col1:before {
    content: '';
    display: block;
    width: 700px;
    height: 800px;
    z-index: -99;
    border-top: 1px solid #135EAB;
    border-left: 1px solid #135EAB;
    position: absolute;
    top: 50px;
    left: 100px;
}

.index-about-editor .about-layout {
    position: absolute;
    top: 150px;
    left: 50px;
    text-align: left;
}

.index-about-editor .about-title {

    color: #135EAB;
    font-size: 34px;
    letter-spacing: 1px;
    font-family: 'Exo', serif;
    line-height: 1.2;
    margin-bottom: 20px;

}

.index-about-editor .about-txt {
    text-align: justify;
}

.index-about-editor .about-hr{

    width: 100%;

    margin-top: 18px;

}

.index-about-editor .about-row .col{
    position: relative;
    width: 40%;
    float: left;
    padding: 0 15px 30px;

}



.index-about-editor .about-row .pic{

   padding-bottom:20px;

    border-bottom: 4px double #EAE6DD;

}

.about-sect .editor .txt{
    font-size: 14px;
    color: #555;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 35px;
}

.about-sect .editor .txt img {
    max-width: 50%;
}
/************** *********/
/*關於我們內頁*/
.about-editor{
    position: relative;
    padding-bottom: 160px;
}
.about-editor:before{
    content: '';
    display: block;
    width: 60%;
    height: 25%;
    position: absolute;
    top: 7%;
    right: 8.8%;
    border-top: 1px solid #135EAB;
    border-right: 1px solid #135EAB;
    z-index: -99;

}

.about-editor:after{
    content: '';
    display: block;
    background: url(../../images/common/about/about_pic.png) no-repeat ;
    background-size: contain;
/*    width: 600px;
    height: 515px;*/
    width: 41.667%;
    padding-bottom: 500px;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.about-editor .about-col {
    margin-top: 40px;
}

.about-editor .about-col .about-title {
    font-size: 25px;
    font-family: 'Exo';
    color: #135EAB;
    padding-bottom: 25px;
}

.about-editor .about-col .about-txt {
    max-width: 50%;
    color: #555;
    padding: 20px 0px 20px;
    position: relative;
    text-align: justify;
}

.about-editor .about-col .about-txt:before {
    content: '';
    display: block;
    border-top: 1px solid #135EAB;
    width: 350px;
    height: 5px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.about-editor .about-col .about-txt:after {
    content: '';
    display: block;
    border-bottom: 1px solid #135EAB;
    width: 150px;
    height: 5px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.product-col{

    width: 50%;

    float: left;

  margin: 20px 0 40px;

    -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

            box-sizing: border-box;

}

.product-col img{

    float: none;

    margin:auto;

    display: block;

}

.editor .prodcut-p1{

    font-family: 'Arial';

    font-size: 14px;

    color: #444;

    margin: 0px;



}

.detail-pic01{

     margin: auto auto 40px;

        position: relative;

        display: block;

        padding: 0;

        max-width: 900px;

}

.editor .prodcut-p2{

    font-family: 'Exo';

    font-size: 22px;

    color: #135EAB;

    text-align: center;

    margin: 0px;

    margin-bottom: 8px;

}

.editor .prodcut-p3{

    font-family: 'Arial';

    font-size: 14px;

    color:#444;

    text-align: center;

    margin: 0px;

    margin-bottom: 58px;

}

.editor .prodcut-p4{

    font-family: 'Arial';

    font-size: 14px;

    color:#444;

    text-align: center;

    margin: 30px 0px;

    margin-bottom: 0px;

}







/****** *******/



.contact-editor .row {

    margin: 0 -2%;

}

.contact-editor .col {

    float: left;

    padding: 0 2%;

}

.contact-editor .col1 {

    width: 44%;

}

.contact-editor .col2 {

    width: 56%;

}

.contact-map {

    box-shadow: 0 0 4px 0 rgba(0,0,0,0.25);

    border: 8px solid #fff;

}

.contact-map iframe {

    display: block;

    max-height: 100%;

}

.contact-info-list {

    color: #555;

    font-size: 14px;

    list-style-type: none;

    padding: 0;

    margin: 0;

}

.contact-info-list li {

    position: relative;

    padding: 2px 0 2px 40px;

    margin: 8px 0;

    line-height: 25px;

}

.contact-info-list li:before {

    content: '';

    display: inline-block;

    background: url('../../images/common/contact/info_ic.png') no-repeat;

    width: 25px;

    height: 25px;

    position: absolute;

    left: 0;

    top: 0;

}

.contact-info-list li.tel:before  { background-position: 0 0; }

.contact-info-list li.mail:before { background-position: 0 50%; }

.contact-info-list li.addr:before { background-position: 0 100%; }

.contact-info-list a:hover {

    text-decoration: underline;

}

.notice_txt{

    color:#444;

    font-size:13px;

}

.notice_txt img{

        margin: auto;

    display: block;

}

.notice-editor-title {

    color: #135EAB;

    font-size: 20px;

    font-weight: 600;

    letter-spacing: 0.04em;

    margin: 0 0 0.4em;

}



.terms-title {

    color: #135EAB;

    font-size: 15px;

    margin: 0 0 0.5em;

}

.terms_txt {

    color: #555;

    font-size: 14px;

}



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

    .about-editor .row,

    .about-editor .col {

        display: block;

        width: auto;

    }

    .about-editor .row {

        max-width: 728px;

        margin: 0 auto;

    }

    .about-editor .col1 {

        padding: 0;

        margin-bottom: 4px;

    }

    .about-editor .col2 {

        padding: 30px;

    }

    .index-about-editor .about-layout {
        top: 100px;
    }

    .index-about-editor .about-row .col2 {
        width: 52%;
    }
    .index-about-txt {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 97px;
    }

}

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

    .editor .prodcut-p1{
        padding-left: 5px;
    }

    .about-editor:before {
        display: none;
    }

}

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

    .about-row .col{

        float: none;

        width: auto;

        padding:0 15px 5px;

    }

    .editor .about-title{

        font-size: 16px;

        margin: 3px 0;

    }

    .about-row .pic{

        padding-bottom: 5px;

    }

    .about-row p{

        margin: 5px 0;

    }

     .product-col{

        width: 100%;

        float: none;

    }

    .contact-editor {

        padding: 0 2%;

    }

    .contact-editor .col {

        width: 100%;

        padding: 0;

    }

    .contact-map {

        margin-bottom: 5px;

    }

    .product-col{

        margin:5px 0;

    }

    .detail-pic01{

        margin-bottom: 5px;

    }

    .editor .prodcut-p2{

        font-size: 16px;

        margin-bottom: 5px;

    }

    .editor .prodcut-p3,.editor .prodcut-p4,.editor .prodcut-p1{

        font-size: 14px;

        margin: 5px 0;

    }

    .notice-editor-title{

        font-size: 14px;

        margin-bottom: 5px;

    }

    .contact-info-list li{

        margin: 3px 0;

        line-height: 1.45;

        font-size: 14px

    }

    .terms-title{

        font-size: 16px;

        margin-bottom: 5px;

    }

}
@media screen and (max-width: 800px) {
    .about-editor:after{
        display: none;
    }
    .about-editor .about-col .about-title {
        text-align: center;
    }
    .about-editor .about-col .about-txt {
        max-width: 100%;
        text-align: center;
    }
    .about-editor .about-col .about-txt:after {
        left: 50%;
        margin-left: -75px;
    }
    .about-editor .about-col .about-txt:before {
        width: 100%;
    }
    .about-editor {
        padding-bottom: 10px;
    }
}

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

    .contact-map {

        height: 200px;

    }
    .about-editor .about-col .about-txt {
        max-width: 100%;
        text-align: left;
        text-align: justify;
    }

}